feat: Allow node/edge template per element

* Allow templates to be overwritten per element with template option

package/src/components/Edges/EdgeWrapper.vue

@@ -124,8 +124,9 @@ watch(
 )
 
 const type = computed(() => {
+  let edgeType = edge.value.template ?? store.getEdgeTypes[name.value]
   const instance = getCurrentInstance()
-  let edgeType = store.getEdgeTypes[name.value]
+
   if (typeof edgeType === 'string') {
     if (instance) {
       const components = Object.keys(instance.appContext.components)

package/src/components/Nodes/NodeWrapper.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useDraggableCore } from '@braks/revue-draggable'
-import { CSSProperties } from 'vue'
+import { CSSProperties, isVNode } from 'vue'
 import { useVueFlow } from '../../composables'
 import { GraphNode, NodeComponent, SnapGrid } from '../../types'
 import { NodeId, Slots } from '../../context'
@@ -89,8 +89,9 @@ watch(
 )
 
 const type = computed(() => {
+  let nodeType = node.value.template ?? store.getNodeTypes[name.value]
   const instance = getCurrentInstance()
-  let nodeType = store.getNodeTypes[name.value]
+
   if (typeof nodeType === 'string') {
     if (instance) {
       const components = Object.keys(instance.appContext.components)

package/src/types/edge.ts

@@ -1,6 +1,7 @@
-import { CSSProperties } from 'vue'
+import { Component, CSSProperties, VNode } from 'vue'
 import { Position, Element, ElementData } from './flow'
 import { GraphNode } from './node'
+import { EdgeComponent, EdgeTextProps } from './components'
 
 /** Edge markers */
 export enum MarkerType {
@@ -42,6 +43,7 @@ export interface MarkerProps {
 export type EdgeMarkerType = string | MarkerType | EdgeMarker
 
 export interface Edge<Data = ElementData> extends Element<Data> {
+  label?: string | VNode | Component<EdgeTextProps>
   /** Source node id */
   source: string
   /** Target node id */
@@ -74,6 +76,9 @@ export interface Edge<Data = ElementData> extends Element<Data> {
   updatable?: boolean
   /** Disable/enable selecting edge */
   selectable?: boolean
+
+  /** overwrites current edge type */
+  template?: EdgeComponent
 }
 
 export type DefaultEdgeOptions = Omit<
@@ -101,12 +106,7 @@ export interface EdgeProps<Data = ElementData, SourceNodeData = any, TargetNodeD
   id: string
   sourceNode: GraphNode<SourceNodeData>
   targetNode: GraphNode<TargetNodeData>
-  label?:
-    | string
-    | {
-        props?: any
-        component: any
-      }
+  label?: string | VNode
   type?: string
   data?: Data
   style?: CSSProperties
@@ -139,12 +139,7 @@ export interface SmoothStepEdgeProps<Data = ElementData, SourceNodeData = any, T
   id: string
   sourceNode: GraphNode<SourceNodeData>
   targetNode: GraphNode<TargetNodeData>
-  label?:
-    | string
-    | {
-        props?: any
-        component: any
-      }
+  label?: string | VNode
   type?: string
   data?: Data
   style?: CSSProperties
@@ -159,8 +154,6 @@ export interface SmoothStepEdgeProps<Data = ElementData, SourceNodeData = any, T
   targetHandleId?: string
   source: string
   target: string
-  sourceHandle?: string
-  targetHandle?: string
   labelStyle?: any
   labelShowBg?: boolean
   labelBgStyle?: any

package/src/types/flow.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, VNode } from 'vue'
+import { Component, CSSProperties, VNode } from 'vue'
 import { GraphEdge, Edge, DefaultEdgeOptions } from './edge'
 import { GraphNode, CoordinateExtent, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
@@ -27,7 +27,7 @@ export type StyleFunc<Data = ElementData> = (element: FlowElement<Data>) => Styl
 /** base element props */
 export interface Element<Data extends ElementData = ElementData> {
   id: string
-  label?: string | VNode
+  label?: string | VNode | Component
   type?: string
   data?: Data
   class?: string | ClassFunc<Data>

package/src/types/node.ts

@@ -1,6 +1,6 @@
-import { VNode } from 'vue'
+import { Component, VNode } from 'vue'
 import { XYPosition, Position, SnapGrid, Element, XYZPosition, Dimensions, ElementData } from './flow'
-import { DefaultNodeTypes } from './components'
+import { DefaultNodeTypes, NodeComponent } from './components'
 import { HandleElement, ValidConnectionFunc } from './handle'
 
 /** Defined as [[x-from, y-from], [x-to, y-to]] **/
@@ -55,6 +55,9 @@ export interface Node<Data = ElementData> extends Element<Data> {
    * or pass a string with units (height: `10rem` -> height: 10rem)
    */
   height?: number | string | HeightFunc
+
+  /** overwrites current node type */
+  template?: NodeComponent
 }
 
 export interface GraphNode<Data = ElementData> extends Node<Data> {