fix: warnings when NaN values are passed to svg transformations

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

src/additional-components/MiniMap/MiniMap.vue

@@ -44,15 +44,16 @@ const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeCl
 
 const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
+const nodes = computed(() => store.nodes.filter((node) => !node.isHidden))
+const bb = computed(() => getRectOfNodes(nodes.value))
+const viewBB = computed(() => ({
+  x: -store.transform[0] / store.transform[2],
+  y: -store.transform[1] / store.transform[2],
+  width: store.dimensions.width / store.transform[2],
+  height: store.dimensions.height / store.transform[2],
+}))
 const viewBox = computed(() => {
-  const bb = getRectOfNodes(store.nodes)
-  const viewBB = {
-    x: -store.transform[0] / store.transform[2],
-    y: -store.transform[1] / store.transform[2],
-    width: store.dimensions.width / store.transform[2],
-    height: store.dimensions.height / store.transform[2],
-  }
-  const boundingRect = store.nodes && store.nodes.length ? getBoundsofRects(bb, viewBB) : viewBB
+  const boundingRect = store.nodes && store.nodes.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value
   const scaledWidth = boundingRect.width / elementWidth
   const scaledHeight = boundingRect.height / elementHeight
   const viewScale = Math.max(scaledWidth, scaledHeight)
@@ -60,7 +61,6 @@ const viewBox = computed(() => {
   const viewHeight = viewScale * elementHeight
   const offset = 5 * viewScale
   return {
-    viewBB,
     offset,
     x: boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset,
     y: boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset,
@@ -69,13 +69,25 @@ const viewBox = computed(() => {
   }
 })
 
-const nodes = computed(() => store.nodes.filter((node) => !node.isHidden))
+const d = computed(() => {
+  if (viewBox.value.x && viewBox.value.y)
+    return `
+    M${viewBox.value.x - viewBox.value.offset},${viewBox.value.y - viewBox.value.offset}
+    h${viewBox.value.width + viewBox.value.offset * 2}
+    v${viewBox.value.height + viewBox.value.offset * 2}
+    h${-viewBox.value.width - viewBox.value.offset * 2}z
+    M${viewBB.value.x},${viewBB.value.y}
+    h${viewBB.value.width}
+    v${viewBB.value.height}
+    h${-viewBB.value.width}z`
+  else return ''
+})
 </script>
 <template>
   <svg
     :width="elementWidth"
     :height="elementHeight"
-    :viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"
+    :viewBox="`${viewBox.x || 0} ${viewBox.y || 0} ${viewBox.width || 0} ${viewBox.height || 0}`"
     class="vue-flow__minimap"
   >
     <slot name="mini-map-nodes" :nodes="nodes" :view-box="viewBox">
@@ -95,15 +107,6 @@ const nodes = computed(() => store.nodes.filter((node) => !node.isHidden))
         />
       </template>
     </slot>
-    <path
-      class="vue-flow__minimap-mask"
-      :d="`
-      M${viewBox.x - viewBox.offset},${viewBox.y - viewBox.offset}h${viewBox.width + viewBox.offset * 2}
-      v${viewBox.height + viewBox.offset * 2}
-      h${-viewBox.width - viewBox.offset * 2}z
-      M${viewBox.viewBB.x},${viewBox.viewBB.y}h${viewBox.viewBB.width}v${viewBox.viewBB.height}h${-viewBox.viewBB.width}z`"
-      :fill="props.maskColor"
-      fill-rule="evenodd"
-    />
+    <path class="vue-flow__minimap-mask" :d="d" :fill="props.maskColor" fill-rule="evenodd" />
   </svg>
 </template>

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"