零代码门槛！10分钟用Rete.js搭建专业流程图应用

你还在为项目开发流程图功能而头疼？还在纠结选择哪个可视化框架？本文将带你用Rete.js框架，从0到1快速构建一个专业的流程图应用，无需复杂配置，只需简单几步即可完成。

读完本文你将学到：

• Rete.js框架的核心概念与优势
• 如何通过Rete Kit快速初始化项目
• 构建自定义节点和连接的基本方法
• 完整流程图应用的实现步骤

为什么选择Rete.js？

Rete.js是一个用于创建可视化界面和工作流的JavaScript框架，提供了基于数据流和控制流方法处理图形的解决方案。它的核心优势在于：

• 高度可定制的节点和连接系统
• 支持多种前端框架（React、Vue、Angular、Svelte）
• 简洁的API设计，易于上手
• 丰富的扩展生态系统

项目核心代码结构：

• 框架入口：src/index.ts
• 编辑器核心：src/editor.ts
• 经典预设：src/presets/classic.ts
• 工具函数：src/utils.ts

快速开始：使用Rete Kit初始化项目

Rete提供了便捷的脚手架工具Rete Kit，可以帮助我们快速搭建项目：

npx rete-kit app

执行上述命令后，会出现交互式配置界面，你可以选择喜欢的前端框架和所需功能。如果你想了解更多细节，可以参考官方文档中的"Getting started"部分。

核心概念解析

1. 节点(Node)

节点是流程图的基本组成单元，每个节点可以包含输入、输出端口和控制元素。在src/presets/classic.ts中定义了基础Node类：

// 节点类定义示例
export class Node<
  Inputs extends { [key in string]?: Socket } = { [key in string]?: Socket },
  Outputs extends { [key in string]?: Socket } = { [key in string]?: Socket },
  Controls extends { [key in string]?: Control } = { [key in string]?: Control }
> implements NodeBase {
  id: NodeBase['id']
  inputs: { [key in keyof Inputs]?: Input<Exclude<Inputs[key], undefined>> } = {}
  outputs: { [key in keyof Outputs]?: Output<Exclude<Outputs[key], undefined>> } = {}
  controls: Controls = {} as Controls
  
  constructor(public label: string) {
    this.id = getUID()
  }
  
  // 添加输入端口
  addInput<K extends keyof Inputs>(key: K, input: Input<Exclude<Inputs[K], undefined>>) {
    // 实现细节...
  }
  
  // 添加输出端口
  addOutput<K extends keyof Outputs>(key: K, output: Output<Exclude<Outputs[K], undefined>>) {
    // 实现细节...
  }
  
  // 添加控制元素
  addControl<K extends keyof Controls>(key: K, control: Controls[K]) {
    // 实现细节...
  }
}

2. 端口(Port)与套接字(Socket)

端口分为输入端口(Input)和输出端口(Output)，用于节点之间的数据传输。套接字(Socket)定义了端口之间的连接规则，只有相同类型的套接字才能连接。

// 套接字定义
export class Socket {
  constructor(public name: string) {}
}

// 输入端口定义
export class Input<S extends Socket> extends Port<S> {
  control: Control | null = null
  
  constructor(public socket: S, public label?: string, public multipleConnections?: boolean) {
    super(socket, label, multipleConnections)
  }
  
  // 添加控制元素到输入端口
  addControl(control: Control) {
    // 实现细节...
  }
}

3. 连接(Connection)

连接用于连接不同节点的输出端口和输入端口，实现数据流转：

export class Connection<Source extends Node, Target extends Node> implements ConnectionBase {
  id: ConnectionBase['id']
  source: NodeBase['id']
  target: NodeBase['id']
  
  constructor(
    source: Source,
    public sourceOutput: keyof Source['outputs'],
    target: Target,
    public targetInput: keyof Target['inputs']
  ) {
    // 实现细节...
  }
}

4. 控制元素(Control)

控制元素是节点上的交互组件，如文本输入框、按钮等：

// 输入控制元素示例
export class InputControl<T extends 'text' | 'number', N = T extends 'text' ? string : number> extends Control {
  value?: N
  readonly: boolean
  
  constructor(public type: T, public options?: InputControlOptions<N>) {
    super()
    // 实现细节...
  }
  
  setValue(value?: N) {
    this.value = value
    if (this.options?.change) this.options.change(value!)
  }
}

实战：构建简单的数学计算流程图

下面我们通过一个简单的数学计算流程图示例，演示如何使用Rete.js构建实际应用：

1. 创建节点类型

首先，我们需要创建几种不同类型的节点：数值节点、加法节点和结果节点。

// 创建套接字类型
const numberSocket = new Socket('Number')

// 数值节点
class NumberNode extends Node {
  constructor() {
    super('Number')
    // 添加输出端口
    this.addOutput('value', new Output(numberSocket, 'Value'))
    // 添加数值输入控制
    this.addControl('num', new InputControl('number', {
      initial: 0,
      change: (value) => this.update()
    }))
  }
  
  update() {
    // 处理数值变化逻辑
  }
}

// 加法节点
class AddNode extends Node {
  constructor() {
    super('Add')
    // 添加输入端口
    this.addInput('a', new Input(numberSocket, 'A'))
    this.addInput('b', new Input(numberSocket, 'B'))
    // 添加输出端口
    this.addOutput('result', new Output(numberSocket, 'Result'))
  }
  
  // 处理计算逻辑
  compute(a, b) {
    return a + b
  }
}

2. 初始化编辑器

// 创建编辑器实例
const editor = new Editor()

// 注册节点类型
editor.registerNode(NumberNode)
editor.registerNode(AddNode)

// 渲染到页面
editor.render(document.getElementById('app'))

// 添加初始节点
editor.addNode(new NumberNode())
editor.addNode(new NumberNode())
editor.addNode(new AddNode())

3. 实现数据流转

// 当连接建立时执行计算
editor.on('connectioncreated', (connection) => {
  const sourceNode = editor.getNode(connection.source)
  const targetNode = editor.getNode(connection.target)
  
  // 触发计算
  if (targetNode.compute) {
    const result = targetNode.compute(
      sourceNode.controls.num.value,
      // 获取其他输入值...
    )
    // 更新结果
  }
})

通过以上步骤，我们就创建了一个简单但功能完整的数学计算流程图应用。用户可以添加数值节点，设置数值，通过加法节点计算结果，直观地展示了数据流转过程。

项目目录结构解析

为了更好地组织代码，推荐以下目录结构：

project/
├── src/
│   ├── nodes/           # 自定义节点
│   ├── controls/        # 自定义控制元素
│   ├── sockets/         # 套接字定义
│   ├── editor.js        # 编辑器配置
│   └── main.js          # 入口文件
├── public/
│   └── index.html       # 页面文件
└── package.json         # 项目配置

总结与进阶

通过本文的介绍，你已经了解了Rete.js的基本概念和使用方法，并能够构建简单的流程图应用。想要进一步提升，可以探索以下方向：

• 自定义节点样式和布局
• 实现复杂的数据处理逻辑
• 添加撤销/重做功能
• 实现流程图的保存和加载

Rete.js提供了丰富的功能和灵活的扩展机制，无论是构建简单的流程图工具还是复杂的可视化编程环境，都能满足需求。更多高级用法可以参考官方文档和示例代码。

现在，你已经掌握了Rete.js的基本使用方法，快去动手创建自己的流程图应用吧！如果有任何问题，欢迎参与项目贡献或在社区寻求帮助。项目源码可以通过以下地址获取：

git clone https://gitcode.com/gh_mirrors/re/rete