Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Keavon merged 1 commit into from
Apr 3, 2026
+23 −4
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 23 additions & 4 deletions frontend/src/components/window/Workspace.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
/* └─ */ layers: 55,
} as const;

let panelSizes: Record<string, number> = PANEL_SIZES;
let panelSizes: Record<string, number> = { ...PANEL_SIZES };
let documentPanel: Panel | undefined;
let gutterResizeRestore: [number, number] | undefined = undefined;
let pointerCaptureId: number | undefined = undefined;
Expand All @@ -41,6 +41,25 @@
const editor = getContext<EditorWrapper>("editor");
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) {
const gutter = e.target;
if (!(gutter instanceof HTMLDivElement)) return;
Expand Down Expand Up @@ -157,22 +176,22 @@
/>
</LayoutRow>
{#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">
<Panel panelType="Data" tabLabels={[{ name: "Data" }]} tabActiveIndex={0} />
</LayoutRow>
{/if}
</LayoutCol>
{#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">
{#if $portfolio.propertiesPanelOpen}
<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["properties"] }} data-subdivision-name="properties">
<Panel panelType="Properties" tabLabels={[{ name: "Properties" }]} tabActiveIndex={0} />
</LayoutRow>
{/if}
{#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 $portfolio.layersPanelOpen}
<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["layers"] }} data-subdivision-name="layers">
Expand Down
Loading