滴滴开源流程图框架 LogicFlow 2.0 来啦！

新用户62592529 2024-09-19 发布于四川

展开全文

作者：滴滴前端技术
链接：

https:///post/7402987272504623156

导读

LogicFlow 是一款滴滴客服技术团队开源的流程图编辑框架，它提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。自发布以来，LogicFlow 影响力持续增长，现已成为国内头部开源流程图编辑框架，GitHub star 数量已超过 7.4k，npm 下载量累计超过 300k。除了我们内部团队的使用外，还吸引了如美团、京东、华为等企业的技术团队在项目中应用 LogicFlow。

在开源后的平稳运营期间，我们逐渐发现了一些 LogicFlow 存在的短板：

简单定制场景下存在额外开发工作量：LogicFlow 内置了一些基础图形类，用户可以结合诉求继承基础类做图形定制，但在一些诸如定制宽高、样式的简单定制场景下仍需要写继承逻辑，增加了使用成本；如果要定制一个基于前端框架(React 或 Vue)的图形，还需要通过特定的方法把组件挂载到节点上。
官方文档不够完善，用户上手成本较高：现有版本的 README 和官方文档的引导性比较差，对刚接触的新手来说理解成本比较高；文档中对参数、属性、API 的细节描述存在缺失，想知道功能如何使用、如何配置需要从源码中查询。
工程目录复杂且缺乏引导，贡献者开发体验不佳：LogicFlow 对外提供了 3 个功能包，在工程中以 monorepo 的方式进行管理。现有版本的源码工程中需要分别进入对应的目录下才能进行调试，项目调试指南没有在 README 中标明，需要用户自行寻找。

经过半年的努力，2.0 版本终于要和我们见面了。让我们一起看看 LogicFlow 2.0 带来了哪些新的变化吧！

2.0 带来了哪些变化

变化速查

产品功能增强：

部分节点和边的属性支持初始化配置
一系列插件进行了针对性的能力增强
修复一系列已知问题；

新能力：

新增 Label 插件，节点内容支持富文本
新扩展包，支持基于 React/Vue 组件快速注册自定义节点

官网门户优化：

首页整体结构调整：支持在首页在线调试画布，丰富首页展示内容
文档优化：完善文档内容，增加文档内锚点导航，统一文档页交互

源码开发体验提升：

重构项目结构，升级打包工具，优化开发流程

核心能力增强

LogicFLow 2.0 在功能性和稳定性方面都得到了显著提升，为用户和开发者提供了更强大的工具和能力支持。我们期待这些改进能带来更流畅的使用体验，并继续推动 LogicFLow 在各种应用场景中的广泛应用，主要功能变更点：

自定义形状和样式内置：使用基础节点和边时，自定义形状和样式属性无需再通过继承的方式重新自定义，通过节点和边的 properties 属性进行配置，相同的能力，更快的实现。

优化后效果

节点 Resize 能力内置： 通过全局设置 allowResize，或者给节点/边数据配置 resizable 属性就能直接开启 resize 缩放能力，无需再引入 NodeResize 插件。

优化后效果

网格和画布优化：优化了网格的内部逻辑，增加了画布自适应宽度、提高画布移动和滚动稳定性。
事件和状态优化：修复了触摸板点击事件不生效、静默模式下快捷键和拖拽状态不更新的问题，确保了事件触发的稳定性和状态更新的及时性。
锚点功能增强：修复了锚点相关的多个问题，包括连接边数量限制、自定义节点锚点的连线回显问题，并增加了默认错误提示。
Polyline 和克隆节点修复：解决了 polyline 折线在拖动时回退问题，修复 cloneNode 方法复制节点后文本位置的错误问题。

扩展插件优化

在 2.0 版本, 我们对多个插件进行了能力完善，提升插件性能，并带来了多文本插件（Label）和动态分组插件（DynamicGroup），进一步丰富 LogicFlow 插件生态系统。

小地图插件优化

由于小地图插件在实际使用过程中存在一些功能缺陷且性能较差，因此我们重构了小地图插件的实现逻辑，提升预览视窗交互流畅度和功能可靠性的同时还改进了小地图的更新策略，以减少画布移动时的性能消耗。

新旧能力对比（上：旧下：新）

画布导出插件优化

尽管 1.0 版本下提供了画布导出能力，但功能单一难以满足用户诉求。因此，我们对导出功能做了增强支持更多参数配置，并修复了在线图片无法导出、开启局部渲染后导出图片不全的问题。

新旧能力对比（上：旧下：新）

框选插件优化

1.0 版本下的框选插件实现简单，且存在阻塞页面滚动的问题，在 2.0 版本中我们调整了框选插件逻辑，修复问题的同时还丰富了插件的配置能力，支持用户配置框选判定范围和启用状态。

新旧能力对比（上：旧下：新）

全新的 DynamicGroup 插件

1.0 版本 Group 插件在 API 命名以及实现方案上存在缺陷，比较多的 issue 都与之关联。而 Group 又是使用场景比较多的插件，因此，我们在节点内置 Resize 功能的基础上，推出了全新的 DynamicGroup 插件，欢迎大家使用，希望能够带来更好的体验。

新增多文本插件

LogicFlow 内置了文本显示及文本编辑能力，内置的文本在配置能力上不够丰富，且样式受限于 SVG text 节点和 foreignObject 节点的特性，在文本溢出模式配置上也体验不佳。

因此我们推出了 Label 插件，旨在增强节点和边上的文本展示。Label 插件主要有以下一些特性：

提供了全局以及节点维度配置项，用户可灵活自定义；
内置了富文本编辑能力，编辑态下选中文本即可增加富文本样式；
每个节点或边上可以设置多个文本，增强显示能力。

全新自定义节点扩展包

LogicFlow 虽然提供了通过继承 HTMLNode 自定义 HTML 节点的能力，但从用户反馈来看，这种方式不够直观且可能因为销毁时机不对而出现内存泄漏的性能问题。

通过对业内其它流程图产品研究对比，我们发现增强该能力对于提升用户开发体验非常有帮助。

因此我们提供了两个独立的包 @logiclfow/react-node-registry、@logiclfow/vue-node-registry，以一种更直观且快捷的方式来自定义 HTML 节点 —— 即使用 React 或 Vue 组件来注册节点。它既可以直接复用宿主系统中已引入的丰富的组件库，也可以基于 React 和 Vue 开发方式来自定义节点内容。