feat: Add node/edge types id

* ID can be used to switch between different types of nodes/edges
* Add example

examples/NodeTypesIdChange/NodeA.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+const props = defineProps<{ nodeStyles: Record<string, any> }>()
+</script>
+<template>
+  <div :style="props.nodeStyles">A</div>
+</template>

examples/NodeTypesIdChange/NodeB.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+const props = defineProps<{ nodeStyles: Record<string, any> }>()
+</script>
+<template>
+  <div :style="props.nodeStyles">B</div>
+</template>

examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import NodeA from './NodeA.vue'
+import NodeB from './NodeB.vue'
+import Flow, { Elements, Position, NodeType, Connection, Edge, addEdge } from '~/index'
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    sourcePosition: Position.Right,
+    type: 'input',
+    data: { label: 'Input' },
+    position: { x: 0, y: 80 },
+  },
+  {
+    id: '2',
+    type: 'a',
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+    data: { label: 'A Node' },
+    position: { x: 250, y: 0 },
+  },
+]
+
+const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 }
+
+const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }
+type NodeTypesObject = {
+  [key: string]: Record<string, NodeType>
+}
+
+const nodeTypesObjects: NodeTypesObject = {
+  a: {
+    a: NodeA as NodeType,
+  },
+  b: {
+    b: NodeB as NodeType,
+  },
+}
+
+const elements = ref(initialElements)
+const nodeTypesId = ref('a')
+const changeType = () => {
+  const id = nodeTypesId.value === 'a' ? 'b' : 'a'
+  elements.value[1].type = id
+  nodeTypesId.value = id
+}
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+</script>
+<template>
+  <Flow :elements="elements" :node-types="nodeTypesObjects[nodeTypesId]" :node-types-id="nodeTypesId" @connect="onConnect">
+    <template #node-a>
+      <NodeA :node-styles="nodeStyles" />
+    </template>
+    <template #node-b>
+      <NodeB :node-styles="nodeStyles" />
+    </template>
+    <button :style="buttonStyle" @click="changeType">change type</button>
+  </Flow>
+</template>

examples/router.ts

@@ -57,6 +57,10 @@ export const routes: RouterOptions['routes'] = [
     path: '/node-type-change',
     component: () => import('./NodeTypeChange/NodeTypeChangeExample.vue'),
   },
+  {
+    path: '/node-types-id-change',
+    component: () => import('./NodeTypesIdChange/NodeTypesIdChangeExample.vue'),
+  },
   {
     path: '/overview',
     component: () => import('./Overview/Overview.vue'),

src/container/Flow/Flow.vue

@@ -98,6 +98,8 @@ const props = withDefaults(defineProps<FlowProps>(), {
   panOnScrollMode: PanOnScrollMode.Free,
   paneMoveable: true,
   edgeUpdaterRadius: 10,
+  edgeTypesId: '1',
+  nodeTypesId: '1',
 })
 const emit = defineEmits(Object.keys(createHooks()))
 
@@ -131,8 +133,14 @@ onBeforeUnmount(() => store?.$dispose())
 watch(props, (val) => init(val))
 init(props)
 
-const nodeTypes = createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes })
-const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
+const nodeTypes = controlledComputed(
+  () => props.nodeTypesId,
+  () => createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }),
+)
+const edgeTypes = controlledComputed(
+  () => props.edgeTypesId,
+  () => createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }),
+)
 </script>
 <template>
   <div class="vue-flow">

src/types/types.ts

@@ -6,7 +6,7 @@ import { KeyCode, PanOnScrollMode } from '~/types/panel'
 
 export type ElementId = string
 
-export type FlowElement<T = any> = Node<T> | Edge<T>
+export type FlowElement<T = any> = Partial<Node<T>> | Partial<Edge<T>>
 
 export type Elements<T = any> = Array<FlowElement<T>>