From 440ad3c68100cfe842897d984bdf41c0249419f7 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 10 Apr 2022 17:54:19 +0200
Subject: [PATCH] fix(types): node/edge label type

* add Component to label type
---
 examples/src/Edges/EdgesExample.vue       | 7 +------
 package/src/components/Edges/BaseEdge.vue | 7 +------
 package/src/components/Edges/EdgeText.vue | 1 +
 package/src/types/edge.ts                 | 4 ++--
 package/src/types/node.ts                 | 2 +-
 5 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/examples/src/Edges/EdgesExample.vue b/examples/src/Edges/EdgesExample.vue
index b5873ac5..562a6590 100644
--- a/examples/src/Edges/EdgesExample.vue
+++ b/examples/src/Edges/EdgesExample.vue
@@ -29,12 +29,7 @@ const initialEdges: Edge[] = [
     id: 'e5-6',
     source: '5',
     target: '6',
-    label: {
-      component: markRaw(CustomLabel),
-      props: {
-        label: 'custom label text',
-      },
-    },
+    label: h(CustomLabel, { label: 'custom label text' }, {}),
     labelStyle: { fill: 'red', fontWeight: 700 },
     markerEnd: {
       type: MarkerType.Arrow,
diff --git a/package/src/components/Edges/BaseEdge.vue b/package/src/components/Edges/BaseEdge.vue
index dde5825d..d5f94e0a 100644
--- a/package/src/components/Edges/BaseEdge.vue
+++ b/package/src/components/Edges/BaseEdge.vue
@@ -6,12 +6,7 @@ interface Props {
   centerX: number
   centerY: number
   path: string
-  label?:
-    | string
-    | {
-        props?: any
-        component: any
-      }
+  label?: any
   style?: CSSProperties
   labelStyle?: any
   labelShowBg?: boolean
diff --git a/package/src/components/Edges/EdgeText.vue b/package/src/components/Edges/EdgeText.vue
index a03005f6..a5ab4bd0 100644
--- a/package/src/components/Edges/EdgeText.vue
+++ b/package/src/components/Edges/EdgeText.vue
@@ -41,6 +41,7 @@ export default {
       <slot v-bind="props">
         <component :is="props.label" v-if="typeof props.label !== 'string' && typeof props.label" />
         <template v-else v-html="props.label">
+          Floo
           {{ props.label }}
         </template>
       </slot>
diff --git a/package/src/types/edge.ts b/package/src/types/edge.ts
index 5f517f49..02be03cb 100644
--- a/package/src/types/edge.ts
+++ b/package/src/types/edge.ts
@@ -106,7 +106,7 @@ export interface EdgeProps<Data = ElementData, SourceNodeData = any, TargetNodeD
   id: string
   sourceNode: GraphNode<SourceNodeData>
   targetNode: GraphNode<TargetNodeData>
-  label?: string | VNode
+  label?: string | VNode | Component<EdgeTextProps> | Object
   type?: string
   data?: Data
   style?: CSSProperties
@@ -139,7 +139,7 @@ export interface SmoothStepEdgeProps<Data = ElementData, SourceNodeData = any, T
   id: string
   sourceNode: GraphNode<SourceNodeData>
   targetNode: GraphNode<TargetNodeData>
-  label?: string | VNode
+  label?: string | VNode | Component<EdgeTextProps> | Object
   type?: string
   data?: Data
   style?: CSSProperties
diff --git a/package/src/types/node.ts b/package/src/types/node.ts
index 53c9784e..2f4f9517 100644
--- a/package/src/types/node.ts
+++ b/package/src/types/node.ts
@@ -94,7 +94,7 @@ export interface NodeProps<Data = ElementData> {
    * For example like this: `h('div', props, children)`)
    * Object is just a type-hack for Vue, ignore that
    */
-  label?: string | VNode | Object
+  label?: string | VNode | Component | Object
   /** called when used as target for new connection */
   isValidTargetPos?: ValidConnectionFunc
   /** called when used as source for new connection */