From 0055fc36c6ed21a3ba25e89ef08320460fc6d793 Mon Sep 17 00:00:00 2001
From: Mai Trung Duc <maitrungduc1410@gmail.com>
Date: Fri, 23 Jun 2023 14:19:13 +0800
Subject: [PATCH] feat: add all shape attrs, search by attr

---
 README.md                                     |  11 +-
 package.json                                  |   2 +-
 src/pages/panel/components/Attributes.tsx     | 202 ++++++++++--------
 .../panel/components/InspectedElement.tsx     |  33 ++-
 src/pages/panel/components/Panel.scss         | 105 +++++----
 src/pages/panel/components/Panel.tsx          |  24 ++-
 src/pages/panel/components/constants.ts       | 105 ++++++++-
 .../panel/devtools/konvaDevtoolsSelection.ts  |  60 +++---
 src/pages/panel/index.tsx                     |   5 -
 9 files changed, 378 insertions(+), 169 deletions(-)

diff --git a/README.md b/README.md
index b49e46f..7e640d3 100755
--- a/README.md
+++ b/README.md
@@ -31,13 +31,12 @@ To Develop the extension:
 - Run `yarn install` or `npm install`
 - Run `yarn dev` (for Chrome/Edge) or `yarn dev:firefox` for Firefox
 
-Next drag `dist` folder to the following for the browser you're using:
+After that, a `dist` folder will be generated, next based on your browser do the following
+- Chrome: open `chrome://extensions/` and drag `dist` folder there
+- Edge: open `edge://extensions/` and drag `dist` folder there
+- Firefox: open `about:debugging#/runtime/this-firefox` > Load Temporary Add > Select any file in the `dist` folder
 
-- Chrome: `chrome://extensions/`
-- Edge: `edge://extensions/`
-- Firefox: `about:debugging#/runtime/this-firefox` > Load Temporary Add > Select any file in the `dist` folder
-
-> Note: for Firefox, to make background script + popup page work on load, right click the Konva extension icon on browser bar -> Always allow....
+> Note: for Firefox, to make background script + popup page work on load, right click the Konva extension icon on browser bar -> select "Always allow....""
 
 # Build
 To build project for publish, run `yarn build` (for Chrome/Edge) or `yarn build:firefox` for Firefox
diff --git a/package.json b/package.json
index fadbfd1..3a2a666 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "konva-inspector",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Devtools for your Konva App",
   "license": "MIT",
   "repository": {
diff --git a/src/pages/panel/components/Attributes.tsx b/src/pages/panel/components/Attributes.tsx
index b339d65..216853f 100644
--- a/src/pages/panel/components/Attributes.tsx
+++ b/src/pages/panel/components/Attributes.tsx
@@ -1,9 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
 import { bridge } from "..";
 import CopyToClipboard from "./CopyToClipboard";
 import { IAttr } from "./constants";
+import DownArrow from "./DownArrow";
+import RightArrow from "./RightArrow";
 
 interface IProps {
+  attrSearch: string;
   title: string;
   nodeAttrs: Record<string, any>;
   attrs: IAttr[];
@@ -12,21 +15,40 @@ interface IProps {
 }
 
 export default function Attributes({
+  attrSearch,
   title,
   nodeAttrs,
   attrs,
   custom,
   updateAttr,
 }: IProps) {
+  const [expanded, setExpanded] = useState<boolean>(true);
+
   const copyToClipBoard = () => {
     bridge(
       `window.copy(window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.selected().attrs)`
     );
   };
 
+  const renderArrow = () => {
+    return (
+      <div
+        className="expand-collapse-toggle"
+        onClick={() => setExpanded((v) => !v)}
+      >
+        {expanded ? <DownArrow /> : <RightArrow />}
+      </div>
+    );
+  };
+
+  const filteredAttrs = attrs.filter((item) =>
+    item.name.toLowerCase().startsWith(attrSearch.toLowerCase())
+  );
+
   return (
     <div className="attributes">
       <div className="header-row">
+        {renderArrow()}
         <div className="header">{title}</div>
         <button
           className="button"
@@ -38,91 +60,103 @@ export default function Attributes({
           </span>
         </button>
       </div>
-      <div className="attr-list">
-        {attrs.map((item) => {
-          let input;
+      {expanded && (
+        <div className="attr-list">
+          {filteredAttrs.map((item) => {
+            let input;
 
-          switch (item.type) {
-            case "boolean": {
-              input = (
-                <input
-                  type="checkbox"
-                  checked={
-                    nodeAttrs[item.name] === undefined
-                      ? item.defaultValue !== undefined
-                        ? item.defaultValue
-                        : true
-                      : nodeAttrs[item.name]
-                  }
-                  onChange={(e) => updateAttr(item.name, e.target.checked)}
-                />
-              );
-              break;
-            }
-            case "number": {
-              input = (
-                <input
-                  value={
-                    nodeAttrs[item.name] !== undefined
-                      ? nodeAttrs[item.name]
-                      : ""
-                  }
-                  type="number"
-                  placeholder="<default>"
-                  onChange={(e) =>
-                    updateAttr(
-                      item.name,
-                      isNaN(e.target.valueAsNumber)
-                        ? null // JSON.stringify will not preserve undefined, so we have to use null here
-                        : e.target.valueAsNumber
-                    )
-                  }
-                  min={item.min}
-                />
-              );
-              break;
-            }
-            case "json": {
-              input = (
-                <textarea
-                  value={
-                    nodeAttrs[item.name] !== undefined
-                      ? JSON.stringify(nodeAttrs[item.name])
-                      : ""
-                  }
-                  placeholder="<default>"
-                  onChange={(e) =>
-                    updateAttr(item.name, JSON.parse(e.target.value))
-                  }
-                />
-              );
-              break;
+            switch (item.type) {
+              case "boolean": {
+                input = (
+                  <input
+                    type="checkbox"
+                    checked={
+                      nodeAttrs[item.name] === undefined
+                        ? item.defaultValue !== undefined
+                          ? item.defaultValue
+                          : true
+                        : nodeAttrs[item.name]
+                    }
+                    onChange={(e) => updateAttr(item.name, e.target.checked)}
+                  />
+                );
+                break;
+              }
+              case "number": {
+                input = (
+                  <input
+                    value={
+                      nodeAttrs[item.name] !== undefined
+                        ? nodeAttrs[item.name]
+                        : ""
+                    }
+                    type="number"
+                    placeholder="<default>"
+                    onChange={(e) =>
+                      updateAttr(
+                        item.name,
+                        isNaN(e.target.valueAsNumber)
+                          ? null // JSON.stringify will not preserve undefined, so we have to use null here
+                          : e.target.valueAsNumber
+                      )
+                    }
+                    min={item.min}
+                  />
+                );
+                break;
+              }
+              case "json": {
+                input = (
+                  <textarea
+                    value={
+                      nodeAttrs[item.name] !== undefined
+                        ? JSON.stringify(nodeAttrs[item.name])
+                        : ""
+                    }
+                    placeholder="<default>"
+                    onChange={(e) =>
+                      updateAttr(item.name, JSON.parse(e.target.value))
+                    }
+                  />
+                );
+                break;
+              }
+              default: {
+                input = (
+                  <input
+                    value={
+                      nodeAttrs[item.name] !== undefined
+                        ? nodeAttrs[item.name]
+                        : ""
+                    }
+                    type="text"
+                    placeholder="<default>"
+                    onChange={(e) => updateAttr(item.name, e.target.value)}
+                  />
+                );
+              }
             }
-            default: {
-              input = (
-                <input
-                  value={
-                    nodeAttrs[item.name] !== undefined
-                      ? nodeAttrs[item.name]
-                      : ""
-                  }
-                  type="text"
-                  placeholder="<default>"
-                  onChange={(e) => updateAttr(item.name, e.target.value)}
-                />
-              );
-            }
-          }
-          return (
-            <div className="attr-item" key={item.name}>
-              <span className={`item-name ${custom ? "key-name" : ""}`}>
-                {item.name}:
-              </span>
-              {input}
-            </div>
-          );
-        })}
-      </div>
+            return (
+              <div className="attr-item" key={item.name}>
+                <span className={`item-name ${custom ? "key-name" : ""}`}>
+                  {attrSearch.length ? (
+                    <>
+                      <mark className="current-highlight">
+                        {item.name.slice(0, attrSearch.length)}
+                      </mark>
+                      <span>{item.name.slice(attrSearch.length)}</span>
+                    </>
+                  ) : (
+                    <>{item.name}</>
+                  )}
+                  :
+                </span>
+                {input}
+              </div>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/pages/panel/components/InspectedElement.tsx b/src/pages/panel/components/InspectedElement.tsx
index c972188..52b4b1a 100644
--- a/src/pages/panel/components/InspectedElement.tsx
+++ b/src/pages/panel/components/InspectedElement.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react";
 import { bridge } from "..";
 import { OutlineNode } from "../types";
-import { ATTRS, SHAPE_ATTRS, SHAPE_CUSTOM_ATTRS } from "./constants";
+import { NODE_ATTRS, SHAPE_ATTRS, SHAPE_CUSTOM_ATTRS } from "./constants";
 import Attributes from "./Attributes";
+import SearchIcon from "./SearchIcon";
 
 interface IProps {
   selectedNode: OutlineNode | null;
@@ -12,6 +13,7 @@ export default function InspectedElement({ selectedNode }: IProps) {
   // we create a state to store attrs to provide smooth update when we change attrs
   // otherwise if rely on "selectedNode" interval to update will make it looks laggy
   const [nodeAttrs, setNodeAttrs] = useState<Record<string, any>>({});
+  const [attrSearch, setAttrSearch] = useState<string>("");
 
   useEffect(() => {
     if (selectedNode) {
@@ -35,8 +37,6 @@ export default function InspectedElement({ selectedNode }: IProps) {
     }));
   };
 
-  const attrs = selectedNode?.isShape ? SHAPE_ATTRS : ATTRS;
-
   return (
     <>
       <div className="title-row">
@@ -48,11 +48,23 @@ export default function InspectedElement({ selectedNode }: IProps) {
           </>
         )}
       </div>
+      {selectedNode && (
+        <div className="search-input-item">
+          <SearchIcon />
+          <input
+            className="input"
+            placeholder="Search attributes..."
+            value={attrSearch}
+            onChange={(e) => setAttrSearch(e.target.value)}
+          />
+        </div>
+      )}
       <div className="inspected-element-data">
         {selectedNode && (
           <>
             {SHAPE_CUSTOM_ATTRS[selectedNode.className] && (
               <Attributes
+                attrSearch={attrSearch}
                 title={`${selectedNode.className} Attributes`}
                 attrs={SHAPE_CUSTOM_ATTRS[selectedNode.className]}
                 nodeAttrs={nodeAttrs}
@@ -61,9 +73,20 @@ export default function InspectedElement({ selectedNode }: IProps) {
               />
             )}
 
+            {selectedNode?.isShape && (
+              <Attributes
+                attrSearch={attrSearch}
+                title="Shape Attributes"
+                attrs={SHAPE_ATTRS}
+                nodeAttrs={nodeAttrs}
+                updateAttr={updateAttr}
+              />
+            )}
+
             <Attributes
-              title="Attributes"
-              attrs={attrs}
+              attrSearch={attrSearch}
+              title="Node Attributes"
+              attrs={NODE_ATTRS}
               nodeAttrs={nodeAttrs}
               updateAttr={updateAttr}
             />
diff --git a/src/pages/panel/components/Panel.scss b/src/pages/panel/components/Panel.scss
index 56896fc..11e55d1 100644
--- a/src/pages/panel/components/Panel.scss
+++ b/src/pages/panel/components/Panel.scss
@@ -84,6 +84,39 @@ body {
   font-family: var(--font-family-sans);
   -webkit-font-smoothing: var(--font-smoothing);
 
+  .w-full {
+    width: 100%;
+  }
+
+  .current-highlight {
+    background-color: var(--color-search-match-current);
+  }
+
+  .search-input-item {
+    flex: 1 1;
+    display: flex;
+    align-items: center;
+    .input-icon {
+      pointer-events: none;
+      z-index: 2;
+      color: var(--color-dimmer);
+      width: 1rem;
+      height: 1rem;
+      fill: currentColor;
+    }
+    .input {
+      flex: 1 1 100px;
+      width: 100px;
+      font-size: var(--font-size-sans-large);
+      outline: none;
+      border: none;
+      background-color: var(--color-background);
+      color: var(--color-text);
+      padding-left: 1.5rem;
+      margin-left: -1rem;
+    }
+  }
+
   .key-name {
     color: var(--color-attribute-name);
   }
@@ -124,6 +157,14 @@ body {
     background-color: var(--color-border);
   }
 
+  .expand-collapse-toggle {
+    display: flex;
+    color: var(--color-expand-collapse-toggle);
+    &.hidden {
+      opacity: 0;
+    }
+  }
+
   .tree-list {
     flex: 0 0 65%;
     border-top: 1px solid var(--color-border);
@@ -160,30 +201,6 @@ body {
           padding: 0.25rem;
         }
       }
-      .search-input-item {
-        flex: 1 1;
-        display: flex;
-        align-items: center;
-        .input-icon {
-          pointer-events: none;
-          z-index: 2;
-          color: var(--color-dimmer);
-          width: 1rem;
-          height: 1rem;
-          fill: currentColor;
-        }
-        .input {
-          flex: 1 1 100px;
-          width: 100px;
-          font-size: var(--font-size-sans-large);
-          outline: none;
-          border: none;
-          background-color: var(--color-background);
-          color: var(--color-text);
-          padding-left: 1.5rem;
-          margin-left: -1rem;
-        }
-      }
     }
     .trees {
       overflow-y: auto;
@@ -229,6 +246,11 @@ body {
       }
     }
 
+    .search-input-item {
+      padding: 0.25rem;
+      border-bottom: 1px solid var(--color-border);
+    }
+
     .inspected-element-data {
       overflow-y: auto;
       height: calc(
@@ -253,10 +275,27 @@ body {
         border-top: none;
       }
       .attributes {
+        &.attr-search {
+          input {
+            flex: 1 1 100px;
+            font-size: var(--font-size-sans-large);
+            outline: none;
+            border: none;
+            background-color: var(--color-background);
+            color: var(--color-text);
+          }
+        }
         .attr-list {
-          padding-left: 15px;
           .attr-item {
             display: flex;
+            padding-left: 15px;
+            padding-top: 1px;
+            padding-bottom: 1px;
+            &:hover {
+              background-color: var(--color-background-hover);
+              border-radius: 4px;
+            }
+
             &:not(:first-child) {
               margin-top: 0.5rem;
             }
@@ -266,8 +305,10 @@ body {
               font-family: var(--font-family-monospace);
             }
 
-            input, textarea {
+            input,
+            textarea {
               flex: 1 1;
+              width: 100%;
               background: none;
               border: 1px solid transparent;
               color: var(--color-attribute-editable-value);
@@ -320,14 +361,6 @@ body {
     --color-expand-collapse-toggle: var(--color-component-name-inverted);
   }
 
-  .expand-collapse-toggle {
-    display: flex;
-    color: var(--color-expand-collapse-toggle);
-    &.hidden {
-      opacity: 0;
-    }
-  }
-
   .key-value {
     color: var(--color-attribute-value);
     user-select: text;
@@ -335,8 +368,4 @@ body {
     overflow-x: hidden;
     text-overflow: ellipsis;
   }
-
-  .current-highlight {
-    background-color: var(--color-search-match-current);
-  }
 }
diff --git a/src/pages/panel/components/Panel.tsx b/src/pages/panel/components/Panel.tsx
index 1901b1c..e1b8ce1 100644
--- a/src/pages/panel/components/Panel.tsx
+++ b/src/pages/panel/components/Panel.tsx
@@ -83,6 +83,22 @@ const Panel: React.FC = () => {
     }
   }, [alwaysInspect]);
 
+  useEffect(() => {
+    function handleMouseLeave() {
+      bridge(
+        "window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.deactivate()"
+      );
+    }
+    const inspectedTree = document.getElementById(
+      "inspected-trees"
+    ) as HTMLDivElement;
+    inspectedTree.addEventListener("mouseleave", handleMouseLeave);
+
+    return () => {
+      inspectedTree.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, []);
+
   const getStageTree = async () => {
     try {
       const data = await bridge<OutlineNode[]>(
@@ -116,7 +132,9 @@ const Panel: React.FC = () => {
     if (data) {
       alwaysInspect &&
         document.getElementById(data._id.toString()).scrollIntoView({
-          behavior: "smooth",
+          behavior: "auto",
+          block: "center",
+          inline: "center",
         });
     }
 
@@ -175,9 +193,9 @@ const Panel: React.FC = () => {
             </span>
           </button>
         </div>
-        <div className="trees">
+        <div id="inspected-trees" className="trees">
           {trees.map((item, index) => (
-            <div className="tree" key={`tree-${index}`}>
+            <div className="tree-item" key={`tree-item-${index}`}>
               <Element
                 searchText={searchText}
                 selectedNode={selectedNode}
diff --git a/src/pages/panel/components/constants.ts b/src/pages/panel/components/constants.ts
index b9d11e4..b7d1f2b 100644
--- a/src/pages/panel/components/constants.ts
+++ b/src/pages/panel/components/constants.ts
@@ -1,12 +1,11 @@
 export interface IAttr {
   name: string;
-  path?: string;
   type: "string" | "number" | "boolean" | "json";
   defaultValue?: string | number | boolean;
   min?: number;
 }
 
-export const ATTRS: IAttr[] = [
+export const NODE_ATTRS: IAttr[] = [
   {
     name: "x",
     type: "number",
@@ -92,11 +91,70 @@ export const ATTRS: IAttr[] = [
 ];
 
 export const SHAPE_ATTRS: IAttr[] = [
-  ...ATTRS,
   {
     name: "fill",
     type: "string",
   },
+  {
+    name: "fillPatternX",
+    type: "number",
+  },
+  {
+    name: "fillPatternY",
+    type: "number",
+  },
+  {
+    name: "fillPatternOffsetX",
+    type: "number",
+  },
+  {
+    name: "fillPatternOffsetY",
+    type: "number",
+  },
+  {
+    name: "fillPatternScaleX",
+    type: "number",
+  },
+  {
+    name: "fillPatternScaleY",
+    type: "number",
+  },
+  {
+    name: "fillPatternRotation",
+    type: "number",
+  },
+  {
+    name: "fillPatternRepeat",
+    type: "string",
+  },
+  {
+    name: "fillLinearGradientStartPointX",
+    type: "number",
+  },
+  {
+    name: "fillLinearGradientStartPointY",
+    type: "number",
+  },
+  {
+    name: "fillLinearGradientEndPointX",
+    type: "number",
+  },
+  {
+    name: "fillLinearGradientEndPointY",
+    type: "number",
+  },
+  {
+    name: "fillRadialGradientColorStops",
+    type: "json",
+  },
+  {
+    name: "fillEnabled",
+    type: "boolean",
+  },
+  {
+    name: "fillPriority",
+    type: "string",
+  },
   {
     name: "stroke",
     type: "string",
@@ -106,6 +164,27 @@ export const SHAPE_ATTRS: IAttr[] = [
     type: "number",
     min: 0,
   },
+  {
+    name: "fillAfterStrokeEnabled",
+    type: "boolean",
+    defaultValue: false,
+  },
+  {
+    name: "hitStrokeWidth",
+    type: "number",
+  },
+  {
+    name: "strokeScaleEnabled",
+    type: "boolean",
+  },
+  {
+    name: "strokeHitEnabled",
+    type: "boolean",
+  },
+  {
+    name: "strokeEnabled",
+    type: "boolean",
+  },
   {
     name: "shadowColor",
     type: "string",
@@ -130,6 +209,26 @@ export const SHAPE_ATTRS: IAttr[] = [
     name: "shadowEnabled",
     type: "boolean",
   },
+  {
+    name: "shadowForStrokeEnabled",
+    type: "boolean",
+  },
+  {
+    name: "dash",
+    type: "json",
+  },
+  {
+    name: "dashOffset",
+    type: "number",
+  },
+  {
+    name: "dashEnabled",
+    type: "boolean",
+  },
+  {
+    name: "perfectDrawEnabled",
+    type: "boolean",
+  },
 ];
 
 export const SHAPE_CUSTOM_ATTRS: Record<string, IAttr[]> = {
diff --git a/src/pages/panel/devtools/konvaDevtoolsSelection.ts b/src/pages/panel/devtools/konvaDevtoolsSelection.ts
index b17f714..ae5de3d 100644
--- a/src/pages/panel/devtools/konvaDevtoolsSelection.ts
+++ b/src/pages/panel/devtools/konvaDevtoolsSelection.ts
@@ -3,9 +3,13 @@ import { KonvaDevtools, OutlineNode } from "../types";
 
 export default function konvaDevtoolsSelection(devtools: KonvaDevtools) {
   let activeNode: Konva.Container;
+  let activeNodeStageIndex: number | null;
   let selectedNode: Konva.Container;
   let alwaysInspect = false;
 
+  // memoize handler so that we can remove it later
+  let handlers = {};
+
   return {
     active(serialize = false): Konva.Node | OutlineNode | undefined {
       if (!activeNode) return undefined;
@@ -31,6 +35,7 @@ export default function konvaDevtoolsSelection(devtools: KonvaDevtools) {
         false
       ) as Konva.Container;
       activeNode = n;
+      activeNodeStageIndex = stageIndex;
 
       // we need to clear before connect to make sure it works in case of multi stages
       devtools.overlay.clear();
@@ -38,6 +43,8 @@ export default function konvaDevtoolsSelection(devtools: KonvaDevtools) {
     },
     deactivate() {
       activeNode = undefined;
+      activeNodeStageIndex = null;
+      handlers = {};
       devtools.overlay.clear();
     },
     updateAttrs(attrs: Record<string, string | number | boolean>) {
@@ -57,13 +64,16 @@ export default function konvaDevtoolsSelection(devtools: KonvaDevtools) {
     registerMouseOverEvents() {
       // we check for window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.Konva() is undefined or not to prevent the case when we reload at that time Konva is not initialized yet
       if (devtools.Konva()) {
-        for (const stage of devtools.Konva().stages) {
+        for (const [index, stage] of devtools.Konva().stages.entries()) {
           stage.content.addEventListener(
             "mouseleave",
             devtools.selection.deactivateOnMouseLeaveWhenAlwaysInspect
           );
-          stage.on("mouseover", devtools.selection.selectShapeAtCursor);
-          stage.on("click", devtools.selection.removeHoverToSelectListeners);
+          stage.on(
+            "mouseover",
+            devtools.selection.selectShapeAtCursor(stage, index)
+          );
+          stage.on("click", devtools.selection.unregisterMouseOverEvents);
         }
         1; // add this line so that it'll be returned when evaluation, otherwise it'll throw error because the evaluation returns object class
       }
@@ -71,39 +81,41 @@ export default function konvaDevtoolsSelection(devtools: KonvaDevtools) {
     unregisterMouseOverEvents() {
       // we check for window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.Konva() is undefined or not to prevent the case when we reload at that time Konva is not initialized yet
       if (devtools.Konva()) {
-        for (const stage of devtools.Konva().stages) {
+        for (const [index, stage] of devtools.Konva().stages.entries()) {
           stage.content.removeEventListener(
             "mouseleave",
             devtools.selection.deactivateOnMouseLeaveWhenAlwaysInspect
           );
-          stage.off("mouseover", devtools.selection.selectShapeAtCursor);
-          stage.off("click", devtools.selection.removeHoverToSelectListeners);
+          stage.off(
+            "mouseover",
+            devtools.selection.selectShapeAtCursor(stage, index)
+          );
+          stage.off("click", devtools.selection.unregisterMouseOverEvents);
         }
+        if (activeNode) {
+          devtools.selection.select(activeNode._id, activeNodeStageIndex);
+        }
+        devtools.selection.deactivate();
+        devtools.selection.setAlwaysInspect(false);
         1; // add this line so that it'll be returned when evaluation, otherwise it'll throw error because the evaluation returns object class
       }
     },
     deactivateOnMouseLeaveWhenAlwaysInspect() {
       devtools.selection.deactivate();
     },
-    selectShapeAtCursor() {
-      for (const [index, stage] of devtools.Konva().stages.entries()) {
-        const pointerPosition = stage.getPointerPosition();
-        if (pointerPosition) {
-          const node = stage.getIntersection(pointerPosition);
-          if (node) {
-            devtools.selection.activate(node._id, index);
+    selectShapeAtCursor(stage: Konva.Stage, stageIndex: number) {
+      return (
+        handlers[stageIndex] ||
+        (handlers[stageIndex] = function () {
+          const pointerPosition = stage.getPointerPosition();
+          if (pointerPosition) {
+            const node = stage.getIntersection(pointerPosition);
+            if (node) {
+              devtools.selection.activate(node._id, stageIndex);
+            }
           }
-        }
-      }
-    },
-    removeHoverToSelectListeners() {
-      if (!devtools) return;
-      for (const stage of devtools.Konva().stages) {
-        stage.off("mouseover", devtools.selection.selectShapeAtCursor);
-        stage.off("click", devtools.selection.removeHoverToSelectListeners);
-      }
-      devtools.selection.deactivate();
-      devtools.selection.setAlwaysInspect(false);
+        })
+      );
     },
     setAlwaysInspect(value: boolean) {
       alwaysInspect = value;
diff --git a/src/pages/panel/index.tsx b/src/pages/panel/index.tsx
index 9915cdf..9ed1682 100644
--- a/src/pages/panel/index.tsx
+++ b/src/pages/panel/index.tsx
@@ -30,11 +30,6 @@ function init() {
   }
   const root = createRoot(appContainer);
   root.render(<Panel />);
-  appContainer.addEventListener("mouseleave", () => {
-    bridge(
-      "window.__KONVA_DEVTOOLS_GLOBAL_HOOK__ && window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection.deactivate()"
-    );
-  });
 
   // TODO: find a solution for firefox
   // chrome.windows is not available on firefox