getClientRect cals fixes

CHANGELOG.md

@@ -14,6 +14,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 * Fixed flow for `contextmenu` event. Not it will be triggered on shapes too
 
+## Fixed
+
+* some bugs fixes for `group.getClientRect()`
+
 ## [2.0.2][2018-03-15]
 
 ## Fixed

konva.js

@@ -8006,7 +8006,10 @@
           context.rect(clipX, clipY, clipWidth, clipHeight);
         }
         context.clip();
-        m = transform.copy().invert().getMatrix();
+        m = transform
+          .copy()
+          .invert()
+          .getMatrix();
         context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
       }
 
@@ -8051,6 +8054,7 @@
         if (!child.isVisible()) {
           return;
         }
+
         var rect = child.getClientRect({ relativeTo: that });
 
         // skip invisible children (like empty groups)
@@ -8073,7 +8077,18 @@
         }
       });
 
-      if (this.children.length !== 0) {
+      // if child is group we need to make sure it has visible shapes inside
+      var shapes = this.find('Shape');
+      var hasVisible = false;
+      for (var i = 0; i < shapes.length; i++) {
+        var shape = shapes[i];
+        if (shape.isVisible()) {
+          hasVisible = true;
+          break;
+        }
+      }
+
+      if (hasVisible) {
         selfRect = {
           x: minX,
           y: minY,

src/Container.js

@@ -395,7 +395,10 @@
           context.rect(clipX, clipY, clipWidth, clipHeight);
         }
         context.clip();
-        m = transform.copy().invert().getMatrix();
+        m = transform
+          .copy()
+          .invert()
+          .getMatrix();
         context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
       }
 
@@ -440,6 +443,7 @@
         if (!child.isVisible()) {
           return;
         }
+
         var rect = child.getClientRect({ relativeTo: that });
 
         // skip invisible children (like empty groups)
@@ -462,7 +466,18 @@
         }
       });
 
-      if (this.children.length !== 0) {
+      // if child is group we need to make sure it has visible shapes inside
+      var shapes = this.find('Shape');
+      var hasVisible = false;
+      for (var i = 0; i < shapes.length; i++) {
+        var shape = shapes[i];
+        if (shape.isVisible()) {
+          hasVisible = true;
+          break;
+        }
+      }
+
+      if (hasVisible) {
         selfRect = {
           x: minX,
           y: minY,

test/unit/Container-test.js

@@ -2140,6 +2140,7 @@ suite('Container', function() {
       y: 10
     });
     group.add(new Konva.Group());
+    console.log(group.getClientRect());
     assert.deepEqual(group.getClientRect(), {
       x: 10,
       y: 10,
@@ -2148,6 +2149,46 @@ suite('Container', function() {
     });
   });
 
+  test('get client rect with deep nested hidden shape', function() {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+    var group = new Konva.Group({
+      draggable: true,
+      x: 100,
+      y: 40
+    });
+
+    var rect = new Konva.Rect({
+      height: 100,
+      width: 100,
+      fill: 'red'
+    });
+    group.add(rect);
+    layer.add(group);
+
+    var subGroup = new Konva.Group();
+    group.add(subGroup);
+
+    subGroup.add(
+      new Konva.Rect({
+        visible: false
+      })
+    );
+
+    stage.add(layer);
+    stage.draw();
+
+    var clientRect = group.getClientRect();
+
+    assert.deepEqual(clientRect, {
+      x: 100,
+      y: 40,
+      width: 100,
+      height: 100
+    });
+  });
+
   test('getClientRect - test empty group with invisible child', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
@@ -2256,7 +2297,10 @@ suite('Container', function() {
         data[3]
     );
 
-    data = layer.getHitCanvas().getContext().getImageData(76, 50, 1, 1).data;
+    data = layer
+      .getHitCanvas()
+      .getContext()
+      .getImageData(76, 50, 1, 1).data;
     isTransparent = data[3] == 0;
 
     assert.equal(
@@ -2272,7 +2316,10 @@ suite('Container', function() {
         data[3]
     );
 
-    data = layer.getHitCanvas().getContext().getImageData(50, 76, 1, 1).data;
+    data = layer
+      .getHitCanvas()
+      .getContext()
+      .getImageData(50, 76, 1, 1).data;
     isTransparent = data[3] == 0;
     assert.equal(
       isTransparent,
@@ -2369,8 +2416,10 @@ suite('Container', function() {
     stage.scale({ x: 2, y: 2 });
     stage.draw();
 
-    var data = layer.getHitCanvas().getContext().getImageData(48, 100, 1, 1)
+    var data = layer
-      .data;
+      .getHitCanvas()
+      .getContext()
+      .getImageData(48, 100, 1, 1).data;
     var isTransparent = data[3] == 0;
     assert.equal(
       isTransparent,
@@ -2385,7 +2434,10 @@ suite('Container', function() {
         data[3]
     );
 
-    data = layer.getHitCanvas().getContext().getImageData(100, 48, 1, 1).data;
+    data = layer
+      .getHitCanvas()
+      .getContext()
+      .getImageData(100, 48, 1, 1).data;
     isTransparent = data[3] == 0;
     assert.equal(
       isTransparent,
@@ -2400,7 +2452,10 @@ suite('Container', function() {
         data[3]
     );
 
-    data = layer.getHitCanvas().getContext().getImageData(152, 100, 1, 1).data;
+    data = layer
+      .getHitCanvas()
+      .getContext()
+      .getImageData(152, 100, 1, 1).data;
     isTransparent = data[3] == 0;
     assert.equal(
       isTransparent,
@@ -2415,7 +2470,10 @@ suite('Container', function() {
         data[3]
     );
 
-    data = layer.getHitCanvas().getContext().getImageData(100, 152, 1, 1).data;
+    data = layer
+      .getHitCanvas()
+      .getContext()
+      .getImageData(100, 152, 1, 1).data;
     isTransparent = data[3] == 0;
     assert.equal(
       isTransparent,

test/unit/shapes/Transformer-test.js

@@ -883,4 +883,31 @@ suite('Transformer', function() {
       y: 30
     });
   });
+
+  test('with strokes', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 20,
+      y: 60,
+      draggable: true,
+      width: 10,
+      height: 10,
+      fill: 'yellow',
+      strokeWidth: 2,
+      stroke: 'black',
+      scaleX: 10,
+      scaleY: 10
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      node: rect
+    });
+    layer.add(tr);
+
+    layer.draw();
+  });
 });