update CHANGELOG with new version

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+## 4.1.5 - 2020-02-16
+
+* Fixes for `path.getClientRect()` function calculations
+
 ## 4.1.4 - 2020-02-10
 
 * Fix wrong internal caching of absolute attributes

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.1.4
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Mon Feb 10 2020
+   * Date: Sun Feb 16 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -11587,12 +11587,38 @@
           var points = [];
           this.dataArray.forEach(function (data) {
               if (data.command === 'A') {
-                  points = points.concat([
+                  // Approximates by breaking curve into line segments
-                      data.points[0] - data.points[2],
+                  var start = data.points[4];
-                      data.points[1] - data.points[3],
+                  // 4 = theta
-                      data.points[0] + data.points[2],
+                  var dTheta = data.points[5];
-                      data.points[1] + data.points[3]
+                  // 5 = dTheta
-                  ]);
+                  var end = data.points[4] + dTheta;
+                  var inc = Math.PI / 180.0;
+                  // 1 degree resolution
+                  if (Math.abs(start - end) < inc) {
+                      inc = Math.abs(start - end);
+                  }
+                  if (dTheta < 0) {
+                      // clockwise
+                      for (var t = start - inc; t > end; t -= inc) {
+                          var point = Path.getPointOnEllipticalArc(data.points[0], data.points[1], data.points[2], data.points[3], t, 0);
+                          points.push(point.x, point.y);
+                      }
+                  }
+                  else {
+                      // counter-clockwise
+                      for (var t = start + inc; t < end; t += inc) {
+                          var point = Path.getPointOnEllipticalArc(data.points[0], data.points[1], data.points[2], data.points[3], t, 0);
+                          points.push(point.x, point.y);
+                      }
+                  }
+              }
+              else if (data.command === 'C') {
+                  // Approximates by breaking curve into 100 line segments
+                  for (var t = 0.0; t <= 1; t += 0.01) {
+                      var point = Path.getPointOnCubicBezier(t, data.start.x, data.start.y, data.points[0], data.points[1], data.points[2], data.points[3], data.points[4], data.points[5]);
+                      points.push(point.x, point.y);
+                  }
               }
               else {
                   // TODO: how can we calculate bezier curves better?

src/shapes/Path.ts

@@ -104,12 +104,60 @@ export class Path extends Shape<PathConfig> {
     var points = [];
     this.dataArray.forEach(function(data) {
       if (data.command === 'A') {
-        points = points.concat([
+        // Approximates by breaking curve into line segments
-          data.points[0] - data.points[2],
+        var start = data.points[4];
-          data.points[1] - data.points[3],
+        // 4 = theta
-          data.points[0] + data.points[2],
+        var dTheta = data.points[5];
-          data.points[1] + data.points[3]
+        // 5 = dTheta
-        ])
+        var end = data.points[4] + dTheta;
+        var inc = Math.PI / 180.0;
+        // 1 degree resolution
+        if (Math.abs(start - end) < inc) {
+          inc = Math.abs(start - end);
+        }
+        if (dTheta < 0) {
+          // clockwise
+          for (let t = start - inc; t > end; t -= inc) {
+            const point = Path.getPointOnEllipticalArc(
+              data.points[0],
+              data.points[1],
+              data.points[2],
+              data.points[3],
+              t,
+              0
+            );
+            points.push(point.x, point.y);
+          }
+        } else {
+          // counter-clockwise
+          for (let t = start + inc; t < end; t += inc) {
+            const point = Path.getPointOnEllipticalArc(
+              data.points[0],
+              data.points[1],
+              data.points[2],
+              data.points[3],
+              t,
+              0
+            );
+            points.push(point.x, point.y);
+          }
+        }
+      } else if (data.command === 'C') {
+        // Approximates by breaking curve into 100 line segments
+        for (let t = 0.0; t <= 1; t += 0.01) {
+          const point = Path.getPointOnCubicBezier(
+            t,
+            data.start.x,
+            data.start.y,
+            data.points[0],
+            data.points[1],
+            data.points[2],
+            data.points[3],
+            data.points[4],
+            data.points[5]
+          );
+          points.push(point.x, point.y);
+        }
       } else {
         // TODO: how can we calculate bezier curves better?
         points = points.concat(data.points);

test/unit/shapes/Path-test.js

@@ -1179,10 +1179,10 @@ suite('Path', function() {
     layer.add(back);
     layer.draw();
 
-    assert.deepEqual(rect, {x: 8, y: 65, width: 95, height: 56});
+    assert.deepEqual(rect, { x: 9, y: 66, width: 95, height: 55 });
   });
 
-  test.skip('getClientRect of another complex path', function() {
+  test('getClientRect of another complex path', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
     stage.add(layer);
@@ -1209,7 +1209,41 @@ suite('Path', function() {
     layer.add(back);
     layer.draw();
 
-    assert.deepEqual(rect, {x: 8, y: 65, width: 95, height: 56});
+    assert.deepEqual(rect, {
+      x: 49,
+      y: 49.7,
+      width: 215,
+      height: 71.39999999999999
+    });
+  });
+
+  test('getClientRect of one more path', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var path = new Konva.Path({
+      x: 50,
+      y: 50,
+      data:
+        'M25.21,2.36C22.11,6.1,19,10.17,22.1,15.52a2.14,2.14,0,0,1,.22.69c.18,1.09-.52,1.31-1.31,1.11C19.88,17,19.29,16,18.55,15.21a12.71,12.71,0,0,0-7.82-4.28c-3.24-.42-7.9,1.26-9,3.68-2.24,5-2.64,10.23.66,14.94a26,26,0,0,0,11.57,9c6.17,2.56,12.6,4.45,18.67,7.28,1.33.62,1.67-.14,2.11-1.12,3.84-8.44,5.64-17.32,6-28.25.53-3.82-1.37-8.64-4.3-13.12C33.91-.58,28.2-1.24,25.21,2.36Z',
+      fill: 'black',
+      stroke: 'red'
+    });
+    layer.add(path);
+    var rect = path.getClientRect();
+
+    var back = new Konva.Rect({
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      stroke: 'red'
+    });
+    layer.add(back);
+    layer.draw();
+
+    assert.deepEqual(rect, { x: 49, y: 49, width: 43, height: 48 });
   });
 
   test('getClientRect for arc', function() {
@@ -1227,16 +1261,13 @@ suite('Path', function() {
     layer.add(path);
     var rect = path.getClientRect();
 
-    var scale =  stage.height() / rect.height / 2;
+    var scale = stage.height() / rect.height / 2;
-
 
     path.x(-rect.x * scale);
     path.y(-rect.y * scale);
     path.scaleX(scale);
     path.scaleY(scale);
 
-    
-
     rect = path.getClientRect();
 
     var back = new Konva.Rect({
@@ -1249,6 +1280,11 @@ suite('Path', function() {
     layer.add(back);
     layer.draw();
 
-    assert.deepEqual(rect, {x: 0, y: 0, width: 132.53012048192795, height: 100});
+    assert.deepEqual(rect, {
+      x: 0,
+      y: 0,
+      width: 132.53012048192795,
+      height: 100
+    });
   });
 });