feat: add horizontal drag and zoom support (v1.2.0)

Author: netshdev

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.2.0] - 2026-01-04
+
+### Added
+
+- **Horizontal Dragging**: Support for dragging images horizontally if they are wider than the container.
+- **Zoom Support**: New `zoom` prop to scale images, enabling 2D scrolling/positioning when zoomed in.
+
 All notable changes to this project will be documented in this file.
 
 ## [1.1.0] - 2026-01-04

README.md

@@ -4,7 +4,8 @@ A React component for creating draggable image views with automatic scaling and
 
 ## Features
 
-- **Vertical drag adjustment** for perfect image positioning
+- **Vertical and Horizontal drag adjustment** for perfect image positioning
+- **Zoom support** for detailed cropping and 2D scrolling
 - **Automatic image scaling** while maintaining aspect ratio
 - **Smooth animations and transitions**
 - **Accessibility first** with keyboard navigation
@@ -27,6 +28,7 @@ import ImageCropView from 'react-image-crop-drag';
 
 function App() {
   const [isEditing, setIsEditing] = useState(false);
+  const [zoom, setZoom] = useState(1);
 
   const handleSave = (cropData) => {
     setIsEditing(false);
@@ -39,18 +41,18 @@ function App() {
       containerWidth={800}
       containerHeight={400}
       isEditing={isEditing}
+      zoom={zoom}
       onSave={handleSave}
     />
   );
 }
-
 ```
 
 ## Accessibility
 
 This component is built with accessibility in mind:
 
-- **Keyboard Support**: When in editing mode, the container is focusable. Use **Up/Down Arrow keys** to adjust the image position.
+- **Keyboard Support**: When in editing mode, the container is focusable. Use **Arrow keys** (Up/Down/Left/Right) to adjust the image position.
 - **Screen Readers**: Helper texts and ARIA attributes provide context to screen reader users.
 - **Touch Support**: Full touch support for dragging on mobile devices.
 
@@ -63,6 +65,7 @@ This component is built with accessibility in mind:
 | `containerWidth`  | number   | No       | 800                 | Width of the container          |
 | `containerHeight` | number   | No       | 400                 | Height of the container         |
 | `isEditing`       | boolean  | No       | false               | Enable/disable drag mode        |
+| `zoom`            | number   | No       | 1                   | Zoom level (multiplier)         |
 | `onSave`          | function | No       | -                   | Callback with crop data         |
 
 ## Example Use Cases

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-image-crop-drag",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React component for draggable image crop view with vertical adjustment",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

src/ImageCropView.jsx

@@ -6,11 +6,12 @@ const ImageCropView = ({
   containerWidth = 800,
   containerHeight = 400,
   isEditing,
+  zoom = 1,
 }) => {
-  const [position, setPosition] = useState({ y: 0 });
+  const [position, setPosition] = useState({ x: 0, y: 0 });
   const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
   const [isDragging, setIsDragging] = useState(false);
-  const [startY, setStartY] = useState(0);
+  const [startPos, setStartPos] = useState({ x: 0, y: 0 });
   const imageRef = useRef(null);
   const containerRef = useRef(null);
 
@@ -22,21 +23,42 @@ const ImageCropView = ({
       let width = containerWidth;
       let height = containerWidth / aspectRatio;
 
-
-      if (height < containerHeight) {
-        height = containerHeight;
-        width = containerHeight * aspectRatio;
+      if (width < containerWidth || height < containerHeight) {
+        const containerRatio = containerWidth / containerHeight;
+        if (aspectRatio > containerRatio) {
+          height = containerHeight;
+          width = containerHeight * aspectRatio;
+        } else {
+          width = containerWidth;
+          height = containerWidth / aspectRatio;
+        }
       }
 
+      width *= zoom;
+      height *= zoom;
+
       setImageSize({ width, height });
-      setPosition({ y: (containerHeight - height) / 2 });
+      setPosition({
+        x: (containerWidth - width) / 2,
+        y: (containerHeight - height) / 2
+      });
+    };
+
+    image.onerror = (err) => {
+      console.error("ImageCropView: Failed to load image", src, err);
     };
-  }, [src, containerWidth, containerHeight]);
+  }, [src, containerWidth, containerHeight, zoom]);
 
-  const constrainY = (y) => {
+  const constrain = (x, y) => {
+    const minX = containerWidth - imageSize.width;
+    const maxX = 0;
     const minY = containerHeight - imageSize.height;
     const maxY = 0;
-    return Math.min(maxY, Math.max(minY, y));
+
+    return {
+      x: Math.min(maxX, Math.max(minX, x)),
+      y: Math.min(maxY, Math.max(minY, y))
+    };
   };
 
   const handleMouseDown = (e) => {
@@ -46,16 +68,20 @@ const ImageCropView = ({
     }
     e.preventDefault();
     setIsDragging(true);
-    setStartY(e.clientY - position.y);
+    setStartPos({
+      x: e.clientX - position.x,
+      y: e.clientY - position.y
+    });
   };
 
   const handleMouseMove = (e) => {
     if (!isEditing || !isDragging) {
       return;
     }
 
-    const newY = e.clientY - startY;
-    setPosition({ y: constrainY(newY) });
+    const newX = e.clientX - startPos.x;
+    const newY = e.clientY - startPos.y;
+    setPosition(constrain(newX, newY));
   };
 
   const handleMouseUp = () => {
@@ -65,15 +91,19 @@ const ImageCropView = ({
   const handleTouchStart = (e) => {
     if (!isEditing) return;
     setIsDragging(true);
-    setStartY(e.touches[0].clientY - position.y);
+    setStartPos({
+      x: e.touches[0].clientX - position.x,
+      y: e.touches[0].clientY - position.y
+    });
   };
 
   const handleTouchMove = (e) => {
     if (!isEditing || !isDragging) return;
     if (e.cancelable) e.preventDefault();
 
-    const newY = e.touches[0].clientY - startY;
-    setPosition({ y: constrainY(newY) });
+    const newX = e.touches[0].clientX - startPos.x;
+    const newY = e.touches[0].clientY - startPos.y;
+    setPosition(constrain(newX, newY));
   };
 
   const handleTouchEnd = () => {
@@ -84,27 +114,35 @@ const ImageCropView = ({
     if (!isEditing) return;
 
     const step = 20;
-    let newY = position.y;
-
-    if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      newY -= step;
-    } else if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      newY += step;
-    } else {
-      return;
+    let { x: newX, y: newY } = position;
+
+    switch (e.key) {
+      case 'ArrowUp':
+        newY -= step;
+        break;
+      case 'ArrowDown':
+        newY += step;
+        break;
+      case 'ArrowLeft':
+        newX -= step;
+        break;
+      case 'ArrowRight':
+        newX += step;
+        break;
+      default:
+        return;
     }
 
-    setPosition({ y: constrainY(newY) });
+    e.preventDefault();
+    setPosition(constrain(newX, newY));
   };
 
   return (
     <div
       ref={containerRef}
       role="application"
       aria-label="Image Cropper"
-      aria-description="Use Up and Down arrow keys to adjust current image position."
+      aria-description="Use Arrow keys to adjust image position."
       tabIndex={isEditing ? 0 : -1}
       onKeyDown={handleKeyDown}
       style={{
@@ -126,11 +164,12 @@ const ImageCropView = ({
           width: imageSize.width,
           height: imageSize.height,
           position: "absolute",
-          left: "50%",
-          transform: `translateX(-50%) translateY(${position.y}px)`,
+          left: 0,
+          top: 0,
+          transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
           transition: isDragging ? "none" : "transform 0.1s ease",
           userSelect: "none",
-          objectFit: "cover",
+          objectFit: "fill",
           pointerEvents: isEditing ? "auto" : "none",
           touchAction: "none"
         }}