Float a document's tab in a window of its own, and dock it (#371)
game-maker / gate (push) Successful in 3m54s
game-maker / suite (push) Successful in 15m17s

The Parametric EQ has a tab of its own since #370, but Play is in the
sound FX's tab. A tab that can float keeps both in view. There is one
editor per kind, so the kind's pane is lent to the window and given
back on Dock, the way fullscreen moves the game view.

- A right-click on a document's tab opens a menu with Float and Close.
  `DocumentTab` passes the press to `TabStrip`'s new `onMenu`.
- `FloatWindow` sits on the overlay. Its title bar moves it, its lower
  right corner sizes it, Dock and the x close it. A press brings it to
  the front.
- `floating.ts` is the pure part: where a window opens, held whole on
  the screen, sized down to 320 x 200. Nothing of it is remembered.
- One window per kind. Another document of that kind opens there and
  closes the one it had. Its tab, if it had one, leaves the row.
- When the row showed the kind, it shows the nearest document whose
  kind is not in a window, else the scene (`neighbourOf`).
- Delete, Copy and Paste go to the window pressed last, and back to
  the tab showing after a press in the editor (`keyTab`).
- Previews tick and redraw for a kind in a window as for the tab
  showing. Fullscreen hides the windows. Loading a project or signing
  out closes them.
- Only documents float, Scene and Game stay in the row.
- Hooks: `floatWindows`, `floatDocument`, `keyTarget`.

Tests:
- Unit documents: 16 green, 5 new. Counter-check: `neighbourOf`
  without the window check turns its test red.
- e2e 44 (melektaus-atx, after steps 1-12 and 37): ALL PASSED,
  505 checks in the chain, 6 new for float, move, size, another
  texture, keys, Dock and x.
- Gate (melektaus-atx): CHECK EXIT 0, 274 files, 4236 tests.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
adminandClaude Opus 5.5 committed 2026-10-09 14:27:12 +02:00
1 parent 9166d4a56f
commit 76f5097a38
9 files changed
+642 -34

No files matched your search

+44
View File
@@ -0,0 +1,44 @@
/**
* Where a tab's window sits (#371). Nothing of it is kept: a window opens in the middle of the
* screen every time, and is held on the screen while it is moved, sized, or the page shrinks.
*/
export interface WindowBox {
x: number;
y: number;
w: number;
h: number;
}
/** Below this a tab's controls no longer fit in a row, and the title bar loses its buttons. */
export const MIN_WINDOW_WIDTH = 320;
export const MIN_WINDOW_HEIGHT = 200;
/** How far each further window opens down and to the right, so it does not hide the one before. */
export const WINDOW_STEP = 24;
/** Half the screen's width and 60 % of its height, in the middle; the `count`-th one a step further. */
export function openingBox(screenW: number, screenH: number, count: number): WindowBox {
const w = Math.min(screenW, Math.max(MIN_WINDOW_WIDTH, Math.round(screenW * 0.5)));
const h = Math.min(screenH, Math.max(MIN_WINDOW_HEIGHT, Math.round(screenH * 0.6)));
const step = count * WINDOW_STEP;
return onScreen(
{ x: Math.round((screenW - w) / 2) + step, y: Math.round((screenH - h) / 2) + step, w, h },
screenW,
screenH,
);
}
/** `box` whole on the screen: no larger than it, and moved in where it sticks out. */
export function onScreen(box: WindowBox, screenW: number, screenH: number): WindowBox {
const w = Math.max(Math.min(box.w, screenW), Math.min(MIN_WINDOW_WIDTH, screenW));
const h = Math.max(Math.min(box.h, screenH), Math.min(MIN_WINDOW_HEIGHT, screenH));
const x = Math.max(0, Math.min(box.x, screenW - w));
const y = Math.max(0, Math.min(box.y, screenH - h));
return { x: Math.round(x), y: Math.round(y), w: Math.round(w), h: Math.round(h) };
}
/** `box` with its lower right corner pulled by `dx`, `dy`: at least the minimum, at most to the screen's edge. */
export function sized(box: WindowBox, dx: number, dy: number, screenW: number, screenH: number): WindowBox {
const w = Math.max(MIN_WINDOW_WIDTH, Math.min(box.w + dx, screenW - box.x));
const h = Math.max(MIN_WINDOW_HEIGHT, Math.min(box.h + dy, screenH - box.y));
return { ...box, w: Math.round(w), h: Math.round(h) };
}