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

docs: add typedoc links and fix edge docs

Browse Source
This commit is contained in:
bcakmakoglu
2022-06-19 21:51:25 +02:00
parent 1dcfb2dfce
commit 9a72a5a0c1
11 changed files with 96 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/guide/components/background.md
+1 -1
View File
@@ -14,7 +14,7 @@ To use the background simply pass the `Background` component as a child to the `
</template> </template>
``` ```
## Props ## [Props](/typedocs/interfaces/BackgroundProps.html/)
| Name | Definition | Type | Optional | Default | | Name | Definition | Type | Optional | Default |
|--------------|-------------------|--------------------------------------------------------------|----------|---------| |--------------|-------------------|--------------------------------------------------------------|----------|---------|
docs/src/guide/components/controls.md
+1 -1
View File
@@ -14,7 +14,7 @@ To use the controls simply pass the `Controls` component as a child to the `VueF
</template> </template>
``` ```
## Props ## [Props](/typedocs/interfaces/ControlProps.html/)
| Name | Definition | Type | Optional | Default | | Name | Definition | Type | Optional | Default |
|-----------------|---------------------------|------------------------------------------------------|----------|---------| |-----------------|---------------------------|------------------------------------------------------|----------|---------|
docs/src/guide/components/minimap-node.md
+1 -1
View File
@@ -19,7 +19,7 @@ To use the component pass the `MiniMapNode` as a child to the [`MiniMap`](/guide
</template> </template>
``` ```
## Props ## [Props](/typedocs/interfaces/MiniMapNodeProps.html/)
| Name | Definition | Type | Optional | Default | | Name | Definition | Type | Optional | Default |
|----------------|---------------------------------|-----------------------------------------------------|----------|---------| |----------------|---------------------------------|-----------------------------------------------------|----------|---------|
docs/src/guide/components/minimap.md
+1 -1
View File
@@ -12,7 +12,7 @@ To use the minimap simply pass the `MiniMap` component as a child to the `VueFlo
</template> </template>
``` ```
## Props ## [Props](/typedocs/interfaces/MiniMapProps.html/)
| Name | Definition | Type | Optional | Default | | Name | Definition | Type | Optional | Default |
|------------------|--------------------------|------------------------------------------------------------------|----------|-------------------------| |------------------|--------------------------|------------------------------------------------------------------|----------|-------------------------|
docs/src/guide/edge.md
+15 -16
View File
@@ -54,10 +54,10 @@ export default defineComponent({
</template> </template>
``` ```
For more For more advanced graphs that require more state access you will want to use the useVueFlow composable.
advanced graphs that require more state access you will want to use the useVueFlow composable. UseVueFlow will provide [useVueFlow](/typedocs/functions/useVueFlow.html/) will provide
you with an you with an [`addEdges`](/typedocs/interfaces/Actions.html#addedges/) utility function, which you can use to add edges
`addNodes` utility function, which you can use to add nodes directly to the state. directly to the state.
```vue:no-line-numbers ```vue:no-line-numbers
<script setup> <script setup>
@@ -98,15 +98,14 @@ onMounted(() => {
</template> </template>
``` ```
You can also apply changes (like removing elements safely) using the `applyEdgeChanges` utility function, which expects an array of changes to be You can also apply changes (like removing elements safely) using
applied to the currently stored edges. 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. Vue Flow comes with built-in edges that you can use right out of the box.
These node types include `default`, `input` and `output`. These edge types include `default` (bezier), `step`, `smoothstep` and `straight`.
You can set a label on each of these types.
### Default Edge (Bezier) ### Default Edge (Bezier)
@@ -231,10 +230,12 @@ const elements = ref([
### Edge-types object ### 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 ::: 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. Otherwise, vue will throw a warning in the console.
::: :::
@@ -317,7 +318,7 @@ const elements = ref([
</template> </template>
``` ```
### Custom Edge Props ### [Custom Edge Props](/typedocs/interfaces/EdgeProps.html/)
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
@@ -351,5 +352,3 @@ your edges receive the following props:
| markerStart | Edge marker | string | true | | markerStart | Edge marker | string | true |
| 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 full description [here](/typedocs/interfaces/EdgeProps.html/).
docs/src/guide/node.md
+15 -17
View File
@@ -50,10 +50,10 @@ export default defineComponent({
</template> </template>
``` ```
For more For more advanced graphs that require more state access you will want to use the useVueFlow composable.
advanced graphs that require more state access you will want to use the useVueFlow composable. UseVueFlow will provide [useVueFlow](/typedocs/functions/useVueFlow.html/) will provide
you with an you with an [`addNodes`](/typedocs/interfaces/Actions.html#addnodes/) utility function, which you can use to add nodes
`addNodes` utility function, which you can use to add nodes directly to the state. directly to the state.
```vue:no-line-numbers ```vue:no-line-numbers
<script setup> <script setup>
@@ -88,8 +88,8 @@ onMounted(() => {
</template> </template>
``` ```
You can also apply changes (like removing elements safely) using the `applyNodeChanges` utility function, which expects an array of changes to be You can also apply changes using the [`applyNodeChanges`](/typedocs/interfaces/Actions.html#applynodechanges/) utility function,
applied to the currently stored nodes. which expects an array of [changes](/typedocs/types/NodeChange.html/) to be applied to the currently stored nodes.
```vue:no-line-numbers ```vue:no-line-numbers
<script setup> <script setup>
@@ -123,13 +123,11 @@ onMounted(() => {
</template> </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. 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`.
You can set a label on each of these types.
### Default Node ### Default Node
![vue flow default node](https://images.prismic.io/bcakmakoglu/235b4a10-5bdc-41c0-ba3f-4fb402fba65f_Default-node.png?auto=compress,format) ![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 ### 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 ::: 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. Otherwise, vue will throw a warning in the console.
::: :::
@@ -263,7 +263,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/custom-node.html/).
::: :::
### Node Template ### Node Template
@@ -304,7 +304,7 @@ const elements = ref([
</template> </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. 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
@@ -331,9 +331,6 @@ your nodes receive the following props:
| sourcePosition | Source handle position | Position | true | | sourcePosition | Source handle position | Position | true |
| dragHandle | Node drag handle class | string | true | | dragHandle | Node drag handle class | string | true |
You can find the full description [here](/typedocs/interfaces/NodeProps.html/).
## Styling ## Styling
::: tip ::: 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 ### 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 default the `noWheelClassName` is `.nowheel`.
By adding this class you can also enable scrolling inside a node. By adding this class you can also enable scrolling inside a node.
docs/src/guide/theming.md
+1 -1
View File
@@ -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. 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/graph.md
+15 -13
View File
@@ -1,6 +1,6 @@
# Graph # Graph
### isEdge ### [isEdge](/typedocs/functions/isEdge.html/)
- Details: - Details:
@@ -34,7 +34,7 @@ const toggleClass = () => {
</template> </template>
``` ```
### isNode ### [isNode](/typedocs/functions/isNode.html/)
- Details: - Details:
@@ -68,10 +68,11 @@ const toggleClass = () => {
</template> </template>
``` ```
### addEdge ### [addEdge](/typedocs/functions/isEdge.html/)
::: warning ::: 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: - Details:
@@ -100,10 +101,11 @@ const onConnect = (params) => {
</template> </template>
``` ```
### updateEdge ### [updateEdge](/typedocs/functions/updateEdge.html)
::: warning ::: 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: - Details:
@@ -132,31 +134,31 @@ const onEdgeUpdate = ({ edge, connection }) => {
</template> </template>
``` ```
### getOutgoers ### [getOutgoers](/typedocs/functions/getOutgoers.html/)
- Details: - Details:
Returns all target elements of a node. Returns all target elements of a node.
### getIncomers ### [getIncomers](/typedocs/functions/getIncomers.html/)
- Details: - Details:
Returns all source elements of a node. Returns all source elements of a node.
### getConnectedEdges ### [getConnectedEdges](/typedocs/functions/getConnectedEdges.html/)
- Details: - Details:
Returns all connected edges of a node. Returns all connected edges of a node.
### getTransformForBounds ### [getTransformForBounds](/typedocs/functions/getTransformForBounds.html/)
- Details: - Details:
Returns a transformation for the viewport according to input bounds. Returns a transformation for the viewport according to input bounds.
### getRectOfNodes ### [getRectOfNodes](/typedocs/functions/getRectOfNodes.html/)
- Details: - Details:
@@ -164,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 ### [getNodesInside](/typedocs/functions/getNodesInside.html/)
- Details: - Details:
Returns node elements that are inside a specified rect. Returns node elements that are inside a specified rect.
### getMarkerId ### [getMarkerId](/typedocs/functions/getMarkerId.html/)
- Details: - Details:
docs/src/guide/utils/instance.md
+8 -7
View File
@@ -1,7 +1,8 @@
# Viewport Functions # Viewport Functions
Viewport Functions can be accessed via the `useVueFlow` utility or with the `VueFlowStore` instance provided by Viewport Functions can be accessed via the [`useVueFlow`](/guide/composables.html#usevueflow/)
`onPaneReady`. utility or with the [`VueFlowStore`](/typedocs/types/VueFlowStore.html/)
instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents.html#paneready/).
<CodeGroup> <CodeGroup>
<CodeGroupItem title="Composition API" active> <CodeGroupItem title="Composition API" active>
@@ -45,6 +46,7 @@ export default defineComponent({
<VueFlow @pane-ready="onPaneReady" /> <VueFlow @pane-ready="onPaneReady" />
</template> </template>
``` ```
</CodeGroupItem> </CodeGroupItem>
</CodeGroup> </CodeGroup>
@@ -112,7 +114,6 @@ vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
Zooms in. Zooms in.
### [zoomOut](/typedocs/types/ZoomInOut.html/) ### [zoomOut](/typedocs/types/ZoomInOut.html/)
- Details: - Details:
@@ -125,25 +126,25 @@ vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
Zooms to specific level. Zooms to specific level.
### getElements ### [getElements](/typedocs/interfaces/Getters.html#getelements/)
- Details: - Details:
Returns currently stored elements (nodes + edges). Returns currently stored elements (nodes + edges).
### getNodes ### [getNodes](/typedocs/interfaces/Getters.html#getnodes/)
- Details: - Details:
Returns currently stored nodes. Returns currently stored nodes.
### getEdges ### [getEdges](/typedocs/interfaces/Getters.html#getedges/)
- Details: - Details:
Returns currently stored edges. Returns currently stored edges.
### toObject ### [toObject](/typedocs/interfaces/Actions.html#toobject/)
- Details: - Details:
docs/src/guide/vue-flow/config.md
+9 -6
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` composable. as options to the [`useVueFlow`](/guide/composables.html#usevueflow/) composable.
<CodeGroup> <CodeGroup>
<CodeGroupItem title="Props" active> <CodeGroupItem title="Props" active>
@@ -36,7 +36,8 @@ useVueFlow({
## Updating Config ## 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> <CodeGroup>
<CodeGroupItem title="Props" active> <CodeGroupItem title="Props" active>
@@ -269,7 +270,8 @@ const edges = ref([
Enable/disable default state update handlers. 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: - Example:
@@ -435,7 +437,8 @@ const edges = ref([
- Details: - 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 Useful if you want to allow for scrolling _inside_ a node
@@ -528,7 +531,6 @@ const edges = ref([
Define a key which can be used to activate remove elements from the pane. Define a key which can be used to activate remove elements from the pane.
## Global Node Options ## Global Node Options
### nodes-draggable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### nodes-draggable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
@@ -732,7 +734,8 @@ 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 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]))`. This option can be used as a shorthand for `onConnect((params) => addEdges([params]))`.
docs/src/guide/vue-flow/state.md
+21 -11
View File
@@ -2,9 +2,10 @@
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.html)
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` 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 [`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. 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
state is reactive and changes will be reflected on the graph. 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 ## 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. to reading, writing and updating the state.
Consider this example, where we want to create a Sidebar that allows us to select all nodes. 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> </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. We could pass all necessary info as props to the Sidebar, which could become either tedious or result in prop drilling,
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. 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} ```vue:no-line-numbers{5-6}
<script> <script>
@@ -85,14 +90,17 @@ const selectAll = () => {
``` ```
::: tip ::: 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. If you have multiple store instances in the same context, make sure to give them a unique id in order to guarantee
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. 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
State updates like removing elements or updating positions are applied by default. 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 ```vue:no-line-numbers
<div style="height: 300px"> <div style="height: 300px">
@@ -100,14 +108,16 @@ If you want to strictly control state changes you can disable this behavior by s
</div> </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 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. come with the library to mix it up.
## Access State in Options API ## 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. `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. when mounted.
```vue:no-line-numbers{4,32} ```vue:no-line-numbers{4,32}