improve transformer performance

src/Global.ts

@@ -155,6 +155,9 @@ export const Konva = {
   isDragging() {
     return Konva['DD'].isDragging;
   },
+  isTransforming() {
+    return Konva['Transformer']?.isTransforming();
+  },
   /**
    * returns whether or not a drag and drop operation is ready, but may
    *  not necessarily have started

src/Node.ts

@@ -1029,7 +1029,10 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       }
     });
 
-    var dragSkip = !skipDragCheck && !Konva.hitOnDragEnabled && layerUnderDrag;
+    var dragSkip =
+      !skipDragCheck &&
+      !Konva.hitOnDragEnabled &&
+      (layerUnderDrag || Konva.isTransforming());
     return this.isListening() && this.isVisible() && !dragSkip;
   }
 

src/Stage.ts

@@ -507,7 +507,8 @@ export class Stage extends Container<Layer> {
     this.setPointersPositions(evt);
 
     var targetShape = this._getTargetShape(eventType);
-    var eventsEnabled = !DD.isDragging || Konva.hitOnDragEnabled;
+    var eventsEnabled =
+      !(Konva.isDragging() || Konva.isTransforming()) || Konva.hitOnDragEnabled;
     if (targetShape && eventsEnabled) {
       targetShape._fireAndBubble(events.pointerout, { evt: evt });
       targetShape._fireAndBubble(events.pointerleave, { evt: evt });
@@ -590,12 +591,13 @@ export class Stage extends Container<Layer> {
     if (!events) {
       return;
     }
-    if (DD.isDragging && DD.node!.preventDefault() && evt.cancelable) {
+    if (Konva.isDragging() && DD.node!.preventDefault() && evt.cancelable) {
       evt.preventDefault();
     }
     this.setPointersPositions(evt);
 
-    var eventsEnabled = !DD.isDragging || Konva.hitOnDragEnabled;
+    var eventsEnabled =
+      !(Konva.isDragging() || Konva.isTransforming()) || Konva.hitOnDragEnabled;
     if (!eventsEnabled) {
       return;
     }

src/shapes/Transformer.ts

@@ -203,6 +203,7 @@ function getSnap(snaps: Array<number>, newRotationRad: number, tol: number) {
   return snapped;
 }
 
+let activeTransformersCount = 0;
 /**
  * Transformer constructor.  Transformer is a special type of group that allow you transform Konva
  * primitives and shapes. Transforming tool is not changing `width` and `height` properties of nodes
@@ -244,7 +245,6 @@ function getSnap(snaps: Array<number>, newRotationRad: number, tol: number) {
  * });
  * layer.add(transformer);
  */
-
 export class Transformer extends Group {
   _nodes: Array<Node>;
   _movingAnchorName: string | null = null;
@@ -254,6 +254,10 @@ export class Transformer extends Group {
   cos: number;
   _cursorChange: boolean;
 
+  static isTransforming = () => {
+    return activeTransformersCount > 0;
+  };
+
   constructor(config?: TransformerConfig) {
     // call super constructor
     super(config);
@@ -690,6 +694,7 @@ export class Transformer extends Group {
       x: pos.x - ap.x,
       y: pos.y - ap.y,
     };
+    activeTransformersCount++;
     this._fire('transformstart', { evt: e.evt, target: this.getNode() });
     this._nodes.forEach((target) => {
       target._fire('transformstart', { evt: e.evt, target });
@@ -955,6 +960,7 @@ export class Transformer extends Group {
         window.removeEventListener('touchend', this._handleMouseUp, true);
       }
       var node = this.getNode();
+      activeTransformersCount--;
       this._fire('transformend', { evt: e, target: node });
 
       if (node) {

test/unit/Transformer-test.ts

@@ -4967,40 +4967,46 @@ describe('Transformer', function () {
     simulateMouseUp(tr, { x: 110, y: 2 });
   });
 
-  // it('skip render on hit graph while transforming', function () {
+  it('skip render on hit graph while transforming', function () {
-  //   var stage = addStage();
+    var stage = addStage();
-  //   var layer = new Konva.Layer();
+    var layer = new Konva.Layer();
-  //   stage.add(layer);
+    stage.add(layer);
 
-  //   var rect = new Konva.Rect({
+    var rect = new Konva.Rect({
-  //     x: 55,
+      x: 55,
-  //     y: 55,
+      y: 55,
-  //     draggable: true,
+      draggable: true,
-  //     width: 100,
+      width: 100,
-  //     height: 100,
+      height: 100,
-  //     fill: 'yellow',
+      fill: 'yellow',
-  //   });
+    });
-  //   layer.add(rect);
+    layer.add(rect);
-
+
-  //   var tr = new Konva.Transformer({
+    var tr = new Konva.Transformer({
-  //     nodes: [rect],
+      nodes: [rect],
-  //   });
+    });
-  //   layer.add(tr);
+    layer.add(tr);
-  //   layer.draw();
+    layer.draw();
-
+
-  //   simulateMouseDown(tr, {
+    simulateMouseDown(tr, {
-  //     x: 100,
+      x: 100,
-  //     y: 2,
+      y: 2,
-  //   });
+    });
-  //   simulateMouseMove(tr, {
+    simulateMouseMove(tr, {
-  //     x: 110,
+      x: 110,
-  //     y: 2,
+      y: 2,
-  //   });
+    });
-  //   const shape = layer.getIntersection({
+    let shape = layer.getIntersection({
-  //     x: 100,
+      x: 100,
-  //     y: 100,
+      y: 100,
-  //   });
+    });
-  //   assert.equal(shape, null);
+    assert.equal(shape, null);
-  //   simulateMouseUp(tr, { x: 110, y: 2 });
+    simulateMouseUp(tr, { x: 110, y: 2 });
-  // });
+    layer.draw();
+    shape = layer.getIntersection({
+      x: 100,
+      y: 100,
+    });
+    assert.equal(shape, rect);
+  });
 });