refactor(web): migrate workflow node actions menu (#35785)

web/app/components/workflow/node-contextmenu.tsx

@@ -1,45 +1,54 @@
 import type { Node } from './types'
-import { useClickAway } from 'ahooks'
 import {
-  memo,
-  useRef,
-} from 'react'
+  ContextMenu,
+  ContextMenuContent,
+} from '@langgenius/dify-ui/context-menu'
+import { useMemo } from 'react'
 import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
 import { usePanelInteractions } from './hooks'
-import PanelOperatorPopup from './nodes/_base/components/panel-operator/panel-operator-popup'
+import { NodeActionsContextMenuContent } from './node-actions-menu/context-menu-content'
+import { NODE_ACTIONS_MENU_WIDTH_CLASS_NAME } from './node-actions-menu/shared'
 import { useStore } from './store'
 
-const NodeContextmenu = () => {
-  const ref = useRef(null)
+export function NodeContextmenu() {
   const nodes = useNodes()
   const { handleNodeContextmenuCancel } = usePanelInteractions()
   const nodeMenu = useStore(s => s.nodeMenu)
   const currentNode = nodes.find(node => node.id === nodeMenu?.nodeId) as Node
 
-  useClickAway(() => {
-    handleNodeContextmenuCancel()
-  }, ref)
+  const anchor = useMemo(() => {
+    if (!nodeMenu || !currentNode)
+      return undefined
 
-  if (!nodeMenu || !currentNode)
+    return {
+      getBoundingClientRect: () => DOMRect.fromRect({
+        width: 0,
+        height: 0,
+        x: nodeMenu.clientX,
+        y: nodeMenu.clientY,
+      }),
+    }
+  }, [currentNode, nodeMenu])
+
+  if (!nodeMenu || !currentNode || !anchor)
     return null
 
   return (
-    <div
-      className="absolute z-9"
-      style={{
-        left: nodeMenu.left,
-        top: nodeMenu.top,
-      }}
-      ref={ref}
+    <ContextMenu
+      open
+      onOpenChange={open => !open && handleNodeContextmenuCancel()}
     >
-      <PanelOperatorPopup
-        id={currentNode.id}
-        data={currentNode.data}
-        onClosePopup={() => handleNodeContextmenuCancel()}
-        showHelpLink
-      />
-    </div>
+      <ContextMenuContent
+        positionerProps={{ anchor }}
+        popupClassName={NODE_ACTIONS_MENU_WIDTH_CLASS_NAME}
+      >
+        <NodeActionsContextMenuContent
+          id={currentNode.id}
+          data={currentNode.data}
+          onClose={handleNodeContextmenuCancel}
+          showHelpLink
+        />
+      </ContextMenuContent>
+    </ContextMenu>
   )
 }
-
-export default memo(NodeContextmenu)