feat: add zoom-pane slot

* if the user wants to pass a slot into zoom pane
* props are the current width/height and transform values

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

src/container/VueFlow/VueFlow.vue

@@ -161,6 +161,7 @@ const edgeTypes = computed(() => {
       :pan-on-scroll-mode="props.panOnScrollMode"
       :pane-moveable="props.paneMoveable"
     >
+      <template #default="zoomPaneProps">
         <SelectionPane
           :delete-key-code="props.deleteKeyCode"
           :multi-selection-key-code="props.multiSelectionKeyCode"
@@ -186,6 +187,8 @@ const edgeTypes = computed(() => {
             </template>
           </EdgeRenderer>
         </SelectionPane>
+        <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
+      </template>
     </ZoomPane>
     <slot v-bind="{ ...props, store, hooks }"></slot>
   </div>

src/container/ZoomPane/ZoomPane.vue

@@ -73,7 +73,6 @@ invoke(async () => {
     if (viewChanged(transform.value, event.transform)) {
       const flowTransform = eventToFlowTransform(event.transform)
       transform.value = flowTransform
-
       hooks.moveStart.trigger(flowTransform)
     }
   })
@@ -82,7 +81,6 @@ invoke(async () => {
     if (viewChanged(transform.value, event.transform)) {
       const flowTransform = eventToFlowTransform(event.transform)
       transform.value = flowTransform
-
       hooks.moveEnd.trigger(flowTransform)
     }
   })
@@ -95,7 +93,6 @@ invoke(async () => {
         if (viewChanged(transform.value, event.transform)) {
           const flowTransform = eventToFlowTransform(event.transform)
           transform.value = flowTransform
-
           hooks.move.trigger(flowTransform)
         }
       })
@@ -185,11 +182,15 @@ store.dimensions = {
   height: height.value,
 }
 
-watch([width, height], ([newWidth, newHeight]) => {
+watch(
+  [width, height],
+  ([newWidth, newHeight]) => {
     store.dimensions.width = newWidth
     store.dimensions.height = newHeight
-})
+  },
-watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]))
+  { flush: 'pre' },
+)
+watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]), { flush: 'pre' })
 
 const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
 watchOnce(