@mmmmzxe/react-360-viewer 0.1.13 → 0.1.14

package/src/feature/Viewer360.tsx

@@ -1,223 +0,0 @@
-import type { JSX } from 'react';
-import { useEffect, useMemo, useState } from 'react';
-
-import { buildViewer360ThemeStyle, mergeViewer360ClassNames, mergeViewer360Labels } from '../helpers/viewer360PropsHelpers';
-import { useViewer360 } from '../hooks/useViewer360';
-import type { Viewer360OverlayRenderProps, Viewer360Props, Viewer360ToolbarRenderProps } from '../types';
-import { Card } from '@/components/ui/Card';
-import { cn } from '@/components/utils';
-
-import { Viewer360AddModeBanner } from './Viewer360AddModeBanner';
-import { Viewer360FrameIndicator } from './Viewer360FrameIndicator';
-import { Viewer360HotspotOverlay } from './Viewer360HotspotOverlay';
-import { Viewer360LoadingOverlay } from './Viewer360LoadingOverlay';
-import { Viewer360Toolbar } from './Viewer360Toolbar';
-
-export function Viewer360<TData = unknown>({
-    frames,
-    currentFrameIndex: controlledFrameIndex,
-    defaultFrameIndex = 0,
-    onFrameChange,
-    config,
-    className,
-    classNames,
-    style,
-    theme,
-    labels,
-    aspectRatio = '16 / 10',
-    showZoomControls = true,
-    showResetControl = true,
-    showFrameIndicator = true,
-    showDragHint = true,
-    showHotspotModeControl = false,
-    hotspotPin,
-    hotspots = [],
-    renderHotspot,
-    renderLoading,
-    renderFrameIndicator,
-    renderHotspotModeBanner,
-    renderToolbar,
-    onHotspotClick,
-    hotspotMode: controlledHotspotMode,
-    defaultHotspotMode = false,
-    onHotspotModeChange,
-    onHotspotAdd,
-    children,
-}: Viewer360Props<TData>): JSX.Element {
-    // ----------------------------------------------------------------------------------------------------
-    // MARK: States & Constants
-    // ----------------------------------------------------------------------------------------------------
-    const mergedLabels = useMemo(() => mergeViewer360Labels(labels), [labels]);
-    const mergedClassNames = useMemo(() => mergeViewer360ClassNames(classNames), [classNames]);
-    const themeStyle = useMemo(() => buildViewer360ThemeStyle(theme), [theme]);
-
-    const [internalFrameIndex, setInternalFrameIndex] = useState(defaultFrameIndex);
-    const [internalHotspotMode, setInternalHotspotMode] = useState(defaultHotspotMode);
-
-    const currentFrameIndex = controlledFrameIndex ?? internalFrameIndex;
-    const hotspotMode = controlledHotspotMode ?? internalHotspotMode;
-
-    // ----------------------------------------------------------------------------------------------------
-    // MARK: Functions
-    // ----------------------------------------------------------------------------------------------------
-    function handleFrameChange(index: number): void {
-        if (controlledFrameIndex === undefined) {
-            setInternalFrameIndex(index);
-        }
-
-        onFrameChange?.(index);
-    }
-
-    function handleHotspotModeChange(active: boolean): void {
-        if (controlledHotspotMode === undefined) {
-            setInternalHotspotMode(active);
-        }
-
-        onHotspotModeChange?.(active);
-    }
-
-    const {
-        canvasRef,
-        containerRef,
-        currentFrame,
-        currentFrameHotspots,
-        imagesLoaded,
-        isHotspotMode,
-        isResetDisabled,
-        maxZoom,
-        minZoom,
-        viewerCursorClass,
-        zoom,
-        getHotspotScreenPosition,
-        handleCanvasClick,
-        handlePointerDown,
-        handlePointerMove,
-        handlePointerUp,
-        handleWheel,
-        handleResetView,
-        handleZoomIn,
-        handleZoomOut,
-    } = useViewer360<TData>({
-        frames,
-        hotspots,
-        currentFrameIndex,
-        onFrameChange: handleFrameChange,
-        config,
-        hotspotMode,
-        onHotspotAdd,
-    });
-
-    useEffect(() => {
-        if (controlledHotspotMode === undefined) return;
-        if (controlledHotspotMode !== internalHotspotMode) {
-            setInternalHotspotMode(controlledHotspotMode);
-        }
-    }, [controlledHotspotMode, internalHotspotMode]);
-
-    const frameLabel = currentFrame?.label ?? frames[currentFrameIndex]?.label;
-    const overlayProps: Viewer360OverlayRenderProps = {
-        currentFrameIndex,
-        frameCount: frames.length,
-        frameLabel,
-        isHotspotMode,
-        labels: mergedLabels,
-        frameIndicatorClassName: mergedClassNames.frameIndicator,
-    };
-    const toolbarProps: Viewer360ToolbarRenderProps = {
-        zoom,
-        minZoom,
-        maxZoom,
-        isResetDisabled,
-        isHotspotMode,
-        showHotspotModeControl,
-        showZoomControls,
-        showResetControl,
-        showDragHint,
-        labels: mergedLabels,
-        onZoomIn: handleZoomIn,
-        onZoomOut: handleZoomOut,
-        onResetView: handleResetView,
-        onHotspotModeChange: handleHotspotModeChange,
-    };
-    const showDefaultToolbar = showZoomControls || showResetControl || showHotspotModeControl || showDragHint;
-
-    // ----------------------------------------------------------------------------------------------------
-    // MARK: Main Component UI
-    // ----------------------------------------------------------------------------------------------------
-    return (
-        <Card
-            data-viewer-360=""
-            className={cn(mergedClassNames.root, 'gap-0 py-0 shadow-none ring-0', className)}
-            style={{ ...themeStyle, ...style }}
-        >
-            <div
-                ref={containerRef}
-                className={cn(mergedClassNames.viewport, viewerCursorClass)}
-                style={{ aspectRatio }}
-                onPointerDown={handlePointerDown}
-                onPointerMove={handlePointerMove}
-                onPointerUp={handlePointerUp}
-                onPointerLeave={handlePointerUp}
-                onWheel={handleWheel}
-                onClick={handleCanvasClick}
-            >
-                <canvas ref={canvasRef} className={mergedClassNames.canvas} />
-
-                <div className={mergedClassNames.overlay}>
-                    {currentFrameHotspots.map((hotspot) => {
-                        const position = getHotspotScreenPosition(hotspot);
-
-                        return (
-                            <Viewer360HotspotOverlay
-                                key={hotspot.id}
-                                hotspot={hotspot}
-                                leftPercent={position.leftPercent}
-                                topPercent={position.topPercent}
-                                hotspotPin={hotspotPin}
-                                renderHotspot={renderHotspot}
-                                onHotspotClick={onHotspotClick}
-                            />
-                        );
-                    })}
-                    {children}
-                </div>
-
-                {!imagesLoaded &&
-                    (renderLoading ? (
-                        renderLoading()
-                    ) : (
-                        <Viewer360LoadingOverlay
-                            className={mergedClassNames.loading}
-                            textClassName={mergedClassNames.loadingText}
-                            label={mergedLabels.loading}
-                        />
-                    ))}
-
-                {showFrameIndicator &&
-                    frames.length > 0 &&
-                    (renderFrameIndicator ? (
-                        renderFrameIndicator(overlayProps)
-                    ) : (
-                        <Viewer360FrameIndicator
-                            className={mergedClassNames.frameIndicator}
-                            label={mergedLabels.frameIndicator({
-                                current: currentFrameIndex + 1,
-                                total: frames.length,
-                                label: frameLabel,
-                            })}
-                        />
-                    ))}
-
-                {isHotspotMode &&
-                    onHotspotAdd &&
-                    (renderHotspotModeBanner ? (
-                        renderHotspotModeBanner({ labels: mergedLabels })
-                    ) : (
-                        <Viewer360AddModeBanner className={mergedClassNames.hotspotModeBanner} label={mergedLabels.hotspotModeActive} />
-                    ))}
-            </div>
-
-            {renderToolbar ? renderToolbar(toolbarProps) : showDefaultToolbar ? <Viewer360Toolbar {...toolbarProps} /> : null}
-        </Card>
-    );
-}

package/src/feature/Viewer360AddModeBanner.tsx

@@ -1,20 +0,0 @@
-import type { JSX } from 'react';
-
-import { Badge } from '@/components/ui/Badge';
-import { cn } from '@/components/utils';
-
-type Viewer360AddModeBannerProps = {
-    className?: string;
-    label: string;
-};
-
-export function Viewer360AddModeBanner({ className, label }: Viewer360AddModeBannerProps): JSX.Element {
-    // ----------------------------------------------------------------------------------------------------
-    // MARK: Main Component UI
-    // ----------------------------------------------------------------------------------------------------
-    return (
-        <Badge variant="outline" className={cn('pointer-events-none', className)}>
-            {label}
-        </Badge>
-    );
-}

package/src/feature/Viewer360FrameIndicator.tsx

@@ -1,20 +0,0 @@
-import type { JSX } from 'react';
-
-import { Badge } from '@/components/ui/Badge';
-import { cn } from '@/components/utils';
-
-type Viewer360FrameIndicatorProps = {
-    className?: string;
-    label: string;
-};
-
-export function Viewer360FrameIndicator({ className, label }: Viewer360FrameIndicatorProps): JSX.Element {
-    // ----------------------------------------------------------------------------------------------------
-    // MARK: Main Component UI
-    // ----------------------------------------------------------------------------------------------------
-    return (
-        <Badge variant="outline" className={cn('pointer-events-none shadow-sm', className)}>
-            {label}
-        </Badge>
-    );
-}

package/src/feature/Viewer360HotspotOverlay.tsx

@@ -1,57 +0,0 @@
-import type { JSX, MouseEvent, ReactNode } from 'react';
-
-import { hotspotToViewer360Marker } from '../helpers/markerHelpers';
-import type { Viewer360Hotspot, Viewer360HotspotPinOptions, Viewer360HotspotRenderProps } from '../types';
-import { Item } from '@/components/ui/Item';
-
-import { Viewer360MarkerPin } from './Viewer360MarkerPin';
-
-type Viewer360HotspotOverlayProps<TData = unknown> = {
-    hotspot: Viewer360Hotspot<TData>;
-    leftPercent: number;
-    topPercent: number;
-    hotspotPin?: Viewer360HotspotPinOptions<TData>;
-    renderHotspot?: (props: Viewer360HotspotRenderProps<TData>) => ReactNode;
-    onHotspotClick?: (hotspot: Viewer360Hotspot<TData>, event: MouseEvent<HTMLDivElement>) => void;
-};
-
-export function Viewer360HotspotOverlay<TData = unknown>({
-    hotspot,
-    leftPercent,
-    topPercent,
-    hotspotPin,
-    renderHotspot,
-    onHotspotClick,
-}: Viewer360HotspotOverlayProps<TData>): JSX.Element {
-    // ----------------------------------------------------------------------------------------------------
-    // MARK: Main Component UI
-    // ----------------------------------------------------------------------------------------------------
-    if (renderHotspot) {
-        return (
-            <Item size="xs" variant="default" className="pointer-events-auto w-auto border-transparent p-0">
-                {renderHotspot({ hotspot, leftPercent, topPercent })}
-            </Item>
-        );
-    }
-
-    const marker = hotspotPin?.getMarker?.(hotspot) ?? hotspotToViewer360Marker(hotspot);
-
-    return (
-        <Viewer360MarkerPin
-            marker={marker}
-            hotspot={hotspot}
-            leftPercent={leftPercent}
-            topPercent={topPercent}
-            onDelete={hotspotPin?.onDelete}
-            isDeletePending={hotspotPin?.deletingMarkerId === hotspot.id}
-            renderTag={hotspotPin?.renderTag}
-            classNames={hotspotPin?.classNames}
-            labels={hotspotPin?.labels}
-            onClick={
-                onHotspotClick
-                    ? (event) => onHotspotClick(hotspot, event as unknown as MouseEvent<HTMLDivElement>)
-                    : undefined
-            }
-        />
-    );
-}

package/src/feature/Viewer360LoadingOverlay.tsx

@@ -1,28 +0,0 @@
-import type { JSX } from 'react';
-
-import { Item } from '@/components/ui/Item';
-import { Label } from '@/components/ui/Label';
-import { Spinner } from '@/components/ui/Spinner';
-import { cn } from '@/components/utils';
-
-type Viewer360LoadingOverlayProps = {
-    className?: string;
-    textClassName?: string;
-    label: string;
-};
-
-export function Viewer360LoadingOverlay({ className, textClassName, label }: Viewer360LoadingOverlayProps): JSX.Element {
-    // ----------------------------------------------------------------------------------------------------
-    // MARK: Main Component UI
-    // ----------------------------------------------------------------------------------------------------
-    return (
-        <Item
-            size="sm"
-            variant="muted"
-            className={cn('pointer-events-none w-auto justify-center border-transparent bg-muted/80', className)}
-        >
-            <Spinner className="size-5 text-muted-foreground" />
-            <Label className={cn('font-normal text-muted-foreground', textClassName)}>{label}</Label>
-        </Item>
-    );
-}

package/src/feature/Viewer360MarkerPin.tsx

@@ -1,105 +0,0 @@
-import type { JSX, MouseEvent } from 'react';
-
-import { Trash2 } from 'lucide-react';
-
-import { defaultViewer360MarkerPinLabels } from '../constants/viewer360MarkerLabels';
-import { viewer360MarkerPinClassNames } from '../constants/viewer360ClassNames';
-import type { Viewer360MarkerPinProps } from '../types';
-import { Button } from '@/components/ui/Button';
-import {
-    Item,
-    ItemActions,
-    ItemContent,
-    ItemDescription,
-    ItemTitle,
-} from '@/components/ui/Item';
-import { cn } from '@/components/utils';
-
-export function Viewer360MarkerPin<TData = unknown>({
-    marker,
-    hotspot,
-    leftPercent,
-    topPercent,
-    onDelete,
-    isDeletePending = false,
-    onClick,
-    renderTag,
-    classNames,
-    labels,
-}: Viewer360MarkerPinProps<TData>): JSX.Element {
-    // ----------------------------------------------------------------------------------------------------
-    // MARK: States & Constants
-    // ----------------------------------------------------------------------------------------------------
-    const deleteLabel = labels?.delete ?? defaultViewer360MarkerPinLabels.delete;
-    const showTooltip = Boolean(marker.title || marker.description || onDelete || renderTag);
-
-    // ----------------------------------------------------------------------------------------------------
-    // MARK: Main Component UI
-    // ----------------------------------------------------------------------------------------------------
-    return (
-        <div
-            className={cn(viewer360MarkerPinClassNames.root, classNames?.root, 'group/marker')}
-            style={{ left: `${leftPercent}%`, top: `${topPercent}%` }}
-        >
-            <div className="relative size-4 shrink-0">
-                <span className={cn(viewer360MarkerPinClassNames.ping, classNames?.ping)} aria-hidden="true" />
-
-                <Button
-                    type="button"
-                    variant="destructive"
-                    size="icon-xs"
-                    className={cn(viewer360MarkerPinClassNames.dot, classNames?.dot, 'hover:bg-destructive')}
-                    aria-label={marker.title}
-                    onClick={onClick}
-                />
-            </div>
-
-            {showTooltip && (
-                <div
-                    className={cn(
-                        viewer360MarkerPinClassNames.tooltip,
-                        classNames?.tooltip,
-                        'pointer-events-none opacity-0 transition-opacity duration-150 group-hover/marker:pointer-events-auto group-hover/marker:opacity-100 group-focus-within/marker:pointer-events-auto group-focus-within/marker:opacity-100'
-                    )}
-                >
-                    <Item
-                        size="sm"
-                        variant="default"
-                        className={cn(viewer360MarkerPinClassNames.tooltipHeader, classNames?.tooltipHeader, 'w-full border-transparent')}
-                    >
-                        <ItemContent className={cn(viewer360MarkerPinClassNames.tooltipBody, classNames?.tooltipBody)}>
-                            <ItemTitle className={cn(viewer360MarkerPinClassNames.tooltipTitle, classNames?.tooltipTitle)}>
-                                {marker.title}
-                            </ItemTitle>
-                            {renderTag && (
-                                <div className="mt-1 flex w-fit items-center">{renderTag({ marker, hotspot })}</div>
-                            )}
-                            {marker.description && (
-                                <ItemDescription className={cn(viewer360MarkerPinClassNames.tooltipDescription, classNames?.tooltipDescription)}>
-                                    {marker.description}
-                                </ItemDescription>
-                            )}
-                        </ItemContent>
-                        {onDelete && (
-                            <ItemActions>
-                                <Button
-                                    variant="ghost"
-                                    size="icon-sm"
-                                    className={classNames?.deleteButton}
-                                    disabled={isDeletePending}
-                                    aria-label={deleteLabel}
-                                    onClick={(event: MouseEvent<HTMLButtonElement>) => {
-                                        event.stopPropagation();
-                                        onDelete(marker.id);
-                                    }}
-                                >
-                                    <Trash2 className="size-4" />
-                                </Button>
-                            </ItemActions>
-                        )}
-                    </Item>
-                </div>
-            )}
-        </div>
-    );
-}

package/src/feature/Viewer360Toolbar.tsx

@@ -1,75 +0,0 @@
-import type { JSX } from 'react';
-
-import { Crosshair, Minus, Plus, RotateCcw, ZoomIn } from 'lucide-react';
-
-import { viewer360ClassNames } from '../constants/viewer360ClassNames';
-import type { Viewer360ToolbarRenderProps } from '../types';
-import { Badge } from '@/components/ui/Badge';
-import { Button } from '@/components/ui/Button';
-import { CardFooter } from '@/components/ui/Card';
-import { Label } from '@/components/ui/Label';
-import { Separator } from '@/components/ui/Separator';
-import { cn } from '@/components/utils';
-
-type Viewer360ToolbarProps = Viewer360ToolbarRenderProps;
-
-export function Viewer360Toolbar({
-    showDragHint,
-    showHotspotModeControl,
-    showZoomControls,
-    showResetControl,
-    labels,
-    isHotspotMode,
-    zoom,
-    minZoom,
-    maxZoom,
-    isResetDisabled,
-    onHotspotModeChange,
-    onZoomIn,
-    onZoomOut,
-    onResetView,
-}: Viewer360ToolbarProps): JSX.Element {
-    // ----------------------------------------------------------------------------------------------------
-    // MARK: Main Component UI
-    // ----------------------------------------------------------------------------------------------------
-    return (
-        <CardFooter className={cn(viewer360ClassNames.toolbar, 'gap-2 border-t px-4 py-3 pt-3')}>
-            {showDragHint && (
-                <Label className={cn(viewer360ClassNames.dragHint, 'font-normal text-muted-foreground')}>{labels.dragHint}</Label>
-            )}
-
-            <div className={viewer360ClassNames.controls}>
-                {showHotspotModeControl && (
-                    <>
-                        <Button variant={isHotspotMode ? 'default' : 'outline'} size="sm" onClick={() => onHotspotModeChange(!isHotspotMode)}>
-                            <Crosshair className="me-1.5 size-4" />
-                            {labels.addHotspot}
-                        </Button>
-                        <Separator orientation="vertical" className={cn(viewer360ClassNames.divider, 'h-6')} />
-                    </>
-                )}
-
-                {showZoomControls && (
-                    <>
-                        <Button variant="outline" size="icon-sm" disabled={zoom <= minZoom} aria-label={labels.zoomOut} onClick={onZoomOut}>
-                            <Minus className="size-4" />
-                        </Button>
-                        <Badge variant="outline" className={cn(viewer360ClassNames.zoomDisplay, 'h-8 gap-1 px-2 py-1')}>
-                            <ZoomIn className="size-3 text-muted-foreground" />
-                            {labels.zoom(Math.round(zoom * 100))}
-                        </Badge>
-                        <Button variant="outline" size="icon-sm" disabled={zoom >= maxZoom} aria-label={labels.zoomIn} onClick={onZoomIn}>
-                            <Plus className="size-4" />
-                        </Button>
-                    </>
-                )}
-
-                {showResetControl && (
-                    <Button variant="outline" size="icon-sm" disabled={isResetDisabled} aria-label={labels.resetView} onClick={onResetView}>
-                        <RotateCcw className="size-4" />
-                    </Button>
-                )}
-            </div>
-        </CardFooter>
-    );
-}

package/src/helpers/adjustViewerZoom.test.ts

@@ -1,29 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { applyWheelZoom, isResetDisabled, resolveViewer360Config, stepZoomIn, stepZoomOut } from './adjustViewerZoom';
-
-describe('adjustViewerZoom', () => {
-    const config = resolveViewer360Config();
-
-    it('clamps wheel zoom within bounds', () => {
-        const result = applyWheelZoom(1, -100, { panX: 0, panY: 0 }, config);
-        expect(result.zoom).toBeGreaterThan(1);
-        expect(result.zoom).toBeLessThanOrEqual(config.maxZoom);
-    });
-
-    it('resets pan when zoom returns to minimum', () => {
-        const result = applyWheelZoom(1.15, 100, { panX: 12, panY: 8 }, config);
-        expect(result.zoom).toBe(config.minZoom);
-        expect(result.pan).toEqual({ panX: 0, panY: 0 });
-    });
-
-    it('steps zoom in and out', () => {
-        expect(stepZoomIn(1, config)).toBeCloseTo(1.15);
-        expect(stepZoomOut(1.15, { panX: 4, panY: 2 }, config).zoom).toBeCloseTo(1);
-    });
-
-    it('detects reset disabled state', () => {
-        expect(isResetDisabled(1, { panX: 0, panY: 0 }, config)).toBe(true);
-        expect(isResetDisabled(1.3, { panX: 0, panY: 0 }, config)).toBe(false);
-    });
-});

package/src/helpers/adjustViewerZoom.ts

@@ -1,64 +0,0 @@
-import type { Viewer360Config } from '../types';
-
-import type { PanOffset } from './computeViewerImageLayout';
-
-type ResolvedViewer360Config = Required<Viewer360Config>;
-
-export function resolveViewer360Config(config?: Viewer360Config): ResolvedViewer360Config {
-    return {
-        minZoom: config?.minZoom ?? 1,
-        maxZoom: config?.maxZoom ?? 3,
-        zoomStep: config?.zoomStep ?? 0.15,
-        dragSensitivity: config?.dragSensitivity ?? 8,
-        autoRotate: config?.autoRotate ?? false,
-        autoRotateIntervalMs: config?.autoRotateIntervalMs ?? 100,
-        autoRotateDirection: config?.autoRotateDirection ?? 'forward',
-    };
-}
-
-export function clampZoom(zoom: number, config: ResolvedViewer360Config): number {
-    return Math.min(config.maxZoom, Math.max(config.minZoom, zoom));
-}
-
-export function applyWheelZoom(
-    currentZoom: number,
-    deltaY: number,
-    currentPan: PanOffset,
-    config: ResolvedViewer360Config
-): { zoom: number; pan: PanOffset } {
-    const delta = deltaY > 0 ? -config.zoomStep : config.zoomStep;
-    const zoom = clampZoom(currentZoom + delta, config);
-
-    return {
-        zoom,
-        pan: zoom === config.minZoom ? { panX: 0, panY: 0 } : currentPan,
-    };
-}
-
-export function stepZoomIn(currentZoom: number, config: ResolvedViewer360Config): number {
-    return clampZoom(currentZoom + config.zoomStep, config);
-}
-
-export function stepZoomOut(
-    currentZoom: number,
-    currentPan: PanOffset,
-    config: ResolvedViewer360Config
-): { zoom: number; pan: PanOffset } {
-    const zoom = clampZoom(currentZoom - config.zoomStep, config);
-
-    return {
-        zoom,
-        pan: zoom === config.minZoom ? { panX: 0, panY: 0 } : currentPan,
-    };
-}
-
-export function isResetDisabled(zoom: number, pan: PanOffset, config: ResolvedViewer360Config): boolean {
-    return zoom === config.minZoom && pan.panX === 0 && pan.panY === 0;
-}
-
-export function getViewerCursorClass(isHotspotMode: boolean, zoom: number, isDragging: boolean, minZoom: number): string {
-    if (isHotspotMode) return 'cursor-crosshair';
-    if (isDragging) return 'cursor-grabbing';
-    if (zoom > minZoom) return 'cursor-grab';
-    return 'cursor-ew-resize';
-}

package/src/helpers/computeDragFrameIndex.test.ts

@@ -1,20 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { clampFrameIndex, computeDragFrameIndex } from './computeDragFrameIndex';
-
-describe('computeDragFrameIndex', () => {
-    it('wraps frame indices', () => {
-        expect(clampFrameIndex(-1, 24)).toBe(23);
-        expect(clampFrameIndex(24, 24)).toBe(0);
-    });
-
-    it('returns null when drag delta is below sensitivity', () => {
-        const result = computeDragFrameIndex({ pointerX: 100, frameIndex: 3 }, 104, 24, 8);
-        expect(result).toBeNull();
-    });
-
-    it('advances frames based on horizontal drag', () => {
-        const result = computeDragFrameIndex({ pointerX: 200, frameIndex: 5 }, 120, 24, 8);
-        expect(result).toBe(15);
-    });
-});

package/src/helpers/computeDragFrameIndex.ts

@@ -1,23 +0,0 @@
-export function clampFrameIndex(index: number, frameCount: number): number {
-    if (frameCount === 0) return 0;
-    return ((index % frameCount) + frameCount) % frameCount;
-}
-
-type DragStart = {
-    pointerX: number;
-    frameIndex: number;
-};
-
-export function computeDragFrameIndex(
-    dragStart: DragStart,
-    clientX: number,
-    frameCount: number,
-    dragSensitivity: number
-): number | null {
-    const deltaX = clientX - dragStart.pointerX;
-    const frameDelta = Math.round(-deltaX / dragSensitivity);
-
-    if (frameDelta === 0) return null;
-
-    return clampFrameIndex(dragStart.frameIndex + frameDelta, frameCount);
-}