fix absolute position calculations for cached parent. close #753

CHANGELOG.md

@@ -5,6 +5,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+* Fix absolute position calculations for cached parent
+
 ## 4.0.13 - 2019-10-02
 
 * Fix `line.getClientRect()` calculations for line with a tension or low number of points

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.0.13
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Mon Oct 07 2019
+   * Date: Tue Oct 08 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2622,7 +2622,8 @@
       Node.prototype._clearSelfAndDescendantCache = function (attr) {
           this._clearCache(attr);
           // skip clearing if node is cached with canvas
-          if (this._getCanvasCache()) {
+          // for performance reasons !!!
+          if (this.isCached()) {
               return;
           }
           if (this.children) {
@@ -3365,6 +3366,20 @@
           };
       };
       Node.prototype.getAbsolutePosition = function (top) {
+          var haveCachedParent = false;
+          var parent = this.parent;
+          while (parent) {
+              if (parent.isCached()) {
+                  haveCachedParent = true;
+                  break;
+              }
+              parent = parent.parent;
+          }
+          if (haveCachedParent && !top) {
+              // make fake top element
+              // "true" is not a node, but it will just allow skip all caching
+              top = true;
+          }
           var absoluteMatrix = this.getAbsoluteTransform(top).getMatrix(), absoluteTransform = new Transform(), offset = this.offset();
           // clone the matrix array
           absoluteTransform.m = absoluteMatrix.slice();

src/Node.ts

@@ -271,7 +271,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     this._clearCache(attr);
 
     // skip clearing if node is cached with canvas
-    if (this._getCanvasCache()) {
+    // for performance reasons !!!
+    if (this.isCached()) {
       return;
     }
     if (this.children) {
@@ -1151,6 +1152,20 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     };
   }
   getAbsolutePosition(top?) {
+    let haveCachedParent = false;
+    let parent = this.parent;
+    while (parent) {
+      if (parent.isCached()) {
+        haveCachedParent = true;
+        break;
+      }
+      parent = parent.parent;
+    }
+    if (haveCachedParent && !top) {
+      // make fake top element
+      // "true" is not a node, but it will just allow skip all caching
+      top = true;
+    }
     var absoluteMatrix = this.getAbsoluteTransform(top).getMatrix(),
       absoluteTransform = new Transform(),
       offset = this.offset();

test/unit/Node-cache-test.js

@@ -1185,4 +1185,34 @@ suite('Caching', function() {
       false
     );
   });
+
+  test('getAbsolutePosition for cached container', function() {
+    var stage = addStage();
+
+    var layer = new Konva.Layer({});
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      x: 100,
+      y: 100,
+      radius: 10,
+      fill: 'red',
+      draggable: true,
+      scaleX: 10,
+      scaleY: 10
+    });
+    layer.add(circle);
+    // initial calculations
+    circle.getAbsolutePosition();
+    //
+
+    layer.cache();
+    layer.draw();
+    layer.position({
+      x: 10,
+      y: 10
+    });
+    assert.equal(circle.getAbsolutePosition().x, 110);
+    assert.equal(circle.getAbsolutePosition().y, 110);
+  });
 });