From e9ff4cca9d39a79765b66c14ae1a39957c12a91c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 30 Mar 2023 14:10:15 +0200
Subject: [PATCH] refactor(controls): remove reactivity transform vars

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/controls/src/Controls.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/controls/src/Controls.vue b/packages/controls/src/Controls.vue
index 73a9f325..3680afd3 100644
--- a/packages/controls/src/Controls.vue
+++ b/packages/controls/src/Controls.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { Panel, useVueFlow } from '@vue-flow/core'
-import type { PanelPosition } from '@vue-flow/core'
+import { Panel, PanelPosition, useVueFlow } from '@vue-flow/core'
 import type { ControlProps } from './types'
 import ControlButton from './ControlButton.vue'
 import PlusIcon from './icons/plus.svg'
@@ -14,7 +13,7 @@ const {
   showFitView = true,
   showInteractive = true,
   fitViewParams,
-  position = 'bottom-left' as PanelPosition,
+  position = PanelPosition.BottomLeft,
 } = defineProps<ControlProps>()
 
 const emit = defineEmits<{
@@ -24,27 +23,31 @@ const emit = defineEmits<{
   (event: 'interactionChange', active: boolean): void
 }>()
 
-const { nodesDraggable, nodesConnectable, elementsSelectable, setInteractive, zoomIn, zoomOut, fitView } = $(useVueFlow())
+const { nodesDraggable, nodesConnectable, elementsSelectable, setInteractive, zoomIn, zoomOut, fitView } = useVueFlow()
 
-const isInteractive = computed(() => nodesDraggable && nodesConnectable && elementsSelectable)
+const isInteractive = computed(() => nodesDraggable.value && nodesConnectable.value && elementsSelectable.value)
 
 function onZoomInHandler() {
   zoomIn()
+
   emit('zoomIn')
 }
 
 function onZoomOutHandler() {
   zoomOut()
+
   emit('zoomOut')
 }
 
 function onFitViewHandler() {
   fitView(fitViewParams)
+
   emit('fitView')
 }
 
 function onInteractiveChangeHandler() {
   setInteractive(!isInteractive.value)
+
   emit('interactionChange', !isInteractive.value)
 }
 </script>