This commit is contained in:
liu2592603532 2024-04-26 14:48:08 +08:00
commit a53e34fdf1
2 changed files with 13 additions and 57 deletions

View File

@ -68,19 +68,9 @@ function ExperimentText() {
}; };
const formChange = (val) => {}; const formChange = (val) => {};
const handlerClick = (e) => { const handlerClick = (e) => {
console.log(propsRef, graph, messageRef.current); if (e.target.get('name') !== 'anchor-point' && e.item) {
// let cache = []; propsRef.current.showDrawer(e, locationParams.id, messageRef.current);
// let json_str = JSON.stringify(graph, function(key, value) { }
// if (typeof value === 'object' && value !== null) {
// if (cache.indexOf(value) !== -1) {
// return;
// }
// cache.push(value);
// }
// return value;
// });
// console.log(json_str);
propsRef.current.showDrawer(e, locationParams.id, messageRef.current);
}; };
const getGraphData = (data) => { const getGraphData = (data) => {
if (graph) { if (graph) {
@ -387,8 +377,7 @@ function ExperimentText() {
fitView: true, fitView: true,
fitViewPadding: [320, 320, 220, 320], fitViewPadding: [320, 320, 220, 320],
}); });
graph.on('node:click', handlerClick);
graph.on('dblclick', handlerClick);
window.onresize = () => { window.onresize = () => {
if (!graph || graph.get('destroyed')) return; if (!graph || graph.get('destroyed')) return;
if (!graphRef.current || !graphRef.current.scrollWidth || !graphRef.current.scrollHeight) if (!graphRef.current || !graphRef.current.scrollWidth || !graphRef.current.scrollHeight)

View File

@ -128,18 +128,7 @@ const EditPipeline = () => {
}; };
const handlerClick = (e) => { const handlerClick = (e) => {
e.stopPropagation(); e.stopPropagation();
console.log(propsRef, graph); // console.log(propsRef, graph);
// let cache = [];
// let json_str = JSON.stringify(graph, function(key, value) {
// if (typeof value === 'object' && value !== null) {
// if (cache.indexOf(value) !== -1) {
// return;
// }
// cache.push(value);
// }
// return value;
// });
// console.log(json_str);
propsRef.current.showDrawer(e); propsRef.current.showDrawer(e);
}; };
const getGraphData = (data) => { const getGraphData = (data) => {
@ -353,7 +342,7 @@ const EditPipeline = () => {
// this.graph.setItemState(e.item, 'showAnchors', false); // this.graph.setItemState(e.item, 'showAnchors', false);
graph.setItemState(e.item, 'nodeSelected', false); graph.setItemState(e.item, 'nodeSelected', false);
}); });
graph.off('dblclick', handlerClick); // graph.off('dblclick', handlerClick);
}; };
}, []); }, []);
const initGraph = () => { const initGraph = () => {
@ -390,32 +379,15 @@ const EditPipeline = () => {
getAnchorPoints(cfg) { getAnchorPoints(cfg) {
return ( return (
cfg.anchorPoints || [ cfg.anchorPoints || [
// 31 //
[0.5, 0], // [0.5, 0],
[0.5, 1], // [0.5, 1],
[0, 0.5], [0, 0.5],
[1, 0.5], [1, 0.5],
] ]
); );
}, },
// draw(cfg, group) {
// let rect=group.addShape('text', {
// attrs: {
// text: fittingString(cfg.label, 110, 15),
// x: 90 - getTextSize(cfg.label, 110, 15),
// y: 0,
// fontSize: 10,
// textAlign: 'center',
// textBaseline: 'middle',
// fill:'#000'
// },
// name: 'text-shape',
// });
// return rect;
// },
afterDraw(cfg, group) { afterDraw(cfg, group) {
// console.log(group, cfg, 12312);
const image = group.addShape('image', { const image = group.addShape('image', {
attrs: { attrs: {
x: -45, x: -45,
@ -444,7 +416,6 @@ const EditPipeline = () => {
} }
const bbox = group.getBBox(); const bbox = group.getBBox();
const anchorPoints = this.getAnchorPoints(cfg); const anchorPoints = this.getAnchorPoints(cfg);
// console.log(anchorPoints);
anchorPoints.forEach((anchorPos, i) => { anchorPoints.forEach((anchorPos, i) => {
group.addShape('circle', { group.addShape('circle', {
attrs: { attrs: {
@ -578,7 +549,7 @@ const EditPipeline = () => {
}, },
defaultEdge: { defaultEdge: {
// type: 'quadratic', // type: 'quadratic',
type: 'cubic-vertical', // type: 'cubic-vertical',
style: { style: {
endArrow: { endArrow: {
@ -631,13 +602,9 @@ const EditPipeline = () => {
// }); // });
graph.on('node:click', (e) => { graph.on('node:click', (e) => {
console.log(e.target.get('name')); console.log(e.target.get('name'));
if (e.target.get('name') === 'anchor-point') { if (e.target.get('name') !== 'anchor-point' && e.item) {
// create edge graph.setItemState(e.item, 'nodeClicked', true);
} else { handlerClick(e);
if (e.item) {
graph.setItemState(e.item, 'nodeClicked', true);
handlerClick(e);
}
} }
}); });
graph.on('aftercreateedge', (e) => { graph.on('aftercreateedge', (e) => {