From 9a72a5a0c1cf597a228eaa13bee70bd93bcc86db Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 19 Jun 2022 21:31:36 +0200
Subject: [PATCH] docs: add typedoc links and fix edge docs

---
 docs/src/guide/components/background.md   |  2 +-
 docs/src/guide/components/controls.md     |  2 +-
 docs/src/guide/components/minimap-node.md |  2 +-
 docs/src/guide/components/minimap.md      |  2 +-
 docs/src/guide/edge.md                    | 31 ++++++++++---------
 docs/src/guide/node.md                    | 32 ++++++++++----------
 docs/src/guide/theming.md                 |  2 +-
 docs/src/guide/utils/graph.md             | 28 ++++++++++--------
 docs/src/guide/utils/instance.md          | 15 +++++-----
 docs/src/guide/vue-flow/config.md         | 27 +++++++++--------
 docs/src/guide/vue-flow/state.md          | 36 +++++++++++++++--------
 11 files changed, 96 insertions(+), 83 deletions(-)

diff --git a/docs/src/guide/components/background.md b/docs/src/guide/components/background.md
index 34dd5168..1f8b3236 100644
--- a/docs/src/guide/components/background.md
+++ b/docs/src/guide/components/background.md
@@ -14,7 +14,7 @@ To use the background simply pass the `Background` component as a child to the `
 </template>
 ```
 
-## Props
+## [Props](/typedocs/interfaces/BackgroundProps.html/)
 
 | Name         | Definition        | Type                                                         | Optional | Default |
 |--------------|-------------------|--------------------------------------------------------------|----------|---------|
diff --git a/docs/src/guide/components/controls.md b/docs/src/guide/components/controls.md
index 3217b7a6..0a1f0a91 100644
--- a/docs/src/guide/components/controls.md
+++ b/docs/src/guide/components/controls.md
@@ -14,7 +14,7 @@ To use the controls simply pass the `Controls` component as a child to the `VueF
 </template>
 ```
 
-## Props
+## [Props](/typedocs/interfaces/ControlProps.html/)
 
 | Name            | Definition                | Type                                                 | Optional | Default |
 |-----------------|---------------------------|------------------------------------------------------|----------|---------|
diff --git a/docs/src/guide/components/minimap-node.md b/docs/src/guide/components/minimap-node.md
index 0204ac1a..1ec04bab 100644
--- a/docs/src/guide/components/minimap-node.md
+++ b/docs/src/guide/components/minimap-node.md
@@ -19,7 +19,7 @@ To use the component pass the `MiniMapNode` as a child to the [`MiniMap`](/guide
 </template>
 ```
 
-## Props
+## [Props](/typedocs/interfaces/MiniMapNodeProps.html/)
 
 | Name           | Definition                      | Type                                                | Optional | Default |
 |----------------|---------------------------------|-----------------------------------------------------|----------|---------|
diff --git a/docs/src/guide/components/minimap.md b/docs/src/guide/components/minimap.md
index 83185b82..faec7358 100644
--- a/docs/src/guide/components/minimap.md
+++ b/docs/src/guide/components/minimap.md
@@ -12,7 +12,7 @@ To use the minimap simply pass the `MiniMap` component as a child to the `VueFlo
 </template>
 ```
 
-## Props
+## [Props](/typedocs/interfaces/MiniMapProps.html/)
 
 | Name             | Definition               | Type                                                             | Optional | Default                 |
 |------------------|--------------------------|------------------------------------------------------------------|----------|-------------------------|
diff --git a/docs/src/guide/edge.md b/docs/src/guide/edge.md
index 00b04f11..87f0d0e6 100644
--- a/docs/src/guide/edge.md
+++ b/docs/src/guide/edge.md
@@ -54,10 +54,10 @@ export default defineComponent({
 </template>
 ```
 
-For more
-advanced graphs that require more state access you will want to use the useVueFlow composable. UseVueFlow will provide
-you with an
-`addNodes` utility function, which you can use to add nodes directly to the state.
+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
+directly to the state.
 
 ```vue:no-line-numbers
 <script setup>
@@ -98,15 +98,14 @@ onMounted(() => {
 </template>
 ```
 
-You can also apply changes (like removing elements safely) using the `applyEdgeChanges` utility function, which expects an array of changes to be
-applied to the currently stored edges.
+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.
 
-## Default Edge-Types
+## [Default Edge-Types](typedocs/types/DefaultEdgeTypes.html/)
 
-Vue Flow comes with built-in nodes that you can use right out of the box.
-These node types include `default`, `input` and `output`.
-
-You can set a label on each of these types.
+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`.
 
 ### Default Edge (Bezier)
 
@@ -231,10 +230,12 @@ const elements = ref([
 
 ### Edge-types object
 
-You can also define edge-types by passing an object as a prop to the VueFlow component (or as an option to the composable).
+You can also define edge-types by passing an object as a prop to the VueFlow component (or as an option to the
+composable).
 
 ::: warning
-When doing this, mark your components as raw (using the designated function from the vue library) to avoid them being turned into reactive objects.
+When doing this, mark your components as raw (using the designated function from the vue library) to avoid them being
+turned into reactive objects.
 Otherwise, vue will throw a warning in the console.
 :::
 
@@ -317,7 +318,7 @@ const elements = ref([
 </template>
 ```
 
-### Custom Edge Props
+### [Custom Edge Props](/typedocs/interfaces/EdgeProps.html/)
 
 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
@@ -351,5 +352,3 @@ your edges receive the following props:
 | markerStart         | Edge marker                 | string            | true     |
 | markerEnd           | Edge marker                 | string            | true     |
 | curvature           | Edge path curvature         | number            | true     |
-
-You can find the full description [here](/typedocs/interfaces/EdgeProps.html/).
diff --git a/docs/src/guide/node.md b/docs/src/guide/node.md
index a358b3d3..c479e796 100644
--- a/docs/src/guide/node.md
+++ b/docs/src/guide/node.md
@@ -50,10 +50,10 @@ export default defineComponent({
 </template>
 ```
 
-For more
-advanced graphs that require more state access you will want to use the useVueFlow composable. UseVueFlow will provide
-you with an
-`addNodes` utility function, which you can use to add nodes directly to the state.
+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
+directly to the state.
 
 ```vue:no-line-numbers
 <script setup>
@@ -88,8 +88,8 @@ onMounted(() => {
 </template>
 ```
 
-You can also apply changes (like removing elements safely) using the `applyNodeChanges` utility function, which expects an array of changes to be
-applied to the currently stored nodes.
+You can also apply changes using the [`applyNodeChanges`](/typedocs/interfaces/Actions.html#applynodechanges/) utility function,
+which expects an array of [changes](/typedocs/types/NodeChange.html/) to be applied to the currently stored nodes.
 
 ```vue:no-line-numbers
 <script setup>
@@ -123,13 +123,11 @@ onMounted(() => {
 </template>
 ```
 
-## Default Node-Types
+## [Default Node-Types](/typedocs/types/DefaultNodeTypes.html/)
 
 Vue Flow comes with built-in nodes that you can use right out of the box.
 These node types include `default`, `input` and `output`.
 
-You can set a label on each of these types.
-
 ### Default Node
 
 ![vue flow default node](https://images.prismic.io/bcakmakoglu/235b4a10-5bdc-41c0-ba3f-4fb402fba65f_Default-node.png?auto=compress,format)
@@ -224,10 +222,12 @@ const elements = ref([
 
 ### Node-types object
 
-You can also define node-types by passing an object as a prop to the VueFlow component (or as an option to the composable).
+You can also define node-types by passing an object as a prop to the VueFlow component (or as an option to the
+composable).
 
 ::: warning
-When doing this, mark your components as raw (using the designated function from the vue library) to avoid them being turned into reactive objects.
+When doing this, mark your components as raw (using the designated function from the vue library) to avoid them being
+turned into reactive objects.
 Otherwise, vue will throw a warning in the console.
 :::
 
@@ -263,7 +263,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/custom-node.html/).
 :::
 
 ### Node Template
@@ -304,7 +304,7 @@ const elements = ref([
 </template>
 ```
 
-### Custom Node Props
+### [(Custom) Node Props](/typedocs/interfaces/NodeProps.html/)
 
 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
@@ -331,9 +331,6 @@ your nodes receive the following props:
 | sourcePosition   | Source handle position                           | Position          | true     |
 | dragHandle       | Node drag handle class                           | string            | true     |
 
-
-You can find the full description [here](/typedocs/interfaces/NodeProps.html/).
-
 ## Styling
 
 ::: tip
@@ -354,6 +351,7 @@ When you create a new node type you also need to implement some styling. Your cu
 
 ### Allow scrolling inside a node
 
-You can use the `noWheelClassName` prop to define a class which will prevent zoom-on-scroll or pan-on-scroll behavior on that element.
+You can use the `noWheelClassName` prop to define a class which will prevent zoom-on-scroll or pan-on-scroll behavior on
+that element.
 By default the `noWheelClassName` is `.nowheel`.
 By adding this class you can also enable scrolling inside a node.
diff --git a/docs/src/guide/theming.md b/docs/src/guide/theming.md
index ae8c04fe..cfde4d8e 100644
--- a/docs/src/guide/theming.md
+++ b/docs/src/guide/theming.md
@@ -72,7 +72,7 @@ const nodes = ref<Node[]>([
 ])
 ```
 
-### Using CSS variables
+### [Using CSS variables](typedocs/types/CSSVars.html/)
 
 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.
diff --git a/docs/src/guide/utils/graph.md b/docs/src/guide/utils/graph.md
index a4027da7..06f41452 100644
--- a/docs/src/guide/utils/graph.md
+++ b/docs/src/guide/utils/graph.md
@@ -1,6 +1,6 @@
 # Graph
 
-### isEdge
+### [isEdge](/typedocs/functions/isEdge.html/)
 
 - Details:
 
@@ -34,7 +34,7 @@ const toggleClass = () => {
 </template>
 ```
 
-### isNode
+### [isNode](/typedocs/functions/isNode.html/)
 
 - Details:
 
@@ -68,10 +68,11 @@ const toggleClass = () => {
 </template>
 ```
 
-### addEdge
+### [addEdge](/typedocs/functions/isEdge.html/)
 
 ::: warning
-When using composition you should access `addEdges` from `useVueFlow`
+In the composition API you should use [`addEdges`](/typedocs/types/AddEdges.html/)
+of [`useVueFlow`](/guide/composables.html#usevueflow/)
 :::
 
 - Details:
@@ -100,10 +101,11 @@ const onConnect = (params) => {
 </template>
 ```
 
-### updateEdge
+### [updateEdge](/typedocs/functions/updateEdge.html)
 
 ::: warning
-When using composition you should access `updateEdge` from `useVueFlow`
+In the composition API you use access [`updateEdge`](/typedocs/types/UpdateEdge.html)
+of [`useVueFlow`](/guide/composables.html#usevueflow/)
 :::
 
 - Details:
@@ -132,31 +134,31 @@ const onEdgeUpdate = ({ edge, connection }) => {
 </template>
 ```
 
-### getOutgoers
+### [getOutgoers](/typedocs/functions/getOutgoers.html/)
 
 - Details:
 
   Returns all target elements of a node.
 
-### getIncomers
+### [getIncomers](/typedocs/functions/getIncomers.html/)
 
 - Details:
 
   Returns all source elements of a node.
 
-### getConnectedEdges
+### [getConnectedEdges](/typedocs/functions/getConnectedEdges.html/)
 
 - Details:
 
   Returns all connected edges of a node.
 
-### getTransformForBounds
+### [getTransformForBounds](/typedocs/functions/getTransformForBounds.html/)
 
 - Details:
 
   Returns a transformation for the viewport according to input bounds.
 
-### getRectOfNodes
+### [getRectOfNodes](/typedocs/functions/getRectOfNodes.html/)
 
 - Details:
 
@@ -164,13 +166,13 @@ const onEdgeUpdate = ({ edge, connection }) => {
 
   Useful when you need to know the boundaries of a set of nodes.
 
-### getNodesInside
+### [getNodesInside](/typedocs/functions/getNodesInside.html/)
 
 - Details:
 
   Returns node elements that are inside a specified rect.
 
-### getMarkerId
+### [getMarkerId](/typedocs/functions/getMarkerId.html/)
 
 - Details:
 
diff --git a/docs/src/guide/utils/instance.md b/docs/src/guide/utils/instance.md
index 269596e2..9b2c42ba 100644
--- a/docs/src/guide/utils/instance.md
+++ b/docs/src/guide/utils/instance.md
@@ -1,7 +1,8 @@
 # Viewport Functions
 
-Viewport Functions can be accessed via the `useVueFlow` utility or with the `VueFlowStore` instance provided by
-`onPaneReady`.
+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/).
 
 <CodeGroup>
   <CodeGroupItem title="Composition API" active>
@@ -45,6 +46,7 @@ export default defineComponent({
   <VueFlow @pane-ready="onPaneReady" />
 </template>
 ```
+
   </CodeGroupItem>
 </CodeGroup>
 
@@ -112,7 +114,6 @@ vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
 
   Zooms in.
 
-
 ### [zoomOut](/typedocs/types/ZoomInOut.html/)
 
 - Details:
@@ -125,25 +126,25 @@ vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
 
   Zooms to specific level.
 
-### getElements
+### [getElements](/typedocs/interfaces/Getters.html#getelements/)
 
 - Details:
 
   Returns currently stored elements (nodes + edges).
 
-### getNodes
+### [getNodes](/typedocs/interfaces/Getters.html#getnodes/)
 
 - Details:
 
   Returns currently stored nodes.
 
-### getEdges
+### [getEdges](/typedocs/interfaces/Getters.html#getedges/)
 
 - Details:
 
   Returns currently stored edges.
 
-### toObject
+### [toObject](/typedocs/interfaces/Actions.html#toobject/)
 
 - Details:
 
diff --git a/docs/src/guide/vue-flow/config.md b/docs/src/guide/vue-flow/config.md
index 26f9f835..40af3cac 100644
--- a/docs/src/guide/vue-flow/config.md
+++ b/docs/src/guide/vue-flow/config.md
@@ -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` composable.
+as options to the [`useVueFlow`](/guide/composables.html#usevueflow/) composable.
 
 <CodeGroup>
   <CodeGroupItem title="Props" active>
@@ -36,7 +36,8 @@ useVueFlow({
 
 ## Updating Config
 
-You can update the configuration at any point, either by having them bound as props or using the state values returned by `useVueFlow`.
+You can update the configuration at any point, either by having them bound as props or using the state values returned
+by `useVueFlow`.
 
 <CodeGroup>
   <CodeGroupItem title="Props" active>
@@ -269,7 +270,8 @@ const edges = ref([
 
   Enable/disable default state update handlers.
 
-  If you want to have full control of state changes, you can disable the default behavior and apply your own change handlers to the state.
+  If you want to have full control of state changes, you can disable the default behavior and apply your own change
+  handlers to the state.
 
 - Example:
 
@@ -312,7 +314,7 @@ const edges = ref([
 - Details:
 
   The path to use when drawing a connection-line (`bezier`, `step`, `smoothstep`).
-  
+
   When using a custom connection line this prop does nothing.
 
 ### connection-line-style <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
@@ -343,7 +345,7 @@ const edges = ref([
 
 - Details:
 
-  Define a key which can be used to activate zoom. 
+  Define a key which can be used to activate zoom.
 
   Overwrites zoom-on-scroll or pan-on-scroll behavior as long as the key is pressed.
 
@@ -405,7 +407,7 @@ const edges = ref([
 
   Specify on which axis panning is allowed (x, y or both).
 
-### pan-on-drag <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> 
+### pan-on-drag <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
 
 - Old name: `paneMovable`
 
@@ -435,7 +437,8 @@ const edges = ref([
 
 - Details:
 
-  Set a class name which prevents elements from triggering wheel-scroll events (thus disabling zoom/pan-scroll behavior on the element).
+  Set a class name which prevents elements from triggering wheel-scroll events (thus disabling zoom/pan-scroll behavior
+  on the element).
 
   Useful if you want to allow for scrolling _inside_ a node
 
@@ -481,7 +484,7 @@ const edges = ref([
 
 - Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent.html/)
 
-- Default: 
+- Default:
 
 ```ts:no-line-numbers
 [
@@ -528,7 +531,6 @@ const edges = ref([
 
   Define a key which can be used to activate remove elements from the pane.
 
-
 ## Global Node Options
 
 ### nodes-draggable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
@@ -539,7 +541,7 @@ const edges = ref([
 
 - Details:
 
-  Globally enable/disable dragging nodes. 
+  Globally enable/disable dragging nodes.
 
   Can be overwritten by setting `draggable` on a specific node element.
 
@@ -708,7 +710,7 @@ const elements = ref([
 
 - Details:
 
-  Allow edges to be created by clicking two handles in a row. 
+  Allow edges to be created by clicking two handles in a row.
 
   Useful if you want to enable creating edges on a touch device.
 
@@ -732,7 +734,8 @@ 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 an edge is not allowed).
+  Also accepts a [`Connector`](/typedocs/types/Connector.html/) 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]))`.
 
diff --git a/docs/src/guide/vue-flow/state.md b/docs/src/guide/vue-flow/state.md
index 6bc4e4c8..b4a0115a 100644
--- a/docs/src/guide/vue-flow/state.md
+++ b/docs/src/guide/vue-flow/state.md
@@ -2,10 +2,11 @@
 
 Under the hood Vue Flow uses [Provide/Inject](https://v3.vuejs.org/guide/component-provide-inject.html)
 to pass around it's state between components.
-You can access the internal state through the `useVueFlow` composable.
+You can access the internal state through the [`useVueFlow`](/guide/composables.html#usevueflow/) composable.
 
-`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. 
+[`useVueFlow`](/guide/composables.html#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
 state is reactive and changes will be reflected on the graph.
 
@@ -27,7 +28,8 @@ watch(getNodes, (nodes) => console.log('nodes changed', nodes))
 
 ## Accessing Internal State
 
-Using the composition API also allows us to pass the state around outside the current component context, thus we have a lot more flexibility when  it comes
+Using the composition API also allows us to pass the state around outside the current component context, thus we have a
+lot more flexibility when it comes
 to reading, writing and updating the state.
 
 Consider this example, where we want to create a Sidebar that allows us to select all nodes.
@@ -44,10 +46,13 @@ Consider this example, where we want to create a Sidebar that allows us to selec
 </template>
 ```
 
-We could pass all necessary info as props to the Sidebar, which could become either tedious or result in prop drilling, which we want to avoid.
-In this example it wouldn't be a big issue but if our destination was 3 components deep, it would become hard to track the flow of information.
+We could pass all necessary info as props to the Sidebar, which could become either tedious or result in prop drilling,
+which we want to avoid.
+In this example it wouldn't be a big issue but if our destination was 3 components deep, it would become hard to track
+the flow of information.
 
-Instead, we can initialize a Vue Flow store instance __before__ the Sidebar is initialized, thus the instance becomes available as an injection in the component tree.
+Instead, we can initialize a Vue Flow store instance __before__ the Sidebar is initialized, thus the instance becomes
+available as an injection in the component tree.
 
 ```vue:no-line-numbers{5-6}
 <script>
@@ -85,14 +90,17 @@ const selectAll = () => {
 ```
 
 ::: tip
-If you have multiple store instances in the same context, make sure to give them a unique id in order to guarantee access to the correct instance.
-Otherwise `useVueFlow` will try to inject the first instance it can find in the current context, which would usually be the last one that has been injected.
-::: 
+If you have multiple store instances in the same context, make sure to give them a unique id in order to guarantee
+access to the correct instance.
+Otherwise `useVueFlow` will try to inject the first instance it can find in the current context, which would usually be
+the last one that has been injected.
+:::
 
 ## State Updates
 
 State updates like removing elements or updating positions are applied by default.
-If you want to strictly control state changes you can disable this behavior by setting the `applyDefault` option/prop to `false`.
+If you want to strictly control state changes you can disable this behavior by setting the `applyDefault` option/prop
+to `false`.
 
 ```vue:no-line-numbers
 <div style="height: 300px">
@@ -100,14 +108,16 @@ If you want to strictly control state changes you can disable this behavior by s
 </div>
 ```
 
-State changes are emitted by the `onNodesChange` or `onEdgesChange` events, which will provide an array of changes that have been triggered.
+State changes are emitted by the `onNodesChange` or `onEdgesChange` events, which will provide an array of changes that
+have been triggered.
 To take control of state changes you can implement your own state update handlers or use the state helper functions that
 come with the library to mix it up.
 
 ## Access State in Options API
 
 `useVueFlow` was designed to be used in the composition API, __but__ it is still possible to use it in the options API.
-Though it is necessary to pass a unique id for your Vue Flow state instance, otherwise a look-up will fail and Vue Flow will create a new state instance 
+Though it is necessary to pass a unique id for your Vue Flow state instance, otherwise a look-up will fail and Vue Flow
+will create a new state instance
 when mounted.
 
 ```vue:no-line-numbers{4,32}