一、简介
XFlow 是 AntV 旗下, 基于 X6 图编辑引擎、面向 React 技术栈用户的图编辑应用级解决方案, 旨在让复杂的图编辑应用开发简单高效。
类比antd体系, X6 是图编辑场景的 antd, 提供图编辑的各种原子能力。而 XFlow 是图编辑场景的 ProComponent, 通过 App 扩展系统/状态管理/命令模式来实现对 X6 的原子能力的组合封装, 最终实现应用级场景的开箱即用。
XFlow 源自蚂蚁体验技术部数据智能团队, 已经在蚂蚁大数据部、人工智能中台业务场景深度打磨验证, 值得信赖!
如果您还没有使用过 XFlow, 建议通过 快速上手 抢先体验 XFlow 的魅力。
二、图编辑引擎栈
三、XFlow 的架构
如下图所示,XFlow 分为以下四个部分
- xflow-core(核心库)
- xflow-extension(UI组件库)
- xflow-hooks(扩展机制)
- xflow-docs(业务最佳实践)
每个库会承载不同的功能,解决不同的问题,下面会详细介绍一下:
3.1 xflow-core
3.1.1 XFlowCanvas:降低 x6 使用的复杂度。
画布是图编辑应用中必备的内容,XFlow 默认生成画布实例,内置了画布配置项、React 节点/连线上 React 内容渲染逻辑、画布状态等。
通过 createGraphConfig
可以快捷生产画布配置。
3.1.2 Command:封装 X6 层各种原子API
XFlow 通过命令的方式统一调用 X6 的 API
XFlow 的 内置命令
3.1.3 Model: 全局状态管理服务
在 XFlow 通过 Model 来驱动 React UI 组件更新渲染,我们通过监听事件可以在事件的回调函数中调用 Model 的 setValue 方法来更新 Model,UI 组件中通过 Model 的 watch 方法来更新组件内部的 State,从而实现组件渲染的更新。
XFlow 的 内置 model
3.1.4 画布与交互组件联动
在实际业务中,我们经常会遇到画布内容与配套 UI 组件交互的需求。如下图所示,XFlow 借鉴了读写分离架构,画布内容的任何变化都会直接修改 modelService 中的变量值,从而影响UI交互组件的表现形式。而UI交互组件则通过调用 command 来更新画布内容。
3.2 xflow-extension
xflow-extension包里的内容是基于xflow-core提供的api定制出的交互组件。
在实际业务中,诸如小地图 Minimap、右键菜单栏 Contextmenu、工具栏 Toolbar、对齐线 Snapline 等都是比较常用的,XFlow 默认将这些常用交互组件封装成 React 组件,开发者使用时就跟使用普通 React 组件一样。基于这些开箱即用的组件,我们可以快速搭建自己的图编辑应用。
3.3 xflow-hooks
XFlow 对于 graphConfig、commandService、modelService 都封装了一些默认的逻辑,但是当默认逻辑不满足用户的业务需求时,或者需要动态修改逻辑时,或者需要自定义增强行为时,也允许用户通过自定义扩展机制来实现。
扩展钩子 - 注册修改graphConfig的钩子
3.4 xflow-docs
沉淀了 Flow、DAG、ER 三个较为成熟的图编辑场景,可以直接使用。
3.4.1 DAG 解决方案
在图论中,如果一个有向图从任意顶点出发无法经过若干条边回到该点,则这个图是一个有向无环图(DAG, Directed Acyclic Graph)
3.4.2 ER 建模解决方案
3.4.3 流程图(Flowchart )解决方案
Flowchart中 的主要组件
Flowchart 中的分层结构
四、XFlow 的痛点
4.1 上手成本高
当我想注册一个 model 的时候,看到下面这段代码直接劝退了…
4.2 官方文档简略
由于 XFlow 很多概念还是相对抽象,而官方文档又比较简略,导致用户理解困难。此外官网上的 demo 也很少。
面向源码编程两个月,寒了谁的心?
4.3 源码抽象,不利于维护
核心代码通过 IOC-container 进行依赖管理,用了大量的依赖注入,增加了学习门槛。