set up of react flow done, example of custom node created, not typed

space_flow/src/CustomNodes/inputTextFolder/index.tsx

@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+import { Handle, Position } from 'reactflow';
+
+
+const handleStyle = {left:10};
+
+export default function TextUpdaterNode({data}) 
+{
+    const onChange = useCallback((evt)=>{
+        console.log(evt.target.value)
+    },[])
+
+
+    return (
+        <div className="text-updater-node">
+            <Handle type='target' position={Position.Top}/>
+            <div>
+                <label htmlFor='text'>Text:</label>
+                <input id="text" name="text" onChange={onChange}></input>
+            </div>
+            <Handle type='source' id='a' position={Position.Bottom} style={handleStyle}/>
+            <Handle type='source' id='b' position={Position.Bottom}/>
+        </div>
+    )
+}
+
+
+

space_flow/src/CustomNodes/inputTextFolder/inputText.css

@@ -0,0 +1,14 @@
+.text-updater-node {
+    height: 50px;
+    border: 1px solid black;
+    padding: 5px;
+    border-radius: 5px;
+    background: white;
+  }
+  
+  .text-updater-node label {
+    display: block;
+    color: #777;
+    font-size: 12px;
+  }
+  

space_flow/src/flow/index.tsx

@@ -1,12 +1,41 @@
 import 'reactflow/dist/style.css';
-import ReactFlow, { Background, Controls } from 'reactflow';
+import { useState, useCallback } from 'react';
+import ReactFlow, { addEdge, applyEdgeChanges, applyNodeChanges, Background, Controls } from 'reactflow';
+import type { Node, Edge } from 'reactflow';
+import TextUpdaterNode from '../CustomNodes/inputTextFolder';
+import '../CustomNodes/inputTextFolder/inputText.css'
+import { type } from 'os';
 
+    // outside component to avoid render trigger
+    const nodeTypes = {textUpdater:TextUpdaterNode}
+
+    const rfStyle={
+        backgroundCOlor:"#B8CEFF"
+    }
 
 export default function Flow(){
+    
+
+    const [nodes,setNodes] =  useState<Array<Node>>([{id:'1', position:{x:0,y:0}, data:{label:"hello"}},
+    {id:'2',data:{label:"world"},position:{x:100,y:100}}, {id:'text-node1',position:{x:50,y:50},data:{value:123}, type:"textUpdater"}])
+    const [edges,setEdges] = useState<Array<Edge>>([])
+    //allow iteractive with the react flow
+    const onNodesChange = useCallback( (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),[] );
+    const onEdgesChange = useCallback( (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),[] );
+    const onConnect = useCallback((params)=>setEdges((eds)=>addEdge(params,eds)),[])
+
     return (
         //need parent component with width and height
         <div className='w-full h-full'>
-            <ReactFlow>
+            <ReactFlow 
+            nodes={nodes}
+            edges={edges}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            onConnect = {onConnect}
+            nodeTypes={nodeTypes}
+            fitView
+            >
                 <Background/>
                     <Controls></Controls>
             </ReactFlow>

space_flow/tsconfig.json

@@ -18,7 +18,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "noImplicitAny": false
   },
   "include": [
     "src"