fixed closePath bug with Path shape, added getters and setters, and added another path unit test

dist/kinetic-core.js

@@ -4107,24 +4107,29 @@ Kinetic.Path = function(config) {
                     context.moveTo(p[0], p[1]);
                     break;
                 case 'z':
-                context.closePath();
+                    context.closePath();
                     break;
             }
         }
-        
         this.fill();
         this.stroke();
     };
     // call super constructor
     Kinetic.Shape.apply(this, [config]);
 
-    this.setCommandsArray();
+    this.commandsArray = this.getCommandsArray();
 };
 /*
  * Path methods
  */
 Kinetic.Path.prototype = {
-    setCommandsArray: function() {
+    /**
+     * get parsed commands array from the commands
+     *  string.  V, v, H, h, and l commands are converted to
+     *  L commands for the purpose of high performance Path
+     *  rendering
+     */
+    getCommandsArray: function() {
         var c = this.attrs.commands;
         // command chars
         var cc = ['M', 'l', 'L', 'v', 'V', 'h', 'H', 'z'];
@@ -4156,7 +4161,7 @@ Kinetic.Path.prototype = {
                 points: points
             });
         }
-        // convert l, h, and v to L
+        // convert l, H, h, V, and v to L
         var cpx = 0;
         var cpy = 0;
         for(var n = 0; n < ca.length; n++) {
@@ -4191,13 +4196,29 @@ Kinetic.Path.prototype = {
             }
 
             // reassign command
-            if(c !== 'L' && c !== 'M') {
+            if(c == 'l' || c == 'V' || c == 'v' || c == 'H' || c == 'h') {
                 ca[n].command = 'L';
                 ca[n].points[0] = cpx;
                 ca[n].points[1] = cpy;
             }
         }
-        this.commandsArray = ca;
+        return ca;
+    },
+    /**
+     * get SVG path commands string
+     */
+    getCommands: function() {
+        return this.attrs.commands;
+    },
+    /**
+     * set SVG path commands string.  This method
+     *  also automatically parses the commands string
+     *  into a commands array.  Currently supported SVG commands:
+     *  M, L, l, H, h, V, v, z
+     */
+    setCommands: function(commands) {
+        this.attrs.commands = commands;
+        this.commandsArray = this.getCommandsArray();
     }
 };
 

src/shapes/Path.js

@@ -30,24 +30,29 @@ Kinetic.Path = function(config) {
                     context.moveTo(p[0], p[1]);
                     break;
                 case 'z':
-                context.closePath();
+                    context.closePath();
                     break;
             }
         }
-        
         this.fill();
         this.stroke();
     };
     // call super constructor
     Kinetic.Shape.apply(this, [config]);
 
-    this.setCommandsArray();
+    this.commandsArray = this.getCommandsArray();
 };
 /*
  * Path methods
  */
 Kinetic.Path.prototype = {
-    setCommandsArray: function() {
+    /**
+     * get parsed commands array from the commands
+     *  string.  V, v, H, h, and l commands are converted to
+     *  L commands for the purpose of high performance Path
+     *  rendering
+     */
+    getCommandsArray: function() {
         var c = this.attrs.commands;
         // command chars
         var cc = ['M', 'l', 'L', 'v', 'V', 'h', 'H', 'z'];
@@ -79,7 +84,7 @@ Kinetic.Path.prototype = {
                 points: points
             });
         }
-        // convert l, h, and v to L
+        // convert l, H, h, V, and v to L
         var cpx = 0;
         var cpy = 0;
         for(var n = 0; n < ca.length; n++) {
@@ -114,13 +119,29 @@ Kinetic.Path.prototype = {
             }
 
             // reassign command
-            if(c !== 'L' && c !== 'M') {
+            if(c == 'l' || c == 'V' || c == 'v' || c == 'H' || c == 'h') {
                 ca[n].command = 'L';
                 ca[n].points[0] = cpx;
                 ca[n].points[1] = cpy;
             }
         }
-        this.commandsArray = ca;
+        return ca;
+    },
+    /**
+     * get SVG path commands string
+     */
+    getCommands: function() {
+        return this.attrs.commands;
+    },
+    /**
+     * set SVG path commands string.  This method
+     *  also automatically parses the commands string
+     *  into a commands array.  Currently supported SVG commands:
+     *  M, L, l, H, h, V, v, z
+     */
+    setCommands: function(commands) {
+        this.attrs.commands = commands;
+        this.commandsArray = this.getCommandsArray();
     }
 };
 

tests/js/unitTests.js

@@ -183,7 +183,6 @@ Test.prototype.tests = {
         group.add(circle);
         layer.draw();
 
-		
         var expectedJson = '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
         test(stage.toJSON() === expectedJson, 'problem with serialization');
     },
@@ -306,7 +305,6 @@ Test.prototype.tests = {
         group.add(triangle);
         layer.draw();
 
-		
         var expectedJson = '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
         test(stage.toJSON() === expectedJson, "problem serializing stage with custom shape");
     },
@@ -771,7 +769,7 @@ Test.prototype.tests = {
             stage.add(layer);
 
             var json = stage.toJSON();
-            
+
             test(json === '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"crop":{"x":0,"y":0},"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listening":true,"alpha":1,"x":200,"y":60,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":50,"y":150},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"darth"},"nodeType":"Shape","shapeType":"Image"}]}]}');
         };
         imageObj.src = '../darth-vader.jpg';
@@ -1172,7 +1170,57 @@ Test.prototype.tests = {
         });
         //stage.start();
     },
-    'SHAPE - add path': function(containerId) {
+    'SHAPE - add simple path': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 1024,
+            height: 480,
+            scale: 0.5,
+            x: 50,
+            y: 10
+        });
+        var layer = new Kinetic.Layer();
+
+        var path = new Kinetic.Path({
+            commands: 'M200,100h100v50z',
+            fill: '#ccc',
+            stroke: '#333',
+            strokeWidth: 2,
+            shadow: {
+                color: 'black',
+                blur: 2,
+                offset: [10, 10],
+                alpha: 0.5
+            },
+            draggable: true
+        });
+
+        path.on('mouseover', function() {
+            this.setFill('red');
+            layer.draw();
+        });
+
+        path.on('mouseout', function() {
+            this.setFill('#ccc');
+            layer.draw();
+        });
+
+        layer.add(path);
+
+        stage.add(layer);
+
+        test(path.getCommands() === 'M200,100h100v50z', 'commands are incorrect');
+        test(path.getCommandsArray().length === 4, 'commands array should have 4 elements');
+
+        path.setCommands('M200');
+
+        test(path.getCommands() === 'M200', 'commands are incorrect');
+        test(path.getCommandsArray().length === 1, 'commands array should have 1 element');
+
+        path.setCommands('M200,100h100v50z');
+
+    },
+    'SHAPE - add map path': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 1024,
@@ -1193,12 +1241,12 @@ Test.prototype.tests = {
                 stroke: '#999',
                 strokeWidth: 1,
                 /*
-	            shadow: {
+                 shadow: {
-	            	color: 'black',
+                 color: 'black',
-	            	blur: 2,
+                 blur: 2,
-	            	offset: [10, 10]
+                 offset: [10, 10]
-	            }
+                 }
-	            */
+                 */
             });
 
             path.on('mouseover', function() {
@@ -1214,7 +1262,7 @@ Test.prototype.tests = {
 
             mapLayer.add(path);
         }
-        
+
         stage.add(mapLayer);
 
     },