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

Comparing version 2.3.2 to 2.4.0

dist/components/transform-wrapper.d.ts

 import React from "react";
 import { ZoomPanPinch } from "../core/instance.core";
 import { ReactZoomPanPinchProps, ReactZoomPanPinchRef } from "../models";
-export declare const Context: React.Context<import("../models").ReactZoomPanPinchComponentHelpers & import("../models").ReactZoomPanPinchState & {
-    contextInstance: ZoomPanPinch | null;
-}>;
+export declare const Context: React.Context<ZoomPanPinch>;
 export declare const TransformWrapper: React.ForwardRefExoticComponent<Omit<ReactZoomPanPinchProps, "ref"> & React.RefAttributes<ReactZoomPanPinchRef>>;
 export default TransformWrapper;

dist/constants/state.constants.d.ts

@@ -1,6 +0,3 @@
-import { LibrarySetup, ReactZoomPanPinchContext, ReactZoomPanPinchComponentHelpers, ReactZoomPanPinchState } from "../models/context.model";
+import { LibrarySetup, ReactZoomPanPinchState } from "../models/context.model";
 export declare const initialState: ReactZoomPanPinchState;
-export declare const contextInitialState: ReactZoomPanPinchComponentHelpers & ReactZoomPanPinchState & {
-    contextInstance: ReactZoomPanPinchContext | null;
-};
 export declare const initialSetup: LibrarySetup;

dist/core/double-click/double-click.logic.d.ts

 import { ReactZoomPanPinchContext } from "../../models";
+export declare const handleDoubleClickStop: (contextInstance: ReactZoomPanPinchContext, event: MouseEvent | TouchEvent) => void;
+export declare const handleDoubleClickResetMode: (contextInstance: ReactZoomPanPinchContext, event: MouseEvent | TouchEvent) => void;
 export declare function handleDoubleClick(contextInstance: ReactZoomPanPinchContext, event: MouseEvent | TouchEvent): void;
 export declare const isDoubleClickAllowed: (contextInstance: ReactZoomPanPinchContext, event: MouseEvent | TouchEvent) => boolean;

dist/core/handlers/handlers.utils.d.ts

@@ -6,3 +6,3 @@ import { ReactZoomPanPinchContext } from "../../models";
 export declare function handleZoomToViewCenter(contextInstance: ReactZoomPanPinchContext, delta: number, step: number, animationTime: number, animationType: keyof typeof animations): void;
-export declare function resetTransformations(contextInstance: ReactZoomPanPinchContext, animationTime: number, animationType: keyof typeof animations): void;
+export declare function resetTransformations(contextInstance: ReactZoomPanPinchContext, animationTime: number, animationType: keyof typeof animations, onResetTransformation?: () => void): void;
 export declare function getOffset(element: HTMLElement): PositionType;
@@ -9,0 +9,0 @@ export declare function calculateZoomToNode(contextInstance: ReactZoomPanPinchContext, node: HTMLElement, customZoom?: number): {

dist/core/instance.core.d.ts

@@ -7,3 +7,2 @@ import { BoundsType, LibrarySetup, PositionType, VelocityType, AnimationType, ReactZoomPanPinchProps, ReactZoomPanPinchState, ReactZoomPanPinchRef } from "../models";
 export declare class ZoomPanPinch {
-    private onChange?;
     props: ReactZoomPanPinchProps;
@@ -14,2 +13,3 @@ mounted: boolean;
     observer?: ResizeObserver;
+    onChangeCallbacks: Set<(ctx: ReactZoomPanPinchRef) => void>;
     wrapperComponent: HTMLDivElement | null;
@@ -30,2 +30,3 @@ contentComponent: HTMLDivElement | null;
     pinchMidpoint: null | PositionType;
+    doubleClickStopEventTimer: ReturnType<typeof setTimeout> | null;
     velocity: VelocityType | null;
@@ -40,3 +41,3 @@ velocityTime: number | null;
     };
-    constructor(props: ReactZoomPanPinchProps, onChange?: ((ctx: ReactZoomPanPinchRef) => void) | undefined);
+    constructor(props: ReactZoomPanPinchProps);
     mount: () => void;
@@ -68,2 +69,3 @@ unmount: () => void;
     getContext: () => ReactZoomPanPinchRef;
+    onChange: (callback: (ref: ReactZoomPanPinchRef) => void) => () => void;
     /**
@@ -70,0 +72,0 @@ * Initialization

dist/index.d.ts

@@ -33,70 +33,2 @@ import React from 'react';
 
-type StartCoordsType = {
-    x: number;
-    y: number;
-} | null;
-declare class ZoomPanPinch {
-    private onChange?;
-    props: ReactZoomPanPinchProps;
-    mounted: boolean;
-    transformState: ReactZoomPanPinchState;
-    setup: LibrarySetup;
-    observer?: ResizeObserver;
-    wrapperComponent: HTMLDivElement | null;
-    contentComponent: HTMLDivElement | null;
-    isInitialized: boolean;
-    bounds: BoundsType | null;
-    previousWheelEvent: WheelEvent | null;
-    wheelStopEventTimer: ReturnType<typeof setTimeout> | null;
-    wheelAnimationTimer: ReturnType<typeof setTimeout> | null;
-    isPanning: boolean;
-    startCoords: StartCoordsType;
-    lastTouch: number | null;
-    distance: null | number;
-    lastDistance: null | number;
-    pinchStartDistance: null | number;
-    pinchStartScale: null | number;
-    pinchMidpoint: null | PositionType;
-    velocity: VelocityType | null;
-    velocityTime: number | null;
-    lastMousePosition: PositionType | null;
-    animate: boolean;
-    animation: AnimationType | null;
-    maxBounds: BoundsType | null;
-    pressedKeys: {
-        [key: string]: boolean;
-    };
-    constructor(props: ReactZoomPanPinchProps, onChange?: ((ctx: ReactZoomPanPinchRef) => void) | undefined);
-    mount: () => void;
-    unmount: () => void;
-    update: (newProps: ReactZoomPanPinchProps) => void;
-    initializeWindowEvents: () => void;
-    cleanupWindowEvents: () => void;
-    handleInitializeWrapperEvents: (wrapper: HTMLDivElement) => void;
-    handleInitialize: (contentComponent: HTMLDivElement) => void;
-    onWheelZoom: (event: WheelEvent) => void;
-    onPanningStart: (event: MouseEvent) => void;
-    onPanning: (event: MouseEvent) => void;
-    onPanningStop: (event: MouseEvent | TouchEvent) => void;
-    onPinchStart: (event: TouchEvent) => void;
-    onPinch: (event: TouchEvent) => void;
-    onPinchStop: (event: TouchEvent) => void;
-    onTouchPanningStart: (event: TouchEvent) => void;
-    onTouchPanning: (event: TouchEvent) => void;
-    onTouchPanningStop: (event: TouchEvent) => void;
-    onDoubleClick: (event: MouseEvent | TouchEvent) => void;
-    clearPanning: (event: MouseEvent) => void;
-    setKeyPressed: (e: KeyboardEvent) => void;
-    setKeyUnPressed: (e: KeyboardEvent) => void;
-    isPressingKeys: (keys: string[]) => boolean;
-    setTransformState: (scale: number, positionX: number, positionY: number) => void;
-    setCenter: () => void;
-    applyTransformation: () => void;
-    getContext: () => ReactZoomPanPinchRef;
-    /**
-     * Initialization
-     */
-    init: (wrapperComponent: HTMLDivElement, contentComponent: HTMLDivElement) => void;
-}
-
 type ReactZoomPanPinchContext = typeof ZoomPanPinch.prototype;
@@ -127,3 +59,2 @@ type ReactZoomPanPinchRef = {
     ref?: React.Ref<ReactZoomPanPinchRef>;
-    performance?: boolean;
     initialScale?: number;
@@ -243,2 +174,72 @@ initialPositionX?: number;
 
+type StartCoordsType = {
+    x: number;
+    y: number;
+} | null;
+declare class ZoomPanPinch {
+    props: ReactZoomPanPinchProps;
+    mounted: boolean;
+    transformState: ReactZoomPanPinchState;
+    setup: LibrarySetup;
+    observer?: ResizeObserver;
+    onChangeCallbacks: Set<(ctx: ReactZoomPanPinchRef) => void>;
+    wrapperComponent: HTMLDivElement | null;
+    contentComponent: HTMLDivElement | null;
+    isInitialized: boolean;
+    bounds: BoundsType | null;
+    previousWheelEvent: WheelEvent | null;
+    wheelStopEventTimer: ReturnType<typeof setTimeout> | null;
+    wheelAnimationTimer: ReturnType<typeof setTimeout> | null;
+    isPanning: boolean;
+    startCoords: StartCoordsType;
+    lastTouch: number | null;
+    distance: null | number;
+    lastDistance: null | number;
+    pinchStartDistance: null | number;
+    pinchStartScale: null | number;
+    pinchMidpoint: null | PositionType;
+    doubleClickStopEventTimer: ReturnType<typeof setTimeout> | null;
+    velocity: VelocityType | null;
+    velocityTime: number | null;
+    lastMousePosition: PositionType | null;
+    animate: boolean;
+    animation: AnimationType | null;
+    maxBounds: BoundsType | null;
+    pressedKeys: {
+        [key: string]: boolean;
+    };
+    constructor(props: ReactZoomPanPinchProps);
+    mount: () => void;
+    unmount: () => void;
+    update: (newProps: ReactZoomPanPinchProps) => void;
+    initializeWindowEvents: () => void;
+    cleanupWindowEvents: () => void;
+    handleInitializeWrapperEvents: (wrapper: HTMLDivElement) => void;
+    handleInitialize: (contentComponent: HTMLDivElement) => void;
+    onWheelZoom: (event: WheelEvent) => void;
+    onPanningStart: (event: MouseEvent) => void;
+    onPanning: (event: MouseEvent) => void;
+    onPanningStop: (event: MouseEvent | TouchEvent) => void;
+    onPinchStart: (event: TouchEvent) => void;
+    onPinch: (event: TouchEvent) => void;
+    onPinchStop: (event: TouchEvent) => void;
+    onTouchPanningStart: (event: TouchEvent) => void;
+    onTouchPanning: (event: TouchEvent) => void;
+    onTouchPanningStop: (event: TouchEvent) => void;
+    onDoubleClick: (event: MouseEvent | TouchEvent) => void;
+    clearPanning: (event: MouseEvent) => void;
+    setKeyPressed: (e: KeyboardEvent) => void;
+    setKeyUnPressed: (e: KeyboardEvent) => void;
+    isPressingKeys: (keys: string[]) => boolean;
+    setTransformState: (scale: number, positionX: number, positionY: number) => void;
+    setCenter: () => void;
+    applyTransformation: () => void;
+    getContext: () => ReactZoomPanPinchRef;
+    onChange: (callback: (ref: ReactZoomPanPinchRef) => void) => () => void;
+    /**
+     * Initialization
+     */
+    init: (wrapperComponent: HTMLDivElement, contentComponent: HTMLDivElement) => void;
+}
+
 declare const TransformWrapper: React.ForwardRefExoticComponent<Omit<ReactZoomPanPinchProps, "ref"> & React.RefAttributes<ReactZoomPanPinchRef>>;
@@ -245,0 +246,0 @@

dist/models/context.model.d.ts

@@ -31,3 +31,2 @@ import React from "react";
     ref?: React.Ref<ReactZoomPanPinchRef>;
-    performance?: boolean;
     initialScale?: number;
@@ -34,0 +33,0 @@ initialPositionX?: number;

package.json

 {
   "name": "react-zoom-pan-pinch",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "Zoom and pan html elements in easy way",
@@ -5,0 +5,0 @@ "author": "prc5",

src/constants/state.constants.ts

@@ -1,7 +0,2 @@
-import {
-  LibrarySetup,
-  ReactZoomPanPinchContext,
-  ReactZoomPanPinchComponentHelpers,
-  ReactZoomPanPinchState,
-} from "../models/context.model";
+import { LibrarySetup, ReactZoomPanPinchState } from "../models/context.model";
 
@@ -15,14 +10,4 @@ export const initialState: ReactZoomPanPinchState = {
 
-export const contextInitialState: ReactZoomPanPinchComponentHelpers &
-  ReactZoomPanPinchState & {
-    contextInstance: ReactZoomPanPinchContext | null;
-  } = {
-  ...initialState,
-  setComponents: () => undefined,
-  contextInstance: null,
-};
-
 export const initialSetup: LibrarySetup = {
   disabled: false,
-  performance: false,
   minPositionX: null,
@@ -29,0 +14,0 @@ maxPositionX: null,

src/core/animations/animations.utils.ts

@@ -85,2 +85,3 @@ /* eslint-disable no-param-reassign */
   if (!contextInstance.mounted || !isValid) return;
+
   const { setTransformState } = contextInstance;
@@ -87,0 +88,0 @@ const { scale, positionX, positionY } = contextInstance.transformState;

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

@@ -0,1 +1,2 @@
+/* eslint-disable no-param-reassign */
 import { ReactZoomPanPinchContext } from "../../models";
@@ -5,4 +6,9 @@ import { animate } from "../animations/animations.utils";
 import { handleZoomToPoint } from "../zoom/zoom.logic";
-import { isExcludedNode } from "../../utils";
 import {
+  cancelTimeout,
+  getContext,
+  handleCallback,
+  isExcludedNode,
+} from "../../utils";
+import {
   handleCalculateButtonZoom,
@@ -12,2 +18,32 @@ resetTransformations,
 
+export const handleDoubleClickStop = (
+  contextInstance: ReactZoomPanPinchContext,
+  event: MouseEvent | TouchEvent,
+): void => {
+  const { onZoomStop } = contextInstance.props;
+  const { animationTime } = contextInstance.setup.doubleClick;
+
+  cancelTimeout(contextInstance.doubleClickStopEventTimer);
+  contextInstance.doubleClickStopEventTimer = setTimeout(() => {
+    contextInstance.doubleClickStopEventTimer = null;
+    handleCallback(getContext(contextInstance), event, onZoomStop);
+  }, animationTime);
+};
+
+export const handleDoubleClickResetMode = (
+  contextInstance: ReactZoomPanPinchContext,
+  event: MouseEvent | TouchEvent,
+) => {
+  const { onZoomStart, onZoom } = contextInstance.props;
+  const { animationTime, animationType } = contextInstance.setup.doubleClick;
+
+  handleCallback(getContext(contextInstance), event, onZoomStart);
+
+  resetTransformations(contextInstance, animationTime, animationType, () =>
+    handleCallback(getContext(contextInstance), event, onZoom),
+  );
+
+  handleDoubleClickStop(contextInstance, event);
+};
+
 export function handleDoubleClick(
@@ -17,14 +53,17 @@ contextInstance: ReactZoomPanPinchContext,
 ): void {
+  const { setup, doubleClickStopEventTimer, transformState, contentComponent } =
+    contextInstance;
+
+  const { scale } = transformState;
+  const { onZoomStart, onZoom } = contextInstance.props;
   const { disabled, mode, step, animationTime, animationType } =
-    contextInstance.setup.doubleClick;
+    setup.doubleClick;
 
   if (disabled) return;
+  if (doubleClickStopEventTimer) return;
 
   if (mode === "reset") {
-    return resetTransformations(contextInstance, animationTime, animationType);
+    return handleDoubleClickResetMode(contextInstance, event);
   }
 
-  const { scale } = contextInstance.transformState;
-  const { contentComponent } = contextInstance;
-
   if (!contentComponent) return console.error("No ContentComponent found");
@@ -35,2 +74,8 @@
   const newScale = handleCalculateButtonZoom(contextInstance, delta, step);
+
+  // stop execution when scale didn't change
+  if (scale === newScale) return;
+
+  handleCallback(getContext(contextInstance), event, onZoomStart);
+
   const mousePosition = getMousePosition(event, contentComponent, scale);
@@ -50,3 +95,7 @@ const targetState = handleZoomToPoint(
 
+  handleCallback(getContext(contextInstance), event, onZoom);
+
   animate(contextInstance, targetState, animationTime, animationType);
+
+  handleDoubleClickStop(contextInstance, event);
 }
@@ -71,5 +120,3 @@
 
-  if (!isAllowed) return false;
-
   return true;
 };

src/core/handlers/handlers.utils.ts

@@ -80,2 +80,3 @@ import { ReactZoomPanPinchContext } from "../../models";
   animationType: keyof typeof animations,
+  onResetTransformation?: () => void,
 ): void {
@@ -118,2 +119,3 @@ const { setup, wrapperComponent } = contextInstance;
 
+  onResetTransformation?.();
   animate(contextInstance, newState, animationTime, animationType);
@@ -120,0 +122,0 @@ }

src/core/instance.core.ts

@@ -55,2 +55,4 @@ import {
   public observer?: ResizeObserver;
+  public onChangeCallbacks: Set<(ctx: ReactZoomPanPinchRef) => void> =
+    new Set();
 
@@ -77,2 +79,4 @@ // Components
   public pinchMidpoint: null | PositionType = null;
+  // double click helpers
+  public doubleClickStopEventTimer: ReturnType<typeof setTimeout> | null = null;
   // velocity helpers
@@ -89,6 +93,3 @@ public velocity: VelocityType | null = null;
 
-  constructor(
-    props: ReactZoomPanPinchProps,
-    private onChange?: (ctx: ReactZoomPanPinchRef) => void,
-  ) {
+  constructor(props: ReactZoomPanPinchProps) {
     this.props = props;
@@ -416,3 +417,3 @@ this.setup = createSetup(this.props);
       const ctx = getContext(this);
-      this.onChange?.(ctx);
+      this.onChangeCallbacks.forEach((callback) => callback(ctx));
 
@@ -452,2 +453,11 @@ handleCallback(ctx, { scale, positionX, positionY }, onTransformed);
 
+  onChange = (callback: (ref: ReactZoomPanPinchRef) => void) => {
+    if (!this.onChangeCallbacks.has(callback)) {
+      this.onChangeCallbacks.add(callback);
+    }
+    return () => {
+      this.onChangeCallbacks.delete(callback);
+    };
+  };
+
   /**
@@ -454,0 +464,0 @@ * Initialization

src/models/context.model.ts

@@ -45,3 +45,2 @@ import React from "react";
   ref?: React.Ref<ReactZoomPanPinchRef>;
-  performance?: boolean;
   initialScale?: number;
@@ -48,0 +47,0 @@ initialPositionX?: number;

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

1407409

increased by0.63%

Lines of code

8056

increased by1.37%

No dependency changes