vue-flow/packages/pathfinding-edge/README.md

Vue Flow Pathfinding Edge 🧲

Custom Edge that avoids crossing other Nodes

Check the documentation for more info on how to use this custom edge.

🛠 Setup

# install
$ yarn add @braks/vue-flow-pathfinding-edge

# or
$ npm i --save @braks/vue-flow-pathfinding-edge

🎮 Quickstart

<script lang="ts" setup>
import {
  VueFlow,
  Elements,
  useVueFlow
} from '@braks/vue-flow'
import { PathFindingEdge } from '@braks/vue-flow-pathfinding-edge'
import initialElements from './initial-elements'

const elements = ref<Elements>(initialElements)

// create a new context so we can fetch nodes
const { getNodes } = useVueFlow({
  modelValue: elements.value
})
</script>
<template>
  <div style="height: 300px">
    <VueFlow>
      <template #edge-pathFinding="props">
        <PathFindingEdge v-bind="props" :nodes="getNodes" />
      </template>
    </VueFlow>
  </div>
</template>

// initial-elements.ts
export default [
  {
    id: '1',
    label: 'Node 1',
    position: {
      x: 430,
      y: 0,
    },
  },
  {
    id: '2',
    label: 'Node 2',
    position: {
      x: 230,
      y: 90,
    },
  },
  {
    id: 'e12',
    source: '1',
    target: '2',
    label: 'Smart Edge',
    style: { stroke: 'red' },
    type: 'pathFinding'
  },
]