added new Blob shape. removed double quotes from all shapes. made it easier for shapes to extend other shapes

Thorfile

@@ -7,7 +7,7 @@ class Build < Thor
     "src/Global.js", "src/util/Type.js", "src/Canvas.js", "src/util/Tween.js", "src/util/Transform.js", "src/util/Collection.js",
     "src/filters/Grayscale.js", "src/filters/Brighten.js", "src/filters/Invert.js", 
     "src/Animation.js", "src/Node.js", "src/DragAndDrop.js", "src/Transition.js", "src/Container.js", "src/Stage.js", "src/Layer.js", "src/Group.js", "src/Shape.js",
-    "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Wedge.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Spline.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"       
+    "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Wedge.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Spline.js", "src/shapes/Blob.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"       
   ]
   
   UNIT_TESTS = [
@@ -28,6 +28,7 @@ class Build < Thor
   	"tests/js/unit/shapes/polygonTests.js",
   	"tests/js/unit/shapes/lineTests.js",
   	"tests/js/unit/shapes/splineTests.js",
+  	"tests/js/unit/shapes/blobTests.js",
   	"tests/js/unit/shapes/regularPolygonTests.js",
   	"tests/js/unit/shapes/starTests.js",
   	"tests/js/unit/shapes/textTests.js",

src/shapes/Blob.js

@@ -0,0 +1,60 @@
+(function() {
+    /**
+     * Blob constructor.  Blobs are defined by an array of points and
+     *  a tension
+     * @constructor
+     * @augments Kinetic.Spline
+     */
+    Kinetic.Blob = function(config) {
+        this._initBlob(config);
+    };
+
+    Kinetic.Blob.prototype = {
+        _initBlob: function(config) {
+            // call super constructor
+            Kinetic.Spline.call(this, config);
+            this.shapeType = 'Blob';
+        },
+        drawFunc: function(canvas) {
+            var points = this.getPoints(), length = points.length, context = canvas.getContext(), tension = this.getTension();
+            context.beginPath();
+            context.moveTo(points[0].x, points[0].y);
+
+            // tension
+            if(tension !== 0 && length > 2) {
+                var ap = this.allPoints, len = ap.length;
+                var n = 0;
+                while(n < len-1) {
+                    context.bezierCurveTo(ap[n].x, ap[n++].y, ap[n].x, ap[n++].y, ap[n].x, ap[n++].y);
+                } 
+            }
+            // no tension
+            else {
+                for(var n = 1; n < length; n++) {
+                    var point = points[n];
+                    context.lineTo(point.x, point.y);
+                }
+            }
+
+			context.closePath();
+            canvas.fillStroke(this);
+        },
+        _setAllPoints: function() {
+            var points = this.getPoints(), length = points.length, tension = this.getTension(), firstControlPoints = Kinetic.Spline._getControlPoints(points[length - 1], points[0], points[1], tension), lastControlPoints = Kinetic.Spline._getControlPoints(points[length - 2], points[length - 1], points[0], tension);
+
+            Kinetic.Spline.prototype._setAllPoints.call(this);
+
+            // prepend control point
+            this.allPoints.unshift(firstControlPoints[1]);
+
+            // append cp, point, cp, cp, first point
+            this.allPoints.push(lastControlPoints[0]);
+            this.allPoints.push(points[length - 1]);
+            this.allPoints.push(lastControlPoints[1]);
+            this.allPoints.push(firstControlPoints[0]);
+            this.allPoints.push(points[0]);
+        }
+    };
+
+    Kinetic.Global.extend(Kinetic.Blob, Kinetic.Spline);
+})();

src/shapes/Circle.js

@@ -16,10 +16,9 @@
                 radius: 0
             });
 
-            this.shapeType = 'Circle';
-
             // call super constructor
             Kinetic.Shape.call(this, config);
+            this.shapeType = 'Circle';
             this._setDrawFuncs();
         },
         drawFunc: function(canvas) {

src/shapes/Ellipse.js

@@ -19,10 +19,9 @@
                 }
             });
 
-            this.shapeType = "Ellipse";
-
             // call super constructor
             Kinetic.Shape.call(this, config);
+            this.shapeType = 'Ellipse';
             this._setDrawFuncs();
         },
         drawFunc: function(canvas) {

src/shapes/Image.js

@@ -13,10 +13,9 @@
 
     Kinetic.Image.prototype = {
         _initImage: function(config) {
-            this.shapeType = "Image";
-
             // call super constructor
             Kinetic.Shape.call(this, config);
+            this.shapeType = 'Image';
             this._setDrawFuncs();
 
             var that = this;

src/shapes/Line.js

@@ -18,10 +18,9 @@
                 lineCap: 'butt'
             });
 
-            this.shapeType = 'Line';
-
             // call super constructor
             Kinetic.Shape.call(this, config);
+            this.shapeType = 'Line';
             this._setDrawFuncs();
         },
         drawFunc: function(canvas) {

src/shapes/Path.js

@@ -13,12 +13,12 @@
 
     Kinetic.Path.prototype = {
         _initPath: function(config) {
-            this.shapeType = "Path";
             this.dataArray = [];
             var that = this;
 
             // call super constructor
             Kinetic.Shape.call(this, config);
+            this.shapeType = 'Path';
             this._setDrawFuncs();
 
             this.dataArray = Kinetic.Path.parsePathData(this.attrs.data);

src/shapes/Polygon.js

@@ -17,10 +17,9 @@
                 points: []
             });
 
-            this.shapeType = "Polygon";
-
             // call super constructor
             Kinetic.Shape.call(this, config);
+            this.shapeType = 'Polygon';
             this._setDrawFuncs();
         },
         drawFunc: function(canvas) {

src/shapes/Rect.js

@@ -17,9 +17,9 @@
                 height: 0,
                 cornerRadius: 0
             });
-            this.shapeType = "Rect";
 
             Kinetic.Shape.call(this, config);
+            this.shapeType = 'Rect';
             this._setDrawFuncs();
         },
         drawFunc: function(canvas) {

src/shapes/RegularPolygon.js

@@ -18,10 +18,9 @@
                 sides: 0
             });
 
-            this.shapeType = "RegularPolygon";
-
             // call super constructor
             Kinetic.Shape.call(this, config);
+            this.shapeType = 'RegularPolygon';
             this._setDrawFuncs();
         },
         drawFunc: function(canvas) {

src/shapes/Spline.js

@@ -5,15 +5,19 @@
      * @constructor
      * @augments Kinetic.Shape
      * @param {Object} config
-     * @param {Array} config.points can be a flattened array of points, or an array of point objects.
-     *  e.g. [0,1,2,3] and [{x:1,y:2},{x:3,y:4}] are equivalent
      * @param {Number} config.tension default value is 1.  Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
+     * @augments Kinetic.Line
      */
     Kinetic.Spline = function(config) {
         this._initSpline(config);
     };
-    // function written by Rob Spencer
-    function getControlPoints(x0, y0, x1, y1, x2, y2, t) {
+    Kinetic.Spline._getControlPoints = function(p0, p1, p2, t) {
+        var x0 = p0.x;
+        var y0 = p0.y;
+        var x1 = p1.x;
+        var y1 = p1.y;
+        var x2 = p2.x;
+        var y2 = p2.y;
         var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));
         var d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
         var fa = t * d01 / (d01 + d12);
@@ -22,22 +26,24 @@
         var p1y = y1 - fa * (y2 - y0);
         var p2x = x1 + fb * (x2 - x0);
         var p2y = y1 + fb * (y2 - y0);
-        return [p1x, p1y, p2x, p2y];
-    }
+        return [{
+            x: p1x,
+            y: p1y
+        }, {
+            x: p2x,
+            y: p2y
+        }];
+    };
 
     Kinetic.Spline.prototype = {
         _initSpline: function(config) {
             this.setDefaultAttrs({
-                points: [],
-                lineCap: 'butt',
                 tension: 1
             });
 
-            this.shapeType = 'Spline';
-
             // call super constructor
-            Kinetic.Shape.call(this, config);
-            this._setDrawFuncs();
+            Kinetic.Line.call(this, config);
+            this.shapeType = 'Spline';
         },
         drawFunc: function(canvas) {
             var points = this.getPoints(), length = points.length, context = canvas.getContext(), tension = this.getTension();
@@ -67,15 +73,8 @@
 
             canvas.stroke(this);
         },
-        /**
-         * set points array
-         * @name setPoints
-         * @methodOf Kinetic.Spline.prototype
-         * @param {Array} can be an array of point objects or an array
-         *  of Numbers.  e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
-         */
         setPoints: function(val) {
-            this.setAttr('points', Kinetic.Type._getPoints(val));
+            Kinetic.Line.prototype.setPoints.call(this, val);
             this._setAllPoints();
         },
         /**
@@ -92,29 +91,23 @@
             var points = this.getPoints(), length = points.length, tension = this.getTension(), allPoints = [];
 
             for(var n = 1; n < length - 1; n++) {
-                var p0 = points[n - 1], p1 = points[n], p2 = points[n + 1], cp = getControlPoints(p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, tension);
-                allPoints.push({
-                    x: cp[0],
-                    y: cp[1]
-                });
-                allPoints.push(p1);
-                allPoints.push({
-                    x: cp[2],
-                    y: cp[3]
-                });
+                var cp = Kinetic.Spline._getControlPoints(points[n - 1], points[n], points[n + 1], tension);
+                allPoints.push(cp[0]);
+                allPoints.push(points[n]);
+                allPoints.push(cp[1]);
             }
 
             this.allPoints = allPoints;
         }
     };
-    Kinetic.Global.extend(Kinetic.Spline, Kinetic.Shape);
+    Kinetic.Global.extend(Kinetic.Spline, Kinetic.Line);
 
     // add getters setters
-    Kinetic.Node.addGetters(Kinetic.Spline, ['points', 'tension']);
+    Kinetic.Node.addGetters(Kinetic.Spline, ['tension']);
 
     /**
-     * get points array
-     * @name getPoints
+     * get tension
+     * @name getTension
      * @methodOf Kinetic.Spline.prototype
      */
 })();

src/shapes/Sprite.js

@@ -18,10 +18,10 @@
                 index: 0,
                 frameRate: 17
             });
-            this.shapeType = "Sprite";
             
             // call super constructor
             Kinetic.Shape.call(this, config);
+            this.shapeType = 'Sprite';
             this._setDrawFuncs();
 
             this.anim = new Kinetic.Animation();

src/shapes/Star.js

@@ -20,10 +20,9 @@
                 outerRadius: 0
             });
 
-            this.shapeType = "Star";
-
             // call super constructor
             Kinetic.Shape.call(this, config);
+            this.shapeType = 'Star';
             this._setDrawFuncs();
         },
         drawFunc: function(canvas) {

src/shapes/Text.js

@@ -38,10 +38,10 @@
             });
 
             this.dummyCanvas = document.createElement('canvas');
-            this.shapeType = "Text";
             
             // call super constructor
             Kinetic.Shape.call(this, config);
+            this.shapeType = 'Text';
             this._setDrawFuncs();
 
             // update text data for certain attr changes
@@ -284,7 +284,7 @@
      */
 
     /**
-     * set font style.  Can be "normal", "italic", or "bold".  "normal" is the default.
+     * set font style.  Can be 'normal', 'italic', or 'bold'.  'normal' is the default.
      * @name setFontStyle
      * @methodOf Kinetic.Text.prototype
      * @param {String} fontStyle

src/shapes/TextPath.js

@@ -24,12 +24,12 @@
             });
 
             this.dummyCanvas = document.createElement('canvas');
-            this.shapeType = "TextPath";
             this.dataArray = [];
             var that = this;
 
             // call super constructor
             Kinetic.Shape.call(this, config);
+            this.shapeType = 'TextPath';
             this._setDrawFuncs();
 
             this.dataArray = Kinetic.Path.parsePathData(this.attrs.data);
@@ -318,7 +318,7 @@
      */
 
     /**
-     * set font style.  Can be "normal", "italic", or "bold".  "normal" is the default.
+     * set font style.  Can be 'normal', 'italic', or 'bold'.  'normal' is the default.
      * @name setFontStyle
      * @methodOf Kinetic.TextPath.prototype
      * @param {String} fontStyle

src/shapes/Wedge.js

@@ -20,10 +20,9 @@
                 clickwise: true
             });
 
-            this.shapeType = 'Wedge';
-
             // call super constructor
             Kinetic.Shape.call(this, config);
+            this.shapeType = 'Wedge';
             this._setDrawFuncs();
         },
         drawFunc: function(canvas) {

tests/js/unit/shapes/blobTests.js

@@ -0,0 +1,39 @@
+Test.Modules.BLOB = {
+    'add blob': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+
+        var line = new Kinetic.Blob({
+            points: [{
+                x: 73,
+                y: 140
+            }, {
+                x: 340,
+                y: 23
+            }, {
+                x: 500,
+                y: 109
+            }, {
+                x: 300,
+                y: 170
+            }],
+            stroke: 'blue',
+            strokeWidth: 10,
+            lineCap: 'round',
+            lineJoin: 'round',
+            draggable: true,
+            fill: '#aaf',
+            tension: 0.8
+        });
+        
+
+        layer.add(line);
+        stage.add(layer);
+        
+
+    }
+};