Logicflow edge自定义类型 控制cursor

环境为1.2.3 一开始我通过修改model来实现 发现无论怎么修改都是小手的符号

import { LineEdgeModel } from "@logicflow/core";

class CustomEdgeModel extends LineEdgeModel { 
   setAttribus(){
       const {properties} = this;
       // 通过properties中传值来控制鼠标样式
   }
}

通过查看html结构发现每个edge上都有一个lf-adge-append用于在 Edge 上添加额外图形或标记的插件。只需要修改自定义样式的view即可。

import { ref } from "vue";
import { LineEdge } from "@logicflow/core";

class CustomEdgeView extends LineEdge { 
    // 图省事可以直接隐藏 也可以通过this.props.model.properties中传值来控制鼠标样式
    getAppend() { return h("g", {}, []); } 
}

// 后续正常注册即可
export default { 
    type: "CustomEdge", 
    view: CustomEdgeView, 
    model: CustomEdgeModel,
};

使用也很简单了

// 此处只写核心代码
{
    id:'',
    sourceNodeId:'',
    targetNOdeId:'',
    type:'CustomEdge',
    startPoint:{
        x:0,
        y:0,
    },
    endPoint:{
        x:10,
        y:10,
    },
    properties:{
        xxxx// 需要传入的值
    }
}