Fix correct transformstart and transformend events when several nodes are attached with Konva.Transformer

CHANGELOG.md

@@ -3,7 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 7.2.1
+
 * Fix correct rendering of `Konva.Label` when heigh of text is changed
+* Fix correct `transformstart` and `transformend` events when several nodes are attached with `Konva.Transformer`
 
 ## 7.2.0
 

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v7.2.0
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Wed Nov 25 2020
+   * Date: Mon Dec 07 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -15333,7 +15333,6 @@
       };
       Transformer.prototype._handleMouseDown = function (e) {
           this._movingAnchorName = e.target.name().split(' ')[0];
-          // var node = this.getNode();
           var attrs = this._getNodeRect();
           var width = attrs.width;
           var height = attrs.height;
@@ -15352,7 +15351,9 @@
               y: pos.y - ap.y,
           };
           this._fire('transformstart', { evt: e, target: this.getNode() });
-          this.getNode()._fire('transformstart', { evt: e, target: this.getNode() });
+          this._nodes.forEach(function (target) {
+              target._fire('transformstart', { evt: e, target: target });
+          });
       };
       Transformer.prototype._handleMouseMove = function (e) {
           var x, y, newHypotenuse;
@@ -15543,7 +15544,9 @@
               var node = this.getNode();
               this._fire('transformend', { evt: e, target: node });
               if (node) {
-                  node.fire('transformend', { evt: e, target: node });
+                  this._nodes.forEach(function (target) {
+                      target._fire('transformend', { evt: e, target: target });
+                  });
               }
               this._movingAnchorName = null;
           }

src/shapes/Transformer.ts

@@ -611,7 +611,6 @@ export class Transformer extends Group {
   _handleMouseDown(e) {
     this._movingAnchorName = e.target.name().split(' ')[0];
 
-    // var node = this.getNode();
     var attrs = this._getNodeRect();
     var width = attrs.width;
     var height = attrs.height;
@@ -633,7 +632,9 @@ export class Transformer extends Group {
       y: pos.y - ap.y,
     };
     this._fire('transformstart', { evt: e, target: this.getNode() });
-    this.getNode()._fire('transformstart', { evt: e, target: this.getNode() });
+    this._nodes.forEach((target) => {
+      target._fire('transformstart', { evt: e, target });
+    });
   }
   _handleMouseMove(e) {
     var x, y, newHypotenuse;
@@ -878,7 +879,9 @@ export class Transformer extends Group {
       this._fire('transformend', { evt: e, target: node });
 
       if (node) {
-        node.fire('transformend', { evt: e, target: node });
+        this._nodes.forEach((target) => {
+          target._fire('transformend', { evt: e, target });
+        });
       }
       this._movingAnchorName = null;
     }

test/unit/shapes/Transformer-test.js

@@ -3788,6 +3788,82 @@ suite('Transformer', function () {
     assert.almostEqual(tr.rotation(), 180);
   });
 
+  test('events on several nodes', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect1 = new Konva.Rect({
+      x: 100,
+      y: 60,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow',
+    });
+    layer.add(rect1);
+    var rect2 = new Konva.Rect({
+      x: 100,
+      y: 60,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow',
+    });
+    layer.add(rect2);
+
+    var transformstart = 0;
+    var transform = 0;
+    var transformend = 0;
+
+    rect1.on('transformstart', function () {
+      transformstart += 1;
+    });
+    rect1.on('transform', function () {
+      transform += 1;
+    });
+    rect1.on('transformend', function () {
+      transformend += 1;
+    });
+
+    rect2.on('transformstart', function () {
+      transformstart += 1;
+    });
+    rect2.on('transform', function () {
+      transform += 1;
+    });
+    rect2.on('transformend', function () {
+      transformend += 1;
+    });
+
+    var tr = new Konva.Transformer({
+      nodes: [rect1, rect2],
+    });
+    layer.add(tr);
+
+    layer.draw();
+
+    stage.simulateMouseDown({
+      x: 100,
+      y: 60,
+    });
+
+    var top = stage.content.getBoundingClientRect().top;
+    tr._handleMouseMove({
+      clientX: 105,
+      clientY: 60 + top,
+    });
+
+    tr.simulateMouseUp({
+      x: 105,
+      y: 60,
+    });
+
+    assert.equal(transformstart, 2);
+    assert.equal(transform, 2);
+    assert.equal(transformend, 2);
+  });
+
   test('transform several rotated nodes', function () {
     var stage = addStage();
     var layer = new Konva.Layer();