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.
11
11
``` vue
12
12
<!-- Pass configuration as props -->
13
13
<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" />
15
15
</template>
16
16
```
17
17
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
- ```
31
18
32
19
## Updating Config
33
20
@@ -38,30 +25,27 @@ by `useVueFlow`.
38
25
39
26
``` vue{2,5-6,10}
40
27
<script setup>
41
- const defaultZoom = ref(1 )
28
+ const nodesDraggable = ref(false )
42
29
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
+ }
47
34
</script>
48
35
<template>
49
- <VueFlow :default-zoom="defaultZoom" / >
36
+ <VueFlow :nodes-draggable="nodesDraggable">...</VueFlow >
50
37
</template>
51
38
```
52
39
53
40
- Using State (Composable)
54
41
55
- ``` vue{2,7-8 }
42
+ ``` vue{2,5 }
56
43
<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
+ }
65
49
</script>
66
50
```
67
51
You can’t perform that action at this time.
0 commit comments