Fix double dragend, dragstart, dragmove triggers on Konva.Transformer

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
 * Change events trigger flow, so adding new events INSIDE event callback will work correctly.
-* Fix double `dragend` trigger on `Konva.Transformer`
+* Fix double `dragend`, `dragstart`, `dragmove` triggers on `Konva.Transformer`
 
 ## 7.1.3
 

konva.js

@@ -7087,16 +7087,16 @@
               height: size.height,
           };
       };
-      Shape.prototype.getClientRect = function (attrs) {
-          attrs = attrs || {};
-          var skipTransform = attrs.skipTransform;
-          var relativeTo = attrs.relativeTo;
+      Shape.prototype.getClientRect = function (config) {
+          if (config === void 0) { config = {}; }
+          var skipTransform = config.skipTransform;
+          var relativeTo = config.relativeTo;
           var fillRect = this.getSelfRect();
-          var applyStroke = !attrs.skipStroke && this.hasStroke();
+          var applyStroke = !config.skipStroke && this.hasStroke();
           var strokeWidth = (applyStroke && this.strokeWidth()) || 0;
           var fillAndStrokeWidth = fillRect.width + strokeWidth;
           var fillAndStrokeHeight = fillRect.height + strokeWidth;
-          var applyShadow = !attrs.skipShadow && this.hasShadow();
+          var applyShadow = !config.skipShadow && this.hasShadow();
           var shadowOffsetX = applyShadow ? this.shadowOffsetX() : 0;
           var shadowOffsetY = applyShadow ? this.shadowOffsetY() : 0;
           var preWidth = fillAndStrokeWidth + Math.abs(shadowOffsetX);
@@ -14038,6 +14038,12 @@
           // do not bubble drag from the back shape
           // because we already "drag" whole transformer
           // so we don't want to trigger drag twice on transformer
+          back.on('dragstart', function (e) {
+              e.cancelBubble = true;
+          });
+          back.on('dragmove', function (e) {
+              e.cancelBubble = true;
+          });
           back.on('dragend', function (e) {
               e.cancelBubble = true;
           });

src/shapes/Transformer.ts

@@ -598,6 +598,12 @@ export class Transformer extends Group {
     // do not bubble drag from the back shape
     // because we already "drag" whole transformer
     // so we don't want to trigger drag twice on transformer
+    back.on('dragstart', (e) => {
+      e.cancelBubble = true;
+    });
+    back.on('dragmove', (e) => {
+      e.cancelBubble = true;
+    });
     back.on('dragend', (e) => {
       e.cancelBubble = true;
     });

test/unit/shapes/Transformer-test.js

@@ -4048,7 +4048,7 @@ suite('Transformer', function () {
     assert.equal(click, 1);
   });
 
-  test('drag several nodes by transformer back', function () {
+  test.only('drag several nodes by transformer back', function () {
     var stage = addStage();
     var layer = new Konva.Layer();
     stage.add(layer);
@@ -4102,6 +4102,12 @@ suite('Transformer', function () {
       shouldOverdrawWholeArea: true,
     });
 
+    tr.on('dragstart', () => {
+      dragstart += 1;
+    });
+    tr.on('dragmove', () => {
+      dragmove += 1;
+    });
     tr.on('dragend', () => {
       dragend += 1;
     });
@@ -4134,8 +4140,8 @@ suite('Transformer', function () {
     assert.equal(rect1.y(), 50);
     assert.equal(rect2.x(), 110);
     assert.equal(rect2.y(), 100);
-    assert.equal(dragstart, 2);
-    assert.equal(dragmove, 2);
+    assert.equal(dragstart, 3);
+    assert.equal(dragmove, 3);
     assert.equal(dragend, 3);
   });