feat(Gallery): add image scaling

Author: d3m1d0v

src/components/Gallery/__stories__/Gallery.stories.tsx

@@ -337,3 +337,39 @@ const SingleItemGalleryTemplate: StoryFn<GalleryProps> = () => {
 };
 
 export const SingleItemGallery = SingleItemGalleryTemplate.bind({});
+
+const SmallImagesTemplate: StoryFn<GalleryProps> = () => {
+    const [open, setOpen] = React.useState(false);
+
+    const handleToggle = React.useCallback(() => {
+        setOpen(false);
+    }, []);
+
+    const handleOpen = React.useCallback(() => {
+        setOpen(true);
+    }, []);
+
+    return (
+        <React.Fragment>
+            <Button onClick={handleOpen} view="action" size="l">
+                Open gallery
+            </Button>
+            <Gallery open={open} onOpenChange={handleToggle}>
+                <GalleryItem
+                    {...getGalleryItemImage({
+                        src: 'https://i.pinimg.com/236x/6d/4a/02/6d4a022b29ce165692672be0d35ec1df.jpg',
+                        name: '1',
+                    })}
+                />
+                <GalleryItem
+                    {...getGalleryItemImage({
+                        src: 'https://i.pinimg.com/236x/5a/ec/22/5aec2220c6ebe1869b059801e2107044.jpg',
+                        name: '2',
+                    })}
+                />
+            </Gallery>
+        </React.Fragment>
+    );
+};
+
+export const SmallImages = SmallImagesTemplate.bind({});

src/components/Gallery/components/views/ImageView/ImageView.scss

@@ -3,16 +3,32 @@
 $block: '.#{variables.$ns}gallery-image-view';
 
 #{$block} {
-    max-width: 100%;
-    max-height: 100%;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &__image {
+        max-width: 100%;
+        max-height: 100%;
+        transition: transform 0.3s ease-out;
+        transform-origin: center center;
+        user-select: none;
+    }
 
     &__spin {
         position: absolute;
     }
 
-    &_mobile {
-        user-select: none;
+    &_mobile #{$block}__image {
+        // Touch optimizations
+        touch-action: manipulation;
         -webkit-user-drag: none;
         -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: transparent;
+        will-change: transform;
     }
 }

src/components/Gallery/components/views/ImageView/ImageView.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 
-import {Spin} from '@gravity-ui/uikit';
+import {Spin, useMobile} from '@gravity-ui/uikit';
 
 import {block} from '../../../../utils/cn';
+import {useImageZoom} from '../../../hooks/useImageZoom';
 import {GalleryFallbackText} from '../../FallbackText';
 
 import './ImageView.scss';
@@ -17,29 +18,92 @@ export type ImageViewProps = {
 
 export const ImageView = ({className, src, alt = ''}: ImageViewProps) => {
     const [status, setStatus] = React.useState<'loading' | 'complete' | 'error'>('loading');
+    const imageRef = React.useRef<HTMLImageElement>(null);
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const isMobile = useMobile();
 
+    // Initialize zoom functionality with mobile detection
+    const {imgHandlers, setImageSize, setContainerSize, resetZoom, imgStyles} = useImageZoom({
+        isMobile,
+    });
+
+    // Track image dimensions on load
     const handleLoad = React.useCallback(() => {
         setStatus('complete');
-    }, []);
+        if (imageRef.current) {
+            setImageSize({
+                width: imageRef.current.naturalWidth,
+                height: imageRef.current.naturalHeight,
+            });
+        }
+    }, [setImageSize]);
 
     const handleError = React.useCallback(() => {
         setStatus('error');
     }, []);
 
+    // Track container dimensions and handle resize
+    React.useEffect(() => {
+        if (!containerRef.current) return undefined;
+
+        const updateSize = () => {
+            if (containerRef.current) {
+                const size = {
+                    width: containerRef.current.clientWidth,
+                    height: containerRef.current.clientHeight,
+                };
+
+                // Only update if dimensions are valid
+                if (size.width > 0 && size.height > 0) {
+                    setContainerSize(size);
+                }
+            }
+        };
+
+        // Use ResizeObserver for more reliable dimension tracking
+        const resizeObserver = new ResizeObserver(() => {
+            updateSize();
+        });
+
+        resizeObserver.observe(containerRef.current);
+
+        // Also try to update immediately (might work if container is already rendered)
+        updateSize();
+
+        // Fallback: try again after a short delay
+        const timeoutId = setTimeout(updateSize, 100);
+
+        window.addEventListener('resize', updateSize);
+
+        return () => {
+            resizeObserver.disconnect();
+            clearTimeout(timeoutId);
+            window.removeEventListener('resize', updateSize);
+        };
+    }, [setContainerSize]);
+
+    // Reset zoom when image source changes
+    React.useEffect(() => {
+        resetZoom();
+    }, [src, resetZoom]);
+
     if (status === 'error') {
         return <GalleryFallbackText />;
     }
 
     return (
-        <React.Fragment>
+        <div ref={containerRef} className={cnImageView({mobile: isMobile}, className)}>
             {status === 'loading' && <Spin className={cnImageView('spin')} size="xl" />}
             <img
-                className={cnImageView(null, className)}
+                ref={imageRef}
+                className={cnImageView('image')}
                 src={src}
                 alt={alt}
+                {...imgHandlers}
                 onLoad={handleLoad}
                 onError={handleError}
+                style={imgStyles}
             />
-        </React.Fragment>
+        </div>
     );
 };

src/components/Gallery/hooks/useImageZoom/constants.ts

@@ -0,0 +1,7 @@
+// Constants
+export const MIN_SCALE = 1;
+export const MAX_SCALE_DESKTOP = 2; // Desktop max zoom
+export const MAX_SCALE_TOUCH = 3; // Mobile max zoom
+export const DRAG_THRESHOLD = 3; // px - minimum movement to consider as drag
+export const DOUBLE_TAP_DELAY = 300; // ms
+export const DOUBLE_TAP_DISTANCE = 30; // px

src/components/Gallery/hooks/useImageZoom/index.ts

@@ -0,0 +1,2 @@
+export {useImageZoom, type UseImageZoomProps, type UseImageZoomReturn} from './useImageZoom';
+export type {Position, Size} from './types';

src/components/Gallery/hooks/useImageZoom/types.ts

@@ -0,0 +1,31 @@
+export type Ref<T> = {readonly current: T};
+
+export type Position = {
+    readonly x: number;
+    readonly y: number;
+};
+
+export type Size = {
+    readonly width: number;
+    readonly height: number;
+};
+
+export type ZoomState = {
+    readonly scale: number;
+    readonly position: Position;
+};
+
+export type ZoomActions = {
+    setScale: (scale: number) => void;
+    setPosition: (position: Position) => void;
+    resetZoom: () => void;
+};
+
+export type ZoomConstraints = {
+    imageSize: Size;
+    containerSize: Size;
+    imageSizeRef: Ref<Size>;
+    containerSizeRef: Ref<Size>;
+    constrainPosition: (pos: Position, scale: number) => Position;
+    imageFitsContainer: boolean;
+};

src/components/Gallery/hooks/useImageZoom/useImageZoom.ts

@@ -0,0 +1,137 @@
+import * as React from 'react';
+
+import {useLatest} from '../useLatest';
+
+import {MIN_SCALE} from './constants';
+import type {Position, Size, ZoomActions, ZoomConstraints, ZoomState} from './types';
+import {useImageZoomDesktop} from './useImageZoomDesktop';
+import {useImageZoomTouch} from './useImageZoomTouch';
+import {checkImageFitsContainer, createConstrainPosition} from './utils';
+
+export interface UseImageZoomProps {
+    isMobile: boolean;
+}
+
+export interface UseImageZoomReturn {
+    position: Position;
+    imgHandlers: {
+        onClick?: (e: React.MouseEvent) => void;
+        onMouseDown?: (e: React.MouseEvent) => void;
+        onTouchStart?: (e: React.TouchEvent) => void;
+        onTouchMove?: (e: React.TouchEvent) => void;
+        onTouchEnd?: (e: React.TouchEvent) => void;
+    };
+    setImageSize: (size: Size) => void;
+    setContainerSize: (size: Size) => void;
+    resetZoom: () => void;
+    imgStyles: {
+        transform: string;
+        cursor: string;
+        transition: string;
+    };
+}
+
+/**
+ * Main zoom hook that coordinates desktop and touch zoom functionality
+ *
+ * This hook manages shared state and delegates platform-specific logic to:
+ * - useImageZoomDesktop: Mouse-based zoom and drag
+ * - useImageZoomTouch: Touch-based zoom with pinch and double tap
+ *
+ * Features:
+ * - Shared state management (scale, position, dimensions)
+ * - Boundary constraints to keep image within visible area
+ * - Platform-specific handlers based on isMobile prop
+ * - Auto-recalculation of constraints when dimensions change
+ *
+ * @param props - Configuration options
+ * @returns Zoom state, handlers, and style properties
+ */
+export function useImageZoom({isMobile}: UseImageZoomProps): UseImageZoomReturn {
+    // Shared state
+    const [scale, setScale] = React.useState<number>(1);
+    const [position, setPosition] = React.useState<Position>({x: 0, y: 0});
+    const [imageSize, setImageSize] = React.useState<Size>({width: 0, height: 0});
+    const [containerSize, setContainerSize] = React.useState<Size>({width: 0, height: 0});
+
+    // Refs for current values (avoid stale closures)
+    const imageSizeRef = useLatest(imageSize);
+    const containerSizeRef = useLatest(containerSize);
+
+    // Shared constraint function
+    const constrainPosition = React.useMemo(
+        () => createConstrainPosition(imageSizeRef, containerSizeRef),
+        [imageSizeRef, containerSizeRef],
+    );
+
+    // Check if image fits in container at current scale
+    const imageFitsContainer = React.useMemo(
+        () => checkImageFitsContainer(imageSize, containerSize, scale),
+        [imageSize, containerSize, scale],
+    );
+
+    // Shared actions
+    const resetZoom = React.useCallback(() => {
+        setScale(1);
+        setPosition({x: 0, y: 0});
+    }, []);
+
+    const zoomState: ZoomState = {scale, position};
+    const zoomActions: ZoomActions = {setScale, setPosition, resetZoom};
+    const constraints: ZoomConstraints = {
+        imageSize,
+        containerSize,
+        imageSizeRef,
+        containerSizeRef,
+        constrainPosition,
+        imageFitsContainer,
+    };
+
+    // Platform-specific hooks
+    const desktop = useImageZoomDesktop({
+        enabled: !isMobile,
+        zoomState,
+        zoomActions,
+        constraints,
+    });
+
+    const touch = useImageZoomTouch({
+        enabled: isMobile,
+        zoomState,
+        zoomActions,
+        constraints,
+    });
+
+    // Recalculate position constraints when dimensions change
+    React.useEffect(() => {
+        if (scale > MIN_SCALE) {
+            const constrainedPosition = constrainPosition(position, scale);
+            if (constrainedPosition.x !== position.x || constrainedPosition.y !== position.y) {
+                setPosition(constrainedPosition);
+            }
+        }
+    }, [imageSize, containerSize, scale, position, constrainPosition]);
+
+    // Calculate styles
+    const transform = `translate(${position.x}px, ${position.y}px) scale(${scale})`;
+    // Show zoom-in cursor when not zoomed or when zoomed but image fits in container
+    const cursor = (scale > MIN_SCALE && (imageFitsContainer ? 'zoom-out' : 'move')) || 'zoom-in';
+    const isInteracting = desktop.isDragging || touch.isTouching;
+    const transition = isInteracting ? 'none' : 'transform 0.3s ease-out';
+
+    // Merge handlers based on platform
+    const imgHandlers = isMobile ? touch.handlers : desktop.handlers;
+
+    return {
+        position,
+        imgHandlers,
+        setImageSize,
+        setContainerSize,
+        resetZoom,
+        imgStyles: {
+            transform,
+            cursor,
+            transition,
+        },
+    };
+}