feat: variable node

src/components/graph/ConfigNode.tsx

@@ -44,6 +44,8 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
     const incomingEdges = ctx?.edges?.filter((e: any) => e.target === id) ?? []
     const incomingIds = incomingEdges.map((e: any) => e.source).sort()
     const connectedConfigNodes = (ctx?.nodes ?? []).filter((n: any) => incomingIds.includes(n.id) && n.type === 'config')
+    const connectedVariableNodes = (ctx?.nodes ?? []).filter((n: any) => incomingIds.includes(n.id) && n.type === 'variable')
+    const hasDependencies = connectedConfigNodes.length > 0 || connectedVariableNodes.length > 0
 
     useEffect(() => {
         if (setNodes) {
@@ -129,6 +131,48 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
         [onChange, value]
     )
 
+    const insertVariableReference = useCallback(
+        (sourceNode: any, mode: 'prepend' | 'append' | 'cursor') => {
+            const insertText = `\${${sourceNode.id}}`
+            const editor = editorRef.current
+            const monaco = monacoRef.current
+
+            try {
+                if (editor && monaco) {
+                    const model = editor.getModel()
+                    const lineCount = model.getLineCount()
+                    const selection = editor.getSelection()
+
+                    let range
+                    if (mode === 'prepend') {
+                        range = new monaco.Range(1, 1, 1, 1)
+                    } else if (mode === 'append') {
+                        range = new monaco.Range(lineCount + 1, 1, lineCount + 1, 1)
+                    } else if (selection) {
+                        range = new monaco.Range(selection.startLineNumber, selection.startColumn, selection.startLineNumber, selection.startColumn)
+                    } else {
+                        range = new monaco.Range(lineCount + 1, 1, lineCount + 1, 1)
+                    }
+
+                    editor.executeEdits('insert-var', [{ range, text: insertText, forceMoveMarkers: true }])
+                    const newVal = editor.getModel().getValue()
+                    onChange(newVal)
+                    return
+                }
+
+                if (mode === 'prepend') {
+                    onChange(insertText + value)
+                } else {
+                    onChange(value + insertText)
+                }
+            } catch (err) {
+                // eslint-disable-next-line no-console
+                console.error('Insert variable reference failed', err)
+            }
+        },
+        [onChange, value]
+    )
+
     return (
         <BaseNode className="w-80">
             <BaseNodeHeader className="border-b">
@@ -137,7 +181,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
             </BaseNodeHeader>
 
             <BaseNodeContent>
-                {connectedConfigNodes.length > 0 && (
+                {hasDependencies && (
                     <div className="w-full">
                         <Menubar className="h-auto bg-none p-1 border-none shadow-none">
                             <MenubarMenu>
@@ -146,7 +190,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
                                 </MenubarTrigger>
                                 <MenubarContent className="min-w-[12rem]">
                                     {connectedConfigNodes.map((n: any) => (
-                                        <MenubarSub key={n.id}>
+                                        <MenubarSub key={`config-${n.id}`}>
                                             <MenubarSubTrigger className="text-xs">
                                                 {n.data?.title ?? n.id}
                                             </MenubarSubTrigger>
@@ -172,6 +216,21 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
                                             </MenubarSubContent>
                                         </MenubarSub>
                                     ))}
+                                    {connectedVariableNodes.map((n: any) => (
+                                        <MenubarSub key={`var-${n.id}`}>
+                                            <MenubarSubTrigger className="text-xs">
+                                                {n.id}
+                                            </MenubarSubTrigger>
+                                            <MenubarSubContent>
+                                                <MenubarItem
+                                                    className="text-xs"
+                                                    onClick={() => insertVariableReference(n, 'cursor')}
+                                                >
+                                                    Insert at cursor
+                                                </MenubarItem>
+                                            </MenubarSubContent>
+                                        </MenubarSub>
+                                    ))}
                                 </MenubarContent>
                             </MenubarMenu>
                         </Menubar>