mirror of
https://github.com/konvajs/konva.git
synced 2026-03-03 16:58:33 +08:00
added throttling to mousemove and touchmove. Added logic to prevent Android from detecting both touch and mouse events
This commit is contained in:
Eric Rowell
176
src/Stage.js
176
src/Stage.js
@@ -344,58 +344,64 @@
|
||||
}
|
||||
},
|
||||
_mouseover: function(evt) {
|
||||
this._fire(CONTENT_MOUSEOVER, evt);
|
||||
if (!Kinetic.UA.mobile) {
|
||||
this._fire(CONTENT_MOUSEOVER, evt);
|
||||
}
|
||||
},
|
||||
_mouseout: function(evt) {
|
||||
this._setPointerPosition(evt);
|
||||
var targetShape = this.targetShape;
|
||||
if (!Kinetic.UA.mobile) {
|
||||
this._setPointerPosition(evt);
|
||||
var targetShape = this.targetShape;
|
||||
|
||||
if(targetShape && !Kinetic.isDragging()) {
|
||||
targetShape._fireAndBubble(MOUSEOUT, evt);
|
||||
targetShape._fireAndBubble(MOUSELEAVE, evt);
|
||||
this.targetShape = null;
|
||||
if(targetShape && !Kinetic.isDragging()) {
|
||||
targetShape._fireAndBubble(MOUSEOUT, evt);
|
||||
targetShape._fireAndBubble(MOUSELEAVE, evt);
|
||||
this.targetShape = null;
|
||||
}
|
||||
this.pointerPos = undefined;
|
||||
|
||||
this._fire(CONTENT_MOUSEOUT, evt);
|
||||
}
|
||||
this.pointerPos = undefined;
|
||||
|
||||
this._fire(CONTENT_MOUSEOUT, evt);
|
||||
},
|
||||
_mousemove: function(evt) {
|
||||
this._setPointerPosition(evt);
|
||||
var dd = Kinetic.DD,
|
||||
shape = this.getIntersection(this.getPointerPosition());
|
||||
_mousemove: Kinetic.Util._throttle(function(evt) {
|
||||
if (!Kinetic.UA.mobile) {
|
||||
this._setPointerPosition(evt);
|
||||
var dd = Kinetic.DD,
|
||||
shape = this.getIntersection(this.getPointerPosition());
|
||||
|
||||
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);
|
||||
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);
|
||||
}
|
||||
shape._fireAndBubble(MOUSEOVER, evt, this.targetShape);
|
||||
shape._fireAndBubble(MOUSEENTER, evt, this.targetShape);
|
||||
this.targetShape = shape;
|
||||
}
|
||||
else {
|
||||
shape._fireAndBubble(MOUSEMOVE, evt);
|
||||
}
|
||||
shape._fireAndBubble(MOUSEOVER, evt, this.targetShape);
|
||||
shape._fireAndBubble(MOUSEENTER, evt, this.targetShape);
|
||||
this.targetShape = shape;
|
||||
}
|
||||
/*
|
||||
* if no shape was detected, clear target shape and try
|
||||
* to run mouseout from previous target shape
|
||||
*/
|
||||
else {
|
||||
shape._fireAndBubble(MOUSEMOVE, evt);
|
||||
if(this.targetShape && !Kinetic.isDragging()) {
|
||||
this.targetShape._fireAndBubble(MOUSEOUT, evt);
|
||||
this.targetShape._fireAndBubble(MOUSELEAVE, evt);
|
||||
this.targetShape = null;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
/*
|
||||
* if no shape was detected, clear target shape and try
|
||||
* to run mouseout from previous target shape
|
||||
*/
|
||||
else {
|
||||
if(this.targetShape && !Kinetic.isDragging()) {
|
||||
this.targetShape._fireAndBubble(MOUSEOUT, evt);
|
||||
this.targetShape._fireAndBubble(MOUSELEAVE, evt);
|
||||
this.targetShape = null;
|
||||
}
|
||||
|
||||
}
|
||||
// content event
|
||||
this._fire(CONTENT_MOUSEMOVE, evt);
|
||||
|
||||
// content event
|
||||
this._fire(CONTENT_MOUSEMOVE, evt);
|
||||
|
||||
if(dd) {
|
||||
dd._drag(evt);
|
||||
if(dd) {
|
||||
dd._drag(evt);
|
||||
}
|
||||
}
|
||||
|
||||
// always call preventDefault for desktop events because some browsers
|
||||
@@ -403,21 +409,23 @@
|
||||
if (evt.preventDefault) {
|
||||
evt.preventDefault();
|
||||
}
|
||||
},
|
||||
}, 17),
|
||||
_mousedown: function(evt) {
|
||||
this._setPointerPosition(evt);
|
||||
var shape = this.getIntersection(this.getPointerPosition());
|
||||
if (!Kinetic.UA.mobile) {
|
||||
this._setPointerPosition(evt);
|
||||
var shape = this.getIntersection(this.getPointerPosition());
|
||||
|
||||
Kinetic.listenClickTap = true;
|
||||
Kinetic.listenClickTap = true;
|
||||
|
||||
if (shape && shape.isListening()) {
|
||||
this.clickStartShape = shape;
|
||||
shape._fireAndBubble(MOUSEDOWN, evt);
|
||||
if (shape && shape.isListening()) {
|
||||
this.clickStartShape = shape;
|
||||
shape._fireAndBubble(MOUSEDOWN, evt);
|
||||
}
|
||||
|
||||
// content event
|
||||
this._fire(CONTENT_MOUSEDOWN, evt);
|
||||
}
|
||||
|
||||
// content event
|
||||
this._fire(CONTENT_MOUSEDOWN, evt);
|
||||
|
||||
// always call preventDefault for desktop events because some browsers
|
||||
// try to drag and drop the canvas element
|
||||
if (evt.preventDefault) {
|
||||
@@ -425,46 +433,48 @@
|
||||
}
|
||||
},
|
||||
_mouseup: function(evt) {
|
||||
this._setPointerPosition(evt);
|
||||
var that = this,
|
||||
shape = this.getIntersection(this.getPointerPosition()),
|
||||
clickStartShape = this.clickStartShape,
|
||||
fireDblClick = false;
|
||||
if (!Kinetic.UA.mobile) {
|
||||
this._setPointerPosition(evt);
|
||||
var that = this,
|
||||
shape = this.getIntersection(this.getPointerPosition()),
|
||||
clickStartShape = this.clickStartShape,
|
||||
fireDblClick = false;
|
||||
|
||||
if(Kinetic.inDblClickWindow) {
|
||||
fireDblClick = true;
|
||||
Kinetic.inDblClickWindow = false;
|
||||
}
|
||||
else {
|
||||
Kinetic.inDblClickWindow = true;
|
||||
}
|
||||
if(Kinetic.inDblClickWindow) {
|
||||
fireDblClick = true;
|
||||
Kinetic.inDblClickWindow = false;
|
||||
}
|
||||
else {
|
||||
Kinetic.inDblClickWindow = true;
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
Kinetic.inDblClickWindow = false;
|
||||
}, Kinetic.dblClickWindow);
|
||||
setTimeout(function() {
|
||||
Kinetic.inDblClickWindow = false;
|
||||
}, Kinetic.dblClickWindow);
|
||||
|
||||
if (shape && shape.isListening()) {
|
||||
shape._fireAndBubble(MOUSEUP, evt);
|
||||
if (shape && shape.isListening()) {
|
||||
shape._fireAndBubble(MOUSEUP, evt);
|
||||
|
||||
// detect if click or double click occurred
|
||||
if(Kinetic.listenClickTap && clickStartShape && clickStartShape._id === shape._id) {
|
||||
shape._fireAndBubble(CLICK, evt);
|
||||
// detect if click or double click occurred
|
||||
if(Kinetic.listenClickTap && clickStartShape && clickStartShape._id === shape._id) {
|
||||
shape._fireAndBubble(CLICK, evt);
|
||||
|
||||
if(fireDblClick) {
|
||||
shape._fireAndBubble(DBL_CLICK, evt);
|
||||
if(fireDblClick) {
|
||||
shape._fireAndBubble(DBL_CLICK, evt);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// content events
|
||||
this._fire(CONTENT_MOUSEUP, evt);
|
||||
if (Kinetic.listenClickTap) {
|
||||
this._fire(CONTENT_CLICK, evt);
|
||||
if(fireDblClick) {
|
||||
this._fire(CONTENT_DBL_CLICK, evt);
|
||||
// content events
|
||||
this._fire(CONTENT_MOUSEUP, evt);
|
||||
if (Kinetic.listenClickTap) {
|
||||
this._fire(CONTENT_CLICK, evt);
|
||||
if(fireDblClick) {
|
||||
this._fire(CONTENT_DBL_CLICK, evt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Kinetic.listenClickTap = false;
|
||||
Kinetic.listenClickTap = false;
|
||||
}
|
||||
|
||||
// always call preventDefault for desktop events because some browsers
|
||||
// try to drag and drop the canvas element
|
||||
@@ -534,7 +544,7 @@
|
||||
|
||||
Kinetic.listenClickTap = false;
|
||||
},
|
||||
_touchmove: function(evt) {
|
||||
_touchmove: Kinetic.Util._throttle(function(evt) {
|
||||
this._setPointerPosition(evt);
|
||||
var dd = Kinetic.DD,
|
||||
shape = this.getIntersection(this.getPointerPosition());
|
||||
@@ -553,7 +563,7 @@
|
||||
if(dd) {
|
||||
dd._drag(evt);
|
||||
}
|
||||
},
|
||||
}, 17),
|
||||
_setPointerPosition: function(evt) {
|
||||
var evt = evt ? evt : window.event,
|
||||
contentPosition = this._getContentPosition(),
|
||||
|
||||
Reference in New Issue
Block a user