NilsBriggen/ttrpg_manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

P20 fix: crisp device-resolution map rendering + live draw previews

Browse Source 
Render the map on a single viewport-sized canvas with a camera transform at
devicePixelRatio (image, fog, drawings, overlay) and draw the grid as crisp 1px
device-space lines — instead of CSS-scaling a natural-resolution bitmap, which
blurred the grid/fog/text at any zoom. Tokens now position in screen space so
their labels stay sharp too. Add live tool feedback via a 'hover' phase: polygon
shows its outline + vertices + rubber-band + fill preview, the brush shows its
footprint, and circle/square AoE preview under the cursor.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nils
2026-06-08 12:56:28 +02:00
parent 360d9ff842
commit 2879059ba5
3 changed files with 236 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/maps.spec.ts
+14 -15
View File
@@ -46,23 +46,22 @@ test('maps: zoom controls scale the canvas and fit resets', async ({ page }) =>
await page.getByRole('link', { name: 'Maps' }).click();
await page.locator('input[type="file"]').setInputFiles('public/pwa-512x512.png');
const world = page.getByTestId('map-world');
await expect(world).toBeVisible();
// World layer is sized to the image's natural pixels (not shrunk to a cap).
await expect(world).toHaveCSS('width', '512px');
const scaleOf = async () => {
const t = await world.evaluate((el) => getComputedStyle(el).transform);
const m = /matrix\(([^,]+)/.exec(t);
return m ? Number(m[1]) : 1;
};
const before = await scaleOf();
await page.getByRole('button', { name: 'Zoom in' }).click();
await page.getByRole('button', { name: 'Zoom in' }).click();
expect(await scaleOf()).toBeGreaterThan(before);
const viewport = page.getByTestId('map-viewport');
await expect(viewport).toBeVisible();
const scaleOf = async () => Number(await viewport.getAttribute('data-zoom'));
// Let the initial fit settle, then zooming in must increase the zoom…
await page.getByRole('button', { name: 'Fit map to view' }).click();
expect(await scaleOf()).toBeCloseTo(before, 1);
const fitZoom = await scaleOf();
expect(fitZoom).toBeGreaterThan(0);
await page.getByRole('button', { name: 'Zoom in' }).click();
await page.getByRole('button', { name: 'Zoom in' }).click();
const zoomedIn = await scaleOf();
expect(zoomedIn).toBeGreaterThan(fitZoom);
// …and Fit brings it back to the fit value.
await page.getByRole('button', { name: 'Fit map to view' }).click();
expect(await scaleOf()).toBeCloseTo(fitZoom, 5);
});
test('maps: place a party token from the palette', async ({ page }) => {