Fix drag position handling. close #739

CHANGELOG.md

@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+* Fix drag position handling
 * Fix multiple selector for find() method
 
 ## 4.0.9 - 2019-09-06

src/DragAndDrop.ts

@@ -91,12 +91,14 @@ export const DD = {
 
   // dragBefore and dragAfter allows us to set correct order of events
   // setup all in dragbefore, and stop dragging only after pointerup triggered.
-  _endDragBefore(evt) {
+  _endDragBefore(evt?) {
     DD._dragElements.forEach((elem, key) => {
       const { node } = elem;
       // we need to find pointer relative to that node
       const stage = node.getStage();
-      stage.setPointersPositions(evt);
+      if (evt) {
+        stage.setPointersPositions(evt);
+      }
 
       const pos = stage._changedPointerPositions.find(
         pos => pos.id === elem.pointerId

src/Node.ts

@@ -2311,8 +2311,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * @method
    * @name Konva.Node#stopDrag
    */
-  stopDrag() {
+  stopDrag(evt?) {
-    var evt = {};
     const elem = DD._dragElements.get(this._id);
     if (elem) {
       elem.dragStatus = 'stopped';

test/unit/DragAndDrop-test.js

@@ -1056,4 +1056,41 @@ suite('DragAndDrop', function() {
     assert.equal(layer.isDragging(), false);
     stage.simulateMouseUp({ x: 80, y: 80 });
   });
+
+  test('deletage drag', function() {
+    var stage = addStage();
+    stage.draggable(true);
+    var layer = new Konva.Layer();
+
+    var circle = new Konva.Circle({
+      x: 70,
+      y: 70,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle'
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    stage.on('dragstart', function(e) {
+      if (e.target === stage) {
+        stage.stopDrag();
+        circle.startDrag();
+      }
+    });
+
+    stage.simulateMouseDown({ x: 5, y: 5 });
+    stage.simulateMouseMove({ x: 10, y: 10 });
+
+    assert.equal(circle.isDragging(), true);
+    assert.equal(stage.isDragging(), false);
+
+    stage.simulateMouseUp({ x: 10, y: 10 });
+
+    assert.equal(circle.x(), 70);
+    assert.equal(circle.y(), 70);
+  });
 });