feat: 流程图创建开始节点

src/views/process/constants/data.ts

@@ -2,36 +2,27 @@
  * @Author: zhangshigui
  * @Date: 2024-09-04 00:55:48
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-04 00:56:04
- * @Description: 假数据
+ * @LastEditTime: 2024-09-06 16:49:46
+ * @Description: 节点数据
  *
  */
+export interface NodeRes {
+ id: string; // 节点id
+ nodeName: string; // 节点名字
+ nodeType: number; // 节点类型
+ skipNodeId: string; // 跳转的节点id
+ position: { x: number; y: number }; // 节点位置信息
+}
 
-export const data = {
- // 节点
- nodes: [
- {
- id: 'node1',
- x: 40,
- y: 40,
- width: 80,
- height: 40,
- label: 'hello'
- },
- {
- id: 'node2',
- x: 160,
- y: 180,
- width: 80,
- height: 40,
- label: 'world'
+export const data = [
+ {
+ id: '1',
+ nodeName: '基本信息',
+ nodeType: 0,
+ skipNodeId: '2',
+ position: {
+ x: 50,
+ y: 50
  }
- ],
- // 边
- edges: [
- {
- source: 'node1',
- target: 'node2'
- }
- ]
-};
+ }
+];

src/views/process/constants/index.ts

@@ -2,7 +2,56 @@
  * @Author: zhangshigui
  * @Date: 2024-08-30 17:30:13
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-04 16:28:28
+ * @LastEditTime: 2024-09-06 16:20:25
  * @Description: 基础配置信息
  *
  */
+
+// 节点类型
+export const NODE_TYPE = {
+ // 开始节点
+ START_NODE: 0,
+ // 中间节点
+ MIDDLE_NODE: 1,
+ // 结束节点
+ END_NODE: 2
+};
+
+// 节点尺寸
+export const NODE_SIZE = {
+ // 开始节点宽高
+ startNodeWidth: 128,
+ startNodeHeight: 64
+};
+
+// 节点Icon图片配置
+export const NODE_ICON = {
+ // 开始节点图标
+ startNodeIcon:
+ 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png'
+};
+
+// 滤镜 https://x6.antv.antgroup.com/api/registry/filter#highlight
+export const FILTER = {
+ // 💭 阴影滤镜 —— 默认显示
+ dropShadow: {
+ name: 'dropShadow',
+ args: {
+ color: '#000',
+ dx: 0, // 阴影在 X 轴的偏移量
+ dy: 2, // 阴影在 Y 轴的偏移量
+ blur: 3, // 阴影的模糊半径
+ opacity: 0.12 // 阴影的透明度
+ }
+ },
+ // ✨ 高亮滤镜 —— 节点高亮
+ highlight: {
+ name: 'highlight',
+ args: {
+ color: '#000',
+ width: 4,
+ blur: 1,
+ opacity: 0.08
+ }
+ }
+};

src/views/process/index.tsx

@@ -2,6 +2,7 @@ import { useRef } from 'react';
 import { useEffect } from 'react';
 import GraphMain from './shapes/index';
 import './index.less';
+import { data } from './constants/data';
 
 const Process = () => {
  const map = useRef(null);
@@ -13,7 +14,8 @@ const Process = () => {
 
  graphMain = new GraphMain();
  if (map.current && minMap.current) {
- graphMain.createGraph(map.current, minMap.current);
+ // 初始化
+ graphMain.createGraph(map.current, minMap.current, data);
  }
  });
  return (

src/views/process/shapes/index.ts

@@ -2,7 +2,7 @@
  * @Author: zhangshigui
  * @Date: 2024-08-30 17:32:33
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-04 17:15:28
+ * @LastEditTime: 2024-09-06 11:13:30
  * @Description: 入口文件
  *
  */
@@ -11,6 +11,9 @@ import { Graph } from '@antv/x6';
 import { Scroller } from '@antv/x6-plugin-scroller';
 import { MiniMap } from '@antv/x6-plugin-minimap';
 import { SimpleNodeView } from './simple-view';
+import { type NodeRes } from '../constants/data';
+import { NODE_TYPE } from '../constants/index';
+import Node from './node';
 
 export default class GraphMain {
  graph: Graph | null; // 画布实例
@@ -22,10 +25,11 @@ export default class GraphMain {
  /**
  * 创建画布
  */
- createGraph(map: HTMLDivElement, minMap: HTMLDivElement) {
- // 画布初始化
+ createGraph(map: HTMLDivElement, minMap: HTMLDivElement, data) {
+ // 初始化画布
  this.graph = new Graph({
  container: map,
+ autoResize: true,
  background: {
  color: '#fff' // 设置画布背景颜色
  }
@@ -58,12 +62,33 @@ export default class GraphMain {
  }
  })
  );
+
+ // 初始化节点
+ this.initGraphNode(data);
  }
 
  /**
  * 初始化节点
  */
- initGraphNode() {}
+ initGraphNode(list: NodeRes[]) {
+ const node = new Node(this);
+ list.forEach(item => {
+ switch (item.nodeType) {
+ // 开始节点
+ case NODE_TYPE.START_NODE:
+ node.createStartNode(item);
+ break;
+ // 中间节点
+ case NODE_TYPE.MIDDLE_NODE:
+ node.createMiddleNode(item);
+ break;
+ // 结束节点
+ case NODE_TYPE.END_NODE:
+ node.createEndNode(item);
+ break;
+ }
+ });
+ }
 
  /**
  * 初始化边

src/views/process/shapes/node.ts

@@ -2,8 +2,92 @@
  * @Author: zhangshigui
  * @Date: 2024-09-04 00:30:45
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-04 00:30:53
+ * @LastEditTime: 2024-09-06 16:50:08
  * @Description: 节点操作
  *
  */
-export default class Node {}
+
+import { NODE_SIZE, NODE_ICON, FILTER } from '../constants';
+export default class Node {
+ // 画布实例this
+ graphInstance;
+
+ constructor(graph) {
+ this.graphInstance = graph;
+ }
+ /**
+ * 创建开始节点
+ */
+ createStartNode(data) {
+ const { startNodeWidth, startNodeHeight } = NODE_SIZE;
+ const { id, position, nodeType } = data;
+ // 生成画布节点信息
+ const nodeInfo = {
+ id,
+ nodeType,
+ width: startNodeWidth,
+ height: startNodeHeight,
+ x: position.x ?? 0,
+ y: position.y ?? 0,
+ // 我们可以通过 markup 和 attrs 来定制节点的形状和样式，markup 可以类比 HTML，attrs 类比 CSS
+ markup: [
+ {
+ tagName: 'rect',
+ selector: 'body'
+ },
+ {
+ tagName: 'image',
+ selector: 'img'
+ },
+ {
+ tagName: 'text',
+ selector: 'label'
+ }
+ ],
+ attrs: {
+ body: {
+ stroke: '#8f8f8f',
+ strokeWidth: 1,
+ rx: startNodeHeight / 2,
+ ry: startNodeHeight / 2,
+ fill: '#f6f8fa',
+ filter: FILTER.dropShadow
+ },
+ img: {
+ 'xlink:href': NODE_ICON.startNodeIcon,
+ width: 24,
+ height: 24,
+ // 此处坐标是基于当前节点的
+ x: 15,
+ y: (startNodeHeight - 24) / 2
+ },
+ label: {
+ fontSize: 16,
+ fill: '#444',
+ // 设置元素 x 坐标，目标 x 坐标相对于 ref 指代的元素的左上角 x 坐标
+ refX: 45,
+ refY: 0.5,
+ // 水平
+ textAnchor: 'start',
+ // 垂直
+ textVerticalAnchor: 'middle',
+ text: data.nodeName,
+ fontWeight: 600
+ }
+ }
+ };
+
+ // 将节点添加到画布上
+ this.graphInstance.graph.addNode(nodeInfo);
+ }
+
+ /**
+ * 创建中间节点
+ */
+ createMiddleNode(data) {}
+
+ /**
+ * 创建结束节点
+ */
+ createEndNode(data) {}
+}