fix(flowEditor): 关闭节点编辑模态框逻辑优化

- 在节点删除、复制、编辑操作后关闭编辑模态框
- 在添加节点操作后关闭编辑模态框
- 更新节点上下文菜单组件属性定义
-优化上下文菜单操作后的模态框关闭逻辑
master
钟良源 4 months ago
parent efb1983ed1
commit eced9e27b4

@ -184,6 +184,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
snapGrid={[2, 2]} snapGrid={[2, 2]}
onNodesDelete={(deleted) => { onNodesDelete={(deleted) => {
setNodes((nds) => nds.filter((n) => !deleted.find((d) => d.id === n.id))); setNodes((nds) => nds.filter((n) => !deleted.find((d) => d.id === n.id)));
setIsEditModalOpen(false);
}} }}
onNodesChange={onNodesChange} onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange} onEdgesChange={onEdgesChange}
@ -255,6 +256,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
onEdit={editNode} onEdit={editNode}
onCopy={copyNode} onCopy={copyNode}
onCloseMenu={setMenu} onCloseMenu={setMenu}
onCloseOpenModal={setIsEditModalOpen}
/> />
</div> </div>
)} )}
@ -275,6 +277,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
onEdit={editEdge} onEdit={editEdge}
onAddNode={(edge) => { onAddNode={(edge) => {
setEdgeForNodeAdd(edge); setEdgeForNodeAdd(edge);
setIsEditModalOpen(false);
setMenu(null); // 关闭上下文菜单 setMenu(null); // 关闭上下文菜单
}} }}
/> />
@ -295,6 +298,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
position={menu.position!} position={menu.position!}
onAddNode={(nodeType: string, position: { x: number, y: number }, node: any) => { onAddNode={(nodeType: string, position: { x: number, y: number }, node: any) => {
addNodeOnPane(nodeType, position, node); addNodeOnPane(nodeType, position, node);
setIsEditModalOpen(false);
setMenu(null); // 关闭上下文菜单 setMenu(null); // 关闭上下文菜单
}} }}
/> />

@ -9,6 +9,7 @@ interface NodeContextMenuProps {
onCopy?: (node: Node) => void; onCopy?: (node: Node) => void;
onEdit?: (node: Node) => void; onEdit?: (node: Node) => void;
onCloseMenu?: (data: React.Dispatch<React.SetStateAction<any>>) => void; onCloseMenu?: (data: React.Dispatch<React.SetStateAction<any>>) => void;
onCloseOpenModal?: (boolean: boolean) => void;
} }
const NodeContextMenu: React.FC<NodeContextMenuProps> = ({ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
@ -16,20 +17,24 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
onDelete, onDelete,
onCopy, onCopy,
onEdit, onEdit,
onCloseMenu onCloseMenu,
onCloseOpenModal
}) => { }) => {
const handleDelete = () => { const handleDelete = () => {
onDelete && onDelete(node); onDelete && onDelete(node);
onCloseOpenModal(false);
onCloseMenu(null); onCloseMenu(null);
}; };
const handleCopy = () => { const handleCopy = () => {
onCopy && onCopy(node); onCopy && onCopy(node);
onCloseOpenModal(false);
onCloseMenu(null); onCloseMenu(null);
}; };
const handleEdit = () => { const handleEdit = () => {
onEdit && onEdit(node); onEdit && onEdit(node);
onCloseOpenModal(false);
onCloseMenu(null); onCloseMenu(null);
}; };

Loading…
Cancel
Save