fix: zoom pane not scaling

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

src/components/Edges/Edge.vue

@@ -118,6 +118,7 @@ const edgePos = computed(() =>
 </script>
 <template>
   <g
+    v-if="!props.edge.isHidden && isVisible(edgePos)"
     :class="[
       'vue-flow__edge',
       `vue-flow__edge-${props.edge.type || 'default'}`,
@@ -136,7 +137,6 @@ const edgePos = computed(() =>
     @mouseleave="onEdgeMouseLeave"
   >
     <slot
-      v-if="!props.edge.isHidden && isVisible(edgePos)"
       v-bind="{
         id: props.edge.id,
         source: props.edge.source,

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -32,9 +32,7 @@ const edges = computed(() => store.edges.filter((edge) => !edge.isHidden))
 <template>
   <svg :width="store.dimensions.width" :height="store.dimensions.height" class="vue-flow__edges">
     <MarkerDefinitions :color="props.arrowHeadColor" />
-    <g
-      :transform="store.transform.length && `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`"
-    >
+    <g :transform="`translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`">
       <template v-for="edge of edges" :key="edge.id">
         <Edge
           :edge="edge"

src/container/ZoomPane/ZoomPane.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue'
 import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { get } from '@vueuse/core'
 import { pointer, select } from 'd3-selection'
@@ -40,7 +39,9 @@ const hooks = useHooks()
 const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
-  prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k
+  (prevTransform.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
+  (prevTransform.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
+  (prevTransform.zoom !== eventTransform.k && !isNaN(eventTransform.k))
 
 const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => ({
   x: eventTransform.x,
@@ -52,7 +53,6 @@ const clampedX = clamp(props.defaultPosition[0], store.translateExtent[0][0], st
 const clampedY = clamp(props.defaultPosition[1], store.translateExtent[0][1], store.translateExtent[1][1])
 const clampedZoom = clamp(props.defaultZoom, store.minZoom, store.maxZoom)
 const transform = ref({ x: clampedX, y: clampedY, zoom: clampedZoom })
-
 const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent))
 const d3Selection = ref()
 
@@ -93,10 +93,12 @@ until(zoomPaneEl)
           d3z.on('zoom', null)
         } else {
           d3z.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-            const flowTransform = eventToFlowTransform(event.transform)
-            transform.value = flowTransform
+            if (viewChanged(transform.value, event.transform)) {
+              const flowTransform = eventToFlowTransform(event.transform)
+              transform.value = flowTransform
 
-            hooks.move.trigger(flowTransform)
+              hooks.move.trigger(flowTransform)
+            }
           })
         }
       })
@@ -190,7 +192,6 @@ store.dimensions = {
   width: width.value,
   height: height.value,
 }
-store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
 
 watch(width, (val) => (store.dimensions.width = val))
 watch(height, (val) => (store.dimensions.height = val))