@bian-womp/spark-workbench 0.2.91 → 0.2.93

package/lib/cjs/index.cjs

@@ -3369,16 +3369,16 @@ function extractNodes(viewport, visibleBounds, options = {}) {
  * Creates SVG element with dot pattern background (matching React Flow)
  */
 function createSVGElement(width, height, options = {}) {
-    const { exportBackgroundPattern = true, backgroundPatternColor = "#f1f1f1" } = 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 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 dot pattern if enabled
     if (exportBackgroundPattern) {
@@ -3501,7 +3501,7 @@ function renderContentToSVG(group, nodes, edges, transformX, transformY, options
  * @returns Promise resolving to SVG data URL string, or null if capture fails
  */
 async function captureCanvasThumbnail(containerElement, options = {}) {
-    const { ignoreViewport = true, padding = 40, exportHandles = true, exportNodeTitle = true, exportBackgroundPattern = true, nodeBackgroundColor, backgroundPatternColor, } = 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;
@@ -3584,6 +3584,7 @@ async function captureCanvasThumbnail(containerElement, options = {}) {
         const { svg, group } = createSVGElement(contentWidth, contentHeight, {
             exportBackgroundPattern,
             backgroundPatternColor,
+            backgroundColor,
         });
         // Render content with options
         renderContentToSVG(group, nodes, edges, -contentMinX, -contentMinY, {
@@ -3656,6 +3657,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
     const [systemErrors, setSystemErrors] = React.useState([]);
     const [registryErrors, setRegistryErrors] = React.useState([]);
     const [inputValidationErrors, setInputValidationErrors] = React.useState([]);
+    const [registryVersion, setRegistryVersion] = React.useState(0);
     const clearSystemErrors = React.useCallback(() => setSystemErrors([]), []);
     const clearRegistryErrors = React.useCallback(() => setRegistryErrors([]), []);
     const clearInputValidationErrors = React.useCallback(() => setInputValidationErrors([]), []);
@@ -4318,6 +4320,8 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             try {
                 setRegistry(newReg);
                 wb.setRegistry(newReg);
+                // Increment registry version to trigger UI updates
+                setRegistryVersion((v) => v + 1);
                 // Trigger a graph update so the UI revalidates with new types/enums/nodes
                 try {
                     await runner.update(wb.def);
@@ -4515,6 +4519,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         updateEdgeType,
         triggerExternal,
         uiVersion,
+        registryVersion,
         overrides,
         getNodeDisplayName,
         setNodeName,
@@ -4556,6 +4561,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         wb,
         runner,
         uiVersion,
+        registryVersion,
         overrides,
         getNodeDisplayName,
         setNodeName,
@@ -5537,10 +5543,9 @@ function useKeyboardShortcutToast() {
 }
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
-    const { wb, registry, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, runner, engineKind, overrides, } = useWorkbenchContext();
+    const { wb, registry, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, registryVersion, runner, engineKind, overrides, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
-    const [registryVersion, setRegistryVersion] = React.useState(0);
     const [historyState, setHistoryState] = React.useState(wb.getHistory());
     const prevNodesRef = React.useRef([]);
     const prevEdgesRef = React.useRef([]);
@@ -5634,6 +5639,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         const resolver = (nodeTypeId) => custom.has(nodeTypeId) ? `spark-${nodeTypeId}` : "spark-default";
         return { nodeTypes: types, resolveNodeType: resolver };
         // Include uiVersion to recompute when custom renderers are registered
+        // Include registryVersion to recompute when registry enums/types change
     }, [wb, registry, uiVersion, ui]);
     const edgeTypes = React.useMemo(() => {
         // Use default edge renderer override if registered, otherwise use DefaultEdge
@@ -5921,12 +5927,6 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const onCloseSelectionMenu = React.useCallback(() => {
         setSelectionMenuOpen(false);
     }, []);
-    React.useEffect(() => {
-        const off = runner.on("registry", () => {
-            setRegistryVersion((v) => v + 1);
-        });
-        return () => off();
-    }, [runner]);
     React.useEffect(() => {
         const off = wb.on("historyChanged", (event) => {
             setHistoryState(event.history);