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 @@
-
-
+
+