修复箭头选中问题

src/views/simulation/creation/components/nodeEvents.ts

@@ -14,16 +14,12 @@ let selectNode: any = null;
 export const initNodeEvents = (graph: any) => {
   graph.on('node:mouseenter', () => {
     const container = document.getElementById(FLOW_CREATE_ID)!;
-    const ports = container.querySelectorAll(
-      '.x6-port-body'
-    ) as NodeListOf<SVGElement>;
+    const ports = container.querySelectorAll('.x6-port-body') as NodeListOf<SVGElement>;
     showPorts(ports, true);
   });
   graph.on('node:mouseleave', () => {
     const container = document.getElementById(FLOW_CREATE_ID)!;
-    const ports = container.querySelectorAll(
-      '.x6-port-body'
-    ) as NodeListOf<SVGElement>;
+    const ports = container.querySelectorAll('.x6-port-body') as NodeListOf<SVGElement>;
     showPorts(ports, false);
   });
   graph.on('node:selected', () => {
@@ -31,21 +27,18 @@ export const initNodeEvents = (graph: any) => {
     // const flowElement = document.getElementById('flow-create-content') as HTMLElement;
     // flowElement.tabIndex = -1;
     // flowElement.focus();
-
   });
-  graph.on('node:unselected', ({ node }:any) => {
+  graph.on('node:unselected', ({ node }: any) => {
     console.log('unselected node', node);
     node.removeTools();
     const container = document.getElementById(FLOW_CREATE_ID)!;
-    const ports = container.querySelectorAll(
-      '.x6-port-body'
-    ) as NodeListOf<SVGElement>;
+    const ports = container.querySelectorAll('.x6-port-body') as NodeListOf<SVGElement>;
     showPorts(ports, false);
     drawerVisible.value = false;
     selectNode = null;
   });
 
-  graph.on('node:click', ({ node }:any) => {
+  graph.on('node:click', ({ node }: any) => {
     console.log('click node', node, node.data);
     if (node.data.isApp) {
       drawerVisible.value = true;
@@ -73,6 +66,24 @@ export const initNodeEvents = (graph: any) => {
       },
     });
   });
+  graph.on('edge:click', ({ edge }: any) => {
+    // graph.cleanSelection();
+    edge.addTools({
+      name: 'boundary',
+      args: {
+        padding: 5,
+        attrs: {
+          // fill: '#7c68fc',
+          stroke: '#333',
+          'stroke-width': 0.5,
+          'fill-opacity': 0.2,
+        },
+      },
+    });
+  });
+  graph.on('edge:unselected', ({ edge }: any) => {
+    edge.removeTools();
+  });
 };
 
 export const useNodeEvents = () => {
@@ -128,12 +139,15 @@ const zoomOutFun = (graph: any) => {
 const xAlign = (graph: any) => {
   const nodes = graph.getSelectedCells();
   if (nodes.length > 2) {
-    nodes.sort((a:any, b:any) => {
+    nodes.sort((a: any, b: any) => {
       return a.position().x - b.position().x;
     });
     const xLength = nodes[1].position().x - nodes[0].position().x - nodes[0].size().width;
     for (let index = 2; index < nodes.length; index++) {
-      nodes[index].position(nodes[index - 1].position().x + nodes[index - 1].size().width + xLength, nodes[index].position().y);
+      nodes[index].position(
+        nodes[index - 1].position().x + nodes[index - 1].size().width + xLength,
+        nodes[index].position().y
+      );
     }
   } else {
     ElMessage.warning('请框选超过 2 个节点！');
@@ -185,7 +199,7 @@ export const nodeAttribute = reactive<any>({
   pageConfigList: [],
 });
 
-export const updateNodeAttribute = (val:any) => {
+export const updateNodeAttribute = (val: any) => {
   for (const key in val) {
     nodeAttribute[key] = val[key];
   }
@@ -193,4 +207,3 @@ export const updateNodeAttribute = (val:any) => {
     selectNode.setData(nodeAttribute);
   }
 };
-