LiteFlow逻辑可视化编排设计与实现 05-后记篇（前端代码已开源，文末有仓库地址）

王士江WangJohn
4,377 阅读5分钟

背景：我之前写过一篇文章：《Liteflow逻辑编排可视化设计》，分享了我们对LiteFlow这个规则引擎的逻辑可视化设计，而我们这个可视化项目的目标不仅仅只是实现LiteFlow的逻辑可视化，而是实现LiteFlow的逻辑可视化编排。

接下来，我将通过系列文章的形式，进行LiteFlow逻辑可视化编排设计与实现的开发经验分享。

LiteFlow ContextPad.gif

《LiteFlow逻辑可视化编排设计与实现》会以系列文章的形式，有步骤、有重点地分享我们对LiteFlow逻辑可视化编排的实现，目前该系列文章有如下4篇：

  1. LiteFlow逻辑可视化编排设计与实现 01-先导篇
  2. LiteFlow逻辑可视化编排设计与实现 02-数据模型篇（Model）
  3. LiteFlow逻辑可视化编排设计与实现 03-视图呈现篇（View）
  4. LiteFlow逻辑可视化编排设计与实现 04-操作逻辑篇（Control）
  5. LiteFlow逻辑可视化编排设计与实现 05-后记篇（前端代码已开源，文末有仓库地址）

以下是《LiteFlow逻辑可视化编排设计与实现 05-后记篇》的文章正文。

05-后记篇

在本篇文章中，我会回顾我们之前几篇文章的重点，并附上本系列文章的前端代码的开源地址。

作为一名前端开发，我们需要特别关注的前端开发要素有三个——数据（Model）、视图（View）和逻辑（Control），即“MVC”——而在实现LiteFlow逻辑可视化编排时，我们也可以使用“MVC三要素”的知识框架来进行系统的拆解、组合、设计和实现。

LiteFlow逻辑可视化编排设计与实现.png

1、数据模型（Model）

在《数据模型篇》，我们完成了EL表达式的操作符（Operator）的建模工作，最终我们将EL表达式建模成了由ELNode组成的一棵树：

LiteFlow逻辑可视化编排-ELNode模型-组合关系vs继承关系.png

对于我们建立的ELNode模型，关键点有以下2个：

  1. 组合关系：一个EL表达式，最终是由ELNode组成的一棵树；
  • 这棵树的根节点被我们定义为Chain，其他EL操作符（比如THEN/WHEN/SWITCH等关键字，也包括逻辑组件）都是树上的子节点；
  • 需要注意的是，逻辑组件（NodeComponent）也被当做一种操作符（Operator），而且是这棵树的叶子结点。
  1. 继承关系：所有EL操作符（比如THEN/WHEN/SWITCH等)，包括逻辑组件（NodeComponent），都继承自ELNode，同时有自己的特有属性和方法实现。

2、视图呈现（View）

在《视图呈现篇》，我们完成了使用AntV X6的节点（Node）和边（Edge）进行ELNode的逻辑可视化呈现：

Liteflow逻辑编排可视化设计.png

我们目前初步实现了LiteFlow的以下3类/6种逻辑编排的可视化：

LiteFlow逻辑编排分类：顺序、分支、循环.png

  • ① 顺序类：串行编排THEN、并行编排WHEN；
  • ② 分支组件：选择编排SWITCH、条件编排IF；
  • ③ 循环组件：FOR循环、WHILE循环。

如果把LiteFlow的逻辑可视化的设计心法总结一下，那就可以总结为一句口诀：“两点一线”。因为我们从要素的拆解来看，一张图本质上无外乎就是「两点一线」——即节点和连线，以及在节点和连线上的文字标签。

两点一线.png

我们对LiteFlow的逻辑可视化设计，就是通过“节点”和“连线”的组合进行逻辑可视化呈现的。比如下面是LiteFlow逻辑编排的根节点Chain的可视化设计：

LiteFlow逻辑可视化编排-Chain设计.png

LiteFlow逻辑编排的根节点Chain的可视化设计包括：

  • 两点：即一个“开始节点”和一个“结束节点”；
  • 一线：在“开始节点”和“结束节点”之间画一条线。

通过AntV X6进行“两点一线”的代码实现也相对简单，一个“两点一线”的参考实现如下：

// 1. 首先：创建一个开始节点
const start: Node = Node.create({
  shape: 'liteflow-start',
  attrs: {
    label: { text: '开始' },
  },
});
// 2. 然后：创建一个结束节点
const end: Node = Node.create({
  shape: 'liteflow-end',
  attrs: {
    label: { text: '结束' },
  },
});
// 3. 最后：创建开始节点和结束节点之间的连线
Edge.create({
  shape: 'edge',
  source: start,
  target: end,
});

事实上，上面的代码就是我们对LiteFlow逻辑可视化的实现代码，其他操作符（包括串行编排THEN、并行编排WHEN、条件编排IF等等）也是使用了同样“两点一线”的思路来实现的：

LiteFlow逻辑可视化编排-并行编排WHEN设计.png

3、操作逻辑（Control）

我们对“编排”的操作逻辑做进一步的拆解，也就是我们常说的“增删改查”（CRUD）操作了，在这里的具体实现，就是对ELNode模型的树型结构进行“增删改查”：

LiteFlow逻辑可视化编排-操作逻辑篇（Control）-增删改查CRUD.png

在这里的具体实现，就是对ELNode模型的树型结构进行“增删改查”——我们不光完成了可以通过拖拽，而且也可以通过ContextPad快捷面板，以及节点和边上的工具栏的操作按钮——实现LiteFlow的逻辑可视化编排的“增删改查”操作：

新增操作：前面插入节点.png

4、开源仓库地址

最后，我们实现的LiteFlow逻辑可视化编辑器的功能原型——就是文章中截图的项目——前端代码已经开源，开源仓库地址是：gitee.com/imwangshiji… ，欢迎感兴趣的朋友拉到本地试一试。

以上是《LiteFlow逻辑可视化编排设计与实现 05-后记篇》的内容，希望能帮到有同样需求的朋友。

avatar
文章
阅读
粉丝