流程组件-Logic-Flow

Andbohemian
3,323 阅读7分钟

Logic-Flow

简介

LogicFlow是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。 LogicFlow支持前端自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批流配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。

优点：

  • 高可定制性 用户可以根据自己的需要定制节点、连接器和样式，创建符合特定用例的定制逻辑流程图
  • UMD打包 LogicFlow 本身是以 umd 打包为纯 JS 的包，所以无论是 vue 还是 react 都可以使用

简单使用

logicFlow的使用上比较简单，最简单的例子只需要new一个LogicFlow实例便可，如下：

// 初始化实
  const lf = new LogicFlow({
    // 渲染容器
    container: document.querySelector('#container'),
    // 其他配置 eg: nodes, edges
  })
  // 渲染数据
  lf.render({
    // 渲染的数据
  })

拓展的使用也是极为方便的

import LogicFlow from "@logicflow/core";
import { Control } from "@logicflow/extension";
// 全局使用 每一个lf实例都具备 Control
LogicFlow.use(Control);

实用的实例功能

选项描述
setTheme设置主题。
focusOn定位到画布视口中心。
resize调整画布宽高, 如果width 或者height不传会自动计算画布宽高。
toFront将某个元素放置到顶部。
getPointByClient获取事件位置相对于画布左上角的坐标。
getGraphData获取流程绘图数据。
getGraphRawData获取流程绘图原始数据， 与 getGraphData 区别是该方法获取的数据不会受到 adapter 影响。
clearData清空画布。
renderRawData渲染图原始数据，在使用adapter后，还想渲染 logicflow 格式的数据。
render渲染图数据。
destroy销毁当前 LogicFlow 实例，清理相关资源。

相关概念

学习LogicFlow得先对其相关概念有一点了解

概念简单介绍
实例LogicFlow 实例的定位是作为流程图设计和管理的核心对象。它负责初始化、渲染、操作和管理流程图中的所有元素，包括节点和边
节点LogicFlow 内置了一些基础节点，开发者在实际应用场景中，可以基于这些基础节点，定义符合自己业务逻辑的节点。
边和节点一样，LogicFlow 也内置一些基础的边。LogicFlow- line polyline bezier
主题LogicFlow 提供了设置主题的方法，便于用户统一设置其内部所有元素的样式
网格网格是指渲染/移动节点的最小单位。网格最主要的作用是在移动节点的时候，保证每个节点中心点的位置都是在网格上。这样更有利于节点直接的对齐
背景提供可以修改画布背景的方法，包括背景颜色或背景图片，背景层位于画布的最底层
事件当我们使用鼠标或其它方式与画布交互时，会触发的对应的事件。通过监听这些事件，可以获取其在触发时所产生的数据，根据这些数据来实现需要的功能

实例

一个流程设计界面，就是一个LogicFlow的实例。要创建一个实例我们只需要new LogicFlow一下，当然只有实例是不行的，我们需要为实例指定渲染的容器，图数据，也可以调用相关实例方法提供更加友好的交互，如下： image.png

  useEffect(() => {
    const lf = new LogicFlow({
      container: refContainer.current!,
      grid: true,
      stopScrollGraph: true, // 禁止鼠标滚动画布
      stopZoomGraph: true, // 禁止缩放画布
    });
    //graphData 图数据（nodes edges）
    lf.render(graphData);
    lf.translateCenter(); // 将图形移动到画布中央
  }, []);

节点（Node）、自定义节点

LogicFLow自带预设的7个节点，例如：圆形，矩形，菱形等，不过都比较丑

image.png 不建议使用，LogicFlow是基于继承来实现自定义节点、边。开发者可以继承LogicFlow内置的节点，然后利用面向对象的机制重写 image.png 值得注意的是LogicFLow是基于MVVM模式实现的。我们可以重新定义节点的model和view ，通过重写定义在model上获取样式相关的方法和重写view上的getShape来定义复杂的节点外观。不过规范比较多（SVG）不太合适用于高复杂性的交互和实现。

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

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

自定义的组件渲染方式有一个缺点，因为内部是通过以下方式将组件渲染到节点的 DOM 中

import { createRoot, Root } from 'react-dom/client'
const root = createRoot(container)
root.render(elem)

react使用的是Portal技术，Vue则是Teleport，不过目的都是相同的，为了把渲染的节点挂载在指定的容器内部，获取外部的Context内容

getTeleport 返回一个组件，类似于Teleport把渲染节点渲染在ref节点下 image.png

当用户通过 setProperties 或 setProperty 等更新节点 properties 时， 我们需要在组件内部监听 node:property-change 事件，根据 properties 值更新组件状态

目前在 Vue2 中，节点组件内容有一些限制，比如无法使用 Vuex、i18n、element-ui 等

边

和节点一样，LogicFlow 的边也支持基于继承的自定义机制。同样也只需同时继承view和model。 但是和节点不一样的是，由于边的编辑复杂度问题，绝大多数情况下，自定义边时不推荐自定义view。 只需要在自定义edgeModel中样式类即可。

缺点：和节点不一样的是边的开发只能是基于继承去实现功能，自定义改造的能力比较受限，SVG操作以及render函数操作，不太合适用于复杂交互的开发。 实践下来不太合适做高自定义的开发。边的render函数只能返回SVG元素进行操作。

结构大致如下

image.png image.png

官方案例网址： 自定义边

主题、网格、背景、事件

相关概念较为简单，不做赘述。值得关注的是事件相关功能，LogicFLow为我们提供了很多相关的事件加强我们的自定义功能、交互。有兴趣的可以看看。

插件

基本所有的流程图组件都离不开插件的概念，LogicFlow也不例外@logicflow/extension包中提供一些开箱即用的组件，快速支持产品中常见的功能。

总结

整体来说LogicFLow是一款不错的流程组件套件，最大的特性就是基于类的实现，不管是画布实例还是节点和边都是基于类的实现，还有丰富的插件使用，可惜的是边的定制化能力有点偏弱，需要重写类的实现写好SVG的样式，交互。写起来可读性不够强大，尤其是对于刚刚入手的小伙伴来说，因为这个原因我们需要学习很多他的Model、Node、views的方法和属性这里感觉有点食之无味，弃之可惜的感觉。若是能和节点一样基于Vue/React组件去完成边的开发的话定制化能力会再上一个大台阶。并且官方指明目前在 Vue2 中，节点组件内容有一些限制，比如无法使用 Vuex、i18n、element-ui 等，想要兼容Vue2的话就不用考虑了。

avatar
文章
阅读
粉丝