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

Comparing version 2.4.0 to 2.5.0

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

@@ -1,8 +0,10 @@
-import { ReactZoomPanPinchContext } from "../../models";
+import { ReactZoomPanPinchContext, ReactZoomPanPinchState } from "../../models";
 import { animations } from "../animations/animations.constants";
-import { PositionType } from "../../models/calculations.model";
 export declare const handleCalculateButtonZoom: (contextInstance: ReactZoomPanPinchContext, delta: number, step: number) => number;
 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, onResetTransformation?: () => void): void;
-export declare function getOffset(element: HTMLElement): PositionType;
+export declare function getOffset(element: HTMLElement, wrapper: HTMLElement, content: HTMLElement, state: ReactZoomPanPinchState): {
+    x: number;
+    y: number;
+};
 export declare function calculateZoomToNode(contextInstance: ReactZoomPanPinchContext, node: HTMLElement, customZoom?: number): {
@@ -13,2 +15,1 @@ positionX: number;
 };
-export declare function isValidZoomNode(node: HTMLElement | null): boolean;

package.json

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

src/core/handlers/handlers.logic.ts

@@ -5,3 +5,2 @@ import { ReactZoomPanPinchContext } from "../../models";
   handleZoomToViewCenter,
-  isValidZoomNode,
   resetTransformations,
@@ -113,8 +112,3 @@ } from "./handlers.utils";
 
-    if (
-      wrapperComponent &&
-      isValidZoomNode(target) &&
-      target &&
-      wrapperComponent.contains(target)
-    ) {
+    if (wrapperComponent && target && wrapperComponent.contains(target)) {
       const targetState = calculateZoomToNode(contextInstance, target, scale);
@@ -121,0 +115,0 @@ animate(contextInstance, targetState, animationTime, animationType);

src/core/handlers/handlers.utils.ts

@@ -1,2 +0,2 @@
-import { ReactZoomPanPinchContext } from "../../models";
+import { ReactZoomPanPinchContext, ReactZoomPanPinchState } from "../../models";
 import { animations } from "../animations/animations.constants";
@@ -8,4 +8,2 @@ import { handleZoomToPoint } from "../zoom/zoom.logic";
 import { roundNumber } from "../../utils";
-import { initialState } from "../../constants/state.constants";
-import { PositionType } from "../../models/calculations.model";
 import {
@@ -123,18 +121,18 @@ calculateBounds,
 
-export function getOffset(element: HTMLElement): PositionType {
-  let el = element;
+export function getOffset(
+  element: HTMLElement,
+  wrapper: HTMLElement,
+  content: HTMLElement,
+  state: ReactZoomPanPinchState,
+) {
+  const offset = element.getBoundingClientRect();
+  const wrapperOffset = wrapper.getBoundingClientRect();
+  const contentOffset = content.getBoundingClientRect();
 
-  let offsetLeft = 0;
-  let offsetTop = 0;
+  const xOff = wrapperOffset.x * state.scale;
+  const yOff = wrapperOffset.y * state.scale;
 
-  while (el) {
-    offsetLeft += el.offsetLeft;
-    offsetTop += el.offsetTop;
-
-    el = el.offsetParent as HTMLElement;
-  }
-
   return {
-    x: offsetLeft - window.scrollX,
-    y: offsetTop - window.scrollY,
+    x: (offset.x - contentOffset.x + xOff) / state.scale,
+    y: (offset.y - contentOffset.y + yOff) / state.scale,
   };
@@ -148,13 +146,20 @@ }
 ): { positionX: number; positionY: number; scale: number } {
-  const { wrapperComponent } = contextInstance;
+  const { wrapperComponent, contentComponent, transformState } =
+    contextInstance;
   const { limitToBounds, minScale, maxScale } = contextInstance.setup;
-  if (!wrapperComponent) return initialState;
+  if (!wrapperComponent || !contentComponent) return transformState;
 
   const wrapperRect = wrapperComponent.getBoundingClientRect();
-  const nodeRect = getOffset(node);
+  const nodeRect = node.getBoundingClientRect();
+  const nodeOffset = getOffset(
+    node,
+    wrapperComponent,
+    contentComponent,
+    transformState,
+  );
 
-  const nodeLeft = nodeRect.x;
-  const nodeTop = nodeRect.y;
-  const nodeWidth = node.offsetWidth;
-  const nodeHeight = node.offsetHeight;
+  const nodeLeft = nodeOffset.x;
+  const nodeTop = nodeOffset.y;
+  const nodeWidth = nodeRect.width / transformState.scale;
+  const nodeHeight = nodeRect.height / transformState.scale;
 
@@ -192,15 +197,1 @@ const scaleX = wrapperComponent.offsetWidth / nodeWidth;
 }
-
-export function isValidZoomNode(node: HTMLElement | null): boolean {
-  if (!node) {
-    console.error("Zoom node not found");
-    return false;
-  }
-  if (node?.offsetWidth === undefined || node?.offsetHeight === undefined) {
-    console.error(
-      "Zoom node is not valid - it must contain offsetWidth and offsetHeight",
-    );
-    return false;
-  }
-  return true;
-}

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

1462964

increased by3.95%

Number of package files

124

increased by3.33%

Lines of code

8069

increased by0.16%

No dependency changes