rect calculation fixes for Path, sprite start fixes. close #465

CHANGELOG.md

@@ -11,8 +11,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+* `getClientRect` for complex paths fixes
 * `getClientRect` calculation fix for groups
-* Update of `Konva.Transformer` on `rotateEnabled` change
+* Update `Konva.Transformer` on `rotateEnabled` change
 * Fix click stage event on dragend
 * Fix some Transformer cursor behavior
 

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v2.4.0
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Thu Sep 27 2018
+ * Date: Mon Oct 01 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -16409,6 +16409,9 @@
      * @memberof Konva.Sprite.prototype
      */
     start: function() {
+      if (this.isRunning()) {
+        return;
+      }
       var layer = this.getLayer();
 
       /*
@@ -16801,10 +16804,17 @@
       for (var i = 0; i < points.length / 2; i++) {
         x = points[i * 2];
         y = points[i * 2 + 1];
-        minX = Math.min(minX, x);
-        maxX = Math.max(maxX, x);
-        minY = Math.min(minY, y);
-        maxY = Math.max(maxY, y);
+
+        // skip bad values
+        // TODO: prevent them from parsing function
+        if (!isNaN(x)) {
+          minX = Math.min(minX, x);
+          maxX = Math.max(maxX, x);
+        }
+        if (!isNaN(y)) {
+          minY = Math.min(minY, y);
+          maxY = Math.max(maxY, y);
+        }
       }
       return {
         x: Math.round(minX),
@@ -17135,6 +17145,8 @@
         var parsed = parseFloat(coords[j]);
         if (!isNaN(parsed)) {
           p.push(parsed);
+        } else {
+          p.push(0);
         }
       }
 

src/shapes/Path.js

@@ -113,10 +113,17 @@
       for (var i = 0; i < points.length / 2; i++) {
         x = points[i * 2];
         y = points[i * 2 + 1];
-        minX = Math.min(minX, x);
-        maxX = Math.max(maxX, x);
-        minY = Math.min(minY, y);
-        maxY = Math.max(maxY, y);
+
+        // skip bad values
+        // TODO: prevent them from parsing function
+        if (!isNaN(x)) {
+          minX = Math.min(minX, x);
+          maxX = Math.max(maxX, x);
+        }
+        if (!isNaN(y)) {
+          minY = Math.min(minY, y);
+          maxY = Math.max(maxY, y);
+        }
       }
       return {
         x: Math.round(minX),
@@ -447,6 +454,8 @@
         var parsed = parseFloat(coords[j]);
         if (!isNaN(parsed)) {
           p.push(parsed);
+        } else {
+          p.push(0);
         }
       }
 

src/shapes/Sprite.js

@@ -161,6 +161,9 @@
      * @memberof Konva.Sprite.prototype
      */
     start: function() {
+      if (this.isRunning()) {
+        return;
+      }
       var layer = this.getLayer();
 
       /*

test/unit/shapes/Sprite-test.js

@@ -333,6 +333,73 @@ suite('Sprite', function() {
     imageObj.src = 'assets/scorpion-sprite.png';
   });
 
+  test('start do nothing if animation is already running', function(done) {
+    var imageObj = new Image();
+    imageObj.onload = function() {
+      var stage = addStage();
+      var layer = new Konva.Layer();
+
+      var sprite = new Konva.Sprite({
+        x: 200,
+        y: 50,
+        image: imageObj,
+        animation: 'standing',
+        animations: {
+          standing: [
+            0,
+            0,
+            49,
+            109,
+            52,
+            0,
+            49,
+            109,
+            105,
+            0,
+            49,
+            109,
+            158,
+            0,
+            49,
+            109,
+            210,
+            0,
+            49,
+            109,
+            262,
+            0,
+            49,
+            109
+          ]
+        },
+        frameRate: 50,
+        draggable: true,
+        shadowColor: 'black',
+        shadowBlur: 3,
+        shadowOffset: { x: 3, y: 1 },
+        shadowOpacity: 0.3
+      });
+
+      layer.add(sprite);
+      stage.add(layer);
+
+      var counter = 0;
+      sprite.on('frameIndexChange.konva', event => {
+        counter += 1;
+      });
+
+      sprite.start();
+      sprite.start();
+      sprite.stop();
+
+      setTimeout(function() {
+        assert.equal(counter, 0);
+        done();
+      }, 200);
+    };
+    imageObj.src = 'assets/scorpion-sprite.png';
+  });
+
   // need fix, but who is using sprites??
   test.skip('can change frame rate on fly', function(done) {
     var imageObj = new Image();