cyhan/dwg-dxf-viewer-sample
1
0
Fork 0
forked from kimminsung/dwg-dxf-viewer-sample
Code Issues 9 Pull Requests Packages Projects Releases Activity

fix: close final viewer integration gaps (#5)

Browse Source
This commit is contained in:
lectom
2026-07-29 10:14:09 +09:00
parent cadbd5fb60
commit 8ae7c45e9a
9 changed files with 196 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/viewer-2d-sample/package.json
+3
View File
@@ -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": {
apps/viewer-2d-sample/src/main.ts
+7 -10
View File
@@ -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<CadParseResult> {
const result = await parseCad({ data: buf, name });
viewer.load(result);
viewer.resize();
return result;
async function loadAndRender(buf: ArrayBuffer, name: string): Promise<CadLoadSummary> {
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<CadParseResult>) {
async function run(label: string, job: () => Promise<CadLoadSummary>) {
setStatus(`loading ${label}…`);
try {
await afterLoad(label, await job());
apps/viewer-3d/src/viewer/ThreeDViewer.ts
+8
View File
@@ -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. */
packages/viewer2d/src/index.ts
+15 -3
View File
@@ -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<CadParseResult> {
async function parseCad(input: CadInput): Promise<CadParseResult> {
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<CadParseResult> {
return parseDxfBuffer(buffer);
}
export async function loadCad(
viewer: Pick<Viewer2D, 'load' | 'resize'>,
input: CadInput,
): Promise<CadLoadSummary> {
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);
playwright.config.ts
+6
View File
@@ -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,
tests/e2e/viewer2d.lifecycle.spec.ts
+111 -2
View File
@@ -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<number>();
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<string, number | boolean> };
}
).__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<string, number | boolean> };
}
).__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 ({
tests/e2e/viewer2d.subpath.spec.ts
+31
View File
@@ -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([]);
});
tests/viewer2d.contract.test.ts
+11 -13
View File
@@ -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();
});
});
tools/run-e2e.mjs
+4
View File
@@ -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'],