当前位置: 首页 > news >正文

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值

http://www.dtcms.com/a/109844.html

相关文章:

  • Linux:进程信号
  • 【编程之路】动态格式化字符串
  • 【堆】《深入剖析优先级队列(堆):数据结构与算法的高效搭档》
  • KUKA机器人查看运行日志的方法
  • Layout Inspector平替跨平台布局分析器のAppium Inspector
  • NineData云原生智能数据管理平台新功能发布|2025年3月版
  • Java学习总结-递归-递归寻找文件绝对路径
  • 全连接RNN反向传播梯度计算
  • RHCSA Linux系统 指令如何使用
  • K8S学习之基础七十四:部署在线书店bookinfo
  • RuoYi-Vue-Plus 安装Minio 实现文件上传
  • 【gdutthesis模板】论文标题太长导致换页问题解决
  • CyclicBarrier、Semaphore、CountDownLatch的区别,适用场景
  • Vue3 Pinia Store使用示例
  • Linux 系统管理综合实训 —— 基于 NAT 模式的多 IP 配置、Nginx 服务部署及存储管理
  • 一周学会Pandas2 Python数据处理与分析-安装Pandas库
  • 在Vue3中格式化后端返回的Java Date类型数据为指定格式
  • 蓝桥杯真题———k倍区间
  • Android开发okhttp添加头部参数
  • 智能建造新范式:装配式建筑 4.0 的数字化进阶
  • SpringBoot集成Redis 灵活使用 TypedTuple 和 DefaultTypedTuple 实现 Redis ZSet 的复杂操作
  • Vue3 性能优化指南:从理论到实战
  • N皇后问题(dfs回溯)
  • 如何把网页文章转为pdf保存
  • 计算机网络基础:容灾备份与业务连续性保障
  • 在 Ubuntu 上离线安装 Prometheus 和 Grafana
  • GMS测试环境搭建二——aapt2报错
  • Kafka配置内外网访问(解决kafka外网访问broker超时)
  • Pytorch中预置数据集的加载方式
  • 斜方肌科学训练原则:上斜方肌多牵拉放松,中下斜方肌多锻炼强健。 | 告别圆肩驼背、“富贵包”