dragstart fixes when transformer is used

CHANGELOG.md

@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### not released:
 
+* fixes for `dragstart` event when `Konva.Transformer` is used. `dragstart` will not bubble from transformer.
 * `string` and `fill` properties validation can accept `CanvasGradient` as valid value
 
 ## 7.0.6

src/Node.ts

@@ -2347,7 +2347,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * @method
    * @name Konva.Node#startDrag
    */
-  startDrag(evt?: any) {
+  startDrag(evt?: any, bubbleEvent = true) {
     if (!DD._dragElements.has(this._id)) {
       this._createDragElement(evt);
     }
@@ -2361,7 +2361,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
         target: this,
         evt: evt && evt.evt,
       },
-      true
+      bubbleEvent
     );
   }
 

src/shapes/Transformer.ts

@@ -320,7 +320,7 @@ export class Transformer extends Group {
       // actual dragging of Transformer doesn't make sense
       // but we need to proxy drag events
       if (!this.isDragging() && node !== this.findOne('.back')) {
-        this.startDrag();
+        this.startDrag(e, false);
       }
     });
     node.on(`dragmove.${EVENTS_NAME}`, (e) => {

test/runner.js

@@ -227,6 +227,15 @@ beforeEach(function () {
   Konva.inDblClickWindow = false;
   Konva.DD && (Konva.DD.isDragging = false);
   Konva.DD && (Konva.DD.node = undefined);
+
+  if (
+    !(
+      this.currentTest.body.indexOf('assert') !== -1 ||
+      this.currentTest.body.toLowerCase().indexOf('compare') !== -1
+    )
+  ) {
+    debugger;
+  }
 });
 
 Konva.UA.mobile = false;

test/unit/Node-test.js

@@ -434,6 +434,8 @@ suite('Node', function () {
     layer.drawHit();
 
     showHit(layer);
+
+    assert.equal(layer.getIntersection({ x: 60, y: 60 }), null);
   });
 
   // ======================================================

test/unit/shapes/Transformer-test.js

@@ -3873,7 +3873,8 @@ suite('Transformer', function () {
     });
 
     // make sure drag also triggers on the transformer.
-    tr.on('dragstart', () => {
+    tr.on('dragstart', (e) => {
+      assert.equal(!!e.evt, true);
       dragstart += 1;
     });
     tr.on('dragmove', () => {
@@ -3883,6 +3884,12 @@ suite('Transformer', function () {
       dragend += 1;
     });
 
+    // also drag should bubble to stage
+    // two times for two rects
+    stage.on('dragstart', () => {
+      dragstart += 1;
+    });
+
     layer.add(tr);
     layer.draw();
 
@@ -3908,7 +3915,7 @@ suite('Transformer', function () {
     // proxy drag to other nodes
     assert.equal(rect2.x(), 110);
     assert.equal(rect2.y(), 110);
-    assert.equal(dragstart, 2);
+    assert.equal(dragstart, 4);
     assert.equal(dragmove, 3);
     assert.equal(dragend, 2);
   });