Fixed node.startDrag() behavior. We can call it at any time.

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+## [4.0.2][2019-08-07]
+
+* Fixed `node.startDrag()` behavior. We can call it at any time.
+
 ## [4.0.1][2019-08-07]
 
 * Better `Konva.Arrow` + tension drawing

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.0.1
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Wed Aug 07 2019
+   * Date: Thu Aug 08 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -4309,17 +4309,19 @@
        * @name Konva.Node#startDrag
        */
       Node.prototype.startDrag = function (evt) {
+          // forceDrag means it is started by user
+          var forceDrag = !evt;
           var pointerId = evt ? evt.pointerId : undefined;
           var stage = this.getStage(), pos = stage._getPointerById(pointerId), ap = this.getAbsolutePosition();
-          if (pos) {
+          if (pos || forceDrag) {
               DD._dragElements.set(this._id, {
                   node: this,
                   startPointerPos: pos,
-                  offset: {
+                  offset: forceDrag ? { x: 0, y: 0 } : {
                       x: pos.x - ap.x,
                       y: pos.y - ap.y
                   },
-                  isDragging: false,
+                  isDragging: forceDrag ? true : false,
                   pointerId: pointerId,
                   dragStopped: false
               });

release.sh

@@ -79,7 +79,7 @@ cd ../konva-site
 echo "replace CDN links"
 
 
-find source themes react-demos vue-demos main-demo -name "*.json|*.html" -exec perl -i -pe "s|${old_version}|${new_version}|g" {} + >/dev/null
+find source themes/hexo3/layout react-demos vue-demos main-demo -iname "*.json" -o -iname "*.html" -exec perl -i -pe "s|${old_version}|${new_version}|g" {} + >/dev/null
 
 echo "regenerate site"
 ./deploy.sh >/dev/null

src/Node.ts

@@ -2225,20 +2225,22 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * @name Konva.Node#startDrag
    */
   startDrag(evt?: any) {
+    // forceDrag means it is started by user
+    const forceDrag = !evt;
     var pointerId = evt ? evt.pointerId : undefined;
     var stage = this.getStage(),
       pos = stage._getPointerById(pointerId),
       ap = this.getAbsolutePosition();
 
-    if (pos) {
+    if (pos || forceDrag) {
       DD._dragElements.set(this._id, {
         node: this,
         startPointerPos: pos,
-        offset: {
+        offset: forceDrag ? {x: 0, y: 0 } : {
           x: pos.x - ap.x,
           y: pos.y - ap.y
         },
-        isDragging: false,
+        isDragging: forceDrag ? true : false,
         pointerId,
         dragStopped: false
       });

test/unit/DragAndDrop-test.js

@@ -888,4 +888,59 @@ suite('DragAndDrop', function() {
     assert.equal(circle.x(), 70);
     assert.equal(circle.y(), 70);
   });
+
+  test('can force drag at any time (when pointer already registered)', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var circle = new Konva.Circle({
+      x: 70,
+      y: 70,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle',
+      draggable: true
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    stage.simulateMouseMove({ x: 70, y: 70 });
+    circle.startDrag();
+    assert.equal(circle.isDragging(), true);
+    stage.simulateMouseMove({ x: 80, y: 80 });
+    // stage.simulateMouseUp({ x: 80, y: 80 });
+    assert.equal(circle.x(), 80);
+    assert.equal(circle.y(), 80);
+  });
+
+  test('can force drag at any time (when pointer not registered)', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var circle = new Konva.Circle({
+      x: 70,
+      y: 70,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle',
+      draggable: true
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    circle.startDrag();
+    assert.equal(circle.isDragging(), true);
+    // let us think that offset will be equal 0 if not registered pointers
+    stage.simulateMouseMove({ x: 80, y: 80 });
+    stage.simulateMouseUp({ x: 80, y: 80 });
+
+    assert.equal(circle.x(), 80);
+    assert.equal(circle.y(), 80);
+  });
 });