mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 06:55:17 +08:00
new tap event. touchmove no longer incorrectly fires onmousemove event. dbltap now correctly bubbles. cleaned up some other event handling logic.
This commit is contained in:
Eric Rowell
parent
84e400e0f0
commit
ba796f4cc3
81
dist/kinetic-core.js
vendored
81
dist/kinetic-core.js
vendored
@ -3,7 +3,7 @@
|
||||
* http://www.kineticjs.com/
|
||||
* Copyright 2012, Eric Rowell
|
||||
* Licensed under the MIT or GPL Version 2 licenses.
|
||||
* Date: May 29 2012
|
||||
* Date: Jun 01 2012
|
||||
*
|
||||
* Copyright (C) 2011 - 2012 by Eric Rowell
|
||||
*
|
||||
@ -1886,29 +1886,35 @@ Kinetic.Stage.prototype = {
|
||||
}
|
||||
|
||||
// handle touchstart
|
||||
else if(this.touchStart) {
|
||||
if(!isDragging && this.touchStart) {
|
||||
this.touchStart = false;
|
||||
this.tapStart = true;
|
||||
shape._handleEvents('touchstart', evt);
|
||||
|
||||
if(el.ondbltap && shape.inDoubleClickWindow) {
|
||||
var events = el.ondbltap;
|
||||
for(var i = 0; i < events.length; i++) {
|
||||
events[i].handler.apply(shape, [evt]);
|
||||
}
|
||||
}
|
||||
|
||||
shape.inDoubleClickWindow = true;
|
||||
|
||||
setTimeout(function() {
|
||||
shape.inDoubleClickWindow = false;
|
||||
}, this.dblClickWindow);
|
||||
return true;
|
||||
}
|
||||
|
||||
// handle touchend
|
||||
// handle touchend & tap
|
||||
else if(this.touchEnd) {
|
||||
this.touchEnd = false;
|
||||
shape._handleEvents('touchend', evt);
|
||||
|
||||
// detect if tap or double tap occurred
|
||||
if(this.tapStart) {
|
||||
/*
|
||||
* if dragging and dropping, don't fire tap or dbltap
|
||||
* event
|
||||
*/
|
||||
if((!go.drag.moving) || !go.drag.node) {
|
||||
shape._handleEvents('ontap', evt);
|
||||
|
||||
if(shape.inDoubleClickWindow) {
|
||||
shape._handleEvents('ondbltap', evt);
|
||||
}
|
||||
shape.inDoubleClickWindow = true;
|
||||
setTimeout(function() {
|
||||
shape.inDoubleClickWindow = false;
|
||||
}, this.dblClickWindow);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -1936,11 +1942,16 @@ Kinetic.Stage.prototype = {
|
||||
}
|
||||
|
||||
// handle mousemove and touchmove
|
||||
else if(!isDragging) {
|
||||
else if(!isDragging && this.mouseMove) {
|
||||
shape._handleEvents('onmousemove', evt);
|
||||
return true;
|
||||
}
|
||||
|
||||
else if(!isDragging && this.touchMove) {
|
||||
shape._handleEvents('touchmove', evt);
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
// handle mouseout condition
|
||||
else if(!isDragging && this.targetShape && this.targetShape._id === shape._id) {
|
||||
@ -2060,6 +2071,8 @@ Kinetic.Stage.prototype = {
|
||||
// desktop events
|
||||
this.content.addEventListener('mousedown', function(evt) {
|
||||
that.mouseDown = true;
|
||||
that.mouseUp = false;
|
||||
that.mouseMove = false;
|
||||
|
||||
/*
|
||||
* init stage drag and drop
|
||||
@ -2072,9 +2085,9 @@ Kinetic.Stage.prototype = {
|
||||
}, false);
|
||||
|
||||
this.content.addEventListener('mousemove', function(evt) {
|
||||
/*
|
||||
* throttle mousemove
|
||||
*/
|
||||
/*
|
||||
* throttle mousemove
|
||||
*/
|
||||
var throttle = that.attrs.throttle;
|
||||
var date = new Date();
|
||||
var time = date.getTime();
|
||||
@ -2082,15 +2095,17 @@ Kinetic.Stage.prototype = {
|
||||
var tt = 1000 / throttle;
|
||||
|
||||
if(timeDiff >= tt) {
|
||||
that.mouseUp = false;
|
||||
that.mouseDown = false;
|
||||
that.mouseUp = false;
|
||||
that.mouseMove = true;
|
||||
that._handleStageEvent(evt);
|
||||
}
|
||||
}, false);
|
||||
|
||||
this.content.addEventListener('mouseup', function(evt) {
|
||||
that.mouseUp = true;
|
||||
that.mouseDown = false;
|
||||
that.mouseUp = true;
|
||||
that.mouseMove = false;
|
||||
that._handleStageEvent(evt);
|
||||
that.clickStart = false;
|
||||
}, false);
|
||||
@ -2112,6 +2127,8 @@ Kinetic.Stage.prototype = {
|
||||
this.content.addEventListener('touchstart', function(evt) {
|
||||
evt.preventDefault();
|
||||
that.touchStart = true;
|
||||
that.touchEnd = false;
|
||||
that.touchMove = false;
|
||||
|
||||
/*
|
||||
* init stage drag and drop
|
||||
@ -2124,9 +2141,9 @@ Kinetic.Stage.prototype = {
|
||||
}, false);
|
||||
|
||||
this.content.addEventListener('touchmove', function(evt) {
|
||||
/*
|
||||
* throttle touchmove
|
||||
*/
|
||||
/*
|
||||
* throttle touchmove
|
||||
*/
|
||||
var throttle = that.attrs.throttle;
|
||||
var date = new Date();
|
||||
var time = date.getTime();
|
||||
@ -2135,14 +2152,19 @@ Kinetic.Stage.prototype = {
|
||||
|
||||
if(timeDiff >= tt) {
|
||||
evt.preventDefault();
|
||||
that.touchStart = false;
|
||||
that.touchEnd = false;
|
||||
that.touchMove = true;
|
||||
that._handleStageEvent(evt);
|
||||
}
|
||||
}, false);
|
||||
|
||||
this.content.addEventListener('touchend', function(evt) {
|
||||
evt.preventDefault();
|
||||
that.touchStart = false;
|
||||
that.touchEnd = true;
|
||||
that.touchMove = false;
|
||||
that._handleStageEvent(evt);
|
||||
that.tapStart = false;
|
||||
}, false);
|
||||
},
|
||||
/**
|
||||
@ -2389,7 +2411,6 @@ Kinetic.Stage.prototype = {
|
||||
* set defaults
|
||||
*/
|
||||
_setStageDefaultProperties: function() {
|
||||
this.clickStart = false;
|
||||
this.targetShape = undefined;
|
||||
this.targetFound = false;
|
||||
this.mouseoverShape = undefined;
|
||||
@ -2399,11 +2420,15 @@ Kinetic.Stage.prototype = {
|
||||
this.mousePos = undefined;
|
||||
this.mouseDown = false;
|
||||
this.mouseUp = false;
|
||||
this.mouseMove = false;
|
||||
this.clickStart = false;
|
||||
|
||||
// mobile flags
|
||||
this.touchPos = undefined;
|
||||
this.touchStart = false;
|
||||
this.touchEnd = false;
|
||||
this.touchMove = false;
|
||||
this.tapStart = false;
|
||||
|
||||
this.ids = {};
|
||||
this.names = {};
|
||||
|
||||
29
dist/kinetic-core.min.js
vendored
29
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
79
src/Stage.js
79
src/Stage.js
@ -432,29 +432,35 @@ Kinetic.Stage.prototype = {
|
||||
}
|
||||
|
||||
// handle touchstart
|
||||
else if(this.touchStart) {
|
||||
if(!isDragging && this.touchStart) {
|
||||
this.touchStart = false;
|
||||
this.tapStart = true;
|
||||
shape._handleEvents('touchstart', evt);
|
||||
|
||||
if(el.ondbltap && shape.inDoubleClickWindow) {
|
||||
var events = el.ondbltap;
|
||||
for(var i = 0; i < events.length; i++) {
|
||||
events[i].handler.apply(shape, [evt]);
|
||||
}
|
||||
}
|
||||
|
||||
shape.inDoubleClickWindow = true;
|
||||
|
||||
setTimeout(function() {
|
||||
shape.inDoubleClickWindow = false;
|
||||
}, this.dblClickWindow);
|
||||
return true;
|
||||
}
|
||||
|
||||
// handle touchend
|
||||
// handle touchend & tap
|
||||
else if(this.touchEnd) {
|
||||
this.touchEnd = false;
|
||||
shape._handleEvents('touchend', evt);
|
||||
|
||||
// detect if tap or double tap occurred
|
||||
if(this.tapStart) {
|
||||
/*
|
||||
* if dragging and dropping, don't fire tap or dbltap
|
||||
* event
|
||||
*/
|
||||
if((!go.drag.moving) || !go.drag.node) {
|
||||
shape._handleEvents('ontap', evt);
|
||||
|
||||
if(shape.inDoubleClickWindow) {
|
||||
shape._handleEvents('ondbltap', evt);
|
||||
}
|
||||
shape.inDoubleClickWindow = true;
|
||||
setTimeout(function() {
|
||||
shape.inDoubleClickWindow = false;
|
||||
}, this.dblClickWindow);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -482,11 +488,16 @@ Kinetic.Stage.prototype = {
|
||||
}
|
||||
|
||||
// handle mousemove and touchmove
|
||||
else if(!isDragging) {
|
||||
else if(!isDragging && this.mouseMove) {
|
||||
shape._handleEvents('onmousemove', evt);
|
||||
return true;
|
||||
}
|
||||
|
||||
else if(!isDragging && this.touchMove) {
|
||||
shape._handleEvents('touchmove', evt);
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
// handle mouseout condition
|
||||
else if(!isDragging && this.targetShape && this.targetShape._id === shape._id) {
|
||||
@ -606,6 +617,8 @@ Kinetic.Stage.prototype = {
|
||||
// desktop events
|
||||
this.content.addEventListener('mousedown', function(evt) {
|
||||
that.mouseDown = true;
|
||||
that.mouseUp = false;
|
||||
that.mouseMove = false;
|
||||
|
||||
/*
|
||||
* init stage drag and drop
|
||||
@ -618,9 +631,9 @@ Kinetic.Stage.prototype = {
|
||||
}, false);
|
||||
|
||||
this.content.addEventListener('mousemove', function(evt) {
|
||||
/*
|
||||
* throttle mousemove
|
||||
*/
|
||||
/*
|
||||
* throttle mousemove
|
||||
*/
|
||||
var throttle = that.attrs.throttle;
|
||||
var date = new Date();
|
||||
var time = date.getTime();
|
||||
@ -628,15 +641,17 @@ Kinetic.Stage.prototype = {
|
||||
var tt = 1000 / throttle;
|
||||
|
||||
if(timeDiff >= tt) {
|
||||
that.mouseUp = false;
|
||||
that.mouseDown = false;
|
||||
that.mouseUp = false;
|
||||
that.mouseMove = true;
|
||||
that._handleStageEvent(evt);
|
||||
}
|
||||
}, false);
|
||||
|
||||
this.content.addEventListener('mouseup', function(evt) {
|
||||
that.mouseUp = true;
|
||||
that.mouseDown = false;
|
||||
that.mouseUp = true;
|
||||
that.mouseMove = false;
|
||||
that._handleStageEvent(evt);
|
||||
that.clickStart = false;
|
||||
}, false);
|
||||
@ -658,6 +673,8 @@ Kinetic.Stage.prototype = {
|
||||
this.content.addEventListener('touchstart', function(evt) {
|
||||
evt.preventDefault();
|
||||
that.touchStart = true;
|
||||
that.touchEnd = false;
|
||||
that.touchMove = false;
|
||||
|
||||
/*
|
||||
* init stage drag and drop
|
||||
@ -670,9 +687,9 @@ Kinetic.Stage.prototype = {
|
||||
}, false);
|
||||
|
||||
this.content.addEventListener('touchmove', function(evt) {
|
||||
/*
|
||||
* throttle touchmove
|
||||
*/
|
||||
/*
|
||||
* throttle touchmove
|
||||
*/
|
||||
var throttle = that.attrs.throttle;
|
||||
var date = new Date();
|
||||
var time = date.getTime();
|
||||
@ -681,14 +698,19 @@ Kinetic.Stage.prototype = {
|
||||
|
||||
if(timeDiff >= tt) {
|
||||
evt.preventDefault();
|
||||
that.touchStart = false;
|
||||
that.touchEnd = false;
|
||||
that.touchMove = true;
|
||||
that._handleStageEvent(evt);
|
||||
}
|
||||
}, false);
|
||||
|
||||
this.content.addEventListener('touchend', function(evt) {
|
||||
evt.preventDefault();
|
||||
that.touchStart = false;
|
||||
that.touchEnd = true;
|
||||
that.touchMove = false;
|
||||
that._handleStageEvent(evt);
|
||||
that.tapStart = false;
|
||||
}, false);
|
||||
},
|
||||
/**
|
||||
@ -935,7 +957,6 @@ Kinetic.Stage.prototype = {
|
||||
* set defaults
|
||||
*/
|
||||
_setStageDefaultProperties: function() {
|
||||
this.clickStart = false;
|
||||
this.targetShape = undefined;
|
||||
this.targetFound = false;
|
||||
this.mouseoverShape = undefined;
|
||||
@ -945,11 +966,15 @@ Kinetic.Stage.prototype = {
|
||||
this.mousePos = undefined;
|
||||
this.mouseDown = false;
|
||||
this.mouseUp = false;
|
||||
this.mouseMove = false;
|
||||
this.clickStart = false;
|
||||
|
||||
// mobile flags
|
||||
this.touchPos = undefined;
|
||||
this.touchStart = false;
|
||||
this.touchEnd = false;
|
||||
this.touchMove = false;
|
||||
this.tapStart = false;
|
||||
|
||||
this.ids = {};
|
||||
this.names = {};
|
||||
|
||||
@ -16,6 +16,7 @@ function log(message) {
|
||||
* Test constructor
|
||||
*/
|
||||
function Test() {
|
||||
//this.testOnly = 'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap';
|
||||
this.testOnly = '';
|
||||
this.counter = 0;
|
||||
|
||||
|
||||
@ -487,7 +487,7 @@ Test.prototype.tests = {
|
||||
layer.add(redBox);
|
||||
stage.add(layer);
|
||||
},
|
||||
'EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap': function(containerId) {
|
||||
'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
@ -500,8 +500,7 @@ Test.prototype.tests = {
|
||||
radius: 70,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
draggable: true
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
circle.on('mousedown', function() {
|
||||
@ -512,14 +511,6 @@ Test.prototype.tests = {
|
||||
log('mouseup');
|
||||
});
|
||||
|
||||
circle.on('touchstart', function() {
|
||||
log('touchstart');
|
||||
});
|
||||
|
||||
circle.on('touchend', function() {
|
||||
log('touchend');
|
||||
});
|
||||
|
||||
circle.on('mouseover', function() {
|
||||
log('mouseover');
|
||||
});
|
||||
@ -528,6 +519,10 @@ Test.prototype.tests = {
|
||||
log('mouseout');
|
||||
});
|
||||
|
||||
circle.on('mousemove', function() {
|
||||
log('mousemove');
|
||||
});
|
||||
|
||||
circle.on('click', function() {
|
||||
log('click');
|
||||
});
|
||||
@ -535,13 +530,31 @@ Test.prototype.tests = {
|
||||
circle.on('dblclick', function() {
|
||||
log('dblclick');
|
||||
});
|
||||
/*
|
||||
* mobile
|
||||
*/
|
||||
circle.on('touchstart', function() {
|
||||
log('touchstart');
|
||||
});
|
||||
|
||||
circle.on('touchend', function() {
|
||||
log('touchend');
|
||||
});
|
||||
|
||||
circle.on('touchmove', function() {
|
||||
log('touchmove');
|
||||
});
|
||||
|
||||
circle.on('tap', function(evt) {
|
||||
log('tap');
|
||||
});
|
||||
|
||||
circle.on('dbltap', function() {
|
||||
log('dbltap');
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
stage.add(layer);
|
||||
},
|
||||
'EVENTS - modify fill stroke and stroke width on hover with circle': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
@ -1234,7 +1247,7 @@ Test.prototype.tests = {
|
||||
if(trans) {
|
||||
trans.stop();
|
||||
}
|
||||
|
||||
|
||||
star.setAttrs({
|
||||
shadow: {
|
||||
offset: {
|
||||
@ -1369,18 +1382,18 @@ Test.prototype.tests = {
|
||||
draggable: true,
|
||||
dragConstraint: 'horizontal',
|
||||
/*
|
||||
dragBounds: {
|
||||
left: 100
|
||||
}
|
||||
*/
|
||||
dragBounds: {
|
||||
left: 100
|
||||
}
|
||||
*/
|
||||
});
|
||||
var layer = new Kinetic.Layer({
|
||||
/*
|
||||
draggable: true,
|
||||
dragBounds: {
|
||||
left: 100
|
||||
}
|
||||
*/
|
||||
/*
|
||||
draggable: true,
|
||||
dragBounds: {
|
||||
left: 100
|
||||
}
|
||||
*/
|
||||
});
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
@ -1391,23 +1404,23 @@ Test.prototype.tests = {
|
||||
strokeWidth: 4,
|
||||
//draggable: true,
|
||||
/*
|
||||
dragBounds: {
|
||||
left: 100
|
||||
}
|
||||
*/
|
||||
dragBounds: {
|
||||
left: 100
|
||||
}
|
||||
*/
|
||||
});
|
||||
|
||||
|
||||
//stage.draggable(false);
|
||||
//layer.draggable(false);
|
||||
|
||||
|
||||
stage.on('dragstart', function() {
|
||||
console.log('dragstart');
|
||||
console.log('dragstart');
|
||||
});
|
||||
stage.on('dragmove', function() {
|
||||
//console.log('dragmove');
|
||||
//console.log('dragmove');
|
||||
});
|
||||
stage.on('dragend', function() {
|
||||
console.log('dragend');
|
||||
console.log('dragend');
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user