@flyfish-dev/dwf-viewer 0.5.0 → 0.6.0

package/dist/render/XpsRenderer.js

@@ -2,35 +2,62 @@ import { actionableDiagnostics, diag } from '../format/types.js';
 import { childElements, getAttr, localName, parseNumberList, parseXml, resolvePart, blobToImage, mimeFromPath } from '../format/util.js';
 import { applyPathToCanvas, flattenPath, parsePathData } from './xpsPath.js';
 import { multiplyMatrix, parseBrushColor, parseMatrix } from './style.js';
+import { adaptiveStrokeUserWidth, canvasDpr, shouldDrawFilledBounds, shouldDrawTextByPixelSize } from './cadLineStyle.js';
 import { fitPageMatrix } from './viewport.js';
 import { WasmRasterBackend } from '../wasm/WasmRasterBackend.js';
+import { WebGlXpsBackend } from './WebGlXpsBackend.js';
 export class XpsRenderer {
     constructor(document) {
         this.document = document;
+        this.fontCache = new Map();
+        this.xmlCache = new Map();
     }
     async render(page, canvas, options = {}) {
         const opc = this.document.opc;
         if (!opc)
             throw new Error('XPS page requires an OPC package view.');
         const warnings = actionableDiagnostics(page.diagnostics);
-        const xml = await opc.readText(page.sourcePath);
-        const doc = parseXml(xml, page.sourcePath);
+        const doc = await this.getXmlDocument(page.sourcePath);
         const root = doc.documentElement;
         const ctx = canvas.getContext('2d');
         if (!ctx)
             throw new Error('CanvasRenderingContext2D is not available.');
         const bg = options.background ?? '#ffffff';
+        const runtime = { dpr: canvasDpr(canvas), zoom: options.zoom ?? 1 };
         const pageMatrix = fitPageMatrix({ canvasWidth: canvas.width, canvasHeight: canvas.height, pageWidth: page.width, pageHeight: page.height, zoom: options.zoom, panX: options.panX, panY: options.panY });
         let commands = 0;
+        if (options.preferWebgl ?? true) {
+            try {
+                const backend = this.getWebGlBackend(options.webglCanvas);
+                if (options.webglCanvas)
+                    options.webglCanvas.style.visibility = 'visible';
+                const stats = backend.render(page, root, canvas, { ...options, compositeToTarget: !options.webglCanvas });
+                ctx.save();
+                ctx.setTransform(1, 0, 0, 1, 0, 0);
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                ctx.restore();
+                commands += stats.commands;
+                commands += await this.renderElementToCanvas(root, ctx, page.sourcePath, pageMatrix, 1, warnings, { vectors: false, overlays: true }, options, runtime);
+                warnings.push(...stats.warnings);
+                return { backend: 'webgl-xps', commands, warnings };
+            }
+            catch (err) {
+                if (options.webglCanvas)
+                    options.webglCanvas.style.visibility = 'hidden';
+                warnings.push(diag('warning', 'WEBGL_XPS_BACKEND_FALLBACK', `WebGL XPS vector path failed, falling back to ${options.preferWasm ? 'WASM raster' : 'Canvas2D'}: ${String(err)}`, page.sourcePath));
+            }
+        }
+        if (options.webglCanvas)
+            options.webglCanvas.style.visibility = 'hidden';
         if (options.preferWasm) {
             try {
                 this.wasm ?? (this.wasm = new WasmRasterBackend({ wasmUrl: options.wasmUrl }));
                 await this.wasm.init();
                 this.wasm.begin(canvas.width, canvas.height, bg);
-                commands += this.renderElementToWasm(root, pageMatrix, 1, warnings);
+                commands += this.renderElementToWasm(root, pageMatrix, 1, warnings, options, runtime);
                 ctx.setTransform(1, 0, 0, 1, 0, 0);
                 ctx.putImageData(this.wasm.toImageData(), 0, 0);
-                commands += await this.renderElementToCanvas(root, ctx, page.sourcePath, pageMatrix, 1, warnings, { vectors: false, overlays: true });
+                commands += await this.renderElementToCanvas(root, ctx, page.sourcePath, pageMatrix, 1, warnings, { vectors: false, overlays: true }, options, runtime);
                 return { backend: 'wasm-raster', commands, warnings };
             }
             catch (err) {
@@ -42,10 +69,34 @@ export class XpsRenderer {
         ctx.fillStyle = bg;
         ctx.fillRect(0, 0, canvas.width, canvas.height);
         ctx.restore();
-        commands += await this.renderElementToCanvas(root, ctx, page.sourcePath, pageMatrix, 1, warnings, { vectors: true, overlays: true });
+        commands += await this.renderElementToCanvas(root, ctx, page.sourcePath, pageMatrix, 1, warnings, { vectors: true, overlays: true }, options, runtime);
         return { backend: 'canvas2d', commands, warnings };
     }
-    async renderElementToCanvas(el, ctx, pagePath, matrix, opacity, warnings, mode) {
+    getWebGlBackend(canvas) {
+        if (!this.webgl || this.webglCanvas !== canvas) {
+            this.webgl?.dispose();
+            this.webgl = new WebGlXpsBackend(canvas);
+            this.webglCanvas = canvas;
+        }
+        return this.webgl;
+    }
+    getXmlDocument(part) {
+        let cached = this.xmlCache.get(part);
+        if (!cached) {
+            const opc = this.document.opc;
+            cached = opc.readText(part).then(xml => parseXml(xml, part));
+            this.xmlCache.set(part, cached);
+        }
+        return cached;
+    }
+    dispose() {
+        this.webgl?.dispose();
+        this.webgl = undefined;
+        this.webglCanvas = undefined;
+        this.xmlCache.clear();
+        this.fontCache.clear();
+    }
+    async renderElementToCanvas(el, ctx, pagePath, matrix, opacity, warnings, mode, options, runtime) {
         const name = localName(el);
         const local = elementMatrix(el);
         const composed = multiplyMatrix(matrix, local);
@@ -68,13 +119,15 @@ export class XpsRenderer {
                 const fill = extractBrush(el, 'Fill', ownOpacity);
                 const stroke = extractBrush(el, 'Stroke', ownOpacity);
                 const thickness = Number(getAttr(el, 'StrokeThickness') ?? 1);
-                if (fill) {
+                const bounds = pathBounds(path);
+                if (fill && shouldDrawFilledBounds(bounds, composed, options, runtime)) {
                     ctx.fillStyle = fill;
                     ctx.fill(fillRule(el));
                 }
                 if (stroke && thickness > 0) {
                     ctx.strokeStyle = stroke;
-                    ctx.lineWidth = thickness;
+                    ctx.lineWidth = adaptiveStrokeUserWidth(thickness, composed, options, runtime);
+                    applyStrokeStyle(ctx, el, ctx.lineWidth);
                     ctx.stroke();
                 }
                 ctx.restore();
@@ -82,19 +135,7 @@ export class XpsRenderer {
             }
         }
         else if (name === 'Glyphs' && mode.overlays) {
-            ctx.save();
-            ctx.setTransform(composed.a, composed.b, composed.c, composed.d, composed.e, composed.f);
-            ctx.globalAlpha = ownOpacity;
-            const text = getAttr(el, 'UnicodeString') ?? '';
-            const x = Number(getAttr(el, 'OriginX') ?? 0);
-            const y = Number(getAttr(el, 'OriginY') ?? 0);
-            const size = Number(getAttr(el, 'FontRenderingEmSize') ?? 12);
-            const fill = extractBrush(el, 'Fill', ownOpacity) ?? '#000000';
-            ctx.fillStyle = fill;
-            ctx.font = `${size}px sans-serif`;
-            ctx.fillText(text, x, y);
-            ctx.restore();
-            commands++;
+            commands += await this.drawGlyphs(ctx, pagePath, el, composed, ownOpacity, warnings, options, runtime);
         }
         else if (name === 'Image' && mode.overlays) {
             const source = getAttr(el, 'Source') ?? getAttr(el, 'ImageSource');
@@ -129,11 +170,11 @@ export class XpsRenderer {
             const childName = localName(child);
             if (childName.includes('.'))
                 continue;
-            commands += await this.renderElementToCanvas(child, ctx, pagePath, composed, ownOpacity, warnings, mode);
+            commands += await this.renderElementToCanvas(child, ctx, pagePath, composed, ownOpacity, warnings, mode, options, runtime);
         }
         return commands;
     }
-    renderElementToWasm(el, matrix, opacity, warnings) {
+    renderElementToWasm(el, matrix, opacity, warnings, options, runtime) {
         if (!this.wasm)
             return 0;
         const name = localName(el);
@@ -147,6 +188,7 @@ export class XpsRenderer {
                 const fill = extractBrush(el, 'Fill', ownOpacity);
                 const stroke = extractBrush(el, 'Stroke', ownOpacity);
                 const thickness = Number(getAttr(el, 'StrokeThickness') ?? 1);
+                const screenThickness = adaptiveStrokeUserWidth(thickness, composed, options, runtime) * Math.max(1e-12, Math.hypot(composed.a, composed.b));
                 const subs = flattenPath(path, 0.5);
                 if (fill) {
                     for (const sub of subs)
@@ -155,7 +197,7 @@ export class XpsRenderer {
                 }
                 if (stroke && thickness > 0) {
                     for (const sub of subs)
-                        this.wasm.drawPolyline(sub.points, composed, stroke, thickness * composed.a);
+                        this.wasm.drawPolyline(sub.points, composed, stroke, screenThickness);
                 }
                 commands++;
             }
@@ -164,10 +206,79 @@ export class XpsRenderer {
             const childName = localName(child);
             if (childName.includes('.'))
                 continue;
-            commands += this.renderElementToWasm(child, composed, ownOpacity, warnings);
+            commands += this.renderElementToWasm(child, composed, ownOpacity, warnings, options, runtime);
         }
         return commands;
     }
+    async drawGlyphs(ctx, pagePath, el, matrix, opacity, warnings, options, runtime) {
+        const text = getAttr(el, 'UnicodeString') ?? '';
+        if (!text)
+            return 0;
+        const x = Number(getAttr(el, 'OriginX') ?? 0);
+        const y = Number(getAttr(el, 'OriginY') ?? 0);
+        const size = Number(getAttr(el, 'FontRenderingEmSize') ?? 12);
+        if (!shouldDrawTextByPixelSize(size, matrix, options, runtime))
+            return 0;
+        const fill = extractBrush(el, 'Fill', opacity) ?? '#000000';
+        const family = await this.fontFamilyForGlyphs(pagePath, el, warnings) ?? 'sans-serif';
+        ctx.save();
+        ctx.setTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+        ctx.globalAlpha = opacity;
+        ctx.fillStyle = fill;
+        ctx.font = `${size}px "${family}"`;
+        ctx.textBaseline = 'alphabetic';
+        const indices = getAttr(el, 'Indices');
+        if (indices)
+            drawGlyphRunWithIndices(ctx, text, indices, x, y, size);
+        else
+            ctx.fillText(text, x, y);
+        ctx.restore();
+        return 1;
+    }
+    async fontFamilyForGlyphs(pagePath, el, warnings) {
+        const uri = getAttr(el, 'FontUri');
+        if (!uri)
+            return undefined;
+        const part = resolvePart(pagePath, uri.replace(/^\//, ''));
+        // XPS/DWFx often stores embedded TrueType fonts as ODTTF.
+        // Deobfuscate and load them so overview text matches CAD viewers instead
+        // of falling back to thick system fonts.
+        let cached = this.fontCache.get(part);
+        if (!cached) {
+            cached = this.loadFontFace(part).catch(err => {
+                warnings.push(diag('warning', 'XPS_FONT_LOAD_FAILED', `Failed to load embedded XPS font ${part}: ${String(err)}`, pagePath));
+                return undefined;
+            });
+            this.fontCache.set(part, cached);
+        }
+        return cached;
+    }
+    async loadFontFace(part) {
+        const FontFaceCtor = globalThis.FontFace;
+        const fontSet = document.fonts;
+        if (!FontFaceCtor || !fontSet)
+            return undefined;
+        let bytes = await this.document.opc.readBytes(part);
+        let mime = mimeFromPath(part) ?? 'font/ttf';
+        if (/\.odttf$/i.test(part)) {
+            bytes = deobfuscateOdttf(part, bytes);
+            mime = 'font/ttf';
+        }
+        const family = `dwfv_xps_${hashString(part)}`;
+        const blob = new Blob([bytes], { type: mime });
+        const url = URL.createObjectURL(blob);
+        const face = new FontFaceCtor(family, `url("${url}")`);
+        try {
+            await face.load();
+            fontSet.add(face);
+            URL.revokeObjectURL(url);
+            return family;
+        }
+        catch (err) {
+            URL.revokeObjectURL(url);
+            throw err;
+        }
+    }
     async drawImageResource(ctx, pagePath, source, matrix, opacity, el) {
         const opc = this.document.opc;
         const src = resolvePart(pagePath, source.replace(/^\//, ''));
@@ -202,6 +313,140 @@ export class XpsRenderer {
         ctx.restore();
     }
 }
+function applyStrokeStyle(ctx, el, userLineWidth) {
+    const start = (getAttr(el, 'StrokeStartLineCap') ?? '').toLowerCase();
+    const end = (getAttr(el, 'StrokeEndLineCap') ?? '').toLowerCase();
+    const dashCap = (getAttr(el, 'StrokeDashCap') ?? '').toLowerCase();
+    if (start === 'round' || end === 'round' || dashCap === 'round')
+        ctx.lineCap = 'round';
+    else if (start === 'square' || end === 'square' || dashCap === 'square')
+        ctx.lineCap = 'square';
+    else
+        ctx.lineCap = 'butt';
+    const join = (getAttr(el, 'StrokeLineJoin') ?? '').toLowerCase();
+    ctx.lineJoin = join === 'round' ? 'round' : join === 'bevel' ? 'bevel' : 'miter';
+    const miter = Number(getAttr(el, 'StrokeMiterLimit') ?? 10);
+    if (Number.isFinite(miter) && miter > 0)
+        ctx.miterLimit = miter;
+    const dash = parseNumberList(getAttr(el, 'StrokeDashArray') ?? '');
+    if (dash.length > 0) {
+        const offset = Number(getAttr(el, 'StrokeDashOffset') ?? 0);
+        ctx.setLineDash(dash.map(v => Math.max(0, v * userLineWidth)));
+        ctx.lineDashOffset = Number.isFinite(offset) ? offset * userLineWidth : 0;
+    }
+    else {
+        ctx.setLineDash([]);
+        ctx.lineDashOffset = 0;
+    }
+}
+function pathBounds(commands) {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    const add = (x, y) => {
+        if (!Number.isFinite(x) || !Number.isFinite(y))
+            return;
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+    };
+    for (const c of commands) {
+        if (c.type === 'M' || c.type === 'L')
+            add(c.x, c.y);
+        else if (c.type === 'C') {
+            add(c.x1, c.y1);
+            add(c.x2, c.y2);
+            add(c.x, c.y);
+        }
+        else if (c.type === 'Q') {
+            add(c.x1, c.y1);
+            add(c.x, c.y);
+        }
+        else if (c.type === 'A') {
+            add(c.x - c.rx, c.y - c.ry);
+            add(c.x + c.rx, c.y + c.ry);
+        }
+    }
+    return Number.isFinite(minX) ? { minX, minY, maxX, maxY } : undefined;
+}
+function drawGlyphRunWithIndices(ctx, text, indices, x, y, emSize) {
+    const specs = indices.split(';');
+    let cursor = x;
+    let charIndex = 0;
+    for (const spec of specs) {
+        const raw = spec.trim();
+        if (!raw)
+            continue;
+        const parts = raw.split(',');
+        const advance = Number(parts[1] ?? '');
+        const dx = Number(parts[3] ?? 0);
+        const dy = Number(parts[4] ?? 0);
+        const ch = text[charIndex++] ?? '';
+        if (ch)
+            ctx.fillText(ch, cursor + (Number.isFinite(dx) ? dx : 0), y + (Number.isFinite(dy) ? dy : 0));
+        if (Number.isFinite(advance) && advance > 0)
+            cursor += advance * emSize / 100;
+        else
+            cursor += ctx.measureText(ch || ' ').width;
+    }
+    if (charIndex < text.length)
+        ctx.fillText(text.slice(charIndex), cursor, y);
+}
+function deobfuscateOdttf(part, bytes) {
+    const name = part.split('/').pop() ?? '';
+    const guid = name.replace(/\.odttf$/i, '').replace(/[^0-9a-fA-F]/g, '');
+    if (guid.length !== 32 || bytes.length < 32)
+        return bytes;
+    const key = new Uint8Array(16);
+    for (let i = 0; i < 16; i++)
+        key[i] = parseInt(guid.slice(i * 2, i * 2 + 2), 16);
+    // XPS font obfuscation uses the GUID bytes in reverse order, repeated over
+    // the first 32 bytes of the font payload.
+    const out = new Uint8Array(bytes);
+    for (let i = 0; i < Math.min(32, out.length); i++)
+        out[i] = (out[i] ?? 0) ^ key[15 - (i % 16)];
+    if (!looksLikeSfnt(out)) {
+        // A few producers use the GUID binary/little-endian representation.  Try it
+        // as a guarded fallback rather than silently returning a broken font.
+        const altKey = guidLittleEndianBytes(guid);
+        const alt = new Uint8Array(bytes);
+        for (let i = 0; i < Math.min(32, alt.length); i++)
+            alt[i] = (alt[i] ?? 0) ^ altKey[15 - (i % 16)];
+        if (looksLikeSfnt(alt))
+            return alt;
+    }
+    return out;
+}
+function guidLittleEndianBytes(hex) {
+    const b = new Uint8Array(16);
+    const raw = new Uint8Array(16);
+    for (let i = 0; i < 16; i++)
+        raw[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16);
+    b[0] = raw[3];
+    b[1] = raw[2];
+    b[2] = raw[1];
+    b[3] = raw[0];
+    b[4] = raw[5];
+    b[5] = raw[4];
+    b[6] = raw[7];
+    b[7] = raw[6];
+    for (let i = 8; i < 16; i++)
+        b[i] = raw[i];
+    return b;
+}
+function looksLikeSfnt(bytes) {
+    if (bytes.length < 4)
+        return false;
+    const tag = String.fromCharCode(bytes[0], bytes[1], bytes[2], bytes[3]);
+    return tag === 'OTTO' || tag === 'true' || tag === 'typ1' || tag === 'ttcf' || (bytes[0] === 0 && bytes[1] === 1 && bytes[2] === 0 && bytes[3] === 0);
+}
+function hashString(s) {
+    let h = 2166136261;
+    for (let i = 0; i < s.length; i++) {
+        h ^= s.charCodeAt(i);
+        h = Math.imul(h, 16777619);
+    }
+    return (h >>> 0).toString(36);
+}
 function elementMatrix(el) {
     let m = parseMatrix(getAttr(el, 'RenderTransform') ?? getAttr(el, 'Transform'));
     for (const child of childElements(el)) {

package/dist/render/cadLineStyle.d.ts

@@ -0,0 +1,32 @@
+import type { Matrix2D } from './style.js';
+export type CadLineWeightMode = 'adaptive' | 'physical' | 'hairline';
+export interface CadLineStyleOptions {
+    /**
+     * adaptive: CAD-viewer style thin-line overview with physical line weights returning while zooming.
+     * physical: preserve source line width exactly.
+     * hairline: draw all strokes as one CSS-pixel hairlines.
+     */
+    lineWeightMode?: CadLineWeightMode;
+    /** Minimum visible stroke width, in CSS pixels. */
+    minStrokeCssPx?: number;
+    /** Maximum stroke width used around fit-to-page / low zoom, in CSS pixels. */
+    maxOverviewStrokeCssPx?: number;
+    /** Ignore text smaller than this CSS-pixel height to avoid black blobs in overview. */
+    minTextCssPx?: number;
+    /** Ignore filled shapes below this CSS-pixel area in adaptive mode. */
+    minFilledAreaCssPx?: number;
+}
+export interface CadStrokeRuntime {
+    dpr: number;
+    zoom?: number;
+}
+export declare function estimateMatrixScale(m: Matrix2D): number;
+export declare function canvasDpr(canvas: HTMLCanvasElement): number;
+export declare function adaptiveStrokeUserWidth(sourceWidth: number, matrix: Matrix2D, opts: CadLineStyleOptions | undefined, runtime: CadStrokeRuntime): number;
+export declare function shouldDrawTextByPixelSize(fontSizeSourceUnits: number, matrix: Matrix2D, opts: CadLineStyleOptions | undefined, runtime: CadStrokeRuntime): boolean;
+export declare function shouldDrawFilledBounds(bounds: {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+} | undefined, matrix: Matrix2D, opts: CadLineStyleOptions | undefined, runtime: CadStrokeRuntime): boolean;

package/dist/render/cadLineStyle.js

@@ -0,0 +1,59 @@
+export function estimateMatrixScale(m) {
+    const sx = Math.hypot(m.a, m.b);
+    const sy = Math.hypot(m.c, m.d);
+    return Math.max(1e-12, (sx + sy) * 0.5);
+}
+export function canvasDpr(canvas) {
+    const rect = canvas.getBoundingClientRect?.();
+    const cssW = rect && rect.width > 0 ? rect.width : Number(canvas.style.width?.replace('px', '')) || canvas.width;
+    return Math.max(1, canvas.width / Math.max(1, cssW));
+}
+export function adaptiveStrokeUserWidth(sourceWidth, matrix, opts = {}, runtime) {
+    const scale = estimateMatrixScale(matrix);
+    const physicalDevicePx = Math.max(0, Math.abs(sourceWidth || 0) * scale);
+    const mode = opts.lineWeightMode ?? 'adaptive';
+    if (mode === 'physical')
+        return Math.max(1e-6, Math.abs(sourceWidth || 1));
+    const dpr = Math.max(1, runtime.dpr || 1);
+    const minDevicePx = Math.max(0.25, (opts.minStrokeCssPx ?? 0.55) * dpr);
+    if (mode === 'hairline')
+        return minDevicePx / scale;
+    const zoom = Math.max(0.05, runtime.zoom ?? 1);
+    const overviewMaxCss = opts.maxOverviewStrokeCssPx ?? 1.15;
+    // CAD drawing viewers typically keep overview lines as screen-space hairlines,
+    // then allow line weights to grow as the user zooms in.  The cap grows with
+    // zoom, but sub-line details never exceed a readable overview width.
+    const adaptiveMaxCss = zoom <= 1
+        ? overviewMaxCss
+        : Math.min(24, overviewMaxCss * (1 + Math.log2(zoom) * 1.6));
+    const maxDevicePx = Math.max(minDevicePx, adaptiveMaxCss * dpr);
+    const targetDevicePx = Math.max(minDevicePx, Math.min(physicalDevicePx, maxDevicePx));
+    return targetDevicePx / scale;
+}
+export function shouldDrawTextByPixelSize(fontSizeSourceUnits, matrix, opts = {}, runtime) {
+    if ((opts.lineWeightMode ?? 'adaptive') === 'physical')
+        return true;
+    const dpr = Math.max(1, runtime.dpr || 1);
+    const minCss = opts.minTextCssPx ?? 3.5;
+    const devicePx = Math.abs(fontSizeSourceUnits * estimateMatrixScale(matrix));
+    return devicePx >= minCss * dpr;
+}
+export function shouldDrawFilledBounds(bounds, matrix, opts = {}, runtime) {
+    if (!bounds || (opts.lineWeightMode ?? 'adaptive') === 'physical')
+        return true;
+    const dpr = Math.max(1, runtime.dpr || 1);
+    const minArea = Math.max(0, opts.minFilledAreaCssPx ?? 0.12) * dpr * dpr;
+    if (minArea <= 0)
+        return true;
+    const p1 = transform(matrix, bounds.minX, bounds.minY);
+    const p2 = transform(matrix, bounds.maxX, bounds.minY);
+    const p3 = transform(matrix, bounds.maxX, bounds.maxY);
+    const p4 = transform(matrix, bounds.minX, bounds.maxY);
+    const xs = [p1[0], p2[0], p3[0], p4[0]];
+    const ys = [p1[1], p2[1], p3[1], p4[1]];
+    const area = (Math.max(...xs) - Math.min(...xs)) * (Math.max(...ys) - Math.min(...ys));
+    return area >= minArea;
+}
+function transform(m, x, y) {
+    return [m.a * x + m.c * y + m.e, m.b * x + m.d * y + m.f];
+}

package/dist/viewer/DwfViewer.d.ts

@@ -2,6 +2,11 @@ import type { LoadedDwfDocument } from '../format/document.js';
 import type { PageRenderOptions, RenderStats } from '../format/types.js';
 export interface DwfViewerOptions {
     wasmUrl?: string;
+    lineWeightMode?: 'adaptive' | 'physical' | 'hairline';
+    minStrokeCssPx?: number;
+    maxOverviewStrokeCssPx?: number;
+    minTextCssPx?: number;
+    minFilledAreaCssPx?: number;
     preferWebgl?: boolean;
     preferWasm?: boolean;
     background?: string;
@@ -37,16 +42,24 @@ export declare class DwfViewer {
     private maxCanvasPixels;
     private maxGpuCacheBytes?;
     private maxCachedScenes?;
+    private lineWeightMode;
+    private minStrokeCssPx?;
+    private maxOverviewStrokeCssPx?;
+    private minTextCssPx?;
+    private minFilledAreaCssPx?;
     private drag?;
     private yaw;
     private pitch;
     private pendingRender?;
+    private rendering;
+    private renderAgain;
     private renderRaf;
     private renderSeq;
     private currentDpr;
     constructor(container: HTMLElement, options?: DwfViewerOptions);
     setPreferWebgl(value: boolean): void;
     setPreferWasm(value: boolean): void;
+    setLineWeightMode(value: 'adaptive' | 'physical' | 'hairline'): void;
     load(input: ArrayBuffer | Uint8Array | Blob | File, options?: LoadOptions): Promise<void>;
     render(): Promise<RenderStats | undefined>;
     getDocument(): LoadedDwfDocument | undefined;

package/dist/viewer/DwfViewer.js

@@ -10,6 +10,8 @@ export class DwfViewer {
         this.panY = 0;
         this.yaw = -0.78;
         this.pitch = 0.55;
+        this.rendering = false;
+        this.renderAgain = false;
         this.renderRaf = 0;
         this.renderSeq = 0;
         this.currentDpr = 1;
@@ -21,6 +23,11 @@ export class DwfViewer {
         this.maxCanvasPixels = options.maxCanvasPixels ?? 16777216;
         this.maxGpuCacheBytes = options.maxGpuCacheBytes;
         this.maxCachedScenes = options.maxCachedScenes;
+        this.lineWeightMode = options.lineWeightMode ?? 'adaptive';
+        this.minStrokeCssPx = options.minStrokeCssPx;
+        this.maxOverviewStrokeCssPx = options.maxOverviewStrokeCssPx;
+        this.minTextCssPx = options.minTextCssPx;
+        this.minFilledAreaCssPx = options.minFilledAreaCssPx;
         this.root = document.createElement('div');
         this.root.className = 'dwfv-root';
         const toolbar = document.createElement('div');
@@ -69,6 +76,11 @@ export class DwfViewer {
         this.preferWasm = value;
         this.requestRender();
     }
+    setLineWeightMode(value) {
+        this.lineWeightMode = value;
+        this.renderer?.dispose();
+        this.requestRender();
+    }
     async load(input, options = {}) {
         this.setStatus('解析文件中…');
         this.renderer?.dispose();
@@ -85,6 +97,11 @@ export class DwfViewer {
         this.background = options.background ?? this.background;
         this.maxGpuCacheBytes = options.maxGpuCacheBytes ?? this.maxGpuCacheBytes;
         this.maxCachedScenes = options.maxCachedScenes ?? this.maxCachedScenes;
+        this.lineWeightMode = options.lineWeightMode ?? this.lineWeightMode;
+        this.minStrokeCssPx = options.minStrokeCssPx ?? this.minStrokeCssPx;
+        this.maxOverviewStrokeCssPx = options.maxOverviewStrokeCssPx ?? this.maxOverviewStrokeCssPx;
+        this.minTextCssPx = options.minTextCssPx ?? this.minTextCssPx;
+        this.minFilledAreaCssPx = options.minFilledAreaCssPx ?? this.minFilledAreaCssPx;
         this.populatePages();
         this.populateModelTree();
         await this.render();
@@ -92,39 +109,58 @@ export class DwfViewer {
     async render() {
         if (!this.renderer || !this.doc)
             return undefined;
-        this.resizeCanvasToDisplaySize();
-        const page = this.doc.pageData[this.pageIndex];
-        if (!page)
-            return undefined;
-        const seq = ++this.renderSeq;
-        const task = this.renderer.render(this.pageIndex, this.canvas, {
-            zoom: this.zoom,
-            panX: this.panX,
-            panY: this.panY,
-            preferWebgl: this.preferWebgl,
-            preferWasm: this.preferWasm,
-            wasmUrl: this.wasmUrl,
-            background: this.background,
-            maxGpuCacheBytes: this.maxGpuCacheBytes,
-            maxCachedScenes: this.maxCachedScenes,
-            webglCanvas: this.webglCanvas,
-            yaw: this.yaw,
-            pitch: this.pitch
-        });
-        this.pendingRender = task;
+        if (this.rendering) {
+            this.renderAgain = true;
+            return this.pendingRender;
+        }
+        this.rendering = true;
         try {
-            const stats = await task;
-            if (this.pendingRender === task && seq === this.renderSeq) {
-                const warnCount = stats.warnings.filter(w => w.level !== 'info').length;
-                const dprText = this.currentDpr > 1 ? ` · DPR ${this.currentDpr.toFixed(2)}` : '';
-                this.setStatus(`${this.doc.kind.toUpperCase()} · ${page.kind} · ${stats.backend} · ${stats.commands} ops${dprText}${warnCount ? ` · ${warnCount} 警告` : ''}`, warnCount > 0);
+            this.resizeCanvasToDisplaySize();
+            const page = this.doc.pageData[this.pageIndex];
+            if (!page)
+                return undefined;
+            const seq = ++this.renderSeq;
+            const task = this.renderer.render(this.pageIndex, this.canvas, {
+                zoom: this.zoom,
+                panX: this.panX,
+                panY: this.panY,
+                preferWebgl: this.preferWebgl,
+                preferWasm: this.preferWasm,
+                wasmUrl: this.wasmUrl,
+                background: this.background,
+                maxGpuCacheBytes: this.maxGpuCacheBytes,
+                maxCachedScenes: this.maxCachedScenes,
+                webglCanvas: this.webglCanvas,
+                yaw: this.yaw,
+                pitch: this.pitch,
+                lineWeightMode: this.lineWeightMode,
+                minStrokeCssPx: this.minStrokeCssPx,
+                maxOverviewStrokeCssPx: this.maxOverviewStrokeCssPx,
+                minTextCssPx: this.minTextCssPx,
+                minFilledAreaCssPx: this.minFilledAreaCssPx
+            });
+            this.pendingRender = task;
+            try {
+                const stats = await task;
+                if (this.pendingRender === task && seq === this.renderSeq) {
+                    const warnCount = stats.warnings.filter(w => w.level !== 'info').length;
+                    const dprText = this.currentDpr > 1 ? ` · DPR ${this.currentDpr.toFixed(2)}` : '';
+                    this.setStatus(`${this.doc.kind.toUpperCase()} · ${page.kind} · ${stats.backend} · ${stats.commands} ops${dprText}${warnCount ? ` · ${warnCount} 警告` : ''}`, warnCount > 0);
+                }
+                return stats;
+            }
+            catch (err) {
+                if (seq === this.renderSeq)
+                    this.setStatus(`渲染失败：${String(err)}`, true);
+                throw err;
             }
-            return stats;
         }
-        catch (err) {
-            if (seq === this.renderSeq)
-                this.setStatus(`渲染失败：${String(err)}`, true);
-            throw err;
+        finally {
+            this.rendering = false;
+            if (this.renderAgain) {
+                this.renderAgain = false;
+                this.requestRender();
+            }
         }
     }
     getDocument() {