Performance fixes for caching

CHANGELOG.md

@@ -5,6 +5,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [new version][unreleased]
 
+### Fixed
+* Performance fixes for caching
+
 ## [2.4.2][2018-10-12]
 
 ### Fixed

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v2.4.2
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Fri Oct 12 2018
+ * Date: Mon Oct 15 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2689,16 +2689,27 @@
      * });
      */
     cache: function(config) {
-      var conf = config || {},
+      var conf = config || {};
+      var rect = {};
+
+      // don't call getClientRect if we have all attributes
+      // it means call it only if have one undefined
+      if (
+        conf.x === undefined ||
+        conf.y === undefined ||
+        conf.width === undefined ||
+        conf.height === undefined
+      ) {
         rect = this.getClientRect({
           skipTransform: true,
           relativeTo: this.getParent()
-        }),
-        width = conf.width || rect.width,
+        });
+      }
+      var width = conf.width || rect.width,
         height = conf.height || rect.height,
         pixelRatio = conf.pixelRatio,
-        x = conf.x || rect.x,
-        y = conf.y || rect.y,
+        x = conf.x === undefined ? rect.x : conf.x,
+        y = conf.y === undefined ? rect.y : conf.y,
         offset = conf.offset || 0,
         drawBorder = conf.drawBorder || false;
 

src/Node.js

@@ -166,16 +166,27 @@
      * });
      */
     cache: function(config) {
-      var conf = config || {},
+      var conf = config || {};
+      var rect = {};
+
+      // don't call getClientRect if we have all attributes
+      // it means call it only if have one undefined
+      if (
+        conf.x === undefined ||
+        conf.y === undefined ||
+        conf.width === undefined ||
+        conf.height === undefined
+      ) {
         rect = this.getClientRect({
           skipTransform: true,
           relativeTo: this.getParent()
-        }),
-        width = conf.width || rect.width,
+        });
+      }
+      var width = conf.width || rect.width,
         height = conf.height || rect.height,
         pixelRatio = conf.pixelRatio,
-        x = conf.x || rect.x,
-        y = conf.y || rect.y,
+        x = conf.x === undefined ? rect.x : conf.x,
+        y = conf.y === undefined ? rect.y : conf.y,
         offset = conf.offset || 0,
         drawBorder = conf.drawBorder || false;
 

test/unit/Node-cache-test.js

@@ -970,4 +970,38 @@ suite('Caching', function() {
     var shape = stage.getIntersection({ x: 100, y: 100 });
     assert.equal(shape, bigCircle);
   });
+
+  // for performance reasons
+  it('do no call client rect calculation, if we do not need it', function() {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var group = new Konva.Group();
+    layer.add(group);
+
+    var bigCircle = new Konva.Circle({
+      x: 100,
+      y: 100,
+      radius: 100,
+      fill: 'green'
+    });
+    group.add(bigCircle);
+
+    layer.draw();
+
+    var called = false;
+    group.getClientRect = function() {
+      called = true;
+    };
+    group.cache({
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100
+    });
+
+    assert.equal(called, false);
+  });
 });