From 0a45e09c325128146d2d9ccd100b61f9a468cffc Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 22 Oct 2021 08:49:53 +0200
Subject: [PATCH] feat: Add node/edge types id

* ID can be used to switch between different types of nodes/edges
* Add example
---
 examples/NodeTypesIdChange/NodeA.vue          |  6 ++
 examples/NodeTypesIdChange/NodeB.vue          |  6 ++
 .../NodeTypesIdChangeExample.vue              | 60 +++++++++++++++++++
 examples/router.ts                            |  4 ++
 src/container/Flow/Flow.vue                   | 12 +++-
 src/types/types.ts                            |  2 +-
 6 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 examples/NodeTypesIdChange/NodeA.vue
 create mode 100644 examples/NodeTypesIdChange/NodeB.vue
 create mode 100644 examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue

diff --git a/examples/NodeTypesIdChange/NodeA.vue b/examples/NodeTypesIdChange/NodeA.vue
new file mode 100644
index 00000000..c593294f
--- /dev/null
+++ b/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>
diff --git a/examples/NodeTypesIdChange/NodeB.vue b/examples/NodeTypesIdChange/NodeB.vue
new file mode 100644
index 00000000..0b39877e
--- /dev/null
+++ b/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>
diff --git a/examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue b/examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue
new file mode 100644
index 00000000..c4b9538b
--- /dev/null
+++ b/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>
diff --git a/examples/router.ts b/examples/router.ts
index 5b1aa6f0..ea3a18f2 100644
--- a/examples/router.ts
+++ b/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'),
diff --git a/src/container/Flow/Flow.vue b/src/container/Flow/Flow.vue
index a1b4fc69..7deffbab 100644
--- a/src/container/Flow/Flow.vue
+++ b/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">
diff --git a/src/types/types.ts b/src/types/types.ts
index c41824cf..811c3c9d 100644
--- a/src/types/types.ts
+++ b/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>>