fix wrong Path getClientRect() calculation

CHANGELOG.md

@@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Fixed
 - repair `cancelBubble` event property behaviour
+- fix wrong `Path` `getClientRect()` calculation
 
 ## [0.11.1][2016-01-16]
 

konva.js

@@ -3,7 +3,7 @@
  * Konva JavaScript Framework v0.11.1
  * http://konvajs.github.io/
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Tue Jan 26 2016
+ * Date: Fri Feb 05 2016
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@@ -14157,8 +14157,8 @@
             });
             var minX = points[0];
             var maxX = points[0];
-            var minY = points[0];
+            var minY = points[1];
-            var maxY = points[0];
+            var maxY = points[1];
             var x, y;
             for (var i = 0; i < points.length / 2; i++) {
                 x = points[i * 2]; y = points[i * 2 + 1];

src/plugins/Path.js

@@ -99,8 +99,8 @@
             });
             var minX = points[0];
             var maxX = points[0];
-            var minY = points[0];
+            var minY = points[1];
-            var maxY = points[0];
+            var maxY = points[1];
             var x, y;
             for (var i = 0; i < points.length / 2; i++) {
                 x = points[i * 2]; y = points[i * 2 + 1];

test/unit/plugins/Path-test.js

@@ -40,7 +40,7 @@ suite('Path', function() {
         assert.equal(path.dataArray.length, 1);
 
         path.setData('M200,100h100v50z');
-        
+
         assert.equal(path.getClassName(), 'Path');
 
     });
@@ -83,7 +83,7 @@ suite('Path', function() {
         stage.add(layer);
 
     });
-    
+
     //=======================================================
     test('complex path made of many different closed and open paths (Sopwith Camel)', function() {
         var stage = addStage();
@@ -128,11 +128,11 @@ suite('Path', function() {
         showHit(layer)
 
     });
-    
-    
 
-    
+
-    
+
+
+
     // ======================================================
     test('moveTo with implied lineTos and trailing comma', function() {
         var stage = addStage();
@@ -187,7 +187,7 @@ suite('Path', function() {
 //        context.stroke();
         compareLayerAndCanvas(layer, canvas, 20);
     });
-    
+
     // ======================================================
     test('add map path', function() {
         var stage = addStage();
@@ -224,7 +224,7 @@ suite('Path', function() {
 
         //document.body.appendChild(mapLayer.bufferCanvas.element);
     });
-    
+
     // ======================================================
     test('curved arrow path', function() {
         var stage = addStage();
@@ -253,7 +253,7 @@ suite('Path', function() {
         stage.add(layer);
 
     });
-    
+
     // ======================================================
     test('Quadradic Curve test from SVG w3c spec', function() {
         var stage = addStage();
@@ -313,7 +313,7 @@ suite('Path', function() {
         stage.add(layer);
 
     });
-    
+
     // ======================================================
     test('Cubic Bezier Curve test from SVG w3c spec using setData', function() {
         var stage = addStage();
@@ -382,7 +382,7 @@ suite('Path', function() {
         stage.add(layer);
 
     });
-    
+
     // ======================================================
     test('path arc', function() {
         var stage = addStage();
@@ -411,7 +411,7 @@ suite('Path', function() {
         stage.add(layer);
 
     });
-    
+
     // ======================================================
     test('Tiger (RAWR!)', function() {
         this.timeout(5000);
@@ -454,7 +454,7 @@ suite('Path', function() {
         cloneAndCompareLayer(layer, 200);
 
     });
-    
+
     // ======================================================
     test('Able to determine point on line some distance from another point on line', function() {
         var stage = addStage();
@@ -493,7 +493,7 @@ suite('Path', function() {
         stage.add(layer);
 
     });
-    
+
     // ======================================================
     test('Able to determine points on Cubic Bezier Curve', function() {
         var stage = addStage();
@@ -530,7 +530,7 @@ suite('Path', function() {
         layer.add(testPath);
         stage.add(layer);
     });
-    
+
     // ======================================================
     test('Able to determine points on Quadratic Curve', function() {
         var stage = addStage();
@@ -567,7 +567,7 @@ suite('Path', function() {
         layer.add(testPath);
         stage.add(layer);
     });
-    
+
     // ======================================================
     test('Able to determine points on Elliptical Arc with clockwise stroke', function() {
         var stage = addStage();
@@ -623,7 +623,7 @@ suite('Path', function() {
         layer.add(testpath);
         stage.add(layer);
     });
-    
+
     // ======================================================
     test('Able to determine points on Elliptical Arc with counter-clockwise stroke', function() {
         var stage = addStage();
@@ -679,7 +679,7 @@ suite('Path', function() {
         layer.add(testpath);
         stage.add(layer);
     });
-    
+
     // ======================================================
     test('Able to determine points on Elliptical Arc when rotated', function() {
         var stage = addStage();
@@ -737,7 +737,7 @@ suite('Path', function() {
         layer.add(testpath);
         stage.add(layer);
     });
-    
+
     // ======================================================
     test('getPointOnLine for different directions', function() {
         var origo = {
@@ -811,7 +811,7 @@ suite('Path', function() {
         point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
         assert(Math.abs(point.x) < 0.0000001 && point.y == 10, 'The new point should be down');
     });
-    
+
     // ======================================================
     test('Borneo Map (has scientific notation: -10e-4)', function() {
 
@@ -825,12 +825,12 @@ suite('Path', function() {
         layer.add(borneo);
         stage.add(layer);
     });
-    
+
     // ======================================================
     test('Stroke only when no fill', function() {
 
         // https://github.com/ericdrowell/KonvaJS/issues/567
-        
+
         var stage = addStage();
         var layer = new Konva.Layer();
 
@@ -868,5 +868,21 @@ suite('Path', function() {
         assert.equal(trace,    'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(50,0);bezierCurveTo(50,150,170,170,200,170);lineWidth=2;strokeStyle=black;stroke();restore();');
         assert.equal(hitTrace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(50,0);bezierCurveTo(50,150,170,170,200,170);lineWidth=2;strokeStyle=black;stroke();restore();');
     });
-     
+
-});
+    it('getClientRect', function() {
+        var stage = addStage();
+        var layer = new Konva.Layer();
+        stage.add(layer);
+
+
+        var path = new Konva.Path({
+           data: 'M61.55,184.55 60.55,280.55 164.55,284.55 151.55,192.55 Z',
+           fill: 'black',
+           stroke: 'red'
+        });
+        layer.add(path);
+        var rect = path.getClientRect();
+        assert.deepEqual(rect, {x: 60, y: 184, width: 106, height: 102});
+    })
+
+});