diff --git a/src/pages/flowEditor/FlowEditorMain.tsx b/src/pages/flowEditor/FlowEditorMain.tsx index 2769ae1..171a77a 100644 --- a/src/pages/flowEditor/FlowEditorMain.tsx +++ b/src/pages/flowEditor/FlowEditorMain.tsx @@ -146,7 +146,7 @@ const FlowEditorMain: React.FC = (props) => { useEffect(() => { const handleToggleNodeVisibility = (event: CustomEvent) => { const { appId, isVisible } = event.detail; - + if (isVisible) { // 显示节点 - 从隐藏节点集合中移除 setHiddenNodes(prev => { @@ -154,14 +154,15 @@ const FlowEditorMain: React.FC = (props) => { newSet.delete(appId); return newSet; }); - } else { + } + else { // 隐藏节点 - 添加到隐藏节点集合 setHiddenNodes(prev => new Set(prev).add(appId)); } }; document.addEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener); - + return () => { document.removeEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener); }; @@ -180,7 +181,7 @@ const FlowEditorMain: React.FC = (props) => { useEffect(() => { const handleToggleNodeVisibility = (event: CustomEvent) => { const { appId, isVisible } = event.detail; - + if (isVisible) { // 显示节点 - 从隐藏节点集合中移除 setHiddenNodes(prev => { @@ -188,14 +189,15 @@ const FlowEditorMain: React.FC = (props) => { newSet.delete(appId); return newSet; }); - } else { + } + else { // 隐藏节点 - 添加到隐藏节点集合 setHiddenNodes(prev => new Set(prev).add(appId)); } }; document.addEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener); - + return () => { document.removeEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener); }; @@ -238,7 +240,14 @@ const FlowEditorMain: React.FC = (props) => { return (
e.preventDefault()}> + onContextMenu={(e) => e.preventDefault()} + // 添加点击事件处理器,用于关闭添加节点菜单 + onClick={() => { + if (edgeForNodeAdd || positionForNodeAdd) { + setEdgeForNodeAdd(null); + setPositionForNodeAdd(null); + } + }}> { @@ -246,7 +255,7 @@ const FlowEditorMain: React.FC = (props) => { const isHidden = hiddenNodes.has(node.id); // 应用透明度样式 const style = isHidden ? { opacity: 0.3 } : {}; - + return { ...node, draggable: !currentAppIsRunning, @@ -262,7 +271,7 @@ const FlowEditorMain: React.FC = (props) => { const isTargetHidden = hiddenNodes.has(edge.target); // 如果源节点或目标节点被隐藏,则边也应用透明度 const style = (isSourceHidden || isTargetHidden) ? { opacity: 0.3 } : {}; - + // 更新边的数据,确保选择框也应用透明度 return { ...edge, @@ -291,7 +300,7 @@ const FlowEditorMain: React.FC = (props) => { console.warn('在应用编排模式下不允许删除节点'); return false; // 阻止删除节点操作 } - + // 检查是否有开始或结束节点 const hasStartOrEndNode = nodes.some(node => node.type === 'start' || node.type === 'end'); if (hasStartOrEndNode) { @@ -313,7 +322,7 @@ const FlowEditorMain: React.FC = (props) => { console.warn('在应用编排模式下不允许删除节点'); return; } - + // 如果在运行时,禁止删除 if (currentAppIsRunning) { return; @@ -367,10 +376,10 @@ const FlowEditorMain: React.FC = (props) => { // 删除所有相关节点和边 setNodes((nds) => nds.filter((n) => !nodesToRemove.find((d) => d.id === n.id))); - + // 删除与这些节点相关的所有边 const nodeIdsToRemove = nodesToRemove.map(node => node.id); - setEdges((eds) => eds.filter((e) => + setEdges((eds) => eds.filter((e) => !nodeIdsToRemove.includes(e.source) && !nodeIdsToRemove.includes(e.target) )); } @@ -517,6 +526,8 @@ const FlowEditorMain: React.FC = (props) => { zIndex: 1000, transform: 'none' }} + // 点击事件冒泡到父级处理,这里阻止默认行为 + onClick={(e) => e.stopPropagation()} > {