fix: typings

src/components/Edges/BezierEdge.vue

@@ -19,7 +19,7 @@ interface BezierEdgeProps<T = any> {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
   labelStyle?: any

src/components/Edges/Edge.vue

@@ -93,12 +93,12 @@ const nodes = computed(() => {
 // when connection type is loose we can define all handles as sources
 const targetNodeHandles = computed(() =>
   store.connectionMode === ConnectionMode.Strict
-    ? nodes.value.targetNode?.__rf.handleBounds.target
-    : nodes.value.targetNode?.__rf.handleBounds.target ?? nodes.value.targetNode?.__rf.handleBounds.source,
+    ? nodes.value.targetNode?.__rf?.handleBounds.target
+    : nodes.value.targetNode?.__rf?.handleBounds.target ?? nodes.value.targetNode?.__rf?.handleBounds.source,
 )
 
 const sourceHandle = computed(
-  () => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null),
+  () => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle || null),
 )
 const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null))
 const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
@@ -126,7 +126,7 @@ const edgePos = computed(() =>
         selected: isSelected,
         animated: props.edge.animated,
         inactive: !store.elementsSelectable,
-        updating: updating.value,
+        updating,
       },
     ]"
     @click="onEdgeClick"

src/components/Edges/EdgeAnchor.vue

@@ -24,14 +24,10 @@ interface EdgeAnchorProps extends HTMLAttributes {
 const props = withDefaults(defineProps<EdgeAnchorProps>(), {
   radius: 10,
 })
+
+const cx = computed(() => shiftX(props.centerX, props.radius, props.position))
+const cy = computed(() => shiftY(props.centerY, props.radius, props.position))
 </script>
 <template>
-  <circle
-    class="vue-flow__edgeupdater"
-    :cx="shiftX(props.centerX, props.radius, props.position)"
-    :cy="shiftY(props.centerY, props.radius, props.position)"
-    :r="props.radius"
-    stroke="transparent"
-    fill="transparent"
-  />
+  <circle class="vue-flow__edgeupdater" :cx="cx" :cy="cy" :r="props.radius" stroke="transparent" fill="transparent" />
 </template>

src/components/Edges/EdgeText.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { HTMLAttributes, VNode } from 'vue'
+import { CSSProperties, HTMLAttributes } from 'vue'
 
 interface EdgeTextProps extends HTMLAttributes {
   x: number
@@ -7,10 +7,11 @@ interface EdgeTextProps extends HTMLAttributes {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
-  labelStyle?: any
+    | any
+  labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: any
   labelBgPadding?: [number, number]
@@ -26,17 +27,18 @@ const props = withDefaults(defineProps<EdgeTextProps>(), {
 })
 
 const edgeRef = templateRef<SVGTextElement>('edge-text', null)
-// @ts-ignore
-const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
+const { width, height, x, y } = useElementBounding(edgeRef)
+const transform = computed(() => `translate(${props.x - width.value / 2} ${props.y - height.value / 2})`)
+const bgPadding = computed(() => [props.labelBgPadding[0], props.labelBgPadding[1]])
 </script>
 <template>
-  <g :transform="`translate(${props.x - width / 2} ${props.y - height / 2})`" class="vue-flow__edge-textwrapper">
+  <g :transform="transform" class="vue-flow__edge-textwrapper">
     <rect
       v-if="props.labelShowBg"
-      :width="width + 2 * props.labelBgPadding[0] + 'px'"
-      :height="height + 2 * props.labelBgPadding[1] + 'px'"
-      :x="-props.labelBgPadding[0]"
-      :y="-props.labelBgPadding[1]"
+      :width="width + 2 * bgPadding[0] + 'px'"
+      :height="height + 2 * bgPadding[1] + 'px'"
+      :x="-bgPadding[0]"
+      :y="-bgPadding[1]"
       class="vue-flow__edge-textbg"
       :style="props.labelBgStyle"
       :rx="props.labelBgBorderRadius"
@@ -46,7 +48,7 @@ const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
       <component
         :is="props.label.component"
         v-if="typeof props.label.component !== 'undefined'"
-        v-bind="{ ...props, ...props.label.props, width, height, x, y }"
+        v-bind="{ ...props, ...props.label?.props, width, height, x, y }"
       />
       <template v-else v-html="props.label">
         {{ props.label }}

src/components/Edges/SmoothStepEdge.vue

@@ -19,7 +19,7 @@ export interface EdgeSmoothStepProps<T = any> {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
   labelStyle?: any

src/components/Edges/StepEdge.vue

@@ -18,7 +18,7 @@ export interface EdgeStepProps<T = any> {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
   labelStyle?: any

src/components/Edges/StraightEdge.vue

@@ -19,7 +19,7 @@ interface StraightEdgeProps<T = any> {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
   labelStyle?: any