Files
feuerwerk/tests/ui/page-size.test.ts
adminandClaude Opus 5.5 846a8b70b3 Let ?w=&h= fix the editor canvas to a set size
A recording of the editor is as large as its canvas, and so far the
canvas always followed the window. With ?w=1920&h=1080 the editor is
laid out at exactly that size in CSS pixels, whatever the window.

- src/ui/pageSize.ts reads w and h (both needed, 200 to 8192 each) and
  works out how the canvas fits the window.
- A smaller window shows the canvas shrunk to fit, centred, with the
  same aspect. A larger one shows it 1:1, centred on a dark page.
- Clicks still land right, since Pixi maps them over the canvas's
  on-screen box. Switching projects keeps w and h in the URL.
- The pointer drawn into an editor recording now scales against the
  layout size, so a shrunk canvas still records a full-size pointer.

Tests:
- Unit page-size: 5 new, green.
- e2e 62d: ?w=1600&h=900 in a 960x720 window gives a 1600x900 canvas
  shown at 960x540, y 90, and a click on the menu button opens it.
  Red without the shrinking.
- Gate on melektaus-atx: 304 files, 4691 tests green.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-12 14:44:28 +02:00

35 lines
1.2 KiB
TypeScript

import { describe, expect, it } from 'vitest';
import { fixedPageSize, placePage } from '../../src/ui/pageSize';
const size = (search: string) => fixedPageSize(new URLSearchParams(search));
describe('fixedPageSize', () => {
it('reads ?w=&h=', () => {
expect(size('?w=1920&h=1080')).toEqual({ w: 1920, h: 1080 });
expect(size('?project=abc&h=720&w=1280')).toEqual({ w: 1280, h: 720 });
});
it('needs both sides as whole numbers', () => {
expect(size('')).toBeNull();
expect(size('?w=1920')).toBeNull();
expect(size('?w=1920&h=')).toBeNull();
expect(size('?w=1920&h=10.5')).toBeNull();
expect(size('?w=-5&h=1080')).toBeNull();
expect(size('?w=abc&h=1080')).toBeNull();
});
it('clamps a side to 200…8192', () => {
expect(size('?w=50&h=100000')).toEqual({ w: 200, h: 8192 });
});
});
describe('placePage', () => {
it('centres a canvas smaller than the window at full size', () => {
expect(placePage({ w: 1920, h: 1080 }, { w: 2560, h: 1440 })).toEqual({ x: 320, y: 180, scale: 1 });
});
it('shrinks a canvas larger than the window to fit, keeping its aspect', () => {
expect(placePage({ w: 1920, h: 1080 }, { w: 960, h: 900 })).toEqual({ x: 0, y: 180, scale: 0.5 });
});
});