fix(StaticCanvas): cancelling animations on dispose (#9361)

fabricjs · Sep 22, 2023 · ef27fcd · ef27fcd
1 parent d217b0f
commit ef27fcd
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(StaticCanvas): disposing animations [#9361](https://github.com/fabricjs/fabric.js/pull/9361)
 - fix(IText): cursor width under group [#9341](https://github.com/fabricjs/fabric.js/pull/9341)
 - TS(Canvas): constructor optional el [#9348](https://github.com/fabricjs/fabric.js/pull/9348)
 

diff --git a/src/canvas/StaticCanvas.ts b/src/canvas/StaticCanvas.ts
@@ -24,6 +24,7 @@ import {
   cancelAnimFrame,
   requestAnimFrame,
 } from '../util/animation/AnimationFrameProvider';
+import { runningAnimations } from '../util/animation/AnimationRegistry';
 import { uid } from '../util/internals/uid';
 import { createCanvasElement, toDataURL } from '../util/misc/dom';
 import { invertTransform, transformPoint } from '../util/misc/matrix';
@@ -1440,6 +1441,7 @@ export class StaticCanvas<
   dispose() {
     !this.disposed &&
       this.elements.cleanupDOM({ width: this.width, height: this.height });
+    runningAnimations.cancelByCanvas(this);
     this.disposed = true;
     return new Promise<boolean>((resolve, reject) => {
       const task = () => {

diff --git a/src/util/animation/AnimationRegistry.ts b/src/util/animation/AnimationRegistry.ts
@@ -1,4 +1,4 @@
-import type { Canvas } from '../../canvas/Canvas';
+import type { StaticCanvas } from '../../canvas/StaticCanvas';
 import type { FabricObject } from '../../shapes/Object/FabricObject';
 import type { AnimationBase } from './AnimationBase';
 
@@ -25,17 +25,18 @@ class AnimationRegistry extends Array<AnimationBase> {
   }
 
   /**
-   * Cancel all running animations attached to a Canvas on the next frame
-   * @param {Canvas} canvas
+   * Cancel all running animations attached to a canvas on the next frame
+   * @param {StaticCanvas} canvas
    */
-  cancelByCanvas(canvas: Canvas) {
+  cancelByCanvas(canvas: StaticCanvas) {
     if (!canvas) {
       return [];
     }
     const animations = this.filter(
       (animation) =>
-        typeof animation.target === 'object' &&
-        (animation.target as FabricObject)?.canvas === canvas
+        animation.target === canvas ||
+        (typeof animation.target === 'object' &&
+          (animation.target as FabricObject)?.canvas === canvas)
     );
     animations.forEach((animation) => animation.abort());
     return animations;

diff --git a/test/unit/canvas_dispose.js b/test/unit/canvas_dispose.js
@@ -173,6 +173,33 @@ function assertCanvasDisposing(klass) {
         });
         animate();
     });
+
+    QUnit.test('disposing during animation should cancel it by target', function (assert) {
+        const done = assert.async();
+        const canvas = new klass(null, { renderOnAddRemove: false });
+        let called = 0;
+        const animate = () => fabric.util.animate({
+            target: canvas,
+            onChange() {
+                if (called === 1) {
+                    assert.equal(fabric.runningAnimations[0].target, canvas, 'should register the animation by target');
+                    canvas.dispose().then(() => {
+                        assert.deepEqual(fabric.runningAnimations, [], 'should cancel the animation');
+                        done();
+                    });
+                    assert.ok(canvas.disposed, 'should flag `disposed`');
+                }
+                called++;
+                canvas.contextTopDirty = true;
+                canvas.hasLostContext = true;
+                canvas.renderAll();
+            },
+            onComplete() {
+                animate();
+            }
+        });
+        animate();
+    });
 }
 
 function testStaticCanvasDisposing() {