basic function

src/App.tsx

@@ -15,6 +15,7 @@ import ReactFlow, {
   EdgeChange,
 } from 'reactflow'
 import ConfigNode from './components/graph/ConfigNode'
+import FunctionNode from './components/graph/FunctionNode'
 import RenderingNode from './components/graph/RenderingNode'
 import VariableNode from './components/graph/VariableNode'
 import FlowContext from './lib/flowContext'
@@ -56,7 +57,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, variable: VariableNode }),
+    () => ({ config: ConfigNode, render: RenderingNode, variable: VariableNode, function: FunctionNode }),
     []
   )
 
@@ -109,11 +110,13 @@ export default function App() {
         config: 'config',
         render: 'render',
         variable: 'variable',
+        function: 'function',
       }
       const dataMap: Record<string, any> = {
         config: { yaml: '# Enter YAML here\n', title: `config-${id}` },
         render: {},
         variable: { value: '', valueType: 'string' },
+        function: { body: '// args[0], args[1], ...\nreturn args[0];' },
       }
       const newNode: Node = {
         id,
@@ -168,6 +171,7 @@ export default function App() {
                   <ContextMenuItem onSelect={() => createNode('config')}>Config</ContextMenuItem>
                   <ContextMenuItem onSelect={() => createNode('render')}>Renderer</ContextMenuItem>
                   <ContextMenuItem onSelect={() => createNode('variable')}>Variable</ContextMenuItem>
+                  <ContextMenuItem onSelect={() => createNode('function')}>Function</ContextMenuItem>
                 </ContextMenuGroup>
               </>
             )}