lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-03-03 16:58:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added throttling to mousemove and touchmove. Added logic to prevent Android from detecting both touch and mouse events

Browse Source
This commit is contained in:
Eric Rowell
2014-02-26 08:46:26 -08:00
parent c2e138c6f4
commit 8fcd882ba5
2 changed files with 118 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/Stage.js
View File

@@ -344,58 +344,64 @@
} }
}, },
_mouseover: function(evt) { _mouseover: function(evt) {
this._fire(CONTENT_MOUSEOVER, evt); if (!Kinetic.UA.mobile) {
this._fire(CONTENT_MOUSEOVER, evt);
}
}, },
_mouseout: function(evt) { _mouseout: function(evt) {
this._setPointerPosition(evt); if (!Kinetic.UA.mobile) {
var targetShape = this.targetShape; this._setPointerPosition(evt);
var targetShape = this.targetShape;
if(targetShape && !Kinetic.isDragging()) { if(targetShape && !Kinetic.isDragging()) {
targetShape._fireAndBubble(MOUSEOUT, evt); targetShape._fireAndBubble(MOUSEOUT, evt);
targetShape._fireAndBubble(MOUSELEAVE, evt); targetShape._fireAndBubble(MOUSELEAVE, evt);
this.targetShape = null; this.targetShape = null;
}
this.pointerPos = undefined;
this._fire(CONTENT_MOUSEOUT, evt);
} }
this.pointerPos = undefined;
this._fire(CONTENT_MOUSEOUT, evt);
}, },
_mousemove: function(evt) { _mousemove: Kinetic.Util._throttle(function(evt) {
this._setPointerPosition(evt); if (!Kinetic.UA.mobile) {
var dd = Kinetic.DD, this._setPointerPosition(evt);
shape = this.getIntersection(this.getPointerPosition()); var dd = Kinetic.DD,
shape = this.getIntersection(this.getPointerPosition());
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, shape);
this.targetShape._fireAndBubble(MOUSELEAVE, 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 { 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 if(dd) {
this._fire(CONTENT_MOUSEMOVE, evt); dd._drag(evt);
}
if(dd) {
dd._drag(evt);
} }
// always call preventDefault for desktop events because some browsers // always call preventDefault for desktop events because some browsers
@@ -403,21 +409,23 @@
if (evt.preventDefault) { if (evt.preventDefault) {
evt.preventDefault(); evt.preventDefault();
} }
}, }, 17),
_mousedown: function(evt) { _mousedown: function(evt) {
this._setPointerPosition(evt); if (!Kinetic.UA.mobile) {
var shape = this.getIntersection(this.getPointerPosition()); this._setPointerPosition(evt);
var shape = this.getIntersection(this.getPointerPosition());
Kinetic.listenClickTap = true; Kinetic.listenClickTap = true;
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
this.clickStartShape = shape; this.clickStartShape = shape;
shape._fireAndBubble(MOUSEDOWN, evt); 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 // always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element // try to drag and drop the canvas element
if (evt.preventDefault) { if (evt.preventDefault) {
@@ -425,46 +433,48 @@
} }
}, },
_mouseup: function(evt) { _mouseup: function(evt) {
this._setPointerPosition(evt); if (!Kinetic.UA.mobile) {
var that = this, this._setPointerPosition(evt);
shape = this.getIntersection(this.getPointerPosition()), var that = this,
clickStartShape = this.clickStartShape, shape = this.getIntersection(this.getPointerPosition()),
fireDblClick = false; clickStartShape = this.clickStartShape,
fireDblClick = false;
if(Kinetic.inDblClickWindow) { if(Kinetic.inDblClickWindow) {
fireDblClick = true; fireDblClick = true;
Kinetic.inDblClickWindow = false; Kinetic.inDblClickWindow = false;
} }
else { else {
Kinetic.inDblClickWindow = true; Kinetic.inDblClickWindow = true;
} }
setTimeout(function() { setTimeout(function() {
Kinetic.inDblClickWindow = false; Kinetic.inDblClickWindow = false;
}, Kinetic.dblClickWindow); }, Kinetic.dblClickWindow);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
shape._fireAndBubble(MOUSEUP, evt); shape._fireAndBubble(MOUSEUP, 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);
if(fireDblClick) { if(fireDblClick) {
shape._fireAndBubble(DBL_CLICK, evt); shape._fireAndBubble(DBL_CLICK, evt);
}
} }
} }
} // content events
// content events this._fire(CONTENT_MOUSEUP, evt);
this._fire(CONTENT_MOUSEUP, evt); if (Kinetic.listenClickTap) {
if (Kinetic.listenClickTap) { this._fire(CONTENT_CLICK, evt);
this._fire(CONTENT_CLICK, evt); if(fireDblClick) {
if(fireDblClick) { this._fire(CONTENT_DBL_CLICK, evt);
this._fire(CONTENT_DBL_CLICK, evt); }
} }
}
Kinetic.listenClickTap = false; Kinetic.listenClickTap = false;
}
// always call preventDefault for desktop events because some browsers // always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element // try to drag and drop the canvas element
@@ -534,7 +544,7 @@
Kinetic.listenClickTap = false; Kinetic.listenClickTap = false;
}, },
_touchmove: function(evt) { _touchmove: Kinetic.Util._throttle(function(evt) {
this._setPointerPosition(evt); this._setPointerPosition(evt);
var dd = Kinetic.DD, var dd = Kinetic.DD,
shape = this.getIntersection(this.getPointerPosition()); shape = this.getIntersection(this.getPointerPosition());
@@ -553,7 +563,7 @@
if(dd) { if(dd) {
dd._drag(evt); dd._drag(evt);
} }
}, }, 17),
_setPointerPosition: function(evt) { _setPointerPosition: function(evt) {
var evt = evt ? evt : window.event, var evt = evt ? evt : window.event,
contentPosition = this._getContentPosition(), contentPosition = this._getContentPosition(),

47
test/unit/DragAndDrop-test.js
View File

@@ -1,40 +1,43 @@
suite('DragAndDrop', function() { suite('DragAndDrop', function() {
// ====================================================== // ======================================================
test('test drag and drop properties and methods', function() { test('test drag and drop properties and methods', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.getWidth() / 2, x: stage.getWidth() / 2,
y: stage.getHeight() / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
name: 'myCircle' name: 'myCircle'
}); });
stage.add(layer); stage.add(layer);
layer.add(circle); layer.add(circle);
setTimeout(function() { setTimeout(function() {
layer.draw();
// test defaults layer.draw();
//assert.equal(circle.draggable(), false);
//change properties // test defaults
circle.setDraggable(true); assert.equal(circle.draggable(), false);
//change properties
circle.setDraggable(true);
//circle.on('click', function(){}); //circle.on('click', function(){});
layer.draw(); layer.draw();
showHit(layer); showHit(layer);
// test new properties // test new properties
//assert.equal(circle.getDraggable(), true); assert.equal(circle.getDraggable(), true);
done();
}, 50); }, 50);
}); });