Merge branch 'chore/upgrade-eslint' of https://github.com/error-four-o-four/forked-p5.js into chore/upgrade-eslint

Author: error-four-o-four

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/dom.js

@@ -1932,7 +1932,7 @@ function dom(p5, fn){
    *     let y = i * 20;
    *
    *     // Draw the image.
-   *     image(img, 0, y, 100, 100);
+   *     image(images[i], 0, y, 100, 100);
    *   }
    *
    *   describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');

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) {

src/dom/p5.MediaElement.js

@@ -1335,15 +1335,6 @@ function media(p5, fn){
       elt.appendChild(sourceEl);
     }
 
-    // If callback is provided, attach to element
-    if (typeof callback === 'function') {
-      const callbackHandler = () => {
-        callback();
-        elt.removeEventListener('canplaythrough', callbackHandler);
-      };
-      elt.addEventListener('canplaythrough', callbackHandler);
-    }
-
     const mediaEl = addElement(elt, pInst, true);
     mediaEl.loadedmetadata = false;
 
@@ -1362,6 +1353,15 @@ function media(p5, fn){
       mediaEl.loadedmetadata = true;
     });
 
+    // If callback is provided, attach to element
+    if (typeof callback === 'function') {
+      const callbackHandler = () => {
+        callback(mediaEl);
+        elt.removeEventListener('canplaythrough', callbackHandler);
+      };
+      elt.addEventListener('canplaythrough', callbackHandler);
+    }
+
     return mediaEl;
   }
 

src/type/p5.Font.js

@@ -950,6 +950,9 @@ async function create(pInst, name, path, descriptors, rawFont) {
   // add it to the document
   document.fonts.add(face);
 
+  // ensure the font is ready to be rendered
+  await document.fonts.ready;
+
   // return a new p5.Font
   return new Font(pInst, face, name, path, rawFont);
 }