feat: 创建中间节点—普通节点

shi-gui · Sep 9, 2024 · 20950da · 20950da
1 parent 8c2a7bf
commit 20950da
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 14 deletions.
diff --git a/src/views/process/constants/data.ts b/src/views/process/constants/data.ts
@@ -2,7 +2,7 @@
  * @Author: zhangshigui
  * @Date: 2024-09-04 00:55:48
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-06 16:49:46
+ * @LastEditTime: 2024-09-09 11:21:12
  * @Description: 节点数据
  *
  */
@@ -17,12 +17,22 @@ export interface NodeRes {
 export const data = [
  {
  id: '1',
- nodeName: '基本信息',
+ nodeName: '基本流程',
  nodeType: 0,
  skipNodeId: '2',
  position: {
  x: 50,
- y: 50
+ y: 300
+ }
+ },
+ {
+ id: '2',
+ nodeName: '确认用户信息',
+ nodeType: 1,
+ skipNodeId: '3',
+ position: {
+ x: 300,
+ y: 300
  }
  }
 ];
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-06 16:20:25
+ * @LastEditTime: 2024-09-06 18:32:26
  * @Description: 基础配置信息
  *
  */
@@ -21,7 +21,14 @@ export const NODE_TYPE = {
 export const NODE_SIZE = {
  // 开始节点宽高
  startNodeWidth: 128,
- startNodeHeight: 64
+ startNodeHeight: 64,
+
+ // 中间节点宽高
+ middleNodeWidth: 214,
+ middleNodeHeight: 64,
+ // 中间节点中子节点宽高
+ middleChildNodeWidth: 180,
+ middleChildNodeHeight: 32
 };
 
 // 节点Icon图片配置

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-06 11:13:30
+ * @LastEditTime: 2024-09-09 10:57:01
  * @Description: 入口文件
  *
  */
@@ -17,9 +17,11 @@ import Node from './node';
 
 export default class GraphMain {
  graph: Graph | null; // 画布实例
+ node; // class Node 实例
 
  constructor() {
  this.graph = null;
+ this.node = null;
  }
 
  /**
@@ -71,25 +73,40 @@ export default class GraphMain {
  * 初始化节点
  */
  initGraphNode(list: NodeRes[]) {
- const node = new Node(this);
+ this.node = new Node(this);
  list.forEach(item => {
  switch (item.nodeType) {
  // 开始节点
  case NODE_TYPE.START_NODE:
- node.createStartNode(item);
+ this.node.createStartNode(item);
  break;
  // 中间节点
  case NODE_TYPE.MIDDLE_NODE:
- node.createMiddleNode(item);
+ this.middleNodeType(item);
  break;
  // 结束节点
  case NODE_TYPE.END_NODE:
- node.createEndNode(item);
+ this.node.createEndNode(item);
  break;
  }
  });
  }
 
+ /**
+ * 中间节点类型判断
+ * 1、普通节点
+ * 2、群组节点
+ */
+ middleNodeType(data) {
+ if (data.children?.length) {
+ // 群组节点
+ this.node.createMiddleGroupNode(data);
+ } else {
+ // 普通节点
+ this.node.createMiddleNormalNode(data);
+ }
+ }
+
  /**
  * 初始化边
  */

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-06 16:54:45
+ * @LastEditTime: 2024-09-09 11:28:44
  * @Description: 节点操作
  *
  */
@@ -82,11 +82,48 @@ export default class Node {
  }
 
  /**
- * 创建中间节点
+ * 创建中间节点👉普通节点
  */
- createMiddleNode(data) {
- console.log(data, 'xxxxxxxxxx');
+ createMiddleNormalNode(data) {
+ const { middleNodeWidth, middleNodeHeight } = NODE_SIZE;
+ const { id, position, nodeType } = data;
+ // 生成画布节点信息
+ const nodeInfo = {
+ id,
+ nodeType,
+ width: middleNodeWidth,
+ height: middleNodeHeight,
+ x: position.x ?? 0,
+ y: position.y ?? 0,
+ attrs: {
+ body: {
+ stroke: '#8f8f8f',
+ strokeWidth: 1,
+ fill: '#f6f8fa',
+ rx: 4,
+ ry: 4,
+ filter: FILTER.dropShadow
+ },
+ label: {
+ fontSize: 16,
+ fill: '#444',
+ // 水平
+ textAnchor: 'middle',
+ // 垂直
+ textVerticalAnchor: 'middle',
+ text: data.nodeName,
+ fontWeight: 600
+ }
+ }
+ };
+
+ // 将节点添加到画布上
+ this.graphInstance.graph.addNode(nodeInfo);
  }
+ /**
+ * 创建中间节点👉群组节点
+ */
+ createMiddleGroupNode() {}
 
  /**
  * 创建结束节点