LogicFlow获取锚点数据的自定义key并添加的连接的Edge边数据中

1、重写 PolylineEdgeModel 类(其它 EdgeModel 都可以)

`class CustomNetWorkNodeEdge extends PolylineEdge { } 

class CustomNetWorkNodeEdgeModel extends PolylineEdgeModel {
    getData() {
    	const data = super.getData();
        //获取开始锚点自定义属性添加到Edge (“cousetomType” 为 Anchor 锚点上自定义的key)
        data["fromAnchorType"] = this.getBeginAnchor(this.sourceNode,this.targetNode,this.sourceAnchorId).cousetomType;
        return data;
    }
}
export const customNetWorkEdge = {
    type: "coustom_edge",
    view: CustomNetWorkNodeEdge,
    model: CustomNetWorkNodeEdgeModel
};

2、判断节点是否使用自定义 edge

lf = new LogicFlow({
        container: document.getElementById("container"),
        // 其他配置
        grid: true,
        plugins: [Menu],
        edgeGenerator: (sourceNode, targetNode, currentEdge) => {
            /**
             * 起始节点类型 netWork时使用 自定义的边 coustom_edge;
             * */ 
            if (sourceNode.type === "netWork") return "coustom_edge"
        }
    })

3、注册到 lf

 lf.register(customNetWorkEdge)

连线时在 ”coustom_edge“ 上会添加锚点数据中自定义的key值

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值