alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(pathfinding-edge): update README.md

Browse Source
This commit is contained in:
Braks
2022-05-22 22:46:47 +02:00
parent 728d27c689
commit e847e2cb3f
1 changed files with 11 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/pathfinding-edge/README.md
+11 -25
View File
@@ -1,15 +1,6 @@
# Vue Flow Pathfinding Edge 🧲 # Vue Flow Pathfinding Edge 🧲
![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/vue-flow-pathfinding-edge) ### Custom Edge that avoids crossing other Nodes
[![dependencies Status](https://status.david-dm.org/gh/bcakmakoglu/vue-flow-pathfinding-edge.svg)](https://david-dm.org/bcakmakoglu/vue-flow-pathfinding-edge)
[![devDependencies Status](https://status.david-dm.org/gh/bcakmakoglu/vue-flow-pathfinding-edge.svg?type=dev)](https://david-dm.org/bcakmakoglu/vue-flow-pathfinding-edge?type=dev)
![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/bcakmakoglu/vue-flow-pathfinding-edge)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/vue-flow-pathfinding-edge)
![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/vue-flow-pathfinding-edge)
### **Custom Edge that avoids crossing other Nodes**
Check the [documentation](https://vueflow.dev/docs/addons/pathfinding) for more info on how to use this custom edge.
## 🛠 Setup ## 🛠 Setup
@@ -24,26 +15,20 @@ $ npm i --save @braks/vue-flow-pathfinding-edge
## 🎮 Quickstart ## 🎮 Quickstart
```vue ```vue
<script lang="ts" setup> <script setup>
import { import { VueFlow, useVueFlow } from '@braks/vue-flow'
VueFlow,
Elements,
useVueFlow
} from '@braks/vue-flow'
import { PathFindingEdge } from '@braks/vue-flow-pathfinding-edge' import { PathFindingEdge } from '@braks/vue-flow-pathfinding-edge'
import initialElements from './initial-elements' import initialElements from './initial-elements'
const elements = ref<Elements>(initialElements) const elements = ref(initialElements)
// create a new context so we can fetch nodes // create a new context so we can fetch nodes
const { getNodes } = useVueFlow({ const { getNodes } = useVueFlow()
modelValue: elements.value
})
</script> </script>
<template> <template>
<div style="height: 300px"> <div style="height: 300px">
<VueFlow> <VueFlow v-model="elements">
<template #edge-pathFinding="props"> <template #edge-pathfinding="props">
<PathFindingEdge v-bind="props" :nodes="getNodes" /> <PathFindingEdge v-bind="props" :nodes="getNodes" />
</template> </template>
</VueFlow> </VueFlow>
@@ -51,8 +36,8 @@ const { getNodes } = useVueFlow({
</template> </template>
``` ```
```typescript ```js
// initial-elements.ts // initial-elements.js
export default [ export default [
{ {
id: '1', id: '1',
@@ -76,7 +61,8 @@ export default [
target: '2', target: '2',
label: 'Smart Edge', label: 'Smart Edge',
style: { stroke: 'red' }, style: { stroke: 'red' },
type: 'pathFinding' // assign pathfinding edge type
type: 'pathfinding'
}, },
] ]
``` ```