LogicFlow自定义边（Edge）

最新推荐文章于 2025-04-03 09:40:15 发布

置顶

前端小鑫同学

最新推荐文章于 2025-04-03 09:40:15 发布

阅读量1.8k

点赞数 27

CC 4.0 BY-SA版权

分类专栏： LogicFlow专栏文章标签： edge 前端 javascript

本文链接：https://blog.csdn.net/fesermon/article/details/128541346

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

1. 准备工作：

1. 初始化项目：

1.1 初始化环境：

使用pnpm create vite创建项目，选择Vue框架及TypeScript变体；

1.2 安装核心模块：

安装核心模块：pnpm add @logicflow/core；

2. 初始化容器及LogicFlow对象：

2.1 准备容器：

准备一个container容器，并通过css初始化容器的尺寸；

<template>
  <div ref="container" class="container"></div>
</template>

<style scoped>
.container {
   
   
  width: 500px;
  height: 400px;
}
</style>

2.2 导入模块：

导入LogicFlow和对应的样式依赖模块；

<script setup lang="ts">
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
</script>

2.3 实例化&渲染：

在onMounted后对LogicFlow对象实例化并进行渲染，为了能看到初始容器建议开启grid选项；

<script setup lang="ts">
import {
   
    onMounted, ref } from "vue";

const container = ref();
const lf = ref<LogicFlow>();

onMounted(() => {
   
   
  lf.value = new LogicFlow({
   
   
    container: container.value,
    grid: true,
  })
  lf.value.render();
})
</script>

2.4 预览效果：

启动项目后在浏览器访问即可看到这个500*400的点阵图，这个就是后面绘制节点的区域；

2. 自定义边（Edge）：

2.1 准备自定义模板：

准备自定义边（Edge）模板，分别继承PolygonNode和PolylineEdgeModel并导出type、view和model三个选项：

import {
   
    PolylineEdge, PolylineEdgeModel } from "@logicflow/core";

class CustomEdgeNode extends PolylineEdge {
   
   
	// 官网指示：由于边的编辑复杂度问题，绝大多数情况下，自定义边时不推荐自定义view
}

class CustomEdgeModel extends PolylineEdgeModel {
   
   

}

export default {
   
   
    type: "CustomEdge"