pref(flowEditor): 调整节点编辑弹窗的样式,增加节点删除的回调

master
钟良源 5 months ago
parent c340a9f240
commit 00e562e1a8

@ -179,7 +179,6 @@ const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[]
}; };
const formatFooter = (data: any) => { const formatFooter = (data: any) => {
console.log('formatFooter', data);
switch (data.type) { switch (data.type) {
case 'WAIT': case 'WAIT':
const { duration } = data.customDef; const { duration } = data.customDef;

@ -179,7 +179,6 @@ const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[]
}; };
const formatFooter = (data: any) => { const formatFooter = (data: any) => {
console.log('formatFooter', data);
switch (data.type) { switch (data.type) {
case 'WAIT': case 'WAIT':
const { duration } = data.customDef; const { duration } = data.customDef;

@ -16,6 +16,7 @@ interface NodeEditModalProps {
popupContainer: any; popupContainer: any;
node: Node<NodeData>; node: Node<NodeData>;
isOpen: boolean; isOpen: boolean;
isDelete: boolean;
onSave: (data: any) => void; onSave: (data: any) => void;
onClose: () => void; onClose: () => void;
} }
@ -24,6 +25,7 @@ const NodeEditModal: React.FC<NodeEditModalProps> = ({
popupContainer, popupContainer,
node, node,
isOpen, isOpen,
isDelete,
onSave, onSave,
onClose onClose
}) => { }) => {
@ -82,9 +84,11 @@ const NodeEditModal: React.FC<NodeEditModalProps> = ({
return ( return (
<Drawer <Drawer
style={{ style={{
boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)' boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
minWidth: 300,
width: 'max-content',
maxWidth: '80vw'
}} }}
width={500}
title={`编辑节点: ${nodeData.title || node?.type || '未知类型'}`} title={`编辑节点: ${nodeData.title || node?.type || '未知类型'}`}
visible={visible} visible={visible}
placement="left" placement="left"
@ -93,7 +97,7 @@ const NodeEditModal: React.FC<NodeEditModalProps> = ({
footer={null} footer={null}
getPopupContainer={() => popupContainer?.current || document.body} getPopupContainer={() => popupContainer?.current || document.body}
onOk={handleSave} onOk={handleSave}
onCancel={handleSave} onCancel={isDelete ? handleClose : handleSave}
> >
{getNodeEditor()} {getNodeEditor()}
</Drawer> </Drawer>

@ -67,6 +67,7 @@ const FlowEditor: React.FC = () => {
// 添加编辑弹窗相关状态 // 添加编辑弹窗相关状态
const [editingNode, setEditingNode] = useState<Node | null>(null); const [editingNode, setEditingNode] = useState<Node | null>(null);
const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [isDelete, setIsDelete] = useState(false);
// 添加节点选择弹窗状态 // 添加节点选择弹窗状态
const [edgeForNodeAdd, setEdgeForNodeAdd] = useState<Edge | null>(null); const [edgeForNodeAdd, setEdgeForNodeAdd] = useState<Edge | null>(null);
@ -164,6 +165,11 @@ const FlowEditor: React.FC = () => {
[edges] [edges]
); );
const onNodesDelete = useCallback((deletedNodes) => {
setIsDelete(true);
closeEditModal();
}, []);
const onConnect = useCallback( const onConnect = useCallback(
(params: any) => { (params: any) => {
// 获取源节点和目标节点 // 获取源节点和目标节点
@ -631,6 +637,7 @@ const FlowEditor: React.FC = () => {
edgeTypes={edgeTypes} edgeTypes={edgeTypes}
snapToGrid={true} snapToGrid={true}
snapGrid={[2, 2]} snapGrid={[2, 2]}
onNodesDelete={onNodesDelete}
onNodesChange={onNodesChange} onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange} onEdgesChange={onEdgesChange}
onConnect={onConnect} onConnect={onConnect}
@ -739,11 +746,12 @@ const FlowEditor: React.FC = () => {
</div> </div>
)} )}
{/*节点击/节点编辑上下文*/} {/*节点击/节点编辑上下文*/}
<NodeEditModal <NodeEditModal
popupContainer={reactFlowWrapper} popupContainer={reactFlowWrapper}
node={editingNode} node={editingNode}
isOpen={isEditModalOpen} isOpen={isEditModalOpen}
isDelete={isDelete}
onSave={saveNodeEdit} onSave={saveNodeEdit}
onClose={closeEditModal} onClose={closeEditModal}
/> />

@ -86,7 +86,8 @@
background-color: #ffffff; background-color: #ffffff;
color: #000000; color: #000000;
padding: 5px 20px; padding: 5px 20px;
border-top: 1px solid rgba(204, 204, 204, 0.18); border: 1px solid #cccccc;
border-top: none;
min-height: 20px; min-height: 20px;
text-align: center; text-align: center;
} }

Loading…
Cancel
Save