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
2014-02-26 08:46:26 -08:00
parent c2e138c6f4
commit 8fcd882ba5
2 changed files with 118 additions and 105 deletions

View File

@@ -344,9 +344,12 @@
} }
}, },
_mouseover: function(evt) { _mouseover: function(evt) {
if (!Kinetic.UA.mobile) {
this._fire(CONTENT_MOUSEOVER, evt); this._fire(CONTENT_MOUSEOVER, evt);
}
}, },
_mouseout: function(evt) { _mouseout: function(evt) {
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt); this._setPointerPosition(evt);
var targetShape = this.targetShape; var targetShape = this.targetShape;
@@ -358,8 +361,10 @@
this.pointerPos = undefined; this.pointerPos = undefined;
this._fire(CONTENT_MOUSEOUT, evt); this._fire(CONTENT_MOUSEOUT, evt);
}
}, },
_mousemove: function(evt) { _mousemove: Kinetic.Util._throttle(function(evt) {
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt); this._setPointerPosition(evt);
var dd = Kinetic.DD, var dd = Kinetic.DD,
shape = this.getIntersection(this.getPointerPosition()); shape = this.getIntersection(this.getPointerPosition());
@@ -397,14 +402,16 @@
if(dd) { if(dd) {
dd._drag(evt); dd._drag(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) {
evt.preventDefault(); evt.preventDefault();
} }
}, }, 17),
_mousedown: function(evt) { _mousedown: function(evt) {
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt); this._setPointerPosition(evt);
var shape = this.getIntersection(this.getPointerPosition()); var shape = this.getIntersection(this.getPointerPosition());
@@ -417,6 +424,7 @@
// content event // content event
this._fire(CONTENT_MOUSEDOWN, evt); 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
@@ -425,6 +433,7 @@
} }
}, },
_mouseup: function(evt) { _mouseup: function(evt) {
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt); this._setPointerPosition(evt);
var that = this, var that = this,
shape = this.getIntersection(this.getPointerPosition()), shape = this.getIntersection(this.getPointerPosition()),
@@ -465,6 +474,7 @@
} }
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(),

View File

@@ -1,7 +1,7 @@
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({
@@ -18,10 +18,11 @@ suite('DragAndDrop', function() {
layer.add(circle); layer.add(circle);
setTimeout(function() { setTimeout(function() {
layer.draw(); layer.draw();
// test defaults // test defaults
//assert.equal(circle.draggable(), false); assert.equal(circle.draggable(), false);
//change properties //change properties
circle.setDraggable(true); circle.setDraggable(true);
@@ -34,7 +35,9 @@ suite('DragAndDrop', function() {
showHit(layer); showHit(layer);
// test new properties // test new properties
//assert.equal(circle.getDraggable(), true); assert.equal(circle.getDraggable(), true);
done();
}, 50); }, 50);
}); });