feat(layerSidebar): resizable sidebar

hpcreery · Nov 21, 2024 · a2780fc · a2780fc
1 parent e331437
commit a2780fc
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
     "ndarray": "^1.0.19",
     "nearley": "^2.20.1",
     "on-change": "^5.0.1",
+    "re-resizable": "^6.10.1",
     "react-color": "^2.19.3",
     "regl": "^2.1.0",
     "regl-stats-widget": "^0.0.1",

diff --git a/src/renderer/src/components/layer-sidebar/LayersSidebar.tsx b/src/renderer/src/components/layer-sidebar/LayersSidebar.tsx
@@ -15,6 +15,10 @@ import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, us
 import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable"
 import { restrictToVerticalAxis, restrictToParentElement } from "@dnd-kit/modifiers"
 
+import { Resizable } from 're-resizable';
+
+import { useLocalStorage } from "@mantine/hooks"
+
 const UID = (): string => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
 
 interface SidebarProps {}
@@ -32,6 +36,10 @@ export default function LayerSidebar(_props: SidebarProps): JSX.Element | null {
   const [deleteConfirmModalOpen, setDeleteConfirmModalOpen] = useState<boolean>(false)
   const { showContextMenu } = useContextMenu()
   const theme = useMantineTheme()
+  const [layerSidebarWidth, setLayerSidebarWidth] = useLocalStorage<number>({
+    key: "layerSidebarWidth",
+    defaultValue: 220,
+  })
 
   function registerLayers(rendererLayers: LayerInfo[], loadingLayers: { name: string; id: string }[]): void {
     const newLayers: UploadFile[] = []
@@ -241,14 +249,43 @@ export default function LayerSidebar(_props: SidebarProps): JSX.Element | null {
           </div>
         </Group>
       </Dropzone.FullScreen>
+      <Resizable
+        defaultSize={{
+          width: 220,
+          height: "100%",
+        }}
+        size={{
+          width: layerSidebarWidth,
+          height: "100%",
+        }}
+        onResizeStop={(_e, _direction, _ref, d) => {
+          setLayerSidebarWidth(layerSidebarWidth + d.width)
+        }}
+        minWidth={200}
+        maxWidth={500}
+        enable={{
+          top: false,
+          right: true,
+          bottom: false,
+          left: false,
+          topRight: false,
+          bottomRight: false,
+          bottomLeft: false,
+          topLeft: false,
+        }}
+        style={{
+          pointerEvents: "all",
+        }}
+>
       <Card
         onContextMenu={showContextMenu(contextItems)}
         radius="md"
         withBorder
         style={{
-          width: 220,
+          width: '-webkit-fill-available',
           height: "-webkit-fill-available",
           margin: 10,
+          marginRight: 0,
           pointerEvents: "all",
           overflowY: "auto",
           overflowX: "hidden",
@@ -300,6 +337,7 @@ export default function LayerSidebar(_props: SidebarProps): JSX.Element | null {
           )} */}
         </ScrollArea>
       </Card>
+      </Resizable>
     </div>
   )
 }
diff --git a/src/renderer/src/renderer/engine.ts b/src/renderer/src/renderer/engine.ts
@@ -669,25 +669,13 @@ export class RenderEngineBackend {
       force: true,
     })
   }
-  // export function arrayMove<T>(array: T[], from: number, to: number): T[] {
-  //   const newArray = array.slice();
-  //   newArray.splice(
-  //     to < 0 ? newArray.length + to : to,
-  //     0,
-  //     newArray.splice(from, 1)[0]
-  //   );
-
-  //   return newArray;
-  // }
 
   public moveLayer(from: number, to: number): void {
     this.layers.splice(
       to < 0 ? this.layers.length + to : to,
       0,
       this.layers.splice(from, 1)[0]
     )
-    console.log(this.layers.map((layer) => layer.name))
-
   }
 
   public setLayerProps(uid: string, props: Partial<Omit<LayerRendererProps, "regl">>): void {