vue LogicFlow自定义边实现示例详解

下面是对“vue LogicFlow自定义边实现示例详解”的完整攻略。

一、前言

Vue LogicFlow 是一个基于 Vue.js 的流程图库，它提供了许多丰富的功能和组件，例如节点、连线、锚点等。其中，连线是流程图中不可或缺的一个元素，Vue LogicFlow 可以自定义连线，本文将详细讲解如何实现自定义边。

二、实现自定义边

2.1 边类型定义

在 Vue LogicFlow 中，边的类型有默认的直线连线，而自定义边需要在连线类型定义中指定 {type: 'custom'}，并指定渲染函数 render 和计算路径的函数 getPath，如下所示：

const customEdgeType = {
  type: 'custom',
  render(h, { model }) {
    return h('path', {
      attrs: {
        stroke: '#333',
        fill: 'none',
        'stroke-width': 2,
        d: model.path
      }
    })
  },
  getPath({ startPoint, endPoint }) {
    const hGap = Math.abs(endPoint.x - startPoint.x)

    const startPointCenter = {
      x: startPoint.x,
      y: startPoint.y + hGap / 2
    }

    const endPointCenter = {
      x: endPoint.x,
      y: endPoint.y - hGap / 2
    }

    return `M${startPoint.x},${startPoint.y} L${startPointCenter.x},${startPointCenter.y} L${endPointCenter.x},${endPointCenter.y} L${endPoint.x},${endPoint.y}`
  }
}

Vue.use(LogitFlow, {
  edgeTypes: [customEdgeType]
})

2.2 实现连线拖动和释放

在开始连线的时候，需要监听 Vue LogicFlow 触发的 edge:dragstart 事件和拖动结束的 edge:dragend 事件。在监听事件中，我们需要记录起始节点和终止节点 startNode、endNode 和其锚点的编号 startAnchor、endAnchor。具体实现如下：

// 记录起始边和终止边
let startNode
let endNode
let startAnchor
let endAnchor

// 监听连线拖动开始事件
lf.on('edge:dragstart', ({ data, x, y }) => {
  if (data.type !== 'custom') {
    return
  }

  const point = lf.clientToCanvas({ x, y })

  // 检测是否拖动到节点上面
  const node = lf.getIntersectElements(point, [NODE_TYPE])[0]

  if (!node) {
    return
  }

  startNode = node
  startAnchor = lf.getAnchorInfo(node, point)

  // 创建临时边
  const edge = lf.createEdge({
    type: 'custom'
  })

  // 设置临时边起始点
  edge.setEndpoint({ x: point.x, y: point.y })

  lf.add(edge)
})

// 监听连线拖动结束事件
lf.on('edge:dragend', ({ data, x, y }) => {
  if (data.type !== 'custom') {
    return
  }

  const point = lf.clientToCanvas({ x, y })

  // 检测是否拖动到节点上面
  const node = lf.getIntersectElements(point, [NODE_TYPE])[0]

  if (!node) {
    lf.remove(lf.edges[l.focusedEdgeIndex])
    return
  }

  endNode = node
  endAnchor = lf.getAnchorInfo(node, point)

  // 更新临时边
  const edge = lf.edges[lf.focusedEdgeIndex]

  edge.setEndpoint(endAnchor)

  // 如果起始节点和结束节点相同，则删除连线
  if (startNode === endNode) {
    lf.remove(edge)
    return
  }

  // 连接起始节点和结束节点
  edge.setModel({
    sourceNodeId: startNode.id,
    sourceNodeAnchor: startAnchor.anchorIndex,
    targetNodeId: endNode.id,
    targetNodeAnchor: endAnchor.anchorIndex
  })

  lf.emit('custom-edge:add', edge.getModel())
})

2.3 创建自定义连线组件

为了方便使用自定义连线，在 Vue LogicFlow 中创建自定义连线组件，组件需要绑定双向数据，传入连线的类型、路径和起始节点信息等。组件代码如下：

Vue.component('CustomEdge', {
  props: {
    model: Object,
    selected: Boolean,
    hover: Boolean,
    edgeType: String,
    ...
  },
  computed() {
    path() {
      return this.model.path
    }
  },
  ...
});

2.4 使用示例

最后，我们使用一个具体的示例，说明如何完成 Vue LogicFlow 自定义边的实现。

下面是一个示例，其中 lf 是 Vue LogicFlow 实例：

lf.addNode({/* node info */})
lf.addNode({/* node info */})
lf.addNode({/* node info */})
lf.addNode({/* node info */})

lf.on('custom-edge:add', ({ sourceNodeId, targetNodeId, sourceNodeAnchor, targetNodeAnchor }) => {
  console.log(`连线：${sourceNodeId}(${sourceNodeAnchor}) -> ${targetNodeId}(${targetNodeAnchor})`)
})

以上就是 Vue LogicFlow 自定义边实现的详细攻略，希望对你有所帮助。