Merge branch 'master' into v4.0.0

Author: prc5

jest.setup.ts

@@ -19,8 +19,8 @@ global.ResizeObserver = class ResizeObserver {
     // Trigger callback once synchronously so centerOnInit flows complete.
     this.callback([], this);
   }
-  unobserve() {}
-  disconnect() {}
+  unobserve() { }
+  disconnect() { }
 };
 // ./config/jest/setupTests.js
 

package.json

@@ -16,7 +16,7 @@
   "scripts": {
     "build": "rollup -c",
     "build:docs": "yarn storybook build",
-    "start": "yarn storybook dev -p 6006 DISABLE_ESLINT_PLUGIN=true",
+    "start": "cross-env DISABLE_ESLINT_PLUGIN=true yarn storybook dev -p 6006",
     "test": "jest",
     "test:debug": "jest-preview",
     "lint": "eslint . --ext .js,.jsx,.tsx,.ts --fix",

src/core/handlers/handlers.logic.ts

@@ -99,6 +99,8 @@ export const zoomToElement =
     scale?: number,
     animationTime = 600,
     animationType: keyof typeof animations = "easeOut",
+    offsetX = 0,
+    offsetY = 0,
   ): void => {
     handleCancelAnimation(contextInstance);
 
@@ -108,7 +110,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

@@ -192,6 +192,8 @@ export function calculateZoomToNode(
   contextInstance: ReactZoomPanPinchContext,
   node: HTMLElement,
   customZoom?: number,
+  customOffsetX = 0,
+  customOffsetY = 0,
 ): { positionX: number; positionY: number; scale: number } {
   const { wrapperComponent, contentComponent, state } = contextInstance;
   const { limitToBounds, minScale, maxScale } = contextInstance.setup;
@@ -220,8 +222,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);
 

src/core/instance.core.ts

@@ -213,21 +213,11 @@ export class ZoomPanPinch {
 
   handleInitialize = (contentComponent: HTMLDivElement): void => {
     const { centerOnInit } = this.setup;
-
-    if (centerOnInit && this.wrapperComponent) {
-      const targetState = getCenterPosition(
-        this.state.scale,
-        this.wrapperComponent,
-        contentComponent,
-      );
-      this.state.positionX = targetState.positionX;
-      this.state.positionY = targetState.positionY;
-    }
-
     this.applyTransformation();
     this.onInitCallbacks.forEach((callback) => callback(getContext(this)));
 
     if (centerOnInit) {
+      this.setCenter();
       this.observer = new ResizeObserver(() => {
         const currentWidth = contentComponent.offsetWidth;
         const currentHeight = contentComponent.offsetHeight;

src/core/pan/panning.logic.ts

@@ -34,6 +34,7 @@ export function handlePanningStart(
 
 export function handleAlignToBounds(
   contextInstance: ReactZoomPanPinchContext,
+  customAnimationTime?: number,
 ): void {
   const { scale } = contextInstance.state;
   const { minScale, autoAlignment } = contextInstance.setup;
@@ -47,7 +48,12 @@ export function handleAlignToBounds(
   const targetState = handlePanToBounds(contextInstance);
 
   if (targetState) {
-    animate(contextInstance, targetState, animationTime, animationType);
+    animate(
+      contextInstance,
+      targetState,
+      customAnimationTime ?? animationTime,
+      animationType,
+    );
   }
 }
 

src/core/pan/panning.utils.ts

@@ -72,6 +72,7 @@ export const handlePanningSetup = (
   const y = event.clientY;
 
   contextInstance.startCoords = { x: x - positionX, y: y - positionY };
+  contextInstance.clientCoords = {x: x, y:  y};
 };
 
 export const handleTouchPanningSetup = (
@@ -89,6 +90,7 @@ export const handleTouchPanningSetup = (
     const x = touches[0].clientX;
     const y = touches[0].clientY;
     contextInstance.startCoords = { x: x - positionX, y: y - positionY };
+    contextInstance.clientCoords = {x: x, y:  y};
   }
 };
 export function handlePanToBounds(