@file-viewer/renderer-cad 3.0.1 → 3.0.2

package/README.en.md

@@ -49,3 +49,17 @@ For private deployments, override them with `options.cad.wasmPath`, `options.cad
 ## Migration Note
 
 CAD preview has moved completely out of `@file-viewer/core`. Core now only keeps the asset manifest, shared types, and a compatibility error message, and it no longer installs `@flyfish-dev/cad-viewer` by default. Install this package and pass it through `renderers`, or use `@file-viewer/preset-all` for the complete CAD experience.
+
+## Monochrome plot mode
+
+Set `cad.colorMode` to `source` or `monochrome`. Monochrome rendering uses the CAD engine's entity-color policy rather than a CSS filter, keeping Canvas, WebGL, text overlays and native DWF output consistent while preserving alpha, line types, line weights and source data.
+
+```ts
+{
+  cad: {
+    colorMode: 'monochrome',
+    monochromeColor: '#000000',
+    showColorModeToggle: true,
+  },
+}
+```

package/README.md

@@ -49,3 +49,17 @@ const options = {
 ## 迁移说明
 
 CAD 预览已经从 `@file-viewer/core` 中彻底移出，core 只保留资产 manifest、类型和兼容错误提示，不再默认安装 `@flyfish-dev/cad-viewer`。完整 CAD 能力请安装本包并传入 `renderers`，或直接使用 `@file-viewer/preset-all`。
+
+## 黑白出图模式
+
+`cad.colorMode` 可设为 `source` 或 `monochrome`。黑白模式通过 CAD 引擎的实体颜色策略实现，不使用 CSS 滤镜，因此 Canvas、WebGL、文字覆盖层及原生 DWF 渲染可保持一致，同时保留透明度、线型、线宽和源文件数据。
+
+```ts
+{
+  cad: {
+    colorMode: 'monochrome',
+    monochromeColor: '#000000',
+    showColorModeToggle: true,
+  },
+}
+```

package/dist/cad.js

@@ -1,6 +1,7 @@
 import { CadViewer, inferEntityKind, } from '@flyfish-dev/cad-viewer';
 import { resolveFileViewerCadAssetUrls, resolveFileViewerRuntimeAssetBaseUrl, } from '@file-viewer/core/assets';
 import { createFileViewerViewStateChange, createFileViewerViewStateChangeEmitter, createFileViewerTranslator, createFileViewerZoomChangeEmitter, registerFileViewerViewStateProvider, registerFileViewerZoomProvider, resolveFileViewerLocale, unregisterFileViewerViewStateProvider, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
+import { applyCadViewerColorMode, normalizeFileViewerCadColorMode, resolveFileViewerCadMonochromeColor, resolveCadViewerSourceDocument, supportsCadViewerColorMode, } from './colorMode.js';
 const CAD_WORKER_TIMEOUT = 120000;
 const CAD_DEFAULT_FIT_PADDING = 0.92;
 const CAD_BOUNDS_EPSILON = 1e-9;
@@ -14,6 +15,9 @@ const cadStyle = `
 .cad-tools,.cad-meta{display:flex;align-items:center;gap:8px}
 .cad-tools button{min-width:34px;min-height:30px;border:0;border-radius:8px;background:rgba(15,23,42,.06);color:#25344c;cursor:pointer;font-weight:800;letter-spacing:0;transition:background-color .18s ease,color .18s ease}
 .cad-tools button:hover{background:rgba(31,150,110,.14);color:#0f8f62}
+.cad-tools button.cad-color-mode{min-width:52px;padding:0 10px;font-size:12px}
+.cad-tools button.cad-color-mode[aria-pressed='true']{background:#0f172a;color:#fff}
+.cad-tools button.cad-color-mode:disabled{cursor:not-allowed;opacity:.46}
 .cad-zoom,.cad-meta span{color:#64748b;font-size:12px;font-weight:800;letter-spacing:0}
 .cad-meta span{border-radius:999px;padding:5px 9px;background:rgba(15,23,42,.06)}
 .cad-body{display:grid;min-height:0;flex:1;grid-template-columns:minmax(176px,236px) minmax(0,1fr) minmax(142px,176px);background:#eef2f7}
@@ -648,6 +652,8 @@ export default async function renderCad(buffer, target, type = 'dxf', context) {
     const options = ((_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.cad) || {};
     const t = createFileViewerTranslator(context === null || context === void 0 ? void 0 : context.options);
     const locale = resolveFileViewerLocale(context === null || context === void 0 ? void 0 : context.options);
+    const monochromeColor = resolveFileViewerCadMonochromeColor(options.monochromeColor);
+    let colorMode = normalizeFileViewerCadColorMode(options.colorMode);
     let status = 'loading';
     let progressMessage = t('cad.state.loadingViewer');
     let errorMessage = '';
@@ -672,16 +678,18 @@ export default async function renderCad(buffer, target, type = 'dxf', context) {
     const zoomOutButton = createElement('button', undefined, '-');
     const zoomText = createElement('span', 'cad-zoom', '100%');
     const zoomInButton = createElement('button', undefined, '+');
+    const colorModeButton = createElement('button', 'cad-color-mode');
+    colorModeButton.hidden = options.showColorModeToggle === false;
     const meta = createElement('div', 'cad-meta');
     const typeMeta = createElement('span', undefined, normalizedType.toUpperCase());
     const backendMeta = createElement('span', undefined, 'AUTO');
-    [fitButton, zoomOutButton, zoomInButton].forEach(button => {
+    [fitButton, zoomOutButton, zoomInButton, colorModeButton].forEach(button => {
         button.type = 'button';
     });
     fitButton.title = t('cad.toolbar.fit');
     zoomOutButton.title = t('cad.toolbar.zoomOut');
     zoomInButton.title = t('cad.toolbar.zoomIn');
-    tools.append(fitButton, zoomOutButton, zoomText, zoomInButton);
+    tools.append(fitButton, zoomOutButton, zoomText, zoomInButton, colorModeButton);
     meta.append(typeMeta, backendMeta);
     toolbar.append(tools, meta);
     const body = createElement('div', 'cad-body without-layers');
@@ -749,6 +757,8 @@ export default async function renderCad(buffer, target, type = 'dxf', context) {
             status,
             view: viewState ? { ...viewState } : null,
             backend: renderStats === null || renderStats === void 0 ? void 0 : renderStats.backend,
+            colorMode,
+            monochromeColor: colorMode === 'monochrome' ? monochromeColor : undefined,
             layerCount: layers.length,
             visibleLayers: layers
                 .filter(layer => layer.isVisible !== false && !layer.isFrozen)
@@ -885,12 +895,15 @@ export default async function renderCad(buffer, target, type = 'dxf', context) {
                 : layer.name;
             button.setAttribute('aria-pressed', String(layerVisible));
             const color = createElement('span', 'cad-layer-color');
-            if (typeof layer.color === 'string') {
+            if (colorMode === 'monochrome') {
+                color.style.background = monochromeColor;
+            }
+            else if (typeof layer.color === 'string') {
                 color.style.background = layer.color;
             }
             button.append(color, createElement('span', undefined, layer.name));
             button.addEventListener('click', () => {
-                const document = viewer === null || viewer === void 0 ? void 0 : viewer.getDocument();
+                const document = resolveCadViewerSourceDocument(viewer);
                 if (!document) {
                     return;
                 }
@@ -917,6 +930,15 @@ export default async function renderCad(buffer, target, type = 'dxf', context) {
     const syncState = () => {
         zoomText.textContent = `${getZoomPercent()}%`;
         backendMeta.textContent = ((renderStats === null || renderStats === void 0 ? void 0 : renderStats.backend) || 'auto').toUpperCase();
+        const colorModeSupported = supportsCadViewerColorMode(viewer);
+        colorModeButton.disabled = status !== 'ready' || !colorModeSupported;
+        colorModeButton.setAttribute('aria-pressed', String(colorMode === 'monochrome'));
+        colorModeButton.textContent = t(colorMode === 'monochrome'
+            ? 'cad.toolbar.monochrome'
+            : 'cad.toolbar.colorSource');
+        colorModeButton.title = t(colorMode === 'monochrome'
+            ? 'cad.toolbar.colorSource'
+            : 'cad.toolbar.monochrome');
         state.hidden = status === 'ready';
         state.classList.toggle('error', status === 'error');
         if (status === 'loading') {
@@ -1054,6 +1076,17 @@ export default async function renderCad(buffer, target, type = 'dxf', context) {
     fitButton.addEventListener('click', () => fitToView());
     zoomInButton.addEventListener('click', zoomIn);
     zoomOutButton.addEventListener('click', zoomOut);
+    colorModeButton.addEventListener('click', () => {
+        const previousMode = colorMode;
+        colorMode = colorMode === 'monochrome' ? 'source' : 'monochrome';
+        if (!applyCadViewerColorMode(viewer, colorMode, monochromeColor)) {
+            colorMode = previousMode;
+            syncState();
+            return;
+        }
+        syncUi();
+        emitCadViewStateChange('cad-view-change', 'user');
+    });
     const createViewer = () => {
         var _a, _b, _c, _d, _e, _f, _g;
         const { wasmPath, workerUrl, dwfWasmUrl } = resolveFileViewerCadAssetUrls(options, getCadDocumentBaseUrl(target));
@@ -1094,6 +1127,7 @@ export default async function renderCad(buffer, target, type = 'dxf', context) {
             dwfMaxOverviewStrokeCssPx: options.dwfMaxOverviewStrokeCssPx,
             dwfMinTextCssPx: options.dwfMinTextCssPx,
             dwfMinFilledAreaCssPx: options.dwfMinFilledAreaCssPx,
+            ...{ colorMode, monochromeColor },
             autoFit: true,
             canvasOptions,
             onLoadProgress: updateProgress,

package/dist/colorMode.d.ts

@@ -0,0 +1,11 @@
+import type { FileViewerCadColorMode } from '@file-viewer/core';
+export interface CadViewerColorModeAdapter {
+    setColorMode?: (mode: FileViewerCadColorMode, monochromeColor?: string) => void;
+    getColorMode?: () => FileViewerCadColorMode;
+    getMonochromeColor?: () => string | undefined;
+}
+export declare function normalizeFileViewerCadColorMode(value: unknown): FileViewerCadColorMode;
+export declare function resolveFileViewerCadMonochromeColor(value: unknown, fallback?: string): string;
+export declare function supportsCadViewerColorMode(value: unknown): value is CadViewerColorModeAdapter;
+export declare function resolveCadViewerSourceDocument(viewer: unknown): unknown;
+export declare function applyCadViewerColorMode(viewer: unknown, mode: FileViewerCadColorMode, monochromeColor: string): boolean;

package/dist/colorMode.js

@@ -0,0 +1,23 @@
+export function normalizeFileViewerCadColorMode(value) {
+    return value === 'monochrome' ? 'monochrome' : 'source';
+}
+export function resolveFileViewerCadMonochromeColor(value, fallback = '#000000') {
+    if (typeof value === 'string' && value.trim())
+        return value.trim();
+    return fallback;
+}
+export function supportsCadViewerColorMode(value) {
+    return Boolean(value && typeof value.setColorMode === 'function');
+}
+export function resolveCadViewerSourceDocument(viewer) {
+    var _a, _b, _c;
+    const candidate = viewer;
+    return (_b = (_a = candidate === null || candidate === void 0 ? void 0 : candidate.getSourceDocument) === null || _a === void 0 ? void 0 : _a.call(candidate)) !== null && _b !== void 0 ? _b : (_c = candidate === null || candidate === void 0 ? void 0 : candidate.getDocument) === null || _c === void 0 ? void 0 : _c.call(candidate);
+}
+export function applyCadViewerColorMode(viewer, mode, monochromeColor) {
+    var _a;
+    if (!supportsCadViewerColorMode(viewer))
+        return false;
+    (_a = viewer.setColorMode) === null || _a === void 0 ? void 0 : _a.call(viewer, mode, monochromeColor);
+    return true;
+}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import { type FileRenderHandler, type FileViewerRenderedInstance, type FileViewerRendererPlugin, type RendererDefinition } from '@file-viewer/core';
+export { applyCadViewerColorMode, normalizeFileViewerCadColorMode, resolveCadViewerSourceDocument, resolveFileViewerCadMonochromeColor, supportsCadViewerColorMode, } from './colorMode.js';
+export type { CadViewerColorModeAdapter } from './colorMode.js';
 export declare const cadRendererDefinition: RendererDefinition;
 export declare const renderFileViewerCad: FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>;
 export declare const cadRenderer: FileViewerRendererPlugin<FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>>;

package/dist/index.js

@@ -1,4 +1,5 @@
 import { DEFAULT_RENDERER_DEFINITIONS, } from '@file-viewer/core';
+export { applyCadViewerColorMode, normalizeFileViewerCadColorMode, resolveCadViewerSourceDocument, resolveFileViewerCadMonochromeColor, supportsCadViewerColorMode, } from './colorMode.js';
 const cadDefinition = DEFAULT_RENDERER_DEFINITIONS.find(definition => definition.id === 'cad');
 if (!cadDefinition) {
     throw new Error('@file-viewer/renderer-cad could not locate the shared CAD format definition.');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-cad",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "private": false,
   "type": "module",
   "description": "Standalone CAD renderer plugin for File Viewer powered by @flyfish-dev/cad-viewer.",
@@ -56,8 +56,8 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "3.0.1",
-    "@flyfish-dev/cad-viewer": "0.8.0"
+    "@file-viewer/core": "3.0.2",
+    "@flyfish-dev/cad-viewer": "0.8.1"
   },
   "devDependencies": {
     "typescript": "^6.0.3"
@@ -65,6 +65,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "tsc -b tsconfig.json",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "verify:color-mode": "node scripts/verify-color-mode.mjs"
   }
 }