diff --git a/src/views/process/constants/data.ts b/src/views/process/constants/data.ts index 3d72a9e..4ff68aa 100644 --- a/src/views/process/constants/data.ts +++ b/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' - } - ] -}; + } +]; diff --git a/src/views/process/constants/index.ts b/src/views/process/constants/index.ts index b932967..803b3d0 100644 --- a/src/views/process/constants/index.ts +++ b/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 + } + } +}; diff --git a/src/views/process/index.tsx b/src/views/process/index.tsx index c9a53b8..15605be 100644 --- a/src/views/process/index.tsx +++ b/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 ( diff --git a/src/views/process/shapes/index.ts b/src/views/process/shapes/index.ts index 1eae704..c073fe3 100644 --- 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-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; + } + }); + } /** * 初始化边 diff --git a/src/views/process/shapes/node.ts b/src/views/process/shapes/node.ts index 458899f..fb48921 100644 --- a/src/views/process/shapes/node.ts +++ b/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) {} +}