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>

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>

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 = computed(() => {
-const type = store.getEdgeTypes[edgeType] || store.getEdgeTypes.default
+  const edgeType = props.edge.type || 'default'
-if (!store.getEdgeTypes[edgeType]) {
+  const t = store.getEdgeTypes[edgeType] || store.getEdgeTypes.default
-  console.warn(`Edge type "${edgeType}" not found. Using fallback type "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) => {

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 = computed(() => {
-const type = store.getNodeTypes[nodeType] || store.getNodeTypes.default
+  const nodeType = props.node.type ?? 'default'
-if (!store.getNodeTypes[nodeType]) {
+  const t = store.getNodeTypes[nodeType] || store.getNodeTypes.default
-  console.warn(`Node type "${nodeType}" not found. Using fallback type "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 }))

src/container/VueFlow/VueFlow.vue

@@ -140,11 +140,10 @@ watch(
 )
 watch(
   () => props,
-  (val, oldVal) => {
+  (val) => {
-    const hasDiff = diff(val, oldVal)
+    init({ ...store.$state, ...val } as FlowState)
-    if (hasDiff.length > 0) init({ ...store.$state, ...val } as FlowState)
   },
-  { flush: 'pre', deep: true },
+  { flush: 'post', deep: true },
 )
 init(options)
 </script>