feat(flow): 禁用应用编排模式下的删除和上下文菜单功能

- 添加 isDeleteDisabled 状态以控制删除功能的可用性
- 在应用编排模式(useDefault为 false)下禁用节点删除- 在应用编排模式或运行时状态下禁用节点/边/画布上下文菜单
- 更新 onNodeContextMenu、onEdgeContextMenu 和 onPaneContextMenu 的条件判断
-限制统一添加节点菜单仅在默认模式且非运行时显示
- 在 deleteNode 和 deleteEdge 回调中增加 useDefault 状态检查
- 更新相关依赖数组以包含 useDefault 状态变化监听
master
钟良源 3 months ago
parent 2e26666c03
commit c86441727f

@ -559,6 +559,12 @@ export const useFlowCallbacks = (
// region 节点/边操作 // region 节点/边操作
// 删除节点函数 // 删除节点函数
const deleteNode = useCallback((node: Node) => { const deleteNode = useCallback((node: Node) => {
// 在应用编排模式下useDefault为false不允许删除节点
if (!useDefault) {
console.warn('在应用编排模式下不允许删除节点');
return;
}
// 开始和结束节点不允许删除 // 开始和结束节点不允许删除
if (node.type === 'start' || node.type === 'end') { if (node.type === 'start' || node.type === 'end') {
console.warn('开始和结束节点不允许删除'); console.warn('开始和结束节点不允许删除');
@ -646,9 +652,15 @@ export const useFlowCallbacks = (
}); });
document.dispatchEvent(event); document.dispatchEvent(event);
}, 0); }, 0);
}, [nodes, edges]); }, [nodes, edges, useDefault]);
// 删除边函数 // 删除边函数
const deleteEdge = useCallback((edge: Edge) => { const deleteEdge = useCallback((edge: Edge) => {
// 在应用编排模式下useDefault为false不允许删除边
if (!useDefault) {
console.warn('在应用编排模式下不允许删除边');
return;
}
setEdges((eds: Edge[]) => eds.filter((e) => e.id !== edge.id)); setEdges((eds: Edge[]) => eds.filter((e) => e.id !== edge.id));
// 删除边后记录历史 // 删除边后记录历史
@ -661,7 +673,7 @@ export const useFlowCallbacks = (
}); });
document.dispatchEvent(event); document.dispatchEvent(event);
}, 0); }, 0);
}, [nodes, edges]); }, [nodes, edges, useDefault]);
// 在边上添加节点的具体实现 // 在边上添加节点的具体实现
const addNodeOnEdge = useCallback((nodeType: string, node: any) => { const addNodeOnEdge = useCallback((nodeType: string, node: any) => {
const { currentAppData, flowData } = store.getState().ideContainer; const { currentAppData, flowData } = store.getState().ideContainer;

@ -145,6 +145,9 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
? appRuntimeData[currentAppData.id].isRunning ? appRuntimeData[currentAppData.id].isRunning
: false; : false;
// 在应用编排模式下useDefault为false禁用删除功能
const isDeleteDisabled = !useDefault || currentAppIsRunning;
// 监听键盘事件实现快捷键 // 监听键盘事件实现快捷键
useEffect(() => { useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => { const handleKeyDown = (e: KeyboardEvent) => {
@ -210,9 +213,14 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
); );
// 允许删除操作继续进行 // 允许删除操作继续进行
return !currentAppIsRunning; // 运行时禁止删除节点 return !isDeleteDisabled; // 在应用编排模式或运行时禁止删除节点
}} }}
onNodesDelete={(deleted) => { onNodesDelete={(deleted) => {
// 如果在应用编排模式或运行时,禁止删除
if (isDeleteDisabled) {
return;
}
// 检查是否有循环节点 // 检查是否有循环节点
const loopNodes = deleted.filter(node => const loopNodes = deleted.filter(node =>
node.data?.type === 'LOOP_START' || node.data?.type === 'LOOP_END' node.data?.type === 'LOOP_START' || node.data?.type === 'LOOP_END'
@ -279,11 +287,11 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
connectionLineType={ConnectionLineType.SmoothStep} connectionLineType={ConnectionLineType.SmoothStep}
connectionLineComponent={CustomConnectionLine} connectionLineComponent={CustomConnectionLine}
onNodeDragStop={!currentAppIsRunning ? onNodeDragStop : undefined} // 运行时禁用节点拖拽停止 onNodeDragStop={!currentAppIsRunning ? onNodeDragStop : undefined} // 运行时禁用节点拖拽停止
onNodeContextMenu={!currentAppIsRunning ? onNodeContextMenu : undefined} // 运行时禁用节点上下文菜单 onNodeContextMenu={(!currentAppIsRunning && useDefault) ? onNodeContextMenu : undefined} // 运行时或应用编排模式下禁用节点上下文菜单
onNodeDoubleClick={!currentAppIsRunning ? onNodeDoubleClick : undefined} // 运行时禁用节点双击 onNodeDoubleClick={!currentAppIsRunning ? onNodeDoubleClick : undefined} // 运行时禁用节点双击
onEdgeContextMenu={!currentAppIsRunning ? onEdgeContextMenu : undefined} // 运行时禁用边上下文菜单 onEdgeContextMenu={(!currentAppIsRunning && useDefault) ? onEdgeContextMenu : undefined} // 运行时或应用编排模式下禁用边上下文菜单
onPaneClick={!currentAppIsRunning ? onPaneClick : undefined} // 运行时禁用面板点击 onPaneClick={!currentAppIsRunning ? onPaneClick : undefined} // 运行时禁用面板点击
onPaneContextMenu={!currentAppIsRunning ? onPaneContextMenu : undefined} // 运行时禁用面板上下文菜单 onPaneContextMenu={(!currentAppIsRunning && useDefault) ? onPaneContextMenu : undefined} // 运行时或应用编排模式下禁用面板上下文菜单
onEdgeMouseEnter={(_event, edge) => { onEdgeMouseEnter={(_event, edge) => {
setEdges((eds) => eds.map(e => { setEdges((eds) => eds.map(e => {
if (e.id === edge.id) { if (e.id === edge.id) {
@ -320,8 +328,8 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
<AlignmentGuides /> <AlignmentGuides />
</ReactFlow> </ReactFlow>
{/*节点右键上下文*/} {/*节点右键上下文 - 仅在默认模式且非运行时显示*/}
{!currentAppIsRunning && menu && menu.type === 'node' && ( {!currentAppIsRunning && useDefault && menu && menu.type === 'node' && (
<div <div
style={{ style={{
position: 'absolute', position: 'absolute',
@ -341,8 +349,8 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
</div> </div>
)} )}
{/*边右键上下文*/} {/*边右键上下文 - 仅在默认模式且非运行时显示*/}
{!currentAppIsRunning && menu && menu.type === 'edge' && ( {!currentAppIsRunning && useDefault && menu && menu.type === 'edge' && (
<div <div
style={{ style={{
position: 'absolute', position: 'absolute',
@ -364,8 +372,8 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
</div> </div>
)} )}
{/*画布右键上下文*/} {/*画布右键上下文 - 仅在默认模式且非运行时显示*/}
{!currentAppIsRunning && menu && menu.type === 'pane' && ( {!currentAppIsRunning && useDefault && menu && menu.type === 'pane' && (
<div <div
style={{ style={{
position: 'absolute', position: 'absolute',
@ -395,8 +403,8 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
onClose={closeEditModal} onClose={closeEditModal}
/> />
{/*统一的添加节点菜单*/} {/*统一的添加节点菜单 - 仅在默认模式且非运行时显示*/}
{!currentAppIsRunning && (edgeForNodeAdd || positionForNodeAdd) && ( {!currentAppIsRunning && useDefault && (edgeForNodeAdd || positionForNodeAdd) && (
<div <div
style={{ style={{
position: 'absolute', position: 'absolute',

Loading…
Cancel
Save