react-zoom-pan-pinch - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0

dist/index.d.ts

@@ -1,13 +0,43 @@
-import React, { Component } from 'react';
+import React from 'react';
 
-declare type StartCoordsType = {
+declare const animations: {
+    easeOut: (t: number) => number;
+    linear: (t: number) => number;
+    easeInQuad: (t: number) => number;
+    easeOutQuad: (t: number) => number;
+    easeInOutQuad: (t: number) => number;
+    easeInCubic: (t: number) => number;
+    easeOutCubic: (t: number) => number;
+    easeInOutCubic: (t: number) => number;
+    easeInQuart: (t: number) => number;
+    easeOutQuart: (t: number) => number;
+    easeInOutQuart: (t: number) => number;
+    easeInQuint: (t: number) => number;
+    easeOutQuint: (t: number) => number;
+    easeInOutQuint: (t: number) => number;
+};
+
+type DeepNonNullable<T> = T extends (...args: any[]) => any ? T : T extends any[] ? DeepNonNullableArray<T[number]> : T extends object ? DeepNonNullableObject<T> : T;
+type DeepNonNullableArray<T> = Array<DeepNonNullable<NonNullable<T>>>;
+type DeepNonNullableObject<T> = {
+    [P in keyof T]-?: DeepNonNullable<NonNullable<T[P]>>;
+};
+
+declare const zoomIn: (contextInstance: ReactZoomPanPinchContext) => (step?: number, animationTime?: number, animationType?: keyof typeof animations) => void;
+declare const zoomOut: (contextInstance: ReactZoomPanPinchContext) => (step?: number, animationTime?: number, animationType?: keyof typeof animations) => void;
+declare const setTransform: (contextInstance: ReactZoomPanPinchContext) => (newPositionX: number, newPositionY: number, newScale: number, animationTime?: number, animationType?: keyof typeof animations) => void;
+declare const resetTransform: (contextInstance: ReactZoomPanPinchContext) => (animationTime?: number, animationType?: keyof typeof animations) => void;
+declare const centerView: (contextInstance: ReactZoomPanPinchContext) => (scale?: number, animationTime?: number, animationType?: keyof typeof animations) => void;
+declare const zoomToElement: (contextInstance: ReactZoomPanPinchContext) => (node: HTMLElement | string, scale?: number, animationTime?: number, animationType?: keyof typeof animations) => void;
+
+type StartCoordsType = {
     x: number;
     y: number;
 } | null;
-declare class TransformContext extends Component<Omit<ReactZoomPanPinchProps, "ref"> & {
-    setRef: (context: ReactZoomPanPinchRef) => void;
-}> {
+declare class ZoomPanPinch {
+    props: ReactZoomPanPinchProps;
     mounted: boolean;
     transformState: ReactZoomPanPinchState;
     setup: LibrarySetup;
+    observer?: ResizeObserver;
     wrapperComponent: HTMLDivElement | null;
@@ -37,9 +67,10 @@ contentComponent: HTMLDivElement | null;
     };
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(oldProps: ReactZoomPanPinchProps): void;
+    constructor(props: ReactZoomPanPinchProps);
+    mount: () => void;
+    unmount: () => void;
+    update: (newProps: ReactZoomPanPinchProps) => void;
     initializeWindowEvents: () => void;
     cleanupWindowEvents: () => void;
     handleInitializeWrapperEvents: (wrapper: HTMLDivElement) => void;
-    handleInitialize: () => void;
+    handleInitialize: (contentComponent: HTMLDivElement) => void;
     onWheelZoom: (event: WheelEvent) => void;
@@ -60,46 +91,18 @@ onPanningStart: (event: MouseEvent) => void;
     isPressingKeys: (keys: string[]) => boolean;
-    setComponents: (wrapperComponent: HTMLDivElement, contentComponent: HTMLDivElement) => void;
     setTransformState: (scale: number, positionX: number, positionY: number) => void;
     setCenter: () => void;
     applyTransformation: () => void;
-    handleRef: () => void;
-    render(): JSX.Element;
+    getContext: () => ReactZoomPanPinchRef;
+    /**
+     * Initialization
+     */
+    init: (wrapperComponent: HTMLDivElement, contentComponent: HTMLDivElement) => void;
 }
 
-declare const animations: {
-    easeOut: (t: number) => number;
-    linear: (t: number) => number;
-    easeInQuad: (t: number) => number;
-    easeOutQuad: (t: number) => number;
-    easeInOutQuad: (t: number) => number;
-    easeInCubic: (t: number) => number;
-    easeOutCubic: (t: number) => number;
-    easeInOutCubic: (t: number) => number;
-    easeInQuart: (t: number) => number;
-    easeOutQuart: (t: number) => number;
-    easeInOutQuart: (t: number) => number;
-    easeInQuint: (t: number) => number;
-    easeOutQuint: (t: number) => number;
-    easeInOutQuint: (t: number) => number;
-};
-
-declare type DeepNonNullable<T> = T extends (...args: any[]) => any ? T : T extends any[] ? DeepNonNullableArray<T[number]> : T extends object ? DeepNonNullableObject<T> : T;
-declare type DeepNonNullableArray<T> = Array<DeepNonNullable<NonNullable<T>>>;
-declare type DeepNonNullableObject<T> = {
-    [P in keyof T]-?: DeepNonNullable<NonNullable<T[P]>>;
-};
-
-declare const zoomIn: (contextInstance: ReactZoomPanPinchContext) => (step?: number, animationTime?: number, animationType?: keyof typeof animations) => void;
-declare const zoomOut: (contextInstance: ReactZoomPanPinchContext) => (step?: number, animationTime?: number, animationType?: keyof typeof animations) => void;
-declare const setTransform: (contextInstance: ReactZoomPanPinchContext) => (newPositionX: number, newPositionY: number, newScale: number, animationTime?: number, animationType?: keyof typeof animations) => void;
-declare const resetTransform: (contextInstance: ReactZoomPanPinchContext) => (animationTime?: number, animationType?: keyof typeof animations) => void;
-declare const centerView: (contextInstance: ReactZoomPanPinchContext) => (scale?: number | undefined, animationTime?: number, animationType?: keyof typeof animations) => void;
-declare const zoomToElement: (contextInstance: ReactZoomPanPinchContext) => (node: HTMLElement | string, scale?: number | undefined, animationTime?: number, animationType?: keyof typeof animations) => void;
-
-declare type ReactZoomPanPinchContext = typeof TransformContext.prototype;
-declare type ReactZoomPanPinchRef = {
+type ReactZoomPanPinchContext = typeof ZoomPanPinch.prototype;
+type ReactZoomPanPinchRef = {
     instance: ReactZoomPanPinchContext;
     state: ReactZoomPanPinchState;
 } & ReactZoomPanPinchHandlers;
-declare type ReactZoomPanPinchState = {
+type ReactZoomPanPinchState = {
     previousScale: number;
@@ -110,3 +113,3 @@ scale: number;
 };
-declare type ReactZoomPanPinchHandlers = {
+type ReactZoomPanPinchHandlers = {
     zoomIn: ReturnType<typeof zoomIn>;
@@ -119,3 +122,6 @@ zoomOut: ReturnType<typeof zoomOut>;
 };
-declare type ReactZoomPanPinchProps = {
+type ReactZoomPanPinchRefProps = {
+    setRef: (context: ReactZoomPanPinchRef) => void;
+} & Omit<ReactZoomPanPinchProps, "ref">;
+type ReactZoomPanPinchProps = {
     children?: React.ReactNode | ((ref: ReactZoomPanPinchRef) => React.ReactNode);
@@ -206,16 +212,16 @@ ref?: React.Ref<ReactZoomPanPinchRef>;
 };
-declare type ReactZoomPanPinchComponentHelpers = {
+type ReactZoomPanPinchComponentHelpers = {
     setComponents: (wrapper: HTMLDivElement, content: HTMLDivElement) => void;
 };
-declare type LibrarySetup = Pick<ReactZoomPanPinchProps, "minPositionX" | "maxPositionX" | "minPositionY" | "maxPositionY"> & DeepNonNullable<Omit<ReactZoomPanPinchProps, "ref" | "initialScale" | "initialPositionX" | "initialPositionY" | "minPositionX" | "maxPositionX" | "minPositionY" | "maxPositionY" | "children" | "defaultPositionX" | "defaultPositionY" | "defaultScale" | "wrapperClass" | "contentClass" | "onWheelStart" | "onWheel" | "onWheelStop" | "onPanningStart" | "onPanning" | "onPanningStop" | "onPinchingStart" | "onPinching" | "onPinchingStop" | "onZoomStart" | "onZoom" | "onZoomStop" | "onTransformed" | "onInit">>;
+type LibrarySetup = Pick<ReactZoomPanPinchProps, "minPositionX" | "maxPositionX" | "minPositionY" | "maxPositionY"> & DeepNonNullable<Omit<ReactZoomPanPinchProps, "ref" | "initialScale" | "initialPositionX" | "initialPositionY" | "minPositionX" | "maxPositionX" | "minPositionY" | "maxPositionY" | "children" | "defaultPositionX" | "defaultPositionY" | "defaultScale" | "wrapperClass" | "contentClass" | "onWheelStart" | "onWheel" | "onWheelStop" | "onPanningStart" | "onPanning" | "onPanningStop" | "onPinchingStart" | "onPinching" | "onPinchingStop" | "onZoomStart" | "onZoom" | "onZoomStop" | "onTransformed" | "onInit">>;
 
-declare type SizeType = {
+type SizeType = {
     width: number;
     height: number;
 };
-declare type PositionType = {
+type PositionType = {
     x: number;
     y: number;
 };
-declare type StateType = {
+type StateType = {
     scale: number;
@@ -225,3 +231,3 @@ positionX: number;
 };
-declare type VelocityType = {
+type VelocityType = {
     velocityX: number;
@@ -231,3 +237,3 @@ velocityY: number;
 };
-declare type BoundsType = {
+type BoundsType = {
     minPositionX: number;
@@ -238,7 +244,7 @@ maxPositionX: number;
 };
-declare type AnimationType = () => void | number;
+type AnimationType = () => void | number;
 
 declare const TransformWrapper: React.ForwardRefExoticComponent<Omit<ReactZoomPanPinchProps, "ref"> & React.RefAttributes<ReactZoomPanPinchRef>>;
 
-declare type Props = {
+type Props = {
     children: React.ReactNode;
@@ -254,2 +260,2 @@ wrapperClass?: string;
 
-export { AnimationType, BoundsType, LibrarySetup, PositionType, ReactZoomPanPinchComponentHelpers, ReactZoomPanPinchContext, ReactZoomPanPinchHandlers, ReactZoomPanPinchProps, ReactZoomPanPinchRef, ReactZoomPanPinchState, SizeType, StateType, TransformComponent, TransformWrapper, VelocityType, useTransformContext };
+export { AnimationType, BoundsType, LibrarySetup, PositionType, ReactZoomPanPinchComponentHelpers, ReactZoomPanPinchContext, ReactZoomPanPinchHandlers, ReactZoomPanPinchProps, ReactZoomPanPinchRef, ReactZoomPanPinchRefProps, ReactZoomPanPinchState, SizeType, StateType, TransformComponent, TransformWrapper, VelocityType, useTransformContext };

package.json

 {
   "name": "react-zoom-pan-pinch",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Zoom and pan html elements in easy way",
@@ -34,14 +34,16 @@ "author": "prc5",
   "devDependencies": {
-    "@babel/core": "^7.13.14",
-    "@babel/runtime": "^7.13.10",
+    "@babel/core": "^7.20.12",
+    "@babel/runtime": "^7.20.13",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-typescript": "^8.2.1",
-    "@storybook/addon-a11y": "^6.3.5",
-    "@storybook/addon-actions": "^6.3.5",
-    "@storybook/addon-docs": "^6.3.5",
-    "@storybook/addon-essentials": "^6.3.5",
-    "@storybook/addon-links": "^6.3.5",
-    "@storybook/addon-storysource": "^6.3.5",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.5",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-storysource": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/preset-create-react-app": "4.1.2",
+    "@storybook/react": "^6.5.16",
     "@testing-library/react": "^11.2.6",
@@ -52,16 +54,18 @@ "@types/jest": "^26.0.22",
     "@types/react-dom": "^17.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.20.0",
-    "@typescript-eslint/parser": "^4.20.0",
-    "all-contributors-cli": "^6.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/parser": "^5.28.0",
     "babel-eslint": "9.0.0",
     "babel-loader": "^8.2.2",
     "cross-env": "^7.0.3",
-    "eslint": "^7.23.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-flowtype": "^5.4.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.23.1",
+    "eslint": "^8.17.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-next": "12.1.6",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "gh-pages": "^3.1.0",
@@ -71,3 +75,3 @@ "install-peers-cli": "^2.2.0",
     "prism-react-renderer": "^1.2.1",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "5.0.1",
     "rollup": "^2.46.0",
@@ -79,5 +83,6 @@ "rollup-plugin-delete": "^2.0.0",
     "source-map-loader": "^2.0.1",
-    "ts-loader": "^8.1.0",
+    "ts-loader": "^9.4.2",
     "typescript": "^4.2.3",
-    "webpack-cli": "^4.6.0"
+    "webpack": "5",
+    "webpack-cli": "^5.0.1"
   },
@@ -84,0 +89,0 @@ "files": [

src/constants/state.constants.ts

 import {
   LibrarySetup,
   ReactZoomPanPinchContext,
-} from "../models/context.model";
-import {
   ReactZoomPanPinchComponentHelpers,
@@ -7,0 +5,0 @@ ReactZoomPanPinchState,

src/core/animations/animations.constants.ts

@@ -0,1 +1,3 @@
+/* eslint-disable no-plusplus */
+/* eslint-disable no-param-reassign */
 /**
@@ -5,47 +7,47 @@ * Functions should return denominator of the target value, which is the next animation step.
  */
-const easeOut = function (t: number): number {
+const easeOut = (t: number): number => {
   return -Math.cos(t * Math.PI) / 2 + 0.5;
 };
 // linear
-const linear = function (t: number): number {
+const linear = (t: number): number => {
   return t;
 };
 // accelerating from zero velocity
-const easeInQuad = function (t: number): number {
+const easeInQuad = (t: number): number => {
   return t * t;
 };
 // decelerating to zero velocity
-const easeOutQuad = function (t: number): number {
+const easeOutQuad = (t: number): number => {
   return t * (2 - t);
 };
 // acceleration until halfway, then deceleration
-const easeInOutQuad = function (t: number): number {
+const easeInOutQuad = (t: number): number => {
   return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
 };
 // accelerating from zero velocity
-const easeInCubic = function (t: number): number {
+const easeInCubic = (t: number): number => {
   return t * t * t;
 };
 // decelerating to zero velocity
-const easeOutCubic = function (t: number): number {
+const easeOutCubic = (t: number): number => {
   return --t * t * t + 1;
 };
 // acceleration until halfway, then deceleration
-const easeInOutCubic = function (t: number): number {
+const easeInOutCubic = (t: number): number => {
   return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
 };
 // accelerating from zero velocity
-const easeInQuart = function (t: number): number {
+const easeInQuart = (t: number): number => {
   return t * t * t * t;
 };
 // decelerating to zero velocity
-const easeOutQuart = function (t: number): number {
+const easeOutQuart = (t: number): number => {
   return 1 - --t * t * t * t;
 };
 // acceleration until halfway, then deceleration
-const easeInOutQuart = function (t: number): number {
+const easeInOutQuart = (t: number): number => {
   return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
 };
 // accelerating from zero velocity
-const easeInQuint = function (t: number): number {
+const easeInQuint = (t: number): number => {
   return t * t * t * t * t;
@@ -52,0 +54,0 @@ };

src/core/animations/animations.utils.ts

@@ -0,3 +1,3 @@
+/* eslint-disable no-param-reassign */
 import { animations } from "./animations.constants";
-
 import {
@@ -63,2 +63,16 @@ AnimationType,
 
+function isValidTargetState(targetState: StateType): boolean {
+  const { scale, positionX, positionY } = targetState;
+
+  if (
+    Number.isNaN(scale) ||
+    Number.isNaN(positionX) ||
+    Number.isNaN(positionY)
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
 export function animate(
@@ -101,11 +115,1 @@ contextInstance: ReactZoomPanPinchContext,
 }
-
-function isValidTargetState(targetState: StateType): boolean {
-  const { scale, positionX, positionY } = targetState;
-
-  if (isNaN(scale) || isNaN(positionX) || isNaN(positionY)) {
-    return false;
-  }
-
-  return true;
-}

src/core/bounds/bounds.utils.ts

@@ -0,3 +1,3 @@
+/* eslint-disable no-param-reassign */
 import { roundNumber } from "../../utils";
-
 import {
@@ -94,2 +94,21 @@ BoundsType,
 
+/**
+ * Keeps value between given bounds, used for limiting view to given boundaries
+ * 1# eg. boundLimiter(2, 0, 3, true) => 2
+ * 2# eg. boundLimiter(4, 0, 3, true) => 3
+ * 3# eg. boundLimiter(-2, 0, 3, true) => 0
+ * 4# eg. boundLimiter(10, 0, 3, false) => 10
+ */
+export const boundLimiter = (
+  value: number,
+  minBound: number,
+  maxBound: number,
+  isActive: boolean,
+): number => {
+  if (!isActive) return roundNumber(value, 2);
+  if (value < minBound) return roundNumber(minBound, 2);
+  if (value > maxBound) return roundNumber(maxBound, 2);
+  return roundNumber(value, 2);
+};
+
 export const handleCalculateBounds = (
@@ -140,20 +159,1 @@ contextInstance: ReactZoomPanPinchContext,
 }
-
-/**
- * Keeps value between given bounds, used for limiting view to given boundaries
- * 1# eg. boundLimiter(2, 0, 3, true) => 2
- * 2# eg. boundLimiter(4, 0, 3, true) => 3
- * 3# eg. boundLimiter(-2, 0, 3, true) => 0
- * 4# eg. boundLimiter(10, 0, 3, false) => 10
- */
-export const boundLimiter = (
-  value: number,
-  minBound: number,
-  maxBound: number,
-  isActive: boolean,
-): number => {
-  if (!isActive) return roundNumber(value, 2);
-  if (value < minBound) return roundNumber(minBound, 2);
-  if (value > maxBound) return roundNumber(maxBound, 2);
-  return roundNumber(value, 2);
-};

src/core/double-click/double-click.logic.ts

 import { ReactZoomPanPinchContext } from "../../models";
-
 import { animate } from "../animations/animations.utils";
-import { getMousePosition } from "core/wheel/wheel.utils";
-import { handleZoomToPoint } from "core/zoom/zoom.logic";
-import { isExcludedNode } from "utils";
+import { getMousePosition } from "../wheel/wheel.utils";
+import { handleZoomToPoint } from "../zoom/zoom.logic";
+import { isExcludedNode } from "../../utils";
 import {
   handleCalculateButtonZoom,
   resetTransformations,
-} from "core/handlers/handlers.utils";
+} from "../handlers/handlers.utils";
 
@@ -16,9 +15,4 @@ export function handleDoubleClick(
 ): void {
-  const {
-    disabled,
-    mode,
-    step,
-    animationTime,
-    animationType,
-  } = contextInstance.setup.doubleClick;
+  const { disabled, mode, step, animationTime, animationType } =
+    contextInstance.setup.doubleClick;
 
@@ -25,0 +19,0 @@ if (disabled) return;

src/core/handlers/handlers.logic.ts

@@ -12,102 +12,111 @@ import { ReactZoomPanPinchContext } from "../../models";
 
-export const zoomIn = (contextInstance: ReactZoomPanPinchContext) => (
-  step = 0.5,
-  animationTime = 300,
-  animationType: keyof typeof animations = "easeOut",
-): void => {
-  handleZoomToViewCenter(
-    contextInstance,
-    1,
-    step,
-    animationTime,
-    animationType,
-  );
-};
+export const zoomIn =
+  (contextInstance: ReactZoomPanPinchContext) =>
+  (
+    step = 0.5,
+    animationTime = 300,
+    animationType: keyof typeof animations = "easeOut",
+  ): void => {
+    handleZoomToViewCenter(
+      contextInstance,
+      1,
+      step,
+      animationTime,
+      animationType,
+    );
+  };
 
-export const zoomOut = (contextInstance: ReactZoomPanPinchContext) => (
-  step = 0.5,
-  animationTime = 300,
-  animationType: keyof typeof animations = "easeOut",
-): void => {
-  handleZoomToViewCenter(
-    contextInstance,
-    -1,
-    step,
-    animationTime,
-    animationType,
-  );
-};
+export const zoomOut =
+  (contextInstance: ReactZoomPanPinchContext) =>
+  (
+    step = 0.5,
+    animationTime = 300,
+    animationType: keyof typeof animations = "easeOut",
+  ): void => {
+    handleZoomToViewCenter(
+      contextInstance,
+      -1,
+      step,
+      animationTime,
+      animationType,
+    );
+  };
 
-export const setTransform = (contextInstance: ReactZoomPanPinchContext) => (
-  newPositionX: number,
-  newPositionY: number,
-  newScale: number,
-  animationTime = 300,
-  animationType: keyof typeof animations = "easeOut",
-): void => {
-  const { positionX, positionY, scale } = contextInstance.transformState;
-  const { wrapperComponent, contentComponent } = contextInstance;
-  const { disabled } = contextInstance.setup;
+export const setTransform =
+  (contextInstance: ReactZoomPanPinchContext) =>
+  (
+    newPositionX: number,
+    newPositionY: number,
+    newScale: number,
+    animationTime = 300,
+    animationType: keyof typeof animations = "easeOut",
+  ): void => {
+    const { positionX, positionY, scale } = contextInstance.transformState;
+    const { wrapperComponent, contentComponent } = contextInstance;
+    const { disabled } = contextInstance.setup;
 
-  if (disabled || !wrapperComponent || !contentComponent) return;
+    if (disabled || !wrapperComponent || !contentComponent) return;
 
-  const targetState = {
-    positionX: isNaN(newPositionX) ? positionX : newPositionX,
-    positionY: isNaN(newPositionY) ? positionY : newPositionY,
-    scale: isNaN(newScale) ? scale : newScale,
+    const targetState = {
+      positionX: Number.isNaN(newPositionX) ? positionX : newPositionX,
+      positionY: Number.isNaN(newPositionY) ? positionY : newPositionY,
+      scale: Number.isNaN(newScale) ? scale : newScale,
+    };
+
+    animate(contextInstance, targetState, animationTime, animationType);
   };
 
-  animate(contextInstance, targetState, animationTime, animationType);
-};
+export const resetTransform =
+  (contextInstance: ReactZoomPanPinchContext) =>
+  (
+    animationTime = 200,
+    animationType: keyof typeof animations = "easeOut",
+  ): void => {
+    resetTransformations(contextInstance, animationTime, animationType);
+  };
 
-export const resetTransform = (contextInstance: ReactZoomPanPinchContext) => (
-  animationTime = 200,
-  animationType: keyof typeof animations = "easeOut",
-): void => {
-  resetTransformations(contextInstance, animationTime, animationType);
-};
+export const centerView =
+  (contextInstance: ReactZoomPanPinchContext) =>
+  (
+    scale?: number,
+    animationTime = 200,
+    animationType: keyof typeof animations = "easeOut",
+  ): void => {
+    const { transformState, wrapperComponent, contentComponent } =
+      contextInstance;
+    if (wrapperComponent && contentComponent) {
+      const targetState = getCenterPosition(
+        scale || transformState.scale,
+        wrapperComponent,
+        contentComponent,
+      );
 
-export const centerView = (contextInstance: ReactZoomPanPinchContext) => (
-  scale?: number,
-  animationTime = 200,
-  animationType: keyof typeof animations = "easeOut",
-): void => {
-  const {
-    transformState,
-    wrapperComponent,
-    contentComponent,
-  } = contextInstance;
-  if (wrapperComponent && contentComponent) {
-    const targetState = getCenterPosition(
-      scale || transformState.scale,
-      wrapperComponent,
-      contentComponent,
-    );
+      animate(contextInstance, targetState, animationTime, animationType);
+    }
+  };
 
-    animate(contextInstance, targetState, animationTime, animationType);
-  }
-};
+export const zoomToElement =
+  (contextInstance: ReactZoomPanPinchContext) =>
+  (
+    node: HTMLElement | string,
+    scale?: number,
+    animationTime = 600,
+    animationType: keyof typeof animations = "easeOut",
+  ): void => {
+    handleCancelAnimation(contextInstance);
 
-export const zoomToElement = (contextInstance: ReactZoomPanPinchContext) => (
-  node: HTMLElement | string,
-  scale?: number,
-  animationTime = 600,
-  animationType: keyof typeof animations = "easeOut",
-): void => {
-  handleCancelAnimation(contextInstance);
+    const { wrapperComponent } = contextInstance;
 
-  const { wrapperComponent } = contextInstance;
+    const target: HTMLElement | null =
+      typeof node === "string" ? document.getElementById(node) : node;
 
-  const target: HTMLElement | null =
-    typeof node === "string" ? document.getElementById(node) : node;
-
-  if (
-    wrapperComponent &&
-    isValidZoomNode(target) &&
-    target &&
-    wrapperComponent.contains(target)
-  ) {
-    const targetState = calculateZoomToNode(contextInstance, target, scale);
-    animate(contextInstance, targetState, animationTime, animationType);
-  }
-};
+    if (
+      wrapperComponent &&
+      isValidZoomNode(target) &&
+      target &&
+      wrapperComponent.contains(target)
+    ) {
+      const targetState = calculateZoomToNode(contextInstance, target, scale);
+      animate(contextInstance, targetState, animationTime, animationType);
+    }
+  };

src/core/handlers/handlers.utils.ts

@@ -13,3 +13,3 @@ import { ReactZoomPanPinchContext } from "../../models";
   getMouseBoundedPosition,
-} from "core/bounds/bounds.utils";
+} from "../bounds/bounds.utils";
 
@@ -121,2 +121,21 @@ export const handleCalculateButtonZoom = (
 
+export function getOffset(element: HTMLElement): PositionType {
+  let el = element;
+
+  let offsetLeft = 0;
+  let offsetTop = 0;
+
+  while (el) {
+    offsetLeft += el.offsetLeft;
+    offsetTop += el.offsetTop;
+
+    el = el.offsetParent as HTMLElement;
+  }
+
+  return {
+    x: offsetLeft - window.scrollX,
+    y: offsetTop - window.scrollY,
+  };
+}
+
 export function calculateZoomToNode(
@@ -171,21 +190,2 @@ contextInstance: ReactZoomPanPinchContext,
 
-function getOffset(element: HTMLElement): PositionType {
-  let el = element;
-
-  let offsetLeft = 0;
-  let offsetTop = 0;
-
-  while (el) {
-    offsetLeft += el.offsetLeft;
-    offsetTop += el.offsetTop;
-
-    el = el.offsetParent as HTMLElement;
-  }
-
-  return {
-    x: offsetLeft - window.scrollX,
-    y: offsetTop - window.scrollY,
-  };
-}
-
 export function isValidZoomNode(node: HTMLElement | null): boolean {
@@ -195,6 +195,4 @@ if (!node) {
     return false;
-  } else if (
-    node?.offsetWidth === undefined ||
-    node?.offsetHeight === undefined
-  ) {
+  }
+  if (node?.offsetWidth === undefined || node?.offsetHeight === undefined) {
     console.error(
@@ -201,0 +199,0 @@ "Zoom node is not valid - it must contain offsetWidth and offsetHeight",

src/core/pan/panning.logic.ts

@@ -0,1 +1,2 @@
+/* eslint-disable no-param-reassign */
 import { ReactZoomPanPinchContext } from "../../models/context.model";
@@ -32,2 +33,21 @@ import { animate, handleCancelAnimation } from "../animations/animations.utils";
 
+export function handleAlignToBounds(
+  contextInstance: ReactZoomPanPinchContext,
+): void {
+  const { scale } = contextInstance.transformState;
+  const { minScale, alignmentAnimation } = contextInstance.setup;
+  const { disabled, sizeX, sizeY, animationTime, animationType } =
+    alignmentAnimation;
+
+  const isDisabled = disabled || scale < minScale || (!sizeX && !sizeY);
+
+  if (isDisabled) return;
+
+  const targetState = handlePanToBounds(contextInstance);
+
+  if (targetState) {
+    animate(contextInstance, targetState, animationTime, animationType);
+  }
+}
+
 export function handlePanning(
@@ -82,20 +102,1 @@ contextInstance: ReactZoomPanPinchContext,
 }
-
-export function handleAlignToBounds(
-  contextInstance: ReactZoomPanPinchContext,
-): void {
-  const { scale } = contextInstance.transformState;
-  const { minScale, alignmentAnimation } = contextInstance.setup;
-  const { disabled, sizeX, sizeY, animationTime, animationType } =
-    alignmentAnimation;
-
-  const isDisabled = disabled || scale < minScale || (!sizeX && !sizeY);
-
-  if (isDisabled) return;
-
-  const targetState = handlePanToBounds(contextInstance);
-
-  if (targetState) {
-    animate(contextInstance, targetState, animationTime, animationType);
-  }
-}

src/core/pan/panning.utils.ts

@@ -0,1 +1,2 @@
+/* eslint-disable no-param-reassign */
 import {
@@ -62,3 +63,3 @@ PositionType,
 ): void => {
-  const touches = event.touches;
+  const { touches } = event;
   const { positionX, positionY } = contextInstance.transformState;
@@ -85,8 +86,4 @@
 
-  const {
-    maxPositionX,
-    minPositionX,
-    maxPositionY,
-    minPositionY,
-  } = contextInstance.bounds;
+  const { maxPositionX, minPositionX, maxPositionY, minPositionY } =
+    contextInstance.bounds;
 
@@ -93,0 +90,0 @@ const xChanged = positionX > maxPositionX || positionX < minPositionX;

src/core/pan/velocity.logic.ts

@@ -0,1 +1,2 @@
+/* eslint-disable no-param-reassign */
 import { PositionType } from "../../models";
@@ -2,0 +3,0 @@ import { ReactZoomPanPinchContext } from "../../models/context.model";

src/core/pinch/pinch.logic.ts

@@ -0,1 +1,2 @@
+/* eslint-disable no-param-reassign */
 import { ReactZoomPanPinchContext } from "../../models";
@@ -32,7 +33,4 @@ import { handleCancelAnimation } from "../animations/animations.utils";
   const { scale } = contextInstance.transformState;
-  const {
-    limitToBounds,
-    centerZoomedOut,
-    zoomAnimation,
-  } = contextInstance.setup;
+  const { limitToBounds, centerZoomedOut, zoomAnimation } =
+    contextInstance.setup;
   const { disabled, size } = zoomAnimation;
@@ -46,3 +44,3 @@
   // if touches goes off of the wrapper element
-  if (!isFinite(midPoint.x) || !isFinite(midPoint.y)) return;
+  if (!Number.isFinite(midPoint.x) || !Number.isFinite(midPoint.y)) return;
 
@@ -49,0 +47,0 @@ const currentDistance = getTouchDistance(event);

src/core/pinch/pinch.utils.ts

@@ -57,4 +57,4 @@ import { PositionType, ReactZoomPanPinchContext } from "../../models";
   return Math.sqrt(
-    Math.pow(event.touches[0].pageX - event.touches[1].pageX, 2) +
-      Math.pow(event.touches[0].pageY - event.touches[1].pageY, 2),
+    (event.touches[0].pageX - event.touches[1].pageX) ** 2 +
+      (event.touches[0].pageY - event.touches[1].pageY) ** 2,
   );
@@ -61,0 +61,0 @@ };

src/core/wheel/wheel.logic.ts

@@ -0,1 +1,2 @@
+/* eslint-disable no-param-reassign */
 import { ReactZoomPanPinchContext } from "../../models";
@@ -2,0 +3,0 @@ import { handleCallback } from "../../utils/callback.utils";

src/core/wheel/wheel.utils.ts

@@ -1,4 +0,2 @@
-import { ReactZoomPanPinchContext } from "../../models";
-import { PositionType } from "../../models";
-
+import { ReactZoomPanPinchContext, PositionType } from "../../models";
 import { checkIsNumber, isExcludedNode, roundNumber } from "../../utils";
@@ -11,8 +9,4 @@ import { checkZoomBounds } from "../zoom/zoom.utils";
 ): boolean => {
-  const {
-    disabled,
-    wheelDisabled,
-    touchPadDisabled,
-    excluded,
-  } = contextInstance.setup.wheel;
+  const { disabled, wheelDisabled, touchPadDisabled, excluded } =
+    contextInstance.setup.wheel;
   const { isInitialized, isPanning } = contextInstance;
@@ -35,2 +29,9 @@
 
+export const getDeltaY = (event?: WheelEvent) => {
+  if (event) {
+    return event.deltaY < 0 ? 1 : -1;
+  }
+  return 0;
+};
+
 export function getDelta(
@@ -40,3 +41,3 @@ event: WheelEvent,
 ): number {
-  const deltaY = event ? (event.deltaY < 0 ? 1 : -1) : 0;
+  const deltaY = getDeltaY(event);
   const delta = checkIsNumber(customDelta, deltaY);
@@ -66,3 +67,3 @@ return delta;
 
-  if (isNaN(mouseX) || isNaN(mouseY))
+  if (Number.isNaN(mouseX) || Number.isNaN(mouseY))
     console.error("No mouse or touch offset found");
@@ -69,0 +70,0 @@

src/core/zoom/zoom.logic.ts

@@ -8,2 +8,31 @@ import { ReactZoomPanPinchContext, ReactZoomPanPinchState } from "../../models";
 
+export function handleZoomToPoint(
+  contextInstance: ReactZoomPanPinchContext,
+  scale: number,
+  mouseX: number,
+  mouseY: number,
+): Omit<ReactZoomPanPinchState, "previousScale"> | undefined {
+  const { minScale, maxScale, limitToBounds } = contextInstance.setup;
+
+  const newScale = checkZoomBounds(
+    roundNumber(scale, 2),
+    minScale,
+    maxScale,
+    0,
+    false,
+  );
+  const bounds = handleCalculateBounds(contextInstance, newScale);
+
+  const { x, y } = handleCalculateZoomPositions(
+    contextInstance,
+    mouseX,
+    mouseY,
+    newScale,
+    bounds,
+    limitToBounds,
+  );
+
+  return { scale: newScale, positionX: x, positionY: y };
+}
+
 export function handleAlignToScaleBounds(
@@ -42,30 +71,1 @@ contextInstance: ReactZoomPanPinchContext,
 }
-
-export function handleZoomToPoint(
-  contextInstance: ReactZoomPanPinchContext,
-  scale: number,
-  mouseX: number,
-  mouseY: number,
-): Omit<ReactZoomPanPinchState, "previousScale"> | undefined {
-  const { minScale, maxScale, limitToBounds } = contextInstance.setup;
-
-  const newScale = checkZoomBounds(
-    roundNumber(scale, 2),
-    minScale,
-    maxScale,
-    0,
-    false,
-  );
-  const bounds = handleCalculateBounds(contextInstance, newScale);
-
-  const { x, y } = handleCalculateZoomPositions(
-    contextInstance,
-    mouseX,
-    mouseY,
-    newScale,
-    bounds,
-    limitToBounds,
-  );
-
-  return { scale: newScale, positionX: x, positionY: y };
-}

src/core/zoom/zoom.utils.ts

@@ -54,6 +54,6 @@ import {
 
-  if (!isNaN(maxScale) && zoom >= maxScale) return maxScale;
-  if (!isNaN(minScale) && zoom <= minScaleWithPadding)
+  if (!Number.isNaN(maxScale) && zoom >= maxScale) return maxScale;
+  if (!Number.isNaN(minScale) && zoom <= minScaleWithPadding)
     return minScaleWithPadding;
   return zoom;
 }

src/models/context.model.ts

 import React from "react";
 
-import { TransformContext } from "../components/transform-context";
 import { animations } from "../core/animations/animations.constants";
@@ -14,4 +13,5 @@ import { DeepNonNullable } from "./helpers.model";
 } from "../core/handlers/handlers.logic";
+import { ZoomPanPinch } from "../core/instance.core";
 
-export type ReactZoomPanPinchContext = typeof TransformContext.prototype;
+export type ReactZoomPanPinchContext = typeof ZoomPanPinch.prototype;
 
@@ -39,2 +39,6 @@ export type ReactZoomPanPinchRef = {
 
+export type ReactZoomPanPinchRefProps = {
+  setRef: (context: ReactZoomPanPinchRef) => void;
+} & Omit<ReactZoomPanPinchProps, "ref">;
+
 export type ReactZoomPanPinchProps = {
@@ -41,0 +45,0 @@ children?: React.ReactNode | ((ref: ReactZoomPanPinchRef) => React.ReactNode);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1394225

increased by4.44%

Number of package files

120

increased by62.16%

Lines of code

7876

increased by11.83%

Worsened metrics

Dev dependency count

50

increased by11.11%

No dependency changes