docs: replace old typedoc links
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
# Composables
|
# Composables
|
||||||
|
|
||||||
## [useVueFlow](https://types.vueflow.dev/modules.html#useVueFlow)
|
## [useVueFlow](/typedocs/functions/useVueFlow.html/)
|
||||||
|
|
||||||
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](https://types.vueflow.dev/modules.html#useZoomPanHelper)
|
## [useZoomPanHelper](/typedocs/functions/useZoomPanHelper.html/)
|
||||||
|
|
||||||
The `useZoomPanHelper` utility can be used to access core store functions like getting Elements or
|
The `useZoomPanHelper` utility can be used to access core store functions like getting Elements or
|
||||||
using viewpane transforms.
|
using viewpane transforms.
|
||||||
@@ -55,7 +55,7 @@ const { fitView } = useZoomPanHelper()
|
|||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
## [useHandle](https://types.vueflow.dev/modules.html#useHandle)
|
## [useHandle](/typedocs/functions/useHandle.html/)
|
||||||
|
|
||||||
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
|
||||||
|
|||||||
+13
-13
@@ -90,7 +90,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`](https://types.vueflow.dev/modules.html#Elements)
|
- Type: [`Elements`](/typedocs/types/Elements.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
@@ -122,7 +122,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[]`](https://types.vueflow.dev/interfaces/Node.html)
|
- Type: [`Node[]`](/typedocs/interfaces/Node.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
@@ -152,7 +152,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[]`](https://types.vueflow.dev/interfaces/Edge.html)
|
- Type: [`Edge[]`](/typedocs/interfaces/Edge.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
@@ -187,9 +187,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>`](https://types.vueflow.dev/modules.html#NodeComponent)
|
- Type: [`Record<string, NodeComponent>`](/typedocs/types/NodeComponent.html/)
|
||||||
|
|
||||||
- Default: [`DefaultNodeTypes`](https://types.vueflow.dev/modules.html#DefaultNodeTypes)
|
- Default: [`DefaultNodeTypes`](/typedocs/types/DefaultNodeTypes.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
@@ -224,9 +224,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>`](https://types.vueflow.dev/modules.html#EdgeComponent)
|
- Type: [`Record<string, EdgeComponent>`](/typedocs/types/EdgeComponent.html)
|
||||||
|
|
||||||
- Default: [`DefaultEdgeTypes`](https://types.vueflow.dev/modules.html#DefaultEdgeTypes)
|
- Default: [`DefaultEdgeTypes`](/typedocs/types/DefaultEdgeTypes.html)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
@@ -295,7 +295,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`](https://types.vueflow.dev/enums/ConnectionMode.html)
|
- Type: [`ConnectionMode`](/typedocs/enums/ConnectionMode.html/)
|
||||||
|
|
||||||
- Default: `ConnectionMode.Loose`
|
- Default: `ConnectionMode.Loose`
|
||||||
|
|
||||||
@@ -305,7 +305,7 @@ const edges = ref([
|
|||||||
|
|
||||||
### connection-line-type <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
|
### connection-line-type <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
|
||||||
|
|
||||||
- Type: [`ConnectionLineType`](https://types.vueflow.dev/enums/ConnectionLineType.html)
|
- Type: [`ConnectionLineType`](/typedocs/enums/ConnectionLineType.html/)
|
||||||
|
|
||||||
- Default: `ConnectionLineType.Bezier`
|
- Default: `ConnectionLineType.Bezier`
|
||||||
|
|
||||||
@@ -397,7 +397,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`](https://types.vueflow.dev/enums/PanOnScrollMode.html)
|
- Type: [`PanOnScrollMode`](/typedocs/enums/PanOnScrollMode.html/)
|
||||||
|
|
||||||
- Default: `PanOnScrollMode.Free`
|
- Default: `PanOnScrollMode.Free`
|
||||||
|
|
||||||
@@ -479,7 +479,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`](https://types.vueflow.dev/modules.html#CoordinateExtent)
|
- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent.html/)
|
||||||
|
|
||||||
- Default:
|
- Default:
|
||||||
|
|
||||||
@@ -589,7 +589,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`](https://types.vueflow.dev/modules.html#CoordinateExtent)
|
- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent.html/)
|
||||||
|
|
||||||
- Default:
|
- Default:
|
||||||
|
|
||||||
@@ -640,7 +640,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`](https://types.vueflow.dev/modules.html#SnapGrid)
|
- Type: [`SnapGrid`](/typedocs/types/SnapGrid.html)
|
||||||
|
|
||||||
- Default: `[15, 15]`
|
- Default: `[15, 15]`
|
||||||
|
|
||||||
|
|||||||
@@ -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](https://types.vueflow.dev/interfaces/Edge.html).
|
You can check the full options for an edge element in the TypeDocs [here](/typedocs/interfaces/Edge.html/).
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
@@ -352,4 +352,4 @@ your edges receive the following props:
|
|||||||
| markerEnd | Edge marker | string | true |
|
| markerEnd | Edge marker | string | true |
|
||||||
| curvature | Edge path curvature | number | true |
|
| curvature | Edge path curvature | number | true |
|
||||||
|
|
||||||
You can find the TypeDocs [here](https://types.vueflow.dev/interfaces/EdgeProps.html).
|
You can find the full description [here](/typedocs/interfaces/EdgeProps.html/).
|
||||||
|
|||||||
@@ -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>](https://types.vueflow.dev/interfaces/Node.html)
|
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>](https://types.vueflow.dev/interfaces/Edge.html).
|
and (optionally) [<span class="font-bold text-purple-500">edges</span>](/typedocs/interfaces/Edge.html).
|
||||||
Together we call them
|
Together we call them
|
||||||
[<span class="font-bold text-green-500">elements</span>](https://types.vueflow.dev/modules.html#Elements).
|
[<span class="font-bold text-green-500">elements</span>](/typedocs/types/Elements.html/).
|
||||||
|
|
||||||
<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](https://types.vueflow.dev/interfaces/XYPosition.html). An edge needs at least a
|
A node also needs a [xy-position](typedocs/interfaces/XYPosition.html). An edge needs at least a
|
||||||
source (node id) and a target (node id).
|
source (node id) and a target (node id).
|
||||||
|
|
||||||
```vue:no-line-numbers
|
```vue:no-line-numbers
|
||||||
@@ -97,4 +97,4 @@ Vue Flow is fully written in [TypeScript](https://www.typescriptlang.org/), so i
|
|||||||
avoid common mistakes.
|
avoid common mistakes.
|
||||||
The types are included in the library.
|
The types are included in the library.
|
||||||
|
|
||||||
[You can find the TypeDocs here](https://types.vueflow.dev/).
|
[You can find the TypeDocs here](/typedocs/).
|
||||||
|
|||||||
@@ -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](https://types.vueflow.dev/interfaces/XYPosition.html).</span>
|
a [xy-position](/typedocs/interfaces/XYPosition.html/).</span>
|
||||||
Anything else is optional.
|
Anything else is optional.
|
||||||
|
|
||||||
You can check the full options for a node element in the TypeDocs [here](https://types.vueflow.dev/interfaces/Node.html).
|
You can check the full options for a node element [here](/typedocs/interfaces/Node.html/).
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
@@ -332,7 +332,7 @@ your nodes receive the following props:
|
|||||||
| dragHandle | Node drag handle class | string | true |
|
| dragHandle | Node drag handle class | string | true |
|
||||||
|
|
||||||
|
|
||||||
You can find the TypeDocs [here](https://types.vueflow.dev/interfaces/NodeProps.html).
|
You can find the full description [here](/typedocs/interfaces/NodeProps.html/).
|
||||||
|
|
||||||
## Styling
|
## Styling
|
||||||
|
|
||||||
|
|||||||
@@ -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](https://types.vueflow.dev/modules.html#getBezierPath)
|
### [getBezierPath](/typedocs/functions/getBezierPath.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
Returns a bezier path.
|
Returns a bezier path.
|
||||||
|
|
||||||
### [getBezierCenter](https://types.vueflow.dev/modules.html#getBezierPath)
|
### [getBezierCenter](/typedocs/functions/getBezierCenter.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
Returns a bezier path's center x and y values.
|
Returns a bezier path's center x and y values.
|
||||||
|
|
||||||
### [getSimpleBezierPath](https://types.vueflow.dev/modules.html#getBezierPath)
|
### [getSimpleBezierPath](/typedocs/functions/getSimpleBezierPath.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
Returns a simple bezier path (no curvature at handles).
|
Returns a simple bezier path (no curvature at handles).
|
||||||
|
|
||||||
### [getSimpleBezierCenter](https://types.vueflow.dev/modules.html#getBezierPath)
|
### [getSimpleBezierCenter](/typedocs/functions/getSimpleBezierCenter.html/)
|
||||||
|
|
||||||
- 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](https://types.vueflow.dev/modules.html#getSmoothStepPath)
|
### [getSmoothStepPath](/typedocs/functions/getSmoothStepPath.html/)
|
||||||
|
|
||||||
- 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](https://types.vueflow.dev/modules.html#getEdgeCenter)
|
### [getEdgeCenter](/typedocs/functions/getEdgeCenter.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ export default defineComponent({
|
|||||||
</CodeGroupItem>
|
</CodeGroupItem>
|
||||||
</CodeGroup>
|
</CodeGroup>
|
||||||
|
|
||||||
### [project](https://types.vueflow.dev/modules.html#Project)
|
### [project](/typedocs/types/Project.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
@@ -62,7 +62,7 @@ export default defineComponent({
|
|||||||
vueFlowInstance.project({ x: 100, y: 100 })
|
vueFlowInstance.project({ x: 100, y: 100 })
|
||||||
```
|
```
|
||||||
|
|
||||||
### [fitView](https://types.vueflow.dev/modules.html#FitView)
|
### [fitView](/typedocs/types/FitView.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
@@ -76,7 +76,7 @@ vueFlowInstance.project({ x: 100, y: 100 })
|
|||||||
vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
|
vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
|
||||||
```
|
```
|
||||||
|
|
||||||
### [fitBounds](https://types.vueflow.dev/modules.html#FitBounds)
|
### [fitBounds](/typedocs/types/FitBounds.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
@@ -88,7 +88,7 @@ vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
|
|||||||
vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
|
vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
|
||||||
```
|
```
|
||||||
|
|
||||||
### [setTransform](https://types.vueflow.dev/modules.html#SetTransform)
|
### [setTransform](/typedocs/types/SetTransform.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
@@ -100,26 +100,26 @@ vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
|
|||||||
vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
|
vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
|
||||||
```
|
```
|
||||||
|
|
||||||
### [getTransform](https://types.vueflow.dev/modules.html#GetTransform)
|
### [getTransform](/typedocs/types/GetTransform.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
Gets position and zoom of the pane.
|
Gets position and zoom of the pane.
|
||||||
|
|
||||||
### [zoomIn](https://types.vueflow.dev/modules.html#ZoomInOut)
|
### [zoomIn](/typedocs/types/ZoomInOut.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
Zooms in.
|
Zooms in.
|
||||||
|
|
||||||
|
|
||||||
### [zoomOut](https://types.vueflow.dev/modules.html#ZoomInOut)
|
### [zoomOut](/typedocs/types/ZoomInOut.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
Zooms out.
|
Zooms out.
|
||||||
|
|
||||||
### [zoomTo](https://types.vueflow.dev/modules.html#ZoomTo)
|
### [zoomTo](/typedocs/types/ZoomTo.html/)
|
||||||
|
|
||||||
- Details:
|
- Details:
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user