fix(): Object dispose

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(): object dispose removes canvas/event refs [#8673](https://github.com/fabricjs/fabric.js/issues/8673)
 - fix(test): Textbox `fromObject` test is incorrectly trying to restore an instance [#8686](https://github.com/fabricjs/fabric.js/pull/8686)
 - TS(): Moved cache properties to static properties on classes [#xxxx](https://github.com/fabricjs/fabric.js/pull/xxxx)
 - refactor(): Moved cache properties to static properties on classes [#8662](https://github.com/fabricjs/fabric.js/pull/8662)

src/Observable.ts

@@ -123,14 +123,20 @@ export class Observable<EventSpec> {
   }
 
   /**
-   * Stops event observing for a particular event handler. Calling this method
-   * without arguments removes all handlers for all events
-   * @param {string} eventName Event name (eg. 'after:render')
-   * @param {EventRegistryObject} handlers key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
-   * @param {Function} handler Function to be deleted from EventListeners
+   * unsubscribe an event listener
+   * @param {string} eventName event name (eg. 'after:render')
+   * @param {TEventCallback} handler event listener to unsubscribe
    */
   off<K extends keyof EventSpec>(eventName: K, handler: TEventCallback): void;
+  /**
+   * unsubscribe event listeners
+   * @param handlers handlers key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
+   */
   off(handlers: EventRegistryObject): void;
+  /**
+   * unsubscribe all event listeners
+   */
+  off(): void;
   off<K extends keyof EventSpec>(
     arg0?: K | EventRegistryObject,
     handler?: TEventCallback

src/canvas/StaticCanvas.ts

@@ -1654,11 +1654,11 @@ export class StaticCanvas<
     this.cancelRequestedRender();
     this.forEachObject((object) => object.dispose());
     this._objects = [];
-    if (this.backgroundImage && this.backgroundImage.dispose) {
+    if (this.backgroundImage) {
       this.backgroundImage.dispose();
     }
     this.backgroundImage = null;
-    if (this.overlayImage && this.overlayImage.dispose) {
+    if (this.overlayImage) {
       this.overlayImage.dispose();
     }
     this.overlayImage = null;

src/shapes/Object/Object.ts

@@ -1830,11 +1830,9 @@ export class FabricObject<
    * override if necessary to dispose artifacts such as `clipPath`
    */
   dispose() {
-    // todo verify this.
-    // runningAnimations is always truthy
-    if (runningAnimations) {
-      runningAnimations.cancelByTarget(this);
-    }
+    runningAnimations.cancelByTarget(this);
+    this.off();
+    this._set('canvas', undefined);
   }
 
   /**

test/unit/object.js

@@ -1316,12 +1316,19 @@
   });
   QUnit.test('dispose', function (assert) {
     var object = new fabric.Object({ fill: 'blue', width: 100, height: 100 });
+    let off = false;
+    object.off = () => {
+      off = true;
+    }
+    object.canvas = canvas;
     assert.ok(typeof object.dispose === 'function');
     object.animate({ fill: 'red' });
     const findAnimationsByTarget = target => fabric.runningAnimations.filter(({ target: t }) => target === t);
     assert.equal(findAnimationsByTarget(object).length, 1, 'runningAnimations should include the animation');
     object.dispose();
     assert.equal(findAnimationsByTarget(object).length, 0, 'runningAnimations should be empty after dispose');
+    assert.ok(!object.canvas, 'cleared canvas');
+    assert.ok(off, 'unsubscribe events');
   });
   QUnit.test('prototype changes', function (assert) {
     var object = new fabric.Object();