Better calculations for container.getClientRect()

CHANGELOG.md

@@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## Not released:
 
 * Warn on undefined return value of `dragBoundFunc`.
+* Better calculations for `container.getClientRect()`
 
 ## 4.0.15 - 2019-10-15
 

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.0.15
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Fri Oct 18 2019
+   * Date: Mon Oct 21 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -3264,6 +3264,9 @@
                   return true;
               }
           }
+          else if (relativeTo && relativeTo !== parent) {
+              return visible && parent._isVisible(relativeTo);
+          }
           else {
               return visible;
           }
@@ -15048,8 +15051,10 @@
               skipStroke: this.ignoreStroke()
           });
           var padding = this.padding();
-          var scaleX = (newAttrs.width - padding * 2) / pure.width;
-          var scaleY = (newAttrs.height - padding * 2) / pure.height;
+          var scaleX = pure.width ? (newAttrs.width - padding * 2) / pure.width : 1;
+          var scaleY = pure.height
+              ? (newAttrs.height - padding * 2) / pure.height
+              : 1;
           var rotation = Konva.getAngle(node.rotation());
           var dx = pure.x * scaleX - padding - node.offsetX() * scaleX;
           var dy = pure.y * scaleY - padding - node.offsetY() * scaleY;

src/Node.ts

@@ -1034,6 +1034,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       } else {
         return true;
       }
+    } else if (relativeTo && relativeTo !== parent) {
+      return visible && parent._isVisible(relativeTo);
     } else {
       return visible;
     }

src/shapes/Transformer.ts

@@ -735,8 +735,10 @@ export class Transformer extends Group {
     });
 
     var padding = this.padding();
-    var scaleX = (newAttrs.width - padding * 2) / pure.width;
-    var scaleY = (newAttrs.height - padding * 2) / pure.height;
+    var scaleX = pure.width ? (newAttrs.width - padding * 2) / pure.width : 1;
+    var scaleY = pure.height
+      ? (newAttrs.height - padding * 2) / pure.height
+      : 1;
 
     var rotation = Konva.getAngle(node.rotation());
     var dx = pure.x * scaleX - padding - node.offsetX() * scaleX;

test/unit/Container-test.js

@@ -928,7 +928,11 @@ suite('Container', function() {
     assert.equal(layer.find('Shape').length, 2, 'layer should have 2 shapes');
     assert.equal(layer.find('Layer').length, 0, 'layer should have 0 layers');
 
-    assert.equal(layer.find('Group, Rect').length, 3, 'layer should have 3 [group or rects]');
+    assert.equal(
+      layer.find('Group, Rect').length,
+      3,
+      'layer should have 3 [group or rects]'
+    );
 
     assert.equal(
       fooLayer.find('Group').length,
@@ -2333,6 +2337,49 @@ suite('Container', function() {
     });
   });
 
+  test('getClientRect - test group with visible child inside invisible parent', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer({
+      visible: false
+    });
+    stage.add(layer);
+    var group = new Konva.Group({
+      x: 10,
+      y: 10
+    });
+    layer.add(group);
+
+    var subGroup = new Konva.Group({
+      visible: false
+    });
+    group.add(subGroup);
+    subGroup.add(
+      new Konva.Rect({
+        x: 0,
+        y: 0,
+        width: 50,
+        height: 50,
+        visible: true
+      })
+    );
+    subGroup.add(
+      new Konva.Rect({
+        x: 400,
+        y: 400,
+        width: 50,
+        height: 50,
+        visible: true
+      })
+    );
+    layer.draw();
+    assert.deepEqual(group.getClientRect(), {
+      x: 10,
+      y: 10,
+      width: 0,
+      height: 0
+    });
+  });
+
   test('get client rect with deep nested hidden shape 2', function() {
     var layer = new Konva.Layer();
     var group = new Konva.Group({

test/unit/shapes/Transformer-test.js

@@ -1684,7 +1684,7 @@ suite('Transformer', function() {
       },
       expectedWidth: 50,
       expectedHeight: 50
-    },
+    }
     // {
     //   name: 'top-left-reverse',
     //   startPos: {
@@ -1970,6 +1970,38 @@ suite('Transformer', function() {
     assert.equal(rect.height(), 100);
   });
 
+  test('check calculations when the size = 0', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      draggable: true,
+      // can we fit from empty width?
+      width: 0,
+      height: 100,
+      fill: 'yellow'
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      node: rect
+    });
+    layer.add(tr);
+    layer.draw();
+
+    tr._fitNodeInto({
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100
+    });
+    layer.draw();
+    assert.equal(rect.scaleX(), 1, '');
+  });
+
   test('attrs change - arc', function() {
     var stage = addStage();
     var layer = new Konva.Layer();