From 8ae7c45e9a4699feecc681dd41469dc15bdba756 Mon Sep 17 00:00:00 2001 From: Lectom Date: Wed, 29 Jul 2026 10:14:09 +0900 Subject: [PATCH] fix: close final viewer integration gaps (#5) --- apps/viewer-2d-sample/package.json | 3 + apps/viewer-2d-sample/src/main.ts | 17 ++-- apps/viewer-3d/src/viewer/ThreeDViewer.ts | 8 ++ packages/viewer2d/src/index.ts | 18 +++- playwright.config.ts | 6 ++ tests/e2e/viewer2d.lifecycle.spec.ts | 113 +++++++++++++++++++++- tests/e2e/viewer2d.subpath.spec.ts | 31 ++++++ tests/viewer2d.contract.test.ts | 24 +++-- tools/run-e2e.mjs | 4 + 9 files changed, 196 insertions(+), 28 deletions(-) create mode 100644 tests/e2e/viewer2d.subpath.spec.ts diff --git a/apps/viewer-2d-sample/package.json b/apps/viewer-2d-sample/package.json index 827cab0..80d2606 100644 --- a/apps/viewer-2d-sample/package.json +++ b/apps/viewer-2d-sample/package.json @@ -6,7 +6,10 @@ "scripts": { "dev": "vite --host 127.0.0.1 --port 5173 --strictPort", "build": "tsc --noEmit && vite build", + "build:subpath:e2e": "vite build --base=/viewer-2d/ --outDir=dist-subpath", "preview": "vite preview", + "preview:subpath:e2e": "vite preview --base=/viewer-2d/ --outDir=dist-subpath --host 127.0.0.1 --port 45173 --strictPort", + "serve:subpath:e2e": "npm run build:subpath:e2e && npm run preview:subpath:e2e", "typecheck": "tsc --noEmit" }, "dependencies": { diff --git a/apps/viewer-2d-sample/src/main.ts b/apps/viewer-2d-sample/src/main.ts index 7116099..8d2c3aa 100644 --- a/apps/viewer-2d-sample/src/main.ts +++ b/apps/viewer-2d-sample/src/main.ts @@ -23,8 +23,8 @@ import { createViewer2D, isCad2DFile, - parseCad, - type CadParseResult, + loadCad, + type CadLoadSummary, } from '@hmwebviewer/viewer2d'; import { assertCadByteLength, @@ -71,11 +71,8 @@ viewer.onSelect((entity: unknown) => { }); // ── ④ 파서 조합 ───────────────────────────────────────────────── -async function loadAndRender(buf: ArrayBuffer, name: string): Promise { - const result = await parseCad({ data: buf, name }); - viewer.load(result); - viewer.resize(); - return result; +async function loadAndRender(buf: ArrayBuffer, name: string): Promise { + return loadCad(viewer, { data: buf, name }); } async function loadUrl(url: string, nameHint?: string) { @@ -117,13 +114,13 @@ function fillLayers() { } } -async function afterLoad(name: string, result: CadParseResult) { - setStatus(`✓ ${name} · ${result.entities?.length ?? 0} entities`); +async function afterLoad(name: string, result: CadLoadSummary) { + setStatus(`✓ ${name} · ${result.entityCount} entities`); fillLayers(); viewer.fit(); } -async function run(label: string, job: () => Promise) { +async function run(label: string, job: () => Promise) { setStatus(`loading ${label}…`); try { await afterLoad(label, await job()); diff --git a/apps/viewer-3d/src/viewer/ThreeDViewer.ts b/apps/viewer-3d/src/viewer/ThreeDViewer.ts index 7ba5258..aad038e 100644 --- a/apps/viewer-3d/src/viewer/ThreeDViewer.ts +++ b/apps/viewer-3d/src/viewer/ThreeDViewer.ts @@ -29,6 +29,7 @@ export class ThreeDViewer { private readonly onError; private readonly fps = createFpsMeter(); private readonly adaptive; + private disposed = false; private raf = 0; private current: THREE.Object3D | null = null; private outline: THREE.Group | null = null; @@ -323,6 +324,7 @@ export class ThreeDViewer { }; private animate = (now: number = performance.now()): void => { + if (this.disposed) return; this.raf = requestAnimationFrame(this.animate); this.fps.sample(now); this.adaptive.update(this.fps.fps()); @@ -331,14 +333,20 @@ export class ThreeDViewer { }; dispose(): void { + if (this.disposed) return; + this.disposed = true; cancelAnimationFrame(this.raf); + this.raf = 0; window.removeEventListener('resize', this.onResize); this.controls.dispose(); this.clearOutline(); if (this.current) this.disposeObject(this.current); + this.current = null; this.fps.el.remove(); this.renderer.dispose(); + this.renderer.forceContextLoss(); this.renderer.domElement.remove(); + this.scene.clear(); } /** Orbit the camera to azimuth (radians) around the model — used by tools/prerender.mjs. */ diff --git a/packages/viewer2d/src/index.ts b/packages/viewer2d/src/index.ts index 4ce3466..8557225 100644 --- a/packages/viewer2d/src/index.ts +++ b/packages/viewer2d/src/index.ts @@ -6,13 +6,15 @@ import { is2D, isDwg } from './ext2d'; import { parseDxfBuffer } from './parseDxf'; import { setDefaultFontUrl } from './slugText'; -export type { CadParseResult } from './dwgParser'; - export type CadInput = { name: string; data: ArrayBuffer | Uint8Array; }; +export type CadLoadSummary = { + entityCount: number; +}; + export type Viewer2DOptions = { fontUrl?: string; }; @@ -26,7 +28,7 @@ export function isCad2DFile(name: string): boolean { return is2D(name); } -export async function parseCad(input: CadInput): Promise { +async function parseCad(input: CadInput): Promise { const buffer = toArrayBuffer(input.data); if (isDwg(input.name)) return parseDwgBuffer(new Uint8Array(buffer)); if (is2D(input.name)) return parseDxfBuffer(buffer); @@ -38,6 +40,16 @@ export async function parseCad(input: CadInput): Promise { return parseDxfBuffer(buffer); } +export async function loadCad( + viewer: Pick, + input: CadInput, +): Promise { + const result = await parseCad(input); + viewer.load(result); + viewer.resize(); + return { entityCount: result.entities?.length ?? 0 }; +} + export function createViewer2D(container: HTMLElement, options: Viewer2DOptions = {}): Viewer2D { if (options.fontUrl) setDefaultFontUrl(options.fontUrl); return new Viewer2D(container); diff --git a/playwright.config.ts b/playwright.config.ts index 48db2d5..861cb57 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -30,6 +30,12 @@ export default defineConfig({ reuseExistingServer: true, timeout: 30_000, }, + { + command: 'npm --workspace @hmwebviewer/viewer-2d-sample run serve:subpath:e2e', + port: 45173, + reuseExistingServer: true, + timeout: 60_000, + }, { command: 'npm --workspace @hmwebviewer/viewer-3d run serve:subpath:e2e', port: 43174, diff --git a/tests/e2e/viewer2d.lifecycle.spec.ts b/tests/e2e/viewer2d.lifecycle.spec.ts index f351cf9..d198f04 100644 --- a/tests/e2e/viewer2d.lifecycle.spec.ts +++ b/tests/e2e/viewer2d.lifecycle.spec.ts @@ -1,6 +1,82 @@ -import { expect, test } from '@playwright/test'; +import { expect, type Page, test } from '@playwright/test'; + +async function installLifecycleProbe(page: Page) { + await page.addInitScript(() => { + const activeAnimationFrames = new Set(); + const contexts: WebGLRenderingContext[] = []; + const listeners: Array<{ + listener: EventListenerOrEventListenerObject | null; + target: EventTarget; + type: string; + }> = []; + + const requestAnimationFrameOriginal = window.requestAnimationFrame.bind(window); + const cancelAnimationFrameOriginal = window.cancelAnimationFrame.bind(window); + window.requestAnimationFrame = (callback) => { + let id = 0; + id = requestAnimationFrameOriginal((time) => { + activeAnimationFrames.delete(id); + callback(time); + }); + activeAnimationFrames.add(id); + return id; + }; + window.cancelAnimationFrame = (id) => { + activeAnimationFrames.delete(id); + cancelAnimationFrameOriginal(id); + }; + + const addEventListenerOriginal = EventTarget.prototype.addEventListener; + const removeEventListenerOriginal = EventTarget.prototype.removeEventListener; + EventTarget.prototype.addEventListener = function (type, listener, options) { + listeners.push({ listener, target: this, type }); + return addEventListenerOriginal.call(this, type, listener, options); + }; + EventTarget.prototype.removeEventListener = function (type, listener, options) { + const index = listeners.findIndex( + (entry) => entry.target === this && entry.type === type && entry.listener === listener, + ); + if (index >= 0) listeners.splice(index, 1); + return removeEventListenerOriginal.call(this, type, listener, options); + }; + + const getContextOriginal = HTMLCanvasElement.prototype.getContext; + HTMLCanvasElement.prototype.getContext = function (...args) { + const context = getContextOriginal.apply(this, args as never); + if ( + context && + (args[0] === 'webgl' || args[0] === 'webgl2' || args[0] === 'experimental-webgl') && + !contexts.includes(context as WebGLRenderingContext) + ) { + contexts.push(context as WebGLRenderingContext); + } + return context; + } as typeof HTMLCanvasElement.prototype.getContext; + + Object.defineProperty(window, '__lifecycleProbe', { + value: { + snapshot: () => ({ + activeAnimationFrames: activeAnimationFrames.size, + canvasListeners: listeners.filter( + (entry) => entry.target instanceof HTMLCanvasElement, + ).length, + contexts: contexts.length, + contextsLost: + contexts.length > 0 && contexts.every((context) => context.isContextLost()), + keydownListeners: listeners.filter( + (entry) => entry.target === window && entry.type === 'keydown', + ).length, + resizeListeners: listeners.filter( + (entry) => entry.target === window && entry.type === 'resize', + ).length, + }), + }, + }); + }); +} test('viewer2d releases its canvas when disposed', async ({ page }) => { + await installLifecycleProbe(page); await page.goto('/'); await page.getByRole('button', { name: 'Sample DXF' }).click(); await expect(page.locator('#status')).toContainText('✓ simple.dxf'); @@ -35,9 +111,25 @@ test('viewer2d releases its canvas when disposed', async ({ page }) => { ).__viewer2d?.dispose?.(); }); await expect(page.locator('canvas')).toHaveCount(0); + const resources = await page.evaluate(() => + ( + window as Window & { + __lifecycleProbe: { snapshot: () => Record }; + } + ).__lifecycleProbe.snapshot(), + ); + expect(resources).toEqual({ + activeAnimationFrames: 0, + canvasListeners: 0, + contexts: 1, + contextsLost: true, + keydownListeners: 0, + resizeListeners: 0, + }); }); test('viewer3d releases its canvas on pagehide and remains disposable', async ({ page }) => { + await installLifecycleProbe(page); await page.goto('http://127.0.0.1:3333/?model=/samples/Box.glb'); await page.waitForFunction( () => @@ -54,13 +146,30 @@ test('viewer3d releases its canvas on pagehide and remains disposable', async ({ window.dispatchEvent(new PageTransitionEvent('pagehide')); const exposed = (window as Window & { __viewer?: { dispose: () => void } }).__viewer; exposed?.dispose(); + const resources = ( + window as Window & { + __lifecycleProbe: { snapshot: () => Record }; + } + ).__lifecycleProbe.snapshot(); return { canvases: document.querySelectorAll('canvas').length, exposed: Boolean(exposed), + resources, }; }); - expect(result).toEqual({ canvases: 0, exposed: false }); + expect(result).toEqual({ + canvases: 0, + exposed: false, + resources: { + activeAnimationFrames: 0, + canvasListeners: 0, + contexts: 1, + contextsLost: true, + keydownListeners: 0, + resizeListeners: 0, + }, + }); }); test('viewer2d and viewer3d survive ten mount transitions without duplicate canvases', async ({ diff --git a/tests/e2e/viewer2d.subpath.spec.ts b/tests/e2e/viewer2d.subpath.spec.ts new file mode 100644 index 0000000..a9b76b0 --- /dev/null +++ b/tests/e2e/viewer2d.subpath.spec.ts @@ -0,0 +1,31 @@ +import { expect, test } from '@playwright/test'; + +test('viewer2d resolves DWG WASM, font, and sample under a production subpath', async ({ + page, +}) => { + const failedRequests: string[] = []; + const responseUrls: string[] = []; + page.on('requestfailed', (request) => failedRequests.push(request.url())); + page.on('response', (response) => responseUrls.push(response.url())); + + await page.goto( + 'http://127.0.0.1:45173/viewer-2d/?model=/viewer-2d/samples/BasicSample.dwg', + ); + await expect(page.locator('#status')).toContainText('7309 entities', { timeout: 20_000 }); + await expect.poll( + () => + ({ + font: responseUrls.some((url) => + url.endsWith('/viewer-2d/fonts/NanumGothic-Regular.ttf'), + ), + sample: responseUrls.some((url) => + url.endsWith('/viewer-2d/samples/BasicSample.dwg'), + ), + wasm: responseUrls.some( + (url) => url.includes('/viewer-2d/assets/') && url.endsWith('.wasm'), + ), + }), + { timeout: 20_000 }, + ).toEqual({ font: true, sample: true, wasm: true }); + expect(failedRequests).toEqual([]); +}); diff --git a/tests/viewer2d.contract.test.ts b/tests/viewer2d.contract.test.ts index 5640266..938cda4 100644 --- a/tests/viewer2d.contract.test.ts +++ b/tests/viewer2d.contract.test.ts @@ -1,28 +1,26 @@ import { readFile } from 'node:fs/promises'; -import { describe, expect, it } from 'vitest'; -import { isCad2DFile, parseCad } from '@hmwebviewer/viewer2d'; +import { describe, expect, it, vi } from 'vitest'; +import { isCad2DFile, loadCad } from '@hmwebviewer/viewer2d'; describe('viewer2d package interface', () => { - it('parses the sample DXF through the public package interface', async () => { + it('parses and loads the sample DXF without exposing the parser result', async () => { const file = await readFile( new URL('../apps/viewer-2d-sample/public/samples/simple.dxf', import.meta.url), ); - const result = await parseCad({ + const viewer = { + load: vi.fn(), + resize: vi.fn(), + }; + const summary = await loadCad(viewer, { name: 'simple.dxf', data: file.buffer.slice(file.byteOffset, file.byteOffset + file.byteLength), }); - const entities = result.entities as Array<{ layer?: string; type?: string }>; expect(isCad2DFile('drawing.DWG')).toBe(true); expect(isCad2DFile('drawing.dxf')).toBe(true); expect(isCad2DFile('drawing.pdf')).toBe(false); - expect(entities.map(({ type, layer }) => [type, layer])).toEqual([ - ['LINE', 'OUTLINE'], - ['LINE', 'OUTLINE'], - ['LINE', 'OUTLINE'], - ['LINE', 'OUTLINE'], - ['CIRCLE', '0'], - ['TEXT', '0'], - ]); + expect(summary).toEqual({ entityCount: 6 }); + expect(viewer.load).toHaveBeenCalledOnce(); + expect(viewer.resize).toHaveBeenCalledOnce(); }); }); diff --git a/tools/run-e2e.mjs b/tools/run-e2e.mjs index 028bb51..a7f5ac3 100644 --- a/tools/run-e2e.mjs +++ b/tools/run-e2e.mjs @@ -6,6 +6,10 @@ const projectRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..'); const serverSpecs = [ { name: 'viewer-2d', args: ['run', 'dev:2d'] }, { name: 'viewer-3d', args: ['run', 'dev:3d'] }, + { + name: 'viewer-2d-subpath', + args: ['--workspace', '@hmwebviewer/viewer-2d-sample', 'run', 'serve:subpath:e2e'], + }, { name: 'viewer-3d-subpath', args: ['--workspace', '@hmwebviewer/viewer-3d', 'run', 'serve:subpath:e2e'],