mirror of
https://github.com/konvajs/konva.git
synced 2025-06-27 21:54:37 +08:00
enhanced setAttrs() logic to allow custom node properties and functions
This commit is contained in:
parent
508bfb7a9b
commit
70df77f9fa
139
dist/kinetic-core.js
vendored
139
dist/kinetic-core.js
vendored
@ -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) {
|
||||
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
|
125
src/Node.js
125
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user