LogicFlow深度探究之旅🚀

在这篇文章中，我们已经了解了目前市面上常见的一些画布引擎

• Drawio：33.1k⭐
• Xflow：364⭐
• LogicFlow：3.8k⭐

本文就准备详细探究关于 LogicFlow 的整体设计理念和方案，从而可以知道它为什么会成为热门开源项目的原因，废话不多说，开始吧~

正文

本篇文章主要分为如下几个部分

• 技术栈方案选择
• 画布的组成
• 扩展的实现
• 事件系统详细设计
• 画布模块详细设计

技术栈方案选择

LogicFlow代码仓库采用了目前最流行的 monorepo 的方式，结合 lerna 进行管理，分为两个package：

• core
• extension

前端技术选型为

• Preact
• mobx

画布的组成

通过上图，我们可以看到画布由两部分组成

• 基础画布：这部分提供了画布编辑的核心功能，列举如下

  • 图形的绘制能力：基于 SVG 来绘制形状各异的节点和线，并提供了基础的节点（矩形、圆形、多边形等）和线（直线、折线、曲线）
  • 各类交互能力，让图动起来：根据节点、线、画布的各类鼠标事件（hover、点击、拖拽等）做出反应。比如节点拖拽、拖拽创建边、线的调整、双击节点编辑文本等
  • 提升编辑效率的能力：提供网格、对齐线，上一步、下一步，键盘快捷键，画布放大缩小等配套能力，帮助用户提升编辑效率

• 扩展：基于特定的业务场景，拓展能力边界，列举如下

  • 自定义节点和边：用于自定义节点和边的样式，并且对于节点还可以设置连接规则
  • 自定义组件：常见的如 节点拖拽生成栏、属性编辑栏、预览图 等都可以通过自定义组件的方式提供

扩展的实现

在上一节中，我们聊到了扩展是LogicFlow的重要特性，那如果我们想做一个自己的扩展，应该如何去实现呢？

具体来说分两方面

• 自定义节点和边
• 自定义组件

自定义节点和边

对于节点和边，我们需要通过 继承 的方式去实现，在LogicFlow里，提供了边的节点的baseClass，需要注意的是继承的时候，需要同时继承 view 和 model，这是因为LogicFlow采用 mobx 来管理应用状态，整体是基于 mvvm，因此就需要定义视图和数据模型

• 节点

  • view：BaseNode，封装了大部分交互逻辑，如拖拽、点击等
  • model：BaseNodeModel

• 边

  • view：BaseEdge，封装了大部分交互逻辑，如拖拽、点击等
  • model：BaseEdgeModel

给一个代码示例

自定义组件

自定义组件由于需要插入额外的dom元素，因此在实现时，需要提供 render 函数来提供插入，关键代码如下

事件系统详细设计

LogicFlow里采用的是 发布订阅模式 进行内部事件的管理，因此存在一个事件中心，用于存储与下发不同的事件，下面是事件中心的部分源码截图

借助它，就可以将画布与扩展进行解耦，双方的所有通信都通过事件中心来转发，这样就可以更容易对所有事件进行集中管理，从而实现许多功能，比如打印日志，事件重放等

画布模块详细设计

LogicFlow里的画布分层结构大致如下

其中 画布层 是核心，是用来实际渲染节点和边的层，其它层都是扮演辅助角色

• 工具层：承载编辑节点或边时的文本
• 辅助层：拖拽节点时，显示对齐线的地方
• 网格层：辅助显示拖动节点或边的距离
• 背景层：用于显示自定义背景，位于最底层

下面是层级分布的实际代码截图

结语

相信通过本文的阅读，你已经对画布引擎项目的设计方案有很深刻的认识了，未来在遇到画布引擎方案的选择时，心里肯定会更加有底气😉

所以都看到这里了，希望你能给我一个免费的赞👍，听说点赞的人都会升职加薪哦🤩