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>
35 lines
1.2 KiB
TypeScript
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 });
|
|
});
|
|
});
|