@mmmmzxe/react-360-viewer 0.1.13 → 0.1.14

package/src/helpers/computeViewerImageLayout.test.ts

@@ -1,48 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import {
-    computeHotspotPositionFromClick,
-    computeHotspotScreenPosition,
-    computeViewerImageLayout,
-} from './computeViewerImageLayout';
-
-describe('computeViewerImageLayout', () => {
-    const layout = computeViewerImageLayout({
-        containerWidth: 800,
-        containerHeight: 500,
-        imageWidth: 1600,
-        imageHeight: 900,
-    });
-
-    it('letterboxes wide images', () => {
-        expect(layout.drawWidth).toBe(800);
-        expect(layout.drawHeight).toBeCloseTo(450);
-        expect(layout.offsetY).toBeCloseTo(25);
-    });
-
-    it('maps stored hotspot coordinates to screen space', () => {
-        const screen = computeHotspotScreenPosition(50, 50, layout, 1);
-        expect(screen.leftPercent).toBeCloseTo(50, 1);
-        expect(screen.topPercent).toBeCloseTo(50, 1);
-    });
-
-    it('derives hotspot coordinates from click position', () => {
-        const rect = {
-            left: 0,
-            top: 0,
-            width: 800,
-            height: 500,
-            right: 800,
-            bottom: 500,
-            x: 0,
-            y: 0,
-            toJSON: () => ({}),
-        } as DOMRect;
-
-        const position = computeHotspotPositionFromClick(400, 250, rect, layout, 1);
-        expect(position.positionX).toBeGreaterThan(0);
-        expect(position.positionY).toBeGreaterThan(0);
-        expect(position.positionX).toBeLessThanOrEqual(100);
-        expect(position.positionY).toBeLessThanOrEqual(100);
-    });
-});

package/src/helpers/computeViewerImageLayout.ts

@@ -1,114 +0,0 @@
-export type ViewerImageLayout = {
-    width: number;
-    height: number;
-    centerX: number;
-    centerY: number;
-    drawWidth: number;
-    drawHeight: number;
-    offsetX: number;
-    offsetY: number;
-};
-
-export type PanOffset = {
-    panX: number;
-    panY: number;
-};
-
-type ComputeViewerImageLayoutParams = {
-    containerWidth: number;
-    containerHeight: number;
-    imageWidth: number;
-    imageHeight: number;
-    pan?: PanOffset;
-};
-
-export function computeViewerImageLayout({
-    containerWidth,
-    containerHeight,
-    imageWidth,
-    imageHeight,
-    pan = { panX: 0, panY: 0 },
-}: ComputeViewerImageLayoutParams): ViewerImageLayout {
-    const imgAspect = imageWidth / imageHeight;
-    const containerAspect = containerWidth / containerHeight;
-
-    let drawWidth: number;
-    let drawHeight: number;
-
-    if (imgAspect > containerAspect) {
-        drawWidth = containerWidth;
-        drawHeight = containerWidth / imgAspect;
-    } else {
-        drawHeight = containerHeight;
-        drawWidth = containerHeight * imgAspect;
-    }
-
-    const offsetX = (containerWidth - drawWidth) / 2 + pan.panX;
-    const offsetY = (containerHeight - drawHeight) / 2 + pan.panY;
-
-    return {
-        width: containerWidth,
-        height: containerHeight,
-        centerX: containerWidth / 2,
-        centerY: containerHeight / 2,
-        drawWidth,
-        drawHeight,
-        offsetX,
-        offsetY,
-    };
-}
-
-export function computeHotspotScreenPosition(
-    hotspotX: number,
-    hotspotY: number,
-    layout: ViewerImageLayout,
-    zoom: number
-): { leftPercent: number; topPercent: number } {
-    const baseOffsetX = (layout.width - layout.drawWidth) / 2;
-    const baseOffsetY = (layout.height - layout.drawHeight) / 2;
-
-    const containerX = (hotspotX / 100) * layout.width;
-    const containerY = (hotspotY / 100) * layout.height;
-
-    const imageLocalX = (containerX - baseOffsetX) / layout.drawWidth;
-    const imageLocalY = (containerY - baseOffsetY) / layout.drawHeight;
-
-    const imagePointX = layout.offsetX + imageLocalX * layout.drawWidth;
-    const imagePointY = layout.offsetY + imageLocalY * layout.drawHeight;
-
-    const screenX = layout.centerX + zoom * (imagePointX - layout.centerX);
-    const screenY = layout.centerY + zoom * (imagePointY - layout.centerY);
-
-    return {
-        leftPercent: (screenX / layout.width) * 100,
-        topPercent: (screenY / layout.height) * 100,
-    };
-}
-
-export function computeHotspotPositionFromClick(
-    clientX: number,
-    clientY: number,
-    containerRect: DOMRect,
-    layout: ViewerImageLayout,
-    zoom: number
-): { positionX: number; positionY: number } {
-    const clickX = clientX - containerRect.left;
-    const clickY = clientY - containerRect.top;
-
-    const unzoomedX = layout.centerX + (clickX - layout.centerX) / zoom;
-    const unzoomedY = layout.centerY + (clickY - layout.centerY) / zoom;
-
-    const baseOffsetX = (layout.width - layout.drawWidth) / 2;
-    const baseOffsetY = (layout.height - layout.drawHeight) / 2;
-
-    const imageLocalX = Math.min(1, Math.max(0, (unzoomedX - layout.offsetX) / layout.drawWidth));
-    const imageLocalY = Math.min(1, Math.max(0, (unzoomedY - layout.offsetY) / layout.drawHeight));
-
-    const storedX = baseOffsetX + imageLocalX * layout.drawWidth;
-    const storedY = baseOffsetY + imageLocalY * layout.drawHeight;
-
-    return {
-        positionX: Math.min(100, Math.max(0, (storedX / layout.width) * 100)),
-        positionY: Math.min(100, Math.max(0, (storedY / layout.height) * 100)),
-    };
-}

package/src/helpers/computeViewerPanOffset.ts

@@ -1,18 +0,0 @@
-import type { PanOffset } from './computeViewerImageLayout';
-
-type PanStart = {
-    pointerX: number;
-    pointerY: number;
-    panX: number;
-    panY: number;
-};
-
-export function computeViewerPanOffset(panStart: PanStart, clientX: number, clientY: number): PanOffset {
-    const deltaX = clientX - panStart.pointerX;
-    const deltaY = clientY - panStart.pointerY;
-
-    return {
-        panX: panStart.panX + deltaX,
-        panY: panStart.panY + deltaY,
-    };
-}

package/src/helpers/markerHelpers.test.ts

@@ -1,38 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { hotspotToViewer360Marker, toViewer360Hotspots } from './markerHelpers';
-
-describe('markerHelpers', () => {
-    it('maps hotspot data to marker content', () => {
-        const marker = hotspotToViewer360Marker({
-            id: '1',
-            frameIndex: 0,
-            positionX: 40,
-            positionY: 50,
-            data: { id: '1', title: 'Scratch', description: 'Front bumper' },
-        });
-
-        expect(marker).toEqual({ id: '1', title: 'Scratch', description: 'Front bumper' });
-    });
-
-    it('falls back to hotspot id when data is missing', () => {
-        const marker = hotspotToViewer360Marker({
-            id: 'marker-2',
-            frameIndex: 1,
-            positionX: 10,
-            positionY: 20,
-        });
-
-        expect(marker).toEqual({ id: 'marker-2', title: 'marker-2' });
-    });
-
-    it('builds hotspot array from marker records', () => {
-        const hotspots = toViewer360Hotspots([
-            { id: 'a', frameIndex: 0, positionX: 12, positionY: 34, title: 'Dent' },
-        ]);
-
-        expect(hotspots).toHaveLength(1);
-        expect(hotspots[0]?.frameIndex).toBe(0);
-        expect(hotspots[0]?.positionX).toBe(12);
-    });
-});

package/src/helpers/markerHelpers.ts

@@ -1,33 +0,0 @@
-import type { Viewer360Hotspot, Viewer360Marker } from '../types';
-
-export function hotspotToViewer360Marker<TData>(hotspot: Viewer360Hotspot<TData>): Viewer360Marker {
-    const data = hotspot.data;
-
-    if (data && typeof data === 'object' && 'title' in data && typeof (data as { title?: unknown }).title === 'string') {
-        const marker = data as unknown as Viewer360Marker;
-
-        return {
-            id: marker.id ?? hotspot.id,
-            title: marker.title,
-            description: marker.description,
-        };
-    }
-
-    return {
-        id: hotspot.id,
-        title: hotspot.id,
-    };
-}
-
-export function toViewer360Hotspots<TData extends Viewer360Marker>(
-    markers: Array<Viewer360Marker & { frameIndex: number; positionX: number; positionY: number }>,
-    mapData?: (marker: Viewer360Marker & { frameIndex: number; positionX: number; positionY: number }) => TData
-): Viewer360Hotspot<TData>[] {
-    return markers.map((marker) => ({
-        id: marker.id,
-        frameIndex: marker.frameIndex,
-        positionX: marker.positionX,
-        positionY: marker.positionY,
-        data: mapData ? mapData(marker) : (marker as unknown as TData),
-    }));
-}

package/src/helpers/viewer360PropsHelpers.ts

@@ -1,46 +0,0 @@
-import type { CSSProperties } from 'react';
-
-import { defaultViewer360Labels } from '../constants/viewer360Labels';
-import { viewer360ClassNames } from '../constants/viewer360ClassNames';
-import type { Viewer360ClassNames, Viewer360Labels, Viewer360Theme } from '../types';
-import { cn } from '@/components/utils';
-
-export function mergeViewer360Labels(labels?: Viewer360Labels): Required<Viewer360Labels> {
-    return {
-        loading: labels?.loading ?? defaultViewer360Labels.loading,
-        dragHint: labels?.dragHint ?? defaultViewer360Labels.dragHint,
-        frameIndicator: labels?.frameIndicator ?? defaultViewer360Labels.frameIndicator,
-        zoom: labels?.zoom ?? defaultViewer360Labels.zoom,
-        hotspotModeActive: labels?.hotspotModeActive ?? defaultViewer360Labels.hotspotModeActive,
-        addHotspot: labels?.addHotspot ?? defaultViewer360Labels.addHotspot,
-        zoomIn: labels?.zoomIn ?? defaultViewer360Labels.zoomIn,
-        zoomOut: labels?.zoomOut ?? defaultViewer360Labels.zoomOut,
-        resetView: labels?.resetView ?? defaultViewer360Labels.resetView,
-        deleteMarker: labels?.deleteMarker ?? defaultViewer360Labels.deleteMarker,
-    };
-}
-
-export function mergeViewer360ClassNames(classNames?: Viewer360ClassNames): Required<Viewer360ClassNames> {
-    return {
-        root: cn(viewer360ClassNames.root, classNames?.root),
-        viewport: cn(viewer360ClassNames.viewport, classNames?.viewport),
-        canvas: cn(viewer360ClassNames.canvas, classNames?.canvas),
-        overlay: cn(viewer360ClassNames.overlay, classNames?.overlay),
-        loading: cn(viewer360ClassNames.loading, classNames?.loading),
-        loadingText: cn(viewer360ClassNames.loadingText, classNames?.loadingText),
-        frameIndicator: cn(viewer360ClassNames.frameIndicator, classNames?.frameIndicator),
-        hotspotModeBanner: cn(viewer360ClassNames.hotspotModeBanner, classNames?.hotspotModeBanner),
-        toolbar: cn(viewer360ClassNames.toolbar, classNames?.toolbar),
-        dragHint: cn(viewer360ClassNames.dragHint, classNames?.dragHint),
-        controls: cn(viewer360ClassNames.controls, classNames?.controls),
-        controlButton: cn(viewer360ClassNames.controlButton, classNames?.controlButton),
-        controlButtonActive: cn(viewer360ClassNames.controlButtonActive, classNames?.controlButtonActive),
-        controlButtonDisabled: cn(viewer360ClassNames.controlButtonDisabled, classNames?.controlButtonDisabled),
-        zoomDisplay: cn(viewer360ClassNames.zoomDisplay, classNames?.zoomDisplay),
-        divider: cn(viewer360ClassNames.divider, classNames?.divider),
-    };
-}
-
-export function buildViewer360ThemeStyle(theme?: Viewer360Theme): CSSProperties {
-    return theme ? (theme as CSSProperties) : {};
-}

package/src/helpers/viewerHelpers.ts

@@ -1,74 +0,0 @@
-import type { Viewer360Frame } from '../types';
-
-import { computeViewerImageLayout, type PanOffset } from './computeViewerImageLayout';
-
-type DrawFrameOnCanvasParams = {
-    canvas: HTMLCanvasElement;
-    container: HTMLDivElement;
-    image: HTMLImageElement;
-    zoom: number;
-    pan: PanOffset;
-};
-
-export function drawFrameOnCanvas({ canvas, container, image, zoom, pan }: DrawFrameOnCanvasParams): void {
-    if (!image.complete || !image.naturalWidth) return;
-
-    const rect = container.getBoundingClientRect();
-    const dpr = window.devicePixelRatio || 1;
-
-    canvas.width = rect.width * dpr;
-    canvas.height = rect.height * dpr;
-    canvas.style.width = `${rect.width}px`;
-    canvas.style.height = `${rect.height}px`;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    ctx.clearRect(0, 0, rect.width, rect.height);
-
-    const layout = computeViewerImageLayout({
-        containerWidth: rect.width,
-        containerHeight: rect.height,
-        imageWidth: image.naturalWidth,
-        imageHeight: image.naturalHeight,
-        pan,
-    });
-
-    ctx.save();
-    ctx.translate(layout.centerX, layout.centerY);
-    ctx.scale(zoom, zoom);
-    ctx.translate(-layout.centerX, -layout.centerY);
-    ctx.drawImage(image, layout.offsetX, layout.offsetY, layout.drawWidth, layout.drawHeight);
-    ctx.restore();
-}
-
-export function getFramesSignature(frames: Viewer360Frame[]): string {
-    return frames.map((frame) => frame.id).join('-');
-}
-
-export function preloadFrameImage(frame: Viewer360Frame): Promise<HTMLImageElement> {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = (): void => resolve(img);
-        img.onerror = (): void => reject(new Error(`Failed to load frame: ${frame.src}`));
-        img.src = frame.src;
-    });
-}
-
-export async function preloadViewerFrames(frames: Viewer360Frame[]): Promise<HTMLImageElement[]> {
-    const results = await Promise.allSettled(frames.map(preloadFrameImage));
-
-    return results.map((result) => (result.status === 'fulfilled' ? result.value : new Image()));
-}
-
-export function hasLoadedViewerFrame(images: HTMLImageElement[]): boolean {
-    return images.some((image) => image.complete && image.naturalWidth > 0);
-}
-
-export function filterHotspotsByFrame<TData>(
-    hotspots: Array<{ frameIndex: number; data?: TData }>,
-    frameIndex: number
-): Array<{ frameIndex: number; data?: TData }> {
-    return hotspots.filter((hotspot) => hotspot.frameIndex === frameIndex);
-}

package/src/hooks/useViewer360.ts

@@ -1,306 +0,0 @@
-import type { PointerEvent as ReactPointerEvent, RefObject, WheelEvent as ReactWheelEvent } from 'react';
-import { useEffect, useMemo, useRef, useState } from 'react';
-
-import {
-    applyWheelZoom,
-    getViewerCursorClass,
-    isResetDisabled,
-    resolveViewer360Config,
-    stepZoomIn,
-    stepZoomOut,
-} from '../helpers/adjustViewerZoom';
-import { computeDragFrameIndex } from '../helpers/computeDragFrameIndex';
-import {
-    computeHotspotPositionFromClick,
-    computeHotspotScreenPosition,
-    computeViewerImageLayout,
-    type ViewerImageLayout,
-} from '../helpers/computeViewerImageLayout';
-import { computeViewerPanOffset } from '../helpers/computeViewerPanOffset';
-import {
-    drawFrameOnCanvas,
-    filterHotspotsByFrame,
-    getFramesSignature,
-    hasLoadedViewerFrame,
-    preloadViewerFrames,
-} from '../helpers/viewerHelpers';
-import type {
-    Viewer360Config,
-    Viewer360Frame,
-    Viewer360Hotspot,
-    Viewer360HotspotPosition,
-    Viewer360PanOffset,
-} from '../types';
-
-type UseViewer360Params<TData> = {
-    frames: Viewer360Frame[];
-    currentFrameIndex: number;
-    onFrameChange: (index: number) => void;
-    hotspots?: Viewer360Hotspot<TData>[];
-    config?: Viewer360Config;
-    hotspotMode?: boolean;
-    onHotspotAdd?: (position: Viewer360HotspotPosition) => void;
-};
-
-type UseViewer360Return<TData> = {
-    canvasRef: RefObject<HTMLCanvasElement | null>;
-    containerRef: RefObject<HTMLDivElement | null>;
-    currentFrame: Viewer360Frame | undefined;
-    currentFrameHotspots: Viewer360Hotspot<TData>[];
-    imagesLoaded: boolean;
-    isHotspotMode: boolean;
-    isResetDisabled: boolean;
-    maxZoom: number;
-    minZoom: number;
-    viewerCursorClass: string;
-    zoom: number;
-    getCurrentImageLayout: () => ViewerImageLayout | null;
-    getHotspotScreenPosition: (hotspot: Viewer360Hotspot<TData>) => { leftPercent: number; topPercent: number };
-    handleCanvasClick: (event: React.MouseEvent<HTMLDivElement>) => void;
-    handlePointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
-    handlePointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
-    handlePointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
-    handleResetView: () => void;
-    handleWheel: (event: ReactWheelEvent<HTMLDivElement>) => void;
-    handleZoomIn: () => void;
-    handleZoomOut: () => void;
-};
-
-export function useViewer360<TData = unknown>({
-    frames,
-    hotspots = [],
-    currentFrameIndex,
-    onFrameChange,
-    config,
-    hotspotMode: hotspotModeProp = false,
-    onHotspotAdd,
-}: UseViewer360Params<TData>): UseViewer360Return<TData> {
-    const resolvedConfig = useMemo(() => resolveViewer360Config(config), [config]);
-    const { minZoom, maxZoom } = resolvedConfig;
-
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const imagesRef = useRef<HTMLImageElement[]>([]);
-    const dragStartRef = useRef<{ pointerX: number; frameIndex: number } | null>(null);
-    const panStartRef = useRef<{ pointerX: number; pointerY: number; panX: number; panY: number } | null>(null);
-
-    const framesSignature = getFramesSignature(frames);
-    const [loadedSignature, setLoadedSignature] = useState<string | null>(null);
-    const [zoom, setZoom] = useState<number>(minZoom);
-    const [pan, setPan] = useState<Viewer360PanOffset>({ panX: 0, panY: 0 });
-    const [isDragging, setIsDragging] = useState(false);
-
-    const isHotspotMode = hotspotModeProp;
-    const imagesLoaded = loadedSignature === framesSignature;
-    const currentFrameHotspots = filterHotspotsByFrame(hotspots, currentFrameIndex) as Viewer360Hotspot<TData>[];
-    const currentFrame = frames[currentFrameIndex];
-    const viewerCursorClass = getViewerCursorClass(isHotspotMode, zoom, isDragging, minZoom);
-    const resetDisabled = isResetDisabled(zoom, pan, resolvedConfig);
-
-    useEffect(() => {
-        let cancelled = false;
-        imagesRef.current = [];
-
-        async function loadFrames(): Promise<void> {
-            const loadedImages = await preloadViewerFrames(frames);
-
-            if (!cancelled && hasLoadedViewerFrame(loadedImages)) {
-                imagesRef.current = loadedImages;
-                setLoadedSignature(framesSignature);
-            }
-        }
-
-        void loadFrames();
-
-        return (): void => {
-            cancelled = true;
-        };
-    }, [frames, framesSignature]);
-
-    useEffect(() => {
-        if (!imagesLoaded) return;
-
-        function renderFrame(): void {
-            const canvas = canvasRef.current;
-            const container = containerRef.current;
-            const img = imagesRef.current[currentFrameIndex];
-
-            if (!canvas || !container) return;
-
-            drawFrameOnCanvas({ canvas, container, image: img, zoom, pan });
-        }
-
-        renderFrame();
-        window.addEventListener('resize', renderFrame);
-
-        return (): void => window.removeEventListener('resize', renderFrame);
-    }, [imagesLoaded, currentFrameIndex, zoom, pan]);
-
-    useEffect(() => {
-        if (!resolvedConfig.autoRotate || frames.length <= 1 || isDragging || isHotspotMode || zoom > minZoom) {
-            return;
-        }
-
-        const direction = resolvedConfig.autoRotateDirection === 'backward' ? -1 : 1;
-        const interval = window.setInterval(() => {
-            onFrameChange((currentFrameIndex + direction + frames.length) % frames.length);
-        }, resolvedConfig.autoRotateIntervalMs);
-
-        return (): void => window.clearInterval(interval);
-    }, [
-        resolvedConfig.autoRotate,
-        resolvedConfig.autoRotateDirection,
-        resolvedConfig.autoRotateIntervalMs,
-        frames.length,
-        currentFrameIndex,
-        isDragging,
-        isHotspotMode,
-        zoom,
-        minZoom,
-        onFrameChange,
-    ]);
-
-    function getCurrentImageLayout(): ViewerImageLayout | null {
-        const container = containerRef.current;
-        const image = imagesRef.current[currentFrameIndex];
-
-        if (!container || !image || !image.complete || !image.naturalWidth) return null;
-
-        const rect = container.getBoundingClientRect();
-
-        return computeViewerImageLayout({
-            containerWidth: rect.width,
-            containerHeight: rect.height,
-            imageWidth: image.naturalWidth,
-            imageHeight: image.naturalHeight,
-            pan,
-        });
-    }
-
-    function getHotspotScreenPosition(hotspot: Viewer360Hotspot<TData>): { leftPercent: number; topPercent: number } {
-        const layout = getCurrentImageLayout();
-
-        if (!layout) {
-            return { leftPercent: hotspot.positionX, topPercent: hotspot.positionY };
-        }
-
-        return computeHotspotScreenPosition(hotspot.positionX, hotspot.positionY, layout, zoom);
-    }
-
-    function handlePointerDown(event: ReactPointerEvent<HTMLDivElement>): void {
-        if (isHotspotMode) return;
-
-        event.currentTarget.setPointerCapture(event.pointerId);
-
-        if (zoom > minZoom) {
-            panStartRef.current = { pointerX: event.clientX, pointerY: event.clientY, panX: pan.panX, panY: pan.panY };
-        } else {
-            dragStartRef.current = { pointerX: event.clientX, frameIndex: currentFrameIndex };
-        }
-
-        setIsDragging(true);
-    }
-
-    function handlePointerMove(event: ReactPointerEvent<HTMLDivElement>): void {
-        if (!isDragging) return;
-
-        if (panStartRef.current && zoom > minZoom) {
-            setPan(computeViewerPanOffset(panStartRef.current, event.clientX, event.clientY));
-            return;
-        }
-
-        if (dragStartRef.current && zoom <= minZoom) {
-            const nextFrameIndex = computeDragFrameIndex(
-                dragStartRef.current,
-                event.clientX,
-                frames.length,
-                resolvedConfig.dragSensitivity
-            );
-
-            if (nextFrameIndex !== null) {
-                onFrameChange(nextFrameIndex);
-            }
-        }
-    }
-
-    function handlePointerUp(event: ReactPointerEvent<HTMLDivElement>): void {
-        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-            event.currentTarget.releasePointerCapture(event.pointerId);
-        }
-
-        dragStartRef.current = null;
-        panStartRef.current = null;
-        setIsDragging(false);
-    }
-
-    function handleWheel(event: ReactWheelEvent<HTMLDivElement>): void {
-        event.preventDefault();
-        const { zoom: nextZoom, pan: nextPan } = applyWheelZoom(zoom, event.deltaY, pan, resolvedConfig);
-        setZoom(nextZoom);
-        setPan(nextPan);
-    }
-
-    function handleCanvasClick(event: React.MouseEvent<HTMLDivElement>): void {
-        if (!isHotspotMode || isDragging || !onHotspotAdd) return;
-
-        const frame = frames[currentFrameIndex];
-        if (!frame) return;
-
-        const layout = getCurrentImageLayout();
-        if (!layout) return;
-
-        const { positionX, positionY } = computeHotspotPositionFromClick(
-            event.clientX,
-            event.clientY,
-            event.currentTarget.getBoundingClientRect(),
-            layout,
-            zoom
-        );
-
-        onHotspotAdd({
-            frameIndex: currentFrameIndex,
-            frameId: frame.id,
-            positionX,
-            positionY,
-        });
-    }
-
-    function handleResetView(): void {
-        setZoom(minZoom);
-        setPan({ panX: 0, panY: 0 });
-    }
-
-    function handleZoomIn(): void {
-        setZoom(stepZoomIn(zoom, resolvedConfig));
-    }
-
-    function handleZoomOut(): void {
-        const { zoom: nextZoom, pan: nextPan } = stepZoomOut(zoom, pan, resolvedConfig);
-        setZoom(nextZoom);
-        setPan(nextPan);
-    }
-
-    return {
-        canvasRef,
-        containerRef,
-        currentFrame,
-        currentFrameHotspots,
-        imagesLoaded,
-        isHotspotMode,
-        isResetDisabled: resetDisabled,
-        maxZoom,
-        minZoom,
-        viewerCursorClass,
-        zoom,
-        getCurrentImageLayout,
-        getHotspotScreenPosition,
-        handleCanvasClick,
-        handlePointerDown,
-        handlePointerMove,
-        handlePointerUp,
-        handleResetView,
-        handleWheel,
-        handleZoomIn,
-        handleZoomOut,
-    };
-}