Changed namespace for "plugin" shapes to Kinetic.Plugins. *This is a breaking change!*

Fixed unit tests.  Extracted Path parsing logic into PathHelper so that it's not tied to a particular shape.

src/Global.js

@@ -7,6 +7,7 @@
  */
 var Kinetic = {};
 Kinetic.Filters = {};
+Kinetic.Plugins = {};
 Kinetic.Global = {
     BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
     stages: [],

src/plugins/shapes/Path.js

@@ -8,7 +8,7 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.Path = Kinetic.Shape.extend({
+Kinetic.Plugins.Path = Kinetic.Shape.extend({
         init : function (config) {
             this.shapeType = "Path";
             this.dataArray = [];
@@ -69,278 +69,16 @@ Kinetic.Path = Kinetic.Shape.extend({
             // call super constructor
             this._super(config);
             
-            this.dataArray = this._getDataArray();
+            this.dataArray = Kinetic.Plugins.PathHelper.parsePathData(this.attrs.data);
             
             this.on('dataChange', function () {
-                that.dataArray = that._getDataArray();
+                that.dataArray = Kinetic.Plugins.PathHelper.parsePathData(that.attrs.data);
             });
-        },
-        /**
-         * get parsed data array from the data
-         *  string.  V, v, H, h, and l data are converted to
-         *  L data for the purpose of high performance Path
-         *  rendering
-         */
-        _getDataArray : function () {
-            
-            // Path Data Segment must begin with a moveTo
-            //m (x y)+  Relative moveTo (subsequent points are treated as lineTo)
-            //M (x y)+  Absolute moveTo (subsequent points are treated as lineTo)
-            //l (x y)+  Relative lineTo
-            //L (x y)+  Absolute LineTo
-            //h (x)+    Relative horizontal lineTo
-            //H (x)+    Absolute horizontal lineTo
-            //v (y)+    Relative vertical lineTo
-            //V (y)+    Absolute vertical lineTo
-            //z (closepath)
-            //Z (closepath)
-            //c (x1 y1 x2 y2 x y)+ Relative Bezier curve
-            //C (x1 y1 x2 y2 x y)+ Absolute Bezier curve
-            //q (x1 y1 x y)+       Relative Quadratic Bezier
-            //Q (x1 y1 x y)+       Absolute Quadratic Bezier
-            //t (x y)+    Shorthand/Smooth Relative Quadratic Bezier
-            //T (x y)+    Shorthand/Smooth Absolute Quadratic Bezier
-            //s (x2 y2 x y)+       Shorthand/Smooth Relative Bezier curve
-            //S (x2 y2 x y)+       Shorthand/Smooth Absolute Bezier curve
-            //a (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+     Relative Elliptical Arc
-            //A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+  Absolute Elliptical Arc
-            
-            // command string
-            var cs = this.attrs.data;
-            
-            // return early if data is not defined
-            if (!this.attrs.data) {
-                return [];
-            }
-            // command chars
-            var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q', 't', 'T', 's', 'S', 'a', 'A'];
-            // convert white spaces to commas
-            cs = cs.replace(new RegExp(' ', 'g'), ',');
-            // create pipes so that we can split the data
-            for (var n = 0; n < cc.length; n++) {
-                cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
-            }
-            // create array
-            var arr = cs.split('|');
-            var ca = [];
-            // init context point
-            var cpx = 0;
-            var cpy = 0;
-            for (var n = 1; n < arr.length; n++) {
-                var str = arr[n];
-                var c = str.charAt(0);
-                str = str.slice(1);
-                // remove ,- for consistency
-                str = str.replace(new RegExp(',-', 'g'), '-');
-                // add commas so that it's easy to split
-                str = str.replace(new RegExp('-', 'g'), ',-');
-                str = str.replace(new RegExp('e,-', 'g'), 'e-');
-                var p = str.split(',');
-                if (p.length > 0 && p[0] === '') {
-                    p.shift();
-                }
-                // convert strings to floats
-                for (var i = 0; i < p.length; i++) {
-                    p[i] = parseFloat(p[i]);
-                }
-                while (p.length > 0) {
-                    if (isNaN(p[0])) // case for a trailing comma before next command
-                        break;
-                    
-                    var cmd = null;
-                    var points = [];
-                    var startX = cpx,
-                    startY = cpy;
-                    
-                    // convert l, H, h, V, and v to L
-                    switch (c) {
-                        
-                        // Note: Keep the lineTo's above the moveTo's in this switch
-                    case 'l':
-                        cpx += p.shift();
-                        cpy += p.shift();
-                        cmd = 'L';
-                        points.push(cpx, cpy);
-                        break;
-                    case 'L':
-                        cpx = p.shift();
-                        cpy = p.shift();
-                        points.push(cpx, cpy);
-                        break;
-                        
-                        // Note: lineTo handlers need to be above this point
-                    case 'm':
-                        cpx += p.shift();
-                        cpy += p.shift();
-                        cmd = 'M';
-                        points.push(cpx, cpy);
-                        c = 'l';
-                        // subsequent points are treated as relative lineTo
-                        break;
-                    case 'M':
-                        cpx = p.shift();
-                        cpy = p.shift();
-                        cmd = 'M';
-                        points.push(cpx, cpy);
-                        c = 'L';
-                        // subsequent points are treated as absolute lineTo
-                        break;
-                        
-                    case 'h':
-                        cpx += p.shift();
-                        cmd = 'L';
-                        points.push(cpx, cpy);
-                        break;
-                    case 'H':
-                        cpx = p.shift();
-                        cmd = 'L';
-                        points.push(cpx, cpy);
-                        break;
-                    case 'v':
-                        cpy += p.shift();
-                        cmd = 'L';
-                        points.push(cpx, cpy);
-                        break;
-                    case 'V':
-                        cpy = p.shift();
-                        cmd = 'L';
-                        points.push(cpx, cpy);
-                        break;
-                    case 'C':
-                        points.push(p.shift(), p.shift(), p.shift(), p.shift());
-                        cpx = p.shift();
-                        cpy = p.shift();
-                        points.push(cpx, cpy);
-                        break;
-                    case 'c':
-                        points.push(cpx + p.shift(), cpy + p.shift(), cpx + p.shift(), cpy + p.shift());
-                        cpx += p.shift();
-                        cpy += p.shift();
-                        cmd = 'C';
-                        points.push(cpx, cpy);
-                        break;
-                    case 'S':
-                        var ctlPtx = cpx,
-                        ctlPty = cpy;
-                        var prevCmd = ca[ca.length - 1];
-                        if (prevCmd.command === 'C') {
-                            ctlPtx = cpx + (cpx - prevCmd.points[2]);
-                            ctlPty = cpy + (cpy - prevCmd.points[3]);
-                        }
-                        points.push(ctlPtx, ctlPty, p.shift(), p.shift());
-                        cpx = p.shift();
-                        cpy = p.shift();
-                        cmd = 'C';
-                        points.push(cpx, cpy);
-                        break;
-                    case 's':
-                        var ctlPtx = cpx,
-                        ctlPty = cpy;
-                        var prevCmd = ca[ca.length - 1];
-                        if (prevCmd.command === 'C') {
-                            ctlPtx = cpx + (cpx - prevCmd.points[2]);
-                            ctlPty = cpy + (cpy - prevCmd.points[3]);
-                        }
-                        points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift());
-                        cpx += p.shift();
-                        cpy += p.shift();
-                        cmd = 'C';
-                        points.push(cpx, cpy);
-                        break;
-                    case 'Q':
-                        points.push(p.shift(), p.shift());
-                        cpx = p.shift();
-                        cpy = p.shift();
-                        points.push(cpx, cpy);
-                        break;
-                    case 'q':
-                        points.push(cpx + p.shift(), cpy + p.shift());
-                        cpx += p.shift();
-                        cpy += p.shift();
-                        cmd = 'Q';
-                        points.push(cpx, cpy);
-                        break;
-                    case 'T':
-                        var ctlPtx = cpx,
-                        ctlPty = cpy;
-                        var prevCmd = ca[ca.length - 1];
-                        if (prevCmd.command === 'Q') {
-                            ctlPtx = cpx + (cpx - prevCmd.points[0]);
-                            ctlPty = cpy + (cpy - prevCmd.points[1]);
-                        }
-                        cpx = p.shift();
-                        cpy = p.shift();
-                        cmd = 'Q';
-                        points.push(ctlPtx, ctlPty, cpx, cpy);
-                        break;
-                    case 't':
-                        var ctlPtx = cpx,
-                        ctlPty = cpy;
-                        var prevCmd = ca[ca.length - 1];
-                        if (prevCmd.command === 'Q') {
-                            ctlPtx = cpx + (cpx - prevCmd.points[0]);
-                            ctlPty = cpy + (cpy - prevCmd.points[1]);
-                        }
-                        cpx += p.shift();
-                        cpy += p.shift();
-                        cmd = 'Q';
-                        points.push(ctlPtx, ctlPty, cpx, cpy);
-                        break;
-                    case 'A':
-                        var rx = p.shift(),
-                        ry = p.shift(),
-                        psi = p.shift(),
-                        fa = p.shift(),
-                        fs = p.shift();
-                        var x1 = cpx,
-                        y1 = cpy;
-                        cpx = p.shift(),
-                        cpy = p.shift();
-                        cmd = 'A';
-                        points = Kinetic.PathHelper.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
-                        break;
-                    case 'a':
-                        var rx = p.shift(),
-                        ry = p.shift(),
-                        psi = p.shift(),
-                        fa = p.shift(),
-                        fs = p.shift();
-                        var x1 = cpx,
-                        y1 = cpy;
-                        cpx += p.shift(),
-                        cpy += p.shift();
-                        cmd = 'A';
-                        points = Kinetic.PathHelper.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
-                        break;
-                    }
-                    
-                    ca.push({
-                        command : cmd || c,
-                        points : points,
-                        start : {
-                            x : startX,
-                            y : startY
-                        },
-                        pathLength : Kinetic.PathHelper.calcLength(startX, startY, cmd || c, points)
-                    });
-                    
-                }
-                
-                if (c === 'z' || c === 'Z')
-                    ca.push({
-                        command : 'z',
-                        points : [],
-                        start : undefined,
-                        pathLength : 0
-                    });
-            }
-            
-            return ca;
         }
     });
 
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']);
+Kinetic.Node.addGettersSetters(Kinetic.Plugins.Path, ['data']);
 
 /**
  * set SVG path data string.  This method

src/plugins/shapes/RegularPolygon.js

@@ -7,7 +7,7 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.RegularPolygon = Kinetic.Shape.extend({
+Kinetic.Plugins.RegularPolygon = Kinetic.Shape.extend({
     init: function(config) {
         this.setDefaultAttrs({
             radius: 0,
@@ -34,7 +34,7 @@ Kinetic.RegularPolygon = Kinetic.Shape.extend({
 });
 
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.RegularPolygon, ['radius', 'sides']);
+Kinetic.Node.addGettersSetters(Kinetic.Plugins.RegularPolygon, ['radius', 'sides']);
 
 /**
  * set radius

src/plugins/shapes/Star.js

@@ -7,7 +7,7 @@
  * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.Star = Kinetic.Shape.extend({
+Kinetic.Plugins.Star = Kinetic.Shape.extend({
     init: function(config) {
         this.setDefaultAttrs({
             numPoints: 0,
@@ -37,7 +37,7 @@ Kinetic.Star = Kinetic.Shape.extend({
 });
 
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Star, ['numPoints', 'innerRadius', 'outerRadius']);
+Kinetic.Node.addGettersSetters(Kinetic.Plugins.Star, ['numPoints', 'innerRadius', 'outerRadius']);
 
 /**
  * set number of points

src/plugins/shapes/TextPath.js

@@ -5,10 +5,10 @@
  * Path constructor.
  * @author Jason Follas
  * @constructor
- * @augments Kinetic.Path
+ * @augments Kinetic.Shape
  * @param {Object} config
  */
-Kinetic.TextPath = Kinetic.Shape.extend({
+Kinetic.Plugins.TextPath = Kinetic.Shape.extend({
         init : function (config) {
             
             this.setDefaultAttrs({
@@ -24,8 +24,6 @@ Kinetic.TextPath = Kinetic.Shape.extend({
             this.dataArray = [];
             var that = this;
             
-            this._getDataArray = Kinetic.Path.prototype._getDataArray;
-            
             config.drawFunc = function (context) {
                 var charArr = this.charArr;
                 
@@ -70,14 +68,14 @@ Kinetic.TextPath = Kinetic.Shape.extend({
             // call super constructor
             this._super(config);
             
-            this.dataArray = this._getDataArray();
+            this.dataArray = Kinetic.Plugins.PathHelper.parsePathData(this.attrs.data);
             
             this.on('dataChange', function () {
-                that.dataArray = that._getDataArray();
+                that.dataArray = Kinetic.Plugins.PathHelper.parsePathData(that.attrs.data);
             });
             
             // update text data for certain attr changes
-            var attrs = ['padding', 'text', 'textStroke', 'textStrokeWidth'];
+            var attrs = ['text', 'textStroke', 'textStrokeWidth'];
             for (var n = 0; n < attrs.length; n++) {
                 var attr = attrs[n];
                 this.on(attr + 'Change', that._setTextData);
@@ -87,12 +85,16 @@ Kinetic.TextPath = Kinetic.Shape.extend({
         },
         /**
          * get text width in pixels
+         * @name getTextWidth
+         * @methodOf Kinetic.Plugins.TextPath.prototype
          */
         getTextWidth : function () {
             return this.textWidth;
         },
         /**
          * get text height in pixels
+         * @name getTextHeight
+         * @methodOf Kinetic.Plugins.TextPath.prototype
          */
         getTextHeight : function () {
             return this.textHeight;
@@ -175,17 +177,15 @@ Kinetic.TextPath = Kinetic.Shape.extend({
                         }
                     }
                     
-                    if (pathCmd === {}
+                    if (pathCmd === {} || p0 === undefined)
-                        
-                         || p0 === undefined)
                         return undefined;
                     
                     var needNewSegment = false;
                     
                     switch (pathCmd.command) {
                     case 'L':
-                        if (Kinetic.PathHelper.getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth) {
+                        if (Kinetic.Plugins.PathHelper.getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth) {
-                            p1 = Kinetic.PathHelper.getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y);
+                            p1 = Kinetic.Plugins.PathHelper.getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y);
                         } else
                             pathCmd = undefined;
                         break;
@@ -208,7 +208,7 @@ Kinetic.TextPath = Kinetic.Shape.extend({
                             needNewSegment = true;
                         }
                         
-                        p1 = Kinetic.PathHelper.getPointOnEllipticalArc(pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], currentT, pathCmd.points[6]);
+                        p1 = Kinetic.Plugins.PathHelper.getPointOnEllipticalArc(pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], currentT, pathCmd.points[6]);
                         break;
                     case 'C':
                         if (currentT === 0) {
@@ -226,7 +226,7 @@ Kinetic.TextPath = Kinetic.Shape.extend({
                             needNewSegment = true;
                         }
                         
-                        p1 = Kinetic.PathHelper.getPointOnCubicBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], pathCmd.points[4], pathCmd.points[5]);
+                        p1 = Kinetic.Plugins.PathHelper.getPointOnCubicBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], pathCmd.points[4], pathCmd.points[5]);
                         break;
                     case 'Q':
                         if (currentT === 0)
@@ -241,13 +241,13 @@ Kinetic.TextPath = Kinetic.Shape.extend({
                             needNewSegment = true;
                         }
                         
-                        p1 = Kinetic.PathHelper.getPointOnQuadraticBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3]);
+                        p1 = Kinetic.Plugins.PathHelper.getPointOnQuadraticBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3]);
                         break;
                         
                     }
                     
                     if (p1 !== undefined) {
-                        currLen = Kinetic.PathHelper.getLineLength(p0.x, p0.y, p1.x, p1.y);
+                        currLen = Kinetic.Plugins.PathHelper.getLineLength(p0.x, p0.y, p1.x, p1.y);
                     }
                     
                     if (needNewSegment) {
@@ -265,14 +265,14 @@ Kinetic.TextPath = Kinetic.Shape.extend({
                 if (p0 === undefined || p1 === undefined)
                     break;
                 
-                var width = Kinetic.PathHelper.getLineLength(p0.x, p0.y, p1.x, p1.y);
+                var width = Kinetic.Plugins.PathHelper.getLineLength(p0.x, p0.y, p1.x, p1.y);
                 
                 // Note: Since glyphs are rendered one at a time, any kerning pair data built into the font will not be used.
                 // Can foresee having a rough pair table built in that the developer can override as needed.
                 
                 var kern = 0; // placeholder for future implementation
                 
-                var midpoint = Kinetic.PathHelper.getPointOnLine(kern + width / 2.0, p0.x, p0.y, p1.x, p1.y);
+                var midpoint = Kinetic.Plugins.PathHelper.getPointOnLine(kern + width / 2.0, p0.x, p0.y, p1.x, p1.y);
                 
                 var rotation = Math.atan2((p1.y - p0.y), (p1.x - p0.x));
                 this.glyphInfo.push({
@@ -290,4 +290,95 @@ Kinetic.TextPath = Kinetic.Shape.extend({
     });
 
 // add setters and getters
-Kinetic.Node.addGettersSetters(Kinetic.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'text']);
+Kinetic.Node.addGettersSetters(Kinetic.Plugins.TextPath, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'text']);
+
+/**
+ * set font family
+ * @name setFontFamily
+ * @methodOf Kinetic.Text.prototype
+ * @param {String} fontFamily
+ */
+
+/**
+ * set font size
+ * @name setFontSize
+ * @methodOf Kinetic.Text.prototype
+ * @param {int} fontSize
+ */
+
+/**
+ * set font style.  Can be "normal", "italic", or "bold".  "normal" is the default.
+ * @name setFontStyle
+ * @methodOf Kinetic.Text.prototype
+ * @param {String} fontStyle
+ */
+
+/**
+ * set text fill color
+ * @name setTextFill
+ * @methodOf Kinetic.Text.prototype
+ * @param {String} textFill
+ */
+
+/**
+ * set text stroke color
+ * @name setFontStroke
+ * @methodOf Kinetic.Text.prototype
+ * @param {String} textStroke
+ */
+
+/**
+ * set text stroke width
+ * @name setTextStrokeWidth
+ * @methodOf Kinetic.Text.prototype
+ * @param {int} textStrokeWidth
+ */
+
+/**
+ * set text
+ * @name setText
+ * @methodOf Kinetic.Text.prototype
+ * @param {String} text
+ */
+
+/**
+ * get font family
+ * @name getFontFamily
+ * @methodOf Kinetic.Text.prototype
+ */
+
+/**
+ * get font size
+ * @name getFontSize
+ * @methodOf Kinetic.Text.prototype
+ */
+
+/**
+ * get font style
+ * @name getFontStyle
+ * @methodOf Kinetic.Text.prototype
+ */
+
+/**
+ * get text fill color
+ * @name getTextFill
+ * @methodOf Kinetic.Text.prototype
+ */
+
+/**
+ * get text stroke color
+ * @name getTextStroke
+ * @methodOf Kinetic.Text.prototype
+ */
+
+/**
+ * get text stroke width
+ * @name getTextStrokeWidth
+ * @methodOf Kinetic.Text.prototype
+ */
+
+/**
+ * get text
+ * @name getText
+ * @methodOf Kinetic.Text.prototype
+ */

src/plugins/util/PathHelper.js

@@ -1,7 +1,271 @@
 ///////////////////////////////////////////////////////////////////////
 //  PathHelper
 ///////////////////////////////////////////////////////////////////////
-Kinetic.PathHelper = {
+Kinetic.Plugins.PathHelper = {
+    
+    /**
+     * get parsed data array from the data
+     *  string.  V, v, H, h, and l data are converted to
+     *  L data for the purpose of high performance Path
+     *  rendering
+     */
+    parsePathData : function (data) {
+        
+        // Path Data Segment must begin with a moveTo
+        //m (x y)+  Relative moveTo (subsequent points are treated as lineTo)
+        //M (x y)+  Absolute moveTo (subsequent points are treated as lineTo)
+        //l (x y)+  Relative lineTo
+        //L (x y)+  Absolute LineTo
+        //h (x)+    Relative horizontal lineTo
+        //H (x)+    Absolute horizontal lineTo
+        //v (y)+    Relative vertical lineTo
+        //V (y)+    Absolute vertical lineTo
+        //z (closepath)
+        //Z (closepath)
+        //c (x1 y1 x2 y2 x y)+ Relative Bezier curve
+        //C (x1 y1 x2 y2 x y)+ Absolute Bezier curve
+        //q (x1 y1 x y)+       Relative Quadratic Bezier
+        //Q (x1 y1 x y)+       Absolute Quadratic Bezier
+        //t (x y)+    Shorthand/Smooth Relative Quadratic Bezier
+        //T (x y)+    Shorthand/Smooth Absolute Quadratic Bezier
+        //s (x2 y2 x y)+       Shorthand/Smooth Relative Bezier curve
+        //S (x2 y2 x y)+       Shorthand/Smooth Absolute Bezier curve
+        //a (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+     Relative Elliptical Arc
+        //A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+  Absolute Elliptical Arc
+        
+        // return early if data is not defined
+        if (!data) {
+            return [];
+        }        
+		
+		// command string
+        var cs = data;
+        
+        // command chars
+        var cc = ['m', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z', 'c', 'C', 'q', 'Q', 't', 'T', 's', 'S', 'a', 'A'];
+        // convert white spaces to commas
+        cs = cs.replace(new RegExp(' ', 'g'), ',');
+        // create pipes so that we can split the data
+        for (var n = 0; n < cc.length; n++) {
+            cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
+        }
+        // create array
+        var arr = cs.split('|');
+        var ca = [];
+        // init context point
+        var cpx = 0;
+        var cpy = 0;
+        for (var n = 1; n < arr.length; n++) {
+            var str = arr[n];
+            var c = str.charAt(0);
+            str = str.slice(1);
+            // remove ,- for consistency
+            str = str.replace(new RegExp(',-', 'g'), '-');
+            // add commas so that it's easy to split
+            str = str.replace(new RegExp('-', 'g'), ',-');
+            str = str.replace(new RegExp('e,-', 'g'), 'e-');
+            var p = str.split(',');
+            if (p.length > 0 && p[0] === '') {
+                p.shift();
+            }
+            // convert strings to floats
+            for (var i = 0; i < p.length; i++) {
+                p[i] = parseFloat(p[i]);
+            }
+            while (p.length > 0) {
+                if (isNaN(p[0])) // case for a trailing comma before next command
+                    break;
+                
+                var cmd = null;
+                var points = [];
+                var startX = cpx,
+                startY = cpy;
+                
+                // convert l, H, h, V, and v to L
+                switch (c) {
+                    
+                    // Note: Keep the lineTo's above the moveTo's in this switch
+                case 'l':
+                    cpx += p.shift();
+                    cpy += p.shift();
+                    cmd = 'L';
+                    points.push(cpx, cpy);
+                    break;
+                case 'L':
+                    cpx = p.shift();
+                    cpy = p.shift();
+                    points.push(cpx, cpy);
+                    break;
+                    
+                    // Note: lineTo handlers need to be above this point
+                case 'm':
+                    cpx += p.shift();
+                    cpy += p.shift();
+                    cmd = 'M';
+                    points.push(cpx, cpy);
+                    c = 'l';
+                    // subsequent points are treated as relative lineTo
+                    break;
+                case 'M':
+                    cpx = p.shift();
+                    cpy = p.shift();
+                    cmd = 'M';
+                    points.push(cpx, cpy);
+                    c = 'L';
+                    // subsequent points are treated as absolute lineTo
+                    break;
+                    
+                case 'h':
+                    cpx += p.shift();
+                    cmd = 'L';
+                    points.push(cpx, cpy);
+                    break;
+                case 'H':
+                    cpx = p.shift();
+                    cmd = 'L';
+                    points.push(cpx, cpy);
+                    break;
+                case 'v':
+                    cpy += p.shift();
+                    cmd = 'L';
+                    points.push(cpx, cpy);
+                    break;
+                case 'V':
+                    cpy = p.shift();
+                    cmd = 'L';
+                    points.push(cpx, cpy);
+                    break;
+                case 'C':
+                    points.push(p.shift(), p.shift(), p.shift(), p.shift());
+                    cpx = p.shift();
+                    cpy = p.shift();
+                    points.push(cpx, cpy);
+                    break;
+                case 'c':
+                    points.push(cpx + p.shift(), cpy + p.shift(), cpx + p.shift(), cpy + p.shift());
+                    cpx += p.shift();
+                    cpy += p.shift();
+                    cmd = 'C';
+                    points.push(cpx, cpy);
+                    break;
+                case 'S':
+                    var ctlPtx = cpx,
+                    ctlPty = cpy;
+                    var prevCmd = ca[ca.length - 1];
+                    if (prevCmd.command === 'C') {
+                        ctlPtx = cpx + (cpx - prevCmd.points[2]);
+                        ctlPty = cpy + (cpy - prevCmd.points[3]);
+                    }
+                    points.push(ctlPtx, ctlPty, p.shift(), p.shift());
+                    cpx = p.shift();
+                    cpy = p.shift();
+                    cmd = 'C';
+                    points.push(cpx, cpy);
+                    break;
+                case 's':
+                    var ctlPtx = cpx,
+                    ctlPty = cpy;
+                    var prevCmd = ca[ca.length - 1];
+                    if (prevCmd.command === 'C') {
+                        ctlPtx = cpx + (cpx - prevCmd.points[2]);
+                        ctlPty = cpy + (cpy - prevCmd.points[3]);
+                    }
+                    points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift());
+                    cpx += p.shift();
+                    cpy += p.shift();
+                    cmd = 'C';
+                    points.push(cpx, cpy);
+                    break;
+                case 'Q':
+                    points.push(p.shift(), p.shift());
+                    cpx = p.shift();
+                    cpy = p.shift();
+                    points.push(cpx, cpy);
+                    break;
+                case 'q':
+                    points.push(cpx + p.shift(), cpy + p.shift());
+                    cpx += p.shift();
+                    cpy += p.shift();
+                    cmd = 'Q';
+                    points.push(cpx, cpy);
+                    break;
+                case 'T':
+                    var ctlPtx = cpx,
+                    ctlPty = cpy;
+                    var prevCmd = ca[ca.length - 1];
+                    if (prevCmd.command === 'Q') {
+                        ctlPtx = cpx + (cpx - prevCmd.points[0]);
+                        ctlPty = cpy + (cpy - prevCmd.points[1]);
+                    }
+                    cpx = p.shift();
+                    cpy = p.shift();
+                    cmd = 'Q';
+                    points.push(ctlPtx, ctlPty, cpx, cpy);
+                    break;
+                case 't':
+                    var ctlPtx = cpx,
+                    ctlPty = cpy;
+                    var prevCmd = ca[ca.length - 1];
+                    if (prevCmd.command === 'Q') {
+                        ctlPtx = cpx + (cpx - prevCmd.points[0]);
+                        ctlPty = cpy + (cpy - prevCmd.points[1]);
+                    }
+                    cpx += p.shift();
+                    cpy += p.shift();
+                    cmd = 'Q';
+                    points.push(ctlPtx, ctlPty, cpx, cpy);
+                    break;
+                case 'A':
+                    var rx = p.shift(),
+                    ry = p.shift(),
+                    psi = p.shift(),
+                    fa = p.shift(),
+                    fs = p.shift();
+                    var x1 = cpx,
+                    y1 = cpy;
+                    cpx = p.shift(),
+                    cpy = p.shift();
+                    cmd = 'A';
+                    points = this.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
+                    break;
+                case 'a':
+                    var rx = p.shift(),
+                    ry = p.shift(),
+                    psi = p.shift(),
+                    fa = p.shift(),
+                    fs = p.shift();
+                    var x1 = cpx,
+                    y1 = cpy;
+                    cpx += p.shift(),
+                    cpy += p.shift();
+                    cmd = 'A';
+                    points = this.convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
+                    break;
+                }
+                
+                ca.push({
+                    command : cmd || c,
+                    points : points,
+                    start : {
+                        x : startX,
+                        y : startY
+                    },
+                    pathLength : this.calcLength(startX, startY, cmd || c, points)
+                });
+                
+            }
+            
+            if (c === 'z' || c === 'Z')
+                ca.push({
+                    command : 'z',
+                    points : [],
+                    start : undefined,
+                    pathLength : 0
+                });
+        }
+        
+        return ca;
+    },
     calcLength : function (x, y, cmd, points) {
         var len,
         p1,