feat: add support for custom offset when zooming to element (#535)

Author: harveyconnor

src/core/handlers/handlers.logic.ts

@@ -100,6 +100,8 @@ export const zoomToElement =
     scale?: number,
     animationTime = 600,
     animationType: keyof typeof animations = "easeOut",
+    offsetX = 0,
+    offsetY = 0,
   ): void => {
     handleCancelAnimation(contextInstance);
 
@@ -109,7 +111,13 @@ export const zoomToElement =
       typeof node === "string" ? document.getElementById(node) : node;
 
     if (wrapperComponent && target && wrapperComponent.contains(target)) {
-      const targetState = calculateZoomToNode(contextInstance, target, scale);
+      const targetState = calculateZoomToNode(
+        contextInstance,
+        target,
+        scale,
+        offsetX,
+        offsetY,
+      );
       animate(contextInstance, targetState, animationTime, animationType);
     }
   };

src/core/handlers/handlers.utils.ts

@@ -142,6 +142,8 @@ export function calculateZoomToNode(
   contextInstance: ReactZoomPanPinchContext,
   node: HTMLElement,
   customZoom?: number,
+  customOffsetX = 0,
+  customOffsetY = 0,
 ): { positionX: number; positionY: number; scale: number } {
   const { wrapperComponent, contentComponent, transformState } =
     contextInstance;
@@ -176,8 +178,10 @@ export function calculateZoomToNode(
   const offsetX = (wrapperRect.width - nodeWidth * newScale) / 2;
   const offsetY = (wrapperRect.height - nodeHeight * newScale) / 2;
 
-  const newPositionX = (wrapperRect.left - nodeLeft) * newScale + offsetX;
-  const newPositionY = (wrapperRect.top - nodeTop) * newScale + offsetY;
+  const newPositionX =
+    (wrapperRect.left - nodeLeft) * newScale + offsetX + customOffsetX;
+  const newPositionY =
+    (wrapperRect.top - nodeTop) * newScale + offsetY + customOffsetY;
 
   const bounds = calculateBounds(contextInstance, newScale);