Fixed tween destroy memory leak. close #1898

CHANGELOG.md

@@ -3,6 +3,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 9.3.21 (not released)
+
+- Fixed memory leaks on Tween destroy
+- Fixed incorrect export of stage/layer when internal nodes used buffer canvas for rendering
+
 ## 9.3.20 (2025-03-20)
 
 - Fix text rendering when ellipses are used

src/Tween.ts

@@ -200,8 +200,7 @@ export class Tween {
       nodeId = node._id,
       easing = config.easing || Easings.Linear,
       yoyo = !!config.yoyo;
-    let duration,
-      key;
+    let duration, key;
 
     if (typeof config.duration === 'undefined') {
       duration = 0.3;
@@ -268,11 +267,7 @@ export class Tween {
   _addAttr(key, end) {
     const node = this.node,
       nodeId = node._id;
-    let diff,
-      len,
-      trueEnd,
-      trueStart,
-      endRGBA;
+    let diff, len, trueEnd, trueStart, endRGBA;
 
     // remove conflict from tween map if it exists
     const tweenId = Tween.tweens[nodeId][key];
@@ -352,14 +347,7 @@ export class Tween {
   _tweenFunc(i) {
     const node = this.node,
       attrs = Tween.attrs[node._id][this._id];
-    let key,
-      attr,
-      start,
-      diff,
-      newVal,
-      n,
-      len,
-      end;
+    let key, attr, start, diff, newVal, n, len, end;
 
     for (key in attrs) {
       attr = attrs[key];
@@ -528,11 +516,26 @@ export class Tween {
 
     this.pause();
 
+    // Clean up animation
+    if (this.anim) {
+      this.anim.stop();
+    }
+
+    // Clean up tween entries
     for (const key in attrs) {
       delete Tween.tweens[nodeId][key];
     }
 
+    // Clean up attrs entry
     delete Tween.attrs[nodeId][thisId];
+
+    // Clean up parent objects if empty
+    if (Object.keys(Tween.tweens[nodeId]).length === 0) {
+      delete Tween.tweens[nodeId];
+    }
+    if (Object.keys(Tween.attrs[nodeId]).length === 0) {
+      delete Tween.attrs[nodeId];
+    }
   }
 }
 

test/unit-tests.html

@@ -11,6 +11,7 @@
     <script type="module">
       // CORE
       import './unit/Animation-test.ts';
+      import './unit/Tween-test.ts';
       import './unit/Canvas-test.ts';
       import './unit/Container-test.ts';
       import './unit/Context-test.ts';

test/unit/Tween-test.ts

@@ -98,8 +98,8 @@ describe('Tween', function () {
 
     tween.destroy();
 
-    assert.equal(Konva.Tween.tweens[circle._id].x, undefined);
-    assert.equal(Konva.Tween.attrs[circle._id][tween._id], undefined);
+    assert.equal(Konva.Tween.tweens[circle._id], undefined);
+    assert.equal(Konva.Tween.attrs[circle._id], undefined);
   });
 
   // ======================================================
@@ -238,7 +238,7 @@ describe('Tween', function () {
       duration: 0.1,
       onFinish: function () {
         assert.equal(circle.x(), stage.width() / 2);
-        assert.equal(Object.keys(Konva.Tween.attrs[circle._id]).length, 0);
+        assert.equal(Konva.Tween.attrs[circle._id], undefined);
         done();
       },
     });
@@ -305,16 +305,10 @@ describe('Tween', function () {
       points: [100, 100, 200, 100, 200, 200, 100, 200],
       duration: 0.1,
       onFinish: function () {
-        assert.deepEqual(line.points(), [
-          100,
-          100,
-          200,
-          100,
-          200,
-          200,
-          100,
-          200,
-        ]);
+        assert.deepEqual(
+          line.points(),
+          [100, 100, 200, 100, 200, 200, 100, 200]
+        );
         done();
       },
     });
@@ -364,16 +358,10 @@ describe('Tween', function () {
         tween.reverse();
       },
       onReset: function () {
-        assert.deepEqual(line.points(), [
-          100,
-          100,
-          200,
-          100,
-          200,
-          200,
-          100,
-          200,
-        ]);
+        assert.deepEqual(
+          line.points(),
+          [100, 100, 200, 100, 200, 200, 100, 200]
+        );
         done();
       },
     });