From 1b6ea1e1b5ac4155a93a7e16de32dbbfc152a098 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 20 Nov 2021 03:28:46 +0100
Subject: [PATCH] update: make types for nodes and edges a computed prop

* remove nodeTypesId (was used in react to manually trigger a nodeTypes change)

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .../NodeTypesIdChangeExample.vue                  |  2 +-
 src/components/Edges/Edge.vue                     | 13 ++++++++-----
 src/components/Nodes/Node.vue                     | 15 +++++++++------
 src/container/VueFlow/VueFlow.vue                 |  7 +++----
 4 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue b/examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue
index c21fff77..317e0319 100644
--- a/examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue
+++ b/examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue
@@ -45,7 +45,7 @@ const changeType = () => {
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <VueFlow :elements="elements" :node-types="nodeTypesObjects[nodeTypesId]" :node-types-id="nodeTypesId" @connect="onConnect">
+  <VueFlow v-model="elements" :node-types="nodeTypesObjects[nodeTypesId]" @connect="onConnect">
     <template #node-a>
       <NodeA :node-styles="nodeStyles" />
     </template>
diff --git a/src/components/Edges/Edge.vue b/src/components/Edges/Edge.vue
index b946c3c4..92663d19 100644
--- a/src/components/Edges/Edge.vue
+++ b/src/components/Edges/Edge.vue
@@ -15,11 +15,14 @@ const props = withDefaults(defineProps<EdgeProps>(), {})
 
 const store = useStore()
 
-const edgeType = props.edge.type || 'default'
-const type = store.getEdgeTypes[edgeType] || store.getEdgeTypes.default
-if (!store.getEdgeTypes[edgeType]) {
-  console.warn(`Edge type "${edgeType}" not found. Using fallback type "default".`)
-}
+const type = computed(() => {
+  const edgeType = props.edge.type || 'default'
+  const t = store.getEdgeTypes[edgeType] || store.getEdgeTypes.default
+  if (!store.getEdgeTypes[edgeType]) {
+    console.warn(`Edge type "${edgeType}" not found. Using fallback type "default".`)
+  }
+  return t
+})
 const updating = ref<boolean>(false)
 
 const onEdgeClick = (event: MouseEvent) => {
diff --git a/src/components/Nodes/Node.vue b/src/components/Nodes/Node.vue
index 786c9f05..0a7dcb71 100644
--- a/src/components/Nodes/Node.vue
+++ b/src/components/Nodes/Node.vue
@@ -20,11 +20,14 @@ provide(NodeId, props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 
-const nodeType = props.node.type || 'default'
-const type = store.getNodeTypes[nodeType] || store.getNodeTypes.default
-if (!store.getNodeTypes[nodeType]) {
-  console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`)
-}
+const type = computed(() => {
+  const nodeType = props.node.type ?? 'default'
+  const t = store.getNodeTypes[nodeType] || store.getNodeTypes.default
+  if (!store.getNodeTypes[nodeType]) {
+    console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`)
+  }
+  return t
+})
 
 const selectable = computed(() =>
   typeof props.node.selectable === 'undefined' ? store.elementsSelectable : props.node.selectable,
@@ -34,7 +37,7 @@ const connectable = computed(() =>
   typeof props.node.connectable === 'undefined' ? store.nodesConnectable : props.node.connectable,
 )
 const scale = computed(() => store.transform[2])
-const selected = computed(() => selectable && store.selectedElements?.some(({ id }) => id === props.node.id))
+const selected = computed(() => selectable.value && store.selectedElements?.some(({ id }) => id === props.node.id))
 
 const onMouseEnterHandler = () =>
   props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index e7e1575f..63ed9574 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -140,11 +140,10 @@ watch(
 )
 watch(
   () => props,
-  (val, oldVal) => {
-    const hasDiff = diff(val, oldVal)
-    if (hasDiff.length > 0) init({ ...store.$state, ...val } as FlowState)
+  (val) => {
+    init({ ...store.$state, ...val } as FlowState)
   },
-  { flush: 'pre', deep: true },
+  { flush: 'post', deep: true },
 )
 init(options)
 </script>