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/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>
+  );
+}