Merge pull request #7295 from processing/initial-modules-refactor

Initial modules refactor

Author: limzykenneth

src/accessibility/outputs.js

@@ -543,7 +543,7 @@ function outputs(p5, fn){
   fn._getPos = function (x, y) {
     const untransformedPosition = new DOMPointReadOnly(x, y);
     const currentTransform = this._renderer.isP3D ?
-      new DOMMatrix(this._renderer.uMVMatrix.mat4) :
+      new DOMMatrix(this._renderer.states.uMVMatrix.mat4) :
       this.drawingContext.getTransform();
     const { x: transformedX, y: transformedY } = untransformedPosition
       .matrixTransform(currentTransform);
@@ -663,7 +663,7 @@ function outputs(p5, fn){
     ];
     //  Apply the inverse of the current transformations to the canvas corners
     const currentTransform = this._renderer.isP3D ?
-      new DOMMatrix(this._renderer.uMVMatrix.mat4) :
+      new DOMMatrix(this._renderer.states.uMVMatrix.mat4) :
       this.drawingContext.getTransform();
     const invertedTransform = currentTransform.inverse();
     const tc = canvasCorners.map(

src/color/setting.js

@@ -1209,8 +1209,8 @@ function setting(p5, fn){
    * @chainable
    */
   fn.fill = function(...args) {
-    this._renderer._setProperty('_fillSet', true);
-    this._renderer._setProperty('_doFill', true);
+    this._renderer.states.fillSet = true;
+    this._renderer.states.doFill = true;
     this._renderer.fill(...args);
     return this;
   };
@@ -1271,7 +1271,7 @@ function setting(p5, fn){
    * </div>
    */
   fn.noFill = function() {
-    this._renderer._setProperty('_doFill', false);
+    this._renderer.states.doFill = false;
     return this;
   };
 
@@ -1327,7 +1327,7 @@ function setting(p5, fn){
    * </div>
    */
   fn.noStroke = function() {
-    this._renderer._setProperty('_doStroke', false);
+    this._renderer.states.doStroke = false;
     return this;
   };
 
@@ -1581,8 +1581,8 @@ function setting(p5, fn){
    */
 
   fn.stroke = function(...args) {
-    this._renderer._setProperty('_strokeSet', true);
-    this._renderer._setProperty('_doStroke', true);
+    this._renderer.states.strokeSet = true;
+    this._renderer.states.doStroke = true;
     this._renderer.stroke(...args);
     return this;
   };

src/core/environment.js

@@ -410,9 +410,9 @@ p5.prototype.frameRate = function(fps) {
   if (typeof fps !== 'number' || fps < 0) {
     return this._frameRate;
   } else {
-    this._setProperty('_targetFrameRate', fps);
+    this._targetFrameRate = fps;
     if (fps === 0) {
-      this._setProperty('_frameRate', fps);
+      this._frameRate = fps;
     }
     return this;
   }
@@ -770,8 +770,8 @@ p5.prototype.windowHeight = 0;
  * This example does not render anything.
  */
 p5.prototype._onresize = function(e) {
-  this._setProperty('windowWidth', getWindowWidth());
-  this._setProperty('windowHeight', getWindowHeight());
+  this.windowWidth = getWindowWidth();
+  this.windowHeight = getWindowHeight();
   const context = this._isGlobal ? window : this;
   let executeDefault;
   if (typeof context.windowResized === 'function') {
@@ -805,8 +805,8 @@ function getWindowHeight() {
  * possibility of the window being resized when no sketch is active.
  */
 p5.prototype._updateWindowSize = function() {
-  this._setProperty('windowWidth', getWindowWidth());
-  this._setProperty('windowHeight', getWindowHeight());
+  this.windowWidth = getWindowWidth();
+  this.windowHeight = getWindowHeight();
 };
 
 /**

src/core/main.js

@@ -60,10 +60,6 @@ class p5 {
     this._loop = true;
     this._startListener = null;
     this._initializeInstanceVariables();
-    this._defaultCanvasSize = {
-      width: 100,
-      height: 100
-    };
     this._events = {
       // keep track of user-events for unregistering later
       mousemove: null,
@@ -87,8 +83,8 @@ class p5 {
     };
     this._millisStart = -1;
     this._recording = false;
-    this.touchstart = false;
-    this.touchend = false;
+    this._touchstart = false;
+    this._touchend = false;
 
     // States used in the custom random generators
     this._lcg_random_state = null; // NOTE: move to random.js
@@ -106,7 +102,30 @@ class p5 {
     // ensure correct reporting of window dimensions
     this._updateWindowSize();
 
-    const friendlyBindGlobal = this._createFriendlyGlobalFunctionBinder();
+    const bindGlobal = (property) => {
+      Object.defineProperty(window, property, {
+        configurable: true,
+        enumerable: true,
+        get: () => {
+          if(typeof this[property] === 'function'){
+            return this[property].bind(this);
+          }else{
+            return this[property];
+          }
+        },
+        set: (newValue) => {
+          Object.defineProperty(window, property, {
+            configurable: true,
+            enumerable: true,
+            value: newValue,
+            writable: true
+          });
+          if (!p5.disableFriendlyErrors) {
+            console.log(`You just changed the value of "${property}", which was a p5 global value. This could cause problems later if you're not careful.`);
+          }
+        }
+      })
+    };
     // If the user has created a global setup or draw function,
     // assume "global" mode and make everything global (i.e. on the window)
     if (!sketch) {
@@ -117,28 +136,14 @@ class p5 {
       // All methods and properties with name starting with '_' will be skipped
       for (const p of Object.getOwnPropertyNames(p5.prototype)) {
         if(p[0] === '_') continue;
-
-        if (typeof p5.prototype[p] === 'function') {
-          const ev = p.substring(2);
-          if (!this._events.hasOwnProperty(ev)) {
-            if (Math.hasOwnProperty(p) && Math[p] === p5.prototype[p]) {
-              // Multiple p5 methods are just native Math functions. These can be
-              // called without any binding.
-              friendlyBindGlobal(p, p5.prototype[p]);
-            } else {
-              friendlyBindGlobal(p, p5.prototype[p].bind(this));
-            }
-          }
-        } else {
-          friendlyBindGlobal(p, p5.prototype[p]);
-        }
+        bindGlobal(p);
       }
 
       // Attach its properties to the window
       for (const p in this) {
         if (this.hasOwnProperty(p)) {
           if(p[0] === '_') continue;
-          friendlyBindGlobal(p, this[p]);
+          bindGlobal(p);
         }
       }
     } else {
@@ -162,10 +167,10 @@ class p5 {
     }
 
     const focusHandler = () => {
-      this._setProperty('focused', true);
+      this.focused = true;
     };
     const blurHandler = () => {
-      this._setProperty('focused', false);
+      this.focused = false;
     };
     window.addEventListener('focus', focusHandler);
     window.addEventListener('blur', blurHandler);
@@ -217,8 +222,8 @@ class p5 {
     // Later on if the user calls createCanvas, this default one
     // will be replaced
     this.createCanvas(
-      this._defaultCanvasSize.width,
-      this._defaultCanvasSize.height,
+      100,
+      100,
       constants.P2D
     );
 
@@ -276,7 +281,6 @@ class p5 {
     ) {
       //mandatory update values(matrixes and stack)
       this.deltaTime = now - this._lastRealFrameTime;
-      this._setProperty('deltaTime', this.deltaTime);
       this._frameRate = 1000.0 / this.deltaTime;
       await this.redraw();
       this._lastTargetFrameTime = Math.max(this._lastTargetFrameTime
@@ -292,8 +296,8 @@ class p5 {
 
         //reset delta values so they reset even if there is no mouse event to set them
         // for example if the mouse is outside the screen
-        this._setProperty('movedX', 0);
-        this._setProperty('movedY', 0);
+        this.movedX = 0;
+        this.movedY = 0;
       }
     }
 
@@ -427,83 +431,6 @@ class p5 {
 
     this._downKeys = {}; //Holds the key codes of currently pressed keys
   }
-
-  _setProperty(prop, value) {
-    this[prop] = value;
-    if (this._isGlobal) {
-      window[prop] = value;
-    }
-  }
-
-  // create a function which provides a standardized process for binding
-  // globals; this is implemented as a factory primarily so that there's a
-  // way to redefine what "global" means for the binding function so it
-  // can be used in scenarios like unit testing where the window object
-  // might not exist
-  _createFriendlyGlobalFunctionBinder(options = {}) {
-    const globalObject = options.globalObject || window;
-    const log = options.log || console.log.bind(console);
-    const propsToForciblyOverwrite = {
-      // p5.print actually always overwrites an existing global function,
-      // albeit one that is very unlikely to be used:
-      //
-      //   https://developer.mozilla.org/en-US/docs/Web/API/Window/print
-      print: true
-    };
-
-    return (prop, value) => {
-      if (
-        !p5.disableFriendlyErrors &&
-        typeof IS_MINIFIED === 'undefined' &&
-        typeof value === 'function'
-      ) {
-        try {
-          // Because p5 has so many common function names, it's likely
-          // that users may accidentally overwrite global p5 functions with
-          // their own variables. Let's allow this but log a warning to
-          // help users who may be doing this unintentionally.
-          //
-          // For more information, see:
-          //
-          //   https://github.com/processing/p5.js/issues/1317
-
-          if (prop in globalObject && !(prop in propsToForciblyOverwrite)) {
-            throw new Error(`global "${prop}" already exists`);
-          }
-
-          // It's possible that this might throw an error because there
-          // are a lot of edge-cases in which `Object.defineProperty` might
-          // not succeed; since this functionality is only intended to
-          // help beginners anyways, we'll just catch such an exception
-          // if it occurs, and fall back to legacy behavior.
-          Object.defineProperty(globalObject, prop, {
-            configurable: true,
-            enumerable: true,
-            get() {
-              return value;
-            },
-            set(newValue) {
-              Object.defineProperty(globalObject, prop, {
-                configurable: true,
-                enumerable: true,
-                value: newValue,
-                writable: true
-              });
-              log(
-                `You just changed the value of "${prop}", which was a p5 function. This could cause problems later if you're not careful.`
-              );
-            }
-          });
-        } catch (e) {
-          let message = `p5 had problems creating the global function "${prop}", possibly because your code is already using that name as a variable. You may want to rename your variable to something else.`;
-          p5._friendlyError(message, prop);
-          globalObject[prop] = value;
-        }
-      } else {
-        globalObject[prop] = value;
-      }
-    };
-  }
 }
 
 // attach constants to p5 prototype

src/core/p5.Element.js

@@ -335,7 +335,7 @@ p5.Element = class {
     // This is required so that mouseButton is set correctly prior to calling the callback (fxn).
     // For details, see https://github.com/processing/p5.js/issues/3087.
     const eventPrependedFxn = function (event) {
-      this._pInst._setProperty('mouseIsPressed', true);
+      this._pInst.mouseIsPressed = true;
       this._pInst._setMouseButton(event);
       // Pass along the return-value of the callback:
       return fxn.call(this, event);
@@ -942,13 +942,6 @@ p5.Element = class {
     ctx.elt.removeEventListener(ev, f, false);
     ctx._events[ev] = null;
   }
-
-  /**
-   * Helper fxn for sharing pixel methods
-   */
-  _setProperty(prop, value) {
-    this[prop] = value;
-  }
 };
 
 /**