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

chore(resize-rotate-node): update README.md

Browse Source
This commit is contained in:
Braks
2022-05-22 22:46:47 +02:00
parent 8246e6e8d3
commit 728d27c689
1 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/resize-rotate-node/README.md
+40 -38
View File
@@ -1,82 +1,84 @@
# Vue Flow Pathfinding Edge 🧲 # Vue Flow Resizable Rotatable Node
![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/vue-flow-pathfinding-edge) ### Custom Node that can be resized and rotated
[![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
```bash ```bash
# install # install
$ yarn add @braks/vue-flow-pathfinding-edge $ yarn add @braks/vue-flow-resize-rotate-node
# or # or
$ npm i --save @braks/vue-flow-pathfinding-edge $ npm i --save @braks/vue-flow-resize-rotate-node
``` ```
## 🎮 Quickstart ## 🎮 Quickstart
```vue ```vue
<script lang="ts" setup>
import { <script setup>
VueFlow, import { VueFlow } from '@braks/vue-flow'
Elements, import { ResizeRotateNode } from '@braks/vue-flow-resize-rotate-node'
useVueFlow
} from '@braks/vue-flow'
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
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 #node-resize-rotate="props">
<PathFindingEdge v-bind="props" :nodes="getNodes" /> <ResizeRotateNode v-bind="props" />
</template> </template>
</VueFlow> </VueFlow>
</div> </div>
</template> </template>
``` ```
```typescript ```js
// initial-elements.ts // initial-elements.js
export default [ export default [
{ {
id: '1', id: '1',
label: 'Node 1', label: 'Node 1',
type: 'resize-rotate',
targetPosition: 'left',
sourcePosition: 'right',
position: { position: {
x: 430, x: 0,
y: 0, y: 0,
}, },
data: {
// additional styles for the node
// cannot use the regular style tag as those apply to the node wrapper
style: {
background: 'rgb(255, 0, 114) none repeat scroll 0% 0%',
padding: '20px',
borderRadius: '20px',
},
},
}, },
{ {
id: '2', id: '2',
label: 'Node 2', label: 'Node 2',
type: 'resize-rotate',
targetPosition: 'left',
position: { position: {
x: 230, x: 330,
y: 90, y: 50,
},
data: {
style: {
background: 'rgb(50, 188, 188) none repeat scroll 0% 0%',
padding: '20px',
borderRadius: '20px',
},
}, },
}, },
{ {
id: 'e12', id: 'e1-2',
source: '1', source: '1',
target: '2', target: '2',
label: 'Smart Edge', type: 'smoothstep',
style: { stroke: 'red' },
type: 'pathFinding'
}, },
] ]
``` ```