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

docs: Move node docs into single page

Browse Source
This commit is contained in:
Braks
2022-04-04 21:42:48 +02:00
parent 01deaeb3ed
commit efa75839f9
7 changed files with 197 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/.vuepress/config.ts
+1 -12
View File
@@ -68,18 +68,7 @@ export default defineUserConfig<DefaultThemeOptions>({
'/guide/': [ '/guide/': [
{ {
text: 'Guide', text: 'Guide',
children: [ children: ['/guide/', '/guide/getting-started', '/guide/theming', '/guide/config', '/guide/state', '/guide/node.md'],
'/guide/',
'/guide/getting-started',
'/guide/theming',
'/guide/state',
{
text: 'Nodes',
link: '/guide/node/',
activeMatch: '^/guide/node/',
children: ['/guide/node/defaults', '/guide/node/custom', '/guide/node/styling'],
},
],
}, },
], ],
'/examples/': [ '/examples/': [
docs/src/guide/config.md
+2
View File
@@ -0,0 +1,2 @@
# Config
docs/src/guide/node/custom.md → docs/src/guide/node.md
+192 -2
View File
@@ -1,4 +1,170 @@
# Custom Nodes # Nodes
Nodes are the building blocks of your graph. They represent any sort of data you want to present in your graph.
They can exist on their own but can be connected to each other with edges to create a map.
Each node <span class="font-bold text-blue-500">requires a unique id and
a [xy-position](https://types.vueflow.dev/interfaces/XYPosition.html).</span>
Anything else is optional.
You can check the full options for a node element in the TypeDocs [here](https://types.vueflow.dev/interfaces/Node.html).
## Usage
Generally you create nodes by adding them to the model-value or the nodes prop of the Vue Flow component.
```vue:no-line-numbers
<script>
import { VueFlow } from '@braks/vue-flow'
export default defineComponent({
components: { VueFlow },
data() {
return {
elements: [
{
id: '1',
position: { x: 50, y: 50 },
label: 'Node 1',
}
]
}
},
mounted() {
// Add an element after mount
this.elements.push(
{
id: '2',
position: { x: 150, y: 50 },
label: 'Node 2',
}
)
}
})
</script>
<template>
<div style="height: 300px">
<VueFlow v-model="elements" />
</div>
</template>
```
For more
advanced graphs that require more state access you will want to use the useVueFlow composable. UseVueFlow will provide
you with an
`addNodes` utility function, which you can use to add nodes directly to the state.
```vue:no-line-numbers
<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
const initialNodes = ref([
{
id: '1',
position: { x: 50, y: 50 },
label: 'Node 1',
}
])
const { addNodes } = useVueFlow({
nodes: initialNodes,
})
onMounted(() => {
// Add an element after mount
addNodes([
{
id: '2',
position: { x: 150, y: 50 },
label: 'Node 2',
}
])
})
</script>
<template>
<div style="height: 300px">
<VueFlow />
</div>
</template>
```
You can also apply changes (like removing elements safely) using the `applyNodeChanges` utility function, which expects an array of changes to be
applied to the currently stored nodes.
```vue:no-line-numbers
<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
const initialNodes = ref([
{
id: '1',
position: { x: 50, y: 50 },
label: 'Node 1',
}
])
const { applyNodeChanges } = useVueFlow({
nodes: initialNodes,
})
onMounted(() => {
// Remove an element after mount
applyNodeChanges([
{
id: '1',
type: 'remove',
}
])
})
</script>
<template>
<div style="height: 300px">
<VueFlow />
</div>
</template>
```
## Default Node-Types
Vue Flow comes with built-in nodes that you can use right out of the box.
These node types include `default`, `input` and `output`.
You can set a label on each of these types.
### Default Node
![vue flow default node](https://images.prismic.io/bcakmakoglu/235b4a10-5bdc-41c0-ba3f-4fb402fba65f_Default-node.png?auto=compress,format)
A default node comes with two handles.
It represents a branching point in your map.
You can specify the position of handles in the node definition.
```js:no-line-numbers{5-6}
const nodes = [
{
id: '1',
label: 'Node 1',
targetHandle: Position.Top, // or Bottom, Left, Right,
sourceHandle: Position.Right,
}
]
```
### Input Node
![vue flow input node](https://images.prismic.io/bcakmakoglu/fd871fe3-6c5f-4ef1-8e71-fb66d947866b_Input-node.png?auto=compress,format)
An input node has a single handle, located at the bottom by default.
It represents a starting point of your map.
### Output Node
![vue flow output node](https://images.prismic.io/bcakmakoglu/abe32a60-d0a4-40ee-a710-092570d4d128_Output-node.png?auto=compress,format)
An output node has a single handle, located at the top by default.
It represents an ending point of your map.
## Custom Nodes
In addition to the default node types from the previous chapter, you can define any amount of custom node-types. In addition to the default node types from the previous chapter, you can define any amount of custom node-types.
Node-types are inferred from your node's definition. Node-types are inferred from your node's definition.
@@ -100,7 +266,7 @@ const elements = ref([
You can find a more advanced example <router-link to="/examples/custom-node/">here</router-link>. You can find a more advanced example <router-link to="/examples/custom-node/">here</router-link>.
::: :::
## Custom Node Props ### Custom Node Props
Your custom nodes are wrapped so that the basic functions like dragging or selecting work. Your custom nodes are wrapped so that the basic functions like dragging or selecting work.
But you might want to extend on that functionality or implement your own business logic inside of nodes, therefore But you might want to extend on that functionality or implement your own business logic inside of nodes, therefore
@@ -129,3 +295,27 @@ your nodes receive the following props:
You can find the TypeDocs [here](https://types.vueflow.dev/interfaces/NodeProps.html). You can find the TypeDocs [here](https://types.vueflow.dev/interfaces/NodeProps.html).
## Styling
::: tip
To overwrite default theme styles check the [Theming section](/guide/theming/).
:::
### Custom Nodes
When you create a new node type you also need to implement some styling. Your custom node has no default styles.
```css:no-line-numbers
.vue-flow__node-custom {
background: #9CA8B3;
color: #fff;
padding: 10px;
}
```
### Allow scrolling inside a node
You can use the `noWheelClassName` prop to define a class which will prevent zoom-on-scroll or pan-on-scroll behavior on that element.
By default the `noWheelClassName` is `.nowheel`.
By adding this class you can also enable scrolling inside a node.
docs/src/guide/node/defaults.md
-40
View File
@@ -1,40 +0,0 @@
# Default Nodes
Vue Flow comes with built-in nodes that you can use right out of the box.
These node types include `default`, `input` and `output`.
You can set a label on each of these types.
## Default Node
![vue flow default node](https://images.prismic.io/bcakmakoglu/235b4a10-5bdc-41c0-ba3f-4fb402fba65f_Default-node.png?auto=compress,format)
A default node comes with two handles.
It represents a branching point in your map.
You can specify the position of handles in the node definition.
```js:no-line-numbers{5-6}
const nodes = [
{
id: '1',
label: 'Node 1',
targetHandle: Position.Top, // or Bottom, Left, Right,
sourceHandle: Position.Right,
}
]
```
## Input Node
![vue flow input node](https://images.prismic.io/bcakmakoglu/fd871fe3-6c5f-4ef1-8e71-fb66d947866b_Input-node.png?auto=compress,format)
An input node has a single handle, located at the bottom by default.
It represents a starting point of your map.
## Output Node
![vue flow output node](https://images.prismic.io/bcakmakoglu/abe32a60-d0a4-40ee-a710-092570d4d128_Output-node.png?auto=compress,format)
An output node has a single handle, located at the top by default.
It represents an ending point of your map.
docs/src/guide/node/index.md
-124
View File
@@ -1,124 +0,0 @@
# Nodes
Nodes are the building blocks of your graph. They represent any sort of data you want to present in your graph.
They can exist on their own but can be connected to each other with edges to create a map.
Each node <span class="font-bold text-blue-500">requires a unique id and
a [xy-position](https://types.vueflow.dev/interfaces/XYPosition.html).</span>
Anything else is optional.
You can check the full options for a node element in the TypeDocs [here](https://types.vueflow.dev/interfaces/Node.html).
## Usage
Generally you create nodes by adding them to the model-value or the nodes prop of the Vue Flow component.
```vue:no-line-numbers
<script>
import { VueFlow } from '@braks/vue-flow'
export default defineComponent({
components: { VueFlow },
data() {
return {
elements: [
{
id: '1',
position: { x: 50, y: 50 },
label: 'Node 1',
}
]
}
},
mounted() {
// Add an element after mount
this.elements.push(
{
id: '2',
position: { x: 150, y: 50 },
label: 'Node 2',
}
)
}
})
</script>
<template>
<div style="height: 300px">
<VueFlow v-model="elements" />
</div>
</template>
```
For more
advanced graphs that require more state access you will want to use the useVueFlow composable. UseVueFlow will provide
you with an
`addNodes` utility function, which you can use to add nodes directly to the state.
```vue:no-line-numbers
<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
const initialNodes = ref([
{
id: '1',
position: { x: 50, y: 50 },
label: 'Node 1',
}
])
const { addNodes } = useVueFlow({
nodes: initialNodes,
})
onMounted(() => {
// Add an element after mount
addNodes([
{
id: '2',
position: { x: 150, y: 50 },
label: 'Node 2',
}
])
})
</script>
<template>
<div style="height: 300px">
<VueFlow />
</div>
</template>
```
You can also apply changes (like removing elements safely) using the `applyNodeChanges` utility function, which expects an array of changes to be
applied to the currently stored nodes.
```vue:no-line-numbers
<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
const initialNodes = ref([
{
id: '1',
position: { x: 50, y: 50 },
label: 'Node 1',
}
])
const { applyNodeChanges } = useVueFlow({
nodes: initialNodes,
})
onMounted(() => {
// Remove an element after mount
applyNodeChanges([
{
id: '1',
type: 'remove',
}
])
})
</script>
<template>
<div style="height: 300px">
<VueFlow />
</div>
</template>
```
docs/src/guide/node/styling.md
-23
View File
@@ -1,23 +0,0 @@
# Styling
::: tip
To overwrite default theme styles check the [Theming section](/guide/theming/).
:::
## Custom Nodes
When you create a new node type you also need to implement some styling. Your custom node has no default styles.
```css:no-line-numbers
.vue-flow__node-custom {
background: #9CA8B3;
color: #fff;
padding: 10px;
}
```
## Allow scrolling inside a node
You can use the `noWheelClassName` prop to define a class which will prevent zoom-on-scroll or pan-on-scroll behavior on that element.
By default the `noWheelClassName` is `.nowheel`.
By adding this class you can also enable scrolling inside a node.
docs/src/guide/state.md
+1 -1
View File
@@ -89,7 +89,7 @@ If you have multiple store instances in the same context, make sure to give them
Otherwise `useVueFlow` will try to inject the first instance it can find in the current context, which would usually be the last one that has been injected. Otherwise `useVueFlow` will try to inject the first instance it can find in the current context, which would usually be the last one that has been injected.
::: :::
## Updates ## State updates
State updates like removing elements or updating positions are applied by default. State updates like removing elements or updating positions are applied by default.
If you want to strictly control state changes you can disable this behavior by setting the `applyDefault` option/prop to `false`. If you want to strictly control state changes you can disable this behavior by setting the `applyDefault` option/prop to `false`.