@bian-womp/spark-workbench 0.2.90 → 0.2.92

package/lib/cjs/index.cjs

@@ -3151,11 +3151,12 @@ function extractEdgePaths(viewport, visibleBounds) {
         if (!pathData)
             return;
         const pathBounds = getPathBounds(pathData);
-        // Only include edge if it intersects with visible viewport
-        if (pathBounds.maxX >= visibleBounds.minX &&
-            pathBounds.minX <= visibleBounds.maxX &&
-            pathBounds.maxY >= visibleBounds.minY &&
-            pathBounds.minY <= visibleBounds.maxY) {
+        // Only include edge if it intersects with visible viewport (or if ignoring viewport)
+        if (!visibleBounds ||
+            (pathBounds.maxX >= visibleBounds.minX &&
+                pathBounds.minX <= visibleBounds.maxX &&
+                pathBounds.maxY >= visibleBounds.minY &&
+                pathBounds.minY <= visibleBounds.maxY)) {
             edges.push({
                 d: pathData,
                 stroke: extractStrokeColor(pathEl),
@@ -3201,10 +3202,10 @@ function extractNodeDimensions(nodeEl) {
 /**
  * Extracts node styles (colors, border, radius) from computed styles
  */
-function extractNodeStyles(nodeContent) {
+function extractNodeStyles(nodeContent, nodeBackgroundColor) {
     const computedStyle = window.getComputedStyle(nodeContent);
-    // Use gray background for nodes in thumbnail
-    const fill = "#f3f4f6"; // gray-100 equivalent
+    // Use provided background color or default gray background for nodes in thumbnail
+    const fill = nodeBackgroundColor || "#f3f4f6"; // gray-100 equivalent
     const stroke = extractStrokeColor(nodeContent);
     const strokeWidth = extractStrokeWidth(nodeContent, 1);
     const borderRadiusStr = computedStyle.borderRadius || "8px";
@@ -3311,7 +3312,8 @@ function extractNodeTitle(nodeEl, nodeX, nodeY) {
 /**
  * Extracts visible nodes from React Flow viewport
  */
-function extractNodes(viewport, visibleBounds) {
+function extractNodes(viewport, visibleBounds, options = {}) {
+    const { exportHandles = true, exportNodeTitle = true, nodeBackgroundColor, } = options;
     const nodes = [];
     let minX = Infinity;
     let minY = Infinity;
@@ -3325,11 +3327,16 @@ function extractNodes(viewport, visibleBounds) {
         const nodeContent = nodeEl.firstElementChild;
         if (!nodeContent)
             return;
-        const styles = extractNodeStyles(nodeContent);
-        const handles = extractNodeHandles(nodeEl, position.x, position.y, dimensions.width);
-        const title = extractNodeTitle(nodeEl, position.x, position.y);
-        // Only include node if it's within visible viewport
-        if (isRectVisible(position.x, position.y, dimensions.width, dimensions.height, visibleBounds)) {
+        const styles = extractNodeStyles(nodeContent, nodeBackgroundColor);
+        const handles = exportHandles
+            ? extractNodeHandles(nodeEl, position.x, position.y, dimensions.width)
+            : [];
+        const title = exportNodeTitle
+            ? extractNodeTitle(nodeEl, position.x, position.y)
+            : undefined;
+        // Only include node if it's within visible viewport (or if ignoring viewport)
+        if (!visibleBounds ||
+            isRectVisible(position.x, position.y, dimensions.width, dimensions.height, visibleBounds)) {
             nodes.push({
                 x: position.x,
                 y: position.y,
@@ -3361,43 +3368,47 @@ function extractNodes(viewport, visibleBounds) {
 /**
  * Creates SVG element with dot pattern background (matching React Flow)
  */
-function createSVGElement(width, height) {
+function createSVGElement(width, height, options = {}) {
+    const { exportBackgroundPattern = true, backgroundPatternColor = "#f1f1f1", backgroundColor = "#ffffff", } = options;
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     svg.setAttribute("width", String(width));
     svg.setAttribute("height", String(height));
     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    // Create defs section for patterns
-    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-    // Create dot pattern (matching React Flow's BackgroundVariant.Dots)
-    // React Flow uses gap={12} and size={1} by default
-    const pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
-    pattern.setAttribute("id", "dot-pattern");
-    pattern.setAttribute("x", "0");
-    pattern.setAttribute("y", "0");
-    pattern.setAttribute("width", "24"); // gap between dots (matching React Flow default)
-    pattern.setAttribute("height", "24");
-    pattern.setAttribute("patternUnits", "userSpaceOnUse");
-    // Create a circle for the dot (centered in the pattern cell)
-    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-    circle.setAttribute("cx", "12"); // Center of 24x24 pattern cell
-    circle.setAttribute("cy", "12");
-    circle.setAttribute("r", "1"); // dot radius = 1 (matching React Flow size={1})
-    circle.setAttribute("fill", "#f1f1f1"); // gray color matching React Flow default
-    pattern.appendChild(circle);
-    defs.appendChild(pattern);
-    svg.appendChild(defs);
-    // Create background rectangle with white base
+    // Create background rectangle with configurable background color
     const bgRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
     bgRect.setAttribute("width", String(width));
     bgRect.setAttribute("height", String(height));
-    bgRect.setAttribute("fill", "#ffffff"); // Base background color
+    bgRect.setAttribute("fill", backgroundColor);
     svg.appendChild(bgRect);
-    // Create pattern overlay rectangle
-    const patternRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-    patternRect.setAttribute("width", String(width));
-    patternRect.setAttribute("height", String(height));
-    patternRect.setAttribute("fill", "url(#dot-pattern)");
-    svg.appendChild(patternRect);
+    // Create dot pattern if enabled
+    if (exportBackgroundPattern) {
+        // Create defs section for patterns
+        const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+        // Create dot pattern (matching React Flow's BackgroundVariant.Dots)
+        // React Flow uses gap={12} and size={1} by default
+        const pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
+        pattern.setAttribute("id", "dot-pattern");
+        pattern.setAttribute("x", "0");
+        pattern.setAttribute("y", "0");
+        pattern.setAttribute("width", "24"); // gap between dots (matching React Flow default)
+        pattern.setAttribute("height", "24");
+        pattern.setAttribute("patternUnits", "userSpaceOnUse");
+        // Create a circle for the dot (centered in the pattern cell)
+        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+        circle.setAttribute("cx", "12"); // Center of 24x24 pattern cell
+        circle.setAttribute("cy", "12");
+        circle.setAttribute("r", "1"); // dot radius = 1 (matching React Flow size={1})
+        circle.setAttribute("fill", backgroundPatternColor);
+        pattern.appendChild(circle);
+        defs.appendChild(pattern);
+        svg.appendChild(defs);
+        // Create pattern overlay rectangle
+        const patternRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        patternRect.setAttribute("width", String(width));
+        patternRect.setAttribute("height", String(height));
+        patternRect.setAttribute("fill", "url(#dot-pattern)");
+        svg.appendChild(patternRect);
+    }
     // Create group with transform
     const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
     svg.appendChild(group);
@@ -3464,13 +3475,16 @@ function renderEdgePath(group, edge) {
 /**
  * Renders all nodes, handles, titles, and edges to SVG group
  */
-function renderContentToSVG(group, nodes, edges, transformX, transformY) {
+function renderContentToSVG(group, nodes, edges, transformX, transformY, options = {}) {
+    const { exportHandles = true, exportNodeTitle = true } = options;
     group.setAttribute("transform", `translate(${transformX}, ${transformY})`);
     // Render nodes
     nodes.forEach((node) => {
         renderNodeRect(group, node);
-        node.handles.forEach((handle) => renderHandle(group, handle));
-        if (node.title) {
+        if (exportHandles) {
+            node.handles.forEach((handle) => renderHandle(group, handle));
+        }
+        if (exportNodeTitle && node.title) {
             renderNodeTitle(group, node.title);
         }
     });
@@ -3483,9 +3497,11 @@ function renderContentToSVG(group, nodes, edges, transformX, transformY) {
 /**
  * Captures a React Flow container element as an SVG image and returns data URL
  * @param containerElement - The React Flow container DOM element
+ * @param options - Options for thumbnail capture
  * @returns Promise resolving to SVG data URL string, or null if capture fails
  */
-async function captureCanvasThumbnail(containerElement) {
+async function captureCanvasThumbnail(containerElement, options = {}) {
+    const { ignoreViewport = true, padding = 40, exportHandles = true, exportNodeTitle = true, exportBackgroundPattern = true, nodeBackgroundColor, backgroundPatternColor, backgroundColor, } = options;
     if (!containerElement) {
         console.warn("[flowThumbnail] Container element is null");
         return null;
@@ -3501,12 +3517,18 @@ async function captureCanvasThumbnail(containerElement) {
         const viewportStyle = window.getComputedStyle(reactFlowViewport);
         const viewportTransform = viewportStyle.transform || viewportStyle.getPropertyValue("transform");
         const transform = parseViewportTransform(viewportTransform);
-        // Calculate visible bounds
+        // Calculate visible bounds (null if ignoring viewport)
         const viewportRect = reactFlowViewport.getBoundingClientRect();
-        const visibleBounds = calculateVisibleBounds(viewportRect, transform);
-        // Extract edges and nodes
+        const visibleBounds = ignoreViewport
+            ? null
+            : calculateVisibleBounds(viewportRect, transform);
+        // Extract edges and nodes (pass null bounds if ignoring viewport to get all)
         const { edges, bounds: edgeBounds } = extractEdgePaths(reactFlowViewport, visibleBounds);
-        const { nodes, bounds: nodeBounds } = extractNodes(reactFlowViewport, visibleBounds);
+        const { nodes, bounds: nodeBounds } = extractNodes(reactFlowViewport, visibleBounds, {
+            exportHandles,
+            exportNodeTitle,
+            nodeBackgroundColor,
+        });
         // Calculate overall bounding box
         // Handle case where one or both bounds might be Infinity (no content)
         let minX = Infinity;
@@ -3525,24 +3547,50 @@ async function captureCanvasThumbnail(containerElement) {
             maxX = Math.max(maxX, nodeBounds.maxX);
             maxY = Math.max(maxY, nodeBounds.maxY);
         }
-        // If no visible content, use the visible viewport bounds
+        // If no content found, return null
         if (minX === Infinity || (nodes.length === 0 && edges.length === 0)) {
+            if (ignoreViewport) {
+                console.warn("[flowThumbnail] No content found in graph");
+                return null;
+            }
+            // Fallback to visible viewport bounds if not ignoring viewport
             minX = visibleBounds.minX;
             minY = visibleBounds.minY;
             maxX = visibleBounds.maxX;
             maxY = visibleBounds.maxY;
         }
-        // Use the visible viewport bounds exactly (what the user sees)
-        const contentMinX = visibleBounds.minX;
-        const contentMinY = visibleBounds.minY;
-        const contentMaxX = visibleBounds.maxX;
-        const contentMaxY = visibleBounds.maxY;
+        // Calculate content bounds with padding if ignoring viewport
+        let contentMinX;
+        let contentMinY;
+        let contentMaxX;
+        let contentMaxY;
+        if (ignoreViewport) {
+            // Add padding when exporting whole graph
+            contentMinX = minX - padding;
+            contentMinY = minY - padding;
+            contentMaxX = maxX + padding;
+            contentMaxY = maxY + padding;
+        }
+        else {
+            // Use the visible viewport bounds exactly (what the user sees)
+            contentMinX = visibleBounds.minX;
+            contentMinY = visibleBounds.minY;
+            contentMaxX = visibleBounds.maxX;
+            contentMaxY = visibleBounds.maxY;
+        }
         const contentWidth = contentMaxX - contentMinX;
         const contentHeight = contentMaxY - contentMinY;
-        // Create SVG
-        const { svg, group } = createSVGElement(contentWidth, contentHeight);
-        // Render content
-        renderContentToSVG(group, nodes, edges, -contentMinX, -contentMinY);
+        // Create SVG with options
+        const { svg, group } = createSVGElement(contentWidth, contentHeight, {
+            exportBackgroundPattern,
+            backgroundPatternColor,
+            backgroundColor,
+        });
+        // Render content with options
+        renderContentToSVG(group, nodes, edges, -contentMinX, -contentMinY, {
+            exportHandles,
+            exportNodeTitle,
+        });
         // Serialize SVG to string
         const serializer = new XMLSerializer();
         const svgString = serializer.serializeToString(svg);
@@ -3558,10 +3606,11 @@ async function captureCanvasThumbnail(containerElement) {
 /**
  * Captures a React Flow container element as an SVG image and downloads it
  * @param containerElement - The React Flow container DOM element
+ * @param options - Options for thumbnail capture
  * @returns Promise resolving to true if successful, false otherwise
  */
-async function downloadCanvasThumbnail(containerElement) {
-    const svgDataUrl = await captureCanvasThumbnail(containerElement);
+async function downloadCanvasThumbnail(containerElement, options = {}) {
+    const svgDataUrl = await captureCanvasThumbnail(containerElement, options);
     if (!svgDataUrl) {
         return false;
     }
@@ -4520,24 +4569,24 @@ function IssueBadge({ level, title, size = 12, className, }) {
     return (jsxRuntime.jsx("button", { type: "button", className: `inline-flex items-center justify-center shrink-0 ${colorClass} ${className ?? ""}`, title: title, style: { width: size, height: size }, children: level === "error" ? (jsxRuntime.jsx(react$1.XCircleIcon, { size: size, weight: "fill" })) : (jsxRuntime.jsx(react$1.WarningCircleIcon, { size: size, weight: "fill" })) }));
 }
 
-function DefaultNodeHeader({ id, typeId, title, validation, right, showId, onInvalidate, }) {
+function DefaultNodeHeader({ id, typeId, validation, right, showId, onInvalidate, }) {
     const ctx = useWorkbenchContext();
     const [isEditing, setIsEditing] = React.useState(false);
     const [editValue, setEditValue] = React.useState("");
     const inputRef = React.useRef(null);
     // Use getNodeDisplayName if typeId is provided, otherwise use title prop
-    const displayName = typeId ? ctx.getNodeDisplayName(id) : title ?? id;
-    const effectiveTypeId = typeId ?? title ?? id;
+    const displayName = typeId ? ctx.getNodeDisplayName(id) : id;
+    const effectiveTypeId = typeId ?? id;
     // Get the default display name (without custom name) for comparison
     const getDefaultDisplayName = React.useCallback(() => {
         if (!typeId)
-            return title ?? id;
+            return id;
         const node = ctx.wb.def.nodes.find((n) => n.nodeId === id);
         if (!node)
             return id;
         const desc = ctx.registry.nodes.get(node.typeId);
         return desc?.displayName || node.typeId;
-    }, [ctx, id, typeId, title]);
+    }, [ctx, id, typeId]);
     const handleInvalidate = React.useCallback(() => {
         try {
             if (onInvalidate)