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

46
src/Stage.js
View File

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

2
tests/js/Test.js
View File

@ -17,7 +17,7 @@ function log(message) {
*/ */
function Test() { function Test() {
//this.testOnly = 'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap'; //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; this.counter = 0;
testCounter = document.createElement('div'); testCounter = document.createElement('div');

15
tests/js/functionalTests.js
View File

@ -1352,7 +1352,7 @@ Test.prototype.tests = {
stage.add(layer); stage.add(layer);
}, },
'DRAG AND DROP - draggable true': function(containerId) { 'DRAG AND DROP - two draggable shapes': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -1371,13 +1371,24 @@ Test.prototype.tests = {
circle.draggable(true); 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.on('dragend', function() {
circle.saveData(); circle.saveData();
}); });
*/ */
layer.add(circle); layer.add(circle).add(circle2);
stage.add(layer); stage.add(layer);
//circle.saveData(); //circle.saveData();