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/hooks.ts

@@ -0,0 +1,47 @@
+import React, { Dispatch, SetStateAction, useCallback } from 'react';
+import { Node } from 'reactflow';
+
+export const useHandleDrag = () => {
+  const handleDrag = useCallback(
+    (operatorId: string) => (ev: React.DragEvent<HTMLDivElement>) => {
+      console.info(ev.clientX, ev.pageY);
+      ev.dataTransfer.setData('operatorId', operatorId);
+      ev.dataTransfer.setData('startClientX', ev.clientX.toString());
+      ev.dataTransfer.setData('startClientY', ev.clientY.toString());
+    },
+    [],
+  );
+
+  return { handleDrag };
+};
+
+export const useHandleDrop = (setNodes: Dispatch<SetStateAction<Node[]>>) => {
+  const allowDrop = (ev: React.DragEvent<HTMLDivElement>) => {
+    ev.preventDefault();
+  };
+
+  const handleDrop = useCallback(
+    (ev: React.DragEvent<HTMLDivElement>) => {
+      ev.preventDefault();
+      const operatorId = ev.dataTransfer.getData('operatorId');
+      const startClientX = ev.dataTransfer.getData('startClientX');
+      const startClientY = ev.dataTransfer.getData('startClientY');
+      console.info(operatorId);
+      console.info(ev.pageX, ev.pageY);
+      console.info(ev.clientX, ev.clientY);
+      console.info(ev.movementX, ev.movementY);
+      const x = ev.clientX - 200;
+      const y = ev.clientY - 72;
+      setNodes((pre) => {
+        return pre.concat({
+          id: operatorId,
+          position: { x, y },
+          data: { label: operatorId },
+        });
+      });
+    },
+    [setNodes],
+  );
+
+  return { handleDrop, allowDrop };
+};