feat: build react flow nodes and edges from mock data #918 (#919)

### What problem does this PR solve?
feat: build react flow nodes and edges from mock data #918

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/canvas/index.tsx

@@ -8,6 +8,7 @@ import ReactFlow, {
   OnConnect,
   OnEdgesChange,
   OnNodesChange,
+  Position,
   addEdge,
   applyEdgeChanges,
   applyNodeChanges,
@@ -24,21 +25,27 @@ const nodeTypes = { textUpdater: TextUpdaterNode };
 
 const initialNodes = [
   {
+    sourcePosition: Position.Left,
+    targetPosition: Position.Right,
     id: 'node-1',
     type: 'textUpdater',
-    position: { x: 200, y: 50 },
-    data: { value: 123 },
+    position: { x: 400, y: 100 },
+    data: { label: 123 },
   },
   {
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
     id: '1',
     data: { label: 'Hello' },
-    position: { x: 0, y: 0 },
+    position: { x: 0, y: 50 },
     type: 'input',
   },
   {
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
     id: '2',
     data: { label: 'World' },
-    position: { x: 100, y: 100 },
+    position: { x: 200, y: 50 },
   },
 ];
 
@@ -48,7 +55,6 @@ const initialEdges = [
 
 interface IProps {
   sideWidth: number;
-  showDrawer(): void;
 }
 
 function FlowCanvas({ sideWidth }: IProps) {

web/src/pages/flow/canvas/node/index.less

@@ -1,6 +1,6 @@
 .textUpdaterNode {
-  height: 50px;
-  border: 1px solid #eee;
+  // height: 50px;
+  border: 1px solid black;
   padding: 5px;
   border-radius: 5px;
   background: white;

web/src/pages/flow/canvas/node/index.tsx

@@ -1,41 +1,24 @@
-import { useCallback } from 'react';
 import { Handle, NodeProps, Position } from 'reactflow';
 
 import styles from './index.less';
 
-const handleStyle = { left: 10 };
-
 export function TextUpdaterNode({
   data,
   isConnectable = true,
-}: NodeProps<{ value: number }>) {
-  const onChange = useCallback((evt) => {
-    console.log(evt.target.value);
-  }, []);
-
+}: NodeProps<{ label: string }>) {
   return (
     <div className={styles.textUpdaterNode}>
       <Handle
         type="target"
-        position={Position.Top}
+        position={Position.Left}
         isConnectable={isConnectable}
       />
       <Handle
         type="source"
-        position={Position.Bottom}
-        // style={handleStyle}
+        position={Position.Right}
         isConnectable={isConnectable}
       />
-      <div>
-        <label htmlFor="text">Text:</label>
-        <input id="text" name="text" onChange={onChange} className="nodrag" />
-      </div>
-      {/* <Handle
-        type="source"
-        position={Position.Bottom}
-        id="b"
-        isConnectable={isConnectable}
-      /> */}
+      <div>{data.label}</div>
     </div>
   );
 }