mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
SnapOtter
063a2e47e2
The image editor canvas only used part of the viewport, and the right sidebar was a fixed width that could clip its controls on shorter screens. - Canvas: the canvas container used `flex-1`, but its parent wrapper in editor-page.tsx was not a flex container, so it collapsed to the Konva Stage's content height (~600px), leaving a large inert region below. Make the wrapper a flex container so the canvas fills the available area. - Rulers: ruler background/ticks were set via `ctx.fillStyle = "var(--color-card)"`, which canvas 2D cannot parse, so the default black fill remained and painted the rulers as solid black bars. Resolve the theme tokens to concrete colors from computed style at draw time (theme-aware). - Right panel: add a left-edge drag handle to resize the panel (240-480px, persisted to localStorage) and `min-h-0` so the tab content scrolls internally instead of pushing the color controls off-screen. Adds editor-layout.spec.ts (canvas-fill + resize) and a ruler-not-black regression test. All 7 targeted editor e2e tests pass.
58 lines
2.3 KiB
TypeScript
58 lines
2.3 KiB
TypeScript
import { createNewDocument, expect, test } from "./helpers";
|
|
|
|
// Regression coverage for issue #258: the editor canvas collapsed to the
|
|
// Stage's content height (leaving a large dead region), and the right panel
|
|
// was a fixed, non-resizable width.
|
|
test.describe("Editor layout (issue #258)", () => {
|
|
test.beforeEach(async ({ editorPage: page }) => {
|
|
await createNewDocument(page);
|
|
});
|
|
|
|
test("canvas viewport fills the full available editor area", async ({ editorPage: page }) => {
|
|
const result = await page.evaluate(() => {
|
|
const container = document.querySelector('[data-testid="editor-canvas"]');
|
|
const parent = container?.parentElement;
|
|
if (!container || !parent) return null;
|
|
const c = container.getBoundingClientRect();
|
|
const p = parent.getBoundingClientRect();
|
|
return {
|
|
containerH: Math.round(c.height),
|
|
parentH: Math.round(p.height),
|
|
containerW: Math.round(c.width),
|
|
parentW: Math.round(p.width),
|
|
};
|
|
});
|
|
|
|
expect(result).not.toBeNull();
|
|
// The canvas container must fill its parent in both dimensions; before the
|
|
// fix it collapsed to ~600px tall, leaving an inert region below.
|
|
expect(result?.containerH).toBe(result?.parentH);
|
|
expect(result?.containerW).toBe(result?.parentW);
|
|
expect(result?.containerH ?? 0).toBeGreaterThan(300);
|
|
});
|
|
|
|
test("right panel can be resized with the drag handle", async ({ editorPage: page }) => {
|
|
const handle = page.locator('[data-testid="right-panel-resize-handle"]');
|
|
await expect(handle).toBeVisible();
|
|
|
|
const panel = handle.locator(".."); // the panel is the handle's parent
|
|
const before = (await panel.boundingBox())?.width ?? 0;
|
|
expect(before).toBeGreaterThan(0);
|
|
|
|
const box = await handle.boundingBox();
|
|
if (!box) throw new Error("resize handle has no bounding box");
|
|
const cx = box.x + box.width / 2;
|
|
const cy = box.y + box.height / 2;
|
|
|
|
// Drag left: the panel is anchored to the right edge, so it widens.
|
|
await page.mouse.move(cx, cy);
|
|
await page.mouse.down();
|
|
await page.mouse.move(cx - 100, cy, { steps: 10 });
|
|
await page.mouse.up();
|
|
await page.waitForTimeout(300);
|
|
|
|
const after = (await panel.boundingBox())?.width ?? 0;
|
|
expect(after).toBeGreaterThan(before);
|
|
});
|
|
});
|