@shohojdhara/atomix 0.1.27 → 0.1.28

package/src/lib/composables/usePhotoViewer.ts

@@ -1,904 +0,0 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-
-interface UsePhotoViewerProps {
-  images: (string | { src: string; [key: string]: any })[];
-  startIndex?: number;
-  enableGestures?: boolean;
-  onImageChange?: (index: number) => void;
-  onClose?: () => void;
-}
-
-interface ImageState {
-  zoomLevel: number;
-  position: { x: number; y: number };
-  rotation: number;
-  bounds: {
-    minX: number;
-    maxX: number;
-    minY: number;
-    maxY: number;
-  };
-}
-
-export const usePhotoViewer = ({
-  images,
-  startIndex = 0,
-  enableGestures = true,
-  onImageChange,
-  onClose,
-}: UsePhotoViewerProps) => {
-  const [currentIndex, setCurrentIndex] = useState(startIndex);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isDragging, setIsDragging] = useState(false);
-  const [startDragPosition, setStartDragPosition] = useState({ x: 0, y: 0 });
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [showInfo, setShowInfo] = useState(false);
-  const [imageStates, setImageStates] = useState<Record<number, ImageState>>({});
-  const [isTransitioning, setIsTransitioning] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
-  const [momentumZoom, setMomentumZoom] = useState({ velocity: 0, timestamp: 0 });
-
-  // Ref for the image element
-  const imageRef = useRef<HTMLImageElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // Track touch points for pinch zoom
-  const touchPointsRef = useRef<{ x: number; y: number }[]>([]);
-  const lastDistanceRef = useRef<number | null>(null);
-  const lastMidpointRef = useRef<{ x: number; y: number } | null>(null);
-  const lastWheelTime = useRef<number>(0);
-  const momentumTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Calculate dragging bounds based on zoom level and image dimensions
-  const calculateBounds = useCallback(
-    (zoomLevel: number, rotation: number) => {
-      if (!isMounted || !imageRef.current || !containerRef.current) {
-        return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
-      }
-
-      const image = imageRef.current;
-      const container = containerRef.current;
-
-      // Additional safety check for DOM readiness
-      if (!image.naturalWidth && !image.width) {
-        return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
-      }
-
-      // Get natural image dimensions
-      const imageWidth = image.naturalWidth || image.width || 800;
-      const imageHeight = image.naturalHeight || image.height || 600;
-
-      // Get container dimensions with null check
-      try {
-        const containerRect = container.getBoundingClientRect();
-        if (!containerRect || containerRect.width === 0 || containerRect.height === 0) {
-          return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
-        }
-        const containerWidth = containerRect.width;
-        const containerHeight = containerRect.height;
-
-        // Calculate image display dimensions considering rotation
-        const rotationRad = (rotation * Math.PI) / 180;
-        const cos = Math.abs(Math.cos(rotationRad));
-        const sin = Math.abs(Math.sin(rotationRad));
-
-        // Calculate the actual display size of the image
-        const aspectRatio = imageWidth / imageHeight;
-        let displayWidth, displayHeight;
-
-        if (containerWidth / containerHeight > aspectRatio) {
-          displayHeight = Math.min(containerHeight * 0.9, imageHeight);
-          displayWidth = displayHeight * aspectRatio;
-        } else {
-          displayWidth = Math.min(containerWidth * 0.9, imageWidth);
-          displayHeight = displayWidth / aspectRatio;
-        }
-
-        // Account for rotation in bounds calculation
-        const rotatedWidth = displayWidth * cos + displayHeight * sin;
-        const rotatedHeight = displayWidth * sin + displayHeight * cos;
-
-        // Calculate scaled dimensions
-        const scaledWidth = rotatedWidth * zoomLevel;
-        const scaledHeight = rotatedHeight * zoomLevel;
-
-        // Calculate bounds - how far we can drag
-        const maxX = Math.max(0, (scaledWidth - containerWidth) / 2);
-        const maxY = Math.max(0, (scaledHeight - containerHeight) / 2);
-
-        return {
-          minX: -maxX,
-          maxX: maxX,
-          minY: -maxY,
-          maxY: maxY,
-        };
-      } catch (error) {
-        console.warn('PhotoViewer: Error calculating bounds', error);
-        return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
-      }
-    },
-    [isMounted]
-  );
-
-  // Constrain position within bounds
-  const constrainPosition = useCallback(
-    (position: { x: number; y: number }, bounds: ImageState['bounds']) => {
-      return {
-        x: Math.max(bounds.minX, Math.min(bounds.maxX, position.x)),
-        y: Math.max(bounds.minY, Math.min(bounds.maxY, position.y)),
-      };
-    },
-    []
-  );
-
-  // Mount tracking and ensure the current index is within bounds
-  useEffect(() => {
-    setIsMounted(true);
-    if (startIndex < 0 || startIndex >= images.length) {
-      setCurrentIndex(0);
-    } else {
-      setCurrentIndex(startIndex);
-    }
-    return () => setIsMounted(false);
-  }, [images, startIndex]);
-
-  // Handle modal open/close body class
-  useEffect(() => {
-    if (isModalOpen) {
-      document.body.classList.add('is-open-photoviewer');
-    } else {
-      document.body.classList.remove('is-open-photoviewer');
-    }
-  }, [isModalOpen]);
-
-  // Initialize state for current image when index changes
-  useEffect(() => {
-    if (isModalOpen) {
-      setImageStates(prev => {
-        if (!prev[currentIndex]) {
-          return {
-            ...prev,
-            [currentIndex]: {
-              zoomLevel: 1,
-              position: { x: 0, y: 0 },
-              rotation: 0,
-              bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-            },
-          };
-        }
-        return prev;
-      });
-    }
-  }, [isModalOpen, currentIndex]);
-
-  // Call onImageChange callback when current index changes
-  useEffect(() => {
-    if (onImageChange) {
-      onImageChange(currentIndex);
-    }
-  }, [currentIndex, onImageChange]);
-
-  // Update bounds when image loads or dimensions change
-  useEffect(() => {
-    const image = imageRef.current;
-    const container = containerRef.current;
-
-    const updateImageBounds = (): void => {
-      if (!isMounted || !image || !container) return undefined;
-
-      setImageStates(prev => {
-        const currentState = prev[currentIndex] || {
-          zoomLevel: 1,
-          position: { x: 0, y: 0 },
-          rotation: 0,
-          bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-        };
-
-        const newBounds = calculateBounds(currentState.zoomLevel, currentState.rotation);
-        const constrainedPosition = constrainPosition(currentState.position, newBounds);
-
-        return {
-          ...prev,
-          [currentIndex]: {
-            ...currentState,
-            bounds: newBounds,
-            position: constrainedPosition,
-          },
-        };
-      });
-    };
-
-    if (image && container && image.complete && isMounted) {
-      updateImageBounds();
-      return undefined;
-    } else if (image && container && isMounted) {
-      image.addEventListener('load', updateImageBounds);
-      return () => image.removeEventListener('load', updateImageBounds);
-    }
-    return undefined;
-  }, [currentIndex, calculateBounds, constrainPosition, isMounted]);
-
-  // Handle window resize
-  useEffect(() => {
-    const handleResize = (): void => {
-      if (!isMounted || !imageRef.current || !containerRef.current) return undefined;
-
-      setImageStates(prev => {
-        const currentState = prev[currentIndex] || {
-          zoomLevel: 1,
-          position: { x: 0, y: 0 },
-          rotation: 0,
-          bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-        };
-
-        const newBounds = calculateBounds(currentState.zoomLevel, currentState.rotation);
-        const constrainedPosition = constrainPosition(currentState.position, newBounds);
-
-        return {
-          ...prev,
-          [currentIndex]: {
-            ...currentState,
-            bounds: newBounds,
-            position: constrainedPosition,
-          },
-        };
-      });
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [currentIndex, calculateBounds, constrainPosition, isMounted]);
-
-  const openModal = useCallback(() => {
-    setIsModalOpen(true);
-  }, []);
-
-  const closeModal = useCallback(() => {
-    setIsModalOpen(false);
-    if (onClose) onClose();
-  }, [onClose]);
-
-  const goToPrevious = useCallback(() => {
-    if (currentIndex > 0) {
-      setIsTransitioning(true);
-      setTimeout(() => {
-        setCurrentIndex(prev => prev - 1);
-        setIsTransitioning(false);
-      }, 150);
-    }
-  }, [currentIndex]);
-
-  const goToNext = useCallback(() => {
-    if (currentIndex < images.length - 1) {
-      setIsTransitioning(true);
-      setTimeout(() => {
-        setCurrentIndex(prev => prev + 1);
-        setIsTransitioning(false);
-      }, 150);
-    }
-  }, [currentIndex, images.length]);
-
-  const setZoomLevel = useCallback(
-    (zoom: number | ((prev: number) => number)) => {
-      setImageStates(prev => {
-        const currentState = prev[currentIndex] || {
-          zoomLevel: 1,
-          position: { x: 0, y: 0 },
-          rotation: 0,
-          bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-        };
-
-        const newZoom = typeof zoom === 'function' ? zoom(currentState.zoomLevel) : zoom;
-        const clampedZoom = Math.max(0.1, Math.min(5, newZoom));
-
-        const newBounds = calculateBounds(clampedZoom, currentState.rotation);
-        const constrainedPosition = constrainPosition(currentState.position, newBounds);
-
-        return {
-          ...prev,
-          [currentIndex]: {
-            ...currentState,
-            zoomLevel: clampedZoom,
-            bounds: newBounds,
-            position: constrainedPosition,
-          },
-        };
-      });
-    },
-    [isMounted, currentIndex, calculateBounds, constrainPosition]
-  );
-
-  const setImagePosition = useCallback(
-    (
-      position:
-        | { x: number; y: number }
-        | ((prev: { x: number; y: number }) => { x: number; y: number })
-    ) => {
-      setImageStates(prev => {
-        const currentState = prev[currentIndex] || {
-          zoomLevel: 1,
-          position: { x: 0, y: 0 },
-          rotation: 0,
-          bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-        };
-
-        const newPosition =
-          typeof position === 'function' ? position(currentState.position) : position;
-        const constrainedPosition = constrainPosition(newPosition, currentState.bounds);
-
-        return {
-          ...prev,
-          [currentIndex]: {
-            ...currentState,
-            position: constrainedPosition,
-          },
-        };
-      });
-    },
-    [currentIndex, constrainPosition]
-  );
-
-  const setRotationAngle = useCallback(
-    (rotation: number | ((prev: number) => number)) => {
-      setImageStates(prev => {
-        const currentState = prev[currentIndex] || {
-          zoomLevel: 1,
-          position: { x: 0, y: 0 },
-          rotation: 0,
-          bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-        };
-
-        const newRotation =
-          typeof rotation === 'function' ? rotation(currentState.rotation) : rotation;
-        const normalizedRotation = ((newRotation % 360) + 360) % 360;
-
-        const newBounds = calculateBounds(currentState.zoomLevel, normalizedRotation);
-        const constrainedPosition = constrainPosition(currentState.position, newBounds);
-
-        return {
-          ...prev,
-          [currentIndex]: {
-            ...currentState,
-            rotation: normalizedRotation,
-            bounds: newBounds,
-            position: constrainedPosition,
-          },
-        };
-      });
-    },
-    [isMounted, currentIndex, calculateBounds, constrainPosition]
-  );
-
-  // Handle mouse wheel for zooming with proper bounds
-  const handleWheel = useCallback(
-    (event: React.WheelEvent<HTMLDivElement>) => {
-      if (!isMounted || !event || !event.currentTarget) return;
-
-      // Additional safety check for the target element
-      const target = event.currentTarget;
-      if (!target || typeof target.getBoundingClientRect !== 'function') return;
-
-      // Storybook-specific safety check - ensure DOM is ready
-      if (typeof window !== 'undefined' && window.location?.href?.includes('storybook')) {
-        try {
-          // Test if getBoundingClientRect works before proceeding
-          const testRect = target.getBoundingClientRect();
-          if (!testRect || testRect.width === 0 || testRect.height === 0) return;
-        } catch (e) {
-          return;
-        }
-      }
-
-      setImageStates(prev => {
-        const currentState = prev[currentIndex] || {
-          zoomLevel: 1,
-          position: { x: 0, y: 0 },
-          rotation: 0,
-          bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-        };
-
-        // Advanced gesture detection for different input methods
-        const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
-        const isTrackpadPinch = event.ctrlKey && isMac;
-        const hasHorizontalScroll = Math.abs(event.deltaX) > 0;
-        const isTrackpadScroll = !event.ctrlKey && hasHorizontalScroll && isMac;
-        const isMagicMouse = !event.ctrlKey && !hasHorizontalScroll && isMac;
-        const isRegularMouse = !isMac;
-
-        // Handle different input methods with appropriate sensitivity
-        let zoomAmount: number;
-        let shouldPreventDefault = false;
-
-        if (isTrackpadPinch) {
-          // MacBook trackpad pinch zoom - natural, high sensitivity
-          zoomAmount = event.deltaY * -0.02;
-          shouldPreventDefault = true;
-        } else if (isTrackpadScroll) {
-          // MacBook trackpad scroll with two fingers
-          if (currentState.zoomLevel > 1) {
-            // Only zoom when already zoomed in, otherwise allow natural scroll
-            zoomAmount = event.deltaY * -0.003;
-            shouldPreventDefault = true;
-          } else {
-            return prev; // Allow page scroll when not zoomed
-          }
-        } else if (isMagicMouse) {
-          // Apple Magic Mouse - less sensitive
-          zoomAmount = event.deltaY * -0.004;
-          shouldPreventDefault = true;
-        } else if (isRegularMouse) {
-          // Regular mouse wheel - medium sensitivity
-          zoomAmount = event.deltaY * -0.006;
-          shouldPreventDefault = true;
-        } else {
-          // Fallback for other input methods
-          zoomAmount = event.deltaY * -0.005;
-          shouldPreventDefault = true;
-        }
-
-        if (shouldPreventDefault) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-
-        // Add momentum for trackpad gestures
-        const currentTime = Date.now();
-        const timeDelta = currentTime - lastWheelTime.current;
-        lastWheelTime.current = currentTime;
-
-        // Calculate velocity for momentum (trackpad specific)
-        if (isTrackpadPinch && timeDelta < 100) {
-          const velocity = Math.abs(zoomAmount) / timeDelta;
-          setMomentumZoom({ velocity, timestamp: currentTime });
-
-          // Clear any existing momentum timeout
-          if (momentumTimeoutRef.current) {
-            clearTimeout(momentumTimeoutRef.current);
-          }
-
-          // Apply momentum decay after gesture ends
-          momentumTimeoutRef.current = setTimeout(() => {
-            const decayFactor = 0.95;
-            const minVelocity = 0.001;
-
-            const applyMomentum = () => {
-              setMomentumZoom(prev => {
-                if (prev.velocity < minVelocity) return prev;
-
-                const newVelocity = prev.velocity * decayFactor;
-                const momentumZoomAmount = newVelocity * (zoomAmount > 0 ? 1 : -1);
-
-                // Apply momentum zoom
-                setImageStates(current => {
-                  const state = current[currentIndex] || {
-                    zoomLevel: 1,
-                    position: { x: 0, y: 0 },
-                    rotation: 0,
-                    bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-                  };
-
-                  const newZoom = Math.max(0.1, Math.min(5, state.zoomLevel + momentumZoomAmount));
-                  if (newZoom === state.zoomLevel) return current;
-
-                  const newBounds = calculateBounds(newZoom, state.rotation);
-                  const constrainedPosition = constrainPosition(state.position, newBounds);
-
-                  return {
-                    ...current,
-                    [currentIndex]: {
-                      ...state,
-                      zoomLevel: newZoom,
-                      bounds: newBounds,
-                      position: constrainedPosition,
-                    },
-                  };
-                });
-
-                if (newVelocity >= minVelocity) {
-                  requestAnimationFrame(applyMomentum);
-                }
-
-                return { velocity: newVelocity, timestamp: Date.now() };
-              });
-            };
-
-            requestAnimationFrame(applyMomentum);
-          }, 50);
-        }
-
-        // Safe getBoundingClientRect call with error handling
-        let rect;
-        try {
-          rect = target.getBoundingClientRect();
-        } catch (error) {
-          console.warn('PhotoViewer: Error getting bounding rect', error);
-          return prev;
-        }
-
-        if (!rect || rect.width === 0 || rect.height === 0) return prev;
-
-        const centerX = rect.width / 2;
-        const centerY = rect.height / 2;
-        const cursorX = event.clientX - rect.left - centerX;
-        const cursorY = event.clientY - rect.top - centerY;
-
-        const oldZoom = currentState.zoomLevel;
-        const newZoom = Math.max(0.1, Math.min(5, oldZoom + zoomAmount));
-
-        if (newZoom !== oldZoom) {
-          const zoomFactor = newZoom / oldZoom;
-          const newBounds = calculateBounds(newZoom, currentState.rotation);
-
-          // Calculate new position to zoom towards cursor
-          const newPosition = {
-            x: currentState.position.x + cursorX * (1 - zoomFactor) * 0.5,
-            y: currentState.position.y + cursorY * (1 - zoomFactor) * 0.5,
-          };
-
-          const constrainedPosition = constrainPosition(newPosition, newBounds);
-
-          return {
-            ...prev,
-            [currentIndex]: {
-              ...currentState,
-              zoomLevel: newZoom,
-              bounds: newBounds,
-              position: constrainedPosition,
-            },
-          };
-        }
-        return prev;
-      });
-    },
-    [isMounted, currentIndex, calculateBounds, constrainPosition]
-  );
-
-  // Handle double click to zoom with smart zoom levels
-  const handleDoubleClick = useCallback(
-    (event: React.MouseEvent) => {
-      if (!isMounted || !event || !event.currentTarget) return;
-
-      const target = event.currentTarget;
-      if (!target || typeof target.getBoundingClientRect !== 'function') return;
-
-      setImageStates(prev => {
-        const currentState = prev[currentIndex] || {
-          zoomLevel: 1,
-          position: { x: 0, y: 0 },
-          rotation: 0,
-          bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-        };
-
-        let rect;
-        try {
-          rect = target.getBoundingClientRect();
-        } catch (error) {
-          console.warn('PhotoViewer: Error getting bounding rect in double click', error);
-          return prev;
-        }
-
-        if (!rect || rect.width === 0 || rect.height === 0) return prev;
-
-        const centerX = rect.width / 2;
-        const centerY = rect.height / 2;
-        const cursorX = event.clientX - rect.left - centerX;
-        const cursorY = event.clientY - rect.top - centerY;
-
-        let newZoom: number;
-        let newPosition = { x: 0, y: 0 };
-
-        if (currentState.zoomLevel < 1.5) {
-          newZoom = 2;
-          // Zoom towards cursor
-          newPosition = {
-            x: -cursorX * 0.5,
-            y: -cursorY * 0.5,
-          };
-        } else if (currentState.zoomLevel < 3) {
-          newZoom = 4;
-          newPosition = {
-            x: -cursorX * 0.75,
-            y: -cursorY * 0.75,
-          };
-        } else {
-          newZoom = 1;
-          newPosition = { x: 0, y: 0 };
-        }
-
-        const newBounds = calculateBounds(newZoom, currentState.rotation);
-        const constrainedPosition = constrainPosition(newPosition, newBounds);
-
-        return {
-          ...prev,
-          [currentIndex]: {
-            ...currentState,
-            zoomLevel: newZoom,
-            bounds: newBounds,
-            position: constrainedPosition,
-          },
-        };
-      });
-    },
-    [isMounted, currentIndex, calculateBounds, constrainPosition]
-  );
-
-  // Handle mouse down for panning
-  const handleMouseDown = useCallback(
-    (event: React.MouseEvent<HTMLDivElement | HTMLImageElement, MouseEvent>) => {
-      setImageStates(prev => {
-        const currentState = prev[currentIndex] || {
-          zoomLevel: 1,
-          position: { x: 0, y: 0 },
-          rotation: 0,
-          bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-        };
-
-        if (currentState.zoomLevel > 1) {
-          event.preventDefault();
-          setIsDragging(true);
-          setStartDragPosition({
-            x: event.clientX - currentState.position.x,
-            y: event.clientY - currentState.position.y,
-          });
-        }
-        return prev;
-      });
-    },
-    [currentIndex]
-  );
-
-  // Handle mouse move for panning with bounds
-  const handleMouseMove = useCallback(
-    (event: React.MouseEvent<HTMLDivElement | HTMLImageElement, MouseEvent>) => {
-      if (!isDragging) return;
-
-      setImageStates(prev => {
-        const currentState = prev[currentIndex] || {
-          zoomLevel: 1,
-          position: { x: 0, y: 0 },
-          rotation: 0,
-          bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-        };
-
-        const newPosition = {
-          x: event.clientX - startDragPosition.x,
-          y: event.clientY - startDragPosition.y,
-        };
-
-        const constrainedPosition = constrainPosition(newPosition, currentState.bounds);
-
-        return {
-          ...prev,
-          [currentIndex]: {
-            ...currentState,
-            position: constrainedPosition,
-          },
-        };
-      });
-    },
-    [isDragging, startDragPosition, currentIndex, constrainPosition]
-  );
-
-  // Handle mouse up for panning
-  const handleMouseUp = useCallback(() => {
-    setIsDragging(false);
-  }, []);
-
-  // Touch handlers for mobile gestures with bounds
-  const handleTouchStart = useCallback(
-    (event: React.TouchEvent<HTMLImageElement | HTMLDivElement>) => {
-      if (!enableGestures) return;
-
-      const touches = event.touches;
-
-      // Always prevent default for multi-touch to stop page zoom
-      if (touches.length > 1) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-
-      touchPointsRef.current = Array.from(touches).map(touch => ({
-        x: touch.clientX,
-        y: touch.clientY,
-      }));
-
-      setImageStates(prev => {
-        const currentState = prev[currentIndex] || {
-          zoomLevel: 1,
-          position: { x: 0, y: 0 },
-          rotation: 0,
-          bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-        };
-
-        if (touches.length === 1 && currentState.zoomLevel > 1) {
-          setIsDragging(true);
-          setStartDragPosition({
-            x: touches[0].clientX - currentState.position.x,
-            y: touches[0].clientY - currentState.position.y,
-          });
-        } else if (touches.length === 2) {
-          const dx = touches[0].clientX - touches[1].clientX;
-          const dy = touches[0].clientY - touches[1].clientY;
-          lastDistanceRef.current = Math.sqrt(dx * dx + dy * dy);
-
-          lastMidpointRef.current = {
-            x: (touches[0].clientX + touches[1].clientX) / 2,
-            y: (touches[0].clientY + touches[1].clientY) / 2,
-          };
-        }
-        return prev;
-      });
-    },
-    [enableGestures, currentIndex]
-  );
-
-  // Handle touch move for dragging and pinch zoom with bounds
-  const handleTouchMove = useCallback(
-    (event: React.TouchEvent<HTMLImageElement | HTMLDivElement>) => {
-      if (!enableGestures) return;
-
-      const touches = event.touches;
-
-      // Always prevent default for multi-touch gestures to stop page zoom
-      if (touches.length > 1) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-
-      setImageStates(prev => {
-        const currentState = prev[currentIndex] || {
-          zoomLevel: 1,
-          position: { x: 0, y: 0 },
-          rotation: 0,
-          bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-        };
-
-        // Prevent default for single touch when zoomed in to avoid conflicts
-        if (currentState.zoomLevel > 1 && touches.length === 1) {
-          event.preventDefault();
-        }
-
-        if (touches.length === 1 && isDragging && currentState.zoomLevel > 1) {
-          const newPosition = {
-            x: touches[0].clientX - startDragPosition.x,
-            y: touches[0].clientY - startDragPosition.y,
-          };
-          const constrainedPosition = constrainPosition(newPosition, currentState.bounds);
-
-          return {
-            ...prev,
-            [currentIndex]: {
-              ...currentState,
-              position: constrainedPosition,
-            },
-          };
-        } else if (touches.length === 2 && lastDistanceRef.current !== null) {
-          const dx = touches[0].clientX - touches[1].clientX;
-          const dy = touches[0].clientY - touches[1].clientY;
-          const distance = Math.sqrt(dx * dx + dy * dy);
-
-          const zoomDelta = (distance - lastDistanceRef.current) * 0.005;
-          lastDistanceRef.current = distance;
-
-          const currentMidpoint = {
-            x: (touches[0].clientX + touches[1].clientX) / 2,
-            y: (touches[0].clientY + touches[1].clientY) / 2,
-          };
-
-          const oldZoom = currentState.zoomLevel;
-          const newZoom = Math.max(0.1, Math.min(5, oldZoom + zoomDelta));
-
-          if (newZoom !== oldZoom && lastMidpointRef.current) {
-            let rect;
-            try {
-              rect = event.currentTarget.getBoundingClientRect();
-            } catch (error) {
-              console.warn('PhotoViewer: Error getting bounding rect in touch move', error);
-              return prev;
-            }
-
-            if (!rect || rect.width === 0 || rect.height === 0) return prev;
-
-            const centerX = rect.width / 2;
-            const centerY = rect.height / 2;
-            const midpointX = currentMidpoint.x - rect.left - centerX;
-            const midpointY = currentMidpoint.y - rect.top - centerY;
-
-            const zoomFactor = newZoom / oldZoom;
-            const newBounds = calculateBounds(newZoom, currentState.rotation);
-
-            const newPosition = {
-              x: currentState.position.x + midpointX * (1 - zoomFactor) * 0.5,
-              y: currentState.position.y + midpointY * (1 - zoomFactor) * 0.5,
-            };
-
-            const constrainedPosition = constrainPosition(newPosition, newBounds);
-
-            lastMidpointRef.current = currentMidpoint;
-
-            return {
-              ...prev,
-              [currentIndex]: {
-                ...currentState,
-                zoomLevel: newZoom,
-                bounds: newBounds,
-                position: constrainedPosition,
-              },
-            };
-          }
-
-          lastMidpointRef.current = currentMidpoint;
-        }
-        return prev;
-      });
-    },
-    [
-      isMounted,
-      enableGestures,
-      isDragging,
-      startDragPosition,
-      currentIndex,
-      constrainPosition,
-      calculateBounds,
-    ]
-  );
-
-  // Handle touch end
-  const handleTouchEnd = useCallback(() => {
-    setIsDragging(false);
-    lastDistanceRef.current = null;
-    lastMidpointRef.current = null;
-  }, []);
-
-  // Get current state values without causing re-renders
-  const currentState = imageStates[currentIndex] || {
-    zoomLevel: 1,
-    position: { x: 0, y: 0 },
-    rotation: 0,
-    bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-  };
-
-  return {
-    currentIndex,
-    isModalOpen,
-    zoomLevel: currentState.zoomLevel,
-    imagePosition: currentState.position,
-    isDragging,
-    isFullscreen,
-    rotationAngle: currentState.rotation,
-    showInfo,
-    imageRef,
-    containerRef,
-    isTransitioning,
-    setCurrentIndex,
-    setZoomLevel,
-    setImagePosition,
-    setIsDragging,
-    setIsFullscreen,
-    setRotationAngle,
-    setShowInfo,
-    openModal,
-    closeModal,
-    goToPrevious,
-    goToNext,
-    handleWheel,
-    handleMouseDown,
-    handleMouseMove,
-    handleMouseUp,
-    handleTouchStart,
-    handleTouchMove,
-    handleTouchEnd,
-    handleDoubleClick,
-    resetImageState: () => {
-      setImageStates(prev => ({
-        ...prev,
-        [currentIndex]: {
-          zoomLevel: 1,
-          position: { x: 0, y: 0 },
-          rotation: 0,
-          bounds: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
-        },
-      }));
-    },
-  };
-};