diff --git a/src/hooks/useFlowCallbacks.ts b/src/hooks/useFlowCallbacks.ts index 32f8f82..6c11e7d 100644 --- a/src/hooks/useFlowCallbacks.ts +++ b/src/hooks/useFlowCallbacks.ts @@ -122,7 +122,7 @@ export const useFlowCallbacks = ( return sourceDataType === targetDataType; }; - // 修改 onNodesChange 函数,添加防抖机制 + // onNodesChange 函数,添加防抖机制 const onNodesChange = useCallback( (changes: any) => { const newNodes = applyNodeChanges(changes, nodes); @@ -153,7 +153,7 @@ export const useFlowCallbacks = ( [nodes, edges] ); - // 修改 onEdgesChange 函数 + // onEdgesChange 函数 const onEdgesChange = useCallback( (changes: any) => { const newEdges = applyEdgeChanges(changes, edges); @@ -173,7 +173,7 @@ export const useFlowCallbacks = ( setIsDelete(true); }, []); - // 修改 onConnect 函数 + // onConnect 函数 const onConnect = useCallback( (params: any) => { // 获取源节点和目标节点 @@ -268,7 +268,6 @@ export const useFlowCallbacks = ( }, []); // 侧边栏节点实例 - // 修改 onDrop 函数 const onDrop = useCallback( (event: React.DragEvent) => { event.preventDefault(); @@ -400,7 +399,7 @@ export const useFlowCallbacks = ( // saveFlowDataToServer(); }, [nodes, editingNode, closeEditModal]); - // 修改删除节点函数 + // 删除节点函数 const deleteNode = useCallback((node: Node) => { setNodes((nds: Node[]) => nds.filter((n) => n.id !== node.id)); setEdges((eds: Edge[]) => eds.filter((e) => e.source !== node.id && e.target !== node.id)); @@ -417,7 +416,7 @@ export const useFlowCallbacks = ( }, 0); }, [nodes, edges]); - // 修改删除边函数 + // 删除边函数 const deleteEdge = useCallback((edge: Edge) => { setEdges((eds: Edge[]) => eds.filter((e) => e.id !== edge.id)); @@ -452,7 +451,6 @@ export const useFlowCallbacks = ( }, []); // 在边上添加节点的具体实现 - // 修改 addNodeOnEdge 函数 const addNodeOnEdge = useCallback((nodeType: string, node: any) => { if (!edgeForNodeAdd || !reactFlowInstance) return; @@ -532,7 +530,6 @@ export const useFlowCallbacks = ( }, [edgeForNodeAdd, nodes, reactFlowInstance, edges]); // 在画布上添加节点 - // 修改 addNodeOnPane 函数 const addNodeOnPane = useCallback((nodeType: string, position: { x: number; y: number }, node?: any) => { if (!reactFlowInstance) return; @@ -632,7 +629,7 @@ export const useFlowCallbacks = ( } }); - // 修改运行处理函数 + // 运行处理函数 const handleRun = useCallback(async (running: boolean) => { if (running) { // 启动运行 @@ -641,7 +638,6 @@ export const useFlowCallbacks = ( const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'; let wsApi = `${protocol}://${window.location.host}/ws/v1/bpms-runtime`; if (window.location.host.includes('localhost')) { - // WS_API = `wss://${host}/ws/v1/bpms-runtime`; wsApi = `ws://api.myserver.com:4121/ws/v1/bpms-runtime`; } const uri = `${wsApi}?x-auth0-token=${token}`; diff --git a/src/pages/flowEditor/FlowEditorMain.tsx b/src/pages/flowEditor/FlowEditorMain.tsx index 6ae58f1..2c27956 100644 --- a/src/pages/flowEditor/FlowEditorMain.tsx +++ b/src/pages/flowEditor/FlowEditorMain.tsx @@ -254,6 +254,7 @@ const FlowEditorMain: React.FC = (props) => { onDelete={deleteNode} onEdit={editNode} onCopy={copyNode} + onCloseMenu={setMenu} /> )} diff --git a/src/pages/flowEditor/components/nodeContextMenu.tsx b/src/pages/flowEditor/components/nodeContextMenu.tsx index a2ce794..78c963e 100644 --- a/src/pages/flowEditor/components/nodeContextMenu.tsx +++ b/src/pages/flowEditor/components/nodeContextMenu.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Menu, Dropdown } from '@arco-design/web-react'; import { Node } from '@xyflow/react'; @@ -8,24 +8,29 @@ interface NodeContextMenuProps { onDelete?: (node: Node) => void; onCopy?: (node: Node) => void; onEdit?: (node: Node) => void; + onCloseMenu?: (data: React.Dispatch>) => void; } const NodeContextMenu: React.FC = ({ node, onDelete, onCopy, - onEdit + onEdit, + onCloseMenu }) => { const handleDelete = () => { onDelete && onDelete(node); + onCloseMenu(null); }; const handleCopy = () => { onCopy && onCopy(node); + onCloseMenu(null); }; const handleEdit = () => { onEdit && onEdit(node); + onCloseMenu(null); }; return ( @@ -34,7 +39,7 @@ const NodeContextMenu: React.FC = ({ 编辑节点 - {(!['start', 'end'].includes(node.type)) && ( + {(!['start', 'end'].includes(node?.type)) && ( <> 复制节点