diff --git a/src/DragAndDrop.js b/src/DragAndDrop.js index 29ac99e9..a173d8b5 100644 --- a/src/DragAndDrop.js +++ b/src/DragAndDrop.js @@ -1,6 +1,4 @@ (function() { - var dd, html = document.getElementsByTagName('html')[0]; - Kinetic.DD = { anim: new Kinetic.Animation(), moving: false, @@ -10,12 +8,8 @@ } }; - dd = Kinetic.DD; - - //html.addEventListener('mousedown', _htmlMouseup); - Kinetic.getNodeDragging = function() { - return dd.node; + return Kinetic.DD.node; }; Kinetic.DD._setupDragLayerAndGetContainer = function(no) { @@ -51,7 +45,7 @@ stage.dragLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer'; }; Kinetic.DD._drag = function(evt) { - var node = dd.node; + var dd = Kinetic.DD, node = dd.node; if(node) { var pos = node.getStage().getUserPosition(); @@ -81,9 +75,10 @@ } }; Kinetic.DD._endDrag = function(evt) { - var node = dd.node, nodeType, stage; + var dd = Kinetic.DD, node = dd.node; - if(node) { nodeType = node.nodeType, stage = node.getStage(); + if(node) { + var nodeType = node.nodeType, stage = node.getStage(); node.setListening(true); if(nodeType === 'Stage') { node.draw(); @@ -110,7 +105,7 @@ dd.anim.stop(); }; Kinetic.Node.prototype._startDrag = function(evt) { - var that = this, stage = this.getStage(), pos = stage.getUserPosition(); + var dd = Kinetic.DD, that = this, stage = this.getStage(), pos = stage.getUserPosition(); if(pos) { var m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(), nodeType = this.nodeType, container; @@ -175,6 +170,7 @@ * @methodOf Kinetic.Node.prototype */ Kinetic.Node.prototype.isDragging = function() { + var dd = Kinetic.DD; return dd.node && dd.node._id === this._id && dd.moving; }; @@ -249,4 +245,8 @@ * @name getDragOnTop * @methodOf Kinetic.Node.prototype */ + + var html = document.getElementsByTagName('html')[0]; + html.addEventListener('mouseup', Kinetic.DD._endDrag); + html.addEventListener('touchend', Kinetic.DD._endDrag); })(); diff --git a/src/Stage.js b/src/Stage.js index d2b01d65..1f7c1af6 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -395,11 +395,6 @@ this._setUserPosition(evt); var that = this, dd = Kinetic.DD, obj = this.getIntersection(this.getUserPosition()); - // end drag and drop - if(dd) { - dd._endDrag(evt); - } - if(obj && obj.shape) { var shape = obj.shape; shape._handleEvent('mouseup', evt); @@ -447,11 +442,6 @@ this._setUserPosition(evt); var that = this, dd = Kinetic.DD, obj = this.getIntersection(this.getUserPosition()); - // end drag and drop - if(dd) { - dd._endDrag(evt); - } - if(obj && obj.shape) { var shape = obj.shape; shape._handleEvent('touchend', evt); diff --git a/tests/js/functionalTests.js b/tests/js/functionalTests.js index ca8bac63..d601501e 100644 --- a/tests/js/functionalTests.js +++ b/tests/js/functionalTests.js @@ -1,13 +1,13 @@ Test.Modules.DD = { - 'remove shape with onclick': function(containerId) { + 'remove shape with onclick': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, width: 578, height: 200 }); - + var top = stage.content.getBoundingClientRect().top; - + var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ @@ -23,12 +23,17 @@ Test.Modules.DD = { layer.add(circle); stage.add(layer); + + function remove() { + circle.remove(); + layer.draw(); + warn(layer.toDataURL() === dataUrls['cleared'], 'canvas should be cleared after removing shape onclick'); + } circle.on('click', function() { - this.remove(); - layer.draw(); + setTimeout(remove, 0); }); - + stage._mousedown({ clientX: 291, clientY: 112 + top @@ -37,9 +42,9 @@ Test.Modules.DD = { clientX: 291, clientY: 112 + top }); - - warn(layer.toDataURL() === dataUrls['cleared'], 'canvas should be cleared after removing shape onclick'); - + // end drag is tied to document mouseup and touchend event + // which can't be simulated. call _endDrag manually + Kinetic.DD._endDrag(); }, 'test dragstart, dragmove, dragend': function(containerId) { var stage = new Kinetic.Stage({ @@ -80,7 +85,7 @@ Test.Modules.DD = { circle.on('dragend', function() { dragEnd = true; // test set draggable false after drag end - this.setDraggable(false); + this.setDraggable(false); }); warn(layer.toDataURL() === dataUrls['drag circle before'], 'start data url is incorrect'); /* @@ -109,6 +114,9 @@ Test.Modules.DD = { clientX: 100, clientY: 98 + top }); + // end drag is tied to document mouseup and touchend event + // which can't be simulated. call _endDrag manually + Kinetic.DD._endDrag(); test(dragStart, 'dragstart event was not triggered'); test(dragMove, 'dragmove event was not triggered'); @@ -177,6 +185,9 @@ Test.Modules.DD = { clientX: 100, clientY: 100 + top }); + // end drag is tied to document mouseup and touchend event + // which can't be simulated. call _endDrag manually + Kinetic.DD._endDrag(); test(circle.getPosition().x === 380, 'circle x should be 380'); test(circle.getPosition().y === 100, 'circle y should be 100'); @@ -243,6 +254,10 @@ Test.Modules.DD = { clientX: 210, clientY: 109 + top }); + // end drag is tied to document mouseup and touchend event + // which can't be simulated. call _endDrag manually + Kinetic.DD._endDrag(); + //console.log(layer.toDataURL()) warn(layer.toDataURL() === dataUrls['drag layer after'], 'end data url is incorrect'); @@ -458,6 +473,9 @@ Test.Modules.EVENT = { clientX: 290, clientY: 100 + top }); + // end drag is tied to document mouseup and touchend event + // which can't be simulated. call _endDrag manually + Kinetic.DD._endDrag(); test(mouseover, '4) mouseover should be true'); test(mousemove, '4) mousemove should be true'); @@ -486,6 +504,9 @@ Test.Modules.EVENT = { clientX: 290, clientY: 100 + top }); + // end drag is tied to document mouseup and touchend event + // which can't be simulated. call _endDrag manually + Kinetic.DD._endDrag(); test(mouseover, '6) mouseover should be true'); test(mousemove, '6) mousemove should be true'); @@ -540,6 +561,9 @@ Test.Modules.EVENT = { preventDefault: function() { } }); + // end drag is tied to document mouseup and touchend event + // which can't be simulated. call _endDrag manually + Kinetic.DD._endDrag(); test(touchstart, '9) touchstart should be true'); test(!touchmove, '9) touchmove should be false'); @@ -568,6 +592,9 @@ Test.Modules.EVENT = { preventDefault: function() { } }); + // end drag is tied to document mouseup and touchend event + // which can't be simulated. call _endDrag manually + Kinetic.DD._endDrag(); test(touchstart, '11) touchstart should be true'); test(!touchmove, '11) touchmove should be false'); @@ -892,6 +919,9 @@ Test.Modules.EVENT = { clientX: 374, clientY: 114 + top }); + // end drag is tied to document mouseup and touchend event + // which can't be simulated. call _endDrag manually + Kinetic.DD._endDrag(); test(e.toString() === 'circle,group1,group2,layer,stage', 'problem with event bubbling'); }