From 722ae82f21c4b5dba94f25d3841eed24ee64d99f Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sun, 1 Dec 2013 23:47:24 -0800 Subject: [PATCH] Rect tests are now passing --- src/Factory.js | 40 +++----- src/Node.js | 184 ++++++++++++++++----------------- src/Shape.js | 50 +++++---- src/Util.js | 188 +--------------------------------- test/unit/shapes/Rect-test.js | 10 +- 5 files changed, 137 insertions(+), 335 deletions(-) diff --git a/src/Factory.js b/src/Factory.js index d99a84e5..3a509bd4 100644 --- a/src/Factory.js +++ b/src/Factory.js @@ -42,29 +42,21 @@ Y = 'y'; Kinetic.Factory = { - addGetterSetter: function() { - var constructor = arguments[0], - baseAttr = arguments[1], - util = Kinetic.Util, - def, component, index; + addGetterSetter: function(constructor, baseAttr, def) { + var util = Kinetic.Util - // 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); + if (util._isArray(def)) { + def = util.cloneArray(def); } - // 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); + else if (util._isObject(def)) { + def = util.cloneObject(def); } + 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); }; }, diff --git a/src/Node.js b/src/Node.js index 3c155fb6..5f2c94e1 100644 --- a/src/Node.js +++ b/src/Node.js @@ -492,25 +492,17 @@ * set node position relative to parent * @method * @memberof Kinetic.Node.prototype - * @param {Number} x - * @param {Number} y + * @param {Object} pos + * @param {Number} pos.x + * @param {Nubmer} pos.y * @example - * // set x and y
- * node.setPosition(5, 10);

- * - * // set x only
+ * // set x and
* node.setPosition({
* x: 5
- * });

- * - * // set x and y using an array
- * node.setPosition([5, 10]);

- * - * // set both x and y to 5
- * node.setPosition(5); + * y: 10 + * }); */ - setPosition: function() { - var pos = Kinetic.Util._getXY([].slice.call(arguments)); + setPosition: function(pos) { 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 {Number} y + * @param {Object} pos + * @param {Number} pos.x + * @param {Number} pos.y */ - setAbsolutePosition: function() { - var pos = Kinetic.Util._getXY([].slice.call(arguments)), - trans = this._clearTransform(), + setAbsolutePosition: function(pos) { + var 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 {Number} y + * @param {Object} change + * @param {Number} change.x + * @param {Number} change.y * @example * // move node in x direction by 1px and y direction by 2px
- * node.move(1, 2);

- * - * // move node in x direction by 1px
* node.move({
- * x: 1
+ * x: 1,
+ * y: 2)
* }); */ - move: function() { - var pos = Kinetic.Util._getXY([].slice.call(arguments)), + move: function(change) { + var changeX = change.x, + changeY = change.y, x = this.getX(), y = this.getY(); - if(pos.x !== undefined) { - x += pos.x; + if(changeX !== undefined) { + x += changeX; } - if(pos.y !== undefined) { - y += pos.y; + if(changeY !== undefined) { + 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() { - // set stage dimensions - var size = Kinetic.Util._getSize(Array.prototype.slice.call(arguments)); + setSize: function(size) { 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
- * shape.setScale(5);

- * - * // set x and y
- * shape.setScale(20, 40);

- * - * // set x only
+ * // set x and y
* shape.setScale({
* x: 20
- * });

- * - * // set x and y using an array
- * 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 + * y: 10
+ * }); */ /** @@ -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
- * shape.setOffset(20, 40);

- * - * // set x only
+ * // set x and y
* shape.setOffset({
* x: 20
+ * y: 10
* });

- * - * // set x and y using an array
- * shape.setOffset([20, 40]);

- * - * // set x and y to the same value
- * 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'); diff --git a/src/Shape.js b/src/Shape.js index a6c18289..38ea12c2 100644 --- a/src/Shape.js +++ b/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
- * shape.setShadowOffset(20, 40);

- * - * // set x only
* shape.setShadowOffset({
* x: 20
- * });

- * - * // set x and y using an array
- * shape.setShadowOffset([20, 40]);

- * - * // set x and y to the same value
- * shape.setShadowOffset(5); + * y: 10 + * }); */ + /** + * 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 diff --git a/src/Util.js b/src/Util.js index 8325ecaa..531bb020 100644 --- a/src/Util.js +++ b/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 - _clone: function(obj) { + cloneObject: function(obj) { var retObj = {}; for(var key in obj) { if(this._isObject(obj[key])) { diff --git a/test/unit/shapes/Rect-test.js b/test/unit/shapes/Rect-test.js index 5a17efd3..13e2ffd8 100644 --- a/test/unit/shapes/Rect-test.js +++ b/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: { - x: 50 - }, - scale: [2, 2], + offset: {x: 50, y: 0}, + scale: {x: 2, y: 2}, cornerRadius: 15, draggable: true });