lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-02 12:27:35 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

in addition to Collection each() and apply(), I wanted to make it easier to attach event listeners to node collections, so I went with David Johansson's approach for whitelisting on() and off().

Browse Source 
The difference now is that the on() and off() methods are dynamically
added to the Collections prototype from Node, which acts as a wrapper
around each()
This commit is contained in:
ericdrowell
2012-09-25 13:38:36 -07:00
parent d522b9d9d0
commit ff926b34af
4 changed files with 129 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
dist/kinetic-core.js vendored
View File

@@ -1426,19 +1426,19 @@ Kinetic.Node.prototype = {
* @param {Object} config * @param {Object} config
*/ */
setAttrs: function(config) { setAttrs: function(config) {
if (config) { if(config) {
for (var key in config) { for(var key in config) {
var method = 'set' + key.charAt(0).toUpperCase() + key.slice(1); var method = 'set' + key.charAt(0).toUpperCase() + key.slice(1);
// use setter if available // use setter if available
if (Kinetic.Type._isFunction(this[method])) { if(Kinetic.Type._isFunction(this[method])) {
this[method](config[key]); this[method](config[key]);
} }
// otherwise set directly // otherwise set directly
else { else {
this.setAttr(key, config[key]); this.setAttr(key, config[key]);
} }
} }
} }
}, },
/** /**
* determine if shape is visible or not. Shape is visible only * determine if shape is visible or not. Shape is visible only
@@ -1507,6 +1507,7 @@ Kinetic.Node.prototype = {
addChildren(nodes); addChildren(nodes);
} }
} }
if(that.nodeType !== 'Stage') { if(that.nodeType !== 'Stage') {
addChildren(that.getStage().getChildren()); addChildren(that.getStage().getChildren());
} }
@@ -1611,7 +1612,7 @@ Kinetic.Node.prototype = {
y += pos.y; y += pos.y;
} }
this.setPosition(x, y); this.setPosition(x, y);
}, },
/** /**
* get rotation in degrees * get rotation in degrees
@@ -1637,7 +1638,7 @@ Kinetic.Node.prototype = {
* @param {Number} theta * @param {Number} theta
*/ */
rotate: function(theta) { rotate: function(theta) {
this.setRotation(this.getRotation() + theta); this.setRotation(this.getRotation() + theta);
}, },
/** /**
* rotate node by an amount in degrees * rotate node by an amount in degrees
@@ -2022,40 +2023,40 @@ Kinetic.Node.prototype = {
}); });
}, },
/** /**
* set offset. A node's offset defines the position and rotation point * set offset. A node's offset defines the position and rotation point
* @name setOffset * @name setOffset
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
* @param {Number} x * @param {Number} x
* @param {Number} y * @param {Number} y
*/ */
setOffset: function() { setOffset: function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments)); var pos = Kinetic.Type._getXY([].slice.call(arguments));
if (pos.x === undefined) { if(pos.x === undefined) {
pos.x = this.getOffset().x; pos.x = this.getOffset().x;
} }
if (pos.y === undefined) { if(pos.y === undefined) {
pos.y = this.getOffset().y; pos.y = this.getOffset().y;
} }
this.setAttr('offset', pos); this.setAttr('offset', pos);
}, },
/** /**
* set scale. * set scale.
* @name setScale * @name setScale
* @param {Number} x * @param {Number} x
* @param {Number} y * @param {Number} y
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */
setScale: function() { setScale: function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments)); var pos = Kinetic.Type._getXY([].slice.call(arguments));
if (pos.x === undefined) { if(pos.x === undefined) {
pos.x = this.getScale().x; pos.x = this.getScale().x;
} }
if (pos.y === undefined) { if(pos.y === undefined) {
pos.y = this.getScale().y; pos.y = this.getScale().y;
} }
this.setAttr('scale', pos); this.setAttr('scale', pos);
}, },
_clearTransform: function() { _clearTransform: function() {
var trans = { var trans = {
@@ -2104,12 +2105,12 @@ Kinetic.Node.prototype = {
}); });
}, },
setAttr: function(key, val) { setAttr: function(key, val) {
if (val !== undefined) { if(val !== undefined) {
var oldVal = this.attrs[key]; var oldVal = this.attrs[key];
this._fireBeforeChangeEvent(key, oldVal, val); this._fireBeforeChangeEvent(key, oldVal, val);
this.attrs[key] = val; this.attrs[key] = val;
this._fireChangeEvent(key, oldVal, val); this._fireChangeEvent(key, oldVal, val);
} }
}, },
_listenDrag: function() { _listenDrag: function() {
this._dragCleanup(); this._dragCleanup();
@@ -2280,6 +2281,22 @@ Kinetic.Node.prototype.isListening = Kinetic.Node.prototype.getListening;
*/ */
Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable; Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
// collection mappings
(function() {
var collectionMappings = ['on', 'off'];
for(var n = 0; n < collectionMappings.length; n++) {
// induce scope
(function(i) {
var method = collectionMappings[i];
Kinetic.Collection.prototype[method] = function() {
var args = [].slice.call(arguments);
args.unshift(method);
this.apply.apply(this, args);
};
})(n);
}
})();
/** /**
* set node x position * set node x position
* @name setX * @name setX
@@ -2413,7 +2430,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* @name getListening * @name getListening
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
// Container // Container
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

109
src/Node.js
View File

@@ -203,19 +203,19 @@ Kinetic.Node.prototype = {
* @param {Object} config * @param {Object} config
*/ */
setAttrs: function(config) { setAttrs: function(config) {
if (config) { if(config) {
for (var key in config) { for(var key in config) {
var method = 'set' + key.charAt(0).toUpperCase() + key.slice(1); var method = 'set' + key.charAt(0).toUpperCase() + key.slice(1);
// use setter if available // use setter if available
if (Kinetic.Type._isFunction(this[method])) { if(Kinetic.Type._isFunction(this[method])) {
this[method](config[key]); this[method](config[key]);
} }
// otherwise set directly // otherwise set directly
else { else {
this.setAttr(key, config[key]); this.setAttr(key, config[key]);
} }
} }
} }
}, },
/** /**
* determine if shape is visible or not. Shape is visible only * determine if shape is visible or not. Shape is visible only
@@ -284,6 +284,7 @@ Kinetic.Node.prototype = {
addChildren(nodes); addChildren(nodes);
} }
} }
if(that.nodeType !== 'Stage') { if(that.nodeType !== 'Stage') {
addChildren(that.getStage().getChildren()); addChildren(that.getStage().getChildren());
} }
@@ -388,7 +389,7 @@ Kinetic.Node.prototype = {
y += pos.y; y += pos.y;
} }
this.setPosition(x, y); this.setPosition(x, y);
}, },
/** /**
* get rotation in degrees * get rotation in degrees
@@ -414,7 +415,7 @@ Kinetic.Node.prototype = {
* @param {Number} theta * @param {Number} theta
*/ */
rotate: function(theta) { rotate: function(theta) {
this.setRotation(this.getRotation() + theta); this.setRotation(this.getRotation() + theta);
}, },
/** /**
* rotate node by an amount in degrees * rotate node by an amount in degrees
@@ -799,40 +800,40 @@ Kinetic.Node.prototype = {
}); });
}, },
/** /**
* set offset. A node's offset defines the position and rotation point * set offset. A node's offset defines the position and rotation point
* @name setOffset * @name setOffset
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
* @param {Number} x * @param {Number} x
* @param {Number} y * @param {Number} y
*/ */
setOffset: function() { setOffset: function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments)); var pos = Kinetic.Type._getXY([].slice.call(arguments));
if (pos.x === undefined) { if(pos.x === undefined) {
pos.x = this.getOffset().x; pos.x = this.getOffset().x;
} }
if (pos.y === undefined) { if(pos.y === undefined) {
pos.y = this.getOffset().y; pos.y = this.getOffset().y;
} }
this.setAttr('offset', pos); this.setAttr('offset', pos);
}, },
/** /**
* set scale. * set scale.
* @name setScale * @name setScale
* @param {Number} x * @param {Number} x
* @param {Number} y * @param {Number} y
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */
setScale: function() { setScale: function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments)); var pos = Kinetic.Type._getXY([].slice.call(arguments));
if (pos.x === undefined) { if(pos.x === undefined) {
pos.x = this.getScale().x; pos.x = this.getScale().x;
} }
if (pos.y === undefined) { if(pos.y === undefined) {
pos.y = this.getScale().y; pos.y = this.getScale().y;
} }
this.setAttr('scale', pos); this.setAttr('scale', pos);
}, },
_clearTransform: function() { _clearTransform: function() {
var trans = { var trans = {
@@ -881,12 +882,12 @@ Kinetic.Node.prototype = {
}); });
}, },
setAttr: function(key, val) { setAttr: function(key, val) {
if (val !== undefined) { if(val !== undefined) {
var oldVal = this.attrs[key]; var oldVal = this.attrs[key];
this._fireBeforeChangeEvent(key, oldVal, val); this._fireBeforeChangeEvent(key, oldVal, val);
this.attrs[key] = val; this.attrs[key] = val;
this._fireChangeEvent(key, oldVal, val); this._fireChangeEvent(key, oldVal, val);
} }
}, },
_listenDrag: function() { _listenDrag: function() {
this._dragCleanup(); this._dragCleanup();
@@ -1057,6 +1058,22 @@ Kinetic.Node.prototype.isListening = Kinetic.Node.prototype.getListening;
*/ */
Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable; Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
// collection mappings
(function() {
var collectionMappings = ['on', 'off'];
for(var n = 0; n < collectionMappings.length; n++) {
// induce scope
(function(i) {
var method = collectionMappings[i];
Kinetic.Collection.prototype[method] = function() {
var args = [].slice.call(arguments);
args.unshift(method);
this.apply.apply(this, args);
};
})(n);
}
})();
/** /**
* set node x position * set node x position
* @name setX * @name setX
@@ -1189,4 +1206,4 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
* determine if listening to events or not * determine if listening to events or not
* @name getListening * @name getListening
* @methodOf Kinetic.Node.prototype * @methodOf Kinetic.Node.prototype
*/ */

2
tests/js/unitTests.js
View File

@@ -742,7 +742,7 @@ Test.prototype.tests = {
test(shapes.length === 2, 'shapes array should have 2 elements'); test(shapes.length === 2, 'shapes array should have 2 elements');
var a = 0; var a = 0;
shapes.apply('on', 'mouseover', function() { shapes.on('mouseover', function() {
a++; a++;
}); });
circle.simulate('mouseover'); circle.simulate('mouseover');