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

docs: fix dead links

Browse Source
This commit is contained in:
braks
2022-08-01 21:10:14 +02:00
committed by Braks
parent f2b169145c
commit af78b52233
16 changed files with 165 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/guide/node.md
+32 -32
View File
@@ -5,10 +5,10 @@ Nodes are the building blocks of your graph. They represent any sort of data you
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](/typedocs/interfaces/XYPosition.html/).</span>
a [xy-position](/typedocs/interfaces/XYPosition).</span>
Anything else is optional.
You can check the full options for a node element [here](/typedocs/interfaces/Node.html/).
You can check the full options for a node element [here](/typedocs/interfaces/Node).
## Usage
@@ -51,8 +51,8 @@ export default defineComponent({
```
For more advanced graphs that require more state access you will want to use the useVueFlow composable.
[useVueFlow](/typedocs/functions/useVueFlow.html/) will provide
you with an [`addNodes`](/typedocs/interfaces/Actions.html#addnodes/) utility function, which you can use to add nodes
[useVueFlow](/typedocs/functions/useVueFlow) will provide
you with an [`addNodes`](/typedocs/interfaces/Actions#addnodes) utility function, which you can use to add nodes
directly to the state.
```vue
@@ -88,9 +88,9 @@ onMounted(() => {
</template>
```
You can also apply changes using the [`applyNodeChanges`](/typedocs/interfaces/Actions.html#applynodechanges/) utility
You can also apply changes using the [`applyNodeChanges`](/typedocs/interfaces/Actions#applynodechanges/) utility
function,
which expects an array of [changes](/typedocs/types/NodeChange.html/) to be applied to the currently stored nodes.
which expects an array of [changes](/typedocs/types/NodeChange) to be applied to the currently stored nodes.
```vue{11,17-22}
<script setup>
@@ -124,7 +124,7 @@ onMounted(() => {
</template>
```
## [Default Node-Types](/typedocs/types/DefaultNodeTypes.html/)
## [Default Node-Types](/typedocs/types/DefaultNodeTypes)
Vue Flow comes with built-in nodes that you can use right out of the box.
These node types include `default`, `input` and `output`.
@@ -264,7 +264,7 @@ const elements = ref([
```
::: tip
You can find a more advanced example [here](/examples/custom-node.html/).
You can find a more advanced example [here](/examples/nodes/).
:::
### Node Template
@@ -305,33 +305,33 @@ const elements = ref([
</template>
```
### [(Custom) Node Props](/typedocs/interfaces/NodeProps.html/)
### [(Custom) Node Props](/typedocs/interfaces/NodeProps)
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
your nodes receive the following props:
| Name | Definition | Type | Optional |
|------------------|--------------------------------------------------|------------------------------------------------------------------|----------|
| id | Node id | string | false |
| type | Node type | string | false |
| selected | Is node selected | boolean | false |
| dragging | Is node dragging | boolean | false |
| connectable | Is node connectable | boolean | false |
| position | Relative position of a node | [XYPosition](/typedocs/interfaces/XYPosition.html/) | false |
| zIndex | Node z-index | number | false |
| dimensions | Node size | [Dimensions](/typedocs/interfaces/Dimensions.html) | false |
| data | Custom data object | Any object | true |
| events | Node events and custom events | [NodeEventsOn](/typedocs/types/NodeEventsOn.html/) | true |
| label | Node label | string, Component | true |
| isValidTargetPos | Called when target handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc.html/) | true |
| isValidSourcePos | Called when source handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc.html/) | true |
| parentNode | Parent node id | string | true |
| targetPosition | Target handle position | [Position](/typedocs/enums/Position.html/) | true |
| sourcePosition | Source handle position | [Position](/typedocs/enums/Position.html/) | true |
| dragHandle | Node drag handle class | string | true |
| Name | Definition | Type | Optional |
|------------------|--------------------------------------------------|------------------------------------------------------------|----------|
| id | Node id | string | false |
| type | Node type | string | false |
| selected | Is node selected | boolean | false |
| dragging | Is node dragging | boolean | false |
| connectable | Is node connectable | boolean | false |
| position | Relative position of a node | [XYPosition](/typedocs/interfaces/XYPosition) | false |
| zIndex | Node z-index | number | false |
| dimensions | Node size | [Dimensions](/typedocs/interfaces/Dimensions) | false |
| data | Custom data object | Any object | true |
| events | Node events and custom events | [NodeEventsOn](/typedocs/types/NodeEventsOn) | true |
| label | Node label | string, Component | true |
| isValidTargetPos | Called when target handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc) | true |
| isValidSourcePos | Called when source handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc) | true |
| parentNode | Parent node id | string | true |
| targetPosition | Target handle position | [Position](/typedocs/enums/Position) | true |
| sourcePosition | Source handle position | [Position](/typedocs/enums/Position) | true |
| dragHandle | Node drag handle class | string | true |
### [(Custom) Node Events](/typedocs/interfaces/NodeEvents.html/)
### (Custom) Node Events
In addition to the event handlers that you can access through [`useVueFlow`](/guide/composables#useVueFlow/) or the Vue
Flow component,
@@ -364,7 +364,7 @@ const elements = ref([
As you can see above, you can also pass in custom event handlers. These will not be called by Vue Flow but can be used
to forward callback functions to your custom components.
The `click` handler is part of the [`NodeEventsHandler`](/typedocs/types/NodeEventsHandler.html) interface, meaning it
The `click` handler is part of the [`NodeEventsHandler`](/typedocs/types/NodeEventsHandler) interface, meaning it
will be
triggered when the node is clicked.
@@ -398,7 +398,7 @@ props.events.customEvent('custom event triggered')
## Styling
::: tip
To overwrite default theme styles check the [Theming section](/guide/theming.html).
To overwrite default theme styles check the [Theming section](/guide/theming).
:::
### Custom Nodes
@@ -423,7 +423,7 @@ By adding this class you can also enable scrolling inside a node.
### Dynamic handle positions / Adding handles dynamically
When working with dynamic handle positions or adding handles dynamically, you need to use
the [`updateNodeInternals`](/typedocs/types/UpdateNodeInternals.html/) method.
the [`updateNodeInternals`](/typedocs/types/UpdateNodeInternals) method.
You need to call this method otherwise your node will not respond to the new handles and edges will be
misaligned.