fix: edges not updating text

src/components/Edges/BezierEdge.tsx

@@ -71,19 +71,6 @@ export default defineComponent({
       });
     });
 
-    const text = props.label ? (
-      <EdgeText
-        x={centered({ ...props }).value[0]}
-        y={centered({ ...props }).value[1]}
-        label={props.label}
-        labelStyle={props.labelStyle}
-        labelShowBg={props.labelShowBg}
-        labelBgStyle={props.labelBgStyle}
-        labelBgPadding={props.labelBgPadding}
-        labelBgBorderRadius={props.labelBgBorderRadius}
-      />
-    ) : null;
-
     const markerEnd = reactify((arrowHeadType?: ArrowHeadType, markerEndId?: string) => getMarkerEnd(arrowHeadType, markerEndId));
 
     return () => (
@@ -94,7 +81,18 @@ export default defineComponent({
           d={path({ ...props }).value}
           marker-end={markerEnd(props.arrowHeadType, props.markerEndId).value}
         />
-        {text}
+        {props.label ? (
+          <EdgeText
+            x={centered({ ...props }).value[0]}
+            y={centered({ ...props }).value[1]}
+            label={props.label}
+            labelStyle={props.labelStyle}
+            labelShowBg={props.labelShowBg}
+            labelBgStyle={props.labelBgStyle}
+            labelBgPadding={props.labelBgPadding}
+            labelBgBorderRadius={props.labelBgBorderRadius}
+          />
+        ) : null}
       </>
     );
   }

src/components/Edges/EdgeText.tsx

@@ -1,5 +1,5 @@
 import { EdgeTextProps, Rect } from '../../types';
-import { defineComponent, PropType, ref, watch } from 'vue';
+import { defineComponent, PropType, ref, watchEffect } from 'vue';
 
 export default defineComponent({
   props: {
@@ -12,7 +12,7 @@ export default defineComponent({
       required: true
     },
     label: {
-      type: String as PropType<EdgeTextProps['label']>,
+      type: [String, Object] as PropType<EdgeTextProps['label']>,
       required: true
     },
     labelStyle: {
@@ -39,25 +39,20 @@ export default defineComponent({
   setup(props, { slots }) {
     const edgeRef = ref<SVGTextElement | null>(null);
     const edgeTextBox = ref<Rect>({ x: 0, y: 0, width: 0, height: 0 });
-    const label = ref(props.label);
 
-    watch(label, () => {
+    watchEffect(() => {
-      if (edgeRef.value) {
+      const textBbox = edgeRef.value?.getBBox();
-        const textBbox = edgeRef.value.getBBox();
 
-        edgeRef.value = {
+      if (textBbox) {
+        edgeTextBox.value = {
           x: textBbox.x,
           y: textBbox.y,
           width: textBbox.width,
           height: textBbox.height
-        } as any;
+        };
       }
     });
 
-    if (typeof label.value === 'undefined' || !label.value) {
-      return null;
-    }
-
     return () => (
       <g
         transform={`translate(${props.x - edgeTextBox.value.width / 2} ${props.y - edgeTextBox.value.height / 2})`}
@@ -75,8 +70,8 @@ export default defineComponent({
             ry={props.labelBgBorderRadius}
           />
         )}
-        <text class="revue-flow__edge-text" y={edgeTextBox.value.height / 2} dy="0.3em" ref={edgeRef} style={props.labelStyle}>
+        <text ref={edgeRef} class="revue-flow__edge-text" y={edgeTextBox.value.height / 2} dy="0.3em" style={props.labelStyle}>
-          {label}
+          {props.label}
         </text>
         {slots.default ? slots.default() : ''}
       </g>

src/components/Edges/SmoothStepEdge.tsx

@@ -123,19 +123,6 @@ export default defineComponent({
 
     const markerEnd = reactify((arrowHeadType?: ArrowHeadType, markerEndId?: string) => getMarkerEnd(arrowHeadType, markerEndId));
 
-    const text = props.label ? (
-      <EdgeText
-        x={centered.value[0]}
-        y={centered.value[1]}
-        label={props.label}
-        labelStyle={props.labelStyle}
-        labelShowBg={props.labelShowBg}
-        labelBgStyle={props.labelBgStyle}
-        labelBgPadding={props.labelBgPadding}
-        labelBgBorderRadius={props.labelBgBorderRadius}
-      />
-    ) : null;
-
     return () => (
       <>
         <path
@@ -144,7 +131,18 @@ export default defineComponent({
           d={path.value}
           marker-end={markerEnd(props.arrowHeadType, props.markerEndId).value}
         />
-        {text}
+        {props.label ? (
+          <EdgeText
+            x={centered.value[0]}
+            y={centered.value[1]}
+            label={props.label}
+            labelStyle={props.labelStyle}
+            labelShowBg={props.labelShowBg}
+            labelBgStyle={props.labelBgStyle}
+            labelBgPadding={props.labelBgPadding}
+            labelBgBorderRadius={props.labelBgBorderRadius}
+          />
+        ) : null}
       </>
     );
   }

src/components/Edges/StraightEdge.tsx

@@ -19,19 +19,6 @@ export default defineComponent({
       return targetX < sourceX ? targetX + xOffset : targetX - xOffset;
     });
 
-    const text = props.label ? (
-      <EdgeText
-        x={centerX(props.targetX, props.sourceX).value}
-        y={centerY(props.targetY, props.sourceY).value}
-        label={props.label}
-        labelStyle={props.labelStyle}
-        labelShowBg={props.labelShowBg}
-        labelBgStyle={props.labelBgStyle}
-        labelBgPadding={props.labelBgPadding}
-        labelBgBorderRadius={props.labelBgBorderRadius}
-      />
-    ) : null;
-
     const markerEnd = reactify((arrowHeadType?: ArrowHeadType, markerEndId?: string) => getMarkerEnd(arrowHeadType, markerEndId));
 
     return () => (
@@ -42,7 +29,18 @@ export default defineComponent({
           d={`M ${props.sourceX},${props.sourceY}L ${props.targetX},${props.targetY}`}
           marker-end={markerEnd(props.arrowHeadType, props.markerEndId).value}
         />
-        {text}
+        {props.label ? (
+          <EdgeText
+            x={centerX(props.targetX, props.sourceX).value}
+            y={centerY(props.targetY, props.sourceY).value}
+            label={props.label}
+            labelStyle={props.labelStyle}
+            labelShowBg={props.labelShowBg}
+            labelBgStyle={props.labelBgStyle}
+            labelBgPadding={props.labelBgPadding}
+            labelBgBorderRadius={props.labelBgBorderRadius}
+          />
+        ) : null}
       </>
     );
   }

src/components/Edges/utils.ts

@@ -91,9 +91,9 @@ export const DefaultEdgeProps = {
     default: Position.Top
   },
   label: {
-    type: String as PropType<EdgeProps['label']>,
+    type: [String, Object] as PropType<EdgeProps['label']>,
     required: false,
-    default: undefined
+    default: () => {}
   },
   labelStyle: {
     type: Object as PropType<EdgeProps['labelStyle']>,
@@ -106,7 +106,7 @@ export const DefaultEdgeProps = {
     default: false
   },
   labelBgStyle: {
-    type: String as PropType<EdgeProps['labelBgStyle']>,
+    type: [String, Object] as PropType<EdgeProps['labelBgStyle']>,
     required: false,
     default: undefined
   },
@@ -121,7 +121,7 @@ export const DefaultEdgeProps = {
     default: undefined
   },
   arrowHeadType: {
-    type: Object as PropType<EdgeProps['arrowHeadType']>,
+    type: String as PropType<EdgeProps['arrowHeadType']>,
     required: false,
     default: undefined
   },