update CHANGELOG with new version

CHANGELOG.md

@@ -3,7 +3,9 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-###
+## 8.2.4 (2021-12-15)
+
+- Fix not working `Konva.Transformer` when several transformers were used
 
 ## 8.2.2
 

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v8.2.3
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Fri Oct 22 2021
+   * Date: Mon Nov 15 2021
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -14463,9 +14463,7 @@
       'offsetYChange',
       'transformsEnabledChange',
       'strokeWidthChange',
-  ]
+  ];
-      .map((e) => e + `.${EVENTS_NAME}`)
-      .join(' ');
   var ANGLES = {
       'top-left': -45,
       'top-center': 0,
@@ -14641,6 +14639,9 @@
       getNode() {
           return this._nodes && this._nodes[0];
       }
+      _getEventNamespace() {
+          return EVENTS_NAME + this._id;
+      }
       setNodes(nodes = []) {
           if (this._nodes && this._nodes.length) {
               this.detach();
@@ -14653,9 +14654,6 @@
               this.rotation(0);
           }
           this._nodes.forEach((node) => {
-              const additionalEvents = node._attrsAffectingSize
-                  .map((prop) => prop + 'Change.' + EVENTS_NAME)
-                  .join(' ');
               const onChange = () => {
                   if (this.nodes().length === 1 && this.useSingleNodeRotation()) {
                       this.rotation(this.nodes()[0].getAbsoluteRotation());
@@ -14665,10 +14663,12 @@
                       this.update();
                   }
               };
+              const additionalEvents = node._attrsAffectingSize
+                  .map((prop) => prop + 'Change.' + this._getEventNamespace())
+                  .join(' ');
               node.on(additionalEvents, onChange);
-              node.on(TRANSFORM_CHANGE_STR, onChange);
+              node.on(TRANSFORM_CHANGE_STR.map((e) => e + `.${this._getEventNamespace()}`).join(' '), onChange);
-              node.on(`absoluteTransformChange.${EVENTS_NAME}`, onChange);
+              node.on(`absoluteTransformChange.${this._getEventNamespace()}`, onChange);
-              node.on(`xChange.${EVENTS_NAME} yChange.${EVENTS_NAME}`, onChange);
               this._proxyDrag(node);
           });
           this._resetTransformCache();
@@ -14682,7 +14682,7 @@
       }
       _proxyDrag(node) {
           let lastPos;
-          node.on(`dragstart.${EVENTS_NAME}`, (e) => {
+          node.on(`dragstart.${this._getEventNamespace()}`, (e) => {
               lastPos = node.getAbsolutePosition();
               // actual dragging of Transformer doesn't make sense
               // but we need to make sure it also has all drag events
@@ -14690,7 +14690,7 @@
                   this.startDrag(e, false);
               }
           });
-          node.on(`dragmove.${EVENTS_NAME}`, (e) => {
+          node.on(`dragmove.${this._getEventNamespace()}`, (e) => {
               if (!lastPos) {
                   return;
               }
@@ -14740,7 +14740,7 @@
           // remove events
           if (this._nodes) {
               this._nodes.forEach((node) => {
-                  node.off('.' + EVENTS_NAME);
+                  node.off('.' + this._getEventNamespace());
               });
           }
           this._nodes = [];

src/shapes/Transformer.ts

@@ -76,9 +76,7 @@ var TRANSFORM_CHANGE_STR = [
   'offsetYChange',
   'transformsEnabledChange',
   'strokeWidthChange',
-]
+];
-  .map((e) => e + `.${EVENTS_NAME}`)
-  .join(' ');
 
 var ANGLES = {
   'top-left': -45,
@@ -282,6 +280,10 @@ export class Transformer extends Group {
     return this._nodes && this._nodes[0];
   }
 
+  _getEventNamespace() {
+    return EVENTS_NAME + this._id;
+  }
+
   setNodes(nodes: Array<Node> = []) {
     if (this._nodes && this._nodes.length) {
       this.detach();
@@ -293,10 +295,6 @@ export class Transformer extends Group {
       this.rotation(0);
     }
     this._nodes.forEach((node) => {
-      const additionalEvents = node._attrsAffectingSize
-        .map((prop) => prop + 'Change.' + EVENTS_NAME)
-        .join(' ');
-
       const onChange = () => {
         if (this.nodes().length === 1 && this.useSingleNodeRotation()) {
           this.rotation(this.nodes()[0].getAbsoluteRotation());
@@ -307,10 +305,17 @@ export class Transformer extends Group {
           this.update();
         }
       };
+      const additionalEvents = node._attrsAffectingSize
+        .map((prop) => prop + 'Change.' + this._getEventNamespace())
+        .join(' ');
       node.on(additionalEvents, onChange);
-      node.on(TRANSFORM_CHANGE_STR, onChange);
+      node.on(
-      node.on(`absoluteTransformChange.${EVENTS_NAME}`, onChange);
+        TRANSFORM_CHANGE_STR.map(
-      node.on(`xChange.${EVENTS_NAME} yChange.${EVENTS_NAME}`, onChange);
+          (e) => e + `.${this._getEventNamespace()}`
+        ).join(' '),
+        onChange
+      );
+      node.on(`absoluteTransformChange.${this._getEventNamespace()}`, onChange);
       this._proxyDrag(node);
     });
     this._resetTransformCache();
@@ -325,7 +330,7 @@ export class Transformer extends Group {
 
   _proxyDrag(node: Node) {
     let lastPos;
-    node.on(`dragstart.${EVENTS_NAME}`, (e) => {
+    node.on(`dragstart.${this._getEventNamespace()}`, (e) => {
       lastPos = node.getAbsolutePosition();
       // actual dragging of Transformer doesn't make sense
       // but we need to make sure it also has all drag events
@@ -333,7 +338,7 @@ export class Transformer extends Group {
         this.startDrag(e, false);
       }
     });
-    node.on(`dragmove.${EVENTS_NAME}`, (e) => {
+    node.on(`dragmove.${this._getEventNamespace()}`, (e) => {
       if (!lastPos) {
         return;
       }
@@ -384,7 +389,7 @@ export class Transformer extends Group {
     // remove events
     if (this._nodes) {
       this._nodes.forEach((node) => {
-        node.off('.' + EVENTS_NAME);
+        node.off('.' + this._getEventNamespace());
       });
     }
     this._nodes = [];

test/unit/Transformer-test.ts

@@ -4636,7 +4636,7 @@ describe('Transformer', function () {
       width: 100,
       height: 100,
       fill: 'yellow',
-      rotation: 45
+      rotation: 45,
     });
     layer.add(rect);
 
@@ -4651,4 +4651,42 @@ describe('Transformer', function () {
 
     assert.equal(tr.rotation(), 0);
   });
+
+  it('use several transformers on a single node', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 100,
+      y: 60,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow',
+    });
+    layer.add(rect);
+
+    var tr1 = new Konva.Transformer({
+      nodes: [rect],
+    });
+    layer.add(tr1);
+
+    var tr2 = new Konva.Transformer({
+      nodes: [rect],
+    });
+    layer.add(tr2);
+
+    // detach tr1
+    tr1.nodes([]);
+
+    // update rect
+    rect.setAttrs({ x: 0, y: 0, width: 50, height: 50 });
+
+    // it should update second transformer
+    assert.equal(tr2.x(), rect.x());
+    assert.equal(tr2.y(), rect.y());
+    assert.equal(tr2.width(), rect.width());
+    assert.equal(tr2.height(), rect.height());
+  });
 });