feat: add FlowCanvas (#593)

### What problem does this PR solve?

feat: handle operator drag
feat: add FlowCanvas
#592

### Type of change

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

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

@@ -0,0 +1,92 @@
+import { useCallback, useEffect, useState } from 'react';
+import ReactFlow, {
+  Background,
+  Controls,
+  Edge,
+  Node,
+  OnConnect,
+  OnEdgesChange,
+  OnNodesChange,
+  addEdge,
+  applyEdgeChanges,
+  applyNodeChanges,
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+
+import { useHandleDrop } from '../hooks';
+import { TextUpdaterNode } from './node';
+
+const nodeTypes = { textUpdater: TextUpdaterNode };
+
+const initialNodes = [
+  {
+    id: 'node-1',
+    type: 'textUpdater',
+    position: { x: 200, y: 50 },
+    data: { value: 123 },
+  },
+  {
+    id: '1',
+    data: { label: 'Hello' },
+    position: { x: 0, y: 0 },
+    type: 'input',
+  },
+  {
+    id: '2',
+    data: { label: 'World' },
+    position: { x: 100, y: 100 },
+  },
+];
+
+const initialEdges = [
+  { id: '1-2', source: '1', target: '2', label: 'to the', type: 'step' },
+];
+
+function FlowCanvas() {
+  const [nodes, setNodes] = useState<Node[]>(initialNodes);
+  const [edges, setEdges] = useState<Edge[]>(initialEdges);
+
+  const onNodesChange: OnNodesChange = useCallback(
+    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
+    [],
+  );
+  const onEdgesChange: OnEdgesChange = useCallback(
+    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+    [],
+  );
+
+  const onConnect: OnConnect = useCallback(
+    (params) => setEdges((eds) => addEdge(params, eds)),
+    [],
+  );
+
+  const { handleDrop, allowDrop } = useHandleDrop(setNodes);
+
+  useEffect(() => {
+    console.info('nodes:', nodes);
+    console.info('edges:', edges);
+  }, [nodes, edges]);
+
+  return (
+    <div
+      style={{ height: '100%', width: '100%' }}
+      onDrop={handleDrop}
+      onDragOver={allowDrop}
+    >
+      <ReactFlow
+        nodes={nodes}
+        onNodesChange={onNodesChange}
+        edges={edges}
+        onEdgesChange={onEdgesChange}
+        // fitView
+        onConnect={onConnect}
+        nodeTypes={nodeTypes}
+      >
+        <Background />
+        <Controls />
+      </ReactFlow>
+    </div>
+  );
+}
+
+export default FlowCanvas;

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

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

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

@@ -0,0 +1,41 @@
+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);
+  }, []);
+
+  return (
+    <div className={styles.textUpdaterNode}>
+      <Handle
+        type="target"
+        position={Position.Top}
+        isConnectable={isConnectable}
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        // style={handleStyle}
+        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>
+  );
+}