lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-12-17 09:54:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

cleaned up internal firing logic. the fire method now does not bubble events by default, to prevent devs from unknowingly bubbling events that they don't care to bubble, inadvertantly affecting performance

Browse Source
This commit is contained in:
Eric Rowell
2013-05-13 08:56:09 -07:00
parent 2cf81cc6dd
commit fc1e388f22
3 changed files with 40 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/Node.js
View File

@@ -619,16 +619,17 @@
* @methodOf Kinetic.Node.prototype
* @param {String} eventType event type. can be a regular event, like click, mouseover, or mouseout, or it can be a custom event, like myCustomEvent
* @param {EventObject} evt event object
* @param {Boolean} preventBubble setting the value to false, or leaving it undefined, will result in the event bubbling. Setting the value to true will result in the event not bubbling.
* @param {Boolean} bubble setting the value to false, or leaving it undefined, will result in the event
* not bubbling. Setting the value to true will result in the event bubbling.
*/
fire: function(eventType, evt, preventBubble) {
// no bubble
if (preventBubble) {
this._executeHandlers(eventType, evt || {});
}
fire: function(eventType, evt, bubble) {
// bubble
if (bubble) {
this._fireAndBubble(eventType, evt || {});
}
// no bubble
else {
this._executeAndBubble(eventType, evt || {});
this._fire(eventType, evt || {});
}
},
/**
@@ -890,16 +891,16 @@
this.cachedTransform = null;
},
_fireBeforeChangeEvent: function(attr, oldVal, newVal) {
this.fire(BEFORE + Kinetic.Util._capitalize(attr) + CHANGE, {
this._fire(BEFORE + Kinetic.Util._capitalize(attr) + CHANGE, {
oldVal: oldVal,
newVal: newVal
}, true);
});
},
_fireChangeEvent: function(attr, oldVal, newVal) {
this.fire(attr + CHANGE, {
this._fire(attr + CHANGE, {
oldVal: oldVal,
newVal: newVal
}, true);
});
},
/**
* set id
@@ -948,7 +949,7 @@
this._fireChangeEvent(key, oldVal, val);
}
},
_executeAndBubble: function(eventType, evt, compareShape) {
_fireAndBubble: function(eventType, evt, compareShape) {
if(evt && this.nodeType === SHAPE) {
evt.targetNode = this;
}
@@ -964,20 +965,20 @@
}
if(okayToRun) {
this._executeHandlers(eventType, evt);
this._fire(eventType, evt);
// simulate event bubbling
if(evt && !evt.cancelBubble && this.parent) {
if(compareShape && compareShape.parent) {
this._executeAndBubble.call(this.parent, eventType, evt, compareShape.parent);
this._fireAndBubble.call(this.parent, eventType, evt, compareShape.parent);
}
else {
this._executeAndBubble.call(this.parent, eventType, evt);
this._fireAndBubble.call(this.parent, eventType, evt);
}
}
}
},
_executeHandlers: function(eventType, evt) {
_fire: function(eventType, evt) {
var events = this.eventListeners[eventType],
len, i;
@@ -999,10 +1000,10 @@
node: this
};
this.fire(BEFORE_DRAW, evt);
this._fire(BEFORE_DRAW, evt);
this.drawScene();
this.drawHit();
this.fire(DRAW, evt);
this._fire(DRAW, evt);
},
shouldDrawHit: function() {
return this.isVisible() && this.isListening() && !Kinetic.Global.isDragging();

36
src/Stage.js
View File

@@ -348,8 +348,8 @@
targetShape = this.targetShape;
if(targetShape && !go.isDragging()) {
targetShape.fire(MOUSEOUT, evt);
targetShape.fire(MOUSELEAVE, evt);
targetShape._fireAndBubble(MOUSEOUT, evt);
targetShape._fireAndBubble(MOUSELEAVE, evt);
this.targetShape = null;
}
this.mousePos = undefined;
@@ -366,15 +366,15 @@
if(shape) {
if(!go.isDragging() && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
if(this.targetShape) {
this.targetShape.fire(MOUSEOUT, evt, shape);
this.targetShape.fire(MOUSELEAVE, evt, shape);
this.targetShape._fireAndBubble(MOUSEOUT, evt, shape);
this.targetShape._fireAndBubble(MOUSELEAVE, evt, shape);
}
shape.fire(MOUSEOVER, evt, this.targetShape);
shape.fire(MOUSEENTER, evt, this.targetShape);
shape._fireAndBubble(MOUSEOVER, evt, this.targetShape);
shape._fireAndBubble(MOUSEENTER, evt, this.targetShape);
this.targetShape = shape;
}
else {
shape.fire(MOUSEMOVE, evt);
shape._fireAndBubble(MOUSEMOVE, evt);
}
}
}
@@ -383,8 +383,8 @@
* to run mouseout from previous target shape
*/
else if(this.targetShape && !go.isDragging()) {
this.targetShape.fire(MOUSEOUT, evt);
this.targetShape.fire(MOUSELEAVE, evt);
this.targetShape._fireAndBubble(MOUSEOUT, evt);
this.targetShape._fireAndBubble(MOUSELEAVE, evt);
this.targetShape = null;
}
@@ -402,7 +402,7 @@
shape = obj.shape;
this.clickStart = true;
this.clickStartShape = shape;
shape.fire(MOUSEDOWN, evt);
shape._fireAndBubble(MOUSEDOWN, evt);
}
//init stage drag and drop
@@ -419,7 +419,7 @@
if(obj && obj.shape) {
shape = obj.shape;
shape.fire(MOUSEUP, evt);
shape._fireAndBubble(MOUSEUP, evt);
// detect if click or double click occurred
if(this.clickStart) {
@@ -428,10 +428,10 @@
* the correct shape, don't fire click or dbl click event
*/
if(!go.isDragging() && shape._id === this.clickStartShape._id) {
shape.fire(CLICK, evt);
shape._fireAndBubble(CLICK, evt);
if(this.inDoubleClickWindow) {
shape.fire(DBL_CLICK, evt);
shape._fireAndBubble(DBL_CLICK, evt);
}
this.inDoubleClickWindow = true;
setTimeout(function() {
@@ -454,7 +454,7 @@
shape = obj.shape;
this.tapStart = true;
this.tapStartShape = shape;
shape.fire(TOUCHSTART, evt);
shape._fireAndBubble(TOUCHSTART, evt);
}
//init stage drag and drop
@@ -471,7 +471,7 @@
if(obj && obj.shape) {
shape = obj.shape;
shape.fire(TOUCHEND, evt);
shape._fireAndBubble(TOUCHEND, evt);
// detect if tap or double tap occurred
if(this.tapStart) {
@@ -480,10 +480,10 @@
* event
*/
if(!go.isDragging() && shape._id === this.tapStartShape._id) {
shape.fire(TAP, evt);
shape._fireAndBubble(TAP, evt);
if(this.inDoubleClickWindow) {
shape.fire(DBL_TAP, evt);
shape._fireAndBubble(DBL_TAP, evt);
}
this.inDoubleClickWindow = true;
setTimeout(function() {
@@ -505,7 +505,7 @@
if(obj && obj.shape) {
shape = obj.shape;
shape.fire(TOUCHMOVE, evt);
shape._fireAndBubble(TOUCHMOVE, evt);
}
// start drag and drop

6
tests/js/functionalTests.js
View File

@@ -444,12 +444,12 @@ Test.Modules.EVENT = {
layer.add(circle);
stage.add(layer);
test(eventNodes.toString() === 'Layer,Stage', 'layer draw event should have fired followed by stage draw event');
// Note: draw events no longer bubble
//test(eventNodes.toString() === 'Layer,Stage', 'layer draw event should have fired followed by stage draw event');
test(savedEvt.node.getNodeType() === 'Layer', 'event object should contain a node property which is Layer');
test(order.toString() === 'layer beforeDraw,stage beforeDraw,layer draw,stage draw', 'order should be: layer beforeDraw,stage beforeDraw,layer draw,stage draw');
//test(order.toString() === 'layer beforeDraw,stage beforeDraw,layer draw,stage draw', 'order should be: layer beforeDraw,stage beforeDraw,layer draw,stage draw');
},
'click mapping': function(containerId) {