From 9cdbbd6616516baefadfc95ade69ca1b914b9f41 Mon Sep 17 00:00:00 2001
From: Clemens Grabmann <clemens.grabmann@cloudflight.io>
Date: Thu, 11 Aug 2022 10:20:30 +0200
Subject: [PATCH] #1387 make sure the Transformer affects the client-rect if it
 is attached

Signed-off-by: Clemens Grabmann <clemens.grabmann@cloudflight.io>
---
 src/shapes/Transformer.ts     | 10 ++++++---
 test/unit/Transformer-test.ts | 38 +++++++++++++++++++++++++++++------
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts
index 1bcbd880..b07f0441 100644
--- a/src/shapes/Transformer.ts
+++ b/src/shapes/Transformer.ts
@@ -1220,9 +1220,13 @@ export class Transformer extends Group {
   }
 
   getClientRect() {
-    // return zero size
-    // so it will be skipped in calculations
-    return { x: 0, y: 0, width: 0, height: 0 };
+    if (this.nodes().length > 0) {
+      return super.getClientRect();
+    } else {
+      // if we are detached return zero size
+      // so it will be skipped in calculations
+      return { x: 0, y: 0, width: 0, height: 0 };
+    }
   }
 
   nodes: GetSet<Node[], this>;
diff --git a/test/unit/Transformer-test.ts b/test/unit/Transformer-test.ts
index 0f61c93e..f796e9ec 100644
--- a/test/unit/Transformer-test.ts
+++ b/test/unit/Transformer-test.ts
@@ -4710,12 +4710,38 @@ describe('Transformer', function () {
     });
     layer.add(tr);
 
-    const box = layer.getClientRect();
+    const layerClientRect = layer.getClientRect();
+    const rectClientRect = rect.getClientRect();
 
-    // it should update second transformer
-    assert.equal(box.x, rect.x());
-    assert.equal(box.y, rect.y());
-    assert.equal(box.width, rect.width());
-    assert.equal(box.height, rect.height());
+    // the client rect should not be affected by the transformer
+    assert.deepEqual(layerClientRect, rectClientRect);
+  });
+  it('attached transformer should affect client rect', 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 tr = new Konva.Transformer({
+      nodes: [rect],
+    });
+    layer.add(tr);
+
+    const layerClientRect = layer.getClientRect();
+    const rectClientRect = rect.getClientRect();
+    const trClientRect = tr.getClientRect();
+
+    // the client rect should be affecte by the transformer
+    assert.notDeepEqual(layerClientRect, rectClientRect);
+    assert.deepEqual(layerClientRect, trClientRect);
   });
 });