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/components/background.md
+12 -12
View File
@@ -14,16 +14,16 @@ To use the background simply pass the `Background` component as a child to the `
</template> </template>
``` ```
## [Props](/typedocs/interfaces/BackgroundProps.html/) ## [Props](/typedocs/interfaces/BackgroundProps)
| Name | Definition | Type | Optional | Default | | Name | Definition | Type | Optional | Default |
|--------------|-------------------|--------------------------------------------------------------|----------|---------| |--------------|-------------------|--------------------------------------------------------|----------|---------|
| variant | Pattern variant | [BackgroundVariant](/typedocs/enums/BackgroundVariant.html/) | true | dots | | variant | Pattern variant | [BackgroundVariant](/typedocs/enums/BackgroundVariant) | true | dots |
| gap | Pattern gap | number | true | 10 | | gap | Pattern gap | number | true | 10 |
| size | Pattern size | number | true | 0.4 | | size | Pattern size | number | true | 0.4 |
| patternColor | Pattern color | string | true | #81818a | | patternColor | Pattern color | string | true | #81818a |
| bgColor | Is node dragging | boolean | true | #fff | | bgColor | Is node dragging | boolean | true | #fff |
| height | Background height | number | true | 100 | | height | Background height | number | true | 100 |
| width | Background width | number | true | 100 | | width | Background width | number | true | 100 |
| x | X-offset | number | true | 0 | | x | X-offset | number | true | 0 |
| y | Y-offset | number | true | 0 | | y | Y-offset | number | true | 0 |
docs/src/guide/components/control-button.md
+1 -1
View File
@@ -4,7 +4,7 @@ You can use the existing `ControlButton` component to create new control buttons
## Usage ## 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 ```vue
<template> <template>
docs/src/guide/components/controls.md
+2 -2
View File
@@ -14,7 +14,7 @@ To use the controls simply pass the `Controls` component as a child to the `VueF
</template> </template>
``` ```
## [Props](/typedocs/interfaces/ControlProps.html/) ## [Props](/typedocs/interfaces/ControlProps)
| Name | Definition | Type | Optional | Default | | 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 | | showFitView | Show fit-view btn | boolean | true | true |
| showInteractive | Show lock interactive btn | boolean | true | true | | showInteractive | Show lock interactive btn | boolean | true | true |
| showZoom | Show zoom button | 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 ## Emits
docs/src/guide/components/minimap-node.md
+4 -4
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 ## 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 ```vue
<template> <template>
@@ -19,7 +19,7 @@ To use the component pass the `MiniMapNode` as a child to the [`MiniMap`](/guide
</template> </template>
``` ```
## [Props](/typedocs/interfaces/MiniMapNodeProps.html/) ## [Props](/typedocs/interfaces/MiniMapNodeProps)
| Name | Definition | Type | Optional | Default | | 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 | - | | parentNode | Parent node id | string | true | - |
| selected | Is node selected | boolean | true | false | | selected | Is node selected | boolean | true | false |
| dragging | Is node dragging | boolean | true | false | | dragging | Is node dragging | boolean | true | false |
| position | XY position of node | [XYPosition](/typedocs/interfaces/XYPosition.html/) | false | - | | position | XY position of node | [XYPosition](/typedocs/interfaces/XYPosition) | false | - |
| dimensions | Node dimensions | [Dimensions](/typedocs/interfaces/Dimensions.html/) | false | - | | dimensions | Node dimensions | [Dimensions](/typedocs/interfaces/Dimensions) | false | - |
| borderRadius | MiniMap node css border-radius | number | true | - | | borderRadius | MiniMap node css border-radius | number | true | - |
| color | MiniMap node css color | string | true | - | | color | MiniMap node css color | string | true | - |
| shapeRendering | MiniMap node css shapeRendering | ShapeRendering | true | - | | shapeRendering | MiniMap node css shapeRendering | ShapeRendering | true | - |
docs/src/guide/components/minimap.md
+5 -5
View File
@@ -12,13 +12,13 @@ To use the minimap simply pass the `MiniMap` component as a child to the `VueFlo
</template> </template>
``` ```
## [Props](/typedocs/interfaces/MiniMapProps.html/) ## [Props](/typedocs/interfaces/MiniMapProps)
| Name | Definition | Type | Optional | Default | | Name | Definition | Type | Optional | Default |
|------------------|--------------------------|------------------------------------------------------------------|----------|-------------------------| |------------------|--------------------------|------------------------------------------------------------------|----------|-------------------------|
| nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc.html/) | true | #fff | | nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #fff |
| nodeStrokeColor | Border color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc.html/) | true | #555 | | nodeStrokeColor | Border color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #555 |
| nodeClassName | Extra classes | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc.html/) | true | - | | nodeClassName | Extra classes | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | - |
| nodeBorderRadius | Border radius | number | true | 5 | | nodeBorderRadius | Border radius | number | true | 5 |
| nodeStrokeWidth | Stroke width | number | true | 2 | | nodeStrokeWidth | Stroke width | number | true | 2 |
| maskColor | Minimap Background color | string | true | rgb(240, 242, 243, 0.7) | | 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 | | 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) |
docs/src/guide/composables.md
+3 -3
View File
@@ -1,6 +1,6 @@
# Composables # 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. 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. `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. 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] ::: warning [deprecated]
All functions of `useZoomPanHelper` are also available in `useVueFlow`. All functions of `useZoomPanHelper` are also available in `useVueFlow`.
@@ -60,7 +60,7 @@ const { fitView } = useZoomPanHelper()
</template> </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` 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 provides you with a mouseDown- and click-handler functions that you can apply to the element you want to use as a
docs/src/guide/edge.md
+39 -39
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> 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. 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 ## 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. For more advanced graphs that require more state access you will want to use the useVueFlow composable.
[useVueFlow](/typedocs/functions/useVueFlow.html/) will provide [useVueFlow](/typedocs/functions/useVueFlow) will provide
you with an [`addEdges`](/typedocs/interfaces/Actions.html#addedges/) utility function, which you can use to add edges you with an [`addEdges`](/typedocs/interfaces/Actions#addedges/) utility function, which you can use to add edges
directly to the state. directly to the state.
```vue ```vue
@@ -99,10 +99,10 @@ onMounted(() => {
``` ```
You can also apply changes (like removing elements safely) using You can also apply changes (like removing elements safely) using
the [`applyEdgeChanges`](/typedocs/interfaces/Actions.html#applyedgechanges/) utility function, which expects an array the [`applyEdgeChanges`](/typedocs/interfaces/Actions#applyedgechanges/) utility function, which expects an array
of [changes](/typedocs/types/EdgeChange.html/) to be applied to the currently stored edges. 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. 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`. These edge types include `default` (bezier), `step`, `smoothstep` and `straight`.
@@ -245,7 +245,7 @@ import { markRaw } from 'vue'
import CustomEdge from './CustomEdge.vue' import CustomEdge from './CustomEdge.vue'
const edgeTypes = { const edgeTypes = {
custom: markRaw(CustomNode), custom: markRaw(CustomEdge),
} }
const elements = ref([ const elements = ref([
@@ -318,45 +318,45 @@ const elements = ref([
</template> </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. 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 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: your edges receive the following props:
| Name | Definition | Type | Optional | | Name | Definition | Type | Optional |
|---------------------|-------------------------------|----------------------------------------------------|----------| |---------------------|-------------------------------|----------------------------------------------|----------|
| id | Edge id | string | false | | id | Edge id | string | false |
| source | The source node id | string | false | | source | The source node id | string | false |
| target | The target node id | string | false | | target | The target node id | string | false |
| sourceNode | The source node | GraphNode | false | | sourceNode | The source node | GraphNode | false |
| targetNode | The target node | GraphNode | false | | targetNode | The target node | GraphNode | false |
| sourceX | X position of source handle | number | false | | sourceX | X position of source handle | number | false |
| sourceY | Y position of source handle | number | false | | sourceY | Y position of source handle | number | false |
| targetX | X position of target handle | number | false | | targetX | X position of target handle | number | false |
| targetY | Y position of target handle | number | false | | targetY | Y position of target handle | number | false |
| type | Edge type | string | true | | type | Edge type | string | true |
| sourceHandleId | Source handle id | string | true | | sourceHandleId | Source handle id | string | true |
| targetHandleId | Target handle id | string | true | | targetHandleId | Target handle id | string | true |
| data | Custom data object | Any object | true | | data | Custom data object | Any object | true |
| events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn.html/) | true | | events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | true |
| label | Edge label | string, Component | true | | label | Edge label | string, Component | true |
| labelStyle | Additional label styles | CSSProperties | true | | labelStyle | Additional label styles | CSSProperties | true |
| labelShowBg | Enable/Disable label bg | boolean | true | | labelShowBg | Enable/Disable label bg | boolean | true |
| labelBgPadding | Edge label bg padding | number | true | | labelBgPadding | Edge label bg padding | number | true |
| labelBgBorderRadius | Edge label bg border radius | number | true | | labelBgBorderRadius | Edge label bg border radius | number | true |
| selected | Is edge selected | boolean | true | | selected | Is edge selected | boolean | true |
| animated | Is edge animated | boolean | true | | animated | Is edge animated | boolean | true |
| updatable | Is edge updatable | boolean | true | | updatable | Is edge updatable | boolean | true |
| markerStart | Edge marker id | string | true | | markerStart | Edge marker id | string | true |
| markerEnd | Edge marker id | string | true | | markerEnd | Edge marker id | string | true |
| curvature | Edge path curvature | number | 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, 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 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 node components. to your edge components.
```vue{19-26} ```vue{19-26}
<script setup> <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 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. 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. triggered when the edge is clicked.
```vue ```vue
docs/src/guide/getting-started.md
+5 -5
View File
@@ -28,13 +28,13 @@ npm i --save @braks/vue-flow
## Usage ## Usage
A flow consists of [<span class="font-bold text-blue-500">nodes</span>](/typedocs/interfaces/Node.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.html). and (optionally) [<span class="font-bold text-purple-500">edges</span>](/typedocs/interfaces/Edge).
Together we call them 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> <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). source (node id) and a target (node id).
```vue ```vue
@@ -69,7 +69,7 @@ const elements = ref([
## Quickstart ## Quickstart
The recommended method of using Vue Flow is the composition API as it allows for full control of the state, thanks to 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, 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 though more limited it will probably satisfy most of your needs if you are not looking for too advanced handling of
states. states.
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. 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 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. 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 ## 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. For more advanced graphs that require more state access you will want to use the useVueFlow composable.
[useVueFlow](/typedocs/functions/useVueFlow.html/) will provide [useVueFlow](/typedocs/functions/useVueFlow) will provide
you with an [`addNodes`](/typedocs/interfaces/Actions.html#addnodes/) utility function, which you can use to add nodes you with an [`addNodes`](/typedocs/interfaces/Actions#addnodes) utility function, which you can use to add nodes
directly to the state. directly to the state.
```vue ```vue
@@ -88,9 +88,9 @@ onMounted(() => {
</template> </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, 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} ```vue{11,17-22}
<script setup> <script setup>
@@ -124,7 +124,7 @@ onMounted(() => {
</template> </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. Vue Flow comes with built-in nodes that you can use right out of the box.
These node types include `default`, `input` and `output`. These node types include `default`, `input` and `output`.
@@ -264,7 +264,7 @@ const elements = ref([
``` ```
::: tip ::: 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 ### Node Template
@@ -305,33 +305,33 @@ const elements = ref([
</template> </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. 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
your nodes receive the following props: your nodes receive the following props:
| Name | Definition | Type | Optional | | Name | Definition | Type | Optional |
|------------------|--------------------------------------------------|------------------------------------------------------------------|----------| |------------------|--------------------------------------------------|------------------------------------------------------------|----------|
| id | Node id | string | false | | id | Node id | string | false |
| type | Node type | string | false | | type | Node type | string | false |
| selected | Is node selected | boolean | false | | selected | Is node selected | boolean | false |
| dragging | Is node dragging | boolean | false | | dragging | Is node dragging | boolean | false |
| connectable | Is node connectable | boolean | false | | connectable | Is node connectable | boolean | false |
| position | Relative position of a node | [XYPosition](/typedocs/interfaces/XYPosition.html/) | false | | position | Relative position of a node | [XYPosition](/typedocs/interfaces/XYPosition) | false |
| zIndex | Node z-index | number | false | | zIndex | Node z-index | number | false |
| dimensions | Node size | [Dimensions](/typedocs/interfaces/Dimensions.html) | false | | dimensions | Node size | [Dimensions](/typedocs/interfaces/Dimensions) | false |
| data | Custom data object | Any object | true | | data | Custom data object | Any object | true |
| events | Node events and custom events | [NodeEventsOn](/typedocs/types/NodeEventsOn.html/) | true | | events | Node events and custom events | [NodeEventsOn](/typedocs/types/NodeEventsOn) | true |
| label | Node label | string, Component | true | | label | Node label | string, Component | true |
| isValidTargetPos | Called when target handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc.html/) | 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.html/) | true | | isValidSourcePos | Called when source handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc) | true |
| parentNode | Parent node id | string | true | | parentNode | Parent node id | string | true |
| targetPosition | Target handle position | [Position](/typedocs/enums/Position.html/) | true | | targetPosition | Target handle position | [Position](/typedocs/enums/Position) | true |
| sourcePosition | Source handle position | [Position](/typedocs/enums/Position.html/) | true | | sourcePosition | Source handle position | [Position](/typedocs/enums/Position) | true |
| dragHandle | Node drag handle class | string | 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 In addition to the event handlers that you can access through [`useVueFlow`](/guide/composables#useVueFlow/) or the Vue
Flow component, 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 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. 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 will be
triggered when the node is clicked. triggered when the node is clicked.
@@ -398,7 +398,7 @@ props.events.customEvent('custom event triggered')
## Styling ## Styling
::: tip ::: 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 ### Custom Nodes
@@ -423,7 +423,7 @@ By adding this class you can also enable scrolling inside a node.
### Dynamic handle positions / Adding handles dynamically ### Dynamic handle positions / Adding handles dynamically
When working with dynamic handle positions or adding handles dynamically, you need to use 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 You need to call this method otherwise your node will not respond to the new handles and edges will be
misaligned. misaligned.
docs/src/guide/theming.md
+1 -1
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. 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. These variables can either be applied globally or you can define them on an element basis.
docs/src/guide/utils/edge.md
+6 -6
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 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. regular edge behavior.
### [getBezierPath](/typedocs/functions/getBezierPath.html/) ### [getBezierPath](/typedocs/functions/getBezierPath)
- Details: - Details:
Returns a bezier path. Returns a bezier path.
### [getBezierCenter](/typedocs/functions/getBezierCenter.html/) ### [getBezierCenter](/typedocs/functions/getBezierCenter)
- Details: - Details:
Returns a bezier path's center x and y values. Returns a bezier path's center x and y values.
### [getSimpleBezierPath](/typedocs/functions/getSimpleBezierPath.html/) ### [getSimpleBezierPath](/typedocs/functions/getSimpleBezierPath)
- Details: - Details:
Returns a simple bezier path (no curvature at handles). Returns a simple bezier path (no curvature at handles).
### [getSimpleBezierCenter](/typedocs/functions/getSimpleBezierCenter.html/) ### [getSimpleBezierCenter](/typedocs/functions/getSimpleBezierCenter)
- Details: - Details:
Returns a simple bezier path's center x and y values. Returns a simple bezier path's center x and y values.
### [getSmoothStepPath](/typedocs/functions/getSmoothStepPath.html/) ### [getSmoothStepPath](/typedocs/functions/getSmoothStepPath)
- Details: - Details:
Returns a smoothstep path (use border-radius 0 for a step path). Returns a smoothstep path (use border-radius 0 for a step path).
### [getEdgeCenter](/typedocs/functions/getEdgeCenter.html/) ### [getEdgeCenter](/typedocs/functions/getEdgeCenter)
- Details: - Details:
docs/src/guide/utils/graph.md
+15 -15
View File
@@ -1,6 +1,6 @@
# Graph # Graph
### [isEdge](/typedocs/functions/isEdge.html/) ### [isEdge](/typedocs/functions/isEdge)
- Details: - Details:
@@ -34,7 +34,7 @@ const toggleClass = () => {
</template> </template>
``` ```
### [isNode](/typedocs/functions/isNode.html/) ### [isNode](/typedocs/functions/isNode)
- Details: - Details:
@@ -68,11 +68,11 @@ const toggleClass = () => {
</template> </template>
``` ```
### [addEdge](/typedocs/functions/isEdge.html/) ### [addEdge](/typedocs/functions/isEdge)
::: warning ::: warning
In the composition API you should use [`addEdges`](/typedocs/types/AddEdges.html/) In the composition API you should use [`addEdges`](/typedocs/types/AddEdges)
of [`useVueFlow`](/guide/composables.html#usevueflow/) of [`useVueFlow`](/guide/composables#usevueflow/)
::: :::
- Details: - Details:
@@ -101,11 +101,11 @@ const onConnect = (params) => {
</template> </template>
``` ```
### [updateEdge](/typedocs/functions/updateEdge.html) ### [updateEdge](/typedocs/functions/updateEdge)
::: warning ::: warning
In the composition API you use access [`updateEdge`](/typedocs/types/UpdateEdge.html) In the composition API you use access [`updateEdge`](/typedocs/types/UpdateEdge)
of [`useVueFlow`](/guide/composables.html#usevueflow/) of [`useVueFlow`](/guide/composables#usevueflow/)
::: :::
- Details: - Details:
@@ -134,31 +134,31 @@ const onEdgeUpdate = ({ edge, connection }) => {
</template> </template>
``` ```
### [getOutgoers](/typedocs/functions/getOutgoers.html/) ### [getOutgoers](/typedocs/functions/getOutgoers)
- Details: - Details:
Returns all target elements of a node. Returns all target elements of a node.
### [getIncomers](/typedocs/functions/getIncomers.html/) ### [getIncomers](/typedocs/functions/getIncomers)
- Details: - Details:
Returns all source elements of a node. Returns all source elements of a node.
### [getConnectedEdges](/typedocs/functions/getConnectedEdges.html/) ### [getConnectedEdges](/typedocs/functions/getConnectedEdges)
- Details: - Details:
Returns all connected edges of a node. Returns all connected edges of a node.
### [getTransformForBounds](/typedocs/functions/getTransformForBounds.html/) ### [getTransformForBounds](/typedocs/functions/getTransformForBounds)
- Details: - Details:
Returns a transformation for the viewport according to input bounds. Returns a transformation for the viewport according to input bounds.
### [getRectOfNodes](/typedocs/functions/getRectOfNodes.html/) ### [getRectOfNodes](/typedocs/functions/getRectOfNodes)
- Details: - Details:
@@ -166,13 +166,13 @@ const onEdgeUpdate = ({ edge, connection }) => {
Useful when you need to know the boundaries of a set of nodes. Useful when you need to know the boundaries of a set of nodes.
### [getNodesInside](/typedocs/functions/getNodesInside.html/) ### [getNodesInside](/typedocs/functions/getNodesInside)
- Details: - Details:
Returns node elements that are inside a specified rect. Returns node elements that are inside a specified rect.
### [getMarkerId](/typedocs/functions/getMarkerId.html/) ### [getMarkerId](/typedocs/functions/getMarkerId)
- Details: - Details:
docs/src/guide/utils/instance.md
+15 -15
View File
@@ -4,9 +4,9 @@
The old `FlowInstance` has been removed and all it's functionalities merged into `useVueFlow`. 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) Viewport Functions can be accessed via the [`useVueFlow`](/guide/composables#usevueflow)
utility or with the [`VueFlowStore`](/typedocs/types/VueFlowStore.html/) utility or with the [`VueFlowStore`](/typedocs/types/VueFlowStore)
instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents.html#paneready). instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents#paneready).
<CodeGroup> <CodeGroup>
<CodeGroupItem title="Composition API" active> <CodeGroupItem title="Composition API" active>
@@ -54,7 +54,7 @@ export default defineComponent({
</CodeGroupItem> </CodeGroupItem>
</CodeGroup> </CodeGroup>
### [project](/typedocs/types/Project.html/) ### [project](/typedocs/types/Project)
- Details: - Details:
@@ -68,7 +68,7 @@ export default defineComponent({
vueFlowInstance.project({ x: 100, y: 100 }) vueFlowInstance.project({ x: 100, y: 100 })
``` ```
### [fitView](/typedocs/types/FitView.html/) ### [fitView](/typedocs/types/FitView)
- Details: - Details:
@@ -82,7 +82,7 @@ vueFlowInstance.project({ x: 100, y: 100 })
vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true }) vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
``` ```
### [fitBounds](/typedocs/types/FitBounds.html/) ### [fitBounds](/typedocs/types/FitBounds)
- Details: - Details:
@@ -94,7 +94,7 @@ vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
vueFlowInstance.fitBounds(getRectOfNodes(nodes.value)) vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
``` ```
### [setTransform](/typedocs/types/SetTransform.html/) ### [setTransform](/typedocs/types/SetTransform)
- Details: - Details:
@@ -106,49 +106,49 @@ vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 }) vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
``` ```
### [getTransform](/typedocs/types/GetTransform.html/) ### [getTransform](/typedocs/types/GetTransform)
- Details: - Details:
Gets position and zoom of the pane. Gets position and zoom of the pane.
### [zoomIn](/typedocs/types/ZoomInOut.html/) ### [zoomIn](/typedocs/types/ZoomInOut)
- Details: - Details:
Zooms in. Zooms in.
### [zoomOut](/typedocs/types/ZoomInOut.html/) ### [zoomOut](/typedocs/types/ZoomInOut)
- Details: - Details:
Zooms out. Zooms out.
### [zoomTo](/typedocs/types/ZoomTo.html/) ### [zoomTo](/typedocs/types/ZoomTo)
- Details: - Details:
Zooms to specific level. Zooms to specific level.
### [getElements](/typedocs/interfaces/Getters.html#getelements) ### [getElements](/typedocs/interfaces/Getters#getelements)
- Details: - Details:
Returns currently stored elements (nodes + edges). Returns currently stored elements (nodes + edges).
### [getNodes](/typedocs/interfaces/Getters.html#getnodes) ### [getNodes](/typedocs/interfaces/Getters#getnodes)
- Details: - Details:
Returns currently stored nodes. Returns currently stored nodes.
### [getEdges](/typedocs/interfaces/Getters.html#getedges) ### [getEdges](/typedocs/interfaces/Getters#getedges)
- Details: - Details:
Returns currently stored edges. Returns currently stored edges.
### [toObject](/typedocs/interfaces/Actions.html#toobject) ### [toObject](/typedocs/interfaces/Actions#toobject)
- Details: - Details:
docs/src/guide/vue-flow/config.md
+20 -20
View File
@@ -2,7 +2,7 @@
Vue Flow allows you to configure zoom, graph and flow behavior. Vue Flow allows you to configure zoom, graph and flow behavior.
Configuration can be passed either as props to the `VueFlow` component or 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> <CodeGroup>
<CodeGroupItem title="Props" active> <CodeGroupItem title="Props" active>
@@ -91,7 +91,7 @@ onMounted(() => {
### modelValue <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### 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: - Details:
@@ -123,7 +123,7 @@ const elements = ref([
### nodes <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### 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: - Details:
@@ -153,7 +153,7 @@ const nodes = ref([
### edges <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### 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: - Details:
@@ -188,9 +188,9 @@ const edges = ref([
### node-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### 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: - Details:
@@ -225,9 +225,9 @@ const edges = ref([
### edge-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### 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: - Details:
@@ -297,7 +297,7 @@ const edges = ref([
### connection-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### 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` - Default: `ConnectionMode.Loose`
@@ -307,7 +307,7 @@ const edges = ref([
### connection-line-options ### connection-line-options
- Type: [`ConnectionLineOptions`](/typedocs/interfaces/ConnectionLineOptions.html/) - Type: [`ConnectionLineOptions`](/typedocs/interfaces/ConnectionLineOptions)
- Details: - 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" /> ### 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` - 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" /> ### 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` - Default: `PanOnScrollMode.Free`
@@ -492,7 +492,7 @@ const edges = ref([
### translate-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### 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: - Default:
@@ -601,7 +601,7 @@ const elements = ref([
### nodes-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### 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: - Default:
@@ -652,7 +652,7 @@ const elements = ref([
### snap-grid <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### 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]` - 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" /> ### default-edge-options <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
- Type: [`DefaultEdgeOptions`]() - Type: [`DefaultEdgeOptions`](/typedocs/types/DefaultEdgeOptions)
- Details: - Details:
@@ -736,7 +736,7 @@ const elements = ref([
### auto-connect <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### 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` - Default: `false`
@@ -744,7 +744,7 @@ const elements = ref([
When connection is emitted, automatically create a new edge from params. 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). an edge is not allowed).
This option can be used as a shorthand for `onConnect((params) => addEdges([params]))`. This option can be used as a shorthand for `onConnect((params) => addEdges([params]))`.
@@ -759,7 +759,7 @@ const elements = ref([
</template> </template>
``` ```
#### [Connector](/typedocs/types/Connector.html/) #### [Connector](/typedocs/types/Connector)
```vue{6-18,22} ```vue{6-18,22}
<script setup> <script setup>
@@ -792,7 +792,7 @@ const connector = (params) => {
- Type: `boolean` - Type: `boolean`
- Default: `false` - Default: `false`
- Details: - Details:
When enabled, edges will be grouped by z-index and elevated when the nodes they connect to are selected. When enabled, edges will be grouped by z-index and elevated when the nodes they connect to are selected.
docs/src/guide/vue-flow/slots.md
+2 -2
View File
@@ -1,7 +1,7 @@
# Slots # Slots
Vue Flow provides several slots for customization. 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. there are a number of other slots you can use to customize the visualization.
## Default ## Default
@@ -25,7 +25,7 @@ is triggered.
</template> </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 ## Zoom Pane
docs/src/guide/vue-flow/state.md
+3 -3
View File
@@ -1,10 +1,10 @@
# State # 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. 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 the current component tree or inject
an already existing store from the current context. an already existing store from the current context.
Internal state can be manipulated, for example by adding new elements to the state. The Internal state can be manipulated, for example by adding new elements to the state. The