jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow double-clicking a gutter between panels to reset its sizing to default (#4000) 

Support double-clicking to reset inter-panel gutter sizing
This commit is contained in:
Keavon Chambers 2026-04-03 14:43:25 -07:00 committed by GitHub
parent b52bf7b7d4
commit 7077e877f9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/window/Workspace.svelte
View File

@ -17,7 +17,7 @@
/* └─ */ layers: 55, /* └─ */ layers: 55,
} as const; } as const;
let panelSizes: Record<string, number> = PANEL_SIZES; let panelSizes: Record<string, number> = { ...PANEL_SIZES };
let documentPanel: Panel | undefined; let documentPanel: Panel | undefined;
let gutterResizeRestore: [number, number] | undefined = undefined; let gutterResizeRestore: [number, number] | undefined = undefined;
let pointerCaptureId: number | undefined = undefined; let pointerCaptureId: number | undefined = undefined;
@ -41,6 +41,25 @@
const editor = getContext<EditorWrapper>("editor"); const editor = getContext<EditorWrapper>("editor");
const portfolio = getContext<PortfolioStore>("portfolio"); const portfolio = getContext<PortfolioStore>("portfolio");
function isPanelName(name: string): name is keyof typeof PANEL_SIZES {
return name in PANEL_SIZES;
}
function resetPanelSizes(e: MouseEvent) {
const gutter = e.currentTarget;
if (!(gutter instanceof HTMLDivElement)) return;
const nextSibling = gutter.nextElementSibling;
const prevSibling = gutter.previousElementSibling;
if (!(nextSibling instanceof HTMLDivElement) || !(prevSibling instanceof HTMLDivElement)) return;
const nextSiblingName = nextSibling.getAttribute("data-subdivision-name") || undefined;
const prevSiblingName = prevSibling.getAttribute("data-subdivision-name") || undefined;
if (!nextSiblingName || !prevSiblingName || !isPanelName(nextSiblingName) || !isPanelName(prevSiblingName)) return;
panelSizes = { ...panelSizes, [nextSiblingName]: PANEL_SIZES[nextSiblingName], [prevSiblingName]: PANEL_SIZES[prevSiblingName] };
}
function resizePanel(e: PointerEvent) { function resizePanel(e: PointerEvent) {
const gutter = e.target; const gutter = e.target;
if (!(gutter instanceof HTMLDivElement)) return; if (!(gutter instanceof HTMLDivElement)) return;
@ -157,14 +176,14 @@
/> />
</LayoutRow> </LayoutRow>
{#if $portfolio.dataPanelOpen} {#if $portfolio.dataPanelOpen}
<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={(e) => resizePanel(e)} /> <LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={(e) => resizePanel(e)} on:dblclick={(e) => resetPanelSizes(e)} />
<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["data"] }} data-subdivision-name="data"> <LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["data"] }} data-subdivision-name="data">
<Panel panelType="Data" tabLabels={[{ name: "Data" }]} tabActiveIndex={0} /> <Panel panelType="Data" tabLabels={[{ name: "Data" }]} tabActiveIndex={0} />
</LayoutRow> </LayoutRow>
{/if} {/if}
</LayoutCol> </LayoutCol>
{#if $portfolio.propertiesPanelOpen || $portfolio.layersPanelOpen} {#if $portfolio.propertiesPanelOpen || $portfolio.layersPanelOpen}
<LayoutCol class="workspace-grid-resize-gutter" data-gutter-horizontal on:pointerdown={(e) => resizePanel(e)} /> <LayoutCol class="workspace-grid-resize-gutter" data-gutter-horizontal on:pointerdown={(e) => resizePanel(e)} on:dblclick={(e) => resetPanelSizes(e)} />
<LayoutCol class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["details"] }} data-subdivision-name="details"> <LayoutCol class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["details"] }} data-subdivision-name="details">
{#if $portfolio.propertiesPanelOpen} {#if $portfolio.propertiesPanelOpen}
<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["properties"] }} data-subdivision-name="properties"> <LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["properties"] }} data-subdivision-name="properties">
@ -172,7 +191,7 @@
</LayoutRow> </LayoutRow>
{/if} {/if}
{#if $portfolio.propertiesPanelOpen && $portfolio.layersPanelOpen} {#if $portfolio.propertiesPanelOpen && $portfolio.layersPanelOpen}
<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={(e) => resizePanel(e)} /> <LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={(e) => resizePanel(e)} on:dblclick={(e) => resetPanelSizes(e)} />
{/if} {/if}
{#if $portfolio.layersPanelOpen} {#if $portfolio.layersPanelOpen}
<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["layers"] }} data-subdivision-name="layers"> <LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["layers"] }} data-subdivision-name="layers">