@file-viewer/renderer-drawing 2.1.2 → 2.1.4

package/dist/diagram.d.ts

@@ -1,4 +1,4 @@
-import type { FileViewerDrawingOptions, FileViewerThemeMode } from '@file-viewer/core';
+import { type FileViewerDrawingOptions, type FileViewerOptions, type FileViewerThemeMode } from '@file-viewer/core';
 export type DiagramKind = 'mermaid' | 'plantuml';
 export interface DiagramController {
     setZoom: (scale: number) => void;
@@ -13,6 +13,7 @@ interface RenderDiagramParams {
     kind: DiagramKind;
     options?: FileViewerDrawingOptions;
     theme?: FileViewerThemeMode;
+    viewerOptions?: FileViewerOptions;
 }
-export declare const renderDiagram: ({ documentRef, text, target, kind, options, theme }: RenderDiagramParams) => Promise<DiagramController>;
+export declare const renderDiagram: ({ documentRef, text, target, kind, options, theme, viewerOptions }: RenderDiagramParams) => Promise<DiagramController>;
 export {};

package/dist/diagram.js

@@ -1,3 +1,4 @@
+import { createFileViewerTranslator } from '@file-viewer/core';
 import Panzoom, {} from '@panzoom/panzoom';
 const getOwnerWindow = (documentRef) => {
     return documentRef.defaultView || (typeof window !== 'undefined' ? window : undefined);
@@ -28,11 +29,11 @@ const normalizePlantumlServer = (documentRef, value) => {
         return normalized;
     }
 };
-const sanitizeSvg = (documentRef, svg) => {
+const sanitizeSvg = (documentRef, svg, t) => {
     const parsed = new DOMParser().parseFromString(svg, 'image/svg+xml');
     const parseError = parsed.querySelector('parsererror');
     if (parseError) {
-        throw new Error(parseError.textContent || 'SVG 解析失败');
+        throw new Error(parseError.textContent || t('drawing.error.svgParseFailed'));
     }
     parsed.querySelectorAll('script,iframe,object,embed').forEach(node => node.remove());
     parsed.querySelectorAll('*').forEach(node => {
@@ -45,7 +46,7 @@ const sanitizeSvg = (documentRef, svg) => {
     const svgNode = parsed.documentElement;
     return documentRef.importNode(svgNode, true);
 };
-const renderMermaidSvg = async (documentRef, text, theme) => {
+const renderMermaidSvg = async (documentRef, text, theme, t) => {
     const mermaidModule = await import('mermaid');
     const mermaid = mermaidModule.default;
     const id = `file-viewer-mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`;
@@ -55,7 +56,7 @@ const renderMermaidSvg = async (documentRef, text, theme) => {
         theme: isDarkTheme(documentRef, theme) ? 'dark' : 'default'
     });
     const rendered = await mermaid.render(id, text);
-    return sanitizeSvg(documentRef, rendered.svg);
+    return sanitizeSvg(documentRef, rendered.svg, t);
 };
 const appendSvgText = (documentRef, parent, text, x, dy, weight = '500') => {
     const line = documentRef.createElementNS('http://www.w3.org/2000/svg', 'tspan');
@@ -121,7 +122,7 @@ const renderPlantumlFallbackSvg = (documentRef, text, message) => {
     svg.appendChild(source);
     return svg;
 };
-const renderPlantumlSvg = async (documentRef, text, options) => {
+const renderPlantumlSvg = async (documentRef, text, options, t) => {
     if (!options?.plantumlServerUrl) {
         return renderPlantumlFallbackSvg(documentRef, text, 'Offline mode is active. Configure options.drawing.plantumlServerUrl for server-rendered PlantUML SVG.');
     }
@@ -135,9 +136,9 @@ const renderPlantumlSvg = async (documentRef, text, options) => {
             signal: controller.signal
         });
         if (!response.ok) {
-            throw new Error(`PlantUML SVG 渲染失败：${response.status}`);
+            throw new Error(t('drawing.error.plantumlRenderFailed', { status: response.status }));
         }
-        return sanitizeSvg(documentRef, await response.text());
+        return sanitizeSvg(documentRef, await response.text(), t);
     }
     catch (error) {
         if (error instanceof DOMException && error.name === 'AbortError') {
@@ -162,14 +163,15 @@ const applySvgDefaults = (svg, kind) => {
         svg.setAttribute('height', String(Math.ceil(svg.viewBox.baseVal.height)));
     }
 };
-export const renderDiagram = async ({ documentRef, text, target, kind, options, theme }) => {
+export const renderDiagram = async ({ documentRef, text, target, kind, options, theme, viewerOptions }) => {
+    const t = createFileViewerTranslator(viewerOptions);
     const shell = createElement(documentRef, 'div', 'drawing-diagram-shell');
     const panTarget = createElement(documentRef, 'div', 'drawing-diagram-pan');
     shell.appendChild(panTarget);
     target.replaceChildren(shell);
     const svg = kind === 'mermaid'
-        ? await renderMermaidSvg(documentRef, text, theme)
-        : await renderPlantumlSvg(documentRef, text, options);
+        ? await renderMermaidSvg(documentRef, text, theme, t)
+        : await renderPlantumlSvg(documentRef, text, options, t);
     applySvgDefaults(svg, kind);
     panTarget.replaceChildren(svg);
     const panzoom = Panzoom(panTarget, {

package/dist/drawing.js

@@ -1,4 +1,4 @@
-import { createFileViewerZoomChangeEmitter, registerFileViewerZoomProvider, readFileViewerText, resolveFileViewerDrawioViewerScriptUrl, waitForFileViewerNextPaint, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
+import { createFileViewerTranslator, createFileViewerZoomChangeEmitter, registerFileViewerZoomProvider, readFileViewerText, resolveFileViewerDrawioViewerScriptUrl, waitForFileViewerNextPaint, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const EXCALIDRAW_OFFICIAL_TIMEOUT = 6000;
 const DRAWIO_OFFICIAL_TIMEOUT = 6000;
@@ -139,7 +139,7 @@ const deleteDiagramsViewerPromise = (documentRef, scriptUrl) => {
         diagramsViewerPromises.delete(documentRef);
     }
 };
-const loadDiagramsViewer = (documentRef, scriptUrl) => {
+const loadDiagramsViewer = (documentRef, scriptUrl, t) => {
     const ownerWindow = documentRef.defaultView || (typeof window !== 'undefined' ? window : undefined);
     if (ownerWindow?.GraphViewer) {
         return Promise.resolve();
@@ -155,14 +155,14 @@ const loadDiagramsViewer = (documentRef, scriptUrl) => {
             .find(script => script.src === scriptUrl);
         if (existed) {
             existed.addEventListener('load', () => resolve(), { once: true });
-            existed.addEventListener('error', () => reject(new Error('diagrams.net viewer 加载失败')), { once: true });
+            existed.addEventListener('error', () => reject(new Error(t('drawing.error.viewerLoadFailed'))), { once: true });
             return;
         }
         const script = documentRef.createElement('script');
         script.src = scriptUrl;
         script.async = true;
         script.onload = () => resolve();
-        script.onerror = () => reject(new Error('diagrams.net viewer 加载失败'));
+        script.onerror = () => reject(new Error(t('drawing.error.viewerLoadFailed')));
         documentRef.head.appendChild(script);
     });
     promiseMap.set(scriptUrl, nextPromise);
@@ -446,16 +446,16 @@ const renderOfficialExcalidraw = async (payload, elements, target) => {
         setTimeout(restoreConsole, 3000);
     }
 };
-const renderExcalidraw = async (documentRef, text, target) => {
+const renderExcalidraw = async (documentRef, text, target, t) => {
     const payload = JSON.parse(text);
     const elements = Array.isArray(payload.elements)
         ? payload.elements.filter((element) => !element.isDeleted)
         : [];
     if (!elements.length) {
-        throw new Error('Excalidraw 文件中没有可预览图元');
+        throw new Error(t('drawing.error.excalidrawEmpty'));
     }
     try {
-        await runWithTimeout(renderOfficialExcalidraw(payload, elements, target), EXCALIDRAW_OFFICIAL_TIMEOUT, 'Excalidraw 官方导出超时，自动切换 rough.js 兼容渲染');
+        await runWithTimeout(renderOfficialExcalidraw(payload, elements, target), EXCALIDRAW_OFFICIAL_TIMEOUT, t('drawing.error.excalidrawTimeout'));
     }
     catch (error) {
         console.warn(error);
@@ -550,17 +550,17 @@ const appendDrawioWrappedText = (documentRef, svg, text, x, y, width, height, fo
     });
     svg.appendChild(textNode);
 };
-const renderDrawioFallback = (documentRef, text, target) => {
+const renderDrawioFallback = (documentRef, text, target, t) => {
     const parser = new DOMParser();
     const parsed = parser.parseFromString(text, 'text/xml');
     const parseError = parsed.querySelector('parsererror');
     if (parseError) {
-        throw new Error(`Draw.io XML 解析失败：${parseError.textContent || 'invalid xml'}`);
+        throw new Error(t('drawing.error.drawioParseFailed', { message: parseError.textContent || 'invalid xml' }));
     }
     const firstDiagram = parsed.querySelector('diagram');
     const graphModel = firstDiagram?.querySelector('mxGraphModel') || parsed.querySelector('mxGraphModel');
     if (!graphModel) {
-        throw new Error('当前 Draw.io 文件没有可直接渲染的 mxGraphModel。');
+        throw new Error(t('drawing.error.drawioNoModel'));
     }
     const cells = Array.from(graphModel.querySelectorAll('mxCell'));
     const vertices = cells
@@ -574,7 +574,7 @@ const renderDrawioFallback = (documentRef, text, target) => {
     }))
         .filter(item => item.id && item.geometry);
     if (!vertices.length) {
-        throw new Error('当前 Draw.io 文件没有可预览图元。');
+        throw new Error(t('drawing.error.drawioNoElements'));
     }
     const vertexById = new Map(vertices.map(vertex => [vertex.id, vertex]));
     const allX = vertices.flatMap(vertex => [vertex.geometry.x, vertex.geometry.x + vertex.geometry.width]);
@@ -716,9 +716,9 @@ const renderDrawioFallback = (documentRef, text, target) => {
     }
     appendRenderedSvg(target, svg, 'rough');
 };
-const renderOfficialDrawio = async (documentRef, text, target, scriptUrl) => {
+const renderOfficialDrawio = async (documentRef, text, target, scriptUrl, t) => {
     const ownerWindow = documentRef.defaultView || (typeof window !== 'undefined' ? window : undefined);
-    await loadDiagramsViewer(documentRef, scriptUrl);
+    await loadDiagramsViewer(documentRef, scriptUrl, t);
     await waitForFileViewerNextPaint(ownerWindow);
     const host = createElement(documentRef, 'div', 'mxgraph drawing-mxgraph');
     host.setAttribute('data-mxgraph', JSON.stringify({
@@ -736,31 +736,32 @@ const renderOfficialDrawio = async (documentRef, text, target, scriptUrl) => {
     }));
     target.appendChild(host);
     if (!ownerWindow?.GraphViewer) {
-        throw new Error('diagrams.net viewer 未正确初始化');
+        throw new Error(t('drawing.error.viewerInitFailed'));
     }
     ownerWindow.GraphViewer.createViewerForElement(host);
     markRendered(target, 'official');
 };
-const renderDrawio = async (documentRef, text, target, options) => {
+const renderDrawio = async (documentRef, text, target, options, t) => {
     if (options?.preferOfficial === false) {
-        renderDrawioFallback(documentRef, text, target);
+        renderDrawioFallback(documentRef, text, target, t);
         return;
     }
     const scriptUrl = resolveDrawingViewerScriptUrl(options, documentRef);
     try {
-        await runWithTimeout(renderOfficialDrawio(documentRef, text, target, scriptUrl), DRAWIO_OFFICIAL_TIMEOUT, 'diagrams.net 官方 Viewer 加载超时，自动切换本地 SVG 预览');
+        await runWithTimeout(renderOfficialDrawio(documentRef, text, target, scriptUrl, t), DRAWIO_OFFICIAL_TIMEOUT, t('drawing.error.drawioTimeout'));
     }
     catch (error) {
         console.warn(error);
         deleteDiagramsViewerPromise(documentRef, scriptUrl);
         delete target.dataset.drawingRendered;
         target.replaceChildren();
-        renderDrawioFallback(documentRef, text, target);
+        renderDrawioFallback(documentRef, text, target, t);
     }
 };
 export default async function renderDrawing(buffer, target, type = 'drawio', context) {
     const documentRef = target.ownerDocument || document;
     const kind = normalizeDrawingType(type);
+    const t = createFileViewerTranslator(context?.options);
     const zoomEmitter = createFileViewerZoomChangeEmitter();
     let status = 'loading';
     let errorMessage = '';
@@ -772,23 +773,23 @@ export default async function renderDrawing(buffer, target, type = 'drawio', con
     const toolbar = createElement(documentRef, 'div', 'drawing-toolbar');
     const title = createElement(documentRef, 'div', 'drawing-title');
     title.append(createElement(documentRef, 'span', undefined, formatDrawingLabel(type)), createElement(documentRef, 'strong', undefined, kind === 'excalidraw'
-        ? 'Excalidraw 官方 SVG 预览'
+        ? t('drawing.title.excalidraw')
         : kind === 'mermaid'
-            ? 'Mermaid SVG 预览'
+            ? t('drawing.title.mermaid')
             : kind === 'plantuml'
-                ? 'PlantUML SVG 预览'
-                : 'Draw.io 离线 SVG 预览'));
+                ? t('drawing.title.plantuml')
+                : t('drawing.title.drawio')));
     const actions = createElement(documentRef, 'div', 'drawing-actions');
     const zoomOutButton = createElement(documentRef, 'button', undefined, '-');
     const zoomLabel = createElement(documentRef, 'span');
     const zoomInButton = createElement(documentRef, 'button', undefined, '+');
-    const resetButton = createElement(documentRef, 'button', undefined, '适合');
+    const resetButton = createElement(documentRef, 'button', undefined, t('drawing.toolbar.fit'));
     [zoomOutButton, zoomInButton, resetButton].forEach(button => {
         button.type = 'button';
     });
-    zoomOutButton.title = '缩小';
-    zoomInButton.title = '放大';
-    resetButton.title = '适合宽度';
+    zoomOutButton.title = t('drawing.toolbar.zoomOut');
+    zoomInButton.title = t('drawing.toolbar.zoomIn');
+    resetButton.title = t('drawing.toolbar.fitWidth');
     actions.append(zoomOutButton, zoomLabel, zoomInButton, resetButton);
     toolbar.append(title, actions);
     const stageWrapper = createElement(documentRef, 'div', 'drawing-stage');
@@ -843,7 +844,7 @@ export default async function renderDrawing(buffer, target, type = 'drawio', con
         state.classList.toggle('error', status === 'error');
         state.textContent = status === 'error'
             ? errorMessage
-            : '正在加载绘图预览...';
+            : t('drawing.state.loading');
         applyZoom();
     };
     const loadDrawing = async () => {
@@ -858,7 +859,7 @@ export default async function renderDrawing(buffer, target, type = 'drawio', con
                 return;
             }
             if (kind === 'excalidraw') {
-                await renderExcalidraw(documentRef, text, canvas);
+                await renderExcalidraw(documentRef, text, canvas, t);
             }
             else if (kind === 'mermaid' || kind === 'plantuml') {
                 const { renderDiagram } = await import('./diagram.js');
@@ -869,10 +870,11 @@ export default async function renderDrawing(buffer, target, type = 'drawio', con
                     kind,
                     options: context?.options?.drawing,
                     theme: context?.options?.theme,
+                    viewerOptions: context?.options,
                 });
             }
             else {
-                await renderDrawio(documentRef, text, canvas, context?.options?.drawing);
+                await renderDrawio(documentRef, text, canvas, context?.options?.drawing, t);
             }
             if (disposed) {
                 return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-drawing",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "private": false,
   "type": "module",
   "description": "Standalone Draw.io, Excalidraw, Mermaid, and PlantUML renderer plugin for Flyfish File Viewer with pan/zoom support.",
@@ -57,7 +57,7 @@
   ],
   "dependencies": {
     "@excalidraw/excalidraw": "^0.18.1",
-    "@file-viewer/core": "^2.1.2",
+    "@file-viewer/core": "^2.1.4",
     "@panzoom/panzoom": "^4.6.2",
     "mermaid": "^11.15.0",
     "plantuml-encoder": "^1.4.0",