fix(flowEditor):修复节点菜单关闭逻辑并优化注释

- 添加 onCloseMenu 回调以在操作后关闭上下文菜单
- 更新节点类型检查逻辑以防止未定义错误
master
钟良源 4 months ago
parent 6a21ce0d59
commit 92b4a783de

@ -122,7 +122,7 @@ export const useFlowCallbacks = (
return sourceDataType === targetDataType; return sourceDataType === targetDataType;
}; };
// 修改 onNodesChange 函数,添加防抖机制 // onNodesChange 函数,添加防抖机制
const onNodesChange = useCallback( const onNodesChange = useCallback(
(changes: any) => { (changes: any) => {
const newNodes = applyNodeChanges(changes, nodes); const newNodes = applyNodeChanges(changes, nodes);
@ -153,7 +153,7 @@ export const useFlowCallbacks = (
[nodes, edges] [nodes, edges]
); );
// 修改 onEdgesChange 函数 // onEdgesChange 函数
const onEdgesChange = useCallback( const onEdgesChange = useCallback(
(changes: any) => { (changes: any) => {
const newEdges = applyEdgeChanges(changes, edges); const newEdges = applyEdgeChanges(changes, edges);
@ -173,7 +173,7 @@ export const useFlowCallbacks = (
setIsDelete(true); setIsDelete(true);
}, []); }, []);
// 修改 onConnect 函数 // onConnect 函数
const onConnect = useCallback( const onConnect = useCallback(
(params: any) => { (params: any) => {
// 获取源节点和目标节点 // 获取源节点和目标节点
@ -268,7 +268,6 @@ export const useFlowCallbacks = (
}, []); }, []);
// 侧边栏节点实例 // 侧边栏节点实例
// 修改 onDrop 函数
const onDrop = useCallback( const onDrop = useCallback(
(event: React.DragEvent) => { (event: React.DragEvent) => {
event.preventDefault(); event.preventDefault();
@ -400,7 +399,7 @@ export const useFlowCallbacks = (
// saveFlowDataToServer(); // saveFlowDataToServer();
}, [nodes, editingNode, closeEditModal]); }, [nodes, editingNode, closeEditModal]);
// 修改删除节点函数 // 删除节点函数
const deleteNode = useCallback((node: Node) => { const deleteNode = useCallback((node: Node) => {
setNodes((nds: Node[]) => nds.filter((n) => n.id !== node.id)); setNodes((nds: Node[]) => nds.filter((n) => n.id !== node.id));
setEdges((eds: Edge[]) => eds.filter((e) => e.source !== node.id && e.target !== node.id)); setEdges((eds: Edge[]) => eds.filter((e) => e.source !== node.id && e.target !== node.id));
@ -417,7 +416,7 @@ export const useFlowCallbacks = (
}, 0); }, 0);
}, [nodes, edges]); }, [nodes, edges]);
// 修改删除边函数 // 删除边函数
const deleteEdge = useCallback((edge: Edge) => { const deleteEdge = useCallback((edge: Edge) => {
setEdges((eds: Edge[]) => eds.filter((e) => e.id !== edge.id)); 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) => { const addNodeOnEdge = useCallback((nodeType: string, node: any) => {
if (!edgeForNodeAdd || !reactFlowInstance) return; if (!edgeForNodeAdd || !reactFlowInstance) return;
@ -532,7 +530,6 @@ export const useFlowCallbacks = (
}, [edgeForNodeAdd, nodes, reactFlowInstance, edges]); }, [edgeForNodeAdd, nodes, reactFlowInstance, edges]);
// 在画布上添加节点 // 在画布上添加节点
// 修改 addNodeOnPane 函数
const addNodeOnPane = useCallback((nodeType: string, position: { x: number; y: number }, node?: any) => { const addNodeOnPane = useCallback((nodeType: string, position: { x: number; y: number }, node?: any) => {
if (!reactFlowInstance) return; if (!reactFlowInstance) return;
@ -632,7 +629,7 @@ export const useFlowCallbacks = (
} }
}); });
// 修改运行处理函数 // 运行处理函数
const handleRun = useCallback(async (running: boolean) => { const handleRun = useCallback(async (running: boolean) => {
if (running) { if (running) {
// 启动运行 // 启动运行
@ -641,7 +638,6 @@ export const useFlowCallbacks = (
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'; const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
let wsApi = `${protocol}://${window.location.host}/ws/v1/bpms-runtime`; let wsApi = `${protocol}://${window.location.host}/ws/v1/bpms-runtime`;
if (window.location.host.includes('localhost')) { if (window.location.host.includes('localhost')) {
// WS_API = `wss://${host}/ws/v1/bpms-runtime`;
wsApi = `ws://api.myserver.com:4121/ws/v1/bpms-runtime`; wsApi = `ws://api.myserver.com:4121/ws/v1/bpms-runtime`;
} }
const uri = `${wsApi}?x-auth0-token=${token}`; const uri = `${wsApi}?x-auth0-token=${token}`;

@ -254,6 +254,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
onDelete={deleteNode} onDelete={deleteNode}
onEdit={editNode} onEdit={editNode}
onCopy={copyNode} onCopy={copyNode}
onCloseMenu={setMenu}
/> />
</div> </div>
)} )}

@ -1,4 +1,4 @@
import React from 'react'; import React, { useEffect } from 'react';
import { Menu, Dropdown } from '@arco-design/web-react'; import { Menu, Dropdown } from '@arco-design/web-react';
import { Node } from '@xyflow/react'; import { Node } from '@xyflow/react';
@ -8,24 +8,29 @@ interface NodeContextMenuProps {
onDelete?: (node: Node) => void; onDelete?: (node: Node) => void;
onCopy?: (node: Node) => void; onCopy?: (node: Node) => void;
onEdit?: (node: Node) => void; onEdit?: (node: Node) => void;
onCloseMenu?: (data: React.Dispatch<React.SetStateAction<any>>) => void;
} }
const NodeContextMenu: React.FC<NodeContextMenuProps> = ({ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
node, node,
onDelete, onDelete,
onCopy, onCopy,
onEdit onEdit,
onCloseMenu
}) => { }) => {
const handleDelete = () => { const handleDelete = () => {
onDelete && onDelete(node); onDelete && onDelete(node);
onCloseMenu(null);
}; };
const handleCopy = () => { const handleCopy = () => {
onCopy && onCopy(node); onCopy && onCopy(node);
onCloseMenu(null);
}; };
const handleEdit = () => { const handleEdit = () => {
onEdit && onEdit(node); onEdit && onEdit(node);
onCloseMenu(null);
}; };
return ( return (
@ -34,7 +39,7 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
</Menu.Item> </Menu.Item>
{(!['start', 'end'].includes(node.type)) && ( {(!['start', 'end'].includes(node?.type)) && (
<> <>
<Menu.Item key="copy" onClick={handleCopy}> <Menu.Item key="copy" onClick={handleCopy}>

Loading…
Cancel
Save