|
|
import React, { useEffect, useMemo } from 'react';
|
|
|
import {
|
|
|
ReactFlow,
|
|
|
Background,
|
|
|
Panel,
|
|
|
SelectionMode,
|
|
|
ConnectionLineType,
|
|
|
Node,
|
|
|
Edge,
|
|
|
OnNodesChange,
|
|
|
OnEdgesChange,
|
|
|
OnConnect,
|
|
|
OnReconnect
|
|
|
} from '@xyflow/react';
|
|
|
import '@xyflow/react/dist/style.css';
|
|
|
import CustomEdge from './components/customEdge';
|
|
|
import CustomConnectionLine from './components/customConnectionLine';
|
|
|
import NodeContextMenu from './components/nodeContextMenu';
|
|
|
import EdgeContextMenu from './components/edgeContextMenu';
|
|
|
import PaneContextMenu from './components/paneContextMenu';
|
|
|
import NodeEditModal from './components/nodeEditModal';
|
|
|
import AddNodeMenu from './components/addNodeMenu';
|
|
|
import ActionBar from './components/actionBar';
|
|
|
import { useAlignmentGuidelines } from '@/hooks/useAlignmentGuidelines';
|
|
|
import { useHistory } from './components/historyContext';
|
|
|
import { NodeTypes } from '@xyflow/react';
|
|
|
import { useSelector } from 'react-redux';
|
|
|
|
|
|
const edgeTypes = {
|
|
|
custom: CustomEdge
|
|
|
};
|
|
|
|
|
|
interface FlowEditorMainProps {
|
|
|
nodes: Node[];
|
|
|
edges: Edge[];
|
|
|
nodeTypes: NodeTypes;
|
|
|
setNodes: React.Dispatch<React.SetStateAction<Node[]>>;
|
|
|
setEdges: React.Dispatch<React.SetStateAction<Edge[]>>;
|
|
|
useDefault: boolean;
|
|
|
reactFlowInstance: any;
|
|
|
reactFlowWrapper: React.RefObject<HTMLDivElement>;
|
|
|
menu: any;
|
|
|
setMenu: React.Dispatch<React.SetStateAction<any>>;
|
|
|
editingNode: Node | null;
|
|
|
setEditingNode: React.Dispatch<React.SetStateAction<Node | null>>;
|
|
|
isEditModalOpen: boolean;
|
|
|
setIsEditModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
|
isDelete: boolean;
|
|
|
setIsDelete: React.Dispatch<React.SetStateAction<boolean>>;
|
|
|
edgeForNodeAdd: Edge | null;
|
|
|
setEdgeForNodeAdd: React.Dispatch<React.SetStateAction<Edge | null>>;
|
|
|
positionForNodeAdd: { x: number, y: number } | null;
|
|
|
setPositionForNodeAdd: React.Dispatch<React.SetStateAction<{ x: number, y: number } | null>>;
|
|
|
isRunning: boolean;
|
|
|
initialData: any;
|
|
|
canvasDataMap: any;
|
|
|
|
|
|
// Callbacks
|
|
|
onNodesChange: OnNodesChange;
|
|
|
onEdgesChange: OnEdgesChange;
|
|
|
onConnect: OnConnect;
|
|
|
onReconnect: OnReconnect;
|
|
|
onDragOver: (event: React.DragEvent) => void;
|
|
|
onDrop: (event: React.DragEvent) => void;
|
|
|
onNodeDrag: (event: React.MouseEvent, node: Node) => void;
|
|
|
onNodeDragStop: () => void;
|
|
|
onNodeContextMenu: (event: React.MouseEvent, node: Node) => void;
|
|
|
onNodeDoubleClick: (event: React.MouseEvent, node: Node) => void;
|
|
|
onEdgeContextMenu: (event: React.MouseEvent, edge: Edge) => void;
|
|
|
onPaneContextMenu: (event: React.MouseEvent) => void;
|
|
|
onPaneClick: () => void;
|
|
|
closeEditModal: () => void;
|
|
|
saveNodeEdit: (updatedData: any) => void;
|
|
|
deleteNode: (node: Node) => void;
|
|
|
deleteEdge: (edge: Edge) => void;
|
|
|
editNode: (node: Node) => void;
|
|
|
editEdge: (edge: Edge) => void;
|
|
|
copyNode: (node: Node) => void;
|
|
|
addNodeOnEdge: (nodeType: string, node: any) => void;
|
|
|
addNodeOnPane: (nodeType: string, position: { x: number, y: number }, node?: any) => void;
|
|
|
handleAddNode: (nodeType: string, node: any) => void;
|
|
|
saveFlowDataToServer: () => void;
|
|
|
handleRun: (running: boolean) => void;
|
|
|
}
|
|
|
|
|
|
const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
|
|
|
const {
|
|
|
nodes,
|
|
|
edges,
|
|
|
nodeTypes,
|
|
|
setNodes,
|
|
|
setEdges,
|
|
|
useDefault,
|
|
|
reactFlowInstance,
|
|
|
reactFlowWrapper,
|
|
|
menu,
|
|
|
setMenu,
|
|
|
editingNode,
|
|
|
setEditingNode,
|
|
|
isEditModalOpen,
|
|
|
setIsEditModalOpen,
|
|
|
isDelete,
|
|
|
setIsDelete,
|
|
|
edgeForNodeAdd,
|
|
|
setEdgeForNodeAdd,
|
|
|
positionForNodeAdd,
|
|
|
setPositionForNodeAdd,
|
|
|
isRunning,
|
|
|
initialData,
|
|
|
canvasDataMap,
|
|
|
onNodesChange,
|
|
|
onEdgesChange,
|
|
|
onConnect,
|
|
|
onReconnect,
|
|
|
onDragOver,
|
|
|
onDrop,
|
|
|
onNodeDrag,
|
|
|
onNodeDragStop,
|
|
|
onNodeContextMenu,
|
|
|
onNodeDoubleClick,
|
|
|
onEdgeContextMenu,
|
|
|
onPaneContextMenu,
|
|
|
onPaneClick,
|
|
|
closeEditModal,
|
|
|
saveNodeEdit,
|
|
|
deleteNode,
|
|
|
deleteEdge,
|
|
|
editNode,
|
|
|
editEdge,
|
|
|
copyNode,
|
|
|
addNodeOnEdge,
|
|
|
addNodeOnPane,
|
|
|
handleAddNode,
|
|
|
saveFlowDataToServer,
|
|
|
handleRun
|
|
|
} = props;
|
|
|
|
|
|
const { getGuidelines, clearGuidelines, AlignmentGuides } = useAlignmentGuidelines();
|
|
|
const { undo, redo, canUndo, canRedo } = useHistory();
|
|
|
const reactFlowId = useMemo(() => new Date().getTime().toString(), []);
|
|
|
|
|
|
// 用于存储隐藏的节点ID
|
|
|
const [hiddenNodes, setHiddenNodes] = React.useState<Set<string>>(new Set());
|
|
|
|
|
|
// 监听自定义事件以隐藏/显示节点
|
|
|
useEffect(() => {
|
|
|
const handleToggleNodeVisibility = (event: CustomEvent) => {
|
|
|
const { appId, isVisible } = event.detail;
|
|
|
|
|
|
if (isVisible) {
|
|
|
// 显示节点 - 从隐藏节点集合中移除
|
|
|
setHiddenNodes(prev => {
|
|
|
const newSet = new Set(prev);
|
|
|
newSet.delete(appId);
|
|
|
return newSet;
|
|
|
});
|
|
|
}
|
|
|
else {
|
|
|
// 隐藏节点 - 添加到隐藏节点集合
|
|
|
setHiddenNodes(prev => new Set(prev).add(appId));
|
|
|
}
|
|
|
};
|
|
|
|
|
|
document.addEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener);
|
|
|
|
|
|
return () => {
|
|
|
document.removeEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener);
|
|
|
};
|
|
|
}, []);
|
|
|
|
|
|
// 从Redux store中获取当前应用的运行状态
|
|
|
const { appRuntimeData, currentAppData } = useSelector((state: any) => state.ideContainer);
|
|
|
const currentAppIsRunning = currentAppData?.id && appRuntimeData[currentAppData.id]
|
|
|
? appRuntimeData[currentAppData.id].isRunning
|
|
|
: false;
|
|
|
|
|
|
// 在应用编排模式下（useDefault为false）禁用删除功能
|
|
|
const isDeleteDisabled = currentAppIsRunning;
|
|
|
|
|
|
// 监听自定义事件以隐藏/显示节点
|
|
|
useEffect(() => {
|
|
|
const handleToggleNodeVisibility = (event: CustomEvent) => {
|
|
|
const { appId, isVisible } = event.detail;
|
|
|
|
|
|
if (isVisible) {
|
|
|
// 显示节点 - 从隐藏节点集合中移除
|
|
|
setHiddenNodes(prev => {
|
|
|
const newSet = new Set(prev);
|
|
|
newSet.delete(appId);
|
|
|
return newSet;
|
|
|
});
|
|
|
}
|
|
|
else {
|
|
|
// 隐藏节点 - 添加到隐藏节点集合
|
|
|
setHiddenNodes(prev => new Set(prev).add(appId));
|
|
|
}
|
|
|
};
|
|
|
|
|
|
document.addEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener);
|
|
|
|
|
|
return () => {
|
|
|
document.removeEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener);
|
|
|
};
|
|
|
}, []);
|
|
|
|
|
|
// 监听键盘事件实现快捷键
|
|
|
useEffect(() => {
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
|
// Ctrl+Z 撤销
|
|
|
if (e.ctrlKey && e.key === 'z' && !e.shiftKey && canUndo) {
|
|
|
e.preventDefault();
|
|
|
undo();
|
|
|
}
|
|
|
// Ctrl+Shift+Z 重做
|
|
|
if (e.ctrlKey && e.shiftKey && e.key === 'Z' && canRedo) {
|
|
|
e.preventDefault();
|
|
|
redo();
|
|
|
}
|
|
|
// Ctrl+Y 重做
|
|
|
if (e.ctrlKey && e.key === 'y' && canRedo) {
|
|
|
e.preventDefault();
|
|
|
redo();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
|
return () => {
|
|
|
document.removeEventListener('keydown', handleKeyDown);
|
|
|
};
|
|
|
}, [undo, redo, canUndo, canRedo]);
|
|
|
|
|
|
// 监听节点和边的变化以拍摄快照
|
|
|
useEffect(() => {
|
|
|
// 获取 HistoryProvider 中的 takeSnapshot 方法
|
|
|
const event = new CustomEvent('takeSnapshot', {
|
|
|
detail: { nodes: [...nodes], edges: [...edges] }
|
|
|
});
|
|
|
document.dispatchEvent(event);
|
|
|
}, [nodes, edges]);
|
|
|
|
|
|
return (
|
|
|
<div ref={reactFlowWrapper} style={{ width: '100%', height: '100%', position: 'relative' }}
|
|
|
onContextMenu={(e) => e.preventDefault()}
|
|
|
// 添加点击事件处理器，用于关闭添加节点菜单
|
|
|
onClick={() => {
|
|
|
if (edgeForNodeAdd || positionForNodeAdd) {
|
|
|
setEdgeForNodeAdd(null);
|
|
|
setPositionForNodeAdd(null);
|
|
|
}
|
|
|
}}>
|
|
|
<ReactFlow
|
|
|
id={reactFlowId}
|
|
|
nodes={nodes.map(node => {
|
|
|
// 检查节点是否应该被隐藏
|
|
|
const isHidden = hiddenNodes.has(node.id);
|
|
|
// 应用透明度样式
|
|
|
const style = isHidden ? { opacity: 0.3 } : {};
|
|
|
|
|
|
return {
|
|
|
...node,
|
|
|
draggable: !currentAppIsRunning,
|
|
|
style: {
|
|
|
...node.style,
|
|
|
...style
|
|
|
}
|
|
|
};
|
|
|
})}
|
|
|
edges={edges.map(edge => {
|
|
|
// 检查边连接的节点是否被隐藏
|
|
|
const isSourceHidden = hiddenNodes.has(edge.source);
|
|
|
const isTargetHidden = hiddenNodes.has(edge.target);
|
|
|
// 如果源节点或目标节点被隐藏，则边也应用透明度
|
|
|
const style = (isSourceHidden || isTargetHidden) ? { opacity: 0.3 } : {};
|
|
|
|
|
|
// 更新边的数据，确保选择框也应用透明度
|
|
|
return {
|
|
|
...edge,
|
|
|
style: {
|
|
|
...edge.style,
|
|
|
...style
|
|
|
},
|
|
|
data: {
|
|
|
...edge.data,
|
|
|
...(isSourceHidden || isTargetHidden ? { hidden: true, opacity: 0.3 } : { opacity: 1 })
|
|
|
}
|
|
|
};
|
|
|
})}
|
|
|
nodeTypes={nodeTypes}
|
|
|
edgeTypes={edgeTypes}
|
|
|
snapToGrid={true}
|
|
|
snapGrid={[2, 2]}
|
|
|
nodesConnectable={!currentAppIsRunning} // 运行时禁用节点连接
|
|
|
nodesDraggable={!currentAppIsRunning} // 运行时禁用节点拖拽
|
|
|
elementsSelectable={!currentAppIsRunning} // 运行时禁用元素选择
|
|
|
connectOnClick={!currentAppIsRunning} // 运行时禁用点击连接
|
|
|
disableKeyboardA11y={currentAppIsRunning} // 运行时禁用键盘交互
|
|
|
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) {
|
|
|
console.warn('开始和结束节点不允许删除');
|
|
|
return false; // 阻止删除操作
|
|
|
}
|
|
|
|
|
|
// 检查是否有循环节点（这里只是检查，实际删除逻辑在onNodesDelete中处理）
|
|
|
const loopNodes = nodes.filter(node =>
|
|
|
node.data?.type === 'LOOP_START' || node.data?.type === 'LOOP_END'
|
|
|
);
|
|
|
|
|
|
// 允许删除操作继续进行
|
|
|
return !currentAppIsRunning; // 在运行时禁止删除任何元素
|
|
|
}}
|
|
|
onNodesDelete={(deleted) => {
|
|
|
// 在应用编排模式下（useDefault为false）不允许删除节点
|
|
|
if (!useDefault) {
|
|
|
console.warn('在应用编排模式下不允许删除节点');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 如果在运行时，禁止删除
|
|
|
if (currentAppIsRunning) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 检查是否有循环节点
|
|
|
const loopNodes = deleted.filter(node =>
|
|
|
node.data?.type === 'LOOP_START' || node.data?.type === 'LOOP_END'
|
|
|
);
|
|
|
|
|
|
if (loopNodes.length > 0) {
|
|
|
// 处理循环节点删除
|
|
|
let nodesToRemove = [...deleted];
|
|
|
|
|
|
// 为每个循环节点找到其配对节点
|
|
|
loopNodes.forEach(loopNode => {
|
|
|
const component = loopNode.data?.component as { customDef?: string } | undefined;
|
|
|
|
|
|
if (loopNode.data?.type === 'LOOP_START' && component?.customDef) {
|
|
|
try {
|
|
|
const customDef = JSON.parse(component.customDef);
|
|
|
const relatedNodeId = customDef.loopEndNodeId;
|
|
|
// 添加关联的结束节点到删除列表
|
|
|
const relatedNode = nodes.find(n => n.id === relatedNodeId);
|
|
|
if (relatedNode) {
|
|
|
nodesToRemove.push(relatedNode);
|
|
|
}
|
|
|
} catch (e) {
|
|
|
console.error('解析循环开始节点数据失败:', e);
|
|
|
}
|
|
|
}
|
|
|
else if (loopNode.data?.type === 'LOOP_END' && component?.customDef) {
|
|
|
try {
|
|
|
const customDef = JSON.parse(component.customDef);
|
|
|
const relatedNodeId = customDef.loopStartNodeId;
|
|
|
// 添加关联的开始节点到删除列表
|
|
|
const relatedNode = nodes.find(n => n.id === relatedNodeId);
|
|
|
if (relatedNode) {
|
|
|
nodesToRemove.push(relatedNode);
|
|
|
}
|
|
|
} catch (e) {
|
|
|
console.error('解析循环结束节点数据失败:', e);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 去重
|
|
|
nodesToRemove = nodesToRemove.filter((node, index, self) =>
|
|
|
index === self.findIndex(n => n.id === node.id)
|
|
|
);
|
|
|
|
|
|
// 删除所有相关节点和边
|
|
|
setNodes((nds) => nds.filter((n) => !nodesToRemove.find((d) => d.id === n.id)));
|
|
|
|
|
|
// 删除与这些节点相关的所有边
|
|
|
const nodeIdsToRemove = nodesToRemove.map(node => node.id);
|
|
|
setEdges((eds) => eds.filter((e) =>
|
|
|
!nodeIdsToRemove.includes(e.source) && !nodeIdsToRemove.includes(e.target)
|
|
|
));
|
|
|
}
|
|
|
else {
|
|
|
// 普通节点删除
|
|
|
setNodes((nds) => nds.filter((n) => !deleted.find((d) => d.id === n.id)));
|
|
|
}
|
|
|
|
|
|
setIsEditModalOpen(false);
|
|
|
}}
|
|
|
onNodesChange={!currentAppIsRunning ? onNodesChange : undefined} // 运行时禁用节点变更
|
|
|
onEdgesChange={!currentAppIsRunning ? onEdgesChange : undefined} // 运行时禁用边变更
|
|
|
onConnect={!currentAppIsRunning ? onConnect : undefined} // 运行时禁用连接
|
|
|
onReconnect={!currentAppIsRunning ? onReconnect : undefined} // 运行时禁用重新连接
|
|
|
onDragOver={!currentAppIsRunning ? onDragOver : undefined} // 运行时禁用拖拽
|
|
|
onDrop={!currentAppIsRunning ? onDrop : undefined} // 运行时禁用放置
|
|
|
onNodeDrag={!currentAppIsRunning ? onNodeDrag : undefined} // 运行时禁用节点拖拽
|
|
|
connectionLineType={ConnectionLineType.SmoothStep}
|
|
|
connectionLineComponent={CustomConnectionLine}
|
|
|
onNodeDragStop={!currentAppIsRunning ? onNodeDragStop : undefined} // 运行时禁用节点拖拽停止
|
|
|
onNodeContextMenu={(!currentAppIsRunning && useDefault) ? onNodeContextMenu : undefined} // 运行时或应用编排模式下禁用节点上下文菜单
|
|
|
onNodeDoubleClick={!currentAppIsRunning ? onNodeDoubleClick : undefined} // 运行时禁用节点双击
|
|
|
onEdgeContextMenu={(!currentAppIsRunning && useDefault) ? onEdgeContextMenu : undefined} // 运行时或应用编排模式下禁用边上下文菜单
|
|
|
onPaneClick={!currentAppIsRunning ? onPaneClick : undefined} // 运行时禁用面板点击
|
|
|
onPaneContextMenu={(!currentAppIsRunning && useDefault) ? onPaneContextMenu : undefined} // 运行时或应用编排模式下禁用面板上下文菜单
|
|
|
onEdgeMouseEnter={(_event, edge) => {
|
|
|
setEdges((eds) => eds.map(e => {
|
|
|
if (e.id === edge.id) {
|
|
|
return { ...e, data: { ...e.data, hovered: true } };
|
|
|
}
|
|
|
return e;
|
|
|
}));
|
|
|
}}
|
|
|
onEdgeMouseLeave={(_event, edge) => {
|
|
|
setEdges((eds) => eds.map(e => {
|
|
|
if (e.id === edge.id) {
|
|
|
return { ...e, data: { ...e.data, hovered: false } };
|
|
|
}
|
|
|
return e;
|
|
|
}));
|
|
|
}}
|
|
|
fitView
|
|
|
selectionOnDrag={!currentAppIsRunning} // 运行时禁用拖拽选择
|
|
|
selectionMode={!currentAppIsRunning ? SelectionMode.Partial : undefined} // 运行时禁用选择模式
|
|
|
>
|
|
|
<Background />
|
|
|
<Panel position="top-left">
|
|
|
<ActionBar
|
|
|
useDefault={useDefault}
|
|
|
onSave={saveFlowDataToServer}
|
|
|
onUndo={undo}
|
|
|
onRedo={redo}
|
|
|
canUndo={canUndo}
|
|
|
canRedo={canRedo}
|
|
|
onRun={handleRun}
|
|
|
isRunning={currentAppIsRunning}
|
|
|
></ActionBar>
|
|
|
</Panel>
|
|
|
<AlignmentGuides />
|
|
|
</ReactFlow>
|
|
|
|
|
|
{/*节点右键上下文 - 仅在默认模式且非运行时显示*/}
|
|
|
{!currentAppIsRunning && useDefault && menu && menu.type === 'node' && (
|
|
|
<div
|
|
|
style={{
|
|
|
position: 'absolute',
|
|
|
top: menu.top,
|
|
|
left: menu.left,
|
|
|
zIndex: 1000
|
|
|
}}
|
|
|
>
|
|
|
<NodeContextMenu
|
|
|
node={nodes.find(n => n.id === menu.id)!}
|
|
|
onDelete={deleteNode}
|
|
|
onEdit={editNode}
|
|
|
onCopy={copyNode}
|
|
|
onCloseMenu={setMenu}
|
|
|
onCloseOpenModal={setIsEditModalOpen}
|
|
|
/>
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
{/*边右键上下文 - 在非运行时显示，应用编排模式下也允许*/}
|
|
|
{!currentAppIsRunning && menu && menu.type === 'edge' && (
|
|
|
<div
|
|
|
style={{
|
|
|
position: 'absolute',
|
|
|
top: menu.top,
|
|
|
left: menu.left,
|
|
|
zIndex: 1000
|
|
|
}}
|
|
|
>
|
|
|
<EdgeContextMenu
|
|
|
edge={edges.find(e => e.id === menu.id)!}
|
|
|
onDelete={deleteEdge}
|
|
|
onEdit={editEdge}
|
|
|
onAddNode={(edge) => {
|
|
|
setEdgeForNodeAdd(edge);
|
|
|
setIsEditModalOpen(false);
|
|
|
setMenu(null); // 关闭上下文菜单
|
|
|
}}
|
|
|
/>
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
{/*画布右键上下文 - 仅在默认模式且非运行时显示*/}
|
|
|
{!currentAppIsRunning && useDefault && menu && menu.type === 'pane' && (
|
|
|
<div
|
|
|
style={{
|
|
|
position: 'absolute',
|
|
|
top: menu.top,
|
|
|
left: menu.left,
|
|
|
zIndex: 1000
|
|
|
}}
|
|
|
>
|
|
|
<PaneContextMenu
|
|
|
position={menu.position!}
|
|
|
onAddNode={(nodeType: string, position: { x: number, y: number }, node: any) => {
|
|
|
addNodeOnPane(nodeType, position, node);
|
|
|
setIsEditModalOpen(false);
|
|
|
setMenu(null); // 关闭上下文菜单
|
|
|
}}
|
|
|
/>
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
{/*节点点击/节点编辑上下文*/}
|
|
|
<NodeEditModal
|
|
|
popupContainer={reactFlowWrapper}
|
|
|
node={editingNode}
|
|
|
isOpen={isEditModalOpen && !currentAppIsRunning}
|
|
|
isDelete={isDelete}
|
|
|
onSave={saveNodeEdit}
|
|
|
onClose={closeEditModal}
|
|
|
/>
|
|
|
|
|
|
{/*统一的添加节点菜单 - 仅在默认模式且非运行时显示*/}
|
|
|
{!currentAppIsRunning && useDefault && (edgeForNodeAdd || positionForNodeAdd) && (
|
|
|
<div
|
|
|
style={{
|
|
|
position: 'absolute',
|
|
|
top: edgeForNodeAdd ? (edgeForNodeAdd.data?.y as number || 0) : (positionForNodeAdd?.y || 0),
|
|
|
left: edgeForNodeAdd ? ((edgeForNodeAdd.data?.x as number || 0) + 20) : (positionForNodeAdd?.x || 0),
|
|
|
zIndex: 1000,
|
|
|
transform: 'none'
|
|
|
}}
|
|
|
// 点击事件冒泡到父级处理，这里阻止默认行为
|
|
|
onClick={(e) => e.stopPropagation()}
|
|
|
>
|
|
|
<AddNodeMenu
|
|
|
onAddNode={(nodeType, node) => {
|
|
|
handleAddNode(nodeType, node);
|
|
|
// 关闭菜单
|
|
|
setEdgeForNodeAdd(null);
|
|
|
setPositionForNodeAdd(null);
|
|
|
}}
|
|
|
position={positionForNodeAdd || undefined}
|
|
|
edgeId={edgeForNodeAdd?.id}
|
|
|
/>
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default FlowEditorMain; |