From 8c4747a8a9529b49d8b870c156f4a087426fa941 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 19 Nov 2021 16:51:40 +0100
Subject: [PATCH] update: move watcher to onMounted hook

* remove default values for nodes edges from initial store

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/container/VueFlow/VueFlow.vue | 64 +++++++++++++++----------------
 src/store/index.ts                |  4 +-
 2 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index 026332d6..1c29bc25 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { CSSProperties, onBeforeUnmount } from 'vue'
-import { invoke } from '@vueuse/core'
 import diff from 'microdiff'
 import {
   ConnectionLineType,
@@ -124,40 +123,37 @@ const init = (opts: typeof props) => {
 }
 onBeforeUnmount(() => store?.$dispose())
 
-invoke(async () => {
-  await until(elements.value).toMatch((y) => y.length > 0)
-  init(props)
+store.hooks.load.on(() => init(props))
+onMounted(() => {
+  watch(
+    elements,
+    (val, oldVal) => {
+      nextTick(() => {
+        const hasDiff = diff(val, oldVal)
+        if (hasDiff.length > 0) store.setElements(val)
+      })
+    },
+    { flush: 'pre', deep: true },
+  )
+  watch(
+    () => store.elements,
+    (val, oldVal) => {
+      nextTick(() => {
+        const hasDiff = diff(val, oldVal)
+        if (hasDiff.length > 0) elements.value = val
+      })
+    },
+    { flush: 'pre', deep: true },
+  )
+  watch(
+    () => props,
+    (val, oldVal) => {
+      const hasDiff = diff(val, oldVal)
+      if (hasDiff.length > 0) init(val)
+    },
+    { flush: 'pre', deep: true },
+  )
 })
-watch(
-  elements,
-  (val, oldVal) => {
-    nextTick(() => {
-      const hasDiff = diff(val, oldVal)
-      if (hasDiff.length > 0) store.setElements(val)
-    })
-  },
-  { flush: 'pre', deep: true },
-)
-
-watch(
-  () => store.elements,
-  (val, oldVal) => {
-    nextTick(() => {
-      const hasDiff = diff(val, oldVal)
-      if (hasDiff.length > 0) elements.value = val
-    })
-  },
-  { flush: 'pre', deep: true },
-)
-
-watch(
-  () => props,
-  (val, oldVal) => {
-    const hasDiff = diff(val, oldVal)
-    if (hasDiff.length > 0) init(val)
-  },
-  { flush: 'pre', deep: true },
-)
 </script>
 <template>
   <div class="vue-flow">
diff --git a/src/store/index.ts b/src/store/index.ts
index 59065db8..572d5cd1 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -22,8 +22,8 @@ export const initialState = (): FlowState => ({
     height: 0,
   },
   transform: [0, 0, 1],
-  nodeTypes: defaultNodeTypes,
-  edgeTypes: defaultEdgeTypes,
+  nodeTypes: {},
+  edgeTypes: {},
   elements: [],
   nodes: [],
   edges: [],