fix: toggle always inspect not working if triggered manually

maitrungduc1410 · Jun 24, 2023 · 11d5e17 · 11d5e17
1 parent 0055fc3
commit 11d5e17
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "konva-inspector",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Devtools for your Konva App",
   "license": "MIT",
   "repository": {

diff --git a/src/pages/panel/components/Panel.scss b/src/pages/panel/components/Panel.scss
@@ -105,8 +105,7 @@ body {
       fill: currentColor;
     }
     .input {
-      flex: 1 1 100px;
-      width: 100px;
+      flex: 1;
       font-size: var(--font-size-sans-large);
       outline: none;
       border: none;
@@ -249,13 +248,14 @@ body {
     .search-input-item {
       padding: 0.25rem;
       border-bottom: 1px solid var(--color-border);
+      height: 20px;
     }
 
     .inspected-element-data {
       overflow-y: auto;
       height: calc(
-        100% - 42px - 3px
-      ); // add 3px as buffer for better scrollbar visibility
+        100% - 42px - (20px + 0.5rem) - 3px
+      ); // add 3px as buffer for better scrollbar visibility, (20px + 0.5rem) is for the search attr input
       .header-row {
         display: flex;
         align-items: center;

diff --git a/src/pages/panel/components/Panel.tsx b/src/pages/panel/components/Panel.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import "./Panel.scss";
 import Element from "./Element";
 import { bridge } from "..";
@@ -18,6 +18,7 @@ const Panel: React.FC = () => {
   const [searchText, setSearchText] = useState<string>("");
   const [alwaysInspect, setAlwaysInspect] = useState<boolean>(false);
   const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
+  const isMouseOverTreeViewRef = useRef<boolean>(false);
 
   // Handle dark theme
   useEffect(() => {
@@ -70,12 +71,13 @@ const Panel: React.FC = () => {
         window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.registerMouseOverEvents()`);
 
       const interval = setInterval(async () => {
-        getActiveNode();
+        if (!isMouseOverTreeViewRef.current) {
+          getActiveNode();
+        }
       }, 500);
 
       return () => {
         clearInterval(interval);
-
         bridge(`
         window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ &&
         window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.unregisterMouseOverEvents()`);
@@ -88,14 +90,20 @@ const Panel: React.FC = () => {
       bridge(
         "window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.deactivate()"
       );
+      isMouseOverTreeViewRef.current = false;
+    }
+    function handleMouseOver() {
+      isMouseOverTreeViewRef.current = true;
     }
     const inspectedTree = document.getElementById(
       "inspected-trees"
     ) as HTMLDivElement;
     inspectedTree.addEventListener("mouseleave", handleMouseLeave);
+    inspectedTree.addEventListener("mouseover", handleMouseOver);
 
     return () => {
       inspectedTree.removeEventListener("mouseleave", handleMouseLeave);
+      inspectedTree.removeEventListener("mouseover", handleMouseOver);
     };
   }, []);
 
@@ -167,9 +175,6 @@ const Panel: React.FC = () => {
             className={alwaysInspect ? "toggle-on" : "toggle-off"}
             onClick={() => {
               setAlwaysInspect((cur) => !cur);
-              bridge(
-                `window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.setAlwaysInspect(true)`
-              );
             }}
           >
             <span className="toggle-content" tabIndex={-1}>
@@ -203,7 +208,11 @@ const Panel: React.FC = () => {
                 stageIndex={index}
                 indent={0}
                 node={item}
-                onSelectNode={(data) => setSelectedNode(data)}
+                onSelectNode={(data) => {
+                  setSelectedNode(data);
+                  setAlwaysInspect(false);
+                  setActiveNode(null); // because next interval may not run yet, so we need to set this to make sure active node is null
+                }}
               />
             </div>
           ))}

diff --git a/src/pages/panel/devtools/konvaDevtoolsSelection.ts b/src/pages/panel/devtools/konvaDevtoolsSelection.ts
@@ -8,7 +8,8 @@ export default function konvaDevtoolsSelection(devtools: KonvaDevtools) {
   let alwaysInspect = false;
 
   // memoize handler so that we can remove it later
-  let handlers = {};
+  // note: do not clear handlers after unregisterMouseOverEvents, otherwise we'll lost reference to remove and the toggle button from React won't work anymore
+  const handlers = {};
 
   return {
     active(serialize = false): Konva.Node | OutlineNode | undefined {
@@ -44,7 +45,6 @@ export default function konvaDevtoolsSelection(devtools: KonvaDevtools) {
     deactivate() {
       activeNode = undefined;
       activeNodeStageIndex = null;
-      handlers = {};
       devtools.overlay.clear();
     },
     updateAttrs(attrs: Record<string, string | number | boolean>) {
@@ -75,6 +75,7 @@ export default function konvaDevtoolsSelection(devtools: KonvaDevtools) {
           );
           stage.on("click", devtools.selection.unregisterMouseOverEvents);
         }
+        devtools.selection.setAlwaysInspect(true);
         1; // add this line so that it'll be returned when evaluation, otherwise it'll throw error because the evaluation returns object class
       }
     },