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-07-30 16:04:03 +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

24
docs/src/guide/components/background.md
View File

@@ -14,16 +14,16 @@ To use the background simply pass the `Background` component as a child to the `
</template>
```
## [Props](/typedocs/interfaces/BackgroundProps.html/)
## [Props](/typedocs/interfaces/BackgroundProps)
| Name | Definition | Type | Optional | Default |
|--------------|-------------------|--------------------------------------------------------------|----------|---------|
| variant | Pattern variant | [BackgroundVariant](/typedocs/enums/BackgroundVariant.html/) | true | dots |
| gap | Pattern gap | number | true | 10 |
| size | Pattern size | number | true | 0.4 |
| patternColor | Pattern color | string | true | #81818a |
| bgColor | Is node dragging | boolean | true | #fff |
| height | Background height | number | true | 100 |
| width | Background width | number | true | 100 |
| x | X-offset | number | true | 0 |
| y | Y-offset | number | true | 0 |
| Name | Definition | Type | Optional | Default |
|--------------|-------------------|--------------------------------------------------------|----------|---------|
| variant | Pattern variant | [BackgroundVariant](/typedocs/enums/BackgroundVariant) | true | dots |
| gap | Pattern gap | number | true | 10 |
| size | Pattern size | number | true | 0.4 |
| patternColor | Pattern color | string | true | #81818a |
| bgColor | Is node dragging | boolean | true | #fff |
| height | Background height | number | true | 100 |
| width | Background width | number | true | 100 |
| x | X-offset | number | true | 0 |
| y | Y-offset | number | true | 0 |

2
docs/src/guide/components/control-button.md
View File

@@ -4,7 +4,7 @@ You can use the existing `ControlButton` component to create new control buttons
## Usage
To use the component pass the `ControlButton` component as a child to the [`Controls`](/guide/components/control-button.html/) component.
To use the component pass the `ControlButton` component as a child to the [`Controls`](/guide/components/control-button) component.
```vue
<template>

4
docs/src/guide/components/controls.md
View File

@@ -14,7 +14,7 @@ To use the controls simply pass the `Controls` component as a child to the `VueF
</template>
```
## [Props](/typedocs/interfaces/ControlProps.html/)
## [Props](/typedocs/interfaces/ControlProps)
| Name | Definition | Type | Optional | Default |
|-----------------|---------------------------|------------------------------------------------------|----------|---------|
@@ -22,7 +22,7 @@ To use the controls simply pass the `Controls` component as a child to the `VueF
| showFitView | Show fit-view btn | boolean | true | true |
| showInteractive | Show lock interactive btn | boolean | true | true |
| showZoom | Show zoom button | boolean | true | true |
| fitViewParams | Params to use on fit-view | [FitViewParams](/typedocs/types/FitViewParams.html/) | true | - |
| fitViewParams | Params to use on fit-view | [FitViewParams](/typedocs/types/FitViewParams) | true | - |
## Emits

8
docs/src/guide/components/minimap-node.md
View File

@@ -5,7 +5,7 @@ You can use it to add an icon to your node, or to add a custom tooltip etc.
## Usage
To use the component pass the `MiniMapNode` as a child to the [`MiniMap`](/guide/components/minimap.html/) component.
To use the component pass the `MiniMapNode` as a child to the [`MiniMap`](/guide/components/minimap) component.
```vue
<template>
@@ -19,7 +19,7 @@ To use the component pass the `MiniMapNode` as a child to the [`MiniMap`](/guide
</template>
```
## [Props](/typedocs/interfaces/MiniMapNodeProps.html/)
## [Props](/typedocs/interfaces/MiniMapNodeProps)
| Name | Definition | Type | Optional | Default |
|----------------|---------------------------------|-----------------------------------------------------|----------|---------|
@@ -27,8 +27,8 @@ To use the component pass the `MiniMapNode` as a child to the [`MiniMap`](/guide
| parentNode | Parent node id | string | true | - |
| selected | Is node selected | boolean | true | false |
| dragging | Is node dragging | boolean | true | false |
| position | XY position of node | [XYPosition](/typedocs/interfaces/XYPosition.html/) | false | - |
| dimensions | Node dimensions | [Dimensions](/typedocs/interfaces/Dimensions.html/) | false | - |
| position | XY position of node | [XYPosition](/typedocs/interfaces/XYPosition) | false | - |
| dimensions | Node dimensions | [Dimensions](/typedocs/interfaces/Dimensions) | false | - |
| borderRadius | MiniMap node css border-radius | number | true | - |
| color | MiniMap node css color | string | true | - |
| shapeRendering | MiniMap node css shapeRendering | ShapeRendering | true | - |

10
docs/src/guide/components/minimap.md
View File

@@ -12,13 +12,13 @@ To use the minimap simply pass the `MiniMap` component as a child to the `VueFlo
</template>
```
## [Props](/typedocs/interfaces/MiniMapProps.html/)
## [Props](/typedocs/interfaces/MiniMapProps)
| Name | Definition | Type | Optional | Default |
|------------------|--------------------------|------------------------------------------------------------------|----------|-------------------------|
| nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc.html/) | true | #fff |
| nodeStrokeColor | Border color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc.html/) | true | #555 |
| nodeClassName | Extra classes | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc.html/) | true | - |
| nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #fff |
| nodeStrokeColor | Border color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #555 |
| nodeClassName | Extra classes | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | - |
| nodeBorderRadius | Border radius | number | true | 5 |
| nodeStrokeWidth | Stroke width | number | true | 2 |
| maskColor | Minimap Background color | string | true | rgb(240, 242, 243, 0.7) |
@@ -27,4 +27,4 @@ To use the minimap simply pass the `MiniMap` component as a child to the `VueFlo
| Name | Definition | Props | Default |
|---------------------|-------------------|-----------------------------------------------------------------|-----------------------------------------------------|
| `node-${node.type}` | MiniMap Node slot | [MiniMapNodeProps](/typedocs/interfaces/MiniMapNodeProps.html/) | [MiniMapNode](/guide/components/minimap-node.html/) |
| `node-${node.type}` | MiniMap Node slot | [MiniMapNodeProps](/typedocs/interfaces/MiniMapNodeProps) | [MiniMapNode](/guide/components/minimap-node) |

6
docs/src/guide/composables.md
View File

@@ -1,6 +1,6 @@
# Composables
## [useVueFlow](/typedocs/functions/useVueFlow.html/)
## [useVueFlow](/typedocs/functions/useVueFlow)
If you're using the options API of Vue you will soon notice that your access to the state of Vue Flow is limited.
@@ -37,7 +37,7 @@ onMounted(() => {
`useVueFlow` exposes basically the whole internal state.
The values are reactive, meaning changing the state values returned from `useVueFlow` will trigger changes in the graph.
## [useZoomPanHelper](/typedocs/functions/useZoomPanHelper.html/)
## [useZoomPanHelper](/typedocs/functions/useZoomPanHelper)
::: warning [deprecated]
All functions of `useZoomPanHelper` are also available in `useVueFlow`.
@@ -60,7 +60,7 @@ const { fitView } = useZoomPanHelper()
</template>
```
## [useHandle](/typedocs/functions/useHandle.html/)
## [useHandle](/typedocs/functions/useHandle)
Instead of using the Handle component you can use the useHandle composable to create your own custom nodes. `useHandle`
provides you with a mouseDown- and click-handler functions that you can apply to the element you want to use as a

78
docs/src/guide/edge.md
View File

@@ -7,7 +7,7 @@ They cannot exist on their own and need nodes to which they are connected.
Each edge <span class="font-bold text-blue-500">requires a unique id, a source node and a target node id.</span>
Anything else is optional.
You can check the full options for an edge element in the TypeDocs [here](/typedocs/interfaces/Edge.html/).
You can check the full options for an edge element in the TypeDocs [here](/typedocs/interfaces/Edge).
## Usage
@@ -55,8 +55,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 [`addEdges`](/typedocs/interfaces/Actions.html#addedges/) utility function, which you can use to add edges
[useVueFlow](/typedocs/functions/useVueFlow) will provide
you with an [`addEdges`](/typedocs/interfaces/Actions#addedges/) utility function, which you can use to add edges
directly to the state.
```vue
@@ -99,10 +99,10 @@ onMounted(() => {
```
You can also apply changes (like removing elements safely) using
the [`applyEdgeChanges`](/typedocs/interfaces/Actions.html#applyedgechanges/) utility function, which expects an array
of [changes](/typedocs/types/EdgeChange.html/) to be applied to the currently stored edges.
the [`applyEdgeChanges`](/typedocs/interfaces/Actions#applyedgechanges/) utility function, which expects an array
of [changes](/typedocs/types/EdgeChange) to be applied to the currently stored edges.
## [Default Edge-Types](/typedocs/types/DefaultEdgeTypes.html/)
## [Default Edge-Types](/typedocs/types/DefaultEdgeTypes)
Vue Flow comes with built-in edges that you can use right out of the box.
These edge types include `default` (bezier), `step`, `smoothstep` and `straight`.
@@ -245,7 +245,7 @@ import { markRaw } from 'vue'
import CustomEdge from './CustomEdge.vue'
const edgeTypes = {
custom: markRaw(CustomNode),
custom: markRaw(CustomEdge),
}
const elements = ref([
@@ -318,45 +318,45 @@ const elements = ref([
</template>
```
### [Custom Edge Props](/typedocs/interfaces/EdgeProps.html/)
### [Custom Edge Props](/typedocs/interfaces/EdgeProps)
Your custom edges are wrapped so that the basic functions like selecting work.
But you might want to extend on that functionality or implement your own business logic inside of edges, therefore
your edges receive the following props:
| Name | Definition | Type | Optional |
|---------------------|-------------------------------|----------------------------------------------------|----------|
| id | Edge id | string | false |
| source | The source node id | string | false |
| target | The target node id | string | false |
| sourceNode | The source node | GraphNode | false |
| targetNode | The target node | GraphNode | false |
| sourceX | X position of source handle | number | false |
| sourceY | Y position of source handle | number | false |
| targetX | X position of target handle | number | false |
| targetY | Y position of target handle | number | false |
| type | Edge type | string | true |
| sourceHandleId | Source handle id | string | true |
| targetHandleId | Target handle id | string | true |
| data | Custom data object | Any object | true |
| events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn.html/) | true |
| label | Edge label | string, Component | true |
| labelStyle | Additional label styles | CSSProperties | true |
| labelShowBg | Enable/Disable label bg | boolean | true |
| labelBgPadding | Edge label bg padding | number | true |
| labelBgBorderRadius | Edge label bg border radius | number | true |
| selected | Is edge selected | boolean | true |
| animated | Is edge animated | boolean | true |
| updatable | Is edge updatable | boolean | true |
| markerStart | Edge marker id | string | true |
| markerEnd | Edge marker id | string | true |
| curvature | Edge path curvature | number | true |
| Name | Definition | Type | Optional |
|---------------------|-------------------------------|----------------------------------------------|----------|
| id | Edge id | string | false |
| source | The source node id | string | false |
| target | The target node id | string | false |
| sourceNode | The source node | GraphNode | false |
| targetNode | The target node | GraphNode | false |
| sourceX | X position of source handle | number | false |
| sourceY | Y position of source handle | number | false |
| targetX | X position of target handle | number | false |
| targetY | Y position of target handle | number | false |
| type | Edge type | string | true |
| sourceHandleId | Source handle id | string | true |
| targetHandleId | Target handle id | string | true |
| data | Custom data object | Any object | true |
| events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | true |
| label | Edge label | string, Component | true |
| labelStyle | Additional label styles | CSSProperties | true |
| labelShowBg | Enable/Disable label bg | boolean | true |
| labelBgPadding | Edge label bg padding | number | true |
| labelBgBorderRadius | Edge label bg border radius | number | true |
| selected | Is edge selected | boolean | true |
| animated | Is edge animated | boolean | true |
| updatable | Is edge updatable | boolean | true |
| markerStart | Edge marker id | string | true |
| markerEnd | Edge marker id | string | true |
| curvature | Edge path curvature | number | true |
### [(Custom) Edge Events](/typedocs/interfaces/EdgeEvents.html/)
### (Custom) Edge Events
In addition to the event handlers that you can access through [`useVueFlow`](/guide/composables#useVueFlow/) or the Vue Flow component,
you can also pass in event handlers in your initial node definition, or you can access the node events through the `events` prop passed
to your node components.
you can also pass in event handlers in your initial edge definition, or you can access the edge events through the `events` prop passed
to your edge components.
```vue{19-26}
<script setup>
@@ -392,7 +392,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 [`EdgeEventsHandler`](/typedocs/types/EdgeEventsHandler.html) type, meaning it will be
The `click` handler is part of the [`EdgeEventsHandler`](/typedocs/types/EdgeEventsHandler) type, meaning it will be
triggered when the edge is clicked.
```vue

10
docs/src/guide/getting-started.md
View File

@@ -28,13 +28,13 @@ npm i --save @braks/vue-flow
## Usage
A flow consists of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node.html/)
and (optionally) [<span class="font-bold text-purple-500">edges</span>](/typedocs/interfaces/Edge.html).
A flow consists of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node)
and (optionally) [<span class="font-bold text-purple-500">edges</span>](/typedocs/interfaces/Edge).
Together we call them
[<span class="font-bold text-green-500">elements</span>](/typedocs/types/Elements.html/).
[<span class="font-bold text-green-500">elements</span>](/typedocs/types/Elements).
<span class="font-bold text-blue-500">Each element needs a unique id.</span>
A node also needs a [xy-position](/typedocs/interfaces/XYPosition.html/). An edge needs at least a
A node also needs a [xy-position](/typedocs/interfaces/XYPosition). An edge needs at least a
source (node id) and a target (node id).
```vue
@@ -69,7 +69,7 @@ const elements = ref([
## Quickstart
The recommended method of using Vue Flow is the composition API as it allows for full control of the state, thanks to
composables and the power of [provide/inject](https://vuejs.org/guide/components/provide-inject.html). You can even
composables and the power of [provide/inject](https://vuejs.org/guide/components/provide-inject). You can even
access the state outside the context and manipulate it to your liking. However, using the options API is possible,
though more limited it will probably satisfy most of your needs if you are not looking for too advanced handling of
states.

64
docs/src/guide/node.md
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.

2
docs/src/guide/theming.md
View File

@@ -72,7 +72,7 @@ const nodes = ref<Node[]>([
])
```
### [Using CSS variables](/typedocs/types/CSSVars.html/)
### [Using CSS variables](/typedocs/types/CSSVars)
Some theme stylings can be overwritten by using css variables.
These variables can either be applied globally or you can define them on an element basis.

12
docs/src/guide/utils/edge.md
View File

@@ -25,37 +25,37 @@ create a bezier path.
This can be helpful if you don't want to actually change the way the path is calculated but just want to implement some custom logic on top of the
regular edge behavior.
### [getBezierPath](/typedocs/functions/getBezierPath.html/)
### [getBezierPath](/typedocs/functions/getBezierPath)
- Details:
Returns a bezier path.
### [getBezierCenter](/typedocs/functions/getBezierCenter.html/)
### [getBezierCenter](/typedocs/functions/getBezierCenter)
- Details:
Returns a bezier path's center x and y values.
### [getSimpleBezierPath](/typedocs/functions/getSimpleBezierPath.html/)
### [getSimpleBezierPath](/typedocs/functions/getSimpleBezierPath)
- Details:
Returns a simple bezier path (no curvature at handles).
### [getSimpleBezierCenter](/typedocs/functions/getSimpleBezierCenter.html/)
### [getSimpleBezierCenter](/typedocs/functions/getSimpleBezierCenter)
- Details:
Returns a simple bezier path's center x and y values.
### [getSmoothStepPath](/typedocs/functions/getSmoothStepPath.html/)
### [getSmoothStepPath](/typedocs/functions/getSmoothStepPath)
- Details:
Returns a smoothstep path (use border-radius 0 for a step path).
### [getEdgeCenter](/typedocs/functions/getEdgeCenter.html/)
### [getEdgeCenter](/typedocs/functions/getEdgeCenter)
- Details:

30
docs/src/guide/utils/graph.md
View File

@@ -1,6 +1,6 @@
# Graph
### [isEdge](/typedocs/functions/isEdge.html/)
### [isEdge](/typedocs/functions/isEdge)
- Details:
@@ -34,7 +34,7 @@ const toggleClass = () => {
</template>
```
### [isNode](/typedocs/functions/isNode.html/)
### [isNode](/typedocs/functions/isNode)
- Details:
@@ -68,11 +68,11 @@ const toggleClass = () => {
</template>
```
### [addEdge](/typedocs/functions/isEdge.html/)
### [addEdge](/typedocs/functions/isEdge)
::: warning
In the composition API you should use [`addEdges`](/typedocs/types/AddEdges.html/)
of [`useVueFlow`](/guide/composables.html#usevueflow/)
In the composition API you should use [`addEdges`](/typedocs/types/AddEdges)
of [`useVueFlow`](/guide/composables#usevueflow/)
:::
- Details:
@@ -101,11 +101,11 @@ const onConnect = (params) => {
</template>
```
### [updateEdge](/typedocs/functions/updateEdge.html)
### [updateEdge](/typedocs/functions/updateEdge)
::: warning
In the composition API you use access [`updateEdge`](/typedocs/types/UpdateEdge.html)
of [`useVueFlow`](/guide/composables.html#usevueflow/)
In the composition API you use access [`updateEdge`](/typedocs/types/UpdateEdge)
of [`useVueFlow`](/guide/composables#usevueflow/)
:::
- Details:
@@ -134,31 +134,31 @@ const onEdgeUpdate = ({ edge, connection }) => {
</template>
```
### [getOutgoers](/typedocs/functions/getOutgoers.html/)
### [getOutgoers](/typedocs/functions/getOutgoers)
- Details:
Returns all target elements of a node.
### [getIncomers](/typedocs/functions/getIncomers.html/)
### [getIncomers](/typedocs/functions/getIncomers)
- Details:
Returns all source elements of a node.
### [getConnectedEdges](/typedocs/functions/getConnectedEdges.html/)
### [getConnectedEdges](/typedocs/functions/getConnectedEdges)
- Details:
Returns all connected edges of a node.
### [getTransformForBounds](/typedocs/functions/getTransformForBounds.html/)
### [getTransformForBounds](/typedocs/functions/getTransformForBounds)
- Details:
Returns a transformation for the viewport according to input bounds.
### [getRectOfNodes](/typedocs/functions/getRectOfNodes.html/)
### [getRectOfNodes](/typedocs/functions/getRectOfNodes)
- Details:
@@ -166,13 +166,13 @@ const onEdgeUpdate = ({ edge, connection }) => {
Useful when you need to know the boundaries of a set of nodes.
### [getNodesInside](/typedocs/functions/getNodesInside.html/)
### [getNodesInside](/typedocs/functions/getNodesInside)
- Details:
Returns node elements that are inside a specified rect.
### [getMarkerId](/typedocs/functions/getMarkerId.html/)
### [getMarkerId](/typedocs/functions/getMarkerId)
- Details:

30
docs/src/guide/utils/instance.md
View File

@@ -4,9 +4,9 @@
The old `FlowInstance` has been removed and all it's functionalities merged into `useVueFlow`.
:::
Viewport Functions can be accessed via the [`useVueFlow`](/guide/composables.html#usevueflow)
utility or with the [`VueFlowStore`](/typedocs/types/VueFlowStore.html/)
instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents.html#paneready).
Viewport Functions can be accessed via the [`useVueFlow`](/guide/composables#usevueflow)
utility or with the [`VueFlowStore`](/typedocs/types/VueFlowStore)
instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents#paneready).
<CodeGroup>
<CodeGroupItem title="Composition API" active>
@@ -54,7 +54,7 @@ export default defineComponent({
</CodeGroupItem>
</CodeGroup>
### [project](/typedocs/types/Project.html/)
### [project](/typedocs/types/Project)
- Details:
@@ -68,7 +68,7 @@ export default defineComponent({
vueFlowInstance.project({ x: 100, y: 100 })
```
### [fitView](/typedocs/types/FitView.html/)
### [fitView](/typedocs/types/FitView)
- Details:
@@ -82,7 +82,7 @@ vueFlowInstance.project({ x: 100, y: 100 })
vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
```
### [fitBounds](/typedocs/types/FitBounds.html/)
### [fitBounds](/typedocs/types/FitBounds)
- Details:
@@ -94,7 +94,7 @@ vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
```
### [setTransform](/typedocs/types/SetTransform.html/)
### [setTransform](/typedocs/types/SetTransform)
- Details:
@@ -106,49 +106,49 @@ vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
```
### [getTransform](/typedocs/types/GetTransform.html/)
### [getTransform](/typedocs/types/GetTransform)
- Details:
Gets position and zoom of the pane.
### [zoomIn](/typedocs/types/ZoomInOut.html/)
### [zoomIn](/typedocs/types/ZoomInOut)
- Details:
Zooms in.
### [zoomOut](/typedocs/types/ZoomInOut.html/)
### [zoomOut](/typedocs/types/ZoomInOut)
- Details:
Zooms out.
### [zoomTo](/typedocs/types/ZoomTo.html/)
### [zoomTo](/typedocs/types/ZoomTo)
- Details:
Zooms to specific level.
### [getElements](/typedocs/interfaces/Getters.html#getelements)
### [getElements](/typedocs/interfaces/Getters#getelements)
- Details:
Returns currently stored elements (nodes + edges).
### [getNodes](/typedocs/interfaces/Getters.html#getnodes)
### [getNodes](/typedocs/interfaces/Getters#getnodes)
- Details:
Returns currently stored nodes.
### [getEdges](/typedocs/interfaces/Getters.html#getedges)
### [getEdges](/typedocs/interfaces/Getters#getedges)
- Details:
Returns currently stored edges.
### [toObject](/typedocs/interfaces/Actions.html#toobject)
### [toObject](/typedocs/interfaces/Actions#toobject)
- Details:

40
docs/src/guide/vue-flow/config.md
View File

@@ -2,7 +2,7 @@
Vue Flow allows you to configure zoom, graph and flow behavior.
Configuration can be passed either as props to the `VueFlow` component or
as options to the [`useVueFlow`](/guide/composables.html#usevueflow/) composable.
as options to the [`useVueFlow`](/guide/composables#usevueflow) composable.
<CodeGroup>
<CodeGroupItem title="Props" active>
@@ -91,7 +91,7 @@ onMounted(() => {
### modelValue <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
- Type: [`Elements`](/typedocs/types/Elements.html/)
- Type: [`Elements`](/typedocs/types/Elements)
- Details:
@@ -123,7 +123,7 @@ const elements = ref([
### nodes <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
- Type: [`Node[]`](/typedocs/interfaces/Node.html/)
- Type: [`Node[]`](/typedocs/interfaces/Node)
- Details:
@@ -153,7 +153,7 @@ const nodes = ref([
### edges <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
- Type: [`Edge[]`](/typedocs/interfaces/Edge.html/)
- Type: [`Edge[]`](/typedocs/interfaces/Edge)
- Details:
@@ -188,9 +188,9 @@ const edges = ref([
### node-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
- Type: [`Record<string, NodeComponent>`](/typedocs/types/NodeComponent.html/)
- Type: [`Record<string, NodeComponent>`](/typedocs/types/NodeComponent)
- Default: [`DefaultNodeTypes`](/typedocs/types/DefaultNodeTypes.html/)
- Default: [`DefaultNodeTypes`](/typedocs/types/DefaultNodeTypes)
- Details:
@@ -225,9 +225,9 @@ const edges = ref([
### edge-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
- Type: [`Record<string, EdgeComponent>`](/typedocs/types/EdgeComponent.html)
- Type: [`Record<string, EdgeComponent>`](/typedocs/types/EdgeComponent)
- Default: [`DefaultEdgeTypes`](/typedocs/types/DefaultEdgeTypes.html)
- Default: [`DefaultEdgeTypes`](/typedocs/types/DefaultEdgeTypes)
- Details:
@@ -297,7 +297,7 @@ const edges = ref([
### connection-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
- Type: [`ConnectionMode`](/typedocs/enums/ConnectionMode.html/)
- Type: [`ConnectionMode`](/typedocs/enums/ConnectionMode)
- Default: `ConnectionMode.Loose`
@@ -307,7 +307,7 @@ const edges = ref([
### connection-line-options
- Type: [`ConnectionLineOptions`](/typedocs/interfaces/ConnectionLineOptions.html/)
- Type: [`ConnectionLineOptions`](/typedocs/interfaces/ConnectionLineOptions)
- Details:
@@ -317,7 +317,7 @@ const edges = ref([
### connection-line-type <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> <Badge type="warning" class="text-white" style="line-height: inherit" text="deprecated" vertical="top" />
- Type: [`ConnectionLineType`](/typedocs/enums/ConnectionLineType.html/)
- Type: [`ConnectionLineType`](/typedocs/enums/ConnectionLineType)
- Default: `ConnectionLineType.Bezier`
@@ -409,7 +409,7 @@ const edges = ref([
### pan-on-scroll-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
- Type: [`PanOnScrollMode`](/typedocs/enums/PanOnScrollMode.html/)
- Type: [`PanOnScrollMode`](/typedocs/enums/PanOnScrollMode)
- Default: `PanOnScrollMode.Free`
@@ -492,7 +492,7 @@ const edges = ref([
### translate-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent.html/)
- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent)
- Default:
@@ -601,7 +601,7 @@ const elements = ref([
### nodes-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent.html/)
- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent)
- Default:
@@ -652,7 +652,7 @@ const elements = ref([
### snap-grid <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
- Type: [`SnapGrid`](/typedocs/types/SnapGrid.html)
- Type: [`SnapGrid`](/typedocs/types/SnapGrid)
- Default: `[15, 15]`
@@ -726,7 +726,7 @@ const elements = ref([
### default-edge-options <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
- Type: [`DefaultEdgeOptions`]()
- Type: [`DefaultEdgeOptions`](/typedocs/types/DefaultEdgeOptions)
- Details:
@@ -736,7 +736,7 @@ const elements = ref([
### auto-connect <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
- Type: `boolean` | [`Connector`](/typedocs/types/Connector.html/)
- Type: `boolean` | [`Connector`](/typedocs/types/Connector)
- Default: `false`
@@ -744,7 +744,7 @@ const elements = ref([
When connection is emitted, automatically create a new edge from params.
Also accepts a [`Connector`](/typedocs/types/Connector.html/) which returns an edge-like object or false (if creating
Also accepts a [`Connector`](/typedocs/types/Connector) which returns an edge-like object or false (if creating
an edge is not allowed).
This option can be used as a shorthand for `onConnect((params) => addEdges([params]))`.
@@ -759,7 +759,7 @@ const elements = ref([
</template>
```
#### [Connector](/typedocs/types/Connector.html/)
#### [Connector](/typedocs/types/Connector)
```vue{6-18,22}
<script setup>
@@ -792,7 +792,7 @@ const connector = (params) => {
- Type: `boolean`
- Default: `false`
- Details:
When enabled, edges will be grouped by z-index and elevated when the nodes they connect to are selected.

4
docs/src/guide/vue-flow/slots.md
View File

@@ -1,7 +1,7 @@
# Slots
Vue Flow provides several slots for customization.
In addition to the node and edge slots (see the guide on [nodes](/guide/node.html) and [edges](/guide/edge.html)),
In addition to the node and edge slots (see the guide on [nodes](/guide/node) and [edges](/guide/edge)),
there are a number of other slots you can use to customize the visualization.
## Default
@@ -25,7 +25,7 @@ is triggered.
</template>
```
The full description of connection line props can be found [here](/typedocs/interfaces/ConnectionLineProps.html/).
The full description of connection line props can be found [here](/typedocs/interfaces/ConnectionLineProps).
## Zoom Pane

6
docs/src/guide/vue-flow/state.md
View File

@@ -1,10 +1,10 @@
# State
Under the hood Vue Flow uses [Provide/Inject](https://v3.vuejs.org/guide/component-provide-inject.html)
Under the hood Vue Flow uses [Provide/Inject](https://v3.vuejs.org/guide/component-provide-inject)
to pass around it's state between components.
You can access the internal state through the [`useVueFlow`](/guide/composables.html#usevueflow/) composable.
You can access the internal state through the [`useVueFlow`](/guide/composables#usevueflow/) composable.
[`useVueFlow`](/guide/composables.html#usevueflow/) can be used to either create a new state instance and inject it into
[`useVueFlow`](/guide/composables#usevueflow/) can be used to either create a new state instance and inject it into
the current component tree or inject
an already existing store from the current context.
Internal state can be manipulated, for example by adding new elements to the state. The