@bian-womp/spark-workbench 0.2.79 → 0.2.80

package/lib/cjs/index.cjs

@@ -130,8 +130,9 @@ class InMemoryWorkbench extends AbstractWorkbench {
             nodes: [],
             edges: [],
         };
-        this.viewport = null;
+        this.nodeNames = {};
         this.runtimeState = null;
+        this.viewport = null;
         this.historyState = undefined;
         this.copiedData = null;
     }
@@ -228,6 +229,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         this._def.nodes = this._def.nodes.filter((n) => n.nodeId !== nodeId);
         this._def.edges = this._def.edges.filter((e) => e.source.nodeId !== nodeId && e.target.nodeId !== nodeId);
         delete this.positions[nodeId];
+        delete this.nodeNames[nodeId];
         this.emit("graphChanged", {
             def: this._def,
             change: { type: "removeNode", nodeId },
@@ -350,6 +352,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const filteredPositions = Object.fromEntries(Object.entries(this.positions).filter(([id]) => defNodeIds.has(id)));
         const filteredNodes = this.selection.nodes.filter((id) => defNodeIds.has(id));
         const filteredEdges = this.selection.edges.filter((id) => defEdgeIds.has(id));
+        const filteredNodeNames = Object.fromEntries(Object.entries(this.nodeNames).filter(([id]) => defNodeIds.has(id)));
         return {
             positions: Object.keys(filteredPositions).length > 0
                 ? filteredPositions
@@ -361,6 +364,9 @@ class InMemoryWorkbench extends AbstractWorkbench {
                 }
                 : undefined,
             viewport: this.viewport ? { ...this.viewport } : undefined,
+            nodeNames: Object.keys(filteredNodeNames).length > 0
+                ? filteredNodeNames
+                : undefined,
         };
     }
     setUIState(ui) {
@@ -379,6 +385,9 @@ class InMemoryWorkbench extends AbstractWorkbench {
         if (ui.viewport) {
             this.viewport = { ...ui.viewport };
         }
+        if (ui.nodeNames !== undefined) {
+            this.nodeNames = { ...ui.nodeNames };
+        }
     }
     getRuntimeState() {
         return this.runtimeState ? { ...this.runtimeState } : null;
@@ -748,6 +757,29 @@ class InMemoryWorkbench extends AbstractWorkbench {
     setCopiedData(data) {
         this.copiedData = data;
     }
+    /**
+     * Get the custom name for a node, if set.
+     */
+    getNodeName(nodeId) {
+        return this.nodeNames[nodeId];
+    }
+    /**
+     * Set a custom name for a node. Empty string or undefined removes the custom name.
+     * This is included in undo/redo history via extData.ui.
+     */
+    setNodeName(nodeId, name, options) {
+        if (name === undefined || name.trim() === "") {
+            delete this.nodeNames[nodeId];
+        }
+        else {
+            this.nodeNames[nodeId] = name.trim();
+        }
+        this.emit("graphUiChanged", {
+            def: this._def,
+            change: { type: "nodeName", nodeId },
+            ...options,
+        });
+    }
 }
 
 class CLIWorkbench {
@@ -2947,6 +2979,19 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
     }, [wb, wb.def, registry, overrides?.getDefaultNodeSize]);
     const updateEdgeType = React.useCallback((edgeId, typeId) => wb.updateEdgeType(edgeId, typeId), [wb]);
     const triggerExternal = React.useCallback((nodeId, event) => runner.triggerExternal(nodeId, event), [runner]);
+    const getNodeDisplayName = React.useCallback((nodeId) => {
+        const customName = wb.getNodeName(nodeId);
+        if (customName)
+            return customName;
+        const node = wb.def.nodes.find((n) => n.nodeId === nodeId);
+        if (!node)
+            return nodeId;
+        const desc = registry.nodes.get(node.typeId);
+        return desc?.displayName || node.typeId;
+    }, [wb, registry]);
+    const setNodeName = React.useCallback((nodeId, name) => {
+        wb.setNodeName(nodeId, name, { commit: true, reason: "rename-node" });
+    }, [wb]);
     // Helper to save runtime metadata and UI state to extData
     const saveUiRuntimeMetadata = React.useCallback(async (workbench, graphRunner) => {
         try {
@@ -3608,6 +3653,8 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         triggerExternal,
         uiVersion,
         overrides,
+        getNodeDisplayName,
+        setNodeName,
     }), [
         wb,
         runner,
@@ -3647,6 +3694,8 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         runner,
         uiVersion,
         overrides,
+        getNodeDisplayName,
+        setNodeName,
     ]);
     return (jsxRuntime.jsx(WorkbenchContext.Provider, { value: value, children: children }));
 }
@@ -4235,11 +4284,27 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
             position: "relative",
             minWidth: typeof data.renderWidth === "number" ? data.renderWidth : undefined,
             minHeight: typeof data.renderHeight === "number" ? data.renderHeight : undefined,
-        }, children: [jsxRuntime.jsx(DefaultNodeHeader, { id: id, title: typeId, validation: validation, showId: data.showValues }), jsxRuntime.jsx(DefaultNodeContent, { data: data, isConnectable: isConnectable })] }));
+        }, children: [jsxRuntime.jsx(DefaultNodeHeader, { id: id, typeId: typeId, validation: validation, showId: data.showValues }), jsxRuntime.jsx(DefaultNodeContent, { data: data, isConnectable: isConnectable })] }));
 });
 DefaultNode.displayName = "DefaultNode";
-function DefaultNodeHeader({ id, title, validation, right, showId, onInvalidate, }) {
+function DefaultNodeHeader({ id, typeId, title, 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;
+    // Get the default display name (without custom name) for comparison
+    const getDefaultDisplayName = React.useCallback(() => {
+        if (!typeId)
+            return title ?? 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]);
     const handleInvalidate = React.useCallback(() => {
         try {
             if (onInvalidate)
@@ -4252,10 +4317,51 @@ function DefaultNodeHeader({ id, title, validation, right, showId, onInvalidate,
         }
         catch { }
     }, [ctx, id, onInvalidate]);
+    const handleDoubleClick = React.useCallback((e) => {
+        // Only allow editing if typeId is provided (enables renaming)
+        if (!typeId)
+            return;
+        e.stopPropagation();
+        setIsEditing(true);
+        setEditValue(displayName);
+    }, [typeId, displayName]);
+    const handleSave = React.useCallback(() => {
+        if (!typeId)
+            return;
+        const trimmed = editValue.trim();
+        const defaultDisplayName = getDefaultDisplayName();
+        // If the trimmed value matches the default display name or typeId, clear the custom name
+        ctx.setNodeName(id, trimmed === defaultDisplayName || trimmed === effectiveTypeId
+            ? undefined
+            : trimmed);
+        setIsEditing(false);
+    }, [ctx, id, editValue, getDefaultDisplayName, effectiveTypeId, typeId]);
+    const handleCancel = React.useCallback(() => {
+        setIsEditing(false);
+        setEditValue(displayName);
+    }, [displayName]);
+    const handleKeyDown = React.useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            e.stopPropagation();
+            handleSave();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            handleCancel();
+        }
+    }, [handleSave, handleCancel]);
+    React.useEffect(() => {
+        if (isEditing && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [isEditing]);
     return (jsxRuntime.jsxs("div", { className: "flex items-center justify-center px-2 border-b border-solid border-gray-500 dark:border-gray-400 text-gray-600 dark:text-gray-300", style: {
             maxHeight: NODE_HEADER_HEIGHT_PX,
             minHeight: NODE_HEADER_HEIGHT_PX,
-        }, children: [jsxRuntime.jsx("strong", { className: "flex-1 h-full text-sm", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, children: title }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("button", { className: "w-4 h-4 border border-gray-400 rounded text-[10px] leading-3 flex items-center justify-center", title: "Invalidate and re-run", onClick: (e) => {
+        }, children: [isEditing ? (jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: handleSave, onKeyDown: handleKeyDown, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), className: "flex-1 h-full text-sm bg-transparent border border-blue-500 rounded px-1 outline-none wb-nodrag", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` } })) : (jsxRuntime.jsx("strong", { className: `flex-1 h-full text-sm select-none truncate ${typeId ? "cursor-text" : ""}`, style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, onDoubleClick: handleDoubleClick, title: typeId ? "Double-click to rename" : undefined, children: displayName })), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("button", { className: "w-4 h-4 border border-gray-400 rounded text-[10px] leading-3 flex items-center justify-center", title: "Invalidate and re-run", onClick: (e) => {
                             e.stopPropagation();
                             handleInvalidate();
                         }, children: jsxRuntime.jsx(react$1.ArrowClockwiseIcon, { size: 10 }) }), right, validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")