From 70df77f9fa853adace9000522628d045b5acac2a Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Fri, 27 Apr 2012 19:42:04 -0700 Subject: [PATCH] enhanced setAttrs() logic to allow custom node properties and functions --- dist/kinetic-core.js | 139 ++++++++++++++++++++++--------------------- src/GlobalObject.js | 6 ++ src/Node.js | 125 +++++++++++++++++++------------------- src/Shape.js | 3 - src/shapes/Image.js | 5 +- 5 files changed, 144 insertions(+), 134 deletions(-) diff --git a/dist/kinetic-core.js b/dist/kinetic-core.js index accdb637..cd3b5e26 100644 --- a/dist/kinetic-core.js +++ b/dist/kinetic-core.js @@ -140,6 +140,12 @@ Kinetic.GlobalObject = { else { this.frame.lastTime = 0; } + }, + _isElement: function(obj) { + return !!(obj && obj.nodeType == 1); + }, + _isFunction: function(obj) { + return !!(obj && obj.constructor && obj.call && obj.apply); } }; @@ -272,70 +278,75 @@ Kinetic.Node.prototype = { * @param {Object} config */ setAttrs: function(config) { + var go = Kinetic.GlobalObject; // set properties from config if(config) { for(var key in config) { var val = config[key]; - // handle special keys - switch (key) { - /* - * config properties that require a method to - * be set - */ - case 'draggable': - this.draggable(config[key]); - break; - case 'listening': - this.listen(config[key]); - break; - case 'rotationDeg': - this.attrs.rotation = config[key] * Math.PI / 180; - break; - /* - * config objects - */ - case 'centerOffset': - if(val.x !== undefined) { - this.attrs[key].x = val.x; - } - if(val.y !== undefined) { - this.attrs[key].y = val.y; - } - break; - case 'scale': - if(val.x !== undefined) { - this.attrs[key].x = val.x; - } - if(val.y !== undefined) { - this.attrs[key].y = val.y; - } - break; - case 'crop': - if(val.x !== undefined) { - this.attrs[key].x = val.x; - } - if(val.y !== undefined) { - this.attrs[key].y = val.y; - } - if(val.width !== undefined) { - this.attrs[key].width = val.width; - } - if(val.height !== undefined) { - this.attrs[key].height = val.height; - } - break; - /* - * config properties that we don't want in attrs - */ - case 'drawFunc': - break; - case 'image': - break; - case 'container': - break; - default: - this.attrs[key] = config[key]; - break; + + /* + * add functions, DOM elements, and images + * directly to the node + */ + if(go._isFunction(val) || go._isElement(val)) { + this[key] = val; + } + /* + * add all other object types to attrs object + */ + else { + // handle special keys + switch (key) { + /* + * config properties that require a method to + * be set + */ + case 'draggable': + this.draggable(config[key]); + break; + case 'listening': + this.listen(config[key]); + break; + case 'rotationDeg': + this.attrs.rotation = config[key] * Math.PI / 180; + break; + /* + * config objects + */ + case 'centerOffset': + if(val.x !== undefined) { + this.attrs[key].x = val.x; + } + if(val.y !== undefined) { + this.attrs[key].y = val.y; + } + break; + case 'scale': + if(val.x !== undefined) { + this.attrs[key].x = val.x; + } + if(val.y !== undefined) { + this.attrs[key].y = val.y; + } + break; + case 'crop': + if(val.x !== undefined) { + this.attrs[key].x = val.x; + } + if(val.y !== undefined) { + this.attrs[key].y = val.y; + } + if(val.width !== undefined) { + this.attrs[key].width = val.width; + } + if(val.height !== undefined) { + this.attrs[key].height = val.height; + } + break; + default: + this.attrs[key] = config[key]; + break; + } } } } @@ -2167,9 +2178,6 @@ Kinetic.Shape = function(config) { this.attrs.lineJoin = undefined; this.attrs.detectionType = 'path'; - // special - this.drawFunc = config.drawFunc; - this.data = []; this.nodeType = 'Shape'; @@ -2562,10 +2570,7 @@ Kinetic.Image = function(config) { width: undefined, height: undefined }; - - // special - this.image = config.image; - + this.shapeType = "Image"; config.drawFunc = function() { if(this.image !== undefined) { diff --git a/src/GlobalObject.js b/src/GlobalObject.js index c37bf277..6aafe244 100644 --- a/src/GlobalObject.js +++ b/src/GlobalObject.js @@ -112,6 +112,12 @@ Kinetic.GlobalObject = { else { this.frame.lastTime = 0; } + }, + _isElement: function(obj) { + return !!(obj && obj.nodeType == 1); + }, + _isFunction: function(obj) { + return !!(obj && obj.constructor && obj.call && obj.apply); } }; diff --git a/src/Node.js b/src/Node.js index 480d7a08..0df8b1b5 100644 --- a/src/Node.js +++ b/src/Node.js @@ -120,70 +120,75 @@ Kinetic.Node.prototype = { * @param {Object} config */ setAttrs: function(config) { + var go = Kinetic.GlobalObject; // set properties from config if(config) { for(var key in config) { var val = config[key]; - // handle special keys - switch (key) { - /* - * config properties that require a method to - * be set - */ - case 'draggable': - this.draggable(config[key]); - break; - case 'listening': - this.listen(config[key]); - break; - case 'rotationDeg': - this.attrs.rotation = config[key] * Math.PI / 180; - break; - /* - * config objects - */ - case 'centerOffset': - if(val.x !== undefined) { - this.attrs[key].x = val.x; - } - if(val.y !== undefined) { - this.attrs[key].y = val.y; - } - break; - case 'scale': - if(val.x !== undefined) { - this.attrs[key].x = val.x; - } - if(val.y !== undefined) { - this.attrs[key].y = val.y; - } - break; - case 'crop': - if(val.x !== undefined) { - this.attrs[key].x = val.x; - } - if(val.y !== undefined) { - this.attrs[key].y = val.y; - } - if(val.width !== undefined) { - this.attrs[key].width = val.width; - } - if(val.height !== undefined) { - this.attrs[key].height = val.height; - } - break; - /* - * config properties that we don't want in attrs - */ - case 'drawFunc': - break; - case 'image': - break; - case 'container': - break; - default: - this.attrs[key] = config[key]; - break; + + /* + * add functions, DOM elements, and images + * directly to the node + */ + if(go._isFunction(val) || go._isElement(val)) { + this[key] = val; + } + /* + * add all other object types to attrs object + */ + else { + // handle special keys + switch (key) { + /* + * config properties that require a method to + * be set + */ + case 'draggable': + this.draggable(config[key]); + break; + case 'listening': + this.listen(config[key]); + break; + case 'rotationDeg': + this.attrs.rotation = config[key] * Math.PI / 180; + break; + /* + * config objects + */ + case 'centerOffset': + if(val.x !== undefined) { + this.attrs[key].x = val.x; + } + if(val.y !== undefined) { + this.attrs[key].y = val.y; + } + break; + case 'scale': + if(val.x !== undefined) { + this.attrs[key].x = val.x; + } + if(val.y !== undefined) { + this.attrs[key].y = val.y; + } + break; + case 'crop': + if(val.x !== undefined) { + this.attrs[key].x = val.x; + } + if(val.y !== undefined) { + this.attrs[key].y = val.y; + } + if(val.width !== undefined) { + this.attrs[key].width = val.width; + } + if(val.height !== undefined) { + this.attrs[key].height = val.height; + } + break; + default: + this.attrs[key] = config[key]; + break; + } } } } diff --git a/src/Shape.js b/src/Shape.js index 6cb90ab9..43778582 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -26,9 +26,6 @@ Kinetic.Shape = function(config) { this.attrs.lineJoin = undefined; this.attrs.detectionType = 'path'; - // special - this.drawFunc = config.drawFunc; - this.data = []; this.nodeType = 'Shape'; diff --git a/src/shapes/Image.js b/src/shapes/Image.js index e743e0ca..8863e9c9 100644 --- a/src/shapes/Image.js +++ b/src/shapes/Image.js @@ -18,10 +18,7 @@ Kinetic.Image = function(config) { width: undefined, height: undefined }; - - // special - this.image = config.image; - + this.shapeType = "Image"; config.drawFunc = function() { if(this.image !== undefined) {