Fix line.getClientRect() calculations for line with a tension or low number of points

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+## 4.0.13 - 2019-10-02
+
+* Fix `line.getClientRect()` calculations for line with a tension or low number of points
+
 ## 4.0.12 - 2019-09-17
 
 * Fix some bugs when `Konva.Transformer` has `padding > 0`

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.0.12
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue Sep 17 2019
+   * Date: Wed Oct 02 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -10119,9 +10119,23 @@
       };
       // overload size detection
       Line.prototype.getSelfRect = function () {
-          var points;
+          var points = this.points();
+          if (points.length < 4) {
+              return {
+                  x: points[0] || 0,
+                  y: points[1] || 0,
+                  width: 0,
+                  height: 0
+              };
+          }
           if (this.tension() !== 0) {
-              points = this._getTensionPoints();
+              points = [
+                  points[0],
+                  points[1]
+              ].concat(this._getTensionPoints(), [
+                  points[points.length - 2],
+                  points[points.length - 2]
+              ]);
           }
           else {
               points = this.points();

src/shapes/Line.ts

@@ -185,9 +185,23 @@ export class Line<Config extends LineConfig = LineConfig> extends Shape<
   }
   // overload size detection
   getSelfRect() {
-    var points;
+    var points = this.points();
+    if (points.length < 4) {
+      return {
+        x: points[0] || 0,
+        y: points[1] || 0,
+        width: 0,
+        height: 0
+      };
+    }
     if (this.tension() !== 0) {
-      points = this._getTensionPoints();
+      points = [
+        points[0],
+        points[1],
+        ...this._getTensionPoints(),
+        points[points.length - 2],
+        points[points.length - 2]
+      ];
     } else {
       points = this.points();
     }

test/unit/shapes/Line-test.js

@@ -312,6 +312,61 @@ suite('Line', function() {
     assert.equal(rect.height, 52, 'check height');
   });
 
+  test('getClientRect with tension', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var line = new Konva.Line({
+      x: 0,
+      y: 0,
+      points: [75, 75, 100, 200, 300, 140],
+      tension: 0.5,
+      stroke: '#0f0'
+    });
+    layer.add(line);
+
+    var client = line.getClientRect();
+    var rect = new Konva.Rect(Object.assign({ stroke: 'red' }, client));
+    layer.add(rect);
+
+    stage.add(layer);
+
+    assert.equal(client.x, 56, 'check x');
+    assert.equal(client.y, 74, 'check y');
+    assert.equal(client.width, 245, 'check width');
+    assert.equal(client.height, 227, 'check height');
+  });
+
+  test.skip('getClientRect with low number of points', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var line = new Konva.Line({
+      x: 0,
+      y: 0,
+      points: [],
+      tension: 0.5,
+      stroke: '#0f0'
+    });
+    layer.add(line);
+    layer.draw();
+
+    var client = line.getClientRect();
+
+    assert.equal(client.x, -1, 'check x');
+    assert.equal(client.y, -1, 'check y');
+    assert.equal(client.width, 2, 'check width');
+    assert.equal(client.height, 2, 'check height');
+
+    line.points([10, 10]);
+
+    assert.equal(client.x, 10, 'check x');
+    assert.equal(client.y, 10, 'check y');
+    assert.equal(client.width, 0, 'check width');
+    assert.equal(client.height, 0, 'check height');
+  });
+
   test('line caching', function() {
     // Konva.pixelRatio = 1;
     var stage = addStage();

test/unit/shapes/Transformer-test.js

@@ -1684,7 +1684,20 @@ suite('Transformer', function() {
       },
       expectedWidth: 50,
       expectedHeight: 50
-    }
+    },
+    // {
+    //   name: 'top-left-reverse',
+    //   startPos: {
+    //     x: 0,
+    //     y: 0
+    //   },
+    //   endPos: {
+    //     x: 100,
+    //     y: 100
+    //   },
+    //   expectedWidth: 100,
+    //   expectedHeight: 100
+    // }
   ];
 
   test('if alt is pressed should transform around center', function() {