fix: position not correct if stage pos changes

maitrungduc1410 · May 26, 2023 · 9dcaede · 9dcaede
1 parent 64f6c7e
commit 9dcaede
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 44 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
diff --git a/src/pages/panel/devtools/konvaDevtools.ts b/src/pages/panel/devtools/konvaDevtools.ts
@@ -1,5 +1,4 @@
 import type TKonva from "konva";
-import { OutlineNode } from "../types";
 
 export default function konvaDevtools() {
   const win = window as any;
@@ -22,19 +21,6 @@ export default function konvaDevtools() {
     return undefined;
   }
 
-  function getRenderedBy(node: TKonva.Node) {
-    const trees: string[] = [];
-
-    const parent = node.getParent();
-    if (parent) {
-      trees.push(node.getParent().getClassName());
-      const result = getRenderedBy(parent);
-      trees.push(result);
-    }
-
-    return trees;
-  }
-
   function Konva(): typeof TKonva {
     return getGlobal("Konva");
   }
@@ -44,8 +30,8 @@ export default function konvaDevtools() {
     content(stageIndex = 0) {
       return Konva().stages[stageIndex].getContent();
     },
-    renderedBy(node: TKonva.Node) {
-      return getRenderedBy(node);
+    stage(stageIndex = 0) {
+      return Konva().stages[stageIndex];
     },
   };
 }
diff --git a/src/pages/panel/devtools/konvaDevtoolsOverlay.ts b/src/pages/panel/devtools/konvaDevtoolsOverlay.ts
@@ -33,7 +33,10 @@ export default function konvaDevtoolsOverlay(devtools: KonvaDevtools) {
     function calibrateOverlay() {
       const content = devtools.content(stageIndex);
       const contentBounds = content.getBoundingClientRect();
-      overlayEl.style.transform = `translate(${contentBounds.x}px, ${contentBounds.y}px)`;
+      const stage = devtools.stage(stageIndex);
+      overlayEl.style.transform = `translate(${
+        contentBounds.x + stage.x()
+      }px, ${contentBounds.y + stage.y()}px)`;
     }
 
     let throttle = 0;