File tree Expand file tree Collapse file tree 1 file changed +13
-29
lines changed Expand file tree Collapse file tree 1 file changed +13
-29
lines changed Original file line number Diff line number Diff line change @@ -11,23 +11,10 @@ as options to the [`useVueFlow`](/guide/composables#usevueflow) composable.
1111``` vue
1212<!-- Pass configuration as props -->
1313<template>
14- <VueFlow :default-zoom=" 0.5" :max-zoom="4" :min-zoom="0.1" />
14+ <VueFlow :default-viewport="{ zoom: 0.5 } " :max-zoom="4" :min-zoom="0.1" />
1515</template>
1616```
1717
18- - Using Composable Options
19-
20- ``` vue
21- <script setup>
22- import { useVueFlow } from '@vue-flow/core'
23-
24- useVueFlow({
25- defaultZoom: 0.5,
26- maxZoom: 4,
27- minZoom: 0.1,
28- })
29- </script>
30- ```
3118
3219## Updating Config
3320
@@ -38,30 +25,27 @@ by `useVueFlow`.
3825
3926``` vue{2,5-6,10}
4027<script setup>
41- const defaultZoom = ref(1 )
28+ const nodesDraggable = ref(false )
4229
43- onMounted( () => {
44- // change the default zoom value of the state
45- defaultZoom .value = 1
46- })
30+ const toggleNodesDraggable = () => {
31+ // toggle the state
32+ nodesDraggable .value = !nodesDraggable.value
33+ }
4734</script>
4835<template>
49- <VueFlow :default-zoom="defaultZoom" / >
36+ <VueFlow :nodes-draggable="nodesDraggable">...</VueFlow >
5037</template>
5138```
5239
5340- Using State (Composable)
5441
55- ``` vue{2,7-8 }
42+ ``` vue{2,5 }
5643<script setup>
57- const { defaultZoom } = useVueFlow({
58- defaultZoom: 0.5,
59- })
60-
61- onMounted(() => {
62- // change the default zoom value of the state
63- defaultZoom.value = 1
64- })
44+ const { nodesDraggable } = useVueFlow()
45+
46+ const toggleNodesDraggable = () => {
47+ nodesDraggable.value = !nodesDraggable.value
48+ }
6549</script>
6650```
6751
You can’t perform that action at this time.
0 commit comments