Skip to content

多流程 (Multi Flow)

在某些复杂的业务管理系统中,您可能需要在同一个页面上同时展示多个独立的流程图实例(例如:左侧是来源流程,右侧是转换后的目标流程)。

yh-flow 的设计天然支持多实例。每个 <yh-flow> 组件都是完全隔离的,拥有自己独立的坐标系、选择状态、撤销/重做堆栈以及插件系统。

多实例协作示例

下方展示了两个完全独立的 Flow 实例。您可以通过点击中间的按钮,尝试将左侧选中的节点“迁移”到右侧。

来源流程 (Source)
来源 A
来源 B
目标流程 (Target)
目标根节点
并发实例

核心概念

  1. 状态隔离:视口变换 (Viewport)、选择状态和历史记录堆栈(撤销/重做)严格属于每个本地实例。您无需担心交叉污染。
  2. 父组件驱动同步:多实例间的通信最好通过父组件状态(如本示例所示)或 Pinia 等全局存储来处理。
  3. 性能可扩展性:虽然可以激活多个实例,但每个实例都会增加自己的事件监听器和渲染开销。对于大多数桌面浏览器,显示 3-5 个并发流程(每个节点数 <100)是非常流畅的。

Released under the MIT License.