lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

now passing Kinetic event object instead of native event object

Browse Source
This commit is contained in:
Eric Rowell 2014-03-20 21:55:30 -07:00
parent e6b44bb75d
commit 47ecb4559d
3 changed files with 49 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/Node.js
View File

@ -284,7 +284,7 @@
* *
* // get the target node<br> * // get the target node<br>
* node.on('click', function(evt) {<br> * node.on('click', function(evt) {<br>
* console.log(evt.targetNode);<br> * console.log(evt.target);<br>
* });<br><br> * });<br><br>
* *
* // stop event propagation<br> * // stop event propagation<br>
@ -300,6 +300,17 @@
* // namespace listener<br> * // namespace listener<br>
* node.on('click.foo', function() {<br> * node.on('click.foo', function() {<br>
* console.log('you clicked/touched me!');<br> * console.log('you clicked/touched me!');<br>
* });<br><br>
*
* // get the event type<br>
* node.on('click tap', function(evt) {<br>
* var eventType = evt.type;<br>
* });<br><br>
*
* // for change events, get the old and new val<br>
* node.on('xChange', function(evt) {<br>
* var oldVal = evt.oldVal;<br>
* var newVal = evt.newVal;<br>
* }); * });
*/ */
on: function(evtStr, handler) { on: function(evtStr, handler) {
@ -389,7 +400,8 @@
}, },
// some event aliases for third party integration like HammerJS // some event aliases for third party integration like HammerJS
dispatchEvent: function(evt) { dispatchEvent: function(evt) {
evt.targetNode = this; evt.target = this;
evt.type = evt.evt.type;
this.fire(evt.type, evt); this.fire(evt.type, evt);
}, },
addEventListener: function() { addEventListener: function() {
@ -1375,12 +1387,6 @@
} }
} }
}, },
_fireBeforeChangeEvent: function(attr, oldVal, newVal) {
this._fire([BEFORE, Kinetic.Util._capitalize(attr), CHANGE].join(EMPTY_STRING), {
oldVal: oldVal,
newVal: newVal
});
},
_fireChangeEvent: function(attr, oldVal, newVal) { _fireChangeEvent: function(attr, oldVal, newVal) {
this._fire(attr + CHANGE, { this._fire(attr + CHANGE, {
oldVal: oldVal, oldVal: oldVal,
@ -1454,7 +1460,6 @@
this.attrs[key] = this.getAttr(key); this.attrs[key] = this.getAttr(key);
} }
//this._fireBeforeChangeEvent(key, oldVal, val);
this.attrs[key][component] = val; this.attrs[key][component] = val;
this._fireChangeEvent(key, oldVal, val); this._fireChangeEvent(key, oldVal, val);
} }
@ -1463,7 +1468,7 @@
var okayToRun = true; var okayToRun = true;
if(evt && this.nodeType === SHAPE) { if(evt && this.nodeType === SHAPE) {
evt.targetNode = this; evt.target = this;
} }
if(eventType === MOUSEENTER && compareShape && this._id === compareShape._id) { if(eventType === MOUSEENTER && compareShape && this._id === compareShape._id) {
@ -1491,6 +1496,8 @@
var events = this.eventListeners[eventType], var events = this.eventListeners[eventType],
i; i;
evt.type = eventType;
if (events) { if (events) {
for(i = 0; i < events.length; i++) { for(i = 0; i < events.length; i++) {
events[i].handler.call(this, evt); events[i].handler.call(this, evt);

58
src/Stage.js
View File

@ -367,7 +367,7 @@
_mouseover: function(evt) { _mouseover: function(evt) {
if (!Kinetic.UA.mobile) { if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt); this._setPointerPosition(evt);
this._fire(CONTENT_MOUSEOVER, evt); this._fire(CONTENT_MOUSEOVER, {evt: evt});
} }
}, },
_mouseout: function(evt) { _mouseout: function(evt) {
@ -376,13 +376,13 @@
var targetShape = this.targetShape; var targetShape = this.targetShape;
if(targetShape && !Kinetic.isDragging()) { if(targetShape && !Kinetic.isDragging()) {
targetShape._fireAndBubble(MOUSEOUT, evt); targetShape._fireAndBubble(MOUSEOUT, {evt: evt});
targetShape._fireAndBubble(MOUSELEAVE, evt); targetShape._fireAndBubble(MOUSELEAVE, {evt: evt});
this.targetShape = null; this.targetShape = null;
} }
this.pointerPos = undefined; this.pointerPos = undefined;
this._fire(CONTENT_MOUSEOUT, evt); this._fire(CONTENT_MOUSEOUT, {evt: evt});
} }
}, },
_mousemove: function(evt) { _mousemove: function(evt) {
@ -394,15 +394,15 @@
if(shape && shape.isListening()) { if(shape && shape.isListening()) {
if(!Kinetic.isDragging() && (!this.targetShape || this.targetShape._id !== shape._id)) { if(!Kinetic.isDragging() && (!this.targetShape || this.targetShape._id !== shape._id)) {
if(this.targetShape) { if(this.targetShape) {
this.targetShape._fireAndBubble(MOUSEOUT, evt, shape); this.targetShape._fireAndBubble(MOUSEOUT, {evt: evt}, shape);
this.targetShape._fireAndBubble(MOUSELEAVE, evt, shape); this.targetShape._fireAndBubble(MOUSELEAVE, {evt: evt}, shape);
} }
shape._fireAndBubble(MOUSEOVER, evt, this.targetShape); shape._fireAndBubble(MOUSEOVER, {evt: evt}, this.targetShape);
shape._fireAndBubble(MOUSEENTER, evt, this.targetShape); shape._fireAndBubble(MOUSEENTER, {evt: evt}, this.targetShape);
this.targetShape = shape; this.targetShape = shape;
} }
else { else {
shape._fireAndBubble(MOUSEMOVE, evt); shape._fireAndBubble(MOUSEMOVE, {evt: evt});
} }
} }
/* /*
@ -411,15 +411,15 @@
*/ */
else { else {
if(this.targetShape && !Kinetic.isDragging()) { if(this.targetShape && !Kinetic.isDragging()) {
this.targetShape._fireAndBubble(MOUSEOUT, evt); this.targetShape._fireAndBubble(MOUSEOUT, {evt: evt});
this.targetShape._fireAndBubble(MOUSELEAVE, evt); this.targetShape._fireAndBubble(MOUSELEAVE, {evt: evt});
this.targetShape = null; this.targetShape = null;
} }
} }
// content event // content event
this._fire(CONTENT_MOUSEMOVE, evt); this._fire(CONTENT_MOUSEMOVE, {evt: evt});
if(dd) { if(dd) {
dd._drag(evt); dd._drag(evt);
@ -441,11 +441,11 @@
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
this.clickStartShape = shape; this.clickStartShape = shape;
shape._fireAndBubble(MOUSEDOWN, evt); shape._fireAndBubble(MOUSEDOWN, {evt: evt});
} }
// content event // content event
this._fire(CONTENT_MOUSEDOWN, evt); this._fire(CONTENT_MOUSEDOWN, {evt: evt});
} }
// always call preventDefault for desktop events because some browsers // always call preventDefault for desktop events because some browsers
@ -475,23 +475,23 @@
}, Kinetic.dblClickWindow); }, Kinetic.dblClickWindow);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
shape._fireAndBubble(MOUSEUP, evt); shape._fireAndBubble(MOUSEUP, {evt: evt});
// detect if click or double click occurred // detect if click or double click occurred
if(Kinetic.listenClickTap && clickStartShape && clickStartShape._id === shape._id) { if(Kinetic.listenClickTap && clickStartShape && clickStartShape._id === shape._id) {
shape._fireAndBubble(CLICK, evt); shape._fireAndBubble(CLICK, {evt: evt});
if(fireDblClick) { if(fireDblClick) {
shape._fireAndBubble(DBL_CLICK, evt); shape._fireAndBubble(DBL_CLICK, {evt: evt});
} }
} }
} }
// content events // content events
this._fire(CONTENT_MOUSEUP, evt); this._fire(CONTENT_MOUSEUP, {evt: evt});
if (Kinetic.listenClickTap) { if (Kinetic.listenClickTap) {
this._fire(CONTENT_CLICK, evt); this._fire(CONTENT_CLICK, {evt: evt});
if(fireDblClick) { if(fireDblClick) {
this._fire(CONTENT_DBL_CLICK, evt); this._fire(CONTENT_DBL_CLICK, {evt: evt});
} }
} }
@ -512,7 +512,7 @@
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
this.tapStartShape = shape; this.tapStartShape = shape;
shape._fireAndBubble(TOUCHSTART, evt); shape._fireAndBubble(TOUCHSTART, {evt: evt});
// only call preventDefault if the shape is listening for events // only call preventDefault if the shape is listening for events
if (shape.isListening() && evt.preventDefault) { if (shape.isListening() && evt.preventDefault) {
@ -520,7 +520,7 @@
} }
} }
// content event // content event
this._fire(CONTENT_TOUCHSTART, evt); this._fire(CONTENT_TOUCHSTART, {evt: evt});
}, },
_touchend: function(evt) { _touchend: function(evt) {
this._setPointerPosition(evt); this._setPointerPosition(evt);
@ -540,14 +540,14 @@
}, Kinetic.dblClickWindow); }, Kinetic.dblClickWindow);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
shape._fireAndBubble(TOUCHEND, evt); shape._fireAndBubble(TOUCHEND, {evt: evt});
// detect if tap or double tap occurred // detect if tap or double tap occurred
if(Kinetic.listenClickTap && shape._id === this.tapStartShape._id) { if(Kinetic.listenClickTap && shape._id === this.tapStartShape._id) {
shape._fireAndBubble(TAP, evt); shape._fireAndBubble(TAP, {evt: evt});
if(fireDblClick) { if(fireDblClick) {
shape._fireAndBubble(DBL_TAP, evt); shape._fireAndBubble(DBL_TAP, {evt: evt});
} }
} }
// only call preventDefault if the shape is listening for events // only call preventDefault if the shape is listening for events
@ -557,9 +557,9 @@
} }
// content events // content events
if (Kinetic.listenClickTap) { if (Kinetic.listenClickTap) {
this._fire(CONTENT_TOUCHEND, evt); this._fire(CONTENT_TOUCHEND, {evt: evt});
if(fireDblClick) { if(fireDblClick) {
this._fire(CONTENT_DBL_TAP, evt); this._fire(CONTENT_DBL_TAP, {evt: evt});
} }
} }
@ -571,14 +571,14 @@
shape = this.getIntersection(this.getPointerPosition()); shape = this.getIntersection(this.getPointerPosition());
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
shape._fireAndBubble(TOUCHMOVE, evt); shape._fireAndBubble(TOUCHMOVE, {evt: evt});
// only call preventDefault if the shape is listening for events // only call preventDefault if the shape is listening for events
if (shape.isListening() && evt.preventDefault) { if (shape.isListening() && evt.preventDefault) {
evt.preventDefault(); evt.preventDefault();
} }
} }
this._fire(CONTENT_TOUCHMOVE, evt); this._fire(CONTENT_TOUCHMOVE, {evt: evt});
// start drag and drop // start drag and drop
if(dd) { if(dd) {

5
test/functional/MouseEvents-test.js
View File

@ -918,10 +918,11 @@ suite('MouseEvents', function() {
group2.on('click', function() { group2.on('click', function() {
e.push('group2'); e.push('group2');
}); });
layer.on('click', function() { layer.on('click', function(evt) {
console.log(evt)
e.push('layer'); e.push('layer');
}); });
stage.on('click', function() { stage.on('click', function(evt) {
e.push('stage'); e.push('stage');
}); });
// click on circle // click on circle