@graph-artifact/core 0.1.12 → 0.1.13

package/dist/components/GraphCanvas.d.ts

@@ -11,6 +11,17 @@ interface GraphCanvasProps {
     hideAttribution?: boolean;
     /** Optional branding overlays (included in exports). */
     branding?: {
+        /**
+         * Where branding renders:
+         * - `canvas`: on-screen in the ReactFlow viewer
+         * - `download`: only during PNG export
+         *
+         * Defaults: `{ canvas: false, download: true }`
+         */
+        visibility?: {
+            canvas?: boolean;
+            download?: boolean;
+        };
         logo?: {
             /** Image URL to render (e.g. PNG). Prefer `node` for inline SVG via SVGR. */
             src?: string;
@@ -37,6 +48,19 @@ interface GraphCanvasProps {
         pixelRatio?: number;
         /** Background color used for export. Defaults to `canvas.containerBackground`. */
         backgroundColor?: string;
+        /**
+         * Whether the exported PNG should include the dotted/grid background.
+         * Defaults to false (clean export).
+         */
+        includeBackground?: boolean;
+        /**
+         * Whether to embed webfonts into the exported image.
+         * Defaults to false because many apps load fonts from cross-origin
+         * stylesheets (e.g. Google Fonts), which causes DOMExceptions during export.
+         */
+        embedFonts?: boolean;
+        /** Optional error callback for export failures. */
+        onError?: (error: Error) => void;
     };
     /**
      * If true, reruns dagre after React Flow measures node DOM sizes so

package/dist/components/GraphCanvas.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { ReactFlow, Background, Controls, MiniMap, ReactFlowProvider, useReactFlow, useNodesInitialized, useStore, useStoreApi, Panel, } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { toPng } from 'html-to-image';
+import { toBlob } from 'html-to-image';
 import { layoutNodes, buildLayoutEdges } from '../layout/index.js';
 import { getConfig, getNodeTypes } from '../config.js';
 import { useTheme } from '../ThemeContext.js';
@@ -273,6 +273,16 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
     const miniMapNodeColor = useCallback(() => theme.color.orange1, [theme.color.orange1]);
     const miniMapMaskColor = useMemo(() => `${theme.color.gray1}cc`, [theme.color.gray1]);
     const exportRef = useRef(null);
+    const [isExporting, setIsExporting] = useState(false);
+    const brandingVisibility = useMemo(() => {
+        const v = branding?.visibility ?? {};
+        return {
+            canvas: v.canvas ?? false,
+            download: v.download ?? true,
+        };
+    }, [branding?.visibility]);
+    const showBrandingNow = isExporting ? brandingVisibility.download : brandingVisibility.canvas;
+    const showBackgroundNow = isExporting ? Boolean(download?.includeBackground) : Boolean(canvas.showBackground);
     const onDownload = useCallback(async () => {
         if (!exportRef.current)
             return;
@@ -281,26 +291,57 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
             .replace(/[^\w\- ]+/g, '')
             .replace(/\s+/g, '-')
             .slice(0, 80) || 'diagram';
+        setIsExporting(true);
         try {
-            const dataUrl = await toPng(exportRef.current, {
+            // Wait for React to commit export-only visuals (branding/background toggles)
+            // before html-to-image snapshots the DOM.
+            await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+            // Prefer blob + object URL over a data URL. In some browsers, downloads
+            // triggered after an async boundary can be blocked when using data URLs.
+            const blob = await toBlob(exportRef.current, {
                 cacheBust: true,
                 pixelRatio: Math.max(1, download?.pixelRatio ?? 2),
                 backgroundColor: download?.backgroundColor ?? canvas.containerBackground,
+                // Avoid CORS errors when the host app uses cross-origin stylesheets for fonts.
+                // If the host wants font embedding, they can explicitly enable it.
+                skipFonts: !(download?.embedFonts ?? false),
                 filter: (node) => {
                     if (!(node instanceof Element))
                         return true;
                     return !node.classList.contains('ga-no-export');
                 },
             });
+            if (!blob)
+                throw new Error('Export failed: no image data produced.');
+            const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
-            a.href = dataUrl;
+            a.href = url;
             a.download = `${fileName}.png`;
+            a.rel = 'noopener';
+            document.body.appendChild(a);
             a.click();
+            a.remove();
+            URL.revokeObjectURL(url);
         }
-        catch {
-            // ignore export errors (e.g. CORS images, unmounted)
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            // eslint-disable-next-line no-console
+            console.error('[graph-artifact] Download export failed:', error);
+            download?.onError?.(error);
+        }
+        finally {
+            setIsExporting(false);
         }
-    }, [canvas.containerBackground, download?.backgroundColor, download?.fileName, download?.pixelRatio]);
+    }, [
+        canvas.containerBackground,
+        canvas.showBackground,
+        download?.backgroundColor,
+        download?.fileName,
+        download?.pixelRatio,
+        download?.includeBackground,
+        download?.onError,
+        download?.embedFonts,
+    ]);
     if (layoutError) {
         return (_jsx("div", { style: {
                 width: '100%',
@@ -351,7 +392,7 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
         }
         /* Ensure inline SVG logos scale to the requested width. */
         .ga-logo svg { width: 100%; height: auto; display: block; }
-      ` }), (branding?.logo?.src || branding?.logo?.node) && (_jsx("div", { style: {
+      ` }), showBrandingNow && (branding?.logo?.src || branding?.logo?.node) && (_jsx("div", { style: {
                     position: 'absolute',
                     zIndex: 5,
                     pointerEvents: 'none',
@@ -364,7 +405,7 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
                         width: branding.logo.width ?? 120,
                         height: branding.logo.height,
                         display: 'block',
-                    }, children: branding.logo.node })) : (_jsx("img", { src: branding.logo.src, alt: branding.logo.alt ?? 'logo', width: branding.logo.width ?? 120, height: branding.logo.height, style: { display: 'block' } })) })), branding?.watermark?.text && (_jsxs("div", { style: {
+                    }, children: branding.logo.node })) : (_jsx("img", { src: branding.logo.src, alt: branding.logo.alt ?? 'logo', width: branding.logo.width ?? 120, height: branding.logo.height, style: { display: 'block' } })) })), showBrandingNow && branding?.watermark?.text && (_jsxs("div", { style: {
                     position: 'absolute',
                     left: '50%',
                     bottom: 14,
@@ -380,9 +421,9 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
                     opacity: branding.watermark.opacity ?? 0.9,
                     userSelect: 'none',
                     whiteSpace: 'nowrap',
-                }, children: [branding.watermark.icon ?? null, _jsx("span", { children: branding.watermark.text })] })), _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: resolvedNodeTypes, edgeTypes: edgeTypes, onNodeClick: handleNodeClick, fitView: canvas.fitView, minZoom: canvas.minZoom, maxZoom: canvas.maxZoom, defaultEdgeOptions: defaultEdgeOptions, zIndexMode: "manual", colorMode: theme.mode, proOptions: hideAttribution ? { hideAttribution: true } : undefined, children: [canvas.showBackground && (_jsx(Background, { color: canvas.gridColor === 'auto' ? theme.color.gray2 : canvas.gridColor, gap: canvas.backgroundGap, size: canvas.backgroundSize })), canvas.showControls && (_jsx(Controls, { position: canvas.controlsPosition, 
-                        // Remove the "lock" (interactive) button; we want pan/zoom always available.
-                        showInteractive: false })), ((download?.enabled ?? canvas.showControls) && download?.enabled !== false) && (_jsx(Panel, { position: cornerToPanelPosition(download?.position ?? 'top-right'), className: "ga-no-export", children: _jsx("button", { type: "button", onClick: onDownload, "aria-label": "Download diagram", title: "Download", style: {
+                }, children: [branding.watermark.icon ?? null, _jsx("span", { children: branding.watermark.text })] })), _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: resolvedNodeTypes, edgeTypes: edgeTypes, onNodeClick: handleNodeClick, fitView: canvas.fitView, minZoom: canvas.minZoom, maxZoom: canvas.maxZoom, defaultEdgeOptions: defaultEdgeOptions, zIndexMode: "manual", colorMode: theme.mode, proOptions: hideAttribution ? { hideAttribution: true } : undefined, children: [showBackgroundNow && (_jsx(Background, { color: canvas.gridColor === 'auto' ? theme.color.gray2 : canvas.gridColor, gap: canvas.backgroundGap, size: canvas.backgroundSize })), canvas.showControls && (_jsx("div", { className: "ga-no-export", children: _jsx(Controls, { position: canvas.controlsPosition, 
+                            // Remove the "lock" (interactive) button; we want pan/zoom always available.
+                            showInteractive: false }) })), ((download?.enabled ?? canvas.showControls) && download?.enabled !== false) && (_jsx(Panel, { position: cornerToPanelPosition(download?.position ?? 'top-right'), className: "ga-no-export", children: _jsx("button", { type: "button", onClick: onDownload, "aria-label": "Download diagram", title: "Download", style: {
                                 display: 'inline-flex',
                                 alignItems: 'center',
                                 justifyContent: 'center',
@@ -394,7 +435,7 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
                                 border: `1px solid ${theme.color.gray2}`,
                                 boxShadow: theme.shadow.card,
                                 cursor: 'pointer',
-                            }, children: download?.icon ?? defaultDownloadIcon(theme) }) })), canvas.showMiniMap && (_jsx(MiniMap, { nodeColor: miniMapNodeColor, maskColor: miniMapMaskColor }))] })] }));
+                            }, children: download?.icon ?? defaultDownloadIcon(theme) }) })), canvas.showMiniMap && (_jsx("div", { className: "ga-no-export", children: _jsx(MiniMap, { nodeColor: miniMapNodeColor, maskColor: miniMapMaskColor }) }))] })] }));
 }
 export function GraphCanvas(props) {
     return (_jsx(ReactFlowProvider, { children: _jsx(GraphCanvasInner, { ...props }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graph-artifact/core",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Composable Mermaid-like parser, layout engine, and React renderer for interactive diagram artifacts.",
   "license": "MIT",
   "repository": {