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) => {
console.log('formatFooter', data);
switch (data.type) {
case 'WAIT':
const { duration } = data.customDef;

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

@ -16,6 +16,7 @@ interface NodeEditModalProps {
popupContainer: any;
node: Node<NodeData>;
isOpen: boolean;
isDelete: boolean;
onSave: (data: any) => void;
onClose: () => void;
}
@ -24,6 +25,7 @@ const NodeEditModal: React.FC<NodeEditModalProps> = ({
popupContainer,
node,
isOpen,
isDelete,
onSave,
onClose
}) => {
@ -82,9 +84,11 @@ const NodeEditModal: React.FC<NodeEditModalProps> = ({
return (
<Drawer
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 || '未知类型'}`}
visible={visible}
placement="left"
@ -93,7 +97,7 @@ const NodeEditModal: React.FC<NodeEditModalProps> = ({
footer={null}
getPopupContainer={() => popupContainer?.current || document.body}
onOk={handleSave}
onCancel={handleSave}
onCancel={isDelete ? handleClose : handleSave}
>
{getNodeEditor()}
</Drawer>

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

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

Loading…
Cancel
Save