Fix nested dragging bug. close #71

CHANGELOG.md

@@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## Not released:
 
 * Add `node.isCached()` method
+* Fix nested dragging bug
 
 ## [4.0.3][2019-08-08]
 

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.0.3
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Sat Aug 10 2019
+   * Date: Mon Aug 12 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -3654,7 +3654,7 @@
           return this.parent;
       };
       /**
-       * get all ancestros (parent then parent of the parent, etc) of the node
+       * get all ancestors (parent then parent of the parent, etc) of the node
        * @method
        * @name Konva.Node#findAncestors
        * @param {String} [selector] selector for search
@@ -4394,6 +4394,7 @@
       Node.prototype._listenDrag = function () {
           this._dragCleanup();
           this.on('mousedown.konva touchstart.konva', function (evt) {
+              var _this = this;
               var shouldCheckButton = evt.evt['button'] !== undefined;
               var canDrag = !shouldCheckButton || Konva.dragButtons.indexOf(evt.evt['button']) >= 0;
               if (!canDrag) {
@@ -4402,7 +4403,15 @@
               if (this.isDragging()) {
                   return;
               }
+              var hasDraggingChild = false;
+              DD._dragElements.forEach(function (elem) {
+                  if (_this.isAncestorOf(elem.node)) {
+                      hasDraggingChild = true;
+                  }
+              });
+              if (!hasDraggingChild) {
                   this.startDrag(evt);
+              }
           });
       };
       Node.prototype._dragChange = function () {

src/Node.ts

@@ -1486,7 +1486,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     return this.parent;
   }
   /**
-   * get all ancestros (parent then parent of the parent, etc) of the node
+   * get all ancestors (parent then parent of the parent, etc) of the node
    * @method
    * @name Konva.Node#findAncestors
    * @param {String} [selector] selector for search
@@ -2334,7 +2334,17 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       if (this.isDragging()) {
         return;
       }
+
+      var hasDraggingChild = false;
+      DD._dragElements.forEach(elem => {
+        if (this.isAncestorOf(elem.node)) {
+          hasDraggingChild = true;
+        }
+      })
+      if (!hasDraggingChild) {
         this.startDrag(evt);
+      }
+      
     });
   }
 

test/unit/DragAndDrop-test.js

@@ -943,4 +943,38 @@ suite('DragAndDrop', function() {
     assert.equal(circle.x(), 80);
     assert.equal(circle.y(), 80);
   });
+
+  test('try nested dragging', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer({
+      draggable: true
+    });
+
+    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);
+
+    layer.add(circle.clone({ x: 30, fill: 'red', draggable: false }));
+
+    stage.simulateMouseDown({ x: 70, y: 70 });
+    stage.simulateMouseMove({ x: 80, y: 80 });
+
+    assert.equal(circle.x(), 80);
+    assert.equal(circle.y(), 80);
+    assert.equal(layer.x(), 0);
+    assert.equal(layer.y(), 0);
+    // layer is not dragging, because drag is registered on circle
+    assert.equal(layer.isDragging(), false);
+    stage.simulateMouseUp({ x: 80, y: 80 });
+  });
 });