Merge pull request #7829 from perminder-17/createGraphics

Create Graphics fixing in dev-2.0 branch.

Author: davepagurek

lib/empty-example/index.html

@@ -12,7 +12,7 @@
       background-color: #1b1b1b;
     }
   </style>
-  <script src="../p5.rollup.min.js"></script>
+  <script src="../p5.min.js"></script>
   <!-- <script src="../addons/p5.sound.js"></script> -->
   <script src="sketch.js"></script>
 </head>

src/core/p5.Graphics.js

@@ -30,7 +30,7 @@ class Graphics {
     const r = renderer || constants.P2D;
 
     this._pInst = pInst;
-    this._renderer = new renderers[r](this._pInst, w, h, false, canvas);
+    this._renderer = new renderers[r](this, w, h, false, canvas);
 
     this._initializeInstanceVariables(this);
 

src/core/p5.Renderer.js

@@ -4,6 +4,16 @@
  * @for p5
  */
 
+/**
+ * `pInst` may be:
+ *  
+ *  The main sketch-wide `p5` instance (global canvas), or
+ *  an off-screen `p5.Graphics` wrapper.
+ *
+ * Therefore a renderer must only call properties / methods that exist
+ * on both objects.
+ */
+
 import { Color } from '../color/p5.Color';
 import * as constants from '../core/constants';
 import { Image } from '../image/p5.Image';

src/core/p5.Renderer2D.js

@@ -75,7 +75,6 @@ class Renderer2D extends Renderer {
     }
     // Set and return p5.Element
     this.wrappedElt = new Element(this.elt, this._pInst);
-
     this.clipPath = null;
   }
 
@@ -178,9 +177,10 @@ class Renderer2D extends Renderer {
       // create background rect
       const color = this._pInst.color(...args);
 
-      //accessible Outputs
-      if (this._pInst._addAccsOutput()) {
-        this._pInst._accsBackground(color._getRGBA([255, 255, 255, 255]));
+      // Add accessible outputs if the method exists; on success, 
+      // set the accessible output background to white.
+      if (this._pInst._addAccsOutput?.()) {
+        this._pInst._accsBackground?.(color._getRGBA([255, 255, 255, 255]));
       }
 
       const newFill = color.toString();
@@ -211,9 +211,10 @@ class Renderer2D extends Renderer {
     const color = this.states.fillColor;
     this._setFill(color.toString());
 
-    //accessible Outputs
-    if (this._pInst._addAccsOutput()) {
-      this._pInst._accsCanvasColors('fill', color._getRGBA([255, 255, 255, 255]));
+      // Add accessible outputs if the method exists; on success, 
+      // set the accessible output background to white.
+    if (this._pInst._addAccsOutput?.()) {
+      this._pInst._accsCanvasColors?.('fill', color._getRGBA([255, 255, 255, 255]));
     }
   }
 
@@ -222,9 +223,10 @@ class Renderer2D extends Renderer {
     const color = this.states.strokeColor;
     this._setStroke(color.toString());
 
-    //accessible Outputs
-    if (this._pInst._addAccsOutput()) {
-      this._pInst._accsCanvasColors('stroke', color._getRGBA([255, 255, 255, 255]));
+      // Add accessible outputs if the method exists; on success, 
+      // set the accessible output background to white.
+    if (this._pInst._addAccsOutput?.()) {
+      this._pInst._accsCanvasColors?.('stroke', color._getRGBA([255, 255, 255, 255]));
     }
   }
 

src/dom/p5.Element.js

@@ -63,11 +63,27 @@ class Element {
       }
     }
 
-    // delete the reference in this._pInst._elements
-    const index = this._pInst._elements.indexOf(this);
-    if (index !== -1) {
-      this._pInst._elements.splice(index, 1);
+    // `this._pInst` is usually the p5 “sketch” object that owns the global
+    // `_elements` array.  But when an element lives inside an off-screen
+    // `p5.Graphics` layer, `this._pInst` is that wrapper Graphics object
+    // instead.  The wrapper keeps a back–pointer (`_pInst`) to the real
+    // sketch but has no `_elements` array of its own. 
+   
+   let sketch = this._pInst;
+  
+    // If `sketch` doesn’t own an `_elements` array it means
+    // we’re still at the graphics-layer “wrapper”.  
+    // Jump one level up to the real p5 sketch stored in sketch._pInst.
+
+    if (sketch && !sketch._elements && sketch._pInst) {
+          sketch = sketch._pInst;          // climb one level up
     }
+    
+    if (sketch && sketch._elements) {  // only if the array exists
+      const i = sketch._elements.indexOf(this);
+      if (i !== -1) sketch._elements.splice(i, 1);
+    }
+     
 
     // deregister events
     for (let ev in this._events) {