fix transformer + clone bug. fix #706

konva.js

@@ -14384,6 +14384,7 @@
   Factory.addGetterSetter(TextPath, 'kerningFunc', null);
   Collection.mapMethods(TextPath);
 
+  var EVENTS_NAME = 'tr-konva';
   var ATTR_CHANGE_LIST$2 = [
       'resizeEnabledChange',
       'rotateAnchorOffsetChange',
@@ -14399,21 +14400,25 @@
       'anchorFillChange',
       'anchorCornerRadiusChange',
       'ignoreStrokeChange'
-  ].join(' ');
+  ]
+      .map(function (e) { return e + ("." + EVENTS_NAME); })
+      .join(' ');
   var NODE_RECT = 'nodeRect';
   var TRANSFORM_CHANGE_STR$1 = [
-      'widthChange.tr',
-      'heightChange.tr',
-      'scaleXChange.tr',
-      'scaleYChange.tr',
-      'skewXChange.tr',
-      'skewYChange.tr',
-      'rotationChange.tr',
-      'offsetXChange.tr',
-      'offsetYChange.tr',
-      'transformsEnabledChange.tr',
-      'strokeWidthChange.tr'
-  ].join(' ');
+      'widthChange',
+      'heightChange',
+      'scaleXChange',
+      'scaleYChange',
+      'skewXChange',
+      'skewYChange',
+      'rotationChange',
+      'offsetXChange',
+      'offsetYChange',
+      'transformsEnabledChange',
+      'strokeWidthChange'
+  ]
+      .map(function (e) { return e + ("." + EVENTS_NAME); })
+      .join(' ');
   var ANGLES = {
       'top-left': -45,
       'top-center': 0,
@@ -14558,7 +14563,7 @@
           this._node = node;
           this._resetTransformCache();
           var additionalEvents = node._attrsAffectingSize
-              .map(function (prop) { return prop + 'Change.tr'; })
+              .map(function (prop) { return prop + 'Change.' + EVENTS_NAME; })
               .join(' ');
           var onChange = function () {
               _this._resetTransformCache();
@@ -14568,7 +14573,9 @@
           };
           node.on(additionalEvents, onChange);
           node.on(TRANSFORM_CHANGE_STR$1, onChange);
-          node.on('xChange.tr yChange.tr', function () { return _this._resetTransformCache(); });
+          node.on("xChange." + EVENTS_NAME + " yChange." + EVENTS_NAME, function () {
+              return _this._resetTransformCache();
+          });
           // we may need it if we set node in initial props
           // so elements are not defined yet
           var elementsCreated = !!this.findOne('.top-left');
@@ -14590,7 +14597,7 @@
        */
       Transformer.prototype.detach = function () {
           if (this.getNode()) {
-              this.getNode().off('.tr');
+              this.getNode().off('.' + EVENTS_NAME);
               this._node = undefined;
           }
           this._resetTransformCache();

src/shapes/Transformer.ts

@@ -35,6 +35,8 @@ export interface TransformerConfig extends ContainerConfig {
   boundBoxFunc?: (oldBox: Box, newBox: Box) => Box;
 }
 
+var EVENTS_NAME = 'tr-konva';
+
 var ATTR_CHANGE_LIST = [
   'resizeEnabledChange',
   'rotateAnchorOffsetChange',
@@ -50,23 +52,27 @@ var ATTR_CHANGE_LIST = [
   'anchorFillChange',
   'anchorCornerRadiusChange',
   'ignoreStrokeChange'
-].join(' ');
+]
+  .map(e => e + `.${EVENTS_NAME}`)
+  .join(' ');
 
 var NODE_RECT = 'nodeRect';
 
 var TRANSFORM_CHANGE_STR = [
-  'widthChange.tr',
-  'heightChange.tr',
-  'scaleXChange.tr',
-  'scaleYChange.tr',
-  'skewXChange.tr',
-  'skewYChange.tr',
-  'rotationChange.tr',
-  'offsetXChange.tr',
-  'offsetYChange.tr',
-  'transformsEnabledChange.tr',
-  'strokeWidthChange.tr'
-].join(' ');
+  'widthChange',
+  'heightChange',
+  'scaleXChange',
+  'scaleYChange',
+  'skewXChange',
+  'skewYChange',
+  'rotationChange',
+  'offsetXChange',
+  'offsetYChange',
+  'transformsEnabledChange',
+  'strokeWidthChange'
+]
+  .map(e => e + `.${EVENTS_NAME}`)
+  .join(' ');
 
 var ANGLES = {
   'top-left': -45,
@@ -217,7 +223,7 @@ export class Transformer extends Group {
     this._resetTransformCache();
 
     const additionalEvents = node._attrsAffectingSize
-      .map(prop => prop + 'Change.tr')
+      .map(prop => prop + 'Change.' + EVENTS_NAME)
       .join(' ');
 
     const onChange = () => {
@@ -228,7 +234,9 @@ export class Transformer extends Group {
     };
     node.on(additionalEvents, onChange);
     node.on(TRANSFORM_CHANGE_STR, onChange);
-    node.on('xChange.tr yChange.tr', () => this._resetTransformCache());
+    node.on(`xChange.${EVENTS_NAME} yChange.${EVENTS_NAME}`, () =>
+      this._resetTransformCache()
+    );
     // we may need it if we set node in initial props
     // so elements are not defined yet
     var elementsCreated = !!this.findOne('.top-left');
@@ -250,7 +258,7 @@ export class Transformer extends Group {
    */
   detach() {
     if (this.getNode()) {
-      this.getNode().off('.tr');
+      this.getNode().off('.' + EVENTS_NAME);
       this._node = undefined;
     }
     this._resetTransformCache();

test/unit/shapes/Transformer-test.js

@@ -2332,4 +2332,45 @@ suite('Transformer', function() {
     delete rect.rotation;
     assert.deepEqual(shape.getClientRect(), rect), 'change data';
   });
+
+  test('make sure transformer events are not cloned', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    const rect1 = new Konva.Rect({
+      x: stage.width() / 5,
+      y: stage.height() / 5,
+      width: 50,
+      height: 50,
+      fill: 'green',
+      draggable: true
+    });
+
+    layer.add(rect1);
+
+    const tr1 = new Konva.Transformer({
+      node: rect1
+    });
+    layer.add(tr1);
+
+    const rect2 = rect1.clone({
+      fill: 'red',
+      x: stage.width() / 3,
+      y: stage.height() / 3
+    });
+    layer.add(rect2);
+
+    tr1.destroy();
+
+    let tr2 = new Konva.Transformer({
+      node: rect2
+    });
+    layer.add(tr2);
+
+    // should not throw error
+    rect2.width(100);
+
+    stage.draw();
+  });
 });