From 82e22b2b3add3f58f4969cb2d72f966b60f32008 Mon Sep 17 00:00:00 2001
From: Mai Trung Duc <maitrungduc1410@gmail.com>
Date: Mon, 5 Jun 2023 18:56:13 +0700
Subject: [PATCH] fix: wrong position of canvas is scrollable

---
 package.json                                  |  2 +-
 src/pages/panel/components/Element.tsx        |  3 +-
 src/pages/panel/components/Panel.tsx          |  8 +++-
 .../panel/devtools/konvaDevtoolsOverlay.ts    | 41 ++++++++++++++++++-
 4 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index f53a15f..8189c26 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "konva-inspector",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Devtools for your Konva App",
   "license": "MIT",
   "repository": {
diff --git a/src/pages/panel/components/Element.tsx b/src/pages/panel/components/Element.tsx
index 86a80f9..9e609b5 100644
--- a/src/pages/panel/components/Element.tsx
+++ b/src/pages/panel/components/Element.tsx
@@ -39,7 +39,8 @@ export default function Element({
   };
 
   const shouldHighlight =
-    searchText.length && node.className.startsWith(searchText);
+    searchText.length &&
+    node.className.toLowerCase().startsWith(searchText.toLowerCase());
   return (
     <>
       <div
diff --git a/src/pages/panel/components/Panel.tsx b/src/pages/panel/components/Panel.tsx
index 6bb00ca..8259e7f 100644
--- a/src/pages/panel/components/Panel.tsx
+++ b/src/pages/panel/components/Panel.tsx
@@ -19,6 +19,7 @@ const Panel: React.FC = () => {
   const [alwaysInspect, setAlwaysInspect] = useState<boolean>(false);
   const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
 
+  // Handle dark theme
   useEffect(() => {
     chrome.storage.session.get(["isDarkMode"]).then((res) => {
       if ("isDarkMode" in res) {
@@ -31,6 +32,7 @@ const Panel: React.FC = () => {
     });
   }, []);
 
+  // handle tree
   useEffect(() => {
     getStageTree();
 
@@ -43,6 +45,7 @@ const Panel: React.FC = () => {
     };
   }, []);
 
+  // handle host app reload
   useEffect(() => {
     function handleReload() {
       setTrees([]);
@@ -59,6 +62,7 @@ const Panel: React.FC = () => {
     };
   }, []);
 
+  // handle always inspect
   useEffect(() => {
     if (alwaysInspect) {
       // TODO: handle multi stages
@@ -125,7 +129,9 @@ const Panel: React.FC = () => {
     setActiveNode(data);
     if (data) {
       alwaysInspect &&
-        document.getElementById(data._id.toString()).scrollIntoView();
+        document.getElementById(data._id.toString()).scrollIntoView({
+          behavior: "smooth",
+        });
     } else {
       setAlwaysInspect(false);
     }
diff --git a/src/pages/panel/devtools/konvaDevtoolsOverlay.ts b/src/pages/panel/devtools/konvaDevtoolsOverlay.ts
index 0109928..4ef5145 100644
--- a/src/pages/panel/devtools/konvaDevtoolsOverlay.ts
+++ b/src/pages/panel/devtools/konvaDevtoolsOverlay.ts
@@ -24,20 +24,50 @@ export default function konvaDevtoolsOverlay(devtools: KonvaDevtools) {
 
     overlayEl = document.createElement("div");
     overlayEl.style.backgroundColor = "rgba(0, 161, 255, 0.3)";
+    overlayEl.style.zIndex = "99999999999";
+    overlayEl.style.fontFamily =
+      "SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace";
     Object.assign(overlayEl.style, {
       ...position("0", "0", "0", "0"),
       pointerEvents: "none",
       transformOrigin: "top left",
     });
 
+    const tooltip = document.createElement("div");
+    tooltip.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
+    tooltip.style.position = "absolute";
+    tooltip.style.top = "-35px";
+    tooltip.style.left = "0";
+    tooltip.style.display = "flex";
+    tooltip.style.gap = "5px";
+    tooltip.style.color = "white";
+    tooltip.style.padding = "4px 8px";
+    tooltip.style.borderRadius = "4px";
+    tooltip.style.width = "max-content";
+
+    const leftTooltip = document.createElement("div");
+    leftTooltip.style.color = "#61dafb";
+
+    const separator = document.createElement("div");
+    separator.textContent = "|";
+
+    const rightTooltip = document.createElement("div");
+
+    tooltip.append(leftTooltip);
+    tooltip.append(separator);
+    tooltip.append(rightTooltip);
+    overlayEl.appendChild(tooltip);
     document.body.appendChild(overlayEl);
+
     function calibrateOverlay() {
       const content = devtools.content(stageIndex);
       const contentBounds = content.getBoundingClientRect();
       const stage = devtools.stage(stageIndex);
+      const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
+      const scrollY = window.pageYOffset || document.documentElement.scrollTop;
       overlayEl.style.transform = `translate(${
-        contentBounds.x + stage.x()
-      }px, ${contentBounds.y + stage.y()}px)`;
+        contentBounds.x + stage.x() + scrollX
+      }px, ${contentBounds.y + stage.y() + scrollY}px)`;
     }
 
     let throttle = 0;
@@ -52,6 +82,13 @@ export default function konvaDevtoolsOverlay(devtools: KonvaDevtools) {
       overlayEl.style.width = rect.width.toString() + "px";
       overlayEl.style.height = rect.height.toString() + "px";
 
+      leftTooltip.textContent = node.getClassName();
+      rightTooltip.textContent = `${rect.width.toFixed(
+        2
+      )}px x ${rect.height.toFixed(2)}px (${rect.x.toFixed(
+        2
+      )}, ${rect.y.toFixed(2)})`;
+
       if (throttle <= 0) {
         calibrateOverlay();
         throttle = 15;