@mmmmzxe/react-360-viewer 0.1.0

package/src/helpers/viewerHelpers.ts

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,306 @@
+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

@@ -0,0 +1,68 @@
+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/types/Viewer360Hotspot.ts

@@ -0,0 +1,66 @@
+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>;
+};
+
+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

@@ -0,0 +1,51 @@
+import type { 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;
+    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;
+};

package/src/types/Viewer360Props.ts

@@ -0,0 +1,108 @@
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
+
+import type {
+    Viewer360Hotspot,
+    Viewer360HotspotPosition,
+    Viewer360HotspotRenderProps,
+    Viewer360OverlayRenderProps,
+    Viewer360ToolbarRenderProps,
+} from './Viewer360Hotspot';
+import type { Viewer360HotspotPinOptions } from './Viewer360Marker';
+
+export type Viewer360ClassNames = {
+    root?: string;
+    viewport?: string;
+    canvas?: string;
+    overlay?: string;
+    loading?: string;
+    loadingText?: string;
+    frameIndicator?: string;
+    hotspotModeBanner?: string;
+    toolbar?: string;
+    dragHint?: string;
+    controls?: string;
+    controlButton?: string;
+    controlButtonActive?: string;
+    controlButtonDisabled?: string;
+    zoomDisplay?: string;
+    divider?: string;
+};
+
+export type Viewer360Labels = {
+    loading?: string;
+    dragHint?: string;
+    frameIndicator?: (params: { current: number; total: number; label?: string }) => string;
+    zoom?: (percent: number) => string;
+    hotspotModeActive?: string;
+    addHotspot?: string;
+    zoomIn?: string;
+    zoomOut?: string;
+    resetView?: string;
+    deleteMarker?: string;
+};
+
+export type Viewer360Theme = {
+    '--viewer-bg'?: string;
+    '--viewer-border'?: string;
+    '--viewer-text'?: string;
+    '--viewer-muted'?: string;
+    '--viewer-accent'?: string;
+    '--viewer-accent-foreground'?: string;
+    '--viewer-control-bg'?: string;
+    '--viewer-control-border'?: string;
+    '--viewer-hotspot-banner-bg'?: string;
+    '--viewer-hotspot-banner-border'?: string;
+    '--viewer-hotspot-banner-text'?: string;
+};
+
+export type Viewer360Props<TData = unknown> = {
+    frames: import('./Viewer360Hotspot').Viewer360Frame[];
+    currentFrameIndex?: number;
+    defaultFrameIndex?: number;
+    onFrameChange?: (index: number) => void;
+    config?: import('./Viewer360Hotspot').Viewer360Config;
+    className?: string;
+    classNames?: Viewer360ClassNames;
+    style?: CSSProperties;
+    theme?: Viewer360Theme;
+    labels?: Viewer360Labels;
+    aspectRatio?: string;
+    showZoomControls?: boolean;
+    showResetControl?: boolean;
+    showFrameIndicator?: boolean;
+    showDragHint?: boolean;
+    showHotspotModeControl?: boolean;
+    hotspotPin?: Viewer360HotspotPinOptions<TData>;
+    hotspots?: Viewer360Hotspot<TData>[];
+    renderHotspot?: (props: Viewer360HotspotRenderProps<TData>) => ReactNode;
+    renderLoading?: () => ReactNode;
+    renderFrameIndicator?: (props: Viewer360OverlayRenderProps) => ReactNode;
+    renderHotspotModeBanner?: (props: Pick<Viewer360OverlayRenderProps, 'labels'>) => ReactNode;
+    renderToolbar?: (props: Viewer360ToolbarRenderProps) => ReactNode;
+    onHotspotClick?: (hotspot: Viewer360Hotspot<TData>, event: MouseEvent<HTMLDivElement>) => void;
+    hotspotMode?: boolean;
+    defaultHotspotMode?: boolean;
+    onHotspotModeChange?: (active: boolean) => void;
+    onHotspotAdd?: (position: Viewer360HotspotPosition) => void;
+    children?: ReactNode;
+};
+
+export type {
+    Viewer360Hotspot,
+    Viewer360HotspotPosition,
+    Viewer360HotspotRenderProps,
+    Viewer360OverlayRenderProps,
+    Viewer360ToolbarRenderProps,
+    Viewer360Config,
+    Viewer360Frame,
+    Viewer360PanOffset,
+} from './Viewer360Hotspot';
+
+export type {
+    Viewer360HotspotPinOptions,
+    Viewer360Marker,
+    Viewer360MarkerPinClassNames,
+    Viewer360MarkerPinLabels,
+    Viewer360MarkerPinProps,
+    Viewer360MarkerPinRenderProps,
+} from './Viewer360Marker';

package/src/types/index.ts

@@ -0,0 +1,30 @@
+export { defaultViewer360Config } from '../constants/viewer360Config';
+export { defaultViewer360Labels } from '../constants/viewer360Labels';
+export { defaultViewer360MarkerPinLabels } from '../constants/viewer360MarkerLabels';
+export {
+    defaultViewer360ClassNames,
+    defaultViewer360MarkerPinClassNames,
+    viewer360ClassNames,
+    viewer360MarkerPinClassNames,
+} from '../constants/viewer360ClassNames';
+
+export type {
+    Viewer360ClassNames,
+    Viewer360Config,
+    Viewer360Frame,
+    Viewer360Hotspot,
+    Viewer360HotspotPinOptions,
+    Viewer360HotspotPosition,
+    Viewer360HotspotRenderProps,
+    Viewer360Labels,
+    Viewer360Marker,
+    Viewer360MarkerPinClassNames,
+    Viewer360MarkerPinLabels,
+    Viewer360MarkerPinProps,
+    Viewer360MarkerPinRenderProps,
+    Viewer360OverlayRenderProps,
+    Viewer360PanOffset,
+    Viewer360Props,
+    Viewer360Theme,
+    Viewer360ToolbarRenderProps,
+} from './Viewer360Props';