feat(zoom): Add offset to fitview-params

* Allow for offsetting fit view by x or y values

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

src/composables/useZoomPanHelper.ts

@@ -25,6 +25,7 @@ export default (store = useStore()): UseZoomPanHelper => {
         options.minZoom ?? store.minZoom,
         options.maxZoom ?? store.maxZoom,
         options.padding ?? DEFAULT_PADDING,
+        options.offset,
       )
       const transform = zoomIdentity.translate(x, y).scale(zoom)
 

src/types/flow.ts

@@ -63,6 +63,10 @@ export type FitViewParams = {
   includeHiddenNodes?: boolean
   minZoom?: number
   maxZoom?: number
+  offset?: {
+    x?: number
+    y?: number
+  }
 }
 
 export type FlowExportObject<T = any> = {

src/utils/graph.ts

@@ -291,6 +291,10 @@ export const getTransformForBounds = (
   minZoom: number,
   maxZoom: number,
   padding = 0.1,
+  offset: {
+    x?: number
+    y?: number
+  } = { x: 0, y: 0 },
 ): Transform => {
   const xZoom = width / (bounds.width * (1 + padding))
   const yZoom = height / (bounds.height * (1 + padding))
@@ -298,8 +302,8 @@ export const getTransformForBounds = (
   const clampedZoom = clamp(zoom, minZoom, maxZoom)
   const boundsCenterX = bounds.x + bounds.width / 2
   const boundsCenterY = bounds.y + bounds.height / 2
-  const x = width / 2 - boundsCenterX * clampedZoom
+  const x = width / 2 - boundsCenterX * clampedZoom + (offset.x ?? 0)
-  const y = height / 2 - boundsCenterY * clampedZoom
+  const y = height / 2 - boundsCenterY * clampedZoom + (offset.y ?? 0)
 
   return [x, y, clampedZoom]
 }