@file-viewer/renderer-drawing 2.0.11

package/LICENSE

@@ -0,0 +1,160 @@
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and
+distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright
+owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities
+that control, are controlled by, or are under common control with that entity.
+For the purposes of this definition, "control" means (i) the power, direct or
+indirect, to cause the direction or management of such entity, whether by
+contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
+outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising
+permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including
+but not limited to software source code, documentation source, and configuration
+files.
+
+"Object" form shall mean any form resulting from mechanical transformation or
+translation of a Source form, including but not limited to compiled object code,
+generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form,
+made available under the License, as indicated by a copyright notice that is
+included in or attached to the work.
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that
+is based on (or derived from) the Work and for which the editorial revisions,
+annotations, elaborations, or other modifications represent, as a whole, an
+original work of authorship. For the purposes of this License, Derivative Works
+shall not include works that remain separable from, or merely link (or bind by
+name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version
+of the Work and any modifications or additions to that Work or Derivative Works
+thereof, that is intentionally submitted to Licensor for inclusion in the Work by
+the copyright owner or by an individual or Legal Entity authorized to submit on
+behalf of the copyright owner. For the purposes of this definition, "submitted"
+means any form of electronic, verbal, or written communication sent to the
+Licensor or its representatives, including but not limited to communication on
+electronic mailing lists, source code control systems, and issue tracking systems
+that are managed by, or on behalf of, the Licensor for the purpose of discussing
+and improving the Work, but excluding communication that is conspicuously marked
+or otherwise designated in writing by the copyright owner as "Not a
+Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf
+of whom a Contribution has been received by Licensor and subsequently
+incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this
+License, each Contributor hereby grants to You a perpetual, worldwide,
+non-exclusive, no-charge, royalty-free, irrevocable copyright license to
+reproduce, prepare Derivative Works of, publicly display, publicly perform,
+sublicense, and distribute the Work and such Derivative Works in Source or
+Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License,
+each Contributor hereby grants to You a perpetual, worldwide, non-exclusive,
+no-charge, royalty-free, irrevocable (except as stated in this section) patent
+license to make, have made, use, offer to sell, sell, import, and otherwise
+transfer the Work, where such license applies only to those patent claims
+licensable by such Contributor that are necessarily infringed by their
+Contribution(s) alone or by combination of their Contribution(s) with the Work to
+which such Contribution(s) was submitted. If You institute patent litigation
+against any entity (including a cross-claim or counterclaim in a lawsuit)
+alleging that the Work or a Contribution incorporated within the Work
+constitutes direct or contributory patent infringement, then any patent licenses
+granted to You under this License for that Work shall terminate as of the date
+such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or
+Derivative Works thereof in any medium, with or without modifications, and in
+Source or Object form, provided that You meet the following conditions:
+
+(a) You must give any other recipients of the Work or Derivative Works a copy of
+this License; and
+
+(b) You must cause any modified files to carry prominent notices stating that
+You changed the files; and
+
+(c) You must retain, in the Source form of any Derivative Works that You
+distribute, all copyright, patent, trademark, and attribution notices from the
+Source form of the Work, excluding those notices that do not pertain to any part
+of the Derivative Works; and
+
+(d) If the Work includes a "NOTICE" text file as part of its distribution, then
+any Derivative Works that You distribute must include a readable copy of the
+attribution notices contained within such NOTICE file, excluding those notices
+that do not pertain to any part of the Derivative Works, in at least one of the
+following places: within a NOTICE text file distributed as part of the Derivative
+Works; within the Source form or documentation, if provided along with the
+Derivative Works; or, within a display generated by the Derivative Works, if and
+wherever such third-party notices normally appear. The contents of the NOTICE
+file are for informational purposes only and do not modify the License. You may
+add Your own attribution notices within Derivative Works that You distribute,
+alongside or as an addendum to the NOTICE text from the Work, provided that such
+additional attribution notices cannot be construed as modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide
+additional or different license terms and conditions for use, reproduction, or
+distribution of Your modifications, or for any such Derivative Works as a whole,
+provided Your use, reproduction, and distribution of the Work otherwise complies
+with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any
+Contribution intentionally submitted for inclusion in the Work by You to the
+Licensor shall be under the terms and conditions of this License, without any
+additional terms or conditions. Notwithstanding the above, nothing herein shall
+supersede or modify the terms of any separate license agreement you may have
+executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names,
+trademarks, service marks, or product names of the Licensor, except as required
+for reasonable and customary use in describing the origin of the Work and
+reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in
+writing, Licensor provides the Work (and each Contributor provides its
+Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied, including, without limitation, any warranties or
+conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+PARTICULAR PURPOSE. You are solely responsible for determining the
+appropriateness of using or redistributing the Work and assume any risks
+associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in
+tort (including negligence), contract, or otherwise, unless required by
+applicable law (such as deliberate and grossly negligent acts) or agreed to in
+writing, shall any Contributor be liable to You for damages, including any
+direct, indirect, special, incidental, or consequential damages of any character
+arising as a result of this License or out of the use or inability to use the
+Work (including but not limited to damages for loss of goodwill, work stoppage,
+computer failure or malfunction, or any and all other commercial damages or
+losses), even if such Contributor has been advised of the possibility of such
+damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or
+Derivative Works thereof, You may choose to offer, and charge a fee for,
+acceptance of support, warranty, indemnity, or other liability obligations and/or
+rights consistent with this License. However, in accepting such obligations, You
+may act only on Your own behalf and on Your sole responsibility, not on behalf of
+any other Contributor, and only if You agree to indemnify, defend, and hold each
+Contributor harmless for any liability incurred by, or claims asserted against,
+such Contributor by reason of your accepting any such warranty or additional
+liability.
+
+END OF TERMS AND CONDITIONS
+
+Copyright 2026 Flyfish Viewer

package/README.en.md

@@ -0,0 +1,32 @@
+# @file-viewer/renderer-drawing
+
+Standalone Draw.io, Excalidraw, Mermaid, and PlantUML renderer for Flyfish File Viewer.
+
+## Highlights
+
+- Uses the bundled diagrams.net offline viewer for `drawio` / `dio` files.
+- Uses Excalidraw's official `restore` and `exportToSvg` APIs, with a `roughjs` SVG fallback.
+- Lazy-loads the official `mermaid` renderer for `mermaid` / `mmd` files and outputs theme-aware SVG.
+- Keeps `plantuml` / `puml` files fully offline by default with an SVG source preview; configure `options.drawing.plantumlServerUrl` for full PlantUML SVG rendering through a self-hosted endpoint. When that endpoint is unavailable, the renderer still falls back to the offline preview instead of a blank view or broken image.
+- Mermaid and PlantUML previews use `@panzoom/panzoom` for drag panning, Ctrl/Command wheel zoom, and common toolbar zoom sync.
+- Supports unified zoom, print, HTML export, and `options.drawing` self-hosted asset configuration.
+- Ships as an independent renderer package for applications that only need drawing preview.
+- `@file-viewer/core` no longer bundles the drawing renderer and no longer depends directly on `@excalidraw/excalidraw`, `mermaid`, `plantuml-encoder`, `@panzoom/panzoom`, or `roughjs`.
+
+## Usage
+
+```ts
+import { createFileViewerCore, createFileViewerRendererRegistry } from '@file-viewer/core';
+import { drawingRenderer } from '@file-viewer/renderer-drawing';
+
+const registry = createFileViewerRendererRegistry({
+  renderers: [drawingRenderer],
+});
+
+const viewer = createFileViewerCore({
+  target: document.querySelector('#viewer')!,
+  rendererRegistry: registry,
+});
+```
+
+See the [official on-demand renderer guide](https://doc.file-viewer.app/guide/on-demand-renderers) for production setup.

package/README.md

@@ -0,0 +1,32 @@
+# @file-viewer/renderer-drawing
+
+Flyfish File Viewer 的独立绘图渲染器，覆盖 `drawio`、`dio`、`excalidraw`、`mermaid`、`mmd`、`plantuml` 和 `puml`。
+
+## 特性
+
+- `drawio` / `dio` 默认使用随 viewer assets 分发的 diagrams.net offline viewer。
+- `excalidraw` 使用官方 `restore` 与 `exportToSvg`，失败时回退到 `roughjs` 只读 SVG。
+- `mermaid` / `mmd` 按需加载官方 `mermaid`，输出主题适配 SVG。
+- `plantuml` / `puml` 默认保持离线 SVG 源码预览；需要完整 PlantUML 渲染时，可通过 `options.drawing.plantumlServerUrl` 指向自托管 SVG 端点，端点不可用时仍会回落到离线预览，避免白屏或 broken image。
+- Mermaid / PlantUML 预览使用 `@panzoom/panzoom` 提供拖拽平移、Ctrl/Command 滚轮缩放和统一工具栏缩放联动。
+- 支持统一缩放、打印、HTML 导出和 `options.drawing` 自托管资源配置。
+- 独立安装、独立发布，适合只需要绘图预览的业务按需装配。
+- `@file-viewer/core` 已不再内置 drawing renderer，也不再直接依赖 `@excalidraw/excalidraw`、`mermaid`、`plantuml-encoder`、`@panzoom/panzoom` 或 `roughjs`。
+
+## 使用
+
+```ts
+import { createFileViewerCore, createFileViewerRendererRegistry } from '@file-viewer/core';
+import { drawingRenderer } from '@file-viewer/renderer-drawing';
+
+const registry = createFileViewerRendererRegistry({
+  renderers: [drawingRenderer],
+});
+
+const viewer = createFileViewerCore({
+  target: document.querySelector('#viewer')!,
+  rendererRegistry: registry,
+});
+```
+
+完整按需加载方案见 [官方文档](https://doc.file-viewer.app/guide/on-demand-renderers)。

package/dist/diagram.d.ts

@@ -0,0 +1,18 @@
+import type { FileViewerDrawingOptions, FileViewerThemeMode } from '@file-viewer/core';
+export type DiagramKind = 'mermaid' | 'plantuml';
+export interface DiagramController {
+    setZoom: (scale: number) => void;
+    reset: () => void;
+    getScale: () => number;
+    destroy: () => void;
+}
+interface RenderDiagramParams {
+    documentRef: Document;
+    text: string;
+    target: HTMLElement;
+    kind: DiagramKind;
+    options?: FileViewerDrawingOptions;
+    theme?: FileViewerThemeMode;
+}
+export declare const renderDiagram: ({ documentRef, text, target, kind, options, theme }: RenderDiagramParams) => Promise<DiagramController>;
+export {};

package/dist/diagram.js

@@ -0,0 +1,205 @@
+import Panzoom, {} from '@panzoom/panzoom';
+const getOwnerWindow = (documentRef) => {
+    return documentRef.defaultView || (typeof window !== 'undefined' ? window : undefined);
+};
+const isDarkTheme = (documentRef, theme) => {
+    if (theme === 'dark') {
+        return true;
+    }
+    if (theme === 'light') {
+        return false;
+    }
+    return Boolean(getOwnerWindow(documentRef)?.matchMedia?.('(prefers-color-scheme: dark)').matches);
+};
+const createElement = (documentRef, tagName, className) => {
+    const element = documentRef.createElement(tagName);
+    if (className) {
+        element.className = className;
+    }
+    return element;
+};
+const normalizePlantumlServer = (documentRef, value) => {
+    const base = value;
+    const normalized = base.endsWith('/') ? base : `${base}/`;
+    try {
+        return new URL(normalized, documentRef.baseURI).href;
+    }
+    catch {
+        return normalized;
+    }
+};
+const sanitizeSvg = (documentRef, svg) => {
+    const parsed = new DOMParser().parseFromString(svg, 'image/svg+xml');
+    const parseError = parsed.querySelector('parsererror');
+    if (parseError) {
+        throw new Error(parseError.textContent || 'SVG 解析失败');
+    }
+    parsed.querySelectorAll('script,iframe,object,embed').forEach(node => node.remove());
+    parsed.querySelectorAll('*').forEach(node => {
+        for (const attribute of Array.from(node.attributes)) {
+            if (/^on/i.test(attribute.name)) {
+                node.removeAttribute(attribute.name);
+            }
+        }
+    });
+    const svgNode = parsed.documentElement;
+    return documentRef.importNode(svgNode, true);
+};
+const renderMermaidSvg = async (documentRef, text, theme) => {
+    const mermaidModule = await import('mermaid');
+    const mermaid = mermaidModule.default;
+    const id = `file-viewer-mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: 'strict',
+        theme: isDarkTheme(documentRef, theme) ? 'dark' : 'default'
+    });
+    const rendered = await mermaid.render(id, text);
+    return sanitizeSvg(documentRef, rendered.svg);
+};
+const appendSvgText = (documentRef, parent, text, x, dy, weight = '500') => {
+    const line = documentRef.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+    line.setAttribute('x', String(x));
+    line.setAttribute('dy', dy);
+    line.setAttribute('font-weight', weight);
+    line.textContent = text;
+    parent.appendChild(line);
+};
+const renderPlantumlFallbackSvg = (documentRef, text, message) => {
+    const width = 1100;
+    const height = 720;
+    const svg = documentRef.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    svg.setAttribute('width', String(width));
+    svg.setAttribute('height', String(height));
+    const background = documentRef.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    background.setAttribute('width', '100%');
+    background.setAttribute('height', '100%');
+    background.setAttribute('rx', '28');
+    background.setAttribute('fill', '#f8fbff');
+    svg.appendChild(background);
+    const panel = documentRef.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    panel.setAttribute('x', '42');
+    panel.setAttribute('y', '42');
+    panel.setAttribute('width', String(width - 84));
+    panel.setAttribute('height', String(height - 84));
+    panel.setAttribute('rx', '22');
+    panel.setAttribute('fill', '#ffffff');
+    panel.setAttribute('stroke', '#cbd5e1');
+    svg.appendChild(panel);
+    const title = documentRef.createElementNS('http://www.w3.org/2000/svg', 'text');
+    title.setAttribute('x', '74');
+    title.setAttribute('y', '92');
+    title.setAttribute('fill', '#0f766e');
+    title.setAttribute('font-family', 'Inter, Arial, sans-serif');
+    title.setAttribute('font-size', '24');
+    title.setAttribute('font-weight', '800');
+    title.textContent = 'PlantUML source preview';
+    svg.appendChild(title);
+    const note = documentRef.createElementNS('http://www.w3.org/2000/svg', 'text');
+    note.setAttribute('x', '74');
+    note.setAttribute('y', '128');
+    note.setAttribute('fill', '#64748b');
+    note.setAttribute('font-family', 'Inter, Arial, sans-serif');
+    note.setAttribute('font-size', '15');
+    note.textContent = message;
+    svg.appendChild(note);
+    const source = documentRef.createElementNS('http://www.w3.org/2000/svg', 'text');
+    source.setAttribute('x', '74');
+    source.setAttribute('y', '172');
+    source.setAttribute('fill', '#172033');
+    source.setAttribute('font-family', 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace');
+    source.setAttribute('font-size', '16');
+    source.setAttribute('xml:space', 'preserve');
+    const lines = text.replace(/\r\n?/g, '\n').split('\n').slice(0, 26);
+    lines.forEach((line, index) => {
+        appendSvgText(documentRef, source, line.slice(0, 110), 74, index === 0 ? '0' : '24', /^\s*@/.test(line) ? '800' : '500');
+    });
+    if (lines.length < text.split('\n').length) {
+        appendSvgText(documentRef, source, '... truncated for preview ...', 74, '24', '700');
+    }
+    svg.appendChild(source);
+    return svg;
+};
+const renderPlantumlSvg = async (documentRef, text, options) => {
+    if (!options?.plantumlServerUrl) {
+        return renderPlantumlFallbackSvg(documentRef, text, 'Offline mode is active. Configure options.drawing.plantumlServerUrl for server-rendered PlantUML SVG.');
+    }
+    const { encode } = await import('plantuml-encoder');
+    const url = `${normalizePlantumlServer(documentRef, options.plantumlServerUrl)}${encode(text)}`;
+    const ownerWindow = getOwnerWindow(documentRef);
+    const controller = new AbortController();
+    const timeout = ownerWindow?.setTimeout(() => controller.abort(), Math.max(1000, options?.plantumlTimeoutMs || 8000));
+    try {
+        const response = await fetch(url, {
+            signal: controller.signal
+        });
+        if (!response.ok) {
+            throw new Error(`PlantUML SVG 渲染失败：${response.status}`);
+        }
+        return sanitizeSvg(documentRef, await response.text());
+    }
+    catch (error) {
+        if (error instanceof DOMException && error.name === 'AbortError') {
+            throw error;
+        }
+        return renderPlantumlFallbackSvg(documentRef, text, 'Configure options.drawing.plantumlServerUrl for full PlantUML SVG rendering.');
+    }
+    finally {
+        if (timeout !== undefined) {
+            ownerWindow?.clearTimeout(timeout);
+        }
+    }
+};
+const applySvgDefaults = (svg, kind) => {
+    svg.classList.add('drawing-svg', 'drawing-diagram-svg');
+    svg.setAttribute('role', 'img');
+    svg.setAttribute('aria-label', `${kind} diagram preview`);
+    if (!svg.getAttribute('width') && svg.viewBox.baseVal.width) {
+        svg.setAttribute('width', String(Math.ceil(svg.viewBox.baseVal.width)));
+    }
+    if (!svg.getAttribute('height') && svg.viewBox.baseVal.height) {
+        svg.setAttribute('height', String(Math.ceil(svg.viewBox.baseVal.height)));
+    }
+};
+export const renderDiagram = async ({ documentRef, text, target, kind, options, theme }) => {
+    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);
+    applySvgDefaults(svg, kind);
+    panTarget.replaceChildren(svg);
+    const panzoom = Panzoom(panTarget, {
+        minScale: 0.4,
+        maxScale: 4,
+        contain: 'outside',
+        canvas: true
+    });
+    const wheelTarget = shell.parentElement || shell;
+    const handleWheel = (event) => {
+        if (!event.ctrlKey && !event.metaKey) {
+            return;
+        }
+        event.preventDefault();
+        panzoom.zoomWithWheel(event);
+    };
+    wheelTarget.addEventListener('wheel', handleWheel, { passive: false });
+    return {
+        setZoom(scale) {
+            panzoom.zoom(scale, { animate: true });
+        },
+        reset() {
+            panzoom.reset({ animate: true });
+        },
+        getScale() {
+            return panzoom.getScale();
+        },
+        destroy() {
+            wheelTarget.removeEventListener('wheel', handleWheel);
+            panzoom.destroy();
+        }
+    };
+};

package/dist/drawing.d.ts

@@ -0,0 +1,10 @@
+import type { FileRenderContext, FileViewerRenderedInstance } from '@file-viewer/core';
+declare global {
+    interface Window {
+        GraphViewer?: {
+            createViewerForElement: (element: HTMLElement, callback?: (viewer: unknown) => void) => unknown;
+            processElements: (className?: string) => void;
+        };
+    }
+}
+export default function renderDrawing(buffer: ArrayBuffer, target: HTMLDivElement, type?: string, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;