fix: 流程图，边连接到桩

shi-gui · Sep 14, 2024 · 0ad2980 · 0ad2980
1 parent 6f0d8e8
commit 0ad2980
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 33 deletions.
diff --git a/src/views/process/constants/index.ts b/src/views/process/constants/index.ts
@@ -2,7 +2,7 @@
  * @Author: zhangshigui
  * @Date: 2024-08-30 17:30:13
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-14 17:12:22
+ * @LastEditTime: 2024-09-14 17:56:42
  * @Description: 基础配置信息
  *
  */
@@ -72,8 +72,49 @@ export const NODE_FILTER = {
 export const NODE_PORT = {
  // 链接桩组定义，可以定义多个
  groups: {
- // 分组1，分组名group1
- group1: {
+ // 进桩分组，分组名inPort
+ inPort: {
+ position: {
+ name: 'absolute',
+ args: { x: 0, y: 0 }
+ },
+ markup: [
+ {
+ tagName: 'rect',
+ selector: 'rect'
+ },
+ {
+ tagName: 'rect',
+ selector: 'dot'
+ }
+ ],
+ attrs: {
+ rect: {
+ magnet: true,
+ stroke: '#D2CBC7',
+ fill: '#fff',
+ strokeWidth: 1,
+ width: 12,
+ height: 12,
+ ry: 12,
+ rx: 12,
+ x: -6,
+ y: -6
+ },
+ dot: {
+ magnet: true,
+ fill: '#D2CBC7',
+ width: 8,
+ height: 8,
+ ry: 8,
+ rx: 8,
+ x: -4,
+ y: -4
+ }
+ }
+ },
+ // 出桩分组，分组名outPort
+ outPort: {
  position: {
  name: 'absolute',
  args: { x: 0, y: 0 }
@@ -118,14 +159,14 @@ export const NODE_PORT = {
  // 节点左边的桩
  left: {
  // groups 中的分组名
- group: 'group1',
+ group: 'inPort',
  // 链接桩的 DOM 层级，值越大层级越高
  zIndex: 3,
  args: { x: 0, y: '50%' }
  },
  // 节点右边的桩
  right: {
- group: 'group1',
+ group: 'outPort',
  // 链接桩的 DOM 层级，值越大层级越高
  zIndex: 3,
  args: { x: '100%', y: '50%' }

diff --git a/src/views/process/shapes/edge.ts b/src/views/process/shapes/edge.ts
@@ -2,7 +2,7 @@
  * @Author: zhangshigui
  * @Date: 2024-09-04 00:29:39
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-14 17:05:30
+ * @LastEditTime: 2024-09-14 18:00:26
  * @Description: 边操作
  *
  */
@@ -17,17 +17,20 @@ export default class Edge {
 
  // 创建边（连线）
  createEdge(source, target) {
- // console.log(source, 'xxxxx');
- // const sourcePorts = source.port.ports.find(port => port.group === 'group1');
- // const targetPorts = target.port.ports.find(port => port.group === 'group1');
+ const sourcePorts = source.port.ports.find(port => port.group === 'outPort');
+ const targetPorts = target.port.ports.find(port => port.group === 'inPort');
+
  this.graphInstance.graph.addEdge({
  source: {
- cell: source
+ cell: source,
+ port: sourcePorts?.id
  },
  target: {
- cell: target
+ cell: target,
+ port: targetPorts?.id
  },
  attrs: {
+ id: `${source.id} ${target.id}`,
  // 修改线条颜色
  line: {
  stroke: '#d9d9d9'

diff --git a/src/views/process/shapes/index.ts b/src/views/process/shapes/index.ts
@@ -2,7 +2,7 @@
  * @Author: zhangshigui
  * @Date: 2024-08-30 17:32:33
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-14 16:56:12
+ * @LastEditTime: 2024-09-14 17:58:10
  * @Description: 入口文件
  *
  */
@@ -17,8 +17,10 @@ import Node from './node';
 import Edge from './edge';
 
 export default class GraphMain {
- graph: Graph | null; // 画布实例
- node; // class Node 实例
+ // 画布实例
+ graph: Graph | null;
+ // class Node 实例
+ node;
 
  constructor() {
  this.graph = null;
@@ -119,9 +121,12 @@ export default class GraphMain {
  data.forEach(item => {
  if (item.children?.length) {
  // 群组节点
- item.children.forEach(it => {
- const sourceNode = nodes?.find(node => node.id === item.id);
- const targetNode = nodes?.find(node => node.id === it.skipNodeId);
+ const parentNode = nodes?.find(node => node.id === item.id);
+ // 获取当前节点下的所有子节点
+ const childNodes = parentNode?.getChildren() || [];
+ item.children.forEach((child, index) => {
+ const targetNode = nodes?.find(node => node.id === child.skipNodeId);
+ const sourceNode = childNodes[index];
 
  targetNode && edge.createEdge(sourceNode, targetNode);
  });

diff --git a/src/views/process/shapes/node.ts b/src/views/process/shapes/node.ts
@@ -2,7 +2,7 @@
  * @Author: zhangshigui
  * @Date: 2024-09-04 00:30:45
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-11 16:27:03
+ * @LastEditTime: 2024-09-14 17:19:40
  * @Description: 节点操作
  *
  */
@@ -77,9 +77,7 @@ export default class Node {
  },
  // 连接桩
  ports: {
- groups: {
- group1: NODE_PORT.groups.group1
- },
+ groups: NODE_PORT.groups,
  items: [NODE_PORT.items.right]
  }
  };
@@ -123,9 +121,7 @@ export default class Node {
  }
  },
  ports: {
- groups: {
- group1: NODE_PORT.groups.group1
- },
+ groups: NODE_PORT.groups,
  items: [NODE_PORT.items.left, NODE_PORT.items.right]
  }
  };
@@ -171,9 +167,7 @@ export default class Node {
  }
  },
  ports: {
- groups: {
- group1: NODE_PORT.groups.group1
- },
+ groups: NODE_PORT.groups,
  items: [NODE_PORT.items.left]
  }
  };
@@ -216,9 +210,7 @@ export default class Node {
  }
  },
  ports: {
- groups: {
- group1: NODE_PORT.groups.group1
- },
+ groups: NODE_PORT.groups,
  items: [NODE_PORT.items.right]
  }
  };
@@ -262,9 +254,7 @@ export default class Node {
  }
  },
  ports: {
- groups: {
- group1: NODE_PORT.groups.group1
- },
+ groups: NODE_PORT.groups,
  items: [NODE_PORT.items.left]
  }
  };