feat(types): Add NodeTypes and EdgeTypes

* Interface for passing an object of NodeTypes/EdgeTypes
* Object needs to be passed with components markedRaw

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/CustomNode/CustomNode.vue

@@ -23,7 +23,7 @@ const bgColor = ref('#1A192B')
 const connectionLineStyle = { stroke: '#fff' }
 const snapGrid: SnapGrid = [16, 16]
 const nodeTypes = {
-  selectorNode: ColorSelectorNode,
+  selectorNode: markRaw(ColorSelectorNode),
 }
 
 const onLoad = (flowInstance: FlowInstance) => {

examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue

@@ -2,7 +2,7 @@
 import { CSSProperties } from 'vue'
 import NodeA from './NodeA.vue'
 import NodeB from './NodeB.vue'
-import { VueFlow, Elements, Position, NodeType, Connection, Edge, addEdge } from '~/index'
+import { VueFlow, Elements, Position, Connection, Edge, addEdge, NodeTypes } from '~/index'
 
 const initialElements: Elements = [
   {
@@ -25,16 +25,13 @@ const initialElements: Elements = [
 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 = {
+const nodeTypesObjects: Record<string, NodeTypes> = {
   a: {
-    a: NodeA as NodeType,
+    a: NodeA,
   },
   b: {
-    b: NodeB as NodeType,
+    b: NodeB,
   },
 }
 

examples/Unidirectional/UnidirectionalExample.vue

@@ -14,6 +14,7 @@ import {
   ConnectionMode,
   updateEdge,
   ArrowHeadType,
+  NodeTypes,
 } from '~/index'
 
 const initialElements: Elements = [
@@ -172,8 +173,8 @@ const initialElements: Elements = [
   },
 ]
 
-const nodeTypes: Record<string, NodeType> = {
-  custom: CustomNode as NodeType,
+const nodeTypes: NodeTypes = {
+  custom: CustomNode,
 }
 
 let id = 4

examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue

@@ -14,6 +14,7 @@ import {
   Position,
   isEdge,
   FlowInstance,
+  NodeTypes,
 } from '~/index'
 
 const initialHandleCount = 1
@@ -29,8 +30,8 @@ const initialElements: Elements = [
 
 const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 10 }
 
-const nodeTypes: Record<string, NodeType> = {
-  custom: CustomNode as NodeType,
+const nodeTypes: NodeTypes = {
+  custom: CustomNode,
 }
 
 let id = 5

examples/Validation/ValidationExample.vue

@@ -13,6 +13,7 @@ import {
   NodeProps,
   FlowInstance,
   NodeType,
+  NodeTypes,
 } from '~/index'
 
 import './validation.css'
@@ -34,9 +35,9 @@ const onConnect = (params: Connection | Edge) => {
   console.log('on connect', params)
   elements.value = addEdge(params, elements.value)
 }
-const nodeTypes: Record<string, NodeType> = {
-  custominput: CustomInput as NodeType,
-  customnode: CustomNode as NodeType,
+const nodeTypes: NodeTypes = {
+  custominput: CustomInput,
+  customnode: CustomNode,
 }
 </script>
 <template>