feat: make panels resizable

decentraland · Jun 1, 2023 · b7e147f · b7e147f
1 parent 8fed9cd
commit b7e147f
Show file tree

Hide file tree

Showing 17 changed files with 154 additions and 198 deletions.
diff --git a/packages/@dcl/inspector/package-lock.json b/packages/@dcl/inspector/package-lock.json
diff --git a/packages/@dcl/inspector/package.json b/packages/@dcl/inspector/package.json
@@ -48,5 +48,8 @@
     "start": "node ./build.js --watch"
   },
   "types": "dist/tooling-entrypoint.d.ts",
-  "typings": "dist/tooling-entrypoint.d.ts"
+  "typings": "dist/tooling-entrypoint.d.ts",
+  "dependencies": {
+    "react-resizable-panels": "^0.0.48"
+  }
 }
diff --git a/packages/@dcl/inspector/src/components/App/App.css b/packages/@dcl/inspector/src/components/App/App.css
@@ -34,7 +34,7 @@ code {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100vh;
+  height: 100%;
   background: var(--main-bg-color);
 }
 
@@ -54,3 +54,16 @@ code {
   top: -30px;
   position: absolute !important;
 }
+
+.App {
+  width: 100%;
+  height: 100%;
+}
+
+.App .horizontal-handle {
+  width: 4px;
+}
+
+.App .vertical-handle {
+  height: 4px;
+}
diff --git a/packages/@dcl/inspector/src/components/App/App.tsx b/packages/@dcl/inspector/src/components/App/App.tsx
@@ -1,37 +1,62 @@
-import React from 'react'
+import React, { useRef } from 'react'
 
 import { EntityInspector } from '../EntityInspector'
 import { Hierarchy } from '../Hierarchy'
 import { Renderer } from '../Renderer'
 import { Box } from '../Box'
 import { Toolbar } from '../Toolbar'
+import { PanelGroup, Panel, PanelResizeHandle, ImperativePanelHandle } from 'react-resizable-panels'
 
 import './App.css'
-import { Resizable } from '../Resizable'
 import Assets from '../Assets'
+import { useSelectedEntity } from '../../hooks/sdk/useSelectedEntity'
+import { useWindowSize } from '../../hooks/useWindowSize'
 
 const App = () => {
+  const selectedEntity = useSelectedEntity()
+
+  const { height } = useWindowSize()
+
+  // Footer's height is 36 pixels, so we need to calculate the percentage of the screen that it takes to pass as the minSize prop for the Panel
+  const footerMin = (50 / height!) * 100
+
+  console.log(footerMin)
+
   return (
-    <Resizable type="horizontal" min={300} initial={300}>
-      <Box>
-        <div
-          className="sidebar"
-          data-vscode-context='{"webviewSection": "sidebar", "preventDefaultContextMenuItems": true}'
-        >
-          <Resizable type="vertical" min={130} initial={130} max={730}>
-            <Hierarchy />
-            <EntityInspector />
-          </Resizable>
-        </div>
-      </Box>
-      <div className="editor">
-        <Box className="composite-renderer">
-          <Toolbar />
-          <Renderer />
-        </Box>
-        <Assets />
-      </div>
-    </Resizable>
+    <div className="App">
+      <PanelGroup direction="vertical" autoSaveId="vertical">
+        <Panel>
+          <PanelGroup direction="horizontal" autoSaveId="horizontal">
+            <Panel defaultSize={20} minSize={12} order={1}>
+              <Box className="composite-inspector">
+                <Hierarchy />
+              </Box>
+            </Panel>
+            <PanelResizeHandle className="horizontal-handle" />
+            <Panel minSize={30} order={2}>
+              <Box className="composite-renderer">
+                <Toolbar />
+                <Renderer />
+              </Box>
+            </Panel>
+            <PanelResizeHandle className="horizontal-handle" />
+            {selectedEntity !== null && (
+              <Panel defaultSize={20} minSize={15} order={3}>
+                <Box className="entity-inspector">
+                  <EntityInspector />
+                </Box>
+              </Panel>
+            )}
+          </PanelGroup>
+        </Panel>
+        <PanelResizeHandle className="vertical-handle" />
+        <Panel minSize={footerMin} defaultSize={30}>
+          <Box className="composite-renderer">
+            <Assets />
+          </Box>
+        </Panel>
+      </PanelGroup>
+    </div>
   )
 }
 

diff --git a/packages/@dcl/inspector/src/components/Assets/Assets.css b/packages/@dcl/inspector/src/components/Assets/Assets.css
@@ -2,6 +2,9 @@
   display: flex;
   flex-direction: column;
   flex: none;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
 
 .Assets .Assets-buttons span {
@@ -62,5 +65,5 @@
 
 .Assets .Assets-content {
   background: var(--tree-bg-color) !important;
-  height: 250px !important;
-}
+  height: calc(100% - 36px);
+}
diff --git a/packages/@dcl/inspector/src/components/Assets/Assets.tsx b/packages/@dcl/inspector/src/components/Assets/Assets.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useState } from 'react'
 import cx from 'classnames'
 
 import { AssetsTab } from './types'
-import { Box } from '../Box'
 import { FolderOpen } from '../Icons/Folder'
 import { MdImageSearch } from 'react-icons/md'
 import { HiOutlinePlus } from 'react-icons/hi'
@@ -16,11 +15,11 @@ import './Assets.css'
 
 function Assets() {
   const [catalog] = useCatalog()
-  const [tab, setTab] = useState<AssetsTab | undefined>(undefined)
+  const [tab, setTab] = useState<AssetsTab>(AssetsTab.FileSystem)
 
   const handleTabClick = useCallback(
     (value: AssetsTab) => () => {
-      setTab(tab === value ? undefined : value)
+      setTab(value)
     },
     [tab]
   )
@@ -31,7 +30,7 @@ function Assets() {
   }, [])
 
   return (
-    <Box className="Assets">
+    <div className="Assets">
       <div className="Assets-buttons">
         <div onClick={handleTabClick(AssetsTab.FileSystem)}>
           <div className={cx({ underlined: tab === AssetsTab.FileSystem })}>
@@ -51,14 +50,12 @@ function Assets() {
           </div>
         </div>
       </div>
-      {tab && (
-        <div className="Assets-content">
-          {tab === AssetsTab.AssetsPack && catalog && <AssetsCatalog value={catalog} />}
-          {tab === AssetsTab.FileSystem && <ProjectAssetExplorer onImportAsset={handleTabClick(AssetsTab.Import)} />}
-          {tab === AssetsTab.Import && <ImportAsset onSave={handleSave} />}
-        </div>
-      )}
-    </Box>
+      <div className="Assets-content">
+        {tab === AssetsTab.AssetsPack && catalog && <AssetsCatalog value={catalog} />}
+        {tab === AssetsTab.FileSystem && <ProjectAssetExplorer onImportAsset={handleTabClick(AssetsTab.Import)} />}
+        {tab === AssetsTab.Import && <ImportAsset onSave={handleSave} />}
+      </div>
+    </div>
   )
 }
 

diff --git a/packages/@dcl/inspector/src/components/Box/Box.css b/packages/@dcl/inspector/src/components/Box/Box.css
@@ -1,3 +1,7 @@
+.Box {
+  height: calc(100% - 4.8px);
+}
+
 .Box.with-border {
   margin: 2.4px;
   padding: 3.2px;
@@ -14,4 +18,5 @@
   background: var(--main-bg-color);
   width: 100%;
   height: 100%;
+  position: relative;
 }
diff --git a/packages/@dcl/inspector/src/components/Container/Container.css b/packages/@dcl/inspector/src/components/Container/Container.css
@@ -2,11 +2,9 @@
   display: flex;
   flex-direction: column;
   padding: 12px;
-  background-color: var(--modal);
-  border-radius: 8px;
-  margin: 12px;
   height: 100%;
   overflow-y: auto;
+  border-bottom: 1px solid var(--border-gray);
 }
 
 .Container.hover {
@@ -27,10 +25,10 @@
   margin-right: 4px;
 }
 
-.Container > span {
+.Container>span {
   margin: 0px 0px 4px 0px;
   color: var(--text);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
-}
+}
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/EntityInspector.css b/packages/@dcl/inspector/src/components/EntityInspector/EntityInspector.css
@@ -0,0 +1,6 @@
+.EntityInspector {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--tree-bg-color);
+}
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/EntityInspector.tsx b/packages/@dcl/inspector/src/components/EntityInspector/EntityInspector.tsx
@@ -3,6 +3,7 @@ import { useSelectedEntity } from '../../hooks/sdk/useSelectedEntity'
 import { SceneInspector } from './SceneInspector'
 import { TransformInspector } from './TransformInspector'
 import { GltfInspector } from './GltfInspector'
+import './EntityInspector.css'
 
 export const EntityInspector: React.FC = () => {
   const entity = useSelectedEntity()

diff --git a/packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.css b/packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.css
@@ -0,0 +1,4 @@
+.Hierarchy {
+  height: 100%;
+  background: var(--tree-bg-color);
+}