copying over chunks of code from arrays branch

src/Factory.js

@@ -42,11 +42,70 @@
         Y = 'y';
 
     Kinetic.Factory = {
-        // getter setter adders
+        addGetterSetter: function() {
-        addGetterSetter: function(constructor, attr, def) {
+            var constructor = arguments[0],
-            this.addGetter(constructor, attr, def);
+                baseAttr = arguments[1],
-            this.addSetter(constructor, attr);
+                util = Kinetic.Util,
+                def, component, index;
+
+            // base method
+            if (arguments.length <= 3) {
+                def = arguments[2];
+                if (util._isArray(def)) {
+                    def = util.cloneArray(def);
+                }
+                this.addGetter(constructor, baseAttr, def);
+                this.addSetter(constructor, baseAttr);
+            }
+            // component method
+            else {
+                component = arguments[2];
+                index = arguments[3];
+                def = arguments[4];
+                this.addComponentGetter(constructor, baseAttr, component, index, def);
+                this.addComponentSetter(constructor, baseAttr, component, index);
+            }
         },
+        addGetter: function(constructor, baseAttr, def) {
+            var method = GET + Kinetic.Util._capitalize(baseAttr);
+
+            constructor.prototype[method] = function() {
+                var val = this.attrs[baseAttr];
+                return val === undefined ? def : val;
+            };
+        },
+        addSetter: function(constructor, baseAttr) {
+            var method = SET + Kinetic.Util._capitalize(baseAttr);
+
+            constructor.prototype[method] = function(val) {
+                this._setAttr(baseAttr, val);   
+            };
+        },
+        addComponentGetter: function(constructor, baseAttr, component, index, def) {
+            var method = GET + Kinetic.Util._capitalize(baseAttr) + Kinetic.Util._capitalize(component);
+
+            constructor.prototype[method] = function() {
+                var base = this.attrs[baseAttr],
+                    val = base && base[index];
+                return val === undefined ? def : val;
+            };
+        },
+        addComponentSetter: function(constructor, baseAttr, component, index) {
+            var method = SET + Kinetic.Util._capitalize(baseAttr) + Kinetic.Util._capitalize(component);
+
+            constructor.prototype[method] = function(val) {
+                this._setComponentAttr(baseAttr, index, val);   
+            };
+        },
+
+
+
+
+
+        // ------------------------------- old methods to be deprecated -----------------------------------
+
+
+
         addPointGetterSetter: function(constructor, attr, def) {
             this.addPointGetter(constructor, attr, def);
             this.addPointSetter(constructor, attr);
@@ -122,15 +181,7 @@
                 return val === undefined ? [] : val;
             };
         },
-        addGetter: function(constructor, attr, def) {
-            var that = this,
-                method = GET + Kinetic.Util._capitalize(attr);
 
-            constructor.prototype[method] = function() {
-                var val = this.attrs[attr];
-                return val === undefined ? def : val;
-            };
-        },
         addPointGetter: function(constructor, attr) {
             var that = this,
                 baseMethod = GET + Kinetic.Util._capitalize(attr);
@@ -208,13 +259,7 @@
                 this._setAttr('points', points);
             };
         },
-        addSetter: function(constructor, attr) {
-            var method = SET + Kinetic.Util._capitalize(attr);
 
-            constructor.prototype[method] = function(val) {
-                this._setAttr(attr, val);   
-            };
-        },
         addPointSetter: function(constructor, attr) {
             var that = this,
                 baseMethod = SET + Kinetic.Util._capitalize(attr);

src/Util.js

@@ -690,6 +690,9 @@
             }
             return retObj;
         },
+        cloneArray: function(arr) {
+            return arr.slice(0);
+        },
         _degToRad: function(deg) {
             return deg * PI_OVER_DEG180;
         },
@@ -732,39 +735,31 @@
             constructor.prototype[key] = methods[key];
           }
         },
-        _getControlPoints: function(p0, p1, p2, t) {
+       _getControlPoints: function(x0, y0, x1, y1, x2, y2, t) {
-            var x0 = p0.x;
+            var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)),
-            var y0 = p0.y;
+                d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)),
-            var x1 = p1.x;
+                fa = t * d01 / (d01 + d12),
-            var y1 = p1.y;
+                fb = t * d12 / (d01 + d12),
-            var x2 = p2.x;
+                p1x = x1 - fa * (x2 - x0),
-            var y2 = p2.y;
+                p1y = y1 - fa * (y2 - y0),
-            var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));
+                p2x = x1 + fb * (x2 - x0),
-            var d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+                p2y = y1 + fb * (y2 - y0);
-            var fa = t * d01 / (d01 + d12);
+
-            var fb = t * d12 / (d01 + d12);
+            return [p1x ,p1y, p2x, p2y];
-            var p1x = x1 - fa * (x2 - x0);
-            var p1y = y1 - fa * (y2 - y0);
-            var p2x = x1 + fb * (x2 - x0);
-            var p2y = y1 + fb * (y2 - y0);
-            return [{
-                x: p1x,
-                y: p1y
-            }, {
-                x: p2x,
-                y: p2y
-            }];
         },
-        _expandPoints: function(points, tension) {
+        _expandPoints: function(p, tension) {
-            var length = points.length,
+            var len = p.length,
                 allPoints = [],
                 n, cp;
 
-            for(n = 1; n < length - 1; n++) {
+            for (n=2; n<len-2; n+=2) {
-                cp = Kinetic.Util._getControlPoints(points[n - 1], points[n], points[n + 1], tension);
+                cp = Kinetic.Util._getControlPoints(p[n-2], p[n-1], p[n], p[n+1], p[n+2], p[n+3], tension);
                 allPoints.push(cp[0]);
-                allPoints.push(points[n]);
                 allPoints.push(cp[1]);
+                allPoints.push(p[n]);
+                allPoints.push(p[n+1]);
+                allPoints.push(cp[2]);
+                allPoints.push(cp[3]);
             }
 
             return allPoints;

src/shapes/Line.js

@@ -43,31 +43,30 @@
                 tp, len, n, point;
 
             context.beginPath();
-            context.moveTo(points[0].x, points[0].y);
+            context.moveTo(points[0], points[1]);
 
             // tension
-            if(tension !== 0 && length > 2) {
+            if(tension !== 0 && length > 4) {
                 tp = this.getTensionPoints();
                 len = tp.length;
-                n = closed ? 0 : 2;
+                n = closed ? 0 : 4;
 
                 if (!closed) {
-                    context.quadraticCurveTo(tp[0].x, tp[0].y, tp[1].x, tp[1].y);
+                    context.quadraticCurveTo(tp[0], tp[1], tp[2], tp[3]);
                 }
 
-                while(n < len - 1) {
+                while(n < len - 2) {
-                    context.bezierCurveTo(tp[n].x, tp[n++].y, tp[n].x, tp[n++].y, tp[n].x, tp[n++].y);
+                    context.bezierCurveTo(tp[n++], tp[n++], tp[n++], tp[n++], tp[n++], tp[n++]);
                 }
 
                 if (!closed) {
-                    context.quadraticCurveTo(tp[len - 1].x, tp[len - 1].y, points[length - 1].x, points[length - 1].y);
+                    context.quadraticCurveTo(tp[len-2], tp[len-1], points[length-2], points[length-1]);
                 }
             }
             // no tension
             else {
-                for(n = 1; n < length; n++) {
+                for(n = 2; n < length; n+=2) {
-                    point = points[n];
+                    context.lineTo(points[n], points[n+1]);
-                    context.lineTo(point.x, point.y);
                 }
             }
 
@@ -93,25 +92,48 @@
             }
         },
         _getTensionPointsClosed: function() {
-            var points = this.getPoints(),
+            var p = this.getPoints(),
-                length = points.length,
+                len = p.length,
                 tension = this.getTension(),
                 util = Kinetic.Util,
-                firstControlPoints = util._getControlPoints(points[length - 1], points[0], points[1], tension),
+                firstControlPoints = util._getControlPoints(
-                lastControlPoints = util._getControlPoints(points[length - 2], points[length - 1], points[0], tension),
+                    p[len-2],
-                tensionPoints = Kinetic.Util._expandPoints(points, tension);
+                    p[len-1], 
-
+                    p[0], 
-            // prepend control point
+                    p[1], 
-            tensionPoints.unshift(firstControlPoints[1]);
+                    p[2], 
-
+                    p[3],
-            // append cp, point, cp, cp, first point
+                    tension
-            tensionPoints.push(lastControlPoints[0]);
+                ),
-            tensionPoints.push(points[length - 1]);
+                lastControlPoints = util._getControlPoints(
-            tensionPoints.push(lastControlPoints[1]);
+                    p[len-4], 
-            tensionPoints.push(firstControlPoints[0]);
+                    p[len-3], 
-            tensionPoints.push(points[0]);
+                    p[len-2], 
-
+                    p[len-1], 
-            return tensionPoints;
+                    p[0], 
+                    p[1],
+                    tension
+                ),
+                middle = Kinetic.Util._expandPoints(p, tension),
+                tp = [
+                        firstControlPoints[2], 
+                        firstControlPoints[3]
+                    ]
+                    .concat(middle)
+                    .concat([
+                        lastControlPoints[0],
+                        lastControlPoints[1],
+                        p[len-2],
+                        p[len-1],
+                        lastControlPoints[2],
+                        lastControlPoints[3],
+                        firstControlPoints[0],
+                        firstControlPoints[1],
+                        p[0],
+                        p[1]
+                    ]);
+                    
+            return tp;
         }
     };
     Kinetic.Util.extend(Kinetic.Line, Kinetic.Shape);
@@ -153,7 +175,7 @@
      * @param {Number} tension
      */
 
-    Kinetic.Factory.addPointsGetterSetter(Kinetic.Line, 'points');
+    Kinetic.Factory.addGetterSetter(Kinetic.Line, 'points');
     /**
      * get points array
      * @name getPoints
@@ -170,4 +192,4 @@
      * @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]
      */
-})();
+})();

test/unit/shapes/Line-test.js

@@ -4,16 +4,8 @@ suite('Line', function() {
         var stage = addStage();
         var layer = new Kinetic.Layer();
 
-        var points = [{
-            x: 73,
-            y: 160
-        }, {
-            x: 340,
-            y: 23
-        }];
-
         var line = new Kinetic.Line({
-            points: points,
+            points: [73,160,340,23],
             stroke: 'blue',
             strokeWidth: 20,
             lineCap: 'round',
@@ -26,19 +18,13 @@ suite('Line', function() {
         stage.add(layer);
 
         line.setPoints([1, 2, 3, 4]);
-        assert.equal(line.getPoints()[0].x, 1);
+        assert.equal(line.getPoints()[0], 1);
 
-        line.setPoints([{
+        line.setPoints([5,6,7,8]);
-            x: 5,
+        assert.equal(line.getPoints()[0], 5);
-            y: 6
-        }, {
-            x: 7,
-            y: 8
-        }]);
-        assert.equal(line.getPoints()[0].x, 5);
 
         line.setPoints([73, 160, 340, 23, 340, 80]);
-        assert.equal(line.getPoints()[0].x, 73);
+        assert.equal(line.getPoints()[0], 73);
         
         assert.equal(line.getClassName(), 'Line');
 
@@ -74,8 +60,8 @@ suite('Line', function() {
         layer.add(line).add(redLine);
         stage.add(layer);
 
-        assert.equal(line.getPoints()[0].x, 0);
+        assert.equal(line.getPoints()[0], 0);
-        assert.equal(redLine.getPoints()[0].x, 4);
+        assert.equal(redLine.getPoints()[0], 4);
         
     });
 
@@ -122,7 +108,7 @@ suite('Line', function() {
         line.setDashArray([10, 10]);
         assert.equal(line.getDashArray().length, 2);
 
-        assert.equal(line.getPoints().length, 4);
+        assert.equal(line.getPoints().length, 8);
 
     });
 
@@ -131,16 +117,8 @@ suite('Line', function() {
         var stage = addStage();
         var layer = new Kinetic.Layer();
 
-        var points = [{
-            x: 73,
-            y: 160
-        }, {
-            x: 340,
-            y: 23
-        }];
-
         var line = new Kinetic.Line({
-            points: points,
+            points: [73,160,340,23],
             stroke: 'blue',
             strokeWidth: 20,
             lineCap: 'round',