View Magnifier

1'use client';
2 
3import { cn } from '@/lib/utils';
4import { animate, motion, useMotionValue, useTransform } from 'motion/react';
5import type React from 'react';
6import { useCallback, useEffect, useRef, useState } from 'react';
7 
8interface ViewMagnifierProps {
9  children: React.ReactNode;
10  className?: string;
11  maxScale?: number;
12  onScaleChange?: (isActive: boolean) => void;
13  onMaxScaleReached?: (isAtMax: boolean) => void;
14}
15 
16const ViewMagnifier: React.FC<ViewMagnifierProps> = ({
17  className,
18  children,
19  maxScale = 1.8,
20  onScaleChange,
21  onMaxScaleReached,
22  ...props
23}) => {
24  const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
25  const [zoomLevel, setZoomLevel] = useState<number>(100);
26  const [isAtMaxScale, setIsAtMaxScale] = useState<boolean>(false);
27  const containerRef = useRef<HTMLDivElement>(null);
28  const startX = useRef<number>(0);
29  const initialScale = useRef<number>(1);
30  const scale = useMotionValue(1);
31  const opacity = useTransform(scale, [1, maxScale], [0, 1]);
32  const containerScale = useTransform(scale, [1, maxScale], [1, 1.6]);
33 
34  // Monitor scale changes for max scale callback
35  useEffect(() => {
36    const unsubscribe = scale.on('change', (latestScale) => {
37      const newIsAtMaxScale = Math.abs(latestScale - maxScale) < 0.01;
38      if (newIsAtMaxScale !== isAtMaxScale) {
39        setIsAtMaxScale(newIsAtMaxScale);
40        onMaxScaleReached?.(newIsAtMaxScale);
41      }
42    });
43 
44    return () => unsubscribe();
45  }, [scale, maxScale, isAtMaxScale, onMaxScaleReached]);
46 
47  const handleZoomAnimation = useCallback(
48    (targetScale: number) => {
49      animate(scale, targetScale, {
50        type: 'spring',
51        stiffness: 400,
52        damping: 30,
53        onUpdate: (latest) => setZoomLevel(Math.round(latest * 100)),
54      });
55    },
56    [scale]
57  );
58 
59  const handlePointerDown = useCallback(
60    (e: React.PointerEvent<HTMLButtonElement>): void => {
61      setIsMouseDown(true);
62      startX.current = e.clientX;
63      initialScale.current = scale.get();
64      e.currentTarget.setPointerCapture(e.pointerId);
65      onScaleChange?.(true);
66    },
67    [scale, onScaleChange]
68  );
69 
70  const handlePointerUp = useCallback(
71    (e: React.PointerEvent<HTMLButtonElement>): void => {
72      if (isMouseDown) {
73        setIsMouseDown(false);
74        handleZoomAnimation(1);
75        e.currentTarget.releasePointerCapture(e.pointerId);
76        onScaleChange?.(false);
77      }
78    },
79    [isMouseDown, handleZoomAnimation, onScaleChange]
80  );
81 
82// … truncated