fix: wrong position of canvas is scrollable

maitrungduc1410 · Jun 5, 2023 · 82e22b2 · 82e22b2
1 parent f23bd50
commit 82e22b2
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;