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

docs: update links and headlines

Browse Source
This commit is contained in:
braks
2022-08-01 17:16:29 +02:00
committed by Braks
parent 90b3bd0bc3
commit d077d41d71
9 changed files with 43 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/.vitepress/config.ts
View File

@@ -122,7 +122,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
text: 'Vue Flow',
collapsible: true,
items: [
{ text: 'Config / Props', link: '/guide/vue-flow/config' },
{ text: 'Configuration', link: '/guide/vue-flow/config' },
{ text: 'State', link: '/guide/vue-flow/state' },
{
text: 'Actions',

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

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

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

@@ -55,6 +55,11 @@ const elements = ref([
</template>
```
::: warning Necessary styles
Make sure you include the necessary styles.
See the [Theming](/guide/theming) section for more info.
:::
## TypeScript
Vue Flow is fully written in [TypeScript](https://www.typescriptlang.org/), so it is highly recommended to use TypeScript to have the best possible DX and

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

@@ -1,5 +1,6 @@
# Theming
## Library styles
VueFlow comes without any pre-injected stylings. Some necessary stylings have to be imported, though optional styles (i.e.
the default theme) can be skipped.

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

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

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

@@ -47,7 +47,7 @@ export default defineComponent({
</template>
```
### [project](/typedocs/types/Project)
## [project](/typedocs/types/Project)
- Details:
@@ -61,7 +61,7 @@ export default defineComponent({
vueFlowInstance.project({ x: 100, y: 100 })
```
### [fitView](/typedocs/types/FitView)
## [fitView](/typedocs/types/FitView)
- Details:
@@ -75,7 +75,7 @@ vueFlowInstance.project({ x: 100, y: 100 })
vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
```
### [fitBounds](/typedocs/types/FitBounds)
## [fitBounds](/typedocs/types/FitBounds)
- Details:
@@ -87,7 +87,7 @@ vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
```
### [setTransform](/typedocs/types/SetTransform)
## [setTransform](/typedocs/types/SetTransform)
- Details:
@@ -99,49 +99,49 @@ vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
```
### [getTransform](/typedocs/types/GetTransform)
## [getTransform](/typedocs/types/GetTransform)
- Details:
Gets position and zoom of the pane.
### [zoomIn](/typedocs/types/ZoomInOut)
## [zoomIn](/typedocs/types/ZoomInOut)
- Details:
Zooms in.
### [zoomOut](/typedocs/types/ZoomInOut)
## [zoomOut](/typedocs/types/ZoomInOut)
- Details:
Zooms out.
### [zoomTo](/typedocs/types/ZoomTo)
## [zoomTo](/typedocs/types/ZoomTo)
- Details:
Zooms to specific level.
### [getElements](/typedocs/interfaces/Getters#getelements)
## [getElements](/typedocs/interfaces/Getters#getelements)
- Details:
Returns currently stored elements (nodes + edges).
### [getNodes](/typedocs/interfaces/Getters#getnodes)
## [getNodes](/typedocs/interfaces/Getters#getnodes)
- Details:
Returns currently stored nodes.
### [getEdges](/typedocs/interfaces/Getters#getedges)
## [getEdges](/typedocs/interfaces/Getters#getedges)
- Details:
Returns currently stored edges.
### [toObject](/typedocs/interfaces/Actions#toobject)
## [toObject](/typedocs/interfaces/Actions#toobject)
- Details:

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

@@ -1,4 +1,6 @@
# Config (Props)
# Configuration
## Options / Props
Vue Flow allows you to configure zoom, graph and flow behavior.
Configuration can be passed either as props to the `VueFlow` component or

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

@@ -1,5 +1,7 @@
# Slots
##
Vue Flow provides several slots for customization.
In addition to the node and edge slots (see the guide on [nodes](/guide/node) and [edges](/guide/edge)),
there are a number of other slots you can use to customize the visualization.

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

@@ -1,5 +1,7 @@
# State
##
Under the hood Vue Flow uses [Provide/Inject](https://v3.vuejs.org/guide/component-provide-inject)
to pass around it's state between components.
You can access the internal state through the [`useVueFlow`](/guide/composables#usevueflow/) composable.