lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed mobile drag and drop bug. refactored _handleEvents(). added new functional test that has two drag and drop shapes

Browse Source
This commit is contained in:
Eric Rowell 2012-06-08 00:42:48 -07:00
parent 0167432216
commit e7699a588f
6 changed files with 84 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Jun 06 2012
* Date: Jun 08 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -1190,7 +1190,7 @@ Kinetic.Node.prototype = {
var go = Kinetic.GlobalObject;
var stage = this.getStage();
var pos = stage.getUserPosition();
if(pos) {
var m = this.getTransform().getTranslation();
var am = this.getAbsoluteTransform().getTranslation();
@ -1207,39 +1207,34 @@ Kinetic.Node.prototype = {
this.off('touchstart.initdrag');
},
/**
* handle node events
* @param {String} eventType
* @param {Event} evt
* handle node event
*/
_handleEvents: function(eventType, evt) {
_handleEvent: function(eventType, evt) {
if(this.nodeType === 'Shape') {
evt.shape = this;
}
var stage = this.getStage();
this._handleEvent(this, stage.mouseoverShape, stage.mouseoutShape, eventType, evt);
},
/**
* handle node event
*/
_handleEvent: function(node, mouseoverNode, mouseoutNode, eventType, evt) {
var el = node.eventListeners;
var mouseoverNode = stage.mouseoverShape;
var mouseoutNode = stage.mouseoutShape;
var el = this.eventListeners;
var okayToRun = true;
/*
* determine if event handler should be skipped by comparing
* parent nodes
*/
if(eventType === 'mouseover' && mouseoutNode && mouseoutNode._id === node._id) {
if(eventType === 'mouseover' && mouseoutNode && mouseoutNode._id === this._id) {
okayToRun = false;
}
else if(eventType === 'mouseout' && mouseoverNode && mouseoverNode._id === node._id) {
else if(eventType === 'mouseout' && mouseoverNode && mouseoverNode._id === this._id) {
okayToRun = false;
}
if(el[eventType] && okayToRun) {
var events = el[eventType];
for(var i = 0; i < events.length; i++) {
events[i].handler.apply(node, [evt]);
events[i].handler.apply(this, [evt]);
}
}
@ -1247,8 +1242,8 @@ Kinetic.Node.prototype = {
var mouseoutParent = mouseoutNode ? mouseoutNode.parent : undefined;
// simulate event bubbling
if(!evt.cancelBubble && node.parent && node.parent.nodeType !== 'Stage') {
this._handleEvent(node.parent, mouseoverParent, mouseoutParent, eventType, evt);
if(!evt.cancelBubble && this.parent && this.parent.nodeType !== 'Stage') {
this._handleEvent.call(this.parent, eventType, evt);
}
}
};
@ -1890,13 +1885,13 @@ Kinetic.Stage.prototype = {
if(!isDragging && this.mouseDown) {
this.mouseDown = false;
this.clickStart = true;
shape._handleEvents('mousedown', evt);
shape._handleEvent('mousedown', evt);
return true;
}
// handle onmouseup & onclick
else if(this.mouseUp) {
this.mouseUp = false;
shape._handleEvents('mouseup', evt);
shape._handleEvent('mouseup', evt);
// detect if click or double click occurred
if(this.clickStart) {
@ -1905,10 +1900,10 @@ Kinetic.Stage.prototype = {
* event
*/
if((!go.drag.moving) || !go.drag.node) {
shape._handleEvents('click', evt);
shape._handleEvent('click', evt);
if(shape.inDoubleClickWindow) {
shape._handleEvents('dblclick', evt);
shape._handleEvent('dblclick', evt);
}
shape.inDoubleClickWindow = true;
setTimeout(function() {
@ -1923,13 +1918,13 @@ Kinetic.Stage.prototype = {
if(!isDragging && this.touchStart) {
this.touchStart = false;
this.tapStart = true;
shape._handleEvents('touchstart', evt);
shape._handleEvent('touchstart', evt);
return true;
}
// handle touchend & tap
else if(this.touchEnd) {
this.touchEnd = false;
shape._handleEvents('touchend', evt);
shape._handleEvent('touchend', evt);
// detect if tap or double tap occurred
if(this.tapStart) {
@ -1938,10 +1933,10 @@ Kinetic.Stage.prototype = {
* event
*/
if((!go.drag.moving) || !go.drag.node) {
shape._handleEvents('tap', evt);
shape._handleEvent('tap', evt);
if(shape.inDoubleClickWindow) {
shape._handleEvents('dbltap', evt);
shape._handleEvent('dbltap', evt);
}
shape.inDoubleClickWindow = true;
setTimeout(function() {
@ -1966,23 +1961,23 @@ Kinetic.Stage.prototype = {
*/
if(this.mouseoutShape) {
this.mouseoverShape = shape;
this.mouseoutShape._handleEvents('mouseout', evt);
this.mouseoutShape._handleEvent('mouseout', evt);
this.mouseoverShape = undefined;
}
shape._handleEvents('mouseover', evt);
shape._handleEvent('mouseover', evt);
this._setTarget(shape);
return true;
}
// handle mousemove and touchmove
else if(!isDragging && this.mouseMove) {
shape._handleEvents('mousemove', evt);
shape._handleEvent('mousemove', evt);
return true;
}
else if(!isDragging && this.touchMove) {
shape._handleEvents('touchmove', evt);
shape._handleEvent('touchmove', evt);
return true;
}
@ -2070,8 +2065,7 @@ else if(!isDragging && this.touchMove) {
/*
* loop through layers. If at any point an event
* is triggered, n is set to -1 which will break out of the
* three nested loops
* is triggered, break out
*/
this.targetFound = false;
var shapeDetected = false;
@ -2079,8 +2073,8 @@ else if(!isDragging && this.touchMove) {
var layer = this.children[n];
if(layer.isVisible() && n >= 0 && layer.attrs.listening) {
if(this._traverseChildren(layer, evt)) {
n = -1;
shapeDetected = true;
break;
}
}
}
@ -2090,7 +2084,7 @@ else if(!isDragging && this.touchMove) {
* then run the onmouseout event handlers
*/
if(!shapeDetected && this.mouseoutShape) {
this.mouseoutShape._handleEvents('mouseout', evt);
this.mouseoutShape._handleEvent('mouseout', evt);
this.mouseoutShape = undefined;
}
},
@ -2127,8 +2121,6 @@ else if(!isDragging && this.touchMove) {
var tt = 1000 / throttle;
if(timeDiff >= tt) {
that.mouseDown = false;
that.mouseUp = false;
that.mouseMove = true;
that._handleStageEvent(evt);
}
@ -2150,7 +2142,7 @@ else if(!isDragging && this.touchMove) {
// if there's a current target shape, run mouseout handlers
var targetShape = that.targetShape;
if(targetShape) {
targetShape._handleEvents('mouseout', evt);
targetShape._handleEvent('mouseout', evt);
that.targetShape = undefined;
}
that.mousePos = undefined;
@ -2179,11 +2171,9 @@ else if(!isDragging && this.touchMove) {
var time = date.getTime();
var timeDiff = time - that.lastEventTime;
var tt = 1000 / throttle;
if(timeDiff >= tt) {
evt.preventDefault();
that.touchStart = false;
that.touchEnd = false;
that.touchMove = true;
that._handleStageEvent(evt);
}
@ -2274,7 +2264,7 @@ else if(!isDragging && this.touchMove) {
if(go.drag.node) {
if(go.drag.moving) {
go.drag.moving = false;
go.drag.node._handleEvents('dragend', evt);
go.drag.node._handleEvent('dragend', evt);
}
}
go.drag.node = undefined;
@ -2288,6 +2278,7 @@ else if(!isDragging && this.touchMove) {
this._onContent('mousemove touchmove', function(evt) {
var go = Kinetic.GlobalObject;
var node = go.drag.node;
if(node) {
var pos = that.getUserPosition();
var dc = node.attrs.dragConstraint;
@ -2342,11 +2333,11 @@ else if(!isDragging && this.touchMove) {
if(!go.drag.moving) {
go.drag.moving = true;
// execute dragstart events if defined
go.drag.node._handleEvents('dragstart', evt);
go.drag.node._handleEvent('dragstart', evt);
}
// execute user defined ondragmove if defined
go.drag.node._handleEvents('dragmove', evt);
go.drag.node._handleEvent('dragmove', evt);
}
}, false);

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

29
src/Node.js
View File

@ -827,7 +827,7 @@ Kinetic.Node.prototype = {
var go = Kinetic.GlobalObject;
var stage = this.getStage();
var pos = stage.getUserPosition();
if(pos) {
var m = this.getTransform().getTranslation();
var am = this.getAbsoluteTransform().getTranslation();
@ -844,39 +844,34 @@ Kinetic.Node.prototype = {
this.off('touchstart.initdrag');
},
/**
* handle node events
* @param {String} eventType
* @param {Event} evt
* handle node event
*/
_handleEvents: function(eventType, evt) {
_handleEvent: function(eventType, evt) {
if(this.nodeType === 'Shape') {
evt.shape = this;
}
var stage = this.getStage();
this._handleEvent(this, stage.mouseoverShape, stage.mouseoutShape, eventType, evt);
},
/**
* handle node event
*/
_handleEvent: function(node, mouseoverNode, mouseoutNode, eventType, evt) {
var el = node.eventListeners;
var mouseoverNode = stage.mouseoverShape;
var mouseoutNode = stage.mouseoutShape;
var el = this.eventListeners;
var okayToRun = true;
/*
* determine if event handler should be skipped by comparing
* parent nodes
*/
if(eventType === 'mouseover' && mouseoutNode && mouseoutNode._id === node._id) {
if(eventType === 'mouseover' && mouseoutNode && mouseoutNode._id === this._id) {
okayToRun = false;
}
else if(eventType === 'mouseout' && mouseoverNode && mouseoverNode._id === node._id) {
else if(eventType === 'mouseout' && mouseoverNode && mouseoverNode._id === this._id) {
okayToRun = false;
}
if(el[eventType] && okayToRun) {
var events = el[eventType];
for(var i = 0; i < events.length; i++) {
events[i].handler.apply(node, [evt]);
events[i].handler.apply(this, [evt]);
}
}
@ -884,8 +879,8 @@ Kinetic.Node.prototype = {
var mouseoutParent = mouseoutNode ? mouseoutNode.parent : undefined;
// simulate event bubbling
if(!evt.cancelBubble && node.parent && node.parent.nodeType !== 'Stage') {
this._handleEvent(node.parent, mouseoverParent, mouseoutParent, eventType, evt);
if(!evt.cancelBubble && this.parent && this.parent.nodeType !== 'Stage') {
this._handleEvent.call(this.parent, eventType, evt);
}
}
};

46
src/Stage.js
View File

@ -407,13 +407,13 @@ Kinetic.Stage.prototype = {
if(!isDragging && this.mouseDown) {
this.mouseDown = false;
this.clickStart = true;
shape._handleEvents('mousedown', evt);
shape._handleEvent('mousedown', evt);
return true;
}
// handle onmouseup & onclick
else if(this.mouseUp) {
this.mouseUp = false;
shape._handleEvents('mouseup', evt);
shape._handleEvent('mouseup', evt);
// detect if click or double click occurred
if(this.clickStart) {
@ -422,10 +422,10 @@ Kinetic.Stage.prototype = {
* event
*/
if((!go.drag.moving) || !go.drag.node) {
shape._handleEvents('click', evt);
shape._handleEvent('click', evt);
if(shape.inDoubleClickWindow) {
shape._handleEvents('dblclick', evt);
shape._handleEvent('dblclick', evt);
}
shape.inDoubleClickWindow = true;
setTimeout(function() {
@ -440,13 +440,13 @@ Kinetic.Stage.prototype = {
if(!isDragging && this.touchStart) {
this.touchStart = false;
this.tapStart = true;
shape._handleEvents('touchstart', evt);
shape._handleEvent('touchstart', evt);
return true;
}
// handle touchend & tap
else if(this.touchEnd) {
this.touchEnd = false;
shape._handleEvents('touchend', evt);
shape._handleEvent('touchend', evt);
// detect if tap or double tap occurred
if(this.tapStart) {
@ -455,10 +455,10 @@ Kinetic.Stage.prototype = {
* event
*/
if((!go.drag.moving) || !go.drag.node) {
shape._handleEvents('tap', evt);
shape._handleEvent('tap', evt);
if(shape.inDoubleClickWindow) {
shape._handleEvents('dbltap', evt);
shape._handleEvent('dbltap', evt);
}
shape.inDoubleClickWindow = true;
setTimeout(function() {
@ -483,23 +483,23 @@ Kinetic.Stage.prototype = {
*/
if(this.mouseoutShape) {
this.mouseoverShape = shape;
this.mouseoutShape._handleEvents('mouseout', evt);
this.mouseoutShape._handleEvent('mouseout', evt);
this.mouseoverShape = undefined;
}
shape._handleEvents('mouseover', evt);
shape._handleEvent('mouseover', evt);
this._setTarget(shape);
return true;
}
// handle mousemove and touchmove
else if(!isDragging && this.mouseMove) {
shape._handleEvents('mousemove', evt);
shape._handleEvent('mousemove', evt);
return true;
}
else if(!isDragging && this.touchMove) {
shape._handleEvents('touchmove', evt);
shape._handleEvent('touchmove', evt);
return true;
}
@ -587,8 +587,7 @@ else if(!isDragging && this.touchMove) {
/*
* loop through layers. If at any point an event
* is triggered, n is set to -1 which will break out of the
* three nested loops
* is triggered, break out
*/
this.targetFound = false;
var shapeDetected = false;
@ -596,8 +595,8 @@ else if(!isDragging && this.touchMove) {
var layer = this.children[n];
if(layer.isVisible() && n >= 0 && layer.attrs.listening) {
if(this._traverseChildren(layer, evt)) {
n = -1;
shapeDetected = true;
break;
}
}
}
@ -607,7 +606,7 @@ else if(!isDragging && this.touchMove) {
* then run the onmouseout event handlers
*/
if(!shapeDetected && this.mouseoutShape) {
this.mouseoutShape._handleEvents('mouseout', evt);
this.mouseoutShape._handleEvent('mouseout', evt);
this.mouseoutShape = undefined;
}
},
@ -644,8 +643,6 @@ else if(!isDragging && this.touchMove) {
var tt = 1000 / throttle;
if(timeDiff >= tt) {
that.mouseDown = false;
that.mouseUp = false;
that.mouseMove = true;
that._handleStageEvent(evt);
}
@ -667,7 +664,7 @@ else if(!isDragging && this.touchMove) {
// if there's a current target shape, run mouseout handlers
var targetShape = that.targetShape;
if(targetShape) {
targetShape._handleEvents('mouseout', evt);
targetShape._handleEvent('mouseout', evt);
that.targetShape = undefined;
}
that.mousePos = undefined;
@ -696,11 +693,9 @@ else if(!isDragging && this.touchMove) {
var time = date.getTime();
var timeDiff = time - that.lastEventTime;
var tt = 1000 / throttle;
if(timeDiff >= tt) {
evt.preventDefault();
that.touchStart = false;
that.touchEnd = false;
that.touchMove = true;
that._handleStageEvent(evt);
}
@ -791,7 +786,7 @@ else if(!isDragging && this.touchMove) {
if(go.drag.node) {
if(go.drag.moving) {
go.drag.moving = false;
go.drag.node._handleEvents('dragend', evt);
go.drag.node._handleEvent('dragend', evt);
}
}
go.drag.node = undefined;
@ -805,6 +800,7 @@ else if(!isDragging && this.touchMove) {
this._onContent('mousemove touchmove', function(evt) {
var go = Kinetic.GlobalObject;
var node = go.drag.node;
if(node) {
var pos = that.getUserPosition();
var dc = node.attrs.dragConstraint;
@ -859,11 +855,11 @@ else if(!isDragging && this.touchMove) {
if(!go.drag.moving) {
go.drag.moving = true;
// execute dragstart events if defined
go.drag.node._handleEvents('dragstart', evt);
go.drag.node._handleEvent('dragstart', evt);
}
// execute user defined ondragmove if defined
go.drag.node._handleEvents('dragmove', evt);
go.drag.node._handleEvent('dragmove', evt);
}
}, false);

2
tests/js/Test.js
View File

@ -17,7 +17,7 @@ function log(message) {
*/
function Test() {
//this.testOnly = 'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap';
//this.testOnly = 'DRAG AND DROP - drag and drop stage';
this.testOnly = '';
this.counter = 0;
testCounter = document.createElement('div');

15
tests/js/functionalTests.js
View File

@ -1352,7 +1352,7 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - draggable true': function(containerId) {
'DRAG AND DROP - two draggable shapes': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -1371,13 +1371,24 @@ Test.prototype.tests = {
circle.draggable(true);
var circle2 = new Kinetic.Circle({
x: 350,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
//detectionType: 'pixel'
});
/*
circle.on('dragend', function() {
circle.saveData();
});
*/
layer.add(circle);
layer.add(circle).add(circle2);
stage.add(layer);
//circle.saveData();