diff --git a/src/DragAndDrop.js b/src/DragAndDrop.js index 254b2cdf..3d3c5b5f 100644 --- a/src/DragAndDrop.js +++ b/src/DragAndDrop.js @@ -121,7 +121,7 @@ * @param {String} draggable */ Kinetic.Node.prototype.setDraggable = function(draggable) { - this.setAttr('draggable', draggable); + this._setAttr('draggable', draggable); this._dragChange(); }; diff --git a/src/Node.js b/src/Node.js index 6ecb902e..42bf69b8 100644 --- a/src/Node.js +++ b/src/Node.js @@ -173,6 +173,28 @@ return this.attrs[attr]; } }, + /** + * set attr + * @name setAttr + * @methodOf Kinetic.Node.prototype + * @param {String} attr + * #param {*} val + */ + setAttr: function() { + var args = Array.prototype.slice.call(arguments), + attr = args[0], + method = SET + Kinetic.Util._capitalize(attr), + func = this[method]; + + args.shift(); + if(Kinetic.Util._isFunction(func)) { + func.apply(this, args); + } + // otherwise get directly + else { + this.attrs[attr] = args[0]; + } + }, /** * get attrs * @name getAttrs @@ -209,7 +231,7 @@ } // otherwise set directly else { - this.setAttr(key, config[key]); + this._setAttr(key, config[key]); } } } @@ -915,7 +937,7 @@ go._removeId(oldId); go._addId(this, id); - this.setAttr(ID, id); + this._setAttr(ID, id); }, /** * set name @@ -930,7 +952,7 @@ go._removeName(oldName, this._id); go._addName(this, name); - this.setAttr(NAME, name); + this._setAttr(NAME, name); }, /** * get node type. Returns 'Stage', 'Layer', 'Group', or 'Shape' @@ -940,7 +962,7 @@ getNodeType: function() { return this.nodeType; }, - setAttr: function(key, val) { + _setAttr: function(key, val) { var oldVal; if(val !== undefined) { oldVal = this.attrs[key]; @@ -985,7 +1007,7 @@ if (events) { len = events.length; for(i = 0; i < len; i++) { - events[i].handler.apply(this, [evt]); + events[i].handler.call(this, evt); } } }, @@ -1059,7 +1081,7 @@ g = obj && obj.g !== undefined ? obj.g | 0 : this.getAttr(attr + UPPER_G), b = obj && obj.b !== undefined ? obj.b | 0 : this.getAttr(attr + UPPER_B); - this.setAttr(attr, HASH + Kinetic.Util._rgbToHex(r, g, b)); + this._setAttr(attr, HASH + Kinetic.Util._rgbToHex(r, g, b)); }; }; Kinetic.Node.addColorComponentGetter = function(constructor, attr, c) { @@ -1083,7 +1105,7 @@ method = SET + Kinetic.Util._capitalize(attr); constructor.prototype[method] = function(val) { - this.setAttr(attr, val); + this._setAttr(attr, val); if (isTransform) { this.cachedTransform = null; } @@ -1120,14 +1142,14 @@ // radians constructor.prototype[method] = function(val) { - this.setAttr(attr, val); + this._setAttr(attr, val); if (isTransform) { this.cachedTransform = null; } }; // degrees constructor.prototype[method + DEG] = function(deg) { - this.setAttr(attr, Kinetic.Util._degToRad(deg)); + this._setAttr(attr, Kinetic.Util._degToRad(deg)); if (isTransform) { this.cachedTransform = null; } diff --git a/src/Shape.js b/src/Shape.js index e964acf7..3d2f42f3 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -97,61 +97,61 @@ * enable fill */ enableFill: function() { - this.setAttr('fillEnabled', true); + this._setAttr('fillEnabled', true); }, /** * disable fill */ disableFill: function() { - this.setAttr('fillEnabled', false); + this._setAttr('fillEnabled', false); }, /** * enable stroke */ enableStroke: function() { - this.setAttr('strokeEnabled', true); + this._setAttr('strokeEnabled', true); }, /** * disable stroke */ disableStroke: function() { - this.setAttr('strokeEnabled', false); + this._setAttr('strokeEnabled', false); }, /** * enable stroke scale */ enableStrokeScale: function() { - this.setAttr('strokeScaleEnabled', true); + this._setAttr('strokeScaleEnabled', true); }, /** * disable stroke scale */ disableStrokeScale: function() { - this.setAttr('strokeScaleEnabled', false); + this._setAttr('strokeScaleEnabled', false); }, /** * enable shadow */ enableShadow: function() { - this.setAttr('shadowEnabled', true); + this._setAttr('shadowEnabled', true); }, /** * disable shadow */ disableShadow: function() { - this.setAttr('shadowEnabled', false); + this._setAttr('shadowEnabled', false); }, /** * enable dash array */ enableDashArray: function() { - this.setAttr('dashArrayEnabled', true); + this._setAttr('dashArrayEnabled', true); }, /** * disable dash array */ disableDashArray: function() { - this.setAttr('dashArrayEnabled', false); + this._setAttr('dashArrayEnabled', false); }, /** * get shape type. Ex. 'Circle', 'Rect', 'Text', etc. diff --git a/src/Stage.js b/src/Stage.js index 7a6b8027..adea6354 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -57,7 +57,7 @@ if( typeof container === STRING) { container = document.getElementById(container); } - this.setAttr(CONTAINER, container); + this._setAttr(CONTAINER, container); }, draw: function() { // clear children layers diff --git a/src/shapes/Image.js b/src/shapes/Image.js index 033ec24b..c0a1d1f8 100644 --- a/src/shapes/Image.js +++ b/src/shapes/Image.js @@ -160,7 +160,7 @@ size = Kinetic.Util._getSize(config), both = Kinetic.Util._merge(pos, size); - this.setAttr(CROP, Kinetic.Util._merge(both, this.getCrop())); + this._setAttr(CROP, Kinetic.Util._merge(both, this.getCrop())); }, /** * create image hit region which enables more accurate hit detection mapping of the image @@ -247,7 +247,7 @@ method = SET + Kinetic.Util._capitalize(attr); constructor.prototype[method] = function(val) { - this.setAttr(attr, val); + this._setAttr(attr, val); this._applyFilter = true; }; }; diff --git a/src/shapes/Line.js b/src/shapes/Line.js index 199c34e0..16620e3b 100644 --- a/src/shapes/Line.js +++ b/src/shapes/Line.js @@ -42,7 +42,7 @@ * of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4] */ setPoints: function(val) { - this.setAttr('points', Kinetic.Util._getPoints(val)); + this._setAttr('points', Kinetic.Util._getPoints(val)); }, /** * get points array diff --git a/src/shapes/Polygon.js b/src/shapes/Polygon.js index aefd8f63..7eb53366 100644 --- a/src/shapes/Polygon.js +++ b/src/shapes/Polygon.js @@ -40,7 +40,7 @@ * of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4] */ setPoints: function(val) { - this.setAttr('points', Kinetic.Util._getPoints(val)); + this._setAttr('points', Kinetic.Util._getPoints(val)); }, /** * get points array diff --git a/src/shapes/Spline.js b/src/shapes/Spline.js index b1a4e935..2130a070 100644 --- a/src/shapes/Spline.js +++ b/src/shapes/Spline.js @@ -84,7 +84,7 @@ * @param {Number} tension */ setTension: function(tension) { - this.setAttr('tension', tension); + this._setAttr('tension', tension); this._setAllPoints(); }, _setAllPoints: function() { diff --git a/src/shapes/Text.js b/src/shapes/Text.js index efff51b0..4c31969a 100644 --- a/src/shapes/Text.js +++ b/src/shapes/Text.js @@ -140,7 +140,7 @@ */ setText: function(text) { var str = Kinetic.Util._isString(text) ? text : text.toString(); - this.setAttr(TEXT, str); + this._setAttr(TEXT, str); }, /** * get width diff --git a/tests/js/unit/nodeTests.js b/tests/js/unit/nodeTests.js index e4d4eff7..2d80ff8b 100644 --- a/tests/js/unit/nodeTests.js +++ b/tests/js/unit/nodeTests.js @@ -1,4 +1,37 @@ Test.Modules.NODE = { + 'setAttr': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + var layer = new Kinetic.Layer(); + var circle = new Kinetic.Circle({ + x: stage.getWidth() / 2, + y: stage.getHeight() / 2, + radius: 70, + fill: 'green', + stroke: 'black', + strokeWidth: 4 + }); + + stage.add(layer.add(circle)); + + circle.setAttr('fill', 'red'); + layer.draw(); + + test(circle.getFill() === 'red', 'circle should now be red'); + + circle.setAttr('position', 5, 6); + + test(circle.getX() === 5, 'circle x should be 5'); + test(circle.getY() === 6, 'circle y should be 6'); + + circle.setAttr('foobar', 12); + + test(circle.getAttr('foobar') === 12, 'custom foobar attr should be 12'); + + }, 'set shape and layer opacity to 0.5': function(containerId) { var stage = new Kinetic.Stage({ container: containerId,