{
const [paramsDrawerOpen, openParamsDrawer, closeParamsDrawer] = useVisible(false);
const [globalParam, setGlobalParam, globalParamRef] = useStateRef([]);
const { message } = App.useApp();
- let sourceAnchorIdx, targetAnchorIdx;
+ let sourceAnchorIdx, targetAnchorIdx, dropAnchorIdx;
+ let sourceNode;
useEffect(() => {
initMenu();
@@ -35,9 +36,8 @@ const EditPipeline = () => {
}, []);
const onDragEnd = (val) => {
- const _x = val.x;
- const _y = val.y;
- const point = graph.getPointByClient(_x, _y);
+ const { x, y } = val;
+ const point = graph.getPointByClient(x, y);
// 元模型
const model = {
...val,
@@ -46,8 +46,8 @@ const EditPipeline = () => {
id: val.component_name + '-' + s8(),
isCluster: false,
};
- console.log('model', model);
- graph.addItem('node', model, true);
+ // console.log('model', model);
+ graph.addItem('node', model, false);
};
const formChange = (val) => {
if (graph) {
@@ -110,6 +110,10 @@ const EditPipeline = () => {
};
const getGraphData = (data) => {
if (graph) {
+ // 修改历史数据有蓝色边框的问题
+ data.nodes.forEach((item) => {
+ item.style.stroke = '#fff';
+ });
graph.data(data);
graph.render();
} else {
@@ -118,7 +122,6 @@ const EditPipeline = () => {
}, 500);
}
};
-
const processParallelEdgesOnAnchorPoint = (
edges,
offsetDiff = 15,
@@ -230,6 +233,15 @@ const EditPipeline = () => {
}
return edges;
};
+ // 判断两个节点之间是否有边
+ const hasEdge = (source, target) => {
+ const neighbors = source.getNeighbors();
+ for (const node of neighbors) {
+ // 新建边的时候，获取的 neighbors 的数据有问题，不全是 INode 类型，可能没有 getID 方法
+ if (node.getID?.() === target.getID?.()) return true;
+ }
+ return false;
+ };
const cloneElement = (item) => {
console.log(item);
let data = graph.save();
@@ -263,6 +275,8 @@ const EditPipeline = () => {
// const selectedNodes = this.selectedNodes;
contextMenu = new G6.Menu({
getContent(evt) {
+ const type = evt.item.getType();
+ const cloneDisplay = type === 'node' ? 'block' : 'none';
return `
`;
},
@@ -314,11 +327,11 @@ const EditPipeline = () => {
getAnchorPoints(cfg) {
return (
cfg.anchorPoints || [
- // 四个
+ // 四个，上下左右
[0.5, 0],
[0.5, 1],
- // [0, 0.5],
- // [1, 0.5],
+ [0, 0.5],
+ [1, 0.5],
]
);
},
@@ -344,6 +357,7 @@ const EditPipeline = () => {
textAlign: 'left',
textBaseline: 'middle',
fill: '#000',
+ cursor: 'pointer',
},
name: 'text-shape',
draggable: true,
@@ -380,10 +394,9 @@ const EditPipeline = () => {
// if (value || point.get('links') > 0) point.show();
// else point.hide();
// });
-
const group = item.getContainer();
const shape = group.get('children')[0];
- const anchorPoints = group.findAll((ele) => ele.get('name') === 'anchor-point');
+ const anchorPoints = group.findAll((item) => item.get('name') === 'anchor-point');
if (name === 'hover') {
if (value) {
shape.attr('stroke', themes['primaryColor']);
@@ -396,6 +409,24 @@ const EditPipeline = () => {
point.hide();
});
}
+ } else if (name === 'drag') {
+ if (sourceAnchorIdx === null || sourceAnchorIdx === undefined) {
+ return;
+ }
+ const anchorPoint = anchorPoints[sourceAnchorIdx];
+ anchorPoint.attr('stroke', value ? themes['primaryColor'] : '#a4a4a5');
+ } else if (name === 'drop') {
+ if (dropAnchorIdx === null || dropAnchorIdx === undefined) {
+ return;
+ }
+ const anchorPoint = anchorPoints[dropAnchorIdx];
+ if (value) {
+ anchorPoint.attr('stroke', themes['primaryColor']);
+ } else {
+ anchorPoints.forEach((point) => {
+ anchorPoint.attr('stroke', '#a4a4a5');
+ });
+ }
}
},
},
@@ -407,10 +438,14 @@ const EditPipeline = () => {
width: graphRef.current.clientWidth || 500,
height: graphRef.current.clientHeight || '100%',
animate: false,
- groupByTypes: false,
+ groupByTypes: true,
fitView: true,
plugins: [contextMenu],
- enabledStack: true,
+ enabledStack: false,
+ fitView: true,
+ minZoom: 0.5,
+ maxZoom: 5,
+ fitViewPadding: 300,
modes: {
default: [
// config the shouldBegin for drag-node to avoid node moving while dragging on the anchor-point circles
@@ -420,10 +455,6 @@ const EditPipeline = () => {
if (e.target.get('name') === 'anchor-point') return false;
return true;
},
- // shouldEnd: e => {
- // console.log(e);
- // return false;
- // },
},
// config the shouldBegin and shouldEnd to make sure the create-edge is began and ended at anchor-point circles
{
@@ -434,11 +465,17 @@ const EditPipeline = () => {
if (e.target && e.target.get('name') !== 'anchor-point') return false;
sourceAnchorIdx = e.target.get('anchorPointIdx');
e.target.set('links', e.target.get('links') + 1); // cache the number of edge connected to this anchor-point circle
+ sourceNode = e.item;
return true;
},
shouldEnd: (e) => {
// avoid ending at other shapes on the node
if (e.target && e.target.get('name') !== 'anchor-point') return false;
+ if (!sourceNode || !e.item) return false;
+ // 不允许连接自己
+ if (sourceNode.getID() === e.item.getID()) return false;
+ // 两个节点不允许多条边
+ if (hasEdge(sourceNode, e.item)) return false;
if (e.target) {
targetAnchorIdx = e.target.get('anchorPointIdx');
e.target.set('links', e.target.get('links') + 1); // cache the number of edge connected to this anchor-point circle
@@ -450,22 +487,11 @@ const EditPipeline = () => {
},
'drag-canvas',
'zoom-canvas',
- // 'brush-select',
- 'drag-combo',
- ],
- altSelect: [
- {
- type: 'brush-select',
- trigger: 'drag',
- },
- 'drag-node',
],
},
-
defaultNode: {
type: 'rect-node',
size: [110, 36],
-
labelCfg: {
style: {
fill: 'transparent',
@@ -488,8 +514,7 @@ const EditPipeline = () => {
},
},
defaultEdge: {
- //type: 'cubic-vertical',
-
+ // type: 'cubic-vertical',
style: {
endArrow: {
// 设置终点箭头
@@ -503,15 +528,8 @@ const EditPipeline = () => {
stroke: '#CDD0DC',
radius: 1,
},
- nodeStateStyle: {
- hover: {
- opacity: 1,
- stroke: '#8fe8ff',
- },
- },
labelCfg: {
autoRotate: true,
- // refY: 10,
style: {
fontSize: 10,
fill: '#FFF',
@@ -528,40 +546,40 @@ const EditPipeline = () => {
cursor: 'pointer',
},
},
- // linkCenter: true,
- fitView: true,
- minZoom: 0.5,
- maxZoom: 5,
- fitViewPadding: 300,
});
graph.on('node:click', (e) => {
e.stopPropagation();
if (e.target.get('name') !== 'anchor-point' && e.item) {
- // graph.setItemState(e.item, 'nodeClicked', true);
+ // 获取所有的上游节点
const parentNodes = findAllParentNodes(graph, e.item);
// 如果没有打开过全局参数抽屉，获取不到全局参数
const globalParams =
paramsDrawerRef.current.getFieldsValue().global_param || globalParamRef.current;
+ // 打开节点编辑抽屉
propsRef.current.showDrawer(e, globalParams, parentNodes);
}
});
graph.on('aftercreateedge', (e) => {
+ console.log('aftercreateedge', e);
+
// update the sourceAnchor and targetAnchor for the newly added edge
graph.updateItem(e.edge, {
sourceAnchor: sourceAnchorIdx,
targetAnchor: targetAnchorIdx,
+ type:
+ targetAnchorIdx === 0 || targetAnchorIdx === 1 ? 'cubic-vertical' : 'cubic-horizontal',
});
-
// update the curveOffset for parallel edges
- const edges = graph.save().edges;
- processParallelEdgesOnAnchorPoint(edges);
- graph.getEdges().forEach((edge, i) => {
- graph.updateItem(edge, {
- curveOffset: edges[i].curveOffset,
- curvePosition: edges[i].curvePosition,
- });
- });
+ // const edges = graph.save().edges;
+ // processParallelEdgesOnAnchorPoint(edges);
+ // graph.getEdges().forEach((edge, i) => {
+ // graph.updateItem(edge, {
+ // curveOffset: edges[i].curveOffset,
+ // curvePosition: edges[i].curvePosition,
+ // });
+ // });
});
+ // 删除边时，修改 anchor-point 的 links 值
graph.on('afterremoveitem', (e) => {
if (e.item && e.item.source && e.item.target) {
const sourceNode = graph.findById(e.item.source);
@@ -587,7 +605,7 @@ const EditPipeline = () => {
}
}
});
- // after clicking on the first node, the edge is created, update the sourceAnchor
+ // after drag on the first node, the edge is created, update the sourceAnchor
graph.on('afteradditem', (e) => {
if (e.item && e.item.getType() === 'edge') {
graph.updateItem(e.item, {
@@ -601,17 +619,36 @@ const EditPipeline = () => {
graph.on('node:mouseleave', (e) => {
graph.setItemState(e.item, 'hover', false);
});
- graph.on('node:dragenter', (e) => {
+
+ graph.on('node:dragstart', (e) => {
graph.setItemState(e.item, 'hover', true);
+ graph.setItemState(e.item, 'drag', true);
});
- graph.on('node:dragleave', (e) => {
+ graph.on('node:drag', (e) => {
+ graph.setItemState(e.item, 'hover', true);
+ });
+ graph.on('node:dragend', (e) => {
graph.setItemState(e.item, 'hover', false);
+ graph.setItemState(e.item, 'drag', false);
});
- graph.on('node:dragstart', (e) => {
+ graph.on('node:dragenter', (e) => {
graph.setItemState(e.item, 'hover', true);
+ if (e.target.get('name') === 'anchor-point') {
+ dropAnchorIdx = e.target.get('anchorPointIdx');
+ graph.setItemState(e.item, 'drop', true);
+ } else {
+ graph.setItemState(e.item, 'drop', false);
+ }
});
- graph.on('node:drag', (e) => {
- graph.setItemState(e.item, 'hover', true);
+ graph.on('node:dragleave', (e) => {
+ graph.setItemState(e.item, 'hover', false);
+ graph.setItemState(e.item, 'drop', false);
+ dropAnchorIdx = undefined;
+ });
+ graph.on('node:drop', (e) => {
+ graph.setItemState(e.item, 'hover', false);
+ graph.setItemState(e.item, 'drop', false);
+ dropAnchorIdx = undefined;
});
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
diff --git a/react-ui/src/pages/Pipeline/index.jsx b/react-ui/src/pages/Pipeline/index.jsx
index cf5fb571..12dbaae8 100644
--- a/react-ui/src/pages/Pipeline/index.jsx
+++ b/react-ui/src/pages/Pipeline/index.jsx
@@ -43,32 +43,30 @@ const Pipeline = () => {
};
const routeToEdit = (e, record) => {
e.stopPropagation();
- navgite({ pathname: `/pipeline/template/${record.id}/${record.name}` });
+ navgite({ pathname: `/pipeline/template/${record.id}` });
};
const showModal = () => {
form.resetFields();
+ setFormId(null);
setDialogTitle('新建流水线');
setIsModalOpen(true);
};
- const handleOk = () => {
- console.log(1111);
- setIsModalOpen(false);
- };
const handleCancel = () => {
setIsModalOpen(false);
};
const onFinish = (values) => {
if (formId) {
editWorkflow({ ...values, id: formId }).then((ret) => {
+ setIsModalOpen(false);
message.success('编辑成功');
getList();
- setIsModalOpen(false);
});
} else {
addWorkflow(values).then((ret) => {
- console.log(ret);
+ setIsModalOpen(false);
+ message.success('新建成功');
if (ret.code === 200) {
- navgite({ pathname: `/pipeline/template/${ret.data.id}/${ret.data.name}` });
+ navgite({ pathname: `/pipeline/template/${ret.data.id}` });
}
});
}
diff --git a/react-ui/src/requestConfig.ts b/react-ui/src/requestConfig.ts
index 8a976abc..93a30443 100644
--- a/react-ui/src/requestConfig.ts
+++ b/react-ui/src/requestConfig.ts
@@ -9,12 +9,16 @@ import { clearSessionToken, getAccessToken } from './access';
import { setRemoteMenu } from './services/session';
import { gotoLoginPage } from './utils/ui';
+// [antd: Notification] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.
+const popupError = (error: string) => {
+ message.error(error);
+};
+
/**
* Umi Max 网络请求配置
* @doc https://umijs.org/docs/max/request#配置
*/
export const requestConfig: RequestConfig = {
- errorConfig: {},
requestInterceptors: [
(url: string, options: AxiosRequestConfig) => {
const headers = options.headers ?? {};
@@ -30,26 +34,32 @@ export const requestConfig: RequestConfig = {
},
],
responseInterceptors: [
- (response: AxiosResponse) => {
- const { status, data } = response || {};
- if (status >= 200 && status < 300) {
- if (data && (data instanceof Blob || data.code === 200)) {
- return response;
- } else if (data && data.code === 401) {
- clearSessionToken();
- setRemoteMenu(null);
- gotoLoginPage(false);
- message.error('请重新登录');
- return Promise.reject(response);
+ [
+ (response: AxiosResponse) => {
+ const { status, data } = response || {};
+ console.log(message, data);
+ if (status >= 200 && status < 300) {
+ if (data && (data instanceof Blob || data.code === 200)) {
+ return response;
+ } else if (data && data.code === 401) {
+ clearSessionToken();
+ setRemoteMenu(null);
+ gotoLoginPage(false);
+ popupError('请重新登录');
+ return Promise.reject(response);
+ } else {
+ popupError(data?.msg ?? '请求失败');
+ return Promise.reject(response);
+ }
} else {
- console.log(message, data);
- message.error(data?.msg ?? '请求失败');
+ popupError('请求失败');
return Promise.reject(response);
}
- } else {
- message.error('请求失败');
- return Promise.reject(response);
- }
- },
+ },
+ (error: Error) => {
+ popupError(error.message ?? '请求失败');
+ return Promise.reject(error);
+ },
+ ],
],
};