feat: add resizable panel

maitrungduc1410 · Jun 29, 2023 · 46e2acb · 46e2acb
1 parent cf1f5f3
commit 46e2acb
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 61 deletions.
diff --git a/public/demo.png → images/demo.png b/public/demo.png → images/demo.png
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "konva-inspector",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Devtools for your Konva App",
   "license": "MIT",
   "repository": {
@@ -20,6 +20,7 @@
   },
   "type": "module",
   "dependencies": {
+    "allotment": "^1.19.0",
     "konva": "^9.2.",
     "lodash-es": "^4.17.21",
     "react": "18.2.0",

diff --git a/src/pages/panel/components/Panel.scss b/src/pages/panel/components/Panel.scss
@@ -165,7 +165,8 @@ body {
   }
 
   .tree-list {
-    flex: 0 0 65%;
+    height: 100%;
+    overflow: auto;
     border-top: 1px solid var(--color-border);
     .search-input {
       height: 42px;
@@ -209,7 +210,8 @@ body {
     }
   }
   .inspected-element {
-    flex: 1 1 35%;
+    height: 100%;
+    overflow: auto;
     border-left: 1px solid var(--color-border);
     border-top: 1px solid var(--color-border);
     .title-row {

diff --git a/src/pages/panel/components/Panel.tsx b/src/pages/panel/components/Panel.tsx
@@ -10,6 +10,8 @@ import connect from "../devtools/connect";
 import logoIcon from "@assets/images/icon128.png";
 import Sun from "./icons/Sun";
 import Moon from "./icons/Moon";
+import { Allotment } from "allotment";
+import "allotment/dist/style.css";
 
 const Panel: React.FC = () => {
   const [trees, setTrees] = useState<OutlineNode[]>([]);
@@ -161,66 +163,75 @@ const Panel: React.FC = () => {
 
   return (
     <div className={`components ${isDarkMode ? "dark" : "light"}`}>
-      <div className="tree-list">
-        <div className="search-input">
-          <a
-            href="https://github.com/maitrungduc1410/konva-inspector"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <img src={logoIcon} width={28} />
-          </a>
-          <div className="v-rule"></div>
-          <button
-            className={alwaysInspect ? "toggle-on" : "toggle-off"}
-            onClick={() => {
-              setAlwaysInspect((cur) => !cur);
-            }}
-          >
-            <span className="toggle-content" tabIndex={-1}>
-              <ToggleOff />
-            </span>
-          </button>
-          <div className="v-rule"></div>
-          <div className="search-input-item">
-            <SearchIcon />
-            <input
-              className="input"
-              placeholder="Search (text or /regex/)"
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
-            />
-          </div>
-          <div className="v-rule"></div>
-          <button className="button" onClick={() => toggleTheme(!isDarkMode)}>
-            <span className="button-content" tabIndex={-1}>
-              {isDarkMode ? <Sun /> : <Moon />}
-            </span>
-          </button>
-        </div>
-        <div id="inspected-trees" className="trees">
-          {trees.map((item, index) => (
-            <div className="tree-item" key={`tree-item-${index}`}>
-              <Element
-                searchText={searchText}
-                selectedNode={selectedNode}
-                activeNode={activeNode}
-                stageIndex={index}
-                indent={0}
-                node={item}
-                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
+      <Allotment>
+        <Allotment.Pane preferredSize={"65%"}>
+          <div className="tree-list">
+            <div className="search-input">
+              <a
+                href="https://github.com/maitrungduc1410/konva-inspector"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <img src={logoIcon} width={28} />
+              </a>
+              <div className="v-rule"></div>
+              <button
+                className={alwaysInspect ? "toggle-on" : "toggle-off"}
+                onClick={() => {
+                  setAlwaysInspect((cur) => !cur);
                 }}
-              />
+              >
+                <span className="toggle-content" tabIndex={-1}>
+                  <ToggleOff />
+                </span>
+              </button>
+              <div className="v-rule"></div>
+              <div className="search-input-item">
+                <SearchIcon />
+                <input
+                  className="input"
+                  placeholder="Search (text or /regex/)"
+                  value={searchText}
+                  onChange={(e) => setSearchText(e.target.value)}
+                />
+              </div>
+              <div className="v-rule"></div>
+              <button
+                className="button"
+                onClick={() => toggleTheme(!isDarkMode)}
+              >
+                <span className="button-content" tabIndex={-1}>
+                  {isDarkMode ? <Sun /> : <Moon />}
+                </span>
+              </button>
+            </div>
+            <div id="inspected-trees" className="trees">
+              {trees.map((item, index) => (
+                <div className="tree-item" key={`tree-item-${index}`}>
+                  <Element
+                    searchText={searchText}
+                    selectedNode={selectedNode}
+                    activeNode={activeNode}
+                    stageIndex={index}
+                    indent={0}
+                    node={item}
+                    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>
+              ))}
             </div>
-          ))}
-        </div>
-      </div>
-      <div className="inspected-element">
-        <InspectedElement selectedNode={selectedNode} />
-      </div>
+          </div>
+        </Allotment.Pane>
+        <Allotment.Pane>
+          <div className="inspected-element">
+            <InspectedElement selectedNode={selectedNode} />
+          </div>
+        </Allotment.Pane>
+      </Allotment>
     </div>
   );
 };

diff --git a/yarn.lock b/yarn.lock
@@ -763,6 +763,11 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@juggle/resize-observer@^3.3.1":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
+  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1237,6 +1242,18 @@ ajv@^6.10.0, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+allotment@^1.19.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/allotment/-/allotment-1.19.0.tgz#8241a2e3db45e6b1e23f6ade29e392eab4297958"
+  integrity sha512-qL/1faHUoCOvMstCFGkaGSK/nVoSAVN6NLFuIW4P6D5fvKdgxV8/KNfMFeuQUXReodILp4I6z+5a9zmuqK5t4g==
+  dependencies:
+    classnames "^2.3.0"
+    eventemitter3 "^5.0.0"
+    lodash.clamp "^4.0.0"
+    lodash.debounce "^4.0.0"
+    lodash.isequal "^4.5.0"
+    use-resize-observer "^9.0.0"
+
 ansi-escapes@^4.2.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
@@ -1529,6 +1546,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+classnames@^2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
@@ -2187,6 +2209,11 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+eventemitter3@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
+  integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
+
 execa@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
@@ -3371,6 +3398,21 @@ lodash-es@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
+lodash.clamp@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.clamp/-/lodash.clamp-4.0.3.tgz#5c24bedeeeef0753560dc2b4cb4671f90a6ddfaa"
+  integrity sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg==
+
+lodash.debounce@^4.0.0:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+
 [email protected]:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -4534,6 +4576,13 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-resize-observer@^9.0.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c"
+  integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==
+  dependencies:
+    "@juggle/resize-observer" "^3.3.1"
+
 v8-to-istanbul@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz#b6f994b0b5d4ef255e17a0d17dc444a9f5132fa4"