Rect tests are now passing

src/Factory.js

@@ -42,29 +42,21 @@
         Y = 'y';
 
     Kinetic.Factory = {
-        addGetterSetter: function() {
+        addGetterSetter: function(constructor, baseAttr, def) {
-            var constructor = arguments[0],
+            var util = Kinetic.Util
-                baseAttr = arguments[1],
-                util = Kinetic.Util,
-                def, component, index;
 
-            // base method
+            if (util._isArray(def)) {
-            if (arguments.length <= 3) {
+                def = util.cloneArray(def);
-                def = arguments[2];
-                if (util._isArray(def)) {
-                    def = util.cloneArray(def);
-                }
-                this.addGetter(constructor, baseAttr, def);
-                this.addSetter(constructor, baseAttr);
             }
-            // component method
+            else if (util._isObject(def)) {
-            else {
+                def = util.cloneObject(def);
-                component = arguments[2];
-                index = arguments[3];
-                def = arguments[4];
-                this.addComponentGetter(constructor, baseAttr, component, index, def);
-                this.addComponentSetter(constructor, baseAttr, component, index);
             }
+            this.addGetter(constructor, baseAttr, def);
+            this.addSetter(constructor, baseAttr);
+        },
+        addComponentGetterSetter: function(constructor, baseAttr, component, def) {
+            this.addComponentGetter(constructor, baseAttr, component, def);
+            this.addComponentSetter(constructor, baseAttr, component);
         },
         addGetter: function(constructor, baseAttr, def) {
             var method = GET + Kinetic.Util._capitalize(baseAttr);
@@ -81,20 +73,20 @@
                 this._setAttr(baseAttr, val);   
             };
         },
-        addComponentGetter: function(constructor, baseAttr, component, index, def) {
+        addComponentGetter: function(constructor, baseAttr, component, 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];
+                    val = base && base[component];
                 return val === undefined ? def : val;
             };
         },
-        addComponentSetter: function(constructor, baseAttr, component, index) {
+        addComponentSetter: function(constructor, baseAttr, component) {
             var method = SET + Kinetic.Util._capitalize(baseAttr) + Kinetic.Util._capitalize(component);
 
             constructor.prototype[method] = function(val) {
-                this._setComponentAttr(baseAttr, index, val);   
+                this._setComponentAttr(baseAttr, component, val);   
             };
         },
 

src/Node.js

@@ -492,25 +492,17 @@
          * set node position relative to parent
          * @method
          * @memberof Kinetic.Node.prototype
-         * @param {Number} x
+         * @param {Object} pos
-         * @param {Number} y
+         * @param {Number} pos.x
+         * @param {Nubmer} pos.y
          * @example
-         * // set x and y<br>
+         * // set x and <br>
-         * node.setPosition(5, 10);<br><br>
-         *
-         * // set x only<br>
          * node.setPosition({<br>
          *   x: 5<br>
-         * });<br><br>
+         *   y: 10
-         *
+         * });
-         * // set x and y using an array<br>
-         * node.setPosition([5, 10]);<br><br>
-         *
-         * // set both x and y to 5<br>
-         * node.setPosition(5);
          */
-        setPosition: function() {
+        setPosition: function(pos) {
-            var pos = Kinetic.Util._getXY([].slice.call(arguments));
             this.setX(pos.x);
             this.setY(pos.y);
             return this;
@@ -547,12 +539,12 @@
          * set absolute position
          * @method
          * @memberof Kinetic.Node.prototype
-         * @param {Number} x
+         * @param {Object} pos
-         * @param {Number} y
+         * @param {Number} pos.x
+         * @param {Number} pos.y
          */
-        setAbsolutePosition: function() {
+        setAbsolutePosition: function(pos) {
-            var pos = Kinetic.Util._getXY([].slice.call(arguments)),
+            var trans = this._clearTransform(),
-                trans = this._clearTransform(),
                 it;
 
             // don't clear translation
@@ -617,28 +609,28 @@
          * move node by an amount relative to its current position
          * @method
          * @memberof Kinetic.Node.prototype
-         * @param {Number} x
+         * @param {Object} change
-         * @param {Number} y
+         * @param {Number} change.x
+         * @param {Number} change.y
          * @example
          * // move node in x direction by 1px and y direction by 2px<br>
-         * node.move(1, 2);<br><br>
-         *
-         * // move node in x direction by 1px<br>
          * node.move({<br>
-         *   x: 1<br>
+         *   x: 1,<br>
+         *   y: 2)<br>
          * });
          */
-        move: function() {
+        move: function(change) {
-            var pos = Kinetic.Util._getXY([].slice.call(arguments)),
+            var changeX = change.x,
+                changeY = change.y,
                 x = this.getX(),
                 y = this.getY();
 
-            if(pos.x !== undefined) {
+            if(changeX !== undefined) {
-                x += pos.x;
+                x += changeX;
             }
 
-            if(pos.y !== undefined) {
+            if(changeY !== undefined) {
-                y += pos.y;
+                y += changeY;
             }
 
             this.setPosition(x, y);
@@ -1060,12 +1052,11 @@
          * set size
          * @method
          * @memberof Kinetic.Node.prototype
+         * @param {Object} size
          * @param {Number} width
          * @param {Number} height
          */
-        setSize: function() {
+        setSize: function(size) {
-            // set stage dimensions
-            var size = Kinetic.Util._getSize(Array.prototype.slice.call(arguments));
             this.setWidth(size.width);
             this.setHeight(size.height);
             return this;
@@ -1185,6 +1176,20 @@
                 this._fireChangeEvent(key, oldVal, val);
             }
         },
+       _setComponentAttr: function(key, component, val) {
+            var oldVal;
+            if(val !== undefined) {
+                oldVal = this.attrs[key];
+
+                if (!oldVal) {
+                    this.attrs[key] = [];
+                }
+                
+                this._fireBeforeChangeEvent(key, oldVal, val);
+                this.attrs[key][component] = val;
+                this._fireChangeEvent(key, oldVal, val);
+            }
+        },
         _fireAndBubble: function(eventType, evt, compareShape) {
             var okayToRun = true;
 
@@ -1392,44 +1397,22 @@
      * @memberof Kinetic.Node.prototype
      */
 
-    Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'scale', 1);
+    Kinetic.Factory.addGetterSetter(Kinetic.Node, 'scale', {x: 1, y: 1});
 
     /**
      * set scale
      * @name setScale
-     * @param {Number} scale
+     * @param {Object} scale
+     * @param {Number} scale.x
+     * @param {Number} scale.y
      * @method
      * @memberof Kinetic.Node.prototype
      * @example
-     * // set x and y to the same value<br>
+     * // set x and y <br>
-     * shape.setScale(5);<br><br>
-     *
-     * // set x and y<br>
-     * shape.setScale(20, 40);<br><br>
-     *
-     * // set x only <br>
      * shape.setScale({<br>
      *   x: 20<br>
-     * });<br><br>
+     *   y: 10<br>
-     *
+     * });
-     * // set x and y using an array<br>
-     * shape.setScale([20, 40]);
-     */
-
-     /**
-     * set scale x
-     * @name setScaleX
-     * @param {Number} x
-     * @method
-     * @memberof Kinetic.Node.prototype
-     */
-
-     /**
-     * set scale y
-     * @name setScaleY
-     * @param {Number} y
-     * @method
-     * @memberof Kinetic.Node.prototype
      */
 
     /**
@@ -1439,14 +1422,32 @@
      * @memberof Kinetic.Node.prototype
      */
 
-     /**
+    Kinetic.Factory.addComponentGetterSetter(Kinetic.Node, 'scale', 'x', 1);
+    /**
+     * set scale x
+     * @name setScaleX
+     * @param {Number} x
+     * @method
+     * @memberof Kinetic.Node.prototype
+     */
+
+    /**
      * get scale x
      * @name getScaleX
      * @method
      * @memberof Kinetic.Node.prototype
      */
 
-     /**
+    Kinetic.Factory.addComponentGetterSetter(Kinetic.Node, 'scale', 'y', 1);
+    /**
+     * set scale y
+     * @name setScaleY
+     * @param {Number} y
+     * @method
+     * @memberof Kinetic.Node.prototype
+     */
+
+    /**
      * get scale y
      * @name getScaleY
      * @method
@@ -1515,7 +1516,7 @@
      * @memberof Kinetic.Node.prototype
      */
 
-    Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'offset', 0);
+    Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offset', {x: 0, y: 0});
 
     /**
      * set offset.  A node's offset defines the position and rotation point
@@ -1525,22 +1526,23 @@
      * @param {Number} x
      * @param {Number} y
      * @example
-     * // set x and y<br>
+     * // set x and y <br>
-     * shape.setOffset(20, 40);<br><br>
-     *
-     * // set x only <br>
      * shape.setOffset({<br>
      *   x: 20<br>
+     *   y: 10<br>
      * });<br><br>
-     *
-     * // set x and y using an array<br>
-     * shape.setOffset([20, 40]);<br><br>
-     *
-     * // set x and y to the same value<br>
-     * shape.setOffset(5);
      */
 
-     /**
+    /**
+     * get offset
+     * @name getOffset
+     * @method
+     * @memberof Kinetic.Node.prototype
+     * @returns {Object}
+     */
+
+    Kinetic.Factory.addComponentGetterSetter(Kinetic.Node, 'offset', 'x', 0);
+    /**
      * set offset x
      * @name setOffsetX
      * @method
@@ -1548,7 +1550,16 @@
      * @param {Number} x
      */
 
-     /**
+    /**
+     * get offset x
+     * @name getOffsetX
+     * @method
+     * @memberof Kinetic.Node.prototype
+     * @returns {Number}
+     */
+
+     Kinetic.Factory.addComponentGetterSetter(Kinetic.Node, 'offset', 'y', 0);
+    /**
      * set offset y
      * @name setOffsetY
      * @method
@@ -1557,24 +1568,11 @@
      */
 
     /**
-     * get offset
-     * @name getOffset
-     * @method
-     * @memberof Kinetic.Node.prototype
-     */
-
-     /**
-     * get offset x
-     * @name getOffsetX
-     * @method
-     * @memberof Kinetic.Node.prototype
-     */
-
-     /**
      * get offset y
      * @name getOffsetY
      * @method
      * @memberof Kinetic.Node.prototype
+     * @returns {Number}
      */
 
     Kinetic.Factory.addSetter(Kinetic.Node, 'width');

src/Shape.js

@@ -1300,30 +1300,33 @@
      * @memberof Kinetic.Shape.prototype
      */
 
-    Kinetic.Factory.addPointGetterSetter(Kinetic.Shape, 'shadowOffset', 0);
+    Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowOffset', {x: 0, y: 0});
 
     /**
      * set shadow offset
      * @name setShadowOffset
      * @method
      * @memberof Kinetic.Shape.prototype
-     * @param {Number|Array|Object} offset
+     * @param {Object} offset
+     * @param {Number} offset.x
+     * @param {Number} offset.y
      * @example
      * // set x and y<br>
-     * shape.setShadowOffset(20, 40);<br><br>
-     *
-     * // set x only <br>
      * shape.setShadowOffset({<br>
      *   x: 20<br>
-     * });<br><br>
+     *   y: 10
-     *
+     * });
-     * // set x and y using an array<br>
-     * shape.setShadowOffset([20, 40]);<br><br>
-     *
-     * // set x and y to the same value<br>
-     * shape.setShadowOffset(5);
      */
 
+    /**
+     * get shadow offset
+     * @name getShadowOffset
+     * @method
+     * @memberof Kinetic.Shape.prototype
+     */
+
+     Kinetic.Factory.addComponentGetterSetter(Kinetic.Shape, 'shadowOffset', 'x', 0);
+
      /**
      * set shadow offset x
      * @name setShadowOffsetX
@@ -1332,6 +1335,15 @@
      * @param {Number} x
      */
 
+     /**
+     * get shadow offset x
+     * @name getShadowOffsetX
+     * @method
+     * @memberof Kinetic.Shape.prototype
+     */
+
+     Kinetic.Factory.addComponentGetterSetter(Kinetic.Shape, 'shadowOffset', 'y', 0);
+
      /**
      * set shadow offset y
      * @name setShadowOffsetY
@@ -1340,20 +1352,6 @@
      * @param {Number} y
      */
 
-    /**
-     * get shadow offset
-     * @name getShadowOffset
-     * @method
-     * @memberof Kinetic.Shape.prototype
-     */
-
-     /**
-     * get shadow offset x
-     * @name getShadowOffsetX
-     * @method
-     * @memberof Kinetic.Shape.prototype
-     */
-
      /**
      * get shadow offset y
      * @name getShadowOffsetY

src/Util.js

@@ -360,191 +360,6 @@
 
             return retArr;
         },
-        /*
-         * The argument can be:
-         * - an integer (will be applied to both x and y)
-         * - an array of one integer (will be applied to both x and y)
-         * - an array of two integers (contains x and y)
-         * - an array of four integers (contains x, y, width, and height)
-         * - an object with x and y properties
-         * - an array of one element which is an array of integers
-         * - an array of one element of an object
-         */
-        _getXY: function(arg) {
-            if(this._isNumber(arg)) {
-                return {
-                    x: arg,
-                    y: arg
-                };
-            }
-            else if(this._isArray(arg)) {
-                // if arg is an array of one element
-                if(arg.length === 1) {
-                    var val = arg[0];
-                    // if arg is an array of one element which is a number
-                    if(this._isNumber(val)) {
-                        return {
-                            x: val,
-                            y: val
-                        };
-                    }
-                    // if arg is an array of one element which is an array
-                    else if(this._isArray(val)) {
-                        return {
-                            x: val[0],
-                            y: val[1]
-                        };
-                    }
-                    // if arg is an array of one element which is an object
-                    else if(this._isObject(val)) {
-                        return val;
-                    }
-                }
-                // if arg is an array of two or more elements
-                else if(arg.length >= 2) {
-                    return {
-                        x: arg[0],
-                        y: arg[1]
-                    };
-                }
-            }
-            // if arg is an object return the object
-            else if(this._isObject(arg)) {
-                return arg;
-            }
-
-            // default
-            return null;
-        },
-        /*
-         * The argument can be:
-         * - an integer (will be applied to both width and height)
-         * - an array of one integer (will be applied to both width and height)
-         * - an array of two integers (contains width and height)
-         * - an array of four integers (contains x, y, width, and height)
-         * - an object with width and height properties
-         * - an array of one element which is an array of integers
-         * - an array of one element of an object
-         */
-        _getSize: function(arg) {
-            if(this._isNumber(arg)) {
-                return {
-                    width: arg,
-                    height: arg
-                };
-            }
-            else if(this._isArray(arg)) {
-                // if arg is an array of one element
-                if(arg.length === 1) {
-                    var val = arg[0];
-                    // if arg is an array of one element which is a number
-                    if(this._isNumber(val)) {
-                        return {
-                            width: val,
-                            height: val
-                        };
-                    }
-                    // if arg is an array of one element which is an array
-                    else if(this._isArray(val)) {
-                        /*
-                         * if arg is an array of one element which is an
-                         * array of four elements
-                         */
-                        if(val.length >= 4) {
-                            return {
-                                width: val[2],
-                                height: val[3]
-                            };
-                        }
-                        /*
-                         * if arg is an array of one element which is an
-                         * array of two elements
-                         */
-                        else if(val.length >= 2) {
-                            return {
-                                width: val[0],
-                                height: val[1]
-                            };
-                        }
-                    }
-                    // if arg is an array of one element which is an object
-                    else if(this._isObject(val)) {
-                        return val;
-                    }
-                }
-                // if arg is an array of four elements
-                else if(arg.length >= 4) {
-                    return {
-                        width: arg[2],
-                        height: arg[3]
-                    };
-                }
-                // if arg is an array of two elements
-                else if(arg.length >= 2) {
-                    return {
-                        width: arg[0],
-                        height: arg[1]
-                    };
-                }
-            }
-            // if arg is an object return the object
-            else if(this._isObject(arg)) {
-                return arg;
-            }
-
-            // default
-            return null;
-        },
-        /*
-         * arg will be an array of numbers or
-         *  an array of point arrays or
-         *  an array of point objects
-         */
-        _getPoints: function(arg) {
-            var arr = [],
-                n, len;
-
-            if(arg === undefined) {
-                return [];
-            }
-
-            len = arg.length;
-
-            // an array of arrays
-            if(this._isArray(arg[0])) {
-                /*
-                 * convert array of arrays into an array
-                 * of objects containing x, y
-                 */
-                for(n = 0; n < len; n++) {
-                    arr.push({
-                        x: arg[n][0],
-                        y: arg[n][1]
-                    });
-                }
-
-                return arr;
-            }
-            // an array of objects
-            if(this._isObject(arg[0])) {
-                return arg;
-            }
-            // an array of integers
-            else {
-                /*
-                 * convert array of numbers into an array
-                 * of objects containing x, y
-                 */
-                for(n = 0; n < len; n += 2) {
-                    arr.push({
-                        x: arg[n],
-                        y: arg[n + 1]
-                    });
-                }
-
-                return arr;
-            }
-        },
         /*
          * arg can be an image object or image data
          */
@@ -677,8 +492,7 @@
             }
             return retObj;
         },
-        // deep object clone
+        cloneObject: function(obj) {
-        _clone: function(obj) {
             var retObj = {};
             for(var key in obj) {
                 if(this._isObject(obj[key])) {

test/unit/shapes/Rect-test.js

@@ -15,6 +15,8 @@ suite('Rect', function(){
       stroke: 'blue'
     });
 
+    console.log(rect)
+
     layer.add(rect);
     stage.add(layer);
 
@@ -45,7 +47,7 @@ suite('Rect', function(){
       stroke: 'blue',
       shadowColor: 'red',
       shadowBlur: 10,
-      shadowOffset: 5,
+      shadowOffset: {x: 5, y: 5},
       shadowOpacity: 0.5,
       opacity: 0.4,
       cornerRadius: 5
@@ -82,10 +84,8 @@ suite('Rect', function(){
           fill: 'green',
           stroke: 'black',
           strokeWidth: 4,
-          offset: {
+          offset: {x: 50, y: 0},
-              x: 50
+          scale: {x: 2, y: 2},
-          },
-          scale: [2, 2],
           cornerRadius: 15,
           draggable: true
       });