fix: warnings when NaN values are passed to svg transformations

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/Edges/BezierEdge.vue

@@ -48,11 +48,13 @@ const centered = computed(() =>
     ...props,
   }),
 )
-const path = computed(() =>
-  getBezierPath({
-    ...props,
-  }),
-)
+const path = computed(() => {
+  if (props.sourceX && props.sourceY)
+    return getBezierPath({
+      ...props,
+    })
+  else return ''
+})
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>

src/components/Edges/EdgeAnchor.vue

@@ -23,10 +23,21 @@ interface EdgeAnchorProps extends HTMLAttributes {
 
 const props = withDefaults(defineProps<EdgeAnchorProps>(), {
   radius: 10,
+  centerX: 0,
+  centerY: 0,
+  position: Position.Top,
 })
 
-const cx = computed(() => shiftX(props.centerX, props.radius, props.position))
-const cy = computed(() => shiftY(props.centerY, props.radius, props.position))
+const cx = computed(() => {
+  const val = shiftX(props.centerX, props.radius, props.position)
+  if (isNaN(val)) return 0
+  else return val
+})
+const cy = computed(() => {
+  const val = shiftY(props.centerY, props.radius, props.position)
+  if (isNaN(val)) return 0
+  else return val
+})
 </script>
 <template>
   <circle class="vue-flow__edgeupdater" :cx="cx" :cy="cy" :r="props.radius" stroke="transparent" fill="transparent" />

src/components/Edges/EdgeText.vue

@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<EdgeTextProps>(), {
 
 const edgeRef = templateRef<SVGTextElement>('edge-text', null)
 const { width, height, x, y } = useElementBounding(edgeRef)
-const transform = computed(() => `translate(${props.x - width.value / 2} ${props.y - height.value / 2})`)
+const transform = computed(() => `translate(${props.x - width.value / 2 || 0} ${props.y - height.value / 2 || 0})`)
 const bgPadding = computed(() => [props.labelBgPadding[0], props.labelBgPadding[1]])
 </script>
 <template>

src/components/Edges/SmoothStepEdge.vue

@@ -50,11 +50,14 @@ const centered = computed(() =>
     ...props,
   }),
 )
-const path = computed(() =>
-  getSmoothStepPath({
-    ...props,
-  }),
-)
+
+const path = computed(() => {
+  if (props.sourceX && props.sourceY)
+    return getSmoothStepPath({
+      ...props,
+    })
+  else return ''
+})
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>

src/components/Edges/StraightEdge.vue

@@ -52,21 +52,19 @@ const centerX = computed(() => {
   const xOffset = Math.abs(props.targetX - props.sourceX) / 2
   return props.targetX < props.sourceX ? props.targetX + xOffset : props.targetX - xOffset
 })
-const path = computed(() =>
-  getBezierPath({
-    ...props,
-  }),
-)
+
+const path = computed(() => {
+  if (props.sourceX && props.sourceY)
+    return getBezierPath({
+      ...props,
+    })
+  else return ''
+})
 
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
 <template>
-  <path
-    :style="props.style"
-    class="vue-flow__edge-path"
-    :d="`M ${props.sourceX},${props.sourceY}L ${props.targetX},${props.targetY}`"
-    :marker-end="markerEnd"
-  />
+  <path :style="props.style" class="vue-flow__edge-path" :d="path" :marker-end="markerEnd" />
   <EdgeText
     v-if="props.label"
     :x="centerX"