diff --git a/lib/empty-example/index.html b/lib/empty-example/index.html index 56c88a89b8..54b1bfdfe2 100644 --- a/lib/empty-example/index.html +++ b/lib/empty-example/index.html @@ -12,7 +12,7 @@ background-color: #1b1b1b; } - + diff --git a/src/core/p5.Graphics.js b/src/core/p5.Graphics.js index 42fdaa496b..204f489bdd 100644 --- a/src/core/p5.Graphics.js +++ b/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); diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index 4f3bcc70fb..18573da7f5 100644 --- a/src/core/p5.Renderer.js +++ b/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'; diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 23f74bec4b..f48716739f 100644 --- a/src/core/p5.Renderer2D.js +++ b/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])); } } diff --git a/src/dom/p5.Element.js b/src/dom/p5.Element.js index c7eaf26e32..0265a64c42 100644 --- a/src/dom/p5.Element.js +++ b/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) {