diff --git a/site/e2e/touch.spec.ts b/site/e2e/touch.spec.ts index dcc3b20..9283f87 100644 --- a/site/e2e/touch.spec.ts +++ b/site/e2e/touch.spec.ts @@ -46,6 +46,9 @@ let errors: string[] = []; test.beforeEach(async ({ page }) => { errors = []; page.on("pageerror", (e) => errors.push(String(e))); + page.on("console", (m) => m.type() === "error" && errors.push(m.text())); + page.on("requestfailed", (r) => errors.push(`${r.url()} ${r.failure()?.errorText}`)); + page.on("response", (r) => r.status() >= 400 && errors.push(`${r.url()} ${r.status()}`)); await page.goto("/"); await expect(page.locator(".model .hit-face:not(.ground)").first()).toBeAttached(); }); @@ -141,3 +144,23 @@ test("holding Enter sinks the focused building until release", async ({ page }) await page.keyboard.up("Enter"); await expect(page.locator(".block.pressed")).toHaveCount(0); }); + +test("a focused name follows the model when the window narrows", async ({ page }) => { + await page.setViewportSize({ width: 760, height: 1000 }); + await page.locator(".doors a").nth(3).focus(); + await page.setViewportSize({ width: 390, height: 844 }); + await expect + .poll(() => page.evaluate(() => document.documentElement.scrollWidth - innerWidth)) + .toBe(0); + const where = () => page.evaluate(() => { + const name = document.querySelector(".tour .caption.shown")!.getBoundingClientRect(); + const tops = [...document.querySelectorAll('.block[data-part="ElyPDF"] .outline')].map((o) => o.getBoundingClientRect()); + const left = Math.min(...tops.map((r) => r.left)); + const right = Math.max(...tops.map((r) => r.right)); + return { centre: name.left + name.width / 2, left, right, inside: name.left >= 0 && name.right <= innerWidth }; + }); + await expect.poll(async () => (await where()).inside).toBe(true); + const placed = await where(); + expect(placed.centre).toBeGreaterThanOrEqual(placed.left); + expect(placed.centre).toBeLessThanOrEqual(placed.right); +}); diff --git a/site/src/touch.ts b/site/src/touch.ts index ff332b2..b617fca 100644 --- a/site/src/touch.ts +++ b/site/src/touch.ts @@ -23,6 +23,7 @@ export function touch(host: HTMLElement, svg: SVGSVGElement, parts: Map place(caption, host, svg, blocks); const show = () => { const up = state.hover || state.focus; for (const b of blocks) { @@ -30,7 +31,10 @@ export function touch(host: HTMLElement, svg: SVGSVGElement, parts: Map) => { Object.assign(state, change); diff --git a/site/src/tour.ts b/site/src/tour.ts index 8a36d2a..1846db5 100644 --- a/site/src/tour.ts +++ b/site/src/tour.ts @@ -319,6 +319,7 @@ export function tour(hero: HTMLElement): { section: HTMLElement; host: HTMLEleme const tx = cam.ax - cam.s * (cam.cx - origin[0]); const ty = cam.ay - cam.s * (cam.cy - origin[1]); world.style.transform = `matrix(${cam.s}, 0, 0, ${cam.s}, ${tx}, ${ty})`; + host.dispatchEvent(new Event("moved")); const fade = still() ? (p < 0.5 ? 1 : 0) : Math.max(0, 1 - p / HOLD); hero.style.opacity = String(fade); hero.style.visibility = fade > 0 ? "" : "hidden";