From b7abb31c24c60b4e397f33826e9ca987715ecf52 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 21 Feb 2022 10:36:45 +0100
Subject: [PATCH] chore: couple minor fixes

Signed-off-by: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
---
 examples/RGBFlow/RGBFlow.vue                  |  2 +-
 examples/RGBFlow/RGBNode.vue                  | 25 ++++++++-----------
 src/additional-components/MiniMap/MiniMap.vue |  2 +-
 src/composables/useVueFlow.ts                 |  8 +-----
 src/container/VueFlow/watch.ts                |  4 +--
 5 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/examples/RGBFlow/RGBFlow.vue b/examples/RGBFlow/RGBFlow.vue
index f3d686b2..e2e6f71e 100644
--- a/examples/RGBFlow/RGBFlow.vue
+++ b/examples/RGBFlow/RGBFlow.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { templateRef } from '@vueuse/core'
-import { Elements, FlowInstance, VueFlow } from '@braks/vue-flow'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
+import { Elements, FlowInstance, VueFlow } from '~/index'
 
 type Colors = {
   red: number
diff --git a/examples/RGBFlow/RGBNode.vue b/examples/RGBFlow/RGBNode.vue
index 92dd24f9..37686681 100644
--- a/examples/RGBFlow/RGBNode.vue
+++ b/examples/RGBFlow/RGBNode.vue
@@ -11,6 +11,7 @@ interface RGBNodeProps extends NodeProps {
     blue: number
   }
 }
+
 const props = defineProps<RGBNodeProps>()
 const emit = defineEmits(['change'])
 let color = 'red'
@@ -25,20 +26,18 @@ switch (props.data.color) {
     color = 'blue'
     break
 }
-const onChange = (e: any) => emit('change', { color, val: e.target.value })
+
+const colorVal = computed({
+  get: () => props.amount[color as 'red' | 'green' | 'blue'],
+  set: (val) => {
+    emit('change', { color, val })
+  },
+})
 </script>
 <template>
   <div class="wrapper">
     <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
-    <input
-      v-model="props.amount[color]"
-      class="slider nodrag"
-      :style="{ '--color': color } as any"
-      type="range"
-      min="0"
-      max="255"
-      @input="onChange"
-    />
+    <input v-model="colorVal" class="slider nodrag" :style="{ '--color': color }" type="range" min="0" max="255" />
     <Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
   </div>
 </template>
@@ -62,11 +61,7 @@ const onChange = (e: any) => emit('change', { color, val: e.target.value })
   -webkit-appearance: none;
   appearance: none;
 
-  &::-moz-range-thumb {
-    @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
-    -webkit-appearance: none;
-    background: var(--color);
-  }
+  &::-moz-range-thumb,
   &::-webkit-slider-thumb {
     @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
     -webkit-appearance: none;
diff --git a/src/additional-components/MiniMap/MiniMap.vue b/src/additional-components/MiniMap/MiniMap.vue
index b0066cc6..448d5963 100644
--- a/src/additional-components/MiniMap/MiniMap.vue
+++ b/src/additional-components/MiniMap/MiniMap.vue
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<MiniMapProps>(), {
   maskColor: 'rgb(240, 242, 243, 0.7)',
 })
 
-const attrs = useAttrs()
+const attrs: Record<string, any> = useAttrs()
 const window = useWindow()
 
 const defaultWidth = 200
diff --git a/src/composables/useVueFlow.ts b/src/composables/useVueFlow.ts
index afb0479b..cf5a45ef 100644
--- a/src/composables/useVueFlow.ts
+++ b/src/composables/useVueFlow.ts
@@ -11,7 +11,7 @@ export default <N = any, E = N>(options?: Partial<FlowOptions<N, E>>): UseVueFlo
   let vueFlow: UseVueFlow | null = scope ? inject(VueFlow, null) ?? (scope.vueFlow as UseVueFlow) : null
   if (!vueFlow || (vueFlow && options?.id && options.id !== vueFlow.id)) {
     const name = options?.id ?? `vue-flow-${id++}`
-    let store: Store = useStore(options)
+    const store: Store = useStore(options)
     vueFlow = {
       id: name,
       store: reactive(store),
@@ -25,12 +25,6 @@ export default <N = any, E = N>(options?: Partial<FlowOptions<N, E>>): UseVueFlo
       provide(VueFlow, vueFlow)
       scope.vueFlow = vueFlow
     }
-
-    onScopeDispose(() => {
-      vueFlow = null as UseVueFlow
-      scope.vueFlow = null as UseVueFlow
-      store = null as Store
-    })
   }
   if (!vueFlow) throw new Error('VueFlow instance not found.')
 
diff --git a/src/container/VueFlow/watch.ts b/src/container/VueFlow/watch.ts
index 9cb964d8..b0431f04 100644
--- a/src/container/VueFlow/watch.ts
+++ b/src/container/VueFlow/watch.ts
@@ -33,7 +33,7 @@ export default (
         if (v && Array.isArray(v)) {
           pause()
           store.setNodes(v)
-          if (nodes) nodes = store.nodes
+          if (nodes) nodes.value = store.nodes
           await nextTick()
           resume()
         }
@@ -44,7 +44,7 @@ export default (
         if (v && Array.isArray(v)) {
           pause()
           store.setEdges(v)
-          if (edges) edges = store.edges
+          if (edges) edges.value = store.edges
           await nextTick()
           resume()
         }