react-image-zoom-in-place - npm Package Compare versions

Comparing version 0.0.6 to 0.1.1

lib/index.js

@@ -27,11 +27,3 @@ "use strict";
         if (previousPosition) {
-            const zoomRatio = zoom / zoomLevel;
-            const deltaX = x - previousPosition.x;
-            const deltaY = y - previousPosition.y;
-            const newOffset = {
-                x: imageOffset.x - (x - imageOffset.x) * (zoomRatio - 1) + deltaX,
-                y: imageOffset.y - (y - imageOffset.y) * (zoomRatio - 1) + deltaY,
-            };
-            newOffset.x = Math.min(0, Math.max(newOffset.x, canvas.width - canvas.width * zoom));
-            newOffset.y = Math.min(0, Math.max(newOffset.y, canvas.height - canvas.height * zoom));
+            const newOffset = (0, utils_1.calculateNewZoomPosition)(x, y, zoomLevel, zoom, previousPosition, imageOffset, canvas.width, canvas.height);
             setImageOffset(newOffset);
@@ -59,7 +51,5 @@ }
         };
-        // If the image fails to load, you can handle it here
         image.onerror = () => {
             console.error("Failed to load image");
         };
-        // Start loading the image from the provided URL
         image.src = props.src;
@@ -121,6 +111,7 @@ setImage(image);
             return;
+        const canvas = canvasRef.current;
         const touch = e.touches[0];
         const rect = canvasRef.current.getBoundingClientRect();
-        const x = Math.min(400, Math.max(0, touch.clientX - rect.left));
-        const y = Math.min(400, Math.max(0, touch.clientY - rect.top));
+        const x = Math.min(canvas.width, Math.max(0, touch.clientX - rect.left));
+        const y = Math.min(canvas.height, Math.max(0, touch.clientY - rect.top));
         updateLocation(x, y, zoomLevel);
@@ -131,2 +122,3 @@ };
             return;
+        const canvas = canvasRef.current;
         const touch1 = e.touches[0];
@@ -138,4 +130,4 @@ const touch2 = e.touches[1];
         const rect = canvasRef.current.getBoundingClientRect();
-        const x = Math.min(400, Math.max(0, midpointX - rect.left));
-        const y = Math.min(400, Math.max(0, midpointY - rect.top));
+        const x = Math.min(canvas.width, Math.max(0, midpointX - rect.left));
+        const y = Math.min(canvas.height, Math.max(0, midpointY - rect.top));
         let newZoomLevel = zoomLevel;
@@ -142,0 +134,0 @@ if (previousDistance) {

lib/utils.d.ts

 export declare const setCanvasDimensions: (canvas: HTMLCanvasElement | null, image: HTMLImageElement | null, w?: number, h?: number) => void;
 export declare const renderAtPointAndZoom: (x: number, y: number, zoom: number, canvas: HTMLCanvasElement | null, image: HTMLImageElement | null) => void;
 export declare function mouseLocationToImageOffset(eventX: number, eventY: number, zoom: number, canvas: HTMLCanvasElement | null): [number, number];
+export declare function calculateNewZoomPosition(x: number, y: number, previousZoom: number, newZoom: number, previousPosition: {
+    x: number;
+    y: number;
+}, imageOffset: {
+    x: number;
+    y: number;
+}, width: number, height: number): {
+    x: number;
+    y: number;
+};

lib/utils.js

@@ -5,2 +5,3 @@ "use strict";
 exports.mouseLocationToImageOffset = mouseLocationToImageOffset;
+exports.calculateNewZoomPosition = calculateNewZoomPosition;
 const setCanvasDimensions = (canvas, image, w, h) => {
@@ -52,1 +53,13 @@ if (!canvas)
 }
+function calculateNewZoomPosition(x, y, previousZoom, newZoom, previousPosition, imageOffset, width, height) {
+    const zoomRatio = newZoom / previousZoom;
+    const deltaX = x - previousPosition.x;
+    const deltaY = y - previousPosition.y;
+    const newOffset = {
+        x: imageOffset.x - (x - imageOffset.x) * (zoomRatio - 1) + deltaX,
+        y: imageOffset.y - (y - imageOffset.y) * (zoomRatio - 1) + deltaY,
+    };
+    newOffset.x = Math.min(0, Math.max(newOffset.x, width - width * newZoom));
+    newOffset.y = Math.min(0, Math.max(newOffset.y, height - height * newZoom));
+    return newOffset;
+}

package.json

 {
     "name": "react-image-zoom-in-place",
-    "version": "0.0.6",
+    "version": "0.1.1",
     "description": "",
@@ -8,3 +8,3 @@ "main": "lib/index.js",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
+        "test": "vitest",
         "build": "tsc"
@@ -20,3 +20,7 @@ },
     "devDependencies": {
-        "typescript": "^5.6.3"
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.0.1",
+        "jsdom": "^25.0.1",
+        "typescript": "^5.6.3",
+        "vitest": "^2.1.4"
     },
@@ -23,0 +27,0 @@ "files": [

README.md

 # react-image-zoom-in-place
 
-A work in progress (WIP) react component do display zoomable images.
+A react component to display zoomable images.
 
 The zoom works both on mouse & touchscreen, and is done within the original bounds of the image.
 
-## TODO:
-
-* Code cleanup
-* Tests to ensure functioning in edge cases
-
 ## Behavior
@@ -13,0 +8,0 @@

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18468

3.12%

Lines of code

381

4.1%

Number of low quality alerts

2

-33.33%

Worsened metrics

Dev dependency count

5

400%

Number of lines in readme file

68

-6.85%

No dependency changes