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,31 +161,34 @@ const edgeTypes = computed(() => {
       :pan-on-scroll-mode="props.panOnScrollMode"
       :pane-moveable="props.paneMoveable"
     >
-      <SelectionPane
+      <template #default="zoomPaneProps">
-        :delete-key-code="props.deleteKeyCode"
+        <SelectionPane
-        :multi-selection-key-code="props.multiSelectionKeyCode"
+          :delete-key-code="props.deleteKeyCode"
-        :selection-key-code="props.selectionKeyCode"
+          :multi-selection-key-code="props.multiSelectionKeyCode"
-      >
+          :selection-key-code="props.selectionKeyCode"
-        <NodeRenderer :node-types="nodeTypes" :select-nodes-on-drag="props.selectNodesOnDrag">
-          <template v-for="nodeName of Object.keys(nodeTypes)" #[`node-${nodeName}`]="nodeProps">
-            <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
-          </template>
-        </NodeRenderer>
-        <EdgeRenderer
-          :connection-line-type="props.connectionLineType"
-          :connection-line-style="props.connectionLineStyle"
-          :arrow-head-color="props.arrowHeadColor"
-          :marker-end-id="props.markerEndId"
-          :edge-types="edgeTypes"
         >
-          <template v-for="edgeName of Object.keys(edgeTypes)" #[`edge-${edgeName}`]="edgeProps">
+          <NodeRenderer :node-types="nodeTypes" :select-nodes-on-drag="props.selectNodesOnDrag">
-            <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
+            <template v-for="nodeName of Object.keys(nodeTypes)" #[`node-${nodeName}`]="nodeProps">
-          </template>
+              <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
-          <template #custom-connection-line="customConnectionLineProps">
+            </template>
-            <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
+          </NodeRenderer>
-          </template>
+          <EdgeRenderer
-        </EdgeRenderer>
+            :connection-line-type="props.connectionLineType"
-      </SelectionPane>
+            :connection-line-style="props.connectionLineStyle"
+            :arrow-head-color="props.arrowHeadColor"
+            :marker-end-id="props.markerEndId"
+            :edge-types="edgeTypes"
+          >
+            <template v-for="edgeName of Object.keys(edgeTypes)" #[`edge-${edgeName}`]="edgeProps">
+              <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
+            </template>
+            <template #custom-connection-line="customConnectionLineProps">
+              <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
+            </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(
-  store.dimensions.width = newWidth
+  [width, height],
-  store.dimensions.height = newHeight
+  ([newWidth, newHeight]) => {
-})
+    store.dimensions.width = newWidth
-watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]))
+    store.dimensions.height = newHeight
+  },
+  { flush: 'pre' },
+)
+watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]), { flush: 'pre' })
 
 const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
 watchOnce(