索引

edges边

边指的是图形之间的连线

内置边

和节点一样，LogicFlow 也内置一些基础的边。LogicFlow 的内置边包括:

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

js

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

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

开启两端的调整连线功能

js

const lf = new LogicFlow({
  container: document.querySelector("#app"),
  grid: true,
  adjustEdgeStartAndEnd: true, // 开启两端的调整连线功能
});

const lf = new LogicFlow({
  container: document.querySelector("#app"),
  grid: true,
  adjustEdgeStartAndEnd: true, // 开启两端的调整连线功能
});

切换边的类型

js

   $_changeLineType(value) {
      const {lf, activeEdges} = this.$props
      const {graphModel} = lf
      // 更改新建边的类型
      lf.setDefaultEdgeType(value)
      if(activeEdges && activeEdges.length > 0) {
        // 根据所有id切换边的类型
        activeEdges.forEach(edge => {
          graphModel.changeEdgeType(edge.id, value)
        })
      }
    }

   $_changeLineType(value) {
      const {lf, activeEdges} = this.$props
      const {graphModel} = lf
      // 更改新建边的类型
      lf.setDefaultEdgeType(value)
      if(activeEdges && activeEdges.length > 0) {
        // 根据所有id切换边的类型
        activeEdges.forEach(edge => {
          graphModel.changeEdgeType(edge.id, value)
        })
      }
    }