From 601bb9a9b7e55e960982980d360c6864ad789478 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 4 Apr 2022 17:17:23 +0200
Subject: [PATCH] docs: Add config page

---
 docs/src/guide/config.md | 744 +++++++++++++++++++++++++++++++++++++++
 docs/src/guide/edge.md   |   0
 2 files changed, 744 insertions(+)
 create mode 100644 docs/src/guide/edge.md

diff --git a/docs/src/guide/config.md b/docs/src/guide/config.md
index fc011986..b1bc92fd 100644
--- a/docs/src/guide/config.md
+++ b/docs/src/guide/config.md
@@ -1,2 +1,746 @@
 # Config
 
+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.
+
+<CodeGroup>
+  <CodeGroupItem title="Props" active>
+
+```vue:no-line-numbers
+<!-- Pass configuration as props -->
+<template>
+  <VueFlow :default-zoom="0.5" :max-zoom="4" :min-zoom="0.1" />
+</template>
+```
+
+  </CodeGroupItem>
+
+
+  <CodeGroupItem title="Composable">
+
+```vue:no-line-numbers
+<script setup>
+import { useVueFlow  } from '@braks/vue-flow'
+
+useVueFlow({
+  defaultZoom: 0.5,
+  maxZoom: 4,
+  minZoom: 0.1,
+})
+</script>
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
+## 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`.
+
+<CodeGroup>
+  <CodeGroupItem title="Props" active>
+
+```vue:no-line-numbers{2,5-6,10}
+<script setup>
+const defaultZoom = ref(1)
+
+onMounted(() => {
+  // change the default zoom value of the state
+  defaultZoom.value = 1
+})
+</script>
+<template>
+  <VueFlow :default-zoom="defaultZoom" />
+</template>
+```
+
+  </CodeGroupItem>
+
+
+  <CodeGroupItem title="Composable">
+
+```vue:no-line-numbers{2,7-8}
+<script setup>
+const { defaultZoom } = useVueFlow({
+  defaultZoom: 0.5,
+})
+
+onMounted(() => {
+  // change the default zoom value of the state
+  defaultZoom.value = 1
+})
+</script>
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
+## Basic Options
+
+### id <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `string`
+
+- Details:
+
+  Unique id of Vue Flow.
+
+  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" />
+
+- Type: [`Elements`](https://types.vueflow.dev/modules.html#Elements)
+
+- Details:
+
+  An array of elements (nodes + edges).
+
+  Use either the modelValue prop or nodes/edges separately. __Do not mix them!__
+
+- Example:
+
+```vue:no-line-numbers
+<script setup>
+import { VueFlow } from '@braks/vue-flow'
+
+const elements = ref([
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+])
+</script>
+<template>
+  <div style="height: 300px">
+    <VueFlow v-model="elements" />
+  </div>
+</template>
+```
+
+### nodes <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: [`Node[]`](https://types.vueflow.dev/interfaces/Node.html)
+
+- Details:
+
+  An array of nodes.
+
+  Use either the modelValue prop or nodes separately. __Do not mix them!__
+
+- Example:
+
+```vue:no-line-numbers
+<script setup>
+import { VueFlow } from '@braks/vue-flow'
+
+const nodes = ref([
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
+])
+</script>
+<template>
+  <div style="height: 300px">
+    <VueFlow :nodes="nodes" />
+  </div>
+</template>
+```
+
+### edges <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: [`Edge[]`](https://types.vueflow.dev/interfaces/Edge.html)
+
+- Details:
+
+  An array of edges.
+
+  Use either the modelValue prop or edges separately. __Do not mix them!__
+
+- Example:
+
+```vue:no-line-numbers
+<script setup>
+import { VueFlow } from '@braks/vue-flow'
+
+const nodes = ref([
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
+])
+
+const edges = ref([
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+])
+</script>
+<template>
+  <div style="height: 300px">
+    <VueFlow :nodes="nodes" :edges="edges" />
+  </div>
+</template>
+```
+
+### 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)
+
+- Default: [`DefaultNodeTypes`](https://types.vueflow.dev/modules.html#DefaultNodeTypes)
+
+- Details:
+
+  An object mapping node-type names to component definitions/name.
+
+- Example:
+
+```vue:no-line-numbers
+<script setup>
+import { VueFlow } from '@braks/vue-flow'
+import CustomNode from './CustomNode.vue'
+
+const nodeTypes = {
+  custom: CustomNode,
+}
+
+const nodes = ref([
+  { id: '1', type: 'custom', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
+])
+
+const edges = ref([
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+])
+</script>
+<template>
+  <div style="height: 300px">
+    <VueFlow :nodes="nodes" :edges="edges" :node-types="nodeTypes" />
+  </div>
+</template>
+```
+
+### 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)
+
+- Default: [`DefaultEdgeTypes`](https://types.vueflow.dev/modules.html#DefaultEdgeTypes)
+
+- Details:
+
+  An object mapping edge-type names to component definitions/name.
+
+- Example:
+
+```vue:no-line-numbers
+<script setup>
+import { VueFlow } from '@braks/vue-flow'
+import CustomEdge from './CustomEdge.vue'
+
+const edgeTypes = {
+  custom: CustomEdge,
+}
+
+const nodes = ref([
+  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
+])
+
+const edges = ref([
+  { id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true },
+])
+</script>
+<template>
+  <div style="height: 300px">
+    <VueFlow :nodes="nodes" :edges="edges" :edge-types="edgeTypes" />
+  </div>
+</template>
+```
+
+### apply-default <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  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.
+
+- Example:
+
+```vue:no-line-numbers
+<script setup>
+import { VueFlow } from '@braks/vue-flow'
+
+const nodes = ref([
+  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
+])
+
+const edges = ref([
+  { id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true },
+])
+</script>
+<template>
+  <div style="height: 300px">
+    <VueFlow :nodes="nodes" :edges="edges" :apply-default="false" />
+  </div>
+</template>
+```
+
+### connection-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: [`ConnectionMode`](https://types.vueflow.dev/enums/ConnectionMode.html)
+
+- Default: `ConnectionMode.Loose`
+
+- Details:
+
+  If set to `loose` all handles are treated as source handles (thus allowing for connections on target handles as well.)
+
+### connection-line-type <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: [`ConnectionLineType`](https://types.vueflow.dev/enums/ConnectionLineType.html)
+
+- Default: `ConnectionLineType.Bezier`
+
+- 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" />
+
+- Type: `CSSProperties` | `null`
+
+- Details:
+
+  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" />
+
+- Type: `boolean`
+
+- Default: `false`
+
+- Details:
+
+  Trigger fit view when transformation-pane is mounted.
+
+## Zoom & Pan Options
+
+### zoom-activation-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `KeyCode`
+
+- Default: `Meta`
+
+- Details:
+
+  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.
+
+### zoom-on-scroll <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  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" />
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  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" />
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  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" />
+
+- Type: `boolean`
+
+- Default: `false`
+
+- Details:
+
+  Whether to allow panning inside the Vue Flow container.
+
+  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" />
+
+- Type: `number`
+
+- Default: `0.5`
+
+### 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)
+
+- Default: `PanOnScrollMode.Free`
+
+- Details:
+
+  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" /> 
+
+- Old name: `paneMovable`
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  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" />
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  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" />
+
+- Type: `string`
+
+- Default: `nowheel`
+
+- Details:
+
+  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
+
+### no-pan-class-name <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `string`
+
+- Default: `nopan`
+
+- Details:
+
+  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" />
+
+- Type: `number`
+
+- Default: `0.5`
+
+### max-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `number`
+
+- Default: `2`
+
+### default-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `number`
+
+- Default: `1`
+
+### default-position <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `[x: number, y: number]`
+
+- Default: `[0, 0]`
+
+- Details:
+
+  Default zoom pane position on initial load.
+
+### translate-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: [`CoordinateExtent`](https://types.vueflow.dev/modules.html#CoordinateExtent)
+
+- Default: 
+
+```ts:no-line-numbers
+[
+  [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+  [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+]
+```
+
+- Details:
+
+  The area in which the zoom pane can be moved around.
+
+## Selection Pane Options
+
+### selection-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `KeyCode`
+
+- Default: `Shift`
+
+- Details:
+
+  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" />
+
+- Type: `KeyCode`
+
+- Default: `Meta`
+
+- Details:
+
+  Define a key which can be used to activate multi-selection.
+
+  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" />
+
+- Type: `KeyCode`
+
+- Default: `Backspace`
+
+- Details:
+
+  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" />
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Globally enable/disable dragging nodes. 
+
+  Can be overwritten by setting `draggable` on a specific node element.
+
+- Example:
+
+```vue:no-line-numbers{5-6,10}
+<script setup>
+const elements = ref([
+  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
+  
+  // This will overwrite the globally set option of nodes-draggable
+  { id: '2', draggable: true, label: 'Node 2', position: { x: 100, y: 100 } },
+])
+</script>
+<template>
+  <VueFlow :nodes-draggable="false" />
+</template>
+```
+
+### nodes-connectable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Globally enable/disable connecting nodes.
+
+  Can be overwritten by setting `connectable` on a specific node element.
+
+- Example:
+
+```vue:no-line-numbers{5-6,10}
+<script setup>
+const elements = ref([
+  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
+  
+  // This will overwrite the globally set option of nodes-connectable
+  { id: '2', connectable: true, label: 'Node 2', position: { x: 100, y: 100 } },
+])
+</script>
+<template>
+  <VueFlow :nodes-connectable="false" />
+</template>
+```
+
+### nodes-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: [`CoordinateExtent`](https://types.vueflow.dev/modules.html#CoordinateExtent)
+
+- Default:
+
+```ts:no-line-numbers
+[
+  [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+  [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+]
+```
+
+- Details:
+
+  The area in which nodes can be moved around.
+
+  Can be overwritten by setting `extent` on a specific node element.
+
+- Example:
+
+```vue:no-line-numbers{5-6}
+<script setup>
+const elements = ref([
+  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
+  
+  // This will overwrite the globally set option of node-extent
+  { id: '2', extent: [[-100, -100], [100, 100]], label: 'Node 2', position: { x: 100, y: 100 } },
+])
+</script>
+<template>
+  <VueFlow />
+</template>
+```
+
+### select-nodes-on-drag <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `boolean`
+
+- Default: `true`
+
+### snap-to-grid <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `boolean`
+
+- Default: `false`
+
+- Details:
+
+  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" />
+
+- Type: [`SnapGrid`](https://types.vueflow.dev/modules.html#SnapGrid)
+
+- Default: `[15, 15]`
+
+- Details:
+
+  If `snapToGrid` is enabled, nodes will be placed and moved in a grid-like fashion according to the `snapGrid` value.
+
+## Global Edge Options
+
+### edges-updatable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Globally enable/disable updating edges.
+
+  Can be overwritten by setting `updatable` on a specific edge element.
+
+- Example:
+
+```vue:no-line-numbers{7-8,12}
+<script setup>
+const elements = ref([
+  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+  
+  { id: 'e1-3', source: '1', target: '3' },
+  // Overwrites global edges-updatable config
+  { id: 'e1-2', updatable: true, source: '1', target: '2', animated: true },
+])
+</script>
+<template>
+  <VueFlow :edges-updatable="false" />
+</template>
+```
+
+### default-marker-color <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `string`
+
+- Default: `#b1b1b7`
+
+- Details:
+
+  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" />
+
+- Type: `number`
+
+- Default: `10`
+
+- Details:
+
+  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" />
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Allow edges to be created by clicking two handles in a row. 
+
+  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" />
+
+- Type: [`DefaultEdgeOptions`]()
+
+- Details:
+
+  Default values when creating a new edge.
+
+  Does not work for the `addEdge` utility!
+
+## Global Element Options
+
+### only-render-visible-elements <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
+
+- Type: `boolean`
+
+- Default: `false`
+
+- Details:
+
+  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" />
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Enable/disable selecting elements. This will also disable pointer-events in general.
diff --git a/docs/src/guide/edge.md b/docs/src/guide/edge.md
new file mode 100644
index 00000000..e69de29b