Vue Flow Pathfinding Edge 🧲
Custom Edge that never crosses other Nodes
Check the documentation for more info on how to use this custom edge.
🛠 Setup
$ yarn add @braks/vue-flow-pathfinding-edge
$ 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)
useVueFlow({
edgeTypes: {
pathFinding: PathFindingEdge
}
})
</script>
<template>
<div style="height: 300px">
<VueFlow v-model="elements" />
</div>
</template>
export default [
{
id: '1',
data: {
label: 'Node 1',
},
position: {
x: 430,
y: 0,
},
},
{
id: '2',
data: {
label: 'Node 2',
},
position: {
x: 230,
y: 90,
},
},
{
id: 'e12',
source: '1',
target: '2',
label: 'Smart Edge',
style: { stroke: 'red' },
type: 'pathFinding'
},
]