mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
now passing Kinetic event object instead of native event object
This commit is contained in:
Eric Rowell
parent
e6b44bb75d
commit
47ecb4559d
27
src/Node.js
27
src/Node.js
@ -284,7 +284,7 @@
|
||||
*
|
||||
* // get the target node<br>
|
||||
* node.on('click', function(evt) {<br>
|
||||
* console.log(evt.targetNode);<br>
|
||||
* console.log(evt.target);<br>
|
||||
* });<br><br>
|
||||
*
|
||||
* // stop event propagation<br>
|
||||
@ -300,6 +300,17 @@
|
||||
* // namespace listener<br>
|
||||
* node.on('click.foo', function() {<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) {
|
||||
@ -389,7 +400,8 @@
|
||||
},
|
||||
// some event aliases for third party integration like HammerJS
|
||||
dispatchEvent: function(evt) {
|
||||
evt.targetNode = this;
|
||||
evt.target = this;
|
||||
evt.type = evt.evt.type;
|
||||
this.fire(evt.type, evt);
|
||||
},
|
||||
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) {
|
||||
this._fire(attr + CHANGE, {
|
||||
oldVal: oldVal,
|
||||
@ -1454,7 +1460,6 @@
|
||||
this.attrs[key] = this.getAttr(key);
|
||||
}
|
||||
|
||||
//this._fireBeforeChangeEvent(key, oldVal, val);
|
||||
this.attrs[key][component] = val;
|
||||
this._fireChangeEvent(key, oldVal, val);
|
||||
}
|
||||
@ -1463,7 +1468,7 @@
|
||||
var okayToRun = true;
|
||||
|
||||
if(evt && this.nodeType === SHAPE) {
|
||||
evt.targetNode = this;
|
||||
evt.target = this;
|
||||
}
|
||||
|
||||
if(eventType === MOUSEENTER && compareShape && this._id === compareShape._id) {
|
||||
@ -1491,6 +1496,8 @@
|
||||
var events = this.eventListeners[eventType],
|
||||
i;
|
||||
|
||||
evt.type = eventType;
|
||||
|
||||
if (events) {
|
||||
for(i = 0; i < events.length; i++) {
|
||||
events[i].handler.call(this, evt);
|
||||
|
||||
58
src/Stage.js
58
src/Stage.js
@ -367,7 +367,7 @@
|
||||
_mouseover: function(evt) {
|
||||
if (!Kinetic.UA.mobile) {
|
||||
this._setPointerPosition(evt);
|
||||
this._fire(CONTENT_MOUSEOVER, evt);
|
||||
this._fire(CONTENT_MOUSEOVER, {evt: evt});
|
||||
}
|
||||
},
|
||||
_mouseout: function(evt) {
|
||||
@ -376,13 +376,13 @@
|
||||
var targetShape = this.targetShape;
|
||||
|
||||
if(targetShape && !Kinetic.isDragging()) {
|
||||
targetShape._fireAndBubble(MOUSEOUT, evt);
|
||||
targetShape._fireAndBubble(MOUSELEAVE, evt);
|
||||
targetShape._fireAndBubble(MOUSEOUT, {evt: evt});
|
||||
targetShape._fireAndBubble(MOUSELEAVE, {evt: evt});
|
||||
this.targetShape = null;
|
||||
}
|
||||
this.pointerPos = undefined;
|
||||
|
||||
this._fire(CONTENT_MOUSEOUT, evt);
|
||||
this._fire(CONTENT_MOUSEOUT, {evt: evt});
|
||||
}
|
||||
},
|
||||
_mousemove: function(evt) {
|
||||
@ -394,15 +394,15 @@
|
||||
if(shape && shape.isListening()) {
|
||||
if(!Kinetic.isDragging() && (!this.targetShape || this.targetShape._id !== shape._id)) {
|
||||
if(this.targetShape) {
|
||||
this.targetShape._fireAndBubble(MOUSEOUT, evt, shape);
|
||||
this.targetShape._fireAndBubble(MOUSELEAVE, evt, shape);
|
||||
this.targetShape._fireAndBubble(MOUSEOUT, {evt: evt}, shape);
|
||||
this.targetShape._fireAndBubble(MOUSELEAVE, {evt: evt}, shape);
|
||||
}
|
||||
shape._fireAndBubble(MOUSEOVER, evt, this.targetShape);
|
||||
shape._fireAndBubble(MOUSEENTER, evt, this.targetShape);
|
||||
shape._fireAndBubble(MOUSEOVER, {evt: evt}, this.targetShape);
|
||||
shape._fireAndBubble(MOUSEENTER, {evt: evt}, this.targetShape);
|
||||
this.targetShape = shape;
|
||||
}
|
||||
else {
|
||||
shape._fireAndBubble(MOUSEMOVE, evt);
|
||||
shape._fireAndBubble(MOUSEMOVE, {evt: evt});
|
||||
}
|
||||
}
|
||||
/*
|
||||
@ -411,15 +411,15 @@
|
||||
*/
|
||||
else {
|
||||
if(this.targetShape && !Kinetic.isDragging()) {
|
||||
this.targetShape._fireAndBubble(MOUSEOUT, evt);
|
||||
this.targetShape._fireAndBubble(MOUSELEAVE, evt);
|
||||
this.targetShape._fireAndBubble(MOUSEOUT, {evt: evt});
|
||||
this.targetShape._fireAndBubble(MOUSELEAVE, {evt: evt});
|
||||
this.targetShape = null;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// content event
|
||||
this._fire(CONTENT_MOUSEMOVE, evt);
|
||||
this._fire(CONTENT_MOUSEMOVE, {evt: evt});
|
||||
|
||||
if(dd) {
|
||||
dd._drag(evt);
|
||||
@ -441,11 +441,11 @@
|
||||
|
||||
if (shape && shape.isListening()) {
|
||||
this.clickStartShape = shape;
|
||||
shape._fireAndBubble(MOUSEDOWN, evt);
|
||||
shape._fireAndBubble(MOUSEDOWN, {evt: evt});
|
||||
}
|
||||
|
||||
// content event
|
||||
this._fire(CONTENT_MOUSEDOWN, evt);
|
||||
this._fire(CONTENT_MOUSEDOWN, {evt: evt});
|
||||
}
|
||||
|
||||
// always call preventDefault for desktop events because some browsers
|
||||
@ -475,23 +475,23 @@
|
||||
}, Kinetic.dblClickWindow);
|
||||
|
||||
if (shape && shape.isListening()) {
|
||||
shape._fireAndBubble(MOUSEUP, evt);
|
||||
shape._fireAndBubble(MOUSEUP, {evt: evt});
|
||||
|
||||
// detect if click or double click occurred
|
||||
if(Kinetic.listenClickTap && clickStartShape && clickStartShape._id === shape._id) {
|
||||
shape._fireAndBubble(CLICK, evt);
|
||||
shape._fireAndBubble(CLICK, {evt: evt});
|
||||
|
||||
if(fireDblClick) {
|
||||
shape._fireAndBubble(DBL_CLICK, evt);
|
||||
shape._fireAndBubble(DBL_CLICK, {evt: evt});
|
||||
}
|
||||
}
|
||||
}
|
||||
// content events
|
||||
this._fire(CONTENT_MOUSEUP, evt);
|
||||
this._fire(CONTENT_MOUSEUP, {evt: evt});
|
||||
if (Kinetic.listenClickTap) {
|
||||
this._fire(CONTENT_CLICK, evt);
|
||||
this._fire(CONTENT_CLICK, {evt: evt});
|
||||
if(fireDblClick) {
|
||||
this._fire(CONTENT_DBL_CLICK, evt);
|
||||
this._fire(CONTENT_DBL_CLICK, {evt: evt});
|
||||
}
|
||||
}
|
||||
|
||||
@ -512,7 +512,7 @@
|
||||
|
||||
if (shape && shape.isListening()) {
|
||||
this.tapStartShape = shape;
|
||||
shape._fireAndBubble(TOUCHSTART, evt);
|
||||
shape._fireAndBubble(TOUCHSTART, {evt: evt});
|
||||
|
||||
// only call preventDefault if the shape is listening for events
|
||||
if (shape.isListening() && evt.preventDefault) {
|
||||
@ -520,7 +520,7 @@
|
||||
}
|
||||
}
|
||||
// content event
|
||||
this._fire(CONTENT_TOUCHSTART, evt);
|
||||
this._fire(CONTENT_TOUCHSTART, {evt: evt});
|
||||
},
|
||||
_touchend: function(evt) {
|
||||
this._setPointerPosition(evt);
|
||||
@ -540,14 +540,14 @@
|
||||
}, Kinetic.dblClickWindow);
|
||||
|
||||
if (shape && shape.isListening()) {
|
||||
shape._fireAndBubble(TOUCHEND, evt);
|
||||
shape._fireAndBubble(TOUCHEND, {evt: evt});
|
||||
|
||||
// detect if tap or double tap occurred
|
||||
if(Kinetic.listenClickTap && shape._id === this.tapStartShape._id) {
|
||||
shape._fireAndBubble(TAP, evt);
|
||||
shape._fireAndBubble(TAP, {evt: evt});
|
||||
|
||||
if(fireDblClick) {
|
||||
shape._fireAndBubble(DBL_TAP, evt);
|
||||
shape._fireAndBubble(DBL_TAP, {evt: evt});
|
||||
}
|
||||
}
|
||||
// only call preventDefault if the shape is listening for events
|
||||
@ -557,9 +557,9 @@
|
||||
}
|
||||
// content events
|
||||
if (Kinetic.listenClickTap) {
|
||||
this._fire(CONTENT_TOUCHEND, evt);
|
||||
this._fire(CONTENT_TOUCHEND, {evt: evt});
|
||||
if(fireDblClick) {
|
||||
this._fire(CONTENT_DBL_TAP, evt);
|
||||
this._fire(CONTENT_DBL_TAP, {evt: evt});
|
||||
}
|
||||
}
|
||||
|
||||
@ -571,14 +571,14 @@
|
||||
shape = this.getIntersection(this.getPointerPosition());
|
||||
|
||||
if (shape && shape.isListening()) {
|
||||
shape._fireAndBubble(TOUCHMOVE, evt);
|
||||
shape._fireAndBubble(TOUCHMOVE, {evt: evt});
|
||||
|
||||
// only call preventDefault if the shape is listening for events
|
||||
if (shape.isListening() && evt.preventDefault) {
|
||||
evt.preventDefault();
|
||||
}
|
||||
}
|
||||
this._fire(CONTENT_TOUCHMOVE, evt);
|
||||
this._fire(CONTENT_TOUCHMOVE, {evt: evt});
|
||||
|
||||
// start drag and drop
|
||||
if(dd) {
|
||||
|
||||
@ -918,10 +918,11 @@ suite('MouseEvents', function() {
|
||||
group2.on('click', function() {
|
||||
e.push('group2');
|
||||
});
|
||||
layer.on('click', function() {
|
||||
layer.on('click', function(evt) {
|
||||
console.log(evt)
|
||||
e.push('layer');
|
||||
});
|
||||
stage.on('click', function() {
|
||||
stage.on('click', function(evt) {
|
||||
e.push('stage');
|
||||
});
|
||||
// click on circle
|
||||
|
||||
Loading…
Reference in New Issue
Block a user