diff --git a/src/hooks/useFlowCallbacks.ts b/src/hooks/useFlowCallbacks.ts index 4a26cfc..5f92960 100644 --- a/src/hooks/useFlowCallbacks.ts +++ b/src/hooks/useFlowCallbacks.ts @@ -693,12 +693,18 @@ export const useFlowCallbacks = ( }, [nodes, edges, useDefault]); // 删除边函数 const deleteEdge = useCallback((edge: Edge) => { - // 在应用编排模式下(useDefault为false)不允许删除边 - if (!useDefault) { - console.warn('在应用编排模式下不允许删除边'); + // 获取当前应用的运行状态 + const { appRuntimeData, currentAppData } = store.getState().ideContainer; + const currentAppIsRunning = currentAppData?.id && appRuntimeData[currentAppData.id] + ? appRuntimeData[currentAppData.id].isRunning + : false; + + // 在运行时禁止删除边 + if (currentAppIsRunning) { + console.warn('在运行时不允许删除边'); return; } - + setEdges((eds: Edge[]) => eds.filter((e) => e.id !== edge.id)); // 删除边后记录历史 @@ -711,7 +717,7 @@ export const useFlowCallbacks = ( }); document.dispatchEvent(event); }, 0); - }, [nodes, edges, useDefault]); + }, [nodes, edges]); // 在边上添加节点的具体实现 const addNodeOnEdge = useCallback((nodeType: string, node: any) => { const { currentAppData, flowData } = store.getState().ideContainer; @@ -1294,7 +1300,7 @@ export const useFlowCallbacks = ( eventId: Array.from(new Set(item.eventId)) })); try { - updateAppFlowData(appFlowParams); + updateAppFlowData(appEventParams); if (appEventParams.length > 0) { for (const item of appEventParams) { await sleep(500); diff --git a/src/pages/flowEditor/FlowEditorMain.tsx b/src/pages/flowEditor/FlowEditorMain.tsx index 2e73581..fb35c24 100644 --- a/src/pages/flowEditor/FlowEditorMain.tsx +++ b/src/pages/flowEditor/FlowEditorMain.tsx @@ -138,15 +138,15 @@ const FlowEditorMain: React.FC = (props) => { const { getGuidelines, clearGuidelines, AlignmentGuides } = useAlignmentGuidelines(); const { undo, redo, canUndo, canRedo } = useHistory(); const reactFlowId = useMemo(() => new Date().getTime().toString(), []); - + // 从Redux store中获取当前应用的运行状态 const { appRuntimeData, currentAppData } = useSelector((state: any) => state.ideContainer); - const currentAppIsRunning = currentAppData?.id && appRuntimeData[currentAppData.id] - ? appRuntimeData[currentAppData.id].isRunning + const currentAppIsRunning = currentAppData?.id && appRuntimeData[currentAppData.id] + ? appRuntimeData[currentAppData.id].isRunning : false; // 在应用编排模式下(useDefault为false)禁用删除功能 - const isDeleteDisabled = !useDefault || currentAppIsRunning; + const isDeleteDisabled = currentAppIsRunning; // 监听键盘事件实现快捷键 useEffect(() => { @@ -199,7 +199,13 @@ const FlowEditorMain: React.FC = (props) => { elementsSelectable={!currentAppIsRunning} // 运行时禁用元素选择 connectOnClick={!currentAppIsRunning} // 运行时禁用点击连接 disableKeyboardA11y={currentAppIsRunning} // 运行时禁用键盘交互 - onBeforeDelete={async ({ nodes }) => { + onBeforeDelete={async ({ nodes, edges }) => { + // 在应用编排模式下(useDefault为false)只允许删除边,不允许删除节点 + if (!useDefault && nodes.length > 0) { + console.warn('在应用编排模式下不允许删除节点'); + return false; // 阻止删除节点操作 + } + // 检查是否有开始或结束节点 const hasStartOrEndNode = nodes.some(node => node.type === 'start' || node.type === 'end'); if (hasStartOrEndNode) { @@ -213,11 +219,17 @@ const FlowEditorMain: React.FC = (props) => { ); // 允许删除操作继续进行 - return !isDeleteDisabled; // 在应用编排模式或运行时禁止删除节点 + return !currentAppIsRunning; // 在运行时禁止删除任何元素 }} onNodesDelete={(deleted) => { - // 如果在应用编排模式或运行时,禁止删除 - if (isDeleteDisabled) { + // 在应用编排模式下(useDefault为false)不允许删除节点 + if (!useDefault) { + console.warn('在应用编排模式下不允许删除节点'); + return; + } + + // 如果在运行时,禁止删除 + if (currentAppIsRunning) { return; } @@ -349,8 +361,8 @@ const FlowEditorMain: React.FC = (props) => { )} - {/*边右键上下文 - 仅在默认模式且非运行时显示*/} - {!currentAppIsRunning && useDefault && menu && menu.type === 'edge' && ( + {/*边右键上下文 - 在非运行时显示,应用编排模式下也允许*/} + {!currentAppIsRunning && menu && menu.type === 'edge' && (