Check the documentation for more info on how to use this custom edge.
# install
$ yarn add @braks/vue-flow-pathfinding-edge
# or
$ npm i --save @braks/vue-flow-pathfinding-edge
<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'
},
]