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

docs: replace vuepress specific components

Browse Source
This commit is contained in:
braks
2022-08-01 21:10:14 +02:00
committed by Braks
parent af78b52233
commit f386ea454c
26 changed files with 99 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/home/Features.vue
+5 -4
View File
@@ -1,10 +1,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
import type { VueFlowStore } from '@braks/vue-flow' import type { VueFlowStore } from '@braks/vue-flow'
import Basic from './flows/Basic.vue'
import RGB from './flows/RGB.vue'
import Nested from './flows/Nested.vue'
import Additional from './flows/Additional.vue'
const breakpoints = useBreakpoints(breakpointsTailwind) const el = ref<HTMLDivElement>()
const el = ref()
const instances: VueFlowStore[] = [] const instances: VueFlowStore[] = []
const onLoad = (instance: VueFlowStore) => { const onLoad = (instance: VueFlowStore) => {
docs/components/home/flows/Additional.vue
+1 -1
View File
@@ -106,7 +106,7 @@ onPaneReady((i) => emit('pane', i))
<br /> <br />
Plus it's built for composition, making the access of the internal state easy as can be! Plus it's built for composition, making the access of the internal state easy as can be!
</p> </p>
<router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link> <a class="docs-button max-w-max" href="/guide/"> Documentation </a>
</div> </div>
</div> </div>
</template> </template>
docs/components/home/flows/Basic.vue
+1 -1
View File
@@ -111,7 +111,7 @@ onConnect((param) => {
Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable
elements, customizable nodes and edges and a bunch of event handlers. elements, customizable nodes and edges and a bunch of event handlers.
</p> </p>
<router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link> <a class="docs-button max-w-max" href="/guide/"> Documentation </a>
</div> </div>
</div> </div>
<div <div
docs/components/home/flows/Nested.vue
+1 -1
View File
@@ -65,7 +65,7 @@ onPaneReady((i) => emit('pane', i))
<br /> <br />
No worries! Vue Flow supports creating nested nodes and nested graphs out-of-the-box. No worries! Vue Flow supports creating nested nodes and nested graphs out-of-the-box.
</p> </p>
<router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link> <a class="docs-button max-w-max" href="/guide/"> Documentation </a>
</div> </div>
</div> </div>
<div <div
docs/components/home/flows/RGB.vue
+1 -1
View File
@@ -108,7 +108,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
You can expand on the existing features by using your own custom nodes and edges and implement any design and You can expand on the existing features by using your own custom nodes and edges and implement any design and
functionality you want. functionality you want.
</p> </p>
<router-link class="docs-button max-w-max" to="/guide/">Documentation</router-link> <a class="docs-button max-w-max" href="/guide/">Documentation</a>
</div> </div>
</div> </div>
</template> </template>
docs/src/examples/dnd.md
+2 -2
View File
@@ -16,9 +16,9 @@ This example shows another key feature of Vue Flow. You can initialize the Flow
is actually mounted. This can be achieved by using the [`useVueFlow`](/guide/composables.html#usevueflow) composable. is actually mounted. This can be achieved by using the [`useVueFlow`](/guide/composables.html#usevueflow) composable.
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="dnd"></Repl> <Repl example="dnd"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/edges/connection-line.md
+2 -2
View File
@@ -11,9 +11,9 @@ functionality you can use your own custom connection line.
Simply pass a component in the designated template slot, and you're good to go. Simply pass a component in the designated template slot, and you're good to go.
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="connectionline"></Repl> <Repl example="connectionline"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/edges/index.md
+2 -2
View File
@@ -9,9 +9,9 @@ Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and
In addition to the built-in edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types). In addition to the built-in edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types).
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="edges"></Repl> <Repl example="edges"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/edges/updatable-edge.md
+2 -2
View File
@@ -14,9 +14,9 @@ for specific edges by using the `updatable` attribute.
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="updateEdge"></Repl> <Repl example="updateEdge"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/edges/validation.md
+2 -2
View File
@@ -31,9 +31,9 @@ const nodes = [
``` ```
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="validation"></Repl> <Repl example="validation"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/empty.md
+2 -2
View File
@@ -9,9 +9,9 @@ Similar to the drag and drop example, we can also add nodes to an empty graph on
which triggers a push into our elements / nodes array. which triggers a push into our elements / nodes array.
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="empty"></Repl> <Repl example="empty"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/hidden.md
+2 -2
View File
@@ -16,9 +16,9 @@ This can save you some time on initial renders but consider that moving the pane
which can cause performance spikes depending on the complexity of the components that have to be mounted. which can cause performance spikes depending on the complexity of the components that have to be mounted.
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="hidden"></Repl> <Repl example="hidden"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/horizontal.md
+2 -2
View File
@@ -11,9 +11,9 @@ You can use horizontal layouts with the default node types as well.
You can define where source or target handle positions are with the `sourcePosition` or `targetPosition` properties of nodes. You can define where source or target handle positions are with the `sourcePosition` or `targetPosition` properties of nodes.
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="horizontal"></Repl> <Repl example="horizontal"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/index.md
+2 -2
View File
@@ -11,9 +11,9 @@ On the bottom left you see the viewport-controls and on the bottom right the min
You can also see the built-in node (default, input, output) and edge (bezier, straight, step, smoothstep) types. You can also see the built-in node (default, input, output) and edge (bezier, straight, step, smoothstep) types.
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="basic"></Repl> <Repl example="basic"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/interaction.md
+2 -2
View File
@@ -10,9 +10,9 @@ This includes enabling/disabling zoom-scroll, pan-scroll, dragging etc.
In the sandbox below you can find an example showing you how to toggle interaction options. In the sandbox below you can find an example showing you how to toggle interaction options.
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="interaction"></Repl> <Repl example="interaction"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/multi.md
+2 -2
View File
@@ -10,9 +10,9 @@ Vue Flow is not limited to a single instance on a page.
You can use as many component instances as you like. You can use as many component instances as you like.
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="multi"></Repl> <Repl example="multi"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/nodes/index.md
+2 -2
View File
@@ -11,9 +11,9 @@ You can display any content and functionality inside a custom node. More documen
up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes). up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes).
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="customNode"></Repl> <Repl example="customNode"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/nodes/nesting.md
+2 -2
View File
@@ -12,9 +12,9 @@ You can also define the boundaries of a node, i.e. if the node can be dragged ou
or even let Vue Flow extend the area of a node to fit all it's children. or even let Vue Flow extend the area of a node to fit all it's children.
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="nested"></Repl> <Repl example="nested"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/nodes/update-node.md
+2 -2
View File
@@ -14,9 +14,9 @@ That means you can manipulate any property of your original nodes, and it will t
You can of course also access the nodes directly from the state and change their properties from there. You can of course also access the nodes directly from the state and change their properties from there.
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="updateNode"></Repl> <Repl example="updateNode"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/save.md
+2 -2
View File
@@ -17,9 +17,9 @@ You can extend on this basic idea however you like, i.e. fetch data that you tra
some other business logic you would like to handle. some other business logic you would like to handle.
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="saveRestore"></Repl> <Repl example="saveRestore"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/stress.md
+2 -2
View File
@@ -10,9 +10,9 @@ Vue Flow is built to be fast but there are limits.
Try out how many nodes you can get to render before your browser crashes. Try out how many nodes you can get to render before your browser crashes.
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="stress"></Repl> <Repl example="stress"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/examples/teleport.md
+2 -2
View File
@@ -8,9 +8,9 @@ layout: page
Teleport your nodes to another dom element using Vue 3 [`Teleport`](https://vuejs.org/guide/built-ins/teleport.html). Teleport your nodes to another dom element using Vue 3 [`Teleport`](https://vuejs.org/guide/built-ins/teleport.html).
<div class="mt-6"> <div class="mt-6">
<client-only> <ClientOnly>
<Suspense> <Suspense>
<Repl example="teleport"></Repl> <Repl example="teleport"></Repl>
</Suspense> </Suspense>
</client-only> </ClientOnly>
</div> </div>
docs/src/guide/getting-started.md
+4 -40
View File
@@ -7,24 +7,13 @@
## Installation ## Installation
<CodeGroup>
<CodeGroupItem title="YARN" active>
```bash
yarn add @braks/vue-flow
```
</CodeGroupItem>
<CodeGroupItem title="NPM">
```bash ```bash
npm i --save @braks/vue-flow npm i --save @braks/vue-flow
```
</CodeGroupItem> yarn i @braks/vue-flow
</CodeGroup>
pnpm i @braks/vue-flow
```
## Usage ## Usage
@@ -66,31 +55,6 @@ const elements = ref([
</template> </template>
``` ```
## Quickstart
The recommended method of using Vue Flow is the composition API as it allows for full control of the state, thanks to
composables and the power of [provide/inject](https://vuejs.org/guide/components/provide-inject). You can even
access the state outside the context and manipulate it to your liking. However, using the options API is possible,
though more limited it will probably satisfy most of your needs if you are not looking for too advanced handling of
states.
A basic setup would look like this:
<CodeGroup>
<CodeGroupItem title="Composition API" active>
@[code vue](../../../examples/vite/src/Basic/Basic.vue)
</CodeGroupItem>
<CodeGroupItem title="Options API">
@[code vue](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)
</CodeGroupItem>
</CodeGroup>
## TypeScript ## 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 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
docs/src/guide/utils/instance.md
+2 -9
View File
@@ -8,8 +8,7 @@ Viewport Functions can be accessed via the [`useVueFlow`](/guide/composables#use
utility or with the [`VueFlowStore`](/typedocs/types/VueFlowStore) utility or with the [`VueFlowStore`](/typedocs/types/VueFlowStore)
instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents#paneready). instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents#paneready).
<CodeGroup> - Using Event Hooks (Composable)
<CodeGroupItem title="Composition API" active>
```vue ```vue
<script setup> <script setup>
@@ -22,10 +21,7 @@ onPaneReady((instance) => instance.fitView())
</script> </script>
``` ```
</CodeGroupItem> - Using Event Listener
<CodeGroupItem title="Options API">
```vue ```vue
<script> <script>
@@ -51,9 +47,6 @@ export default defineComponent({
</template> </template>
``` ```
</CodeGroupItem>
</CodeGroup>
### [project](/typedocs/types/Project) ### [project](/typedocs/types/Project)
- Details: - Details:
docs/src/guide/vue-flow/config.md
+49 -63
View File
@@ -4,8 +4,7 @@ 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`](/guide/composables#usevueflow) composable. as options to the [`useVueFlow`](/guide/composables#usevueflow) composable.
<CodeGroup> - Using Component Props
<CodeGroupItem title="Props" active>
```vue ```vue
<!-- Pass configuration as props --> <!-- Pass configuration as props -->
@@ -14,10 +13,7 @@ as options to the [`useVueFlow`](/guide/composables#usevueflow) composable.
</template> </template>
``` ```
</CodeGroupItem> - Using Composable Options
<CodeGroupItem title="Composable">
```vue ```vue
<script setup> <script setup>
@@ -31,16 +27,12 @@ useVueFlow({
</script> </script>
``` ```
</CodeGroupItem>
</CodeGroup>
## 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 You can update the configuration at any point, either by having them bound as props or using the state values returned
by `useVueFlow`. by `useVueFlow`.
<CodeGroup> - Using Component Props
<CodeGroupItem title="Props" active>
```vue{2,5-6,10} ```vue{2,5-6,10}
<script setup> <script setup>
@@ -56,10 +48,7 @@ onMounted(() => {
</template> </template>
``` ```
</CodeGroupItem> - Using State (Composable)
<CodeGroupItem title="Composable">
```vue{2,7-8} ```vue{2,7-8}
<script setup> <script setup>
@@ -74,12 +63,9 @@ onMounted(() => {
</script> </script>
``` ```
</CodeGroupItem>
</CodeGroup>
## Basic Options ## Basic Options
### id <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### id (optional)
- Type: `string` - Type: `string`
@@ -89,7 +75,7 @@ onMounted(() => {
It is used for the lookup and injection of the state instance. It is used for the lookup and injection of the state instance.
### modelValue <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### modelValue (optional)
- Type: [`Elements`](/typedocs/types/Elements) - Type: [`Elements`](/typedocs/types/Elements)
@@ -121,7 +107,7 @@ const elements = ref([
</template> </template>
``` ```
### nodes <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### nodes (optional)
- Type: [`Node[]`](/typedocs/interfaces/Node) - Type: [`Node[]`](/typedocs/interfaces/Node)
@@ -151,7 +137,7 @@ const nodes = ref([
</template> </template>
``` ```
### edges <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### edges (optional)
- Type: [`Edge[]`](/typedocs/interfaces/Edge) - Type: [`Edge[]`](/typedocs/interfaces/Edge)
@@ -186,7 +172,7 @@ const edges = ref([
</template> </template>
``` ```
### node-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### node-types (optional)
- Type: [`Record<string, NodeComponent>`](/typedocs/types/NodeComponent) - Type: [`Record<string, NodeComponent>`](/typedocs/types/NodeComponent)
@@ -223,7 +209,7 @@ const edges = ref([
</template> </template>
``` ```
### edge-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### edge-types (optional)
- Type: [`Record<string, EdgeComponent>`](/typedocs/types/EdgeComponent) - Type: [`Record<string, EdgeComponent>`](/typedocs/types/EdgeComponent)
@@ -260,7 +246,7 @@ const edges = ref([
</template> </template>
``` ```
### apply-default <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### apply-default (optional)
- Type: `boolean` - Type: `boolean`
@@ -295,7 +281,7 @@ const edges = ref([
</template> </template>
``` ```
### connection-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### connection-mode (optional)
- Type: [`ConnectionMode`](/typedocs/enums/ConnectionMode) - Type: [`ConnectionMode`](/typedocs/enums/ConnectionMode)
@@ -315,7 +301,7 @@ const edges = ref([
The options include the connection line type, style and possible marker types (marker-end/marker-start). The options include the connection line type, style and possible marker types (marker-end/marker-start).
### connection-line-type <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> <Badge type="warning" class="text-white" style="line-height: inherit" text="deprecated" vertical="top" /> ### connection-line-type (optional) (deprecated)
- Type: [`ConnectionLineType`](/typedocs/enums/ConnectionLineType) - Type: [`ConnectionLineType`](/typedocs/enums/ConnectionLineType)
@@ -327,7 +313,7 @@ const edges = ref([
When using a custom connection line this prop does nothing. 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" /> <Badge type="warning" class="text-white" style="line-height: inherit" text="deprecated" vertical="top" /> ### connection-line-style (optional) (deprecated)
- Type: `CSSProperties` | `null` - Type: `CSSProperties` | `null`
@@ -335,7 +321,7 @@ const edges = ref([
Additional styles to add to the default connection-line. Additional styles to add to the default connection-line.
### fit-view-on-init <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### fit-view-on-init (optional)
- Type: `boolean` - Type: `boolean`
@@ -347,7 +333,7 @@ const edges = ref([
## Viewport Options ## Viewport Options
### zoom-activation-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### zoom-activation-key-code (optional)
- Type: `KeyCode` - Type: `KeyCode`
@@ -359,7 +345,7 @@ const edges = ref([
Overwrites zoom-on-scroll or pan-on-scroll behavior as long as the key is pressed. Overwrites zoom-on-scroll or pan-on-scroll behavior as long as the key is pressed.
### zoom-on-scroll <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### zoom-on-scroll (optional)
- Type: `boolean` - Type: `boolean`
@@ -369,7 +355,7 @@ const edges = ref([
Whether to allow zooming in and out when scrolling inside the Vue Flow container. Whether to allow zooming in and out when scrolling inside the Vue Flow container.
### zoom-on-pinch <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### zoom-on-pinch (optional)
- Type: `boolean` - Type: `boolean`
@@ -379,7 +365,7 @@ const edges = ref([
Whether to allow zooming in and out when pinching (touch or trackpad) inside the Vue Flow container. Whether to allow zooming in and out when pinching (touch or trackpad) inside the Vue Flow container.
### zoom-on-double-click <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### zoom-on-double-click (optional)
- Type: `boolean` - Type: `boolean`
@@ -389,7 +375,7 @@ const edges = ref([
Whether to allow zooming in and out when double-clicking (or tapping) inside the Vue Flow container. Whether to allow zooming in and out when double-clicking (or tapping) inside the Vue Flow container.
### pan-on-scroll <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### pan-on-scroll (optional)
- Type: `boolean` - Type: `boolean`
@@ -401,13 +387,13 @@ const edges = ref([
Does not work together with `zoom-on-scroll` but will work together with `zoom-activation-key-code`. Does not work together with `zoom-on-scroll` but will work together with `zoom-activation-key-code`.
### pan-on-scroll-speed <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### pan-on-scroll-speed (optional)
- Type: `number` - Type: `number`
- Default: `0.5` - Default: `0.5`
### pan-on-scroll-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### pan-on-scroll-mode (optional)
- Type: [`PanOnScrollMode`](/typedocs/enums/PanOnScrollMode) - Type: [`PanOnScrollMode`](/typedocs/enums/PanOnScrollMode)
@@ -417,7 +403,7 @@ const edges = ref([
Specify on which axis panning is allowed (x, y or both). 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 (optional)
- Old name: `paneMovable` - Old name: `paneMovable`
@@ -429,7 +415,7 @@ const edges = ref([
Whether to allow moving the pane when dragging inside the Vue Flow container. Whether to allow moving the pane when dragging inside the Vue Flow container.
### prevent-scrolling <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### prevent-scrolling (optional)
- Type: `boolean` - Type: `boolean`
@@ -439,7 +425,7 @@ const edges = ref([
Enable this to prevent vue flow from scrolling inside its container, i.e. allow for the page to scroll. Enable this to prevent vue flow from scrolling inside its container, i.e. allow for the page to scroll.
### no-wheel-class-name <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### no-wheel-class-name (optional)
- Type: `string` - Type: `string`
@@ -452,7 +438,7 @@ const edges = ref([
Useful if you want to allow for scrolling _inside_ a node Useful if you want to allow for scrolling _inside_ a node
### no-pan-class-name <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### no-pan-class-name (optional)
- Type: `string` - Type: `string`
@@ -462,25 +448,25 @@ const edges = ref([
Set a class name which prevents elements from triggering pan-scroll events. Set a class name which prevents elements from triggering pan-scroll events.
### min-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### min-zoom (optional)
- Type: `number` - Type: `number`
- Default: `0.5` - Default: `0.5`
### max-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### max-zoom (optional)
- Type: `number` - Type: `number`
- Default: `2` - Default: `2`
### default-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### default-zoom (optional)
- Type: `number` - Type: `number`
- Default: `1` - Default: `1`
### default-position <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### default-position (optional)
- Type: `[x: number, y: number]` - Type: `[x: number, y: number]`
@@ -490,7 +476,7 @@ const edges = ref([
Default viewport position on initial load. Default viewport position on initial load.
### translate-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### translate-extent (optional)
- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent) - Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent)
@@ -509,7 +495,7 @@ const edges = ref([
## Selection Options ## Selection Options
### selection-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### selection-key-code (optional)
- Type: `KeyCode` - Type: `KeyCode`
@@ -519,7 +505,7 @@ const edges = ref([
Define a key which can be used to activate the selection rect. Define a key which can be used to activate the selection rect.
### multi-selection-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### multi-selection-key-code (optional)
- Type: `KeyCode` - Type: `KeyCode`
@@ -531,7 +517,7 @@ const edges = ref([
Multi-selection can be used to select multiple nodes with clicks. Multi-selection can be used to select multiple nodes with clicks.
### delete-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### delete-key-code (optional)
- Type: `KeyCode` - Type: `KeyCode`
@@ -543,7 +529,7 @@ const edges = ref([
## Global Node Options ## Global Node Options
### nodes-draggable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### nodes-draggable (optional)
- Type: `boolean` - Type: `boolean`
@@ -571,7 +557,7 @@ const elements = ref([
</template> </template>
``` ```
### nodes-connectable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### nodes-connectable (optional)
- Type: `boolean` - Type: `boolean`
@@ -599,7 +585,7 @@ const elements = ref([
</template> </template>
``` ```
### nodes-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### nodes-extent (optional)
- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent) - Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent)
@@ -634,13 +620,13 @@ const elements = ref([
</template> </template>
``` ```
### select-nodes-on-drag <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### select-nodes-on-drag (optional)
- Type: `boolean` - Type: `boolean`
- Default: `true` - Default: `true`
### snap-to-grid <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### snap-to-grid (optional)
- Type: `boolean` - Type: `boolean`
@@ -650,7 +636,7 @@ const elements = ref([
If enabled, nodes will be placed and moved in a grid-like fashion. If enabled, nodes will be placed and moved in a grid-like fashion.
### snap-grid <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### snap-grid (optional)
- Type: [`SnapGrid`](/typedocs/types/SnapGrid) - Type: [`SnapGrid`](/typedocs/types/SnapGrid)
@@ -662,7 +648,7 @@ const elements = ref([
## Global Edge Options ## Global Edge Options
### edges-updatable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### edges-updatable (optional)
- Type: `boolean` - Type: `boolean`
@@ -692,7 +678,7 @@ const elements = ref([
</template> </template>
``` ```
### default-marker-color <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### default-marker-color (optional)
- Type: `string` - Type: `string`
@@ -702,7 +688,7 @@ const elements = ref([
The default color value which is used when presenting edge-markers (arrowheads). The default color value which is used when presenting edge-markers (arrowheads).
### edge-updater-radius <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### edge-updater-radius (optional)
- Type: `number` - Type: `number`
@@ -712,7 +698,7 @@ const elements = ref([
The radius at which an edge-updater can be triggered. The radius at which an edge-updater can be triggered.
### connect-on-click <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### connect-on-click (optional)
- Type: `boolean` - Type: `boolean`
@@ -724,7 +710,7 @@ const elements = ref([
Useful if you want to enable creating edges on a touch device. Useful if you want to enable creating edges on a touch device.
### default-edge-options <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### default-edge-options (optional)
- Type: [`DefaultEdgeOptions`](/typedocs/types/DefaultEdgeOptions) - Type: [`DefaultEdgeOptions`](/typedocs/types/DefaultEdgeOptions)
@@ -734,7 +720,7 @@ const elements = ref([
Does not work for the `addEdge` utility! Does not work for the `addEdge` utility!
### auto-connect <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### auto-connect (optional)
- Type: `boolean` | [`Connector`](/typedocs/types/Connector) - Type: `boolean` | [`Connector`](/typedocs/types/Connector)
@@ -787,7 +773,7 @@ const connector = (params) => {
</template> </template>
``` ```
### elevate-edges-on-select <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### elevate-edges-on-select (optional)
- Type: `boolean` - Type: `boolean`
@@ -803,7 +789,7 @@ const connector = (params) => {
## Global Element Options ## Global Element Options
### only-render-visible-elements <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### only-render-visible-elements (optional)
- Type: `boolean` - Type: `boolean`
@@ -813,7 +799,7 @@ const connector = (params) => {
Skip rendering elements that are not visible currently (either hidden or outside the current pane dimensions). Skip rendering elements that are not visible currently (either hidden or outside the current pane dimensions).
### elements-selectable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> ### elements-selectable (optional)
- Type: `boolean` - Type: `boolean`
docs/src/index.md
+1 -2
View File
@@ -1,7 +1,6 @@
--- ---
layout: home layout: home
heroText: null
tagline: null
--- ---
<Home /> <Home />