diff --git a/src/DragAndDrop.js b/src/DragAndDrop.js index 4d2505b5..95240cfb 100644 --- a/src/DragAndDrop.js +++ b/src/DragAndDrop.js @@ -40,7 +40,6 @@ }, _endDragBefore: function(evt) { var dd = Kinetic.DD, - evt = evt || {}, node = dd.node, nodeType, layer; @@ -53,17 +52,15 @@ // operation actually started. if(dd.isDragging) { dd.isDragging = false; - evt.dragEndNode = node; + + if (evt) { + evt.dragEndNode = node; + } } delete dd.node; - - if (layer) { - layer.draw(); - } - else { - node.draw(); - } + + (layer || node).draw(); } }, _endDragAfter: function(evt) { @@ -112,9 +109,10 @@ * @methodOf Kinetic.Node.prototype */ Kinetic.Node.prototype.stopDrag = function() { - var dd = Kinetic.DD; - dd._endDragBefore(); - dd._endDragAfter(); + var dd = Kinetic.DD, + evt = {}; + dd._endDragBefore(evt); + dd._endDragAfter(evt); }; /** @@ -128,6 +126,20 @@ this._dragChange(); }; + var origDestroy = Kinetic.Node.prototype.destroy; + + Kinetic.Node.prototype.destroy = function() { + var dd = Kinetic.DD; + + // stop DD + if(dd.node && dd.node._id === this._id) { + + this.stopDrag(); + } + + origDestroy.call(this); + }; + /** * determine if node is currently in drag and drop mode * @name isDragging diff --git a/src/Node.js b/src/Node.js index b61b1f26..e375fae9 100644 --- a/src/Node.js +++ b/src/Node.js @@ -153,11 +153,6 @@ go._removeId(this.getId()); go._removeName(this.getName(), this._id); - // stop DD - if(dd && dd.node && dd.node._id === this._id) { - this._endDrag(); - } - // stop transition if(this.trans) { this.trans.stop(); diff --git a/tests/js/functionalTests.js b/tests/js/functionalTests.js index 3e88eeba..0fedfc84 100644 --- a/tests/js/functionalTests.js +++ b/tests/js/functionalTests.js @@ -173,6 +173,95 @@ Test.Modules.DD = { showHit(layer); + }, + 'destroy shape while dragging': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + var layer = new Kinetic.Layer(); + + var greenCircle = new Kinetic.Circle({ + x: 40, + y: 40, + radius: 20, + strokeWidth: 4, + fill: 'green', + stroke: 'black', + opacity: 0.5 + }); + + + var circle = new Kinetic.Circle({ + x: 380, + y: stage.getHeight() / 2, + radius: 70, + strokeWidth: 4, + fill: 'red', + stroke: 'black', + opacity: 0.5 + + }); + + circle.setDraggable(true); + + layer.add(circle); + layer.add(greenCircle); + stage.add(layer); + + var top = stage.content.getBoundingClientRect().top; + + + var dragEnd = false; + + + circle.on('dragend', function() { + dragEnd = true; + + }); + + + + circle.on('mouseup', function() { + console.log('mouseup'); + events.push('mouseup'); + }); + + testDataUrl(layer.toDataURL(), 'drag circle before', 'start data url is incorrect'); + + test(!Kinetic.Global.isDragging(), 'Global isDragging() should be false'); + test(!Kinetic.Global.isDragReady(), 'Global isDragReady()) should be false'); + + + stage._mousedown({ + clientX: 380, + clientY: 98 + top + }); + + test(!circle.isDragging(), 'circle should not be dragging'); + + stage._mousemove({ + clientX: 100, + clientY: 98 + top + }); + + + test(circle.isDragging(), 'circle should be dragging'); + test(!dragEnd, 'dragEnd should not have fired yet'); + + // at this point, we are in drag and drop mode + + + // removing or destroying the circle should trigger dragend + circle.destroy(); + layer.draw(); + + test(!circle.isDragging(), 'destroying circle should stop drag and drop'); + test(dragEnd, 'dragEnd should have fired'); + + + }, 'cancel drag and drop by setting draggable to false': function(containerId) { var stage = new Kinetic.Stage({