change events order for transformer. fix #1724

konvajs · Mar 3, 2024 · b09ceb3 · b09ceb3
1 parent fe8b7e0
commit b09ceb3
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 2 deletions.
diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts
@@ -1109,11 +1109,14 @@ export class Transformer extends Group {
 
       const attrs = newLocalTransform.decompose();
       node.setAttrs(attrs);
-      this._fire('transform', { evt: evt, target: node });
-      node._fire('transform', { evt: evt, target: node });
       node.getLayer()?.batchDraw();
     });
     this.rotation(Util._getRotation(newAttrs.rotation));
+    // trigger transform event AFTER we update rotation
+    this._nodes.forEach((node) => {
+      this._fire('transform', { evt: evt, target: node });
+      node._fire('transform', { evt: evt, target: node });
+    });
     this._resetTransformCache();
     this.update();
     this.getLayer()!.batchDraw();

diff --git a/test/unit/Transformer-test.ts b/test/unit/Transformer-test.ts
@@ -4929,4 +4929,78 @@ describe('Transformer', function () {
     assertAlmostEqual(rect.scaleX(), 1);
     assertAlmostEqual(rect.scaleY(), 1);
   });
+
+  it('should be able to prevent rotation in transform event', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 55,
+      y: 55,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow',
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      nodes: [rect],
+    });
+    layer.add(tr);
+    layer.draw();
+
+    tr.on('transform', function (e) {
+      tr.rotation(0);
+    });
+
+    simulateMouseDown(tr, {
+      x: 100,
+      y: 2,
+    });
+    simulateMouseMove(tr, {
+      x: 110,
+      y: 2,
+    });
+    assert.equal(tr.rotation(), 0);
+    simulateMouseUp(tr, { x: 110, y: 2 });
+  });
+
+  // it('skip render on hit graph while transforming', function () {
+  //   var stage = addStage();
+  //   var layer = new Konva.Layer();
+  //   stage.add(layer);
+
+  //   var rect = new Konva.Rect({
+  //     x: 55,
+  //     y: 55,
+  //     draggable: true,
+  //     width: 100,
+  //     height: 100,
+  //     fill: 'yellow',
+  //   });
+  //   layer.add(rect);
+
+  //   var tr = new Konva.Transformer({
+  //     nodes: [rect],
+  //   });
+  //   layer.add(tr);
+  //   layer.draw();
+
+  //   simulateMouseDown(tr, {
+  //     x: 100,
+  //     y: 2,
+  //   });
+  //   simulateMouseMove(tr, {
+  //     x: 110,
+  //     y: 2,
+  //   });
+  //   const shape = layer.getIntersection({
+  //     x: 100,
+  //     y: 100,
+  //   });
+  //   assert.equal(shape, null);
+  //   simulateMouseUp(tr, { x: 110, y: 2 });
+  // });
 });