refactor(nodes,edges,types!): Change label-type to string | VNode | Object

package/src/components/ConnectionLine/ConnectionLine.vue

@@ -17,8 +17,10 @@ const sourceHandle =
   store.connectionHandleId && store.connectionHandleType
     ? props.sourceNode.handleBounds[store.connectionHandleType]?.find((d: HandleElement) => d.id === store.connectionHandleId)
     : store.connectionHandleType && props.sourceNode.handleBounds[store.connectionHandleType ?? 'source']?.[0]
+
 const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : props.sourceNode.dimensions.width / 2
 const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.dimensions.height
+
 const sourceX = props.sourceNode.computedPosition.x + sourceHandleX
 const sourceY = props.sourceNode.computedPosition.y + sourceHandleY
 

package/src/components/Edges/EdgeText.vue

@@ -39,11 +39,7 @@ export default {
     />
     <text ref="edge-text" class="vue-flow__edge-text" :y="edgeRefBbox.height / 2" dy="0.3em" :style="props.labelStyle">
       <slot v-bind="props">
-        <component
+        <component :is="props.label" v-if="typeof props.label !== 'string' && typeof props.label" />
-          :is="props.label?.component"
-          v-if="typeof props.label !== 'string' && typeof props.label?.component !== 'undefined'"
-          v-bind="props.label?.props"
-        />
         <template v-else v-html="props.label">
           {{ props.label }}
         </template>

package/src/components/Nodes/DefaultNode.vue

@@ -21,7 +21,7 @@ export default {
     :is-connectable="props.connectable"
     :is-valid-connection="props.isValidTargetPos"
   />
-  <component :is="props.label.component" v-bind="props.label.props" v-if="typeof props.label !== 'string' && props.label" />
+  <component :is="props.label" v-if="typeof props.label !== 'string' && props.label" />
   <span v-else v-html="props.label" />
   <Handle
     type="source"

package/src/components/Nodes/InputNode.vue

@@ -14,7 +14,7 @@ export default {
 }
 </script>
 <template>
-  <component :is="props.label.component" v-bind="props.label.props" v-if="typeof props.label !== 'string' && props.label" />
+  <component :is="props.label" v-if="typeof props.label !== 'string' && props.label" />
   <span v-else v-html="props.label" />
   <Handle
     type="source"

package/src/components/Nodes/OutputNode.vue

@@ -14,7 +14,7 @@ export default {
 }
 </script>
 <template>
-  <component :is="props.label.component" v-bind="props.label.props" v-if="typeof props.label !== 'string' && props.label" />
+  <component :is="props.label" v-bind="props.label" v-if="typeof props.label !== 'string' && props.label" />
   <span v-else v-html="props.label" />
   <Handle
     type="source"

package/src/types/components.ts

@@ -1,4 +1,4 @@
-import { Component, CSSProperties, DefineComponent, HTMLAttributes } from 'vue'
+import { Component, CSSProperties, DefineComponent, HTMLAttributes, VNode } from 'vue'
 import { BackgroundVariant, Dimensions, ElementData, XYPosition } from './flow'
 import { GraphNode, Node, NodeProps } from './node'
 import { EdgeProps } from './edge'
@@ -99,12 +99,7 @@ export interface MiniMapNodeProps {
 export interface EdgeTextProps extends HTMLAttributes {
   x: number
   y: number
-  label?:
+  label?: string | VNode | Object
-    | string
-    | {
-        component: any
-        props?: any
-      }
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: CSSProperties

package/src/types/flow.ts

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

package/src/types/node.ts

@@ -1,3 +1,4 @@
+import { VNode } from 'vue'
 import { XYPosition, Position, SnapGrid, Element, XYZPosition, Dimensions, ElementData } from './flow'
 import { DefaultNodeTypes } from './components'
 import { HandleElement, ValidConnectionFunc } from './handle'
@@ -79,16 +80,16 @@ export interface NodeProps<Data = ElementData> {
   connectable: boolean
   /** absolute position in relation to parent elements + z-index */
   computedPosition: XYZPosition
-  /** x, y position */
+  /** node x, y (relative) position on graph */
   position: XYPosition
   /** dom element dimensions (width, height) */
   dimensions: Dimensions
-  label?:
+  /**
-    | string
+   * node label, either pass a string or a VNode
-    | {
+   * For example like this: `h('div', props, children)`)
-        props?: any
+   * Object is just a type-hack for Vue, ignore that
-        component: any
+   */
-      }
+  label?: string | VNode | Object
   /** called when used as target for new connection */
   isValidTargetPos?: ValidConnectionFunc
   /** called when used as source for new connection */