关于前端:LogicFlow自定义边Edge

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

🚀技术 & 代码分享

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

😇举荐几个好用的工具

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

进入正题

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

这一节将解说疾速上手 LogicFlow 流程图编辑框架的自定义边（Edge），Edge 就是连贯 Node 与 Node 之间的元素。我的项目整体基于 Vue3+Vite3+Ts4 开发，为帮忙还为纯熟应用 Vue3 和 Typescript 语法的小伙伴提供便当，如果你曾经很纯熟在 Vue3 中的开发习惯，倡议间接拜访 LogicFlow 将获取残缺的入门指南。

1. 意识自定义边（Edge）模板：

同上一节的自定义业务节点模板一样，Edge 同样是须要继承自内置的 XxxNode 和 XxxEdgeModel 类，并且导出 type、view 和 model 三个选项，我置信上一节的代码你能运行胜利，这一节就更加简略。

上面这段代码继承自内置的 PolylineEdge 和 PolylineEdgeModel 实现本节的自定义 Edge：

// 源码地位：./src/CustomEdge.ts
import {PolylineEdge, PolylineEdgeModel} from "@logicflow/core";

class CustomEdgeNode extends PolylineEdge {// 官网批示：因为边的编辑复杂度问题，绝大多数状况下，自定义边时不举荐自定义 view}

class CustomEdgeModel extends PolylineEdgeModel {

}

export default {
    type: "CustomEdge",
    view: CustomEdgeNode,
    model: CustomEdgeModel,
}

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

优先进行注册的起因和上一节中提到的一样，这里就不再赘述了，请接着往下操作吧。

2.1 注册自定义 Edge：

注册过程仍旧是两个步骤：

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

// 导入自定义 Edge
import CustomEdge from "./CustomEdge";

// 筹备两个 Node，并应用自定义 Edge 来连贯它们俩
const graphData = {}

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

2.2 如何应用自定义 Edge：

与 Node 的定义雷同，然而要将自定义的 Edge 搁置到 edges 中，区别是 edge 须要明确 源节点 ID 和 指标节点 ID 两个值，通过这两个值来定位被 Edge 连贯的到底是谁，type 同样须要指定为自定义 Edge 的 type 属性值；

// 筹备两个 Node，并应用自定义 Edge 来连贯它们俩
const graphData = {
  nodes: [
    {
      id: '242b1b6c-1721-4b10-b4ad-c895094cf332',
      type: 'rect',
      x: 100,
      y: 100
    },
    {
      id: 'e59d6ecd-68f7-4d50-8e3f-29e67b6e5f16',
      type: 'circle',
      x: 300,
      y: 200
    }
  ],
  edges: [
    {
      sourceNodeId: '242b1b6c-1721-4b10-b4ad-c895094cf332',
      targetNodeId: 'e59d6ecd-68f7-4d50-8e3f-29e67b6e5f16',
      type: 'CustomEdge',
    }
  ]
}

3. 自定义 Edge 的 Text & Outline 的格调：

对于 Edge 格调的自定义同样是通过重写不同的函数来实现，如重写：getEdgeStyle()、getTextStyle() 和 getOutlineStyle()，还有最初对箭头格调的自定义；

class CustomEdgeModel extends PolylineEdgeModel {getEdgeStyle() {const style = super.getEdgeStyle();
      const {properties} = this;
      if (properties.isActived) {style.strokeDasharray = "4 4";}
      style.stroke = "orange";
      return style;
  }
  
  getTextStyle() {const style = super.getTextStyle();
      style.color = "#3451F1";
      style.fontSize = 20;
      style.background && (style.background.fill = "#F2F131");
      return style;
  }
  
  getOutlineStyle() {const style = super.getOutlineStyle();
      style.stroke = "red";
      style.hover && (style.hover.stroke = "red");
      return style;
  }
}

当你实现了下面几个函数的重写后就失去的上面截图的成果：

4. 开启边（Edge）动画：

减少动画能够体现从一个 Node 到流向另一个 Node 的过程，在大多数的流程图编辑软件中都有这样的性能存在。

在 LF 中能够通过 lf.openEdgeAnimation(edgeId) 启动默认动画，也能够通过重写 getEdgeAnimationStyle() 函数来自定义动画的属性；

• 开启默认动画：为须要开启动画的 Edge 减少 id 字段，并在执行渲染函数 render() 后开启动画：

const graphData = {
  edges: [
    {
        // 减少 id 字段
      id: '702a4d2f-b516-4769-adb0-5a4f4f5c07a9',
      sourceNodeId: '242b1b6c-1721-4b10-b4ad-c895094cf332',
      targetNodeId: 'e59d6ecd-68f7-4d50-8e3f-29e67b6e5f16',
      type: 'CustomEdge',
    }
  ]
}

onMounted(() => {lf.value.render(graphData);
  // 执行渲染后开启动画
  lf.value.openEdgeAnimation("702a4d2f-b516-4769-adb0-5a4f4f5c07a9");
})

• 自定义动画属性：重写 getEdgeAnimationStyle() 函数设置动画属性，重写 setAttributes() 函数开启动画：

class CustomEdgeModel extends PolylineEdgeModel {

        // ... 省略局部代码
  
      setAttributes(): void {this.isAnimation = true;}
    
    getEdgeAnimationStyle() {const style = super.getEdgeAnimationStyle();
        style.strokeDasharray = "5 5";
        style.animationDuration = "10s";
        return style;
    }
}

5. 自定义节点间边（Edge）的类型：

默认 Edge 的类型能够在实例化 LF 时通过 edgeType 选项进行调整，也能够应用 lf.setDefaultEdgeType(edgeType) 函数来指定；除此之外，为了满足不同的业务节点应用不同类型的边来示意还能够通过实例化 LF 时通过设置 edgeGenerator 函数进行显示规定的定义。

• 通过函数设置默认类型：

lf.value.setDefaultEdgeType("CustomEdge");

• 通过选项设置默认类型：

lf.value = new LogicFlow({edgeType: "CustomEdge",})

• 按同节点类型设置不同的类型：

lf.value = new LogicFlow({edgeGenerator(sourceNode, targetNode, currentEdge?) {if (sourceNode.type === 'rect') return 'CustomEdge'
  },
})

6. 自定义箭头的类型：

通过 setTheme() 函数中提供的 arrow 选项，能够指定默认 Edge 箭头的格调；也能够在继承 PolylineEdge 后通过重写 getEndArrow() 函数来实现更多显示格调。

• 通过 setTheme() 函数设置剪头的格调：

f.value.setTheme({
  arrow: {
    offset: 4, // 箭头垂线长度
    verticalLength: 2, // 箭头底线长度
  }
})

• 通过重写 getEndArrow() 函数，按 properties 传递的类型来实现不同的成果：

class CustomEdgeNode extends PolylineEdge {getEndArrow() {const { model} = this.props;
        const {properties: { arrowType} } = model;
        const {stroke, strokeWidth} = this.getArrowStyle();
        const pathAttr = {
            stroke,
            strokeWidth
        }
        if (arrowType === 'half') { // 半箭头
            return (
                h('path', {
                    ...pathAttr,
                    d: 'M 0 0 -10 5'
                })
            )
        }
        return h('path', {
            ...pathAttr,
            d: 'M 0 0 -10 -5 -10 5 z'
        })
    }
}

总结

这一节的内容就到此结束了，你的代码都运行起来了吗，文中短少了一些运行的效果图，你能够间接拜访我在 1024code 的我的项目在线预览成果来与你的代码进行比照学习。下一节将带来 LF 应用时更多的配置选项介绍。

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