Fix wrong internal caching of absolute attributes. fix #843

CHANGELOG.md

@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+* Fix wrong internal caching of absolute attributes
 * Fix `Konva.Transformer` behavior on scaled with CSS stage
 
 ## 4.1.3 - 2020-01-30

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.1.3
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Thu Feb 06 2020
+   * Date: Mon Feb 10 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -3082,14 +3082,18 @@
           this._remove();
           return this;
       };
+      Node.prototype._clearCaches = function () {
+          this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+          this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
+          this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
+          this._clearSelfAndDescendantCache(STAGE);
+          this._clearSelfAndDescendantCache(VISIBLE);
+          this._clearSelfAndDescendantCache(LISTENING);
+      };
       Node.prototype._remove = function () {
           // every cached attr that is calculated via node tree
           // traversal must be cleared when removing a node
-          this._clearSelfAndDescendantCache(STAGE);
+          this._clearCaches();
-          this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
-          this._clearSelfAndDescendantCache(VISIBLE);
-          this._clearSelfAndDescendantCache(LISTENING);
-          this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
           var parent = this.getParent();
           if (parent && parent.children) {
               parent.children.splice(this.index, 1);
@@ -5228,13 +5232,14 @@
               }
               return this;
           }
-          var child = arguments[0];
+          var child = children[0];
           if (child.getParent()) {
               child.moveTo(this);
               return this;
           }
           var _children = this.children;
           this._validateAdd(child);
+          child._clearCaches();
           child.index = _children.length;
           child.parent = this;
           _children.push(child);

src/Container.ts

@@ -123,13 +123,14 @@ export abstract class Container<ChildType extends Node> extends Node<
       }
       return this;
     }
-    var child = arguments[0];
+    var child = children[0];
     if (child.getParent()) {
       child.moveTo(this);
       return this;
     }
     var _children = this.children;
     this._validateAdd(child);
+    child._clearCaches();
     child.index = _children.length;
     child.parent = this;
     _children.push(child);

src/Node.ts

@@ -843,14 +843,19 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     this._remove();
     return this;
   }
+  _clearCaches() {
+    this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+    this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
+    this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
+    this._clearSelfAndDescendantCache(STAGE);
+    this._clearSelfAndDescendantCache(VISIBLE);
+    this._clearSelfAndDescendantCache(LISTENING);
+  }
   _remove() {
     // every cached attr that is calculated via node tree
     // traversal must be cleared when removing a node
-    this._clearSelfAndDescendantCache(STAGE);
+    this._clearCaches();
-    this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+
-    this._clearSelfAndDescendantCache(VISIBLE);
-    this._clearSelfAndDescendantCache(LISTENING);
-    this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
     var parent = this.getParent();
 
     if (parent && parent.children) {

test/unit/Node-test.js

@@ -3783,4 +3783,47 @@ suite('Node', function() {
     assert.equal(callCount, 2);
     Konva.Util.warn = oldWarn;
   });
+
+  test('check transform caching', function() {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+
+    var rect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      width: 150,
+      height: 50,
+      stroke: 'black',
+      strokeWidth: 4
+    });
+
+    var text00 = new Konva.Text({
+      text: 'Sample text',
+      x: 50,
+      y: 50,
+      fontSize: 20
+    });
+
+    layer.add(rect);
+    layer.add(text00);
+
+    stage.add(layer);
+
+    stage.x(+40);
+    stage.y(+40);
+
+    stage.draw();
+
+    layer.removeChildren();
+    text00.getClientRect({}); // Commenting this line or putting it after line 41 puts text in rectangle
+
+    layer.add(text00);
+    layer.add(rect);
+
+    stage.draw();
+
+    assert.equal(text00.getClientRect().x, 90);
+    assert.equal(text00.getClientRect().y, 90);
+  });
 });