change: add back draggable panels

surrealdb · May 1, 2024 · 27cdaa0 · 27cdaa0
1 parent 0ccbbcb
commit 27cdaa0
Show file tree

Hide file tree

Showing 7 changed files with 242 additions and 168 deletions.
diff --git a/src/hooks/panels.ts b/src/hooks/panels.ts
@@ -0,0 +1,48 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Compute a minimum panel width based on a fixed pixel size.
+ *
+ * @param minSizePx The minimum size in pixels
+ * @returns The minimum size in percentage and a parent ref
+ */
+export function usePanelMinSize(minSizePx: number) {
+	const groupRef = useRef<HTMLDivElement|null>(null);
+	const [minSize, setMinSize] = useState(0);
+
+	useEffect(() => {
+		const panelGroup = groupRef.current;
+
+		if (!panelGroup) {
+			return;
+		}
+
+		const resizeHandles = [...panelGroup.querySelectorAll<HTMLElement>("[data-panel-resize-handle-id]")].filter(e => {
+			return e.parentNode?.parentNode === panelGroup;
+		});
+
+		const observer = new ResizeObserver(() => {
+			let width = panelGroup.offsetWidth;
+
+			for (const resizeHandle of resizeHandles) {
+				width -= resizeHandle.offsetWidth;
+			}
+
+			if (width > 0) {
+				setMinSize((minSizePx / width) * 100);
+			}
+		});
+
+		observer.observe(panelGroup);
+
+		for (const resizeHandle of resizeHandles) {
+			observer.observe(resizeHandle);
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	}, []);
+
+	return [minSize, groupRef] as const;
+}
diff --git a/src/views/explorer/ExplorerView/index.tsx b/src/views/explorer/ExplorerView/index.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { TablesPane } from "../TablesPane";
 import { CreatorDrawer } from "../CreatorDrawer";
 import { useDisclosure } from "@mantine/hooks";
-import { Button, Center, Group, Stack } from "@mantine/core";
+import { Box, Button, Center, Group, Stack } from "@mantine/core";
 import { DisconnectedEvent } from "~/util/global-events";
 import { useEventSubscription } from "~/hooks/event";
 import { useStable } from "~/hooks/stable";
@@ -13,6 +13,9 @@ import { iconExplorer, iconPlus } from "~/util/icons";
 import { useInterfaceStore } from "~/stores/interface";
 import { useViewEffect } from "~/hooks/view";
 import { syncDatabaseSchema } from "~/util/schema";
+import { Panel, PanelGroup } from "react-resizable-panels";
+import { PanelDragger } from "~/components/Pane/dragger";
+import { usePanelMinSize } from "~/hooks/panels";
 
 export function ExplorerView() {
 	const { openTableCreator } = useInterfaceStore.getState();
@@ -38,44 +41,49 @@ export function ExplorerView() {
 		syncDatabaseSchema();
 	});
 
+	const [minSize, ref] = usePanelMinSize(275);
+
 	return (
 		<>
-			<Group
-				h="100%"
-				wrap="nowrap"
-				gap="var(--surrealist-divider-size)"
-			>
-				<TablesPane
-					activeTable={activeTable}
-					onTableSelect={setActiveTable}
-					onCreateRecord={openCreator}
-				/>
-				{activeTable ? (
-					<ExplorerPane
-						activeTable={activeTable}
-						onCreateRecord={openCreator}
-					/>
-				) : (
-					<Center flex={1}>
-						<Stack
-							align="center"
-							justify="center"
-						>
-							<Icon path={iconExplorer} size={2.5} />
-							Select a table to view or edit
-							<Group>
-								<Button
-									variant="light"
-									leftSection={<Icon path={iconPlus} />}
-									onClick={openTableCreator}
+			<Box h="100%" ref={ref}>
+				<PanelGroup direction="horizontal">
+					<Panel defaultSize={minSize} minSize={minSize}>
+						<TablesPane
+							activeTable={activeTable}
+							onTableSelect={setActiveTable}
+							onCreateRecord={openCreator}
+						/>
+					</Panel>
+					<PanelDragger />
+					<Panel minSize={minSize}>
+						{activeTable ? (
+							<ExplorerPane
+								activeTable={activeTable}
+								onCreateRecord={openCreator}
+							/>
+						) : (
+							<Center h="100%">
+								<Stack
+									align="center"
+									justify="center"
 								>
-									Create table
-								</Button>
-							</Group>
-						</Stack>
-					</Center>
-				)}
-			</Group>
+									<Icon path={iconExplorer} size={2.5} />
+									Select a table to view or edit
+									<Group>
+										<Button
+											variant="light"
+											leftSection={<Icon path={iconPlus} />}
+											onClick={openTableCreator}
+										>
+											Create table
+										</Button>
+									</Group>
+								</Stack>
+							</Center>
+						)}
+					</Panel>
+				</PanelGroup>
+			</Box>
 
 			{creatorTable && (
 				<CreatorDrawer

diff --git a/src/views/explorer/TablesPane/index.tsx b/src/views/explorer/TablesPane/index.tsx
@@ -82,7 +82,6 @@ export function TablesPane({ activeTable, onTableSelect, onCreateRecord }: Table
 		<ContentPane
 			title="Tables"
 			icon={iconList}
-			w={275}
 			style={{ flexShrink: 0 }}
 			leftSection={
 				schema.length > 0 && (

diff --git a/src/views/functions/FunctionsPanel/index.tsx b/src/views/functions/FunctionsPanel/index.tsx
@@ -42,7 +42,6 @@ export function FunctionsPanel({
 		<ContentPane
 			title="Functions"
 			icon={iconList}
-			w={275}
 			style={{ flexShrink: 0 }}
 			leftSection={
 				<Badge

diff --git a/src/views/functions/FunctionsView/index.tsx b/src/views/functions/FunctionsView/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Center, Group, Modal, Stack, Text, TextInput } from "@mantine/core";
+import { Box, Button, Center, Group, Modal, Stack, Text, TextInput } from "@mantine/core";
 import { FunctionsPanel } from "../FunctionsPanel";
 import { EditorPanel } from "../EditorPanel";
 import { ChangeEvent, useRef, useState } from "react";
@@ -16,6 +16,9 @@ import { buildFunctionDefinition, syncDatabaseSchema } from "~/util/schema";
 import { useConfirmation } from "~/providers/Confirmation";
 import { useViewEffect } from "~/hooks/view";
 import { executeQuery } from "~/connection";
+import { Panel, PanelGroup } from "react-resizable-panels";
+import { PanelDragger } from "~/components/Pane/dragger";
+import { usePanelMinSize } from "~/hooks/panels";
 
 export function FunctionsView() {
 	const functions = useSchema()?.functions ?? [];
@@ -107,52 +110,55 @@ export function FunctionsView() {
 		syncDatabaseSchema();
 	});
 
+	const [minSize, ref] = usePanelMinSize(275);
+
 	return (
 		<>
-			<Group
-				wrap="nowrap"
-				gap="var(--surrealist-divider-size)"
-				h="100%"
-				mah="100%"
-				style={{ flexShrink: 1, minHeight: 0 }}
-			>
-				<FunctionsPanel
-					active={details?.name || ''}
-					functions={functions}
-					onCreate={openCreator}
-					onDelete={removeFunction}
-					onDuplicate={duplicateFunction}
-					onSelect={editFunction}
-				/>
-				{details ? (
-					<EditorPanel
-						handle={handle}
-						details={details}
-						isCreating={isCreating}
-						onChange={setDetails as any}
-						onDelete={removeFunction}
-					/>
-				) : (
-					<Center flex={1}>
-						<Stack
-							align="center"
-							justify="center"
-						>
-							<Icon path={iconFunction} size={2.5} />
-							Select a function to view or edit
-							<Group>
-								<Button
-									variant="light"
-									leftSection={<Icon path={iconPlus} />}
-									onClick={openCreator}
+			<Box h="100%" ref={ref}>
+				<PanelGroup direction="horizontal">
+					<Panel defaultSize={minSize} minSize={minSize}>
+						<FunctionsPanel
+							active={details?.name || ''}
+							functions={functions}
+							onCreate={openCreator}
+							onDelete={removeFunction}
+							onDuplicate={duplicateFunction}
+							onSelect={editFunction}
+						/>
+					</Panel>
+					<PanelDragger />
+					<Panel minSize={minSize}>
+						{details ? (
+							<EditorPanel
+								handle={handle}
+								details={details}
+								isCreating={isCreating}
+								onChange={setDetails as any}
+								onDelete={removeFunction}
+							/>
+						) : (
+							<Center h="100%">
+								<Stack
+									align="center"
+									justify="center"
 								>
-									Create function
-								</Button>
-							</Group>
-						</Stack>
-					</Center>
-				)}
-			</Group>
+									<Icon path={iconFunction} size={2.5} />
+									Select a function to view or edit
+									<Group>
+										<Button
+											variant="light"
+											leftSection={<Icon path={iconPlus} />}
+											onClick={openCreator}
+										>
+											Create function
+										</Button>
+									</Group>
+								</Stack>
+							</Center>
+						)}
+					</Panel>
+				</PanelGroup>
+			</Box>
 
 			<Modal
 				opened={showCreator}