@mmmmzxe/react-360-viewer 0.1.12 → 0.1.14

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,
-    };
-}

package/src/index.ts

@@ -1,68 +0,0 @@
-export { Viewer360 } from './feature/Viewer360';
-export { Viewer360AddModeBanner } from './feature/Viewer360AddModeBanner';
-export { Viewer360FrameIndicator } from './feature/Viewer360FrameIndicator';
-export { Viewer360LoadingOverlay } from './feature/Viewer360LoadingOverlay';
-export { Viewer360MarkerPin } from './feature/Viewer360MarkerPin';
-export { Viewer360Toolbar } from './feature/Viewer360Toolbar';
-export { useViewer360 } from './hooks/useViewer360';
-
-export { defaultViewer360Config } from './constants/viewer360Config';
-export { defaultViewer360Labels } from './constants/viewer360Labels';
-export { defaultViewer360MarkerPinLabels } from './constants/viewer360MarkerLabels';
-export {
-    defaultViewer360ClassNames,
-    defaultViewer360MarkerPinClassNames,
-    viewer360ClassNames,
-    viewer360MarkerPinClassNames,
-} from './constants/viewer360ClassNames';
-
-export {
-    applyWheelZoom,
-    clampZoom,
-    getViewerCursorClass,
-    isResetDisabled,
-    resolveViewer360Config,
-    stepZoomIn,
-    stepZoomOut,
-} from './helpers/adjustViewerZoom';
-export { clampFrameIndex, computeDragFrameIndex } from './helpers/computeDragFrameIndex';
-export {
-    computeHotspotPositionFromClick,
-    computeHotspotScreenPosition,
-    computeViewerImageLayout,
-    type ViewerImageLayout,
-} from './helpers/computeViewerImageLayout';
-export { computeViewerPanOffset } from './helpers/computeViewerPanOffset';
-export { hotspotToViewer360Marker, toViewer360Hotspots } from './helpers/markerHelpers';
-export {
-    drawFrameOnCanvas,
-    filterHotspotsByFrame,
-    getFramesSignature,
-    hasLoadedViewerFrame,
-    preloadFrameImage,
-    preloadViewerFrames,
-} from './helpers/viewerHelpers';
-
-export type {
-    Viewer360ClassNames,
-    Viewer360Config,
-    Viewer360Frame,
-    Viewer360Hotspot,
-    Viewer360HotspotPinOptions,
-    Viewer360HotspotPosition,
-    Viewer360HotspotRenderProps,
-    Viewer360Labels,
-    Viewer360Marker,
-    Viewer360MarkerPinClassNames,
-    Viewer360MarkerPinLabels,
-    Viewer360MarkerPinProps,
-    Viewer360MarkerPinRenderProps,
-    Viewer360OverlayRenderProps,
-    Viewer360PanOffset,
-    Viewer360Props,
-    Viewer360Theme,
-    Viewer360ToolbarRenderProps,
-} from './types';
-
-export { cn } from './components/utils';
-export { Button, buttonVariants } from './components/ui/Button';

package/src/styles.css

@@ -1,80 +0,0 @@
-@import 'tailwindcss/theme' layer(theme);
-@import 'tailwindcss/utilities' layer(utilities);
-
-@source './**/*.{ts,tsx}';
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-    --color-card: var(--card);
-    --color-card-foreground: var(--card-foreground);
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-primary: var(--primary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-secondary: var(--secondary);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-muted: var(--muted);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-destructive: var(--destructive);
-    --color-border: var(--border);
-    --color-input: var(--input);
-    --color-ring: var(--ring);
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-    --radius-4xl: 2rem;
-}
-
-/*
- * Scoped to the viewer only — never set :root (that would override the host app's entire theme).
- * Host app shadcn variables inherit into the viewer. Fallbacks apply only inside [data-viewer-360].
- */
-[data-viewer-360] {
-    --radius: 0.625rem;
-    --radius-4xl: 2rem;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-}
-
-.dark [data-viewer-360] {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-}

package/src/types/Viewer360Hotspot.ts

@@ -1,67 +0,0 @@
-export type Viewer360Frame = {
-    id: string;
-    src: string;
-    label?: string;
-};
-
-export type Viewer360PanOffset = {
-    panX: number;
-    panY: number;
-};
-
-export type Viewer360Config = {
-    minZoom?: number;
-    maxZoom?: number;
-    zoomStep?: number;
-    dragSensitivity?: number;
-    autoRotate?: boolean;
-    autoRotateIntervalMs?: number;
-    autoRotateDirection?: 'forward' | 'backward';
-};
-
-export type Viewer360Hotspot<TData = unknown> = {
-    id: string;
-    frameIndex: number;
-    positionX: number;
-    positionY: number;
-    data?: TData;
-};
-
-export type Viewer360HotspotPosition = {
-    frameIndex: number;
-    frameId: string;
-    positionX: number;
-    positionY: number;
-};
-
-export type Viewer360HotspotRenderProps<TData = unknown> = {
-    hotspot: Viewer360Hotspot<TData>;
-    leftPercent: number;
-    topPercent: number;
-};
-
-export type Viewer360OverlayRenderProps = {
-    currentFrameIndex: number;
-    frameCount: number;
-    frameLabel?: string;
-    isHotspotMode: boolean;
-    labels: Required<import('./Viewer360Props').Viewer360Labels>;
-    frameIndicatorClassName: string;
-};
-
-export type Viewer360ToolbarRenderProps = {
-    zoom: number;
-    minZoom: number;
-    maxZoom: number;
-    isResetDisabled: boolean;
-    isHotspotMode: boolean;
-    showHotspotModeControl: boolean;
-    showZoomControls: boolean;
-    showResetControl: boolean;
-    showDragHint: boolean;
-    labels: Required<import('./Viewer360Props').Viewer360Labels>;
-    onZoomIn: () => void;
-    onZoomOut: () => void;
-    onResetView: () => void;
-    onHotspotModeChange: (active: boolean) => void;
-};

package/src/types/Viewer360Marker.ts

@@ -1,52 +0,0 @@
-import type { MouseEvent, ReactNode } from 'react';
-
-import type { Viewer360Hotspot } from './Viewer360Hotspot';
-
-export type Viewer360Marker = {
-    id: string;
-    title: string;
-    description?: string;
-};
-
-export type Viewer360MarkerPinClassNames = {
-    root?: string;
-    ping?: string;
-    dot?: string;
-    tooltip?: string;
-    tooltipHeader?: string;
-    tooltipBody?: string;
-    tooltipTitle?: string;
-    tooltipDescription?: string;
-    deleteButton?: string;
-};
-
-export type Viewer360MarkerPinLabels = {
-    delete?: string;
-};
-
-export type Viewer360MarkerPinRenderProps<TData = unknown> = {
-    marker: Viewer360Marker;
-    hotspot?: Viewer360Hotspot<TData>;
-};
-
-export type Viewer360MarkerPinProps<TData = unknown> = {
-    marker: Viewer360Marker;
-    hotspot?: Viewer360Hotspot<TData>;
-    leftPercent: number;
-    topPercent: number;
-    onDelete?: (id: string) => void;
-    isDeletePending?: boolean;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    renderTag?: (props: Viewer360MarkerPinRenderProps<TData>) => ReactNode;
-    classNames?: Viewer360MarkerPinClassNames;
-    labels?: Viewer360MarkerPinLabels;
-};
-
-export type Viewer360HotspotPinOptions<TData = unknown> = {
-    onDelete?: (id: string) => void;
-    deletingMarkerId?: string | null;
-    getMarker?: (hotspot: Viewer360Hotspot<TData>) => Viewer360Marker;
-    renderTag?: (props: Viewer360MarkerPinRenderProps<TData>) => ReactNode;
-    classNames?: Viewer360MarkerPinClassNames;
-    labels?: Viewer360MarkerPinLabels;
-};