@bian-womp/spark-workbench 0.2.1 → 0.2.2

package/lib/cjs/index.cjs

@@ -202,6 +202,20 @@ class InMemoryWorkbench extends AbstractWorkbench {
         });
         this.emit("validationChanged", this.validate());
     }
+    updateEdgeType(edgeId, typeId) {
+        const e = this.def.edges.find((x) => x.id === edgeId);
+        if (!e)
+            return;
+        if (!typeId)
+            delete e.typeId;
+        else
+            e.typeId = typeId;
+        this.emit("graphChanged", {
+            def: this.def,
+            change: { type: "updateEdgeType", edgeId, typeId },
+        });
+        this.refreshValidation();
+    }
     updateParams(nodeId, params) {
         const n = this.def.nodes.find((n) => n.nodeId === nodeId);
         if (!n)
@@ -780,23 +794,6 @@ function useWorkbenchBridge(wb) {
                     }
                 }
             }
-            else if (type === "selectNodes") {
-                const ids = change.ids;
-                const selected = change.selected;
-                if (Array.isArray(ids) && typeof selected === "boolean") {
-                    for (const id of ids) {
-                        if (selected) {
-                            if (!nextNodeIds.has(id)) {
-                                nextNodeIds.add(id);
-                                selectionChanged = true;
-                            }
-                        }
-                        else if (nextNodeIds.delete(id)) {
-                            selectionChanged = true;
-                        }
-                    }
-                }
-            }
             else if (type === "remove") {
                 const id = change.id;
                 if (nextNodeIds.delete(id))
@@ -804,7 +801,10 @@ function useWorkbenchBridge(wb) {
             }
         }
         if (selectionChanged) {
-            wb.setSelection({ nodes: Array.from(nextNodeIds), edges: current.edges });
+            wb.setSelection({
+                nodes: Array.from(nextNodeIds),
+                edges: current.edges,
+            });
         }
     }, [wb]);
     const onEdgesDelete = React.useCallback((edges) => edges.forEach((e) => wb.disconnect(e.id)), [wb]);
@@ -829,23 +829,6 @@ function useWorkbenchBridge(wb) {
                     }
                 }
             }
-            else if (type === "selectEdges") {
-                const ids = change.ids;
-                const selected = change.selected;
-                if (Array.isArray(ids) && typeof selected === "boolean") {
-                    for (const id of ids) {
-                        if (selected) {
-                            if (!nextEdgeIds.has(id)) {
-                                nextEdgeIds.add(id);
-                                selectionChanged = true;
-                            }
-                        }
-                        else if (nextEdgeIds.delete(id)) {
-                            selectionChanged = true;
-                        }
-                    }
-                }
-            }
             else if (type === "remove") {
                 const id = change.id;
                 if (nextEdgeIds.delete(id))
@@ -853,7 +836,10 @@ function useWorkbenchBridge(wb) {
             }
         }
         if (selectionChanged) {
-            wb.setSelection({ nodes: current.nodes, edges: Array.from(nextEdgeIds) });
+            wb.setSelection({
+                nodes: current.nodes,
+                edges: Array.from(nextEdgeIds),
+            });
         }
     }, [wb]);
     const onNodesDelete = React.useCallback((nodes) => {
@@ -910,7 +896,9 @@ function useThrottledValue(value, intervalMs) {
     const lastSetAtRef = React.useRef(0);
     const timeoutRef = React.useRef(null);
     React.useEffect(() => {
-        const now = (typeof performance !== "undefined" && performance.now) ? performance.now() : Date.now();
+        const now = typeof performance !== "undefined" && performance.now
+            ? performance.now()
+            : Date.now();
         const elapsed = now - lastSetAtRef.current;
         if (elapsed >= intervalMs) {
             lastSetAtRef.current = now;
@@ -921,7 +909,10 @@ function useThrottledValue(value, intervalMs) {
                 window.clearTimeout(timeoutRef.current);
             }
             timeoutRef.current = window.setTimeout(() => {
-                lastSetAtRef.current = (typeof performance !== "undefined" && performance.now) ? performance.now() : Date.now();
+                lastSetAtRef.current =
+                    typeof performance !== "undefined" && performance.now
+                        ? performance.now()
+                        : Date.now();
                 setThrottled(value);
                 timeoutRef.current = null;
             }, Math.max(0, intervalMs - elapsed));
@@ -1400,6 +1391,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         });
         wb.setPositions(pos);
     }, [wb]);
+    const updateEdgeType = React.useCallback((edgeId, typeId) => wb.updateEdgeType(edgeId, typeId), [wb]);
     // Subscribe to runner/workbench events
     React.useEffect(() => {
         const add = (source, type) => (payload) => setEvents((prev) => {
@@ -1410,8 +1402,15 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
                 if (changeType === "moveNode" || changeType === "moveNodes")
                     return prev;
             }
+            const nextNo = prev.length > 0 ? (prev[0]?.no ?? 0) + 1 : 1;
             const next = [
-                { at: Date.now(), source, type, payload: structuredClone(payload) },
+                {
+                    no: nextNo,
+                    at: Date.now(),
+                    source,
+                    type,
+                    payload: structuredClone(payload),
+                },
                 ...prev,
             ];
             return next.length > 200 ? next.slice(0, 200) : next;
@@ -1726,6 +1725,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         step,
         flush,
         runAutoLayout,
+        updateEdgeType,
     }), [
         wb,
         runner,
@@ -1752,6 +1752,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         step,
         flush,
         runAutoLayout,
+        wb,
     ]);
     return (jsxRuntime.jsx(WorkbenchContext.Provider, { value: value, children: children }));
 }
@@ -1787,7 +1788,7 @@ function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWork
             return String(v);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col h-full min-h-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: "Events" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: hideWorkbench, onChange: (e) => onHideWorkbenchChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Hide workbench" })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: autoScroll, onChange: (e) => onAutoScrollChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Auto scroll" })] }), jsxRuntime.jsx("button", { onClick: clearEvents, className: "text-xs px-2 py-0.5 border border-gray-300 rounded", children: "Clear" })] })] }), jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto text-[11px] leading-4 divide-y divide-gray-200", children: rows.map((ev, idx) => (jsxRuntime.jsxs("div", { className: "opacity-85 odd:bg-gray-50 px-2 py-1", children: [jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx("span", { className: "w-8 shrink-0 text-right text-gray-500 select-none", children: idx + 1 }), jsxRuntime.jsxs("span", { className: "text-gray-500", children: [new Date(ev.at).toLocaleTimeString(), " \u00B7 ", ev.source, ":", ev.type] })] }), jsxRuntime.jsx("pre", { className: "m-0 whitespace-pre-wrap ml-10", children: renderPayload(ev.payload) })] }, `${ev.at}:${idx}`))) })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col h-full min-h-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: "Events" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: hideWorkbench, onChange: (e) => onHideWorkbenchChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Hide workbench" })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: autoScroll, onChange: (e) => onAutoScrollChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Auto scroll" })] }), jsxRuntime.jsx("button", { onClick: clearEvents, className: "text-xs px-2 py-0.5 border border-gray-300 rounded", children: "Clear" })] })] }), jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto text-[11px] leading-4 divide-y divide-gray-200", children: rows.map((ev) => (jsxRuntime.jsxs("div", { className: "opacity-85 odd:bg-gray-50 px-2 py-1", children: [jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx("span", { className: "w-12 shrink-0 text-right text-gray-500 select-none", children: ev.no }), jsxRuntime.jsxs("span", { className: "text-gray-500", children: [new Date(ev.at).toLocaleTimeString(), " \u00B7 ", ev.source, ":", ev.type] })] }), jsxRuntime.jsx("pre", { className: "m-0 whitespace-pre-wrap ml-12", children: renderPayload(ev.payload) })] }, `${ev.at}:${ev.no}`))) })] }));
 }
 
 function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toString, toElement, contextPanel, setInput, }) {
@@ -1802,7 +1803,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             return String(value ?? "");
         }
     };
-    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, outputsMap, outputTypesMap, nodeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, } = useWorkbenchContext();
+    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, outputsMap, outputTypesMap, nodeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, updateEdgeType, } = useWorkbenchContext();
     const nodeValidationIssues = validationByNode.issues;
     const edgeValidationIssues = validationByEdge.issues;
     const nodeValidationHandles = validationByNode;
@@ -1879,7 +1880,11 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             setOriginals(nextOriginals);
     }, [selectedNodeId, selectedDesc, valuesTick]);
     const widthClass = debug ? "w-[480px]" : "w-[320px]";
-    return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [contextPanel && (jsxRuntime.jsx("div", { className: "mb-2", children: contextPanel })), jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mb-2", children: ["valuesTick: ", valuesTick] }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedEdge.typeId] })] }), selectedEdgeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedEdgeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
+    return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [contextPanel && jsxRuntime.jsx("div", { className: "mb-2", children: contextPanel }), jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mb-2", children: ["valuesTick: ", valuesTick] }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-1", children: [jsxRuntime.jsxs("label", { className: "w-20 flex flex-col", children: [jsxRuntime.jsx("span", { children: "Type" }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: "DataTypeId" })] }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: selectedEdge.typeId ?? "", onChange: (e) => {
+                                                const v = e.target.value;
+                                                const next = v === "" ? undefined : v;
+                                                updateEdgeType(selectedEdge.id, next);
+                                            }, children: [jsxRuntime.jsx("option", { value: "", children: "(infer from source)" }), Array.from(registry.types.keys()).map((tid) => (jsxRuntime.jsx("option", { value: tid, children: tid }, tid)))] })] })] }), selectedEdgeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedEdgeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
                                         selectedNodeStatus.lastError) }))] })), jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
                                     const typeId = sparkGraph.getInputTypeId(selectedDesc?.inputs, h);
                                     const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId &&