ProjectStorm React Diagrams 库使用指南：从零开始构建流程图

ProjectStorm React Diagrams 库使用指南：从零开始构建流程图

react-diagrams a super simple, no-nonsense diagramming library written in react that just works 项目地址: https://gitcode.com/gh_mirrors/re/react-diagrams

前言

在现代前端开发中，可视化图表的需求日益增多。ProjectStorm React Diagrams 是一个功能强大的流程图和节点连接图库，专为 React 应用设计。本文将详细介绍如何使用这个库来创建交互式的流程图应用。

环境准备

TypeScript 支持

该库原生支持 TypeScript，提供了完善的类型定义，这意味着开发者可以获得更好的代码提示和类型检查。如果你是 TypeScript 用户，可以直接获得这些优势。

基础使用

1. 引入必要模块

首先需要导入库的核心组件：

import createEngine, { 
    DefaultLinkModel, 
    DefaultNodeModel,
    DiagramModel 
} from '@projectstorm/react-diagrams';

import {
    CanvasWidget
} from '@projectstorm/react-canvas-core';

这些模块分别负责：

• createEngine: 创建图表引擎
• DefaultNodeModel: 默认节点模型
• DefaultLinkModel: 默认连接线模型
• DiagramModel: 图表数据模型
• CanvasWidget: 渲染画布的React组件

2. 初始化图表引擎

const engine = createEngine();

这行代码创建了一个配置了所有默认设置的图表引擎实例，它是整个图表系统的核心。

创建节点和连接

3. 创建节点

// 第一个节点
const node1 = new DefaultNodeModel({
    name: '节点1',
    color: 'rgb(0,192,255)',
});
node1.setPosition(100, 100);  // 设置节点位置
let port1 = node1.addOutPort('输出端口');  // 添加输出端口

// 第二个节点
const node2 = new DefaultNodeModel({
    name: '节点2',
    color: 'rgb(0,192,255)',
});
node2.setPosition(300, 100);  // 设置不同位置
let port2 = node2.addInPort('输入端口');  // 添加输入端口

关键点说明：

• setPosition(x, y) 方法设置节点在画布上的坐标
• addOutPort() 添加输出端口，addInPort() 添加输入端口
• 端口名称会显示在节点上

4. 连接节点

const link = port1.link<DefaultLinkModel>(port2);
link.addLabel('连接标签');

这里我们：

1. 将第一个节点的输出端口连接到第二个节点的输入端口
2. 为连接线添加了一个可显示的标签

组装图表

5. 创建并配置图表模型

const model = new DiagramModel();
model.addAll(node1, node2, link);
engine.setModel(model);

DiagramModel 是整个图表的数据容器，我们:

1. 创建模型实例
2. 将所有元素添加到模型中
3. 将模型设置到引擎

渲染图表

6. 使用React组件渲染

<CanvasWidget engine={engine} />

CanvasWidget 是负责实际渲染的React组件，只需要将初始化好的引擎传递给它即可。

进阶提示

1. 自定义样式：可以通过修改节点的color属性或扩展DefaultNodeModel来实现自定义样式
2. 交互功能：库内置支持节点拖拽、连接线拖拽等交互
3. 事件处理：可以监听节点点击、连接创建等各种事件
4. 序列化：DiagramModel支持序列化和反序列化，便于保存和恢复图表状态

总结

通过以上步骤，我们完成了一个简单的流程图应用，包含两个节点和一条连接线。ProjectStorm React Diagrams 提供了丰富的API和良好的扩展性，能够满足从简单到复杂的各种流程图需求。后续可以在此基础上继续探索更高级的功能，如自定义节点类型、复杂布局算法等。

希望本指南能帮助你快速上手这个强大的流程图库！

react-diagrams a super simple, no-nonsense diagramming library written in react that just works 项目地址: https://gitcode.com/gh_mirrors/re/react-diagrams