修复bug 111、114

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 = [];

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;

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);

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,

src/views/simulation/creation/index.vue

@@ -26,8 +26,8 @@
         <img @click="undoFun(graph)" src="@/assets/imgs/dragFlow/undo.svg" alt="">
         <img @click="zoomOutFun(graph)" src="@/assets/imgs/dragFlow/magnify.svg" alt="">
         <img @click="zoomInFun(graph)" src="@/assets/imgs/dragFlow/lessen.svg" alt="">
-        <img @click="yAlign" src="@/assets/imgs/dragFlow/vertical-center.svg" alt="">
-        <img src="@/assets/imgs/dragFlow/lateral-distribution.svg" alt="">
+        <img title="纵向对齐" @click="yAlign(graph)" src="@/assets/imgs/dragFlow/vertical-center.svg" alt="">
+        <img title="横向对齐" @click="xAlign(graph)" src="@/assets/imgs/dragFlow/lateral-distribution.svg" alt="">
       </div>
       <div class="right-box">
         <el-button v-if="operationType !== FLOW_OPERATION_TYPE.UPGRADE" @click="saveDraftFun()">保存草稿</el-button>
@@ -94,7 +94,7 @@ const currentVersion = ref<any>();
 const flowVersionOptions = ref<any[]>([]);
 
 const { drawerVisible, nodeAttribute } = useNodeAttribute();
-const { undoFun, zoomInFun, zoomOutFun, yAlign } = useNodeEvents();
+const { undoFun, zoomInFun, zoomOutFun, xAlign, yAlign } = useNodeEvents();
 
 // 注册连线
 // registerCustomConnector();