@graph-artifact/core 0.1.13 → 0.1.14

package/dist/components/GraphCanvas.d.ts

@@ -53,6 +53,25 @@ interface GraphCanvasProps {
          * Defaults to false (clean export).
          */
         includeBackground?: boolean;
+        /**
+         * Export a tightly-cropped image around the graph content (nodes + edges),
+         * instead of exporting the entire viewer viewport.
+         *
+         * Defaults to true.
+         */
+        cropToGraph?: boolean;
+        /** Padding (CSS px) around the cropped content when `cropToGraph` is enabled. */
+        cropPadding?: number;
+        /**
+         * Extra reserved space (CSS px) above the graph content for logo/branding
+         * when exporting.
+         */
+        reservedTop?: number;
+        /**
+         * Extra reserved space (CSS px) below the graph content for watermark
+         * when exporting.
+         */
+        reservedBottom?: number;
         /**
          * Whether to embed webfonts into the exported image.
          * Defaults to false because many apps load fonts from cross-origin

package/dist/components/GraphCanvas.js

@@ -273,7 +273,6 @@ 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 {
@@ -281,35 +280,99 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
             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)
+        const root = exportRef.current;
+        if (!root)
             return;
         const fileName = (download?.fileName ?? 'diagram')
             .trim()
             .replace(/[^\w\- ]+/g, '')
             .replace(/\s+/g, '-')
             .slice(0, 80) || 'diagram';
-        setIsExporting(true);
+        const state = storeApi.getState();
+        const nodeLookup = state.nodeLookup;
+        const transform = state.transform; // [x, y, zoom]
+        const zoom = transform[2] ?? 1;
+        // Compute content bounds in graph coordinates from measured node boxes.
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (const n of nodeLookup.values()) {
+            if (n.hidden)
+                continue;
+            const abs = n.internals.positionAbsolute;
+            const w = n.measured?.width ?? n.width ?? 0;
+            const h = n.measured?.height ?? n.height ?? 0;
+            if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0)
+                continue;
+            minX = Math.min(minX, abs.x);
+            minY = Math.min(minY, abs.y);
+            maxX = Math.max(maxX, abs.x + w);
+            maxY = Math.max(maxY, abs.y + h);
+        }
+        // If we can't compute bounds, fall back to exporting the full viewport.
+        const canCrop = isFinite(minX) && isFinite(minY) && isFinite(maxX) && isFinite(maxY);
+        const cropToGraph = download?.cropToGraph ?? true;
+        const contentPad = Math.max(0, download?.cropPadding ?? 32);
+        // Reserve header/footer areas for export-only branding so they never overlap content.
+        const exportBranding = Boolean(brandingVisibility.download && (branding?.logo?.src || branding?.logo?.node || branding?.watermark?.text));
+        const reservedTop = Math.max(0, download?.reservedTop ?? (exportBranding && (branding?.logo?.src || branding?.logo?.node) ? 76 : 0));
+        const reservedBottom = Math.max(0, download?.reservedBottom ?? (exportBranding && branding?.watermark?.text ? 56 : 0));
+        const pixelRatio = Math.max(1, download?.pixelRatio ?? 4);
+        const backgroundColor = download?.backgroundColor ?? canvas.containerBackground;
+        const includeBackground = Boolean(download?.includeBackground);
+        // Create an offscreen clone so export-only UI never flashes in the live viewer.
+        const clone = root.cloneNode(true);
+        clone.style.position = 'fixed';
+        clone.style.left = '-100000px';
+        clone.style.top = '0';
+        clone.style.opacity = '0';
+        clone.style.pointerEvents = 'none';
+        clone.style.backgroundColor = backgroundColor;
+        // Remove non-export UI.
+        clone.querySelectorAll('.ga-no-export').forEach((el) => el.remove());
+        // Toggle branding visibility inside clone (download-only by default).
+        clone.querySelectorAll('[data-ga-branding]').forEach((el) => {
+            el.style.display = exportBranding ? '' : 'none';
+        });
+        // Toggle background dots in clone (defaults to off).
+        clone.querySelectorAll('.react-flow__background').forEach((el) => {
+            el.style.display = includeBackground ? '' : 'none';
+        });
+        if (cropToGraph && canCrop) {
+            const w = Math.ceil((maxX - minX) + contentPad * 2);
+            const h = Math.ceil((maxY - minY) + contentPad * 2 + reservedTop + reservedBottom);
+            clone.style.width = `${w}px`;
+            clone.style.height = `${h}px`;
+            // Reposition the viewport so content is tightly framed with padding.
+            const viewport = clone.querySelector('.react-flow__viewport');
+            if (viewport) {
+                const tx = contentPad - minX;
+                const ty = reservedTop + contentPad - minY;
+                viewport.style.transform = `translate(${tx}px, ${ty}px) scale(1)`;
+            }
+            // Ensure the React Flow container expands to the clone size.
+            const rf = clone.querySelector('.react-flow');
+            if (rf) {
+                rf.style.width = '100%';
+                rf.style.height = '100%';
+            }
+        }
+        else {
+            // Keep the clone at the current viewport size.
+            clone.style.width = `${root.clientWidth}px`;
+            clone.style.height = `${root.clientHeight}px`;
+            // Keep current zoom so export roughly matches what the user sees.
+            const viewport = clone.querySelector('.react-flow__viewport');
+            if (viewport) {
+                viewport.style.transform = `translate(${transform[0]}px, ${transform[1]}px) scale(${zoom})`;
+            }
+        }
+        document.body.appendChild(clone);
         try {
-            // 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, {
+            const blob = await toBlob(clone, {
                 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.
+                pixelRatio,
+                backgroundColor,
                 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.');
@@ -330,17 +393,23 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
             download?.onError?.(error);
         }
         finally {
-            setIsExporting(false);
+            clone.remove();
         }
     }, [
+        storeApi,
+        branding,
+        brandingVisibility.download,
         canvas.containerBackground,
-        canvas.showBackground,
-        download?.backgroundColor,
         download?.fileName,
         download?.pixelRatio,
+        download?.backgroundColor,
         download?.includeBackground,
-        download?.onError,
+        download?.cropToGraph,
+        download?.cropPadding,
+        download?.reservedTop,
+        download?.reservedBottom,
         download?.embedFonts,
+        download?.onError,
     ]);
     if (layoutError) {
         return (_jsx("div", { style: {
@@ -392,7 +461,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; }
-      ` }), showBrandingNow && (branding?.logo?.src || branding?.logo?.node) && (_jsx("div", { style: {
+      ` }), (branding?.logo?.src || branding?.logo?.node) && (_jsx("div", { "data-ga-branding": true, "data-ga-logo": true, style: {
                     position: 'absolute',
                     zIndex: 5,
                     pointerEvents: 'none',
@@ -401,18 +470,18 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
                     ...(branding.logo.position === 'bottom-right' ? { bottom: 12, right: 12 } : {}),
                     ...(branding.logo.position === 'top-left' || !branding.logo.position ? { top: 12, left: 12 } : {}),
                     opacity: branding.logo.opacity ?? 1,
+                    display: brandingVisibility.canvas ? 'block' : 'none',
                 }, children: branding.logo.node ? (_jsx("div", { className: "ga-logo", style: {
                         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' } })) })), showBrandingNow && 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' } })) })), branding?.watermark?.text && (_jsxs("div", { "data-ga-branding": true, "data-ga-watermark": true, style: {
                     position: 'absolute',
                     left: '50%',
                     bottom: 14,
                     transform: 'translateX(-50%)',
                     zIndex: 5,
                     pointerEvents: 'none',
-                    display: 'flex',
                     alignItems: 'center',
                     gap: 8,
                     fontFamily: theme.font.family,
@@ -421,7 +490,8 @@ 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: [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, 
+                    display: brandingVisibility.canvas ? 'flex' : 'none',
+                }, 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: [_jsx(Background, { style: { display: canvas.showBackground ? 'block' : 'none' }, 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',

package/package.json

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