change getClientRect calc

CHANGELOG.md

@@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Not released][Not released]
 
+### Changed
+- The `node.getClientRect()` calculation is changed a bit. It is more powerfull and correct. Also it takes parent transform into account. See docs.
+
 ## [1.6.7][2017-07-28]
 
 ### Fixed

src/Container.js

@@ -422,7 +422,11 @@
           !layerUnderDrag)
       );
     },
-    getClientRect: function(skipTransform) {
+    getClientRect: function(attrs) {
+      attrs = attrs || {};
+      var skipTransform = attrs.skipTransform;
+      var relativeTo = attrs.relativeTo;
+
       var minX, minY, maxX, maxY;
       var selfRect = {
         x: 0,
@@ -430,12 +434,13 @@
         width: 0,
         height: 0
       };
+      var that = this;
       this.children.each(function(child) {
         // skip invisible children
         if (!child.isVisible()) {
           return;
         }
-        var rect = child.getClientRect();
+        var rect = child.getClientRect({ relativeTo: that });
 
         // skip invisible children (like empty groups)
         // or don't skip... hmmm...
@@ -467,7 +472,7 @@
       }
 
       if (!skipTransform) {
-        return this._transformedRect(selfRect);
+        return this._transformedRect(selfRect, relativeTo);
       }
       return selfRect;
     }

src/Node.js

@@ -168,7 +168,10 @@
         */
     cache: function(config) {
       var conf = config || {},
-        rect = this.getClientRect(true),
+        rect = this.getClientRect({
+          skipTransform: true,
+          relativeTo: this.getParent()
+        }),
         width = conf.width || rect.width,
         height = conf.height || rect.height,
         pixelRatio = conf.pixelRatio,
@@ -255,7 +258,9 @@
          * The rectangle position is relative to parent container.
          * @method
          * @memberof Konva.Node.prototype
-         * @param {Boolean} [skipTransform] flag should we skip transformation to rectangle
+         * @param {Object} config
+         * @param {Boolean} [config.skipTransform] should we apply transform to node for calculating rect?
+         * @param {Object} [config.relativeTo] calculate client rect relative to one of the parents
          * @returns {Object} rect with {x, y, width, height} properties
          * @example
          * var rect = new Konva.Rect({
@@ -270,7 +275,7 @@
          * });
          *
          * // get client rect without think off transformations (position, rotation, scale, offset, etc)
-         * rect.getClientRect(true);
+         * rect.getClientRect({ skipTransform: true});
          * // returns {
          * //     x : -2,   // two pixels for stroke / 2
          * //     y : -2,
@@ -287,7 +292,7 @@
       // redefine in Container and Shape
       throw new Error('abstract "getClientRect" method call');
     },
-    _transformedRect: function(rect) {
+    _transformedRect: function(rect, top) {
       var points = [
         { x: rect.x, y: rect.y },
         { x: rect.x + rect.width, y: rect.y },
@@ -295,7 +300,7 @@
         { x: rect.x, y: rect.y + rect.height }
       ];
       var minX, minY, maxX, maxY;
-      var trans = this.getTransform();
+      var trans = this.getAbsoluteTransform(top);
       points.forEach(function(point) {
         var transformed = trans.point(point);
         if (minX === undefined) {

src/Shape.js

@@ -239,7 +239,11 @@
         height: size.height
       };
     },
-    getClientRect: function(skipTransform) {
+    getClientRect: function(attrs) {
+      attrs = attrs || {};
+      var skipTransform = attrs.skipTransform;
+      var relativeTo = attrs.relativeTo;
+
       var fillRect = this.getSelfRect();
 
       var strokeWidth = (this.hasStroke() && this.strokeWidth()) || 0;
@@ -275,7 +279,7 @@
           fillRect.y
       };
       if (!skipTransform) {
-        return this._transformedRect(rect);
+        return this._transformedRect(rect, relativeTo);
       }
       return rect;
     },

test/unit/Shape-test.js

@@ -1305,6 +1305,42 @@ suite('Shape', function() {
     assert.equal(rect.height, 100, 'should not effect width');
   });
 
+  test('getClientRect for shape in transformed parent', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var group = new Konva.Group({
+      x: 110,
+      y: 0,
+      rotation: 90
+    });
+    layer.add(group);
+
+    var shape = new Konva.Rect({
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      fill: 'green'
+    });
+    group.add(shape);
+
+    var relativeRect = shape.getClientRect({ relativeTo: group });
+
+    assert.equal(relativeRect.x, 0);
+    assert.equal(relativeRect.y, 0);
+    assert.equal(relativeRect.width, 100);
+    assert.equal(relativeRect.height, 100);
+
+    var absRect = shape.getClientRect();
+
+    assert.equal(absRect.x, 10);
+    assert.equal(absRect.y, 0);
+    assert.equal(absRect.width, 100);
+    assert.equal(absRect.height, 100);
+  });
+
   test('shadow should respect pixel ratio', function() {
     var stage = addStage();
     var layer = new Konva.Layer();

test/unit/shapes/Line-test.js

@@ -277,7 +277,7 @@ suite('Line', function() {
     layer.add(poly);
     stage.add(layer);
 
-    var rect = layer.getClientRect();
+    var rect = layer.getClientRect({ relativeTo: stage });
     assert.deepEqual(rect, {
       x: -100,
       y: 0,