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>

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -28,14 +28,6 @@ const connectionLineVisible = computed(
 )
 const dimensions = computed(() => store.dimensions)
 const transform = computed(() => `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`)
-const type = (edge: TEdge) => {
-  const edgeType = 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".`)
-  }
-  return type
-}
 </script>
 <template>
   <svg :width="dimensions.width" :height="dimensions.height" class="vue-flow__edges">
@@ -45,7 +37,6 @@ const type = (edge: TEdge) => {
         v-for="edge of store.getEdges"
         :key="edge.id"
         :edge="edge"
-        :type="type(edge)"
         :marker-end-id="props.markerEndId"
         :edge-updater-radius="props.edgeUpdaterRadius"
       >

src/container/NodeRenderer/NodeRenderer.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { invoke } from '@vueuse/core'
-import { Node as TNode } from '../../types'
 import { useStore } from '../../composables'
 import Node from '../../components/Nodes/Node.vue'
 
@@ -17,14 +16,6 @@ const store = useStore()
 const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
 const snapGrid = computed(() => (store.snapToGrid ? store.snapGrid : undefined))
 
-const type = (node: TNode) => {
-  const nodeType = 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".`)
-  }
-  return type
-}
 invoke(async () => {
   await until(store.getNodes).toMatch((y) => y.length > 0)
   await until(store.transform).toMatch(([x, y, z]) => x !== 0 && y !== 0 && z !== 1)
@@ -37,7 +28,6 @@ invoke(async () => {
         v-for="node of store.getNodes"
         :key="node.id"
         :node="node"
-        :type="type(node)"
         :snap-grid="snapGrid"
         :select-nodes-on-drag="props.selectNodesOnDrag"
       >

src/container/VueFlow/VueFlow.vue

@@ -6,12 +6,12 @@ import {
   ConnectionMode,
   Elements,
   PanOnScrollMode,
-  NodeType,
-  EdgeType,
   KeyCode,
   TranslateExtent,
   NodeExtent,
   FlowOptions,
+  NodeTypes,
+  EdgeTypes,
 } from '../../types'
 import ZoomPane from '../../container/ZoomPane/ZoomPane.vue'
 import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
@@ -22,8 +22,8 @@ import { createHooks, initFlow } from '../../composables'
 export interface FlowProps extends Partial<FlowOptions> {
   modelValue?: Elements
   elements?: Elements
-  nodeTypes?: Record<string, NodeType>
-  edgeTypes?: Record<string, EdgeType>
+  nodeTypes?: NodeTypes
+  edgeTypes?: EdgeTypes
   connectionMode?: ConnectionMode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties