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

docs: replace old typedoc links

Browse Source
This commit is contained in:
bcakmakoglu
2022-06-15 12:47:57 +02:00
committed by Braks
parent 3587478e5f
commit 53a85bf49b
7 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
# 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.
@@ -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](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
using viewpane transforms.
@@ -55,7 +55,7 @@ const { fitView } = useZoomPanHelper()
</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`
provides you with a mouseDown- and click-handler functions that you can apply to the element you want to use as a

26
docs/src/guide/config.md
View File

@@ -90,7 +90,7 @@ onMounted(() => {
### 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:
@@ -122,7 +122,7 @@ const elements = ref([
### 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:
@@ -152,7 +152,7 @@ const nodes = ref([
### 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:
@@ -187,9 +187,9 @@ const edges = ref([
### 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:
@@ -224,9 +224,9 @@ const edges = ref([
### 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:
@@ -295,7 +295,7 @@ const edges = ref([
### 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`
@@ -305,7 +305,7 @@ const edges = ref([
### 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`
@@ -397,7 +397,7 @@ const edges = ref([
### 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`
@@ -479,7 +479,7 @@ const edges = ref([
### 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:
@@ -589,7 +589,7 @@ const elements = ref([
### 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:
@@ -640,7 +640,7 @@ const elements = ref([
### 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]`

4
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](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
@@ -352,4 +352,4 @@ your edges receive the following props:
| markerEnd | Edge marker | string | 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/).

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>](https://types.vueflow.dev/interfaces/Node.html)
and (optionally) [<span class="font-bold text-purple-500">edges</span>](https://types.vueflow.dev/interfaces/Edge.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>](/typedocs/interfaces/Edge.html).
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>
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).
```vue:no-line-numbers
@@ -97,4 +97,4 @@ Vue Flow is fully written in [TypeScript](https://www.typescriptlang.org/), so i
avoid common mistakes.
The types are included in the library.
[You can find the TypeDocs here](https://types.vueflow.dev/).
[You can find the TypeDocs here](/typedocs/).

6
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](https://types.vueflow.dev/interfaces/XYPosition.html).</span>
a [xy-position](/typedocs/interfaces/XYPosition.html/).</span>
Anything else is optional.
You can check the full options for a node element in the TypeDocs [here](https://types.vueflow.dev/interfaces/Node.html).
You can check the full options for a node element [here](/typedocs/interfaces/Node.html/).
## Usage
@@ -332,7 +332,7 @@ your nodes receive the following props:
| 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

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](https://types.vueflow.dev/modules.html#getBezierPath)
### [getBezierPath](/typedocs/functions/getBezierPath.html/)
- Details:
Returns a bezier path.
### [getBezierCenter](https://types.vueflow.dev/modules.html#getBezierPath)
### [getBezierCenter](/typedocs/functions/getBezierCenter.html/)
- Details:
Returns a bezier path's center x and y values.
### [getSimpleBezierPath](https://types.vueflow.dev/modules.html#getBezierPath)
### [getSimpleBezierPath](/typedocs/functions/getSimpleBezierPath.html/)
- Details:
Returns a simple bezier path (no curvature at handles).
### [getSimpleBezierCenter](https://types.vueflow.dev/modules.html#getBezierPath)
### [getSimpleBezierCenter](/typedocs/functions/getSimpleBezierCenter.html/)
- Details:
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:
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:

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

@@ -48,7 +48,7 @@ export default defineComponent({
</CodeGroupItem>
</CodeGroup>
### [project](https://types.vueflow.dev/modules.html#Project)
### [project](/typedocs/types/Project.html/)
- Details:
@@ -62,7 +62,7 @@ export default defineComponent({
vueFlowInstance.project({ x: 100, y: 100 })
```
### [fitView](https://types.vueflow.dev/modules.html#FitView)
### [fitView](/typedocs/types/FitView.html/)
- Details:
@@ -76,7 +76,7 @@ vueFlowInstance.project({ x: 100, y: 100 })
vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
```
### [fitBounds](https://types.vueflow.dev/modules.html#FitBounds)
### [fitBounds](/typedocs/types/FitBounds.html/)
- Details:
@@ -88,7 +88,7 @@ vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
```
### [setTransform](https://types.vueflow.dev/modules.html#SetTransform)
### [setTransform](/typedocs/types/SetTransform.html/)
- Details:
@@ -100,26 +100,26 @@ vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
```
### [getTransform](https://types.vueflow.dev/modules.html#GetTransform)
### [getTransform](/typedocs/types/GetTransform.html/)
- Details:
Gets position and zoom of the pane.
### [zoomIn](https://types.vueflow.dev/modules.html#ZoomInOut)
### [zoomIn](/typedocs/types/ZoomInOut.html/)
- Details:
Zooms in.
### [zoomOut](https://types.vueflow.dev/modules.html#ZoomInOut)
### [zoomOut](/typedocs/types/ZoomInOut.html/)
- Details:
Zooms out.
### [zoomTo](https://types.vueflow.dev/modules.html#ZoomTo)
### [zoomTo](/typedocs/types/ZoomTo.html/)
- Details: