enhanced setAttrs() logic to allow custom node properties and functions

This commit is contained in:
Eric Rowell 2012-04-27 19:42:04 -07:00
parent 508bfb7a9b
commit 70df77f9fa
5 changed files with 144 additions and 134 deletions

139
dist/kinetic-core.js vendored
View File

@ -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) {

View File

@ -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);
}
};

View File

@ -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;
}
}
}
}

View File

@ -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';

View File

@ -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) {