六、LogicFlow 自定义业务边 Edge

前言

经过前面的文章讲解，目前已经实现了节点拖拽到画布中，并且也实现了节点之间的基础连线，到这里也算是入了门，接下来继续探究新学习新的功能，以满足新的需求，那么这一章就会学习如何更改两节点之间的连线问题，让线条变得更加好看，更加的形象生动，增加用户在使用过程中的体验。

边的介绍

根据官方介绍当前支持如下三种内置边：

• 直线(line)
• 直角折线(polyline)
• 贝塞尔曲线(bezier)

边引入方式

// 直线
import { LineEdge, PolylineEdgeModel } from "@logicflow/core";
// 折线
import { PolylineEdge, PolylineEdgeModel } from "@logicflow/core";
// 贝塞尔曲线
import { BezierEdge, BezierEdgeModel } from "@logicflow/core";

改造边（线）

基于之前的配置，mock两个节点和边的数据，如下所示：

实现效果如下：

然后我们这次的目标就是通过修改边的一些属性来优化连线的样式，让其变得更加的好看舒适，符合系统的整体视觉效果。

自定义边目录介绍

在合适的位置创建曲线文件，我这里还是跟创建自定义节点同一目录层级，如下所示：

这次需要改动的就是上图中圈起来的文件，这里按照引入的顺序简单介绍一下：

1. Edges 自定义的线条
2. Register.js 注册线条
3. index.vue 引入并使用线条

创建自定义边目录文件

在 Edges 目录下创建 Bezier.js 文件， 根据官网介绍引入贝塞尔曲线（bezier）相关内置。

// 贝塞尔曲线
import { BezierEdge, BezierEdgeModel } from '@logicflow/core'

// 贝塞尔曲线
class customBezierEdgeModel extends BezierEdgeModel {
  	constructor (data, graphModel) {
    	super(data, graphModel);
  	}
  	
	// 。。。其他属性配置
	
}

/**
 * 和节点一样，LogicFlow 的边也支持基于继承的自定义机制。
 * 同样也只需同时继承view和model。 
 * 但是和节点不一样的是，由于边的编辑复杂度问题，绝大多数情况下，自定义边时不推荐自定义view。 
 * 只需要在自定义edgeModel中样式类即可。
*/
export default {
	// 自定义曲线类型
  	type: 'EDGE_BEZIER',
  	view: BezierEdge,
  	model: customBezierEdgeModel,
};

注册

这里的注册跟前面章节中注册节点的方式一样，在 Register.js 文件中如下配置：

// 自定义贝塞尔曲线
import Bezier from './Edges/Bezier';

export const RegisterCustomElement = (lf) => {

  // 。。。注册的节点

  // 自定义贝塞尔曲线
  lf.register(Bezier);
};

使用

基于前一章节在 index.vue 文件中，基本不用做什么改动，为了记忆，这里再次描述一下。

<script>

// 引入LogicFlow核心包
import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';

// 引入组件
import LeftMenu from './components/LeftMenu';


// 注册自定义节点
import { RegisterCustomElement } from './lf_omponents/Register';

export default ({
    name: 'demo',
    data () {
        return {
            lf: null,
            taskDetail: {},
            // 模拟数据
            mockData: {
                nodes: [
                    { id: "1", type: "rect", x: 100, y: 100, text: "节点1" },
                    { id: "2", type: "circle", x: 500, y: 300, text: "节点2" },
                ],
                edges: [
                    {
                        sourceNodeId: "1",
                        targetNodeId: "2",
                        type: "EDGE_BEZIER",  // 此处改为自定义曲线类型
                        text: "连线",
                        startPoint: {
                            x: 140,
                            y: 100,
                        },
                        endPoint: {
                            x: 450,
                            y: 300,
                        },
                    },
                ],
            }
        }
    },

    components: {
        LeftMenu,
    },

    mounted () {
        const that = this;

        // 创建实例
        const lf = new LogicFlow({
            container: this.$refs.diagram,
            // ... 其他的一些配置
            background: {
                // 画布背景配置
            }
        });

        
        // 存储全局对象，便于其他地方使用到 LogicFlow 实例对象
        that.lf = lf;


        // *********** 重点：注册自定义节点和边 ***************
        RegisterCustomElement(lf);

        /* 
            开启渲染
            如果不要模拟数据，直接使用 lf.render() 即可。
        **/
        lf.render(this.mockData);

        // 渲染到视图中心为止，否则在左上角显示
        lf.translateCenter();
    },

    methods: {
        // 拖拽节点
        $_dragInNode(data) {
            const that = this;
            that.lf.dnd.startDrag({
                ...data,
            });
        },
    }
})

</script>

基础效果

稍微修改一下之前的mock数据，如下所示：

到这里的时候，就能够看得出效果了，左测是之前的边（polyline），右侧是自定义边（EDGE_BEZIER）

到这里，我们的目的基本就达成了，接下来修改线条的颜色等配置

接下来的所有的改动都是基于 Bezier.js 文件内容进行修改。

Bezier.js 配置修改

启动动画

在 Bezier.js 文件中通过 setAttributes 函数让边动起来，形成有流动效果，因为这里是截图，所以看不出来，自己可以在项目中尝试。

class Model extends BezierEdgeModel {
  constructor (data, graphModel) {
    super(data, graphModel);
  }
	
  setAttributes() {
  	// 启动动画
    this.isAnimation = true;
  }

}

如下效果：

结语

其他的一些配置修改，这里就不过多赘述，自己根据官网描述自行尝试。
如果对你还有点作用，请点赞，收藏。