feat: fixed issue with threshold translation #882 and add NodeContextMenu (#906)

### What problem does this PR solve?

feat: fixed issue with threshold translation #882
feat: add NodeContextMenu

### Type of change


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

web/src/pages/flow/hooks.ts

@@ -1,47 +1,75 @@
-import React, { Dispatch, SetStateAction, useCallback } from 'react';
-import { Node } from 'reactflow';
+import { useSetModalState } from '@/hooks/commonHooks';
+import React, { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import { Node, ReactFlowInstance } from 'reactflow';
+import { v4 as uuidv4 } from 'uuid';
 
 export const useHandleDrag = () => {
-  const handleDrag = useCallback(
+  const handleDragStart = 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());
+      ev.dataTransfer.setData('application/reactflow', operatorId);
+      ev.dataTransfer.effectAllowed = 'move';
     },
     [],
   );
 
-  return { handleDrag };
+  return { handleDragStart };
 };
 
 export const useHandleDrop = (setNodes: Dispatch<SetStateAction<Node[]>>) => {
-  const allowDrop = (ev: React.DragEvent<HTMLDivElement>) => {
-    ev.preventDefault();
-  };
+  const [reactFlowInstance, setReactFlowInstance] =
+    useState<ReactFlowInstance<any, any>>();
 
-  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 },
-        });
+  const onDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+
+      const type = event.dataTransfer.getData('application/reactflow');
+
+      // check if the dropped element is valid
+      if (typeof type === 'undefined' || !type) {
+        return;
+      }
+
+      // reactFlowInstance.project was renamed to reactFlowInstance.screenToFlowPosition
+      // and you don't need to subtract the reactFlowBounds.left/top anymore
+      // details: https://reactflow.dev/whats-new/2023-11-10
+      const position = reactFlowInstance?.screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
       });
+      const newNode = {
+        id: uuidv4(),
+        type,
+        position: position || {
+          x: 0,
+          y: 0,
+        },
+        data: { label: `${type} node` },
+      };
+
+      setNodes((nds) => nds.concat(newNode));
     },
-    [setNodes],
+    [reactFlowInstance, setNodes],
   );
 
-  return { handleDrop, allowDrop };
+  return { onDrop, onDragOver, setReactFlowInstance };
+};
+
+export const useShowDrawer = () => {
+  const {
+    visible: drawerVisible,
+    hideModal: hideDrawer,
+    showModal: showDrawer,
+  } = useSetModalState();
+
+  return {
+    drawerVisible,
+    hideDrawer,
+    showDrawer,
+  };
 };