From d95ff799644a43fd734609a8f106e28afc402195 Mon Sep 17 00:00:00 2001
From: Anton Lavrenov <lavrton@gmail.com>
Date: Wed, 12 Jun 2024 12:21:10 -0500
Subject: [PATCH] fix shape.getClientRect() when a parent is cached, fix #1759`

---
 CHANGELOG.md            |  2 ++
 src/Shape.ts            | 15 ++++++++++++++-
 test/unit/Shape-test.ts | 29 +++++++++++++++++++++++++++++
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3373e292..7ece6495 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,8 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+- Fix `shape.getClientRect()` when any of parents is cached
+
 ### 9.3.11 (2024-05-23)
 
 - Fix chrome clear canvas issue
diff --git a/src/Shape.ts b/src/Shape.ts
index 6f403878..e85aa8df 100644
--- a/src/Shape.ts
+++ b/src/Shape.ts
@@ -528,9 +528,22 @@ export class Shape<
     };
   }
   getClientRect(config: ShapeGetClientRectConfig = {}) {
+    // if we have a cached parent, it will use cached transform matrix
+    // but we don't want to that
+    let hasCachedParent = false;
+    let parent = this.getParent();
+    while (parent) {
+      if (parent.isCached()) {
+        hasCachedParent = true;
+        break;
+      }
+      parent = parent.getParent();
+    }
     const skipTransform = config.skipTransform;
 
-    const relativeTo = config.relativeTo;
+    // force relative to stage if we have a cached parent
+    const relativeTo =
+      config.relativeTo || (hasCachedParent && this.getStage()) || undefined;
 
     const fillRect = this.getSelfRect();
 
diff --git a/test/unit/Shape-test.ts b/test/unit/Shape-test.ts
index 8f023462..79d2e2d6 100644
--- a/test/unit/Shape-test.ts
+++ b/test/unit/Shape-test.ts
@@ -1653,6 +1653,35 @@ describe('Shape', function () {
     assert.equal(rect.height, 100, 'should not effect width');
   });
 
+  it('getClientRect should not use cached values', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var shape = new Konva.Rect({
+      x: 100,
+      y: 100,
+      width: 100,
+      height: 100,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      strokeEnabled: false,
+      shadowOffsetX: 10,
+      shadowEnabled: false,
+    });
+
+    layer.add(shape);
+    stage.add(layer);
+
+    layer.cache();
+
+    layer.scaleX(2);
+
+    const rect = shape.getClientRect();
+
+    assert.equal(rect.x, 200);
+  });
+
   it('getClientRect for shape in transformed parent', function () {
     var stage = addStage();
     var layer = new Konva.Layer();