diff --git a/src/views/simulation/creation/components/flow.ts b/src/views/simulation/creation/components/flow.ts index 1afe390..f938a88 100644 --- a/src/views/simulation/creation/components/flow.ts +++ b/src/views/simulation/creation/components/flow.ts @@ -1,11 +1,21 @@ import { FLOW_NODE_TYPE_ENUM } from '@/utils/enum/flow'; import { ElMessage } from 'element-plus'; +import { useNodeAttribute } from './nodeEvents'; /** * 校验流程合理性 * @param cells */ export const getRelationNodeAndVerifyFlowFun = (cells:any, templateName:string, uuid:string) => { + const { drawerVisible } = useNodeAttribute(); + // 关闭配置弹窗 + drawerVisible.value = false; + // 清空选中工具效果 + for (let index = 0; index < cells.length; index++) { + if (cells[index].shape === 'custom-app-vue-node') { + cells[index].removeTools(); + } + } console.log('cells', cells); const nodeArr = []; const edgeArr = []; diff --git a/src/views/simulation/creation/components/initGraph.ts b/src/views/simulation/creation/components/initGraph.ts index 8d39168..662ea83 100644 --- a/src/views/simulation/creation/components/initGraph.ts +++ b/src/views/simulation/creation/components/initGraph.ts @@ -1,4 +1,4 @@ -import { Graph, Shape } from '@antv/x6'; +import { Edge, Graph, Shape } from '@antv/x6'; import { Selection } from '@antv/x6-plugin-selection'; import { Snapline } from '@antv/x6-plugin-snapline'; import { Keyboard } from '@antv/x6-plugin-keyboard'; @@ -10,6 +10,17 @@ import { initNodeEvents } from './nodeEvents'; export const FLOW_CREATE_ID = 'flow-create-content'; +Graph.registerEdge( + 'agent-edge', + { + inherit: 'edge', + attrs: { + line: { stroke: '#A2B1C3', strokeWidth: 2, targetMarker: 'block' }, + }, + }, + true +); + export const initGraph = async () => { const graph = new Graph({ panning: { @@ -33,35 +44,13 @@ export const initGraph = async () => { connecting: { connector: { name: 'smooth' }, connectionPoint: 'anchor', - router: 'normal', - // connector: { - // name: 'curveConnector', - // }, - anchor: 'center', - // connectionPoint: 'boundary', allowBlank: false, + snap: { radius: 20 }, + allowEdge: false, allowLoop: false, - snap: { - radius: 20, - }, - - createEdge() { - return new Shape.Edge({ - tools: [ - ], - attrs: { - line: { - stroke: '#A2B1C3', - strokeWidth: 2, - targetMarker: { - name: 'block', - width: 12, - height: 8, - }, - }, - }, - zIndex: 0, - }); + highlight: true, + createEdge(): Edge { + return graph.createEdge({ shape: 'agent-edge' }); }, validateConnection({ targetMagnet }) { return !!targetMagnet; diff --git a/src/views/simulation/creation/components/nodeEvents.ts b/src/views/simulation/creation/components/nodeEvents.ts index 09f320e..dd021f3 100644 --- a/src/views/simulation/creation/components/nodeEvents.ts +++ b/src/views/simulation/creation/components/nodeEvents.ts @@ -56,6 +56,8 @@ export const initNodeEvents = (graph: any) => { // } // console.log('nodeAttribute', nodeAttribute); } + + // graph.cleanSelection(); node.addTools({ name: 'boundary', args: { @@ -79,6 +81,7 @@ export const useNodeEvents = () => { zoomInFun, zoomOutFun, yAlign, + xAlign, }; }; @@ -95,9 +98,30 @@ const zoomOutFun = (graph: any) => { graph.zoom(0.2); }; +const xAlign = (graph: any) => { + const nodes = graph.getSelectedCells(); + let x = 0; + for (let index = 0; index < nodes.length; index++) { + if (x === 0 || x > nodes[index].position().x) { + x = nodes[index].position().x; + } + } + for (let index = 0; index < nodes.length; index++) { + nodes[index].position(x, nodes[index].position().y); + } +}; + const yAlign = (graph: any) => { const nodes = graph.getSelectedCells(); - + let y = 0; + for (let index = 0; index < nodes.length; index++) { + if (y === 0 || y > nodes[index].position().y) { + y = nodes[index].position().y; + } + } + for (let index = 0; index < nodes.length; index++) { + nodes[index].position(nodes[index].position().x, y); + } }; const drawerVisible = ref(false); diff --git a/src/views/simulation/creation/components/registerNode.ts b/src/views/simulation/creation/components/registerNode.ts index f0e6968..5776460 100644 --- a/src/views/simulation/creation/components/registerNode.ts +++ b/src/views/simulation/creation/components/registerNode.ts @@ -11,7 +11,7 @@ export const registerCustomNode = () => { position: 'top', attrs: { circle: { - r: 3, + r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, @@ -26,7 +26,7 @@ export const registerCustomNode = () => { position: 'right', attrs: { circle: { - r: 3, + r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, @@ -41,7 +41,7 @@ export const registerCustomNode = () => { position: 'bottom', attrs: { circle: { - r: 3, + r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, @@ -56,7 +56,7 @@ export const registerCustomNode = () => { position: 'left', attrs: { circle: { - r: 3, + r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, diff --git a/src/views/simulation/creation/index.vue b/src/views/simulation/creation/index.vue index b690f25..758035c 100644 --- a/src/views/simulation/creation/index.vue +++ b/src/views/simulation/creation/index.vue @@ -26,8 +26,8 @@ - - + +
保存草稿 @@ -94,7 +94,7 @@ const currentVersion = ref(); const flowVersionOptions = ref([]); const { drawerVisible, nodeAttribute } = useNodeAttribute(); -const { undoFun, zoomInFun, zoomOutFun, yAlign } = useNodeEvents(); +const { undoFun, zoomInFun, zoomOutFun, xAlign, yAlign } = useNodeEvents(); // 注册连线 // registerCustomConnector();