Fix processing#7049: P5.Graphics.remove() doesn't release all associa…

…ted resources

The proposed fix involves modifying the p5.Graphics.remove() method by setting this._renderer, this.canvas, and this.elt to undefined. Additionally, a boolean flag doubleClickedBool is introduced to prevent the execution of the draw() function after a double-click event, ensuring that the graphics object is not displayed again after removal. This provides a smoother user experience by preventing the graphics object from reappearing unexpectedly.

src/core/p5.Graphics.js

@@ -331,6 +331,7 @@ p5.Graphics = class extends p5.Element {
  * // Double-click to remove the p5.Graphics object.
  *
  * let pg;
+ * let doubleClickedBool = false;
  *
  * function setup() {
  *   createCanvas(100, 100);
@@ -350,7 +351,7 @@ p5.Graphics = class extends p5.Element {
  *
  *   // Display the p5.Graphics object if
  *   // it's available.
- *   if (pg) {
+ *   if (!doubleClickedBool) {
  *     image(pg, 20, 20);
  *   }
  * }
@@ -359,6 +360,7 @@ p5.Graphics = class extends p5.Element {
  * // the user double-clicks.
  * function doubleClicked() {
  *   pg.remove();
+ *   doubleClickedBool = true;
  * }
  * </code>
  * </div>
@@ -374,6 +376,10 @@ p5.Graphics = class extends p5.Element {
     for (const elt_ev in this._events) {
       this.elt.removeEventListener(elt_ev, this._events[elt_ev]);
     }
+
+    this._renderer = undefined;
+    this.canvas = undefined;
+    this.elt = undefined;
   }
 
 

test/unit/core/p5.Graphics.js

@@ -184,4 +184,14 @@ suite('Graphics', function() {
       assert(graph.height, 100);
     });
   });
+
+  suite('p5.Graphics.remove()', function() {
+    test('it sets properties to undefined after removal', function() {
+      var graph = myp5.createGraphics(10, 17);
+      graph.remove();
+      assert.isUndefined(graph.canvas);
+      assert.isUndefined(graph._renderer);
+      assert.isUndefined(graph.elt);
+    });
+  });
 });