feat: variable node

src/App.tsx

@@ -16,6 +16,7 @@ import ReactFlow, {
 } from 'reactflow'
 import ConfigNode from './components/graph/ConfigNode'
 import RenderingNode from './components/graph/RenderingNode'
+import VariableNode from './components/graph/VariableNode'
 import FlowContext from './lib/flowContext'
 import {
   ContextMenu,
@@ -55,7 +56,7 @@ export default function App() {
   const [contextTarget, setContextTarget] = React.useState<null | { type: 'canvas' | 'node'; nodeId?: string; clientX: number; clientY: number }>(null)
 
   const nodeTypes = React.useMemo(
-    () => ({ config: ConfigNode, render: RenderingNode }),
+    () => ({ config: ConfigNode, render: RenderingNode, variable: VariableNode }),
     []
   )
 
@@ -104,11 +105,21 @@ export default function App() {
       }
 
       const id = genId()
+      const typeMap: Record<string, Node['type']> = {
+        config: 'config',
+        render: 'render',
+        variable: 'variable',
+      }
+      const dataMap: Record<string, any> = {
+        config: { yaml: '# Enter YAML here\n', title: `config-${id}` },
+        render: {},
+        variable: { value: '', valueType: 'string' },
+      }
       const newNode: Node = {
         id,
-        type: type === 'config' ? 'config' : 'render',
+        type: typeMap[type] ?? 'config',
         position: { x: position.x, y: position.y },
-        data: type === 'config' ? { yaml: '# Enter YAML here\n', title: `config-${id}` } : {},
+        data: dataMap[type] ?? {},
       }
       setNodes((nds) => nds.concat(newNode))
       lastClickRef.current = null
@@ -141,7 +152,7 @@ export default function App() {
                 onInit={onInit}
               >
                 <Background />
-                <Controls />ß
+                <Controls />
                 <MiniMap />
               </ReactFlow>
             </div>
@@ -156,6 +167,7 @@ export default function App() {
                   <ContextMenuLabel>New Node</ContextMenuLabel>
                   <ContextMenuItem onSelect={() => createNode('config')}>Config</ContextMenuItem>
                   <ContextMenuItem onSelect={() => createNode('render')}>Renderer</ContextMenuItem>
+                  <ContextMenuItem onSelect={() => createNode('variable')}>Variable</ContextMenuItem>
                 </ContextMenuGroup>
               </>
             )}