Move DOM initialization from p5.Renderer to individual renderers

Author: limzykenneth

src/core/p5.Renderer.js

@@ -21,21 +21,9 @@ p5.Renderer = class Renderer {
   constructor(elt, pInst, isMainCanvas) {
     this._pInst = this._pixelsState = pInst;
     this._events = {};
-    this.canvas = elt;
-    this.width = this.canvas.offsetWidth;
-    this.height = this.canvas.offsetHeight;
 
     if (isMainCanvas) {
       this._isMainCanvas = true;
-      // for pixel method sharing with pimage
-      this._pInst._curElement = this;
-      this._pInst.canvas = this.canvas;
-      this._pInst.width = this.width;
-      this._pInst.height = this.height;
-    } else {
-      // hide if offscreen buffer by default
-      this.canvas.style.display = 'none';
-      this._styles = []; // non-main elt styles stored in p5.Renderer
     }
 
     // Renderer state machine
@@ -66,6 +54,13 @@ p5.Renderer = class Renderer {
     this._curveTightness = 0;
   }
 
+  createCanvas(w, h) {
+    this.width = w;
+    this.height = h;
+    this._pInst.width = this.width;
+    this._pInst.height = this.height;
+  }
+
   // Makes a shallow copy of the current states
   // and push it into the push pop stack
   push() {
@@ -108,20 +103,16 @@ p5.Renderer = class Renderer {
   /**
  * Resize our canvas element.
  */
-  resize (w, h) {
+  resize(w, h) {
     this.width = w;
     this.height = h;
-    this.canvas.width = w * this._pInst._pixelDensity;
-    this.canvas.height = h * this._pInst._pixelDensity;
-    this.canvas.style.width = `${w}px`;
-    this.canvas.style.height = `${h}px`;
     if (this._isMainCanvas) {
       this._pInst.width = this.width;
       this._pInst.height = this.height;
     }
   }
 
-  get (x, y, w, h) {
+  get(x, y, w, h) {
     const pixelsState = this._pixelsState;
     const pd = pixelsState._pixelDensity;
     const canvas = this.canvas;

src/core/p5.Renderer2D.js

@@ -15,9 +15,19 @@ const styleEmpty = 'rgba(0,0,0,0)';
 class Renderer2D extends Renderer {
   constructor(elt, pInst, isMainCanvas) {
     super(elt, pInst, isMainCanvas);
+    this.elt = elt;
+    this.canvas = elt;
     this.drawingContext = this.canvas.getContext('2d');
     this._pInst.drawingContext = this.drawingContext;
-    this.elt = elt;
+
+    if (isMainCanvas) {
+      // for pixel method sharing with pimage
+      this._pInst._curElement = this;
+      this._pInst.canvas = this.canvas;
+    } else {
+      // hide if offscreen buffer by default
+      this.canvas.style.display = 'none';
+    }
 
     // Extend renderer with methods of p5.Element with getters
     this.wrappedElt = new p5.Element(elt, pInst);
@@ -32,6 +42,18 @@ class Renderer2D extends Renderer {
     }
   }
 
+  // NOTE: renderer won't be created until instance createCanvas was called
+  // This createCanvas should handle the HTML stuff while other createCanvas
+  // be generic
+  createCanvas(w, h, canvas) {
+    super.createCanvas(w, h);
+    // this.canvas = this.elt = canvas || document.createElement('canvas');
+    // this.drawingContext = this.canvas.getContext('2d');
+    // this._pInst.drawingContext = this.drawingContext;
+
+    return this.wrappedElt;
+  }
+
   getFilterGraphicsLayer() {
     // create hidden webgl renderer if it doesn't exist
     if (!this.filterGraphicsLayer) {
@@ -76,6 +98,10 @@ class Renderer2D extends Renderer {
 
   resize(w, h) {
     super.resize(w, h);
+    this.canvas.width = w * this._pInst._pixelDensity;
+    this.canvas.height = h * this._pInst._pixelDensity;
+    this.canvas.style.width = `${w}px`;
+    this.canvas.style.height = `${h}px`;
     this.drawingContext.scale(
       this._pInst._pixelDensity,
       this._pInst._pixelDensity

src/core/rendering.js

@@ -133,6 +133,14 @@ p5.prototype.createCanvas = function (w, h, renderer, canvas) {
   p5._validateParameters('createCanvas', arguments);
   //optional: renderer, otherwise defaults to p2d
 
+  let selectedRenderer = constants.P2D
+  // Check third argument whether it is renderer constants
+  if(Reflect.ownKeys(renderers).includes(renderer)){
+    selectedRenderer = renderer;
+  }
+
+
+
   let r;
   if (arguments[2] instanceof HTMLCanvasElement) {
     renderer = constants.P2D;
@@ -217,29 +225,13 @@ p5.prototype.createCanvas = function (w, h, renderer, canvas) {
   }
 
   // Init our graphics renderer
-  //webgl mode
-  // if (r === constants.WEBGL) {
-  //   this._setProperty('_renderer', new p5.RendererGL(c, this, true));
-  //   this._elements.push(this._renderer);
-  //   NOTE: these needs to be taken cared of below
-  //     const dimensions =
-  //       this._renderer._adjustDimensions(w, h);
-  //     w = dimensions.adjustedWidth;
-  //     h = dimensions.adjustedHeight;
-  // } else {
-  //   //P2D mode
-  //   if (!this._defaultGraphicsCreated) {
-  //     this._setProperty('_renderer', new p5.Renderer2D(c, this, true));
-  //     this._defaultGraphicsCreated = true;
-  //     this._elements.push(this._renderer);
-  //   }
-  // }
   this._renderer = new renderers[r](c, this, true);
   this._defaultGraphicsCreated = true;
   this._elements.push(this._renderer);
-  // Instead of resize, just create with the right size in the first place
   this._renderer.resize(w, h);
   this._renderer._applyDefaults();
+  this._renderer.createCanvas(w, h, canvas);
+  // return this._renderer.createCanvas(w, h, canvas);
   return this._renderer;
 };
 

src/webgl/p5.RendererGL.js

@@ -435,6 +435,8 @@ export function readPixelWebGL(
 p5.RendererGL = class RendererGL extends Renderer {
   constructor(elt, pInst, isMainCanvas, attr) {
     super(elt, pInst, isMainCanvas);
+    this.elt = elt;
+    this.canvas = elt;
     this._setAttributeDefaults(pInst);
     this._initContext();
     this.isP3D = true; //lets us know we're in 3d mode
@@ -447,6 +449,15 @@ p5.RendererGL = class RendererGL extends Renderer {
     this.GL = this.drawingContext;
     this._pInst.drawingContext = this.drawingContext;
 
+    if (isMainCanvas) {
+      // for pixel method sharing with pimage
+      this._pInst._curElement = this;
+      this._pInst.canvas = this.canvas;
+    } else {
+      // hide if offscreen buffer by default
+      this.canvas.style.display = 'none';
+    }
+
     // Push/pop state
     this.states.uModelMatrix = new p5.Matrix();
     this.states.uViewMatrix = new p5.Matrix();
@@ -1432,6 +1443,10 @@ p5.RendererGL = class RendererGL extends Renderer {
  */
   resize(w, h) {
     Renderer.prototype.resize.call(this, w, h);
+    this.canvas.width = w * this._pInst._pixelDensity;
+    this.canvas.height = h * this._pInst._pixelDensity;
+    this.canvas.style.width = `${w}px`;
+    this.canvas.style.height = `${h}px`;
     this._origViewport = {
       width: this.GL.drawingBufferWidth,
       height: this.GL.drawingBufferHeight

utils/sample-linter.mjs

@@ -21,7 +21,7 @@ Object.keys(dataDoc.consts).forEach(c => {
 });
 
 dataDoc.classitems
-  .find(ci => ci.name === 'keyCode' && ci.class === 'p5')
+  .find(ci => ci.name === 'keyCode')
   .description.match(/[A-Z\r\n, _]{10,}/m)[0]
   .match(/[A-Z_]+/gm)
   .forEach(c => {
@@ -248,6 +248,7 @@ function splitLines(text) {
 
 eslintFiles(null, process.argv.slice(2))
   .then(result => {
+    if(result === true) process.exit(0);
     console.log(result.output);
     process.exit(result.report.errorCount === 0 ? 0 : 1);
   });