diff --git a/public/demo.png b/images/demo.png similarity index 100% rename from public/demo.png rename to images/demo.png diff --git a/package.json b/package.json index 64962c6..5540af2 100644 --- 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 index aebdde6..d62ca06 100644 --- 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 index 7648925..f01097d 100644 --- 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([]); @@ -161,66 +163,75 @@ const Panel: React.FC = () => { return (
-
-
- - - -
- -
-
- - setSearchText(e.target.value)} - /> -
-
- -
-
- {trees.map((item, index) => ( -
- { - 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 + + +
+
+ + + +
+ +
+
+ + setSearchText(e.target.value)} + /> +
+
+ +
+
+ {trees.map((item, index) => ( +
+ { + 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 + }} + /> +
+ ))}
- ))} -
-
-
- -
+
+ + +
+ +
+
+
); }; diff --git a/yarn.lock b/yarn.lock index 6a79531..4b468e1 100644 --- 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/fs.scandir@2.1.5": 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== + lodash.memoize@4.x: 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"