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

Comparing version 0.0.2 to 0.0.3

lib/index.d.ts

@@ -6,4 +6,5 @@ type ZoomableProps = {
     maxZoom: number;
+    step: number;
 };
 export declare function ZoomableImage(props: ZoomableProps): import("react/jsx-runtime").JSX.Element;
 export {};

lib/index.js

@@ -40,2 +40,6 @@ "use strict";
     });
+    const [mouseLocation, setMouseLocation] = (0, react_1.useState)({
+        x: 0,
+        y: 0,
+    });
     const [previousPinchDistance, setPreviousPinchDistance] = (0, react_1.useState)(0);
@@ -54,2 +58,6 @@ const [zoomLevel, setZoomLevel] = (0, react_1.useState)(1);
         const eventY = event.clientY;
+        setMouseLocation({
+            x: eventX,
+            y: eventY,
+        });
         (0, utils_1.handleHover)(eventX, eventY, canvasRef.current, image, zoomLevel);
@@ -75,10 +83,11 @@ };
     const handleMouseScroll = (event) => {
-        console.log(event.deltaY);
+        let newZoom = 1;
         if (event.deltaY < 0) {
-            setZoomLevel(Math.min(Math.max(1, zoomLevel + 1), props.maxZoom));
+            newZoom = Math.min(Math.max(1, zoomLevel + props.step), props.maxZoom);
         }
         else {
-            setZoomLevel(Math.min(Math.max(1, zoomLevel - 1), props.maxZoom));
+            newZoom = Math.min(Math.max(1, zoomLevel - props.step), props.maxZoom);
         }
-        //todo call handlehover here to update zoom level
+        setZoomLevel(newZoom);
+        (0, utils_1.handleHover)(mouseLocation.x, mouseLocation.y, canvasRef.current, image, newZoom);
     };
@@ -100,3 +109,2 @@ (0, react_1.useEffect)(() => {
             (0, utils_1.setCanvasDimensions)(canvasRef.current, image);
-            //const w = image.width >= image.height ? rect.width : rect.width *
             ctx.drawImage(image, 0, 0, rect.width, rect.height);
@@ -103,0 +111,0 @@ };

package.json

 {
     "name": "react-image-zoom-in-place",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 # react-image-zoomable-in-place
+
+A work in progress (WIP) react component do display zoomable images.
+
+The zoom is done within the original image bounds. The image component scales to the size of the parent component. 
+
+## TODO:
+
+* Make canvas size respect image aspect ratio without relying on the parent component styling
+* Fix some glitches in the pinch zoom and dragging.
+
+## Behavior
+
+#### Mouse
+
+* Hover over image to zoom
+* Reset when mouse leaves image boundary
+* Panning the image based on cursor position
+* Scroll to +/- zoom within bounds
+
+#### Touchscreen
+
+* Pinch gesture to zoom image
+* Drag to pan image.
+
+## Props
+
+| Name     | Type    | Optional | Description |
+| -------- | ------- | -------  | ------- |
+| src      | string  |          |url or base64 string for the image|
+| alt      | string  |          |alt text for the image (WIP)|
+| zoom     | number  |          |default zoom on mouse hover|
+| maxZoom  | number  |          |maximum allowed zoom muliplication by scroll or touch pinch|
+| step     | number  |          |zoom step on mouse scroll|
+
+## Usage
+
+```
+import { ZoomableImage } from "react-image-zoom-in-place";
+
+
+export default function Home() {
+  return (
+      <div>
+        <ZoomableImage
+          src={"<image url or base64 here>"}
+          alt="alt text"
+          zoom={2}
+          maxZoom={10}
+		  step={0.1}
+        />
+      </div>
+  );
+}
+
+```
+
+## License
+
+MIT
+
+## NPM
+
+[https://www.npmjs.com/package/react-image-zoom-in-place](https://www.npmjs.com/package/react-image-zoom-in-place) 

No alert changes

Improved metrics

Total package byte prevSize

18427

17.67%

Number of package files

8

14.29%

Lines of code

391

2.36%

Number of lines in readme file

64

3100%

No dependency changes