关于前端:LogicFlow自定义业务节点

🎄Hi~ 大家好，我是小鑫同学，一位长期从事前端开发的编程爱好者，我将应用更为实用的案例输入更多的编程常识，同时我崇奉分享是成长的惟一捷径，在这里也心愿我的每一篇文章都能成为你技术落地的参考~

我在 IT200 总结技术学习；
我在 1024Code 在线编写代码；
我在掘金分享技术文章；
我在 Github 参加开源学习；

var-conv 实用于 VSCode IDE 的代码变量名称疾速转换工具
generator-vite-plugin 疾速生成 Vite 插件模板我的项目
generator-babel-plugin 疾速生成 Babel 插件模板我的项目

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

这一节将解说疾速上手 LogicFlow 流程图编辑框架的自定义业务节点内容，代码要在上一节的根底上进行开发，应用 1024code 在线编写代码的小伙伴能够间接 fork 上一节的代码开始，这一节的大抵内容包含了，筹备自定义业务节点的模板、注册和应用、自定义款式、自定义形态、自定义外观几个方面，做好筹备后咱们就开始了。

LF 框架自定义业务节点应用到了面向对象中继承的概念，通过继承 LF 提供的 XxxNode 和 XxxNodeModel 类后对相干的函数进行重写，并在默认导出时提供 type、view 和 model\`；

上面这段代码继承了 Rect 相干的 RectNode 和 RectNodeModel，如果要继承其余的内置对象还请查看官网文档或源码：

// 源码地位：./src/CustomNode.ts
import {RectNode, RectNodeModel} from "@logicflow/core";

class CustomNodeView extends RectNode {

}

class CustomNodeModel extends RectNodeModel {

}

export default {
    type: "CustomNode",
    view: CustomNodeView,
    model: CustomNodeModel,
}

自定义业务模板筹备好当前就能够先进行注册和应用了，第一个是因为在继承内置类后尽管没有进行任何的函数重写然而不耽搁渲染后果；第二个是因为一开始并不相熟，所以要及时注册和应用起来看到成果，也是不便后续的自定义。

注册过程次要分两个步骤：

第一要将下面编写的 CustomNode.ts 导入到 App.vue;
第二要将 CustomNode 对象通过 lf 实例中的 register() 函数在 render() 前注册；

// 导入自定义节点
import CustomNode from "./CustomNode";

const graphData = {}
...

onMounted(() => {
  // 在执行 render 前进行注册
  lf.value.register(CustomNode);
  lf.value.render(graphData);
})

在胜利注册后即可通过 render 函数来渲染业务流程中的所有元素的数据，自定义的业务节点和内置的默认节点应用形式雷同，都是通过 type 选项来标识；

// 定义 graphData
// 数据中的 type 为自定义节点导出的 type 属性的值
// 将节点在坐标为（100,100）的地位显示
const graphData = {
  nodes: [
    {
      id: 'fba7fc7b-83a8-4edd-b4be-21f694a5d490',
      type: 'CustomNode',
      x: 100,
      y: 100
    }
  ]
}

自定义业务节点款式（绿色描边），须要重写 RectNodeModel 类中的 getNodeStyle() 函数，通过关键词 super 获取到父类中的节点款式，并扭转 stroke 的值为绿色，最初将批改实现的 style 返回；

class CustomNodeModel extends RectNodeModel {getNodeStyle() {const style = super.getNodeStyle();
      style.stroke = 'green';
      return style;
    }
}

自定义业务节点形态（圆角矩形）和自定义业务节点款式一样的简略，重写 RectNodeModel 类中的 initNodeData(data: any) 函数就能够了；

class CustomNodeModel extends RectNodeModel {initNodeData(data: any): void {super.initNodeData(data);
    this.width = 120;
    this.height = 80;
    this.radius = 10;
  }
}

后面的自定义业务节点款式和形态都是在原有内置对象的根底上进行属性的调整，为了实习更高的自定义的外观，须要用到相似 Vue 中的 h 函数 （渲染函数），通过重写 RectNode 中的 Shape() 并借助渲染函数实现外观的自定义；

第一步：重写 getShape 函数，获取 props 中存储的以后节点的信息，如地位、尺寸和款式等；
第二步：节点的外观要基于 SVG 实现，上面的案例要在业务组件左上角显示一个 ICON，ICON 能够从 iconfont 找一个本人喜爱的；

class CustomNodeView extends RectNode {getShape() {
      // 获取 XxxNodeModel 中定义的形态属性
      const {model} = this.props;
      const {x, y, width, height, radius} = model;
      // 获取 XxxNodeModel 中定义的款式属性
      const style = model.getNodeStyle();
  
      return h('g', {}, [
          h('rect', {
              ...style,
              x: x - width / 2,
              y: y - height / 2,
              width,
              height,
              rx: radius,
              ry: radius,
          })
          h('svg', {
              x: x - width / 2 + 5,
              y: y - height / 2 + 5,
              width: 25,
              height: 25,
              viewBox: "0 0 1028 1024",
          }, [
              h('path', {
                  fill: style.stroke,
                  d: "<icon-svg-data>",
              })
          ])
      ]);
  }
}

至此自定义业务节点根本实现，这种款式也是大多数流程管理系统中常见的一种格调，接着补充一下 graphData 数据，来看一下最终的成果~

const graphData = {
  nodes: [
    {
      id: 'fba7fc7b-83a8-4edd-b4be-21f694a5d490',
      type: 'CustomNode',
      x: 100,
      y: 100
    },
    {
      id: '681035e6-11e3-43d7-9392-1deed852c01a',
      type: 'CustomNode',
      x: 300,
      y: 100
    }
  ],
  edges: [
    {
      sourceNodeId: 'fba7fc7b-83a8-4edd-b4be-21f694a5d490',
      targetNodeId: '681035e6-11e3-43d7-9392-1deed852c01a',
      type: 'polyline'
    }
  ]
}

这一节的内容就到此结束了，自定义业务节点的款式、形态和外观都搞定了吗？尤其是外观的自定义须要渲染 SVG 标签，所以把握一些 SVG 相干的数据或把握应用工具的生成 SVG 数据还是很有必要的，感觉把这一节的代码相熟相熟，接着要对 LF 中的 Edge 进行自定义了。

如果看完感觉有播种，欢送点赞、评论、分享反对一下。你的反对和必定，是我保持写作的能源~

关于前端:LogicFlow自定义业务节点

🚀技术 & 代码分享

😇举荐几个好用的工具

进入正题

1. 意识自定义业务节点模板：

2. 优先进行注册和应用：

2.1 注册自定义业务节点：

2.2 如何应用自定义业务节点：

3. 自定义业务节点款式：

4. 自定义业务节点形态：

5. 自定义业务节点外观：

6. 重启我的项目预览成果：

总结