From 4f29c6d365fe1030a66369f8986599bf3a9eb91e Mon Sep 17 00:00:00 2001
From: Anton Lavrenov <lavrton@gmail.com>
Date: Thu, 7 Mar 2024 06:53:45 +0700
Subject: [PATCH] fix trasnformer bug

---
 src/Layer.ts                  |  5 ++-
 src/shapes/Transformer.ts     |  4 ++
 test/unit/Transformer-test.ts | 81 ++++++++++++++++++++++++++++++++++-
 3 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/src/Layer.ts b/src/Layer.ts
index 5a0871b1..9766ec21 100644
--- a/src/Layer.ts
+++ b/src/Layer.ts
@@ -469,7 +469,10 @@ export class Layer extends Container<Group | Shape> {
   }
 
   destroy(): this {
-    Util.releaseCanvas(this.getNativeCanvasElement(), this.getHitCanvas()._canvas);
+    Util.releaseCanvas(
+      this.getNativeCanvasElement(),
+      this.getHitCanvas()._canvas
+    );
     return super.destroy();
   }
 
diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts
index 0c979620..6cec4a83 100644
--- a/src/shapes/Transformer.ts
+++ b/src/shapes/Transformer.ts
@@ -962,10 +962,14 @@ export class Transformer extends Group {
       var node = this.getNode();
       activeTransformersCount--;
       this._fire('transformend', { evt: e, target: node });
+      // redraw layer to restore hit graph
+      this.getLayer()?.batchDraw();
 
       if (node) {
         this._nodes.forEach((target) => {
           target._fire('transformend', { evt: e, target });
+          // redraw layer to restore hit graph
+          target.getLayer()?.batchDraw();
         });
       }
       this._movingAnchorName = null;
diff --git a/test/unit/Transformer-test.ts b/test/unit/Transformer-test.ts
index af3321a9..af6782df 100644
--- a/test/unit/Transformer-test.ts
+++ b/test/unit/Transformer-test.ts
@@ -4967,7 +4967,7 @@ 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 (done) {
     var stage = addStage();
     var layer = new Konva.Layer();
     stage.add(layer);
@@ -5008,5 +5008,84 @@ describe('Transformer', function () {
       y: 100,
     });
     assert.equal(shape, rect);
+    // reset position
+    rect.setAttrs({
+      x: 50,
+      y: 50,
+      draggable: true,
+      width: 100,
+      height: 100,
+    });
+
+    tr.nodes([rect]);
+    layer.draw();
+    // now check if graph is visible back when we moved a bit
+    simulateMouseDown(tr, {
+      x: 100,
+      y: 2,
+    });
+    simulateMouseMove(tr, {
+      x: 110,
+      y: 2,
+    });
+    setTimeout(() => {
+      shape = layer.getIntersection({
+        x: 100,
+        y: 100,
+      });
+      assert.equal(shape, null);
+      simulateMouseUp(tr, { x: 110, y: 2 });
+      setTimeout(() => {
+        shape = layer.getIntersection({
+          x: 100,
+          y: 100,
+        });
+        assert.equal(shape, rect);
+        done();
+      }, 100);
+    }, 100);
+  });
+
+  it('enable hit graph back on transformer destroy', function (done) {
+    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();
+
+    // now check if graph is visible back when we moved a bit
+    simulateMouseDown(tr, {
+      x: 100,
+      y: 2,
+    });
+    simulateMouseMove(tr, {
+      x: 110,
+      y: 2,
+    });
+    setTimeout(() => {
+      tr.destroy();
+      setTimeout(() => {
+        var shape = layer.getIntersection({
+          x: 100,
+          y: 100,
+        });
+        assert.equal(shape, rect);
+        done();
+      }, 100);
+    }, 100);
   });
 });