Keep where each divider was dragged to across a reload
game-maker / gate (push) Canceled after 2m35s
game-maker / suite (push) Canceled after 2m40s

A panel dragged wider was back at its first size after every reload.
The sizes are now kept in the browser, next to the folded groups.

- editor/panelSizes.ts holds one entry in localStorage,
  game-maker.panel-sizes: a name per divider and its width, height
  or share.
- A panel reads its size once when it is built, held to the bounds
  its divider keeps today. Every drag writes the new size.
- Kept are the columns left and right of the centre, the console,
  the split of the left column, the tilemap panel, the preview of
  the Shader, Particles and Pixel art tabs, each under its own name,
  and the split of the user management.
- The sizes belong to the browser, not to the project. They hold for
  every project opened there.
- A browser that refuses the storage, or holds rubbish under the
  entry, starts with the sizes the editor comes with.

Tests:
- Gate on melektaus-atx: 219 files, 3400 tests, CHECK EXIT 0.
- Seven new unit tests in tests/editor/panel-sizes.test.ts. All
  five counter-probes bite.
- Smokes on melektaus-atx: 24, 19 and 21, all pass.
- One new e2e check in module 48: the left column dragged 40 px
  wider is as wide after a reload, and dragged back after.
- Full suite on melektaus-atx: 1692 checks, all pass. It ran before
  the fix to the animation players of the commit before last.
- Browser counter-probe: without the write to the browser exactly
  that check fails.
- Only the left column is measured across a reload. The other
  dividers go the same way and have no check of their own.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
adminandClaude Opus 5.5 committed 2026-10-02 23:24:21 +02:00
1 parent 8f9d373d7b
commit ca5b2db449
10 files changed
+201 -12

No files matched your search

+14 -5
View File
@@ -52,6 +52,7 @@ import { Inspector } from './inspector/Inspector';
import { valuesTitle, VariablesEditor } from './variables/VariablesEditor';
import { valuesKey } from './variables/target';
import { pickView } from './objectPick';
import { keepPanelSize, panelSize } from './panelSizes';
import { AnimationEditor } from './animation/AnimationEditor';
import { TileEditor } from './tile/TileEditor';
import { AssetPanel } from './panels/AssetPanel';
@@ -188,6 +189,8 @@ const MIN_CONSOLE_HEIGHT = Panel.HEADER_HEIGHT;
const MAX_CONSOLE_HEIGHT = 600;
// Either panel of the left column keeps at least its header, for the same reason as the console.
const MIN_PANEL_HEIGHT = Panel.HEADER_HEIGHT;
// What a share read back from the browser is held to before the column has a height to measure by.
const MIN_KEPT_SHARE = 0.03;
/**
* Composes toolbar, panels, viewports and graph editor into the one application that edits and
@@ -260,13 +263,14 @@ export class Editor implements PlayHost {
private readonly cleanups: (() => void)[] = [];
private readonly autosave: { flush: () => Promise<void>; stop: () => void };
private disposed = false;
private leftWidth = 250;
private rightWidth = 350;
// Each starts where its divider was left in this browser (`panelSizes.ts`), else at the number here.
private leftWidth = panelSize('left', 250, MIN_LEFT_WIDTH, MAX_LEFT_WIDTH);
private rightWidth = panelSize('right', 350, MIN_RIGHT_WIDTH, MAX_RIGHT_WIDTH);
/** Starts out as wide as the inspector, then goes its own way. */
private tilemapWidth = this.rightWidth;
private consoleHeight = 300;
private tilemapWidth = panelSize('tilemap', this.rightWidth, MIN_RIGHT_WIDTH, MAX_RIGHT_WIDTH);
private consoleHeight = panelSize('console', 300, MIN_CONSOLE_HEIGHT, MAX_CONSOLE_HEIGHT);
/** The asset panel's part of the left column's height; the scene objects get the rest. */
private assetsShare = 0.5;
private assetsShare = panelSize('assets-share', 0.5, MIN_KEPT_SHARE, 1 - MIN_KEPT_SHARE);
constructor(
app: Application,
@@ -366,6 +370,7 @@ export class Editor implements PlayHost {
this.assets.flex = this.assetsShare;
this.hierarchy.flex = 1 - this.assetsShare;
this.leftColumn.relayout();
keepPanelSize('assets-share', this.assetsShare);
};
this.centre = new VStack();
@@ -384,6 +389,7 @@ export class Editor implements PlayHost {
this.tilemapWidth = clamp(this.tilemapWidth - delta, MIN_RIGHT_WIDTH, MAX_RIGHT_WIDTH);
this.tilemapPanel.minWidth = this.tilemapWidth;
this.sceneRow.relayout();
keepPanelSize('tilemap', this.tilemapWidth);
};
this.tilemapPanel.onTargetChange = () => this.syncTilemapPanel();
this.syncTilemapPanel();
@@ -431,6 +437,7 @@ export class Editor implements PlayHost {
this.consoleHeight = clamp(this.consoleHeight - delta, MIN_CONSOLE_HEIGHT, MAX_CONSOLE_HEIGHT);
this.console.minHeight = this.consoleHeight;
this.centre.relayout();
keepPanelSize('console', this.consoleHeight);
};
this.leftColumn.minWidth = this.leftWidth;
@@ -439,11 +446,13 @@ export class Editor implements PlayHost {
this.leftWidth = clamp(this.leftWidth + delta, MIN_LEFT_WIDTH, MAX_LEFT_WIDTH);
this.leftColumn.minWidth = this.leftWidth;
this.workspace.relayout();
keepPanelSize('left', this.leftWidth);
};
this.rightSplitter.onDrag = (delta) => {
this.rightWidth = clamp(this.rightWidth - delta, MIN_RIGHT_WIDTH, MAX_RIGHT_WIDTH);
this.inspector.minWidth = this.rightWidth;
this.workspace.relayout();
keepPanelSize('right', this.rightWidth);
};
this.workspace.add(this.leftColumn);
this.workspace.add(this.leftSplitter);