@flyfish-dev/dwf-viewer 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.5.1
+
+- Published as `dwf-viewer` and `@flyfish-dev/dwf-viewer` with AGPL-3.0-only package metadata.
+- Added CAD adaptive line-weight rendering for XPS FixedPage, W2D Canvas/WASM, and W2D WebGL paths.
+- Added overview text LOD culling to avoid black annotation blobs at fit-to-page while preserving text when zoomed in.
+- Added embedded XPS TrueType font loading for Glyphs when browsers support the FontFace API.
+- Added demo line-weight mode selector: CAD adaptive, hairline, physical.
+
 ## 0.5.0
 
 - Prepared repository for public npm release and Cloudflare Pages demo deployment.

package/README.md

@@ -6,6 +6,16 @@ Pure frontend DWF/DWFx viewer for browsers. It parses DWF/DWFx packages locally
 
 This repository is structured as a publishable npm package plus a static Cloudflare Pages demo. The same build is published under both `dwf-viewer` and `@flyfish-dev/dwf-viewer`.
 
+## Links
+
+| Target | URL |
+|---|---|
+| Live demo | https://dwf-viewer-demo.pages.dev/ |
+| GitHub repository | https://github.com/flyfish-dev/dwf-viewer |
+| Official documentation | https://github.com/flyfish-dev/dwf-viewer#readme |
+| npm package | https://www.npmjs.com/package/dwf-viewer |
+| Scoped npm package | https://www.npmjs.com/package/@flyfish-dev/dwf-viewer |
+
 Supported paths:
 
 | Format / content | Status |
@@ -44,7 +54,11 @@ const viewer = new DwfViewer(document.getElementById('viewer')!, {
   maxDevicePixelRatio: 2,
   maxCanvasPixels: 16_777_216,
   maxGpuCacheBytes: 160 * 1024 * 1024,
-  maxCachedScenes: 2
+  maxCachedScenes: 2,
+
+  // CAD-viewer style overview: thin readable lines at fit-to-page,
+  // source line weights return progressively while zooming in.
+  lineWeightMode: 'adaptive'
 });
 
 await viewer.load(file);
@@ -56,6 +70,31 @@ Copy the WASM asset from the package into your public assets directory:
 cp node_modules/dwf-viewer/public/dwfv-render.wasm public/dwfv-render.wasm
 ```
 
+## CAD line-weight rendering
+
+The default 2D rendering mode is `lineWeightMode: 'adaptive'`. This follows the behavior users expect from CAD viewers: at fit-to-page, linework is normalized toward screen-space hairlines so drawings remain readable; as zoom increases, the original DWF/XPS line weights are allowed to grow progressively. This prevents overview pages from becoming black while still preserving heavy line intent when inspecting details.
+
+Available modes:
+
+| Mode | Behavior |
+|---|---|
+| `adaptive` | Default. Overview thin-line rendering with zoom-aware recovery of source line weights. |
+| `hairline` | Force all strokes to one visible CSS-pixel hairline. Useful for dense plans and review thumbnails. |
+| `physical` | Preserve source stroke widths exactly. Useful for print-fidelity comparisons, but dense sheets can look heavy when zoomed out. |
+
+Related options:
+
+```ts
+new DwfViewer(el, {
+  lineWeightMode: 'adaptive',
+  minStrokeCssPx: 0.55,
+  maxOverviewStrokeCssPx: 1.15,
+  minTextCssPx: 3.5
+});
+```
+
+XPS/DWFx `Glyphs` use embedded TrueType fonts when the browser allows `FontFace` loading. Very small text is skipped in adaptive overview mode and appears normally when zoomed in; this avoids unreadable black blobs in architectural sheets.
+
 ## Three.js integration
 
 ```ts
@@ -113,6 +152,7 @@ npm run check:examples
 
 ```bash
 npm run clean
+npm run publish:all -- --dry-run
 npm run publish:all
 ```
 
@@ -127,9 +167,16 @@ GitHub release publishing can use provenance through the included workflow and `
 
 ## Cloudflare Pages demo
 
+Live demo:
+
+```text
+https://dwf-viewer-demo.pages.dev/
+```
+
 The repository includes `wrangler.toml` with:
 
 ```toml
+name = "dwf-viewer-demo"
 pages_build_output_dir = "./demo-dist"
 ```
 
@@ -144,12 +191,13 @@ Root directory: /
 Direct upload:
 
 ```bash
-npm run build:demo
-npx wrangler pages deploy demo-dist
+npm run deploy:pages
 ```
 
 `build:demo` produces a static directory containing only demo HTML/JS, `dist`, `public/dwfv-render.wasm`, `styles`, and the curated examples.
 
+GitHub Actions builds the demo for every pull request. On pushes to `main`, it deploys to Cloudflare Pages when the repository secrets `CLOUDFLARE_API_TOKEN` and `CLOUDFLARE_ACCOUNT_ID` are present.
+
 ## Public API
 
 Main exports:

package/dist/format/types.d.ts

@@ -45,6 +45,11 @@ export interface InflateProvider {
 }
 export interface PageRenderOptions {
     pageIndex?: number;
+    lineWeightMode?: 'adaptive' | 'physical' | 'hairline';
+    minStrokeCssPx?: number;
+    maxOverviewStrokeCssPx?: number;
+    minTextCssPx?: number;
+    minFilledAreaCssPx?: number;
     preferWebgl?: boolean;
     preferWasm?: boolean;
     wasmUrl?: string;

package/dist/render/PageRenderer.d.ts

@@ -2,6 +2,11 @@ import { type RenderStats } from '../format/types.js';
 import type { LoadedDwfDocument } from '../format/document.js';
 export interface GenericRenderOptions {
     zoom?: number;
+    lineWeightMode?: 'adaptive' | 'physical' | 'hairline';
+    minStrokeCssPx?: number;
+    maxOverviewStrokeCssPx?: number;
+    minTextCssPx?: number;
+    minFilledAreaCssPx?: number;
     panX?: number;
     panY?: number;
     preferWebgl?: boolean;

package/dist/render/W2dRenderer.d.ts

@@ -1,6 +1,7 @@
 import { type RenderStats } from '../format/types.js';
 import type { W2dTextPageData } from '../format/document.js';
-export interface W2dRenderOptions {
+import { type CadLineStyleOptions } from './cadLineStyle.js';
+export interface W2dRenderOptions extends CadLineStyleOptions {
     zoom?: number;
     panX?: number;
     panY?: number;

package/dist/render/W2dRenderer.js

@@ -1,6 +1,7 @@
 import { actionableDiagnostics, diag } from '../format/types.js';
 import { applyPathToCanvas, flattenPath } from './xpsPath.js';
 import { multiplyMatrix, parseBrushColor, transformPoint } from './style.js';
+import { adaptiveStrokeUserWidth, canvasDpr, estimateMatrixScale, shouldDrawTextByPixelSize } from './cadLineStyle.js';
 import { matrixForW2d } from './viewport.js';
 import { WasmRasterBackend } from '../wasm/WasmRasterBackend.js';
 import { WebGlW2dBackend } from './WebGlW2dBackend.js';
@@ -30,6 +31,7 @@ export class W2dRenderer {
         if (!ctx)
             throw new Error('CanvasRenderingContext2D is not available.');
         const pageMatrix = matrixForW2d(page, canvas.width, canvas.height, options.zoom, options.panX, options.panY);
+        const runtime = { dpr: canvasDpr(canvas), zoom: options.zoom ?? 1 };
         let commands = 0;
         if (options.preferWasm) {
             try {
@@ -37,11 +39,11 @@ export class W2dRenderer {
                 await this.wasm.init();
                 this.wasm.begin(canvas.width, canvas.height, bg);
                 for (const p of page.primitives)
-                    commands += this.drawPrimitiveWasm(p, pageMatrix);
+                    commands += this.drawPrimitiveWasm(p, pageMatrix, options, runtime);
                 ctx.setTransform(1, 0, 0, 1, 0, 0);
                 ctx.putImageData(this.wasm.toImageData(), 0, 0);
                 for (const p of page.primitives.filter(p => p.type === 'text'))
-                    commands += this.drawPrimitiveCanvas(ctx, p, pageMatrix);
+                    commands += this.drawPrimitiveCanvas(ctx, p, pageMatrix, options, runtime);
                 return { backend: 'wasm-raster', commands, warnings };
             }
             catch (err) {
@@ -54,7 +56,7 @@ export class W2dRenderer {
         ctx.fillRect(0, 0, canvas.width, canvas.height);
         ctx.restore();
         for (const p of page.primitives)
-            commands += this.drawPrimitiveCanvas(ctx, p, pageMatrix);
+            commands += this.drawPrimitiveCanvas(ctx, p, pageMatrix, options, runtime);
         return { backend: 'canvas2d', commands, warnings };
     }
     dispose() {
@@ -70,14 +72,14 @@ export class W2dRenderer {
         }
         return this.webgl;
     }
-    drawPrimitiveCanvas(ctx, p, pageMatrix) {
+    drawPrimitiveCanvas(ctx, p, pageMatrix, options, runtime) {
         const matrix = multiplyMatrix(pageMatrix, p.matrix ?? { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
         const stroke = parseBrushColor(p.stroke ?? '#000000') ?? '#000000';
         const fill = parseBrushColor(p.fill);
         if (p.type === 'text') {
             const [x, y] = transformPoint(matrix, p.x, p.y);
-            const screenSize = Math.max(4, Math.abs((p.size ?? 12) * estimateScale(matrix)));
-            if (screenSize < 2.5 || x > ctx.canvas.width + 64 || y > ctx.canvas.height + 64 || x < -ctx.canvas.width || y < -ctx.canvas.height)
+            const screenSize = Math.max(1, Math.abs((p.size ?? 12) * estimateScale(matrix)));
+            if (!shouldDrawTextByPixelSize(p.size ?? 12, matrix, options, runtime) || x > ctx.canvas.width + 64 || y > ctx.canvas.height + 64 || x < -ctx.canvas.width || y < -ctx.canvas.height)
                 return 0;
             ctx.save();
             ctx.setTransform(1, 0, 0, 1, 0, 0);
@@ -91,7 +93,7 @@ export class W2dRenderer {
         }
         ctx.save();
         ctx.setTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
-        ctx.lineWidth = Math.max(0.1, (p.lineWidth ?? 1));
+        ctx.lineWidth = adaptiveStrokeUserWidth(p.lineWidth ?? 1, matrix, options, runtime);
         if (p.type === 'polyline') {
             if (p.points.length >= 4) {
                 ctx.beginPath();
@@ -144,25 +146,26 @@ export class W2dRenderer {
         ctx.restore();
         return 1;
     }
-    drawPrimitiveWasm(p, pageMatrix) {
+    drawPrimitiveWasm(p, pageMatrix, options, runtime) {
         if (!this.wasm || p.type === 'text')
             return 0;
         const matrix = multiplyMatrix(pageMatrix, p.matrix ?? { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
-        const scale = estimateScale(matrix);
+        const scale = estimateMatrixScale(matrix);
+        const screenStroke = (w) => adaptiveStrokeUserWidth(w ?? 1, matrix, options, runtime) * scale;
         if (p.type === 'polyline') {
-            this.wasm.drawPolyline(p.points, matrix, parseBrushColor(p.stroke ?? '#000000'), (p.lineWidth ?? 1) * scale);
+            this.wasm.drawPolyline(p.points, matrix, parseBrushColor(p.stroke ?? '#000000'), screenStroke(p.lineWidth));
         }
         else if (p.type === 'polygon') {
             this.wasm.drawPolygon(p.points, matrix, parseBrushColor(p.fill));
             if (p.stroke)
-                this.wasm.drawPolyline(closePoints(p.points), matrix, parseBrushColor(p.stroke), (p.lineWidth ?? 1) * scale);
+                this.wasm.drawPolyline(closePoints(p.points), matrix, parseBrushColor(p.stroke), screenStroke(p.lineWidth));
         }
         else if (p.type === 'rect') {
             const pts = [p.x, p.y, p.x + p.width, p.y, p.x + p.width, p.y + p.height, p.x, p.y + p.height, p.x, p.y];
             if (p.fill)
                 this.wasm.drawPolygon(pts, matrix, parseBrushColor(p.fill));
             if (p.stroke)
-                this.wasm.drawPolyline(pts, matrix, parseBrushColor(p.stroke), (p.lineWidth ?? 1) * scale);
+                this.wasm.drawPolyline(pts, matrix, parseBrushColor(p.stroke), screenStroke(p.lineWidth));
         }
         else if (p.type === 'path') {
             const subs = flattenPath(p.commands, 0.5);
@@ -174,7 +177,7 @@ export class W2dRenderer {
                         this.wasm.drawPolygon(s.points, matrix, fill);
             if (stroke)
                 for (const s of subs)
-                    this.wasm.drawPolyline(s.points, matrix, stroke, (p.lineWidth ?? 1) * scale);
+                    this.wasm.drawPolyline(s.points, matrix, stroke, screenStroke(p.lineWidth));
         }
         return 1;
     }

package/dist/render/WebGlW2dBackend.d.ts

@@ -1,6 +1,7 @@
 import type { Diagnostic } from '../format/types.js';
 import type { W2dTextPageData } from '../format/document.js';
-export interface WebGlW2dRenderOptions {
+import { type CadLineStyleOptions } from './cadLineStyle.js';
+export interface WebGlW2dRenderOptions extends CadLineStyleOptions {
     zoom?: number;
     panX?: number;
     panY?: number;

package/dist/render/WebGlW2dBackend.js

@@ -1,6 +1,7 @@
 import { diag } from '../format/types.js';
 import { flattenPath } from './xpsPath.js';
 import { colorToRgba32, multiplyMatrix, transformPoint } from './style.js';
+import { adaptiveStrokeUserWidth, canvasDpr, estimateMatrixScale } from './cadLineStyle.js';
 import { matrixForW2d } from './viewport.js';
 const VERTEX_STRIDE = 12;
 const DEFAULT_MAX_GPU_CACHE_BYTES = 96 * 1024 * 1024;
@@ -38,11 +39,13 @@ export class WebGlW2dBackend {
             return { commands: 0, warnings, gpuBytes: this.gpuBytes, vertexCount: 0, textCount: 0, cacheHit: true };
         }
         this.resize(targetCanvas.width, targetCanvas.height);
-        const key = sceneKey(page);
+        const pageMatrix = matrixForW2d(page, this.canvas.width, this.canvas.height, options.zoom, options.panX, options.panY);
+        const runtime = { dpr: canvasDpr(targetCanvas), zoom: options.zoom ?? 1 };
+        const key = sceneKey(page, pageMatrix, options);
         let scene = this.scenes.get(key);
         const cacheHit = !!scene;
         if (!scene) {
-            scene = this.compileScene(page, key, options);
+            scene = this.compileScene(page, key, options, pageMatrix, runtime);
             this.scenes.set(key, scene);
             this.gpuBytes += scene.gpuBytes;
             this.evictIfNeeded(options);
@@ -59,7 +62,6 @@ export class WebGlW2dBackend {
         gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         gl.clearColor(bg[0], bg[1], bg[2], bg[3]);
         gl.clear(gl.COLOR_BUFFER_BIT);
-        const pageMatrix = matrixForW2d(page, this.canvas.width, this.canvas.height, options.zoom, options.panX, options.panY);
         gl.useProgram(this.program);
         gl.bindBuffer(gl.ARRAY_BUFFER, scene.buffer);
         gl.enableVertexAttribArray(this.aPos);
@@ -103,7 +105,7 @@ export class WebGlW2dBackend {
             this.canvas.height = height;
         }
     }
-    compileScene(page, key, options) {
+    compileScene(page, key, options, pageMatrix, runtime) {
         const writer = new VertexWriter();
         let primitiveCount = 0;
         let textCount = 0;
@@ -113,7 +115,7 @@ export class WebGlW2dBackend {
                 continue;
             }
             primitiveCount++;
-            appendPrimitive(writer, p);
+            appendPrimitive(writer, p, pageMatrix, options, runtime);
         }
         const bufferBytes = writer.byteLength;
         const maxBytes = options.maxGpuCacheBytes ?? DEFAULT_MAX_GPU_CACHE_BYTES;
@@ -187,8 +189,10 @@ export class WebGlW2dBackend {
     }
 }
 const IDENTITY_MATRIX = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
-function sceneKey(page) {
-    return `${page.id}|${page.sourcePath}|${page.primitives.length}`;
+function sceneKey(page, pageMatrix, options) {
+    const mode = options.lineWeightMode ?? 'adaptive';
+    const scaleBucket = mode === 'physical' ? 'physical' : String(Math.round(Math.log2(Math.max(1e-12, estimateMatrixScale(pageMatrix))) * 8));
+    return `${page.id}|${page.sourcePath}|${page.primitives.length}|lw:${mode}:${scaleBucket}`;
 }
 class VertexWriter {
     constructor() {
@@ -226,10 +230,11 @@ class VertexWriter {
         this.view = new DataView(this.buffer);
     }
 }
-function appendPrimitive(writer, p) {
+function appendPrimitive(writer, p, pageMatrix, options, runtime) {
     const m = p.matrix ?? IDENTITY_MATRIX;
     const matrixScale = estimateScale(m);
-    const lineWidth = Math.max(0.1, (p.lineWidth ?? 1) * matrixScale);
+    const fullMatrix = multiplyMatrix(pageMatrix, m);
+    const lineWidth = Math.max(0.01, adaptiveStrokeUserWidth(p.lineWidth ?? 1, fullMatrix, options, runtime) * matrixScale);
     if (p.type === 'polyline') {
         const color = rgbaBytes(p.stroke ?? '#000000');
         appendPolyline(writer, transformPointsArray(p.points, m), lineWidth, color);

package/dist/render/XpsRenderer.d.ts

@@ -1,6 +1,7 @@
 import { type RenderStats } from '../format/types.js';
 import type { LoadedDwfDocument, XpsPageData } from '../format/document.js';
-export interface XpsRenderOptions {
+import { type CadLineStyleOptions } from './cadLineStyle.js';
+export interface XpsRenderOptions extends CadLineStyleOptions {
     zoom?: number;
     panX?: number;
     panY?: number;
@@ -11,10 +12,14 @@ export interface XpsRenderOptions {
 export declare class XpsRenderer {
     private readonly document;
     private wasm?;
+    private readonly fontCache;
     constructor(document: LoadedDwfDocument);
     render(page: XpsPageData, canvas: HTMLCanvasElement, options?: XpsRenderOptions): Promise<RenderStats>;
     private renderElementToCanvas;
     private renderElementToWasm;
+    private drawGlyphs;
+    private fontFamilyForGlyphs;
+    private loadFontFace;
     private drawImageResource;
     private drawImageBrush;
 }

package/dist/render/XpsRenderer.js

@@ -2,11 +2,13 @@ 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';
 export class XpsRenderer {
     constructor(document) {
         this.document = document;
+        this.fontCache = new Map();
     }
     async render(page, canvas, options = {}) {
         const opc = this.document.opc;
@@ -20,6 +22,7 @@ export class XpsRenderer {
         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.preferWasm) {
@@ -27,10 +30,10 @@ export class XpsRenderer {
                 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 +45,10 @@ 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) {
+    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 +71,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 +87,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 +122,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 +140,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 +149,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 +158,66 @@ 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(/^\//, ''));
+        if (/\.odttf$/i.test(part))
+            return undefined;
+        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;
+        const bytes = await this.document.opc.readBytes(part);
+        const family = `dwfv_xps_${hashString(part)}`;
+        const blob = new Blob([bytes], { type: mimeFromPath(part) ?? 'font/ttf' });
+        const url = URL.createObjectURL(blob);
+        const face = new FontFaceCtor(family, `url("${url}")`);
+        await face.load();
+        fontSet.add(face);
+        return family;
+    }
     async drawImageResource(ctx, pagePath, source, matrix, opacity, el) {
         const opc = this.document.opc;
         const src = resolvePart(pagePath, source.replace(/^\//, ''));
@@ -202,6 +252,92 @@ 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 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,6 +42,11 @@ 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;
@@ -47,6 +57,7 @@ export declare class DwfViewer {
     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

@@ -21,6 +21,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 +74,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 +95,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();
@@ -109,7 +124,12 @@ export class DwfViewer {
             maxCachedScenes: this.maxCachedScenes,
             webglCanvas: this.webglCanvas,
             yaw: this.yaw,
-            pitch: this.pitch
+            pitch: this.pitch,
+            lineWeightMode: this.lineWeightMode,
+            minStrokeCssPx: this.minStrokeCssPx,
+            maxOverviewStrokeCssPx: this.maxOverviewStrokeCssPx,
+            minTextCssPx: this.minTextCssPx,
+            minFilledAreaCssPx: this.minFilledAreaCssPx
         });
         this.pendingRender = task;
         try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyfish-dev/dwf-viewer",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "private": false,
   "type": "module",
   "description": "Pure frontend DWF/DWFx viewer with W2D WebGL rendering, W3D/HSF Three.js 3D rendering, DWFx/XPS support, and optional WASM raster fallback.",
@@ -22,6 +22,8 @@
     "hsf",
     "xps",
     "cad",
+    "lineweight",
+    "line-width",
     "viewer",
     "webgl",
     "threejs",
@@ -75,7 +77,7 @@
     "publish:scoped": "node scripts/publish-npm.mjs @flyfish-dev/dwf-viewer",
     "publish:all": "node scripts/publish-npm.mjs dwf-viewer @flyfish-dev/dwf-viewer",
     "demo:serve": "npm run build:demo && python3 -m http.server 8080 -d demo-dist",
-    "deploy:pages": "npm run build:demo && npx wrangler pages deploy demo-dist"
+    "deploy:pages": "npm run build:demo && npx wrangler pages deploy demo-dist --project-name=dwf-viewer-demo --branch=main"
   },
   "devDependencies": {
     "typescript": "^4.9.5"