@mmmmzxe/react-360-viewer 0.1.0

package/README.md

@@ -0,0 +1,214 @@
+# @mmmmzxe/react-360-viewer
+
+A standalone, configurable 360° image viewer for React. Drag to rotate through frames, scroll or use controls to zoom, optionally auto-rotate, and place interactive hotspots on any frame.
+
+## Features
+
+- Drag-to-rotate frame navigation
+- Zoom via scroll wheel or toolbar controls
+- Pan when zoomed in
+- Optional auto-rotate
+- Hotspot support with built-in marker pins
+- shadcn-style UI with Tailwind CSS design tokens
+- TypeScript-first API
+- Peer dependencies: React, lucide-react, and a Tailwind setup in the host app
+
+## Installation
+
+```bash
+npm install @mmmmzxe/react-360-viewer
+# or
+bun add @mmmmzxe/react-360-viewer
+```
+
+Peer dependencies: `react`, `react-dom` (v18+), and `lucide-react`.
+
+### Tailwind setup
+
+The package uses Tailwind utility classes with shadcn design tokens (`bg-card`, `border-border`, `text-muted-foreground`, etc.). Add the package source to your Tailwind CSS entry so those classes are generated:
+
+```css
+@source "../node_modules/@mmmmzxe/react-360-viewer/src/**/*.{ts,tsx}";
+```
+
+Your host app should also define the standard shadcn CSS variables (`--background`, `--foreground`, `--primary`, `--border`, `--muted-foreground`, and related tokens) in your global stylesheet.
+
+## Quick start
+
+```tsx
+import { useState } from 'react';
+import { Viewer360, type Viewer360Frame } from '@mmmmzxe/react-360-viewer';
+
+const frames: Viewer360Frame[] = [
+  { id: '1', src: '/images/frame-01.jpg', label: 'Front' },
+  { id: '2', src: '/images/frame-02.jpg', label: 'Front-right' },
+  // ...
+];
+
+export function ProductViewer() {
+  const [frameIndex, setFrameIndex] = useState(0);
+
+  return (
+    <Viewer360
+      frames={frames}
+      currentFrameIndex={frameIndex}
+      onFrameChange={setFrameIndex}
+      config={{ dragSensitivity: 8, autoRotate: false }}
+    />
+  );
+}
+```
+
+## Hotspots & markers
+
+Hotspots are percentage-based positions (`positionX`, `positionY` from 0–100) tied to a specific frame.
+
+### Built-in marker pins
+
+Use `hotspotPin` for tooltip pins with optional delete — no custom UI required:
+
+```tsx
+import { Viewer360, toViewer360Hotspots } from '@mmmmzxe/react-360-viewer';
+
+const hotspots = toViewer360Hotspots([
+  { id: '1', frameIndex: 0, positionX: 42, positionY: 58, title: 'Scratch', description: 'Front bumper' },
+]);
+
+<Viewer360
+  frames={frames}
+  hotspots={hotspots}
+  showHotspotModeControl
+  hotspotPin={{
+    onDelete: (id) => removeMarker(id),
+    deletingMarkerId: pendingDeleteId,
+  }}
+  onHotspotAdd={(position) => saveMarker(position)}
+/>
+```
+
+Use `renderTag` inside `hotspotPin` for badges (e.g. damage type). Use `renderHotspot` only when you need fully custom marker UI.
+
+### Custom hotspot UI
+
+```tsx
+import { Viewer360, type Viewer360Hotspot } from '@mmmmzxe/react-360-viewer';
+
+type DamageHotspot = { title: string; severity: 'low' | 'high' };
+
+const hotspots: Viewer360Hotspot<DamageHotspot>[] = [
+  { id: 'a', frameIndex: 0, positionX: 42, positionY: 58, data: { title: 'Scratch', severity: 'low' } },
+];
+
+<Viewer360
+  frames={frames}
+  hotspots={hotspots}
+  showHotspotModeControl
+  onHotspotAdd={(position) => {
+    // position: { frameIndex, frameId, positionX, positionY }
+    console.log('Place hotspot at', position);
+  }}
+  renderHotspot={({ hotspot, leftPercent, topPercent }) => (
+    <button
+      style={{ position: 'absolute', left: `${leftPercent}%`, top: `${topPercent}%` }}
+      onClick={() => alert(hotspot.data?.title)}
+    />
+  )}
+/>
+```
+
+When hotspot add mode is active, clicking the viewport calls `onHotspotAdd` with normalized coordinates that stay aligned while zooming or panning.
+
+## Configuration
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `frames` | `Viewer360Frame[]` | required | Image sources |
+| `config.minZoom` | `number` | `1` | Minimum zoom level |
+| `config.maxZoom` | `number` | `3` | Maximum zoom level |
+| `config.zoomStep` | `number` | `0.15` | Zoom increment |
+| `config.dragSensitivity` | `number` | `8` | Pixels per frame while dragging |
+| `config.autoRotate` | `boolean` | `false` | Enable automatic rotation |
+| `config.autoRotateIntervalMs` | `number` | `100` | Delay between auto-rotate steps |
+| `config.autoRotateDirection` | `'forward' \| 'backward'` | `'forward'` | Auto-rotate direction |
+| `showZoomControls` | `boolean` | `true` | Toolbar zoom buttons |
+| `showResetControl` | `boolean` | `true` | Reset zoom/pan button |
+| `showFrameIndicator` | `boolean` | `true` | Frame counter badge |
+| `showDragHint` | `boolean` | `true` | Helper text in toolbar |
+| `aspectRatio` | `string` | `'16 / 10'` | CSS aspect-ratio value |
+| `labels` | `Viewer360Labels` | English defaults | Localized strings |
+| `classNames` | `Viewer360ClassNames` | BEM classes | Override CSS hooks |
+| `theme` | `Viewer360Theme` | light palette | CSS variable overrides |
+| `hotspotPin` | `Viewer360HotspotPinOptions` | — | Built-in marker pin with tooltip/delete |
+| `renderHotspot` | `function` | — | Fully custom hotspot UI |
+| `renderToolbar` | `function` | — | App design-system toolbar |
+| `renderLoading` | `function` | — | Custom loading overlay |
+| `renderFrameIndicator` | `function` | — | Custom frame badge |
+| `renderHotspotModeBanner` | `function` | — | Custom add-mode banner |
+
+## Headless usage
+
+Use `useViewer360` when you need full control over markup:
+
+```tsx
+import { useViewer360 } from '@mmmmzxe/react-360-viewer';
+
+const viewer = useViewer360({
+  frames,
+  currentFrameIndex,
+  onFrameChange: setFrameIndex,
+});
+```
+
+The hook exposes canvas refs, interaction handlers, zoom state, and hotspot positioning helpers.
+
+## Theming
+
+Override CSS variables on the root element or pass `theme`:
+
+```tsx
+<Viewer360
+  theme={{
+    '--viewer-bg': '#111827',
+    '--viewer-text': '#f9fafb',
+    '--viewer-accent': '#3b82f6',
+  }}
+/>
+```
+
+See the `theme` prop on `Viewer360` for supported CSS variable overrides.
+
+## Package structure
+
+```
+src/
+  components/
+    ui/             Badge, Button, Card, Item, Label, Popover, Separator, Spinner
+    utils/          cn helper
+  feature/          Viewer360 and sub-components
+  constants/
+  helpers/
+  hooks/
+  types/
+```
+
+The published package includes `dist/` (ESM + type declarations) and `src/` (for Tailwind `@source` scanning).
+
+## Development
+
+```bash
+npm install
+npm run test-run
+npm run build
+```
+
+## Publishing
+
+```bash
+npm publish
+```
+
+`prepublishOnly` runs the build automatically. The package ships ESM + type declarations from `dist/`.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,377 @@
+import * as React$1 from 'react';
+import { ReactNode, CSSProperties, MouseEvent, JSX, RefObject, PointerEvent, WheelEvent } from 'react';
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const defaultViewer360Config: {
+    minZoom: number;
+    maxZoom: number;
+    zoomStep: number;
+    dragSensitivity: number;
+    autoRotate: boolean;
+    autoRotateIntervalMs: number;
+    autoRotateDirection: "forward";
+};
+
+type Viewer360Frame = {
+    id: string;
+    src: string;
+    label?: string;
+};
+type Viewer360PanOffset = {
+    panX: number;
+    panY: number;
+};
+type Viewer360Config = {
+    minZoom?: number;
+    maxZoom?: number;
+    zoomStep?: number;
+    dragSensitivity?: number;
+    autoRotate?: boolean;
+    autoRotateIntervalMs?: number;
+    autoRotateDirection?: 'forward' | 'backward';
+};
+type Viewer360Hotspot<TData = unknown> = {
+    id: string;
+    frameIndex: number;
+    positionX: number;
+    positionY: number;
+    data?: TData;
+};
+type Viewer360HotspotPosition = {
+    frameIndex: number;
+    frameId: string;
+    positionX: number;
+    positionY: number;
+};
+type Viewer360HotspotRenderProps<TData = unknown> = {
+    hotspot: Viewer360Hotspot<TData>;
+    leftPercent: number;
+    topPercent: number;
+};
+type Viewer360OverlayRenderProps = {
+    currentFrameIndex: number;
+    frameCount: number;
+    frameLabel?: string;
+    isHotspotMode: boolean;
+    labels: Required<Viewer360Labels>;
+};
+type Viewer360ToolbarRenderProps = {
+    zoom: number;
+    minZoom: number;
+    maxZoom: number;
+    isResetDisabled: boolean;
+    isHotspotMode: boolean;
+    showHotspotModeControl: boolean;
+    showZoomControls: boolean;
+    showResetControl: boolean;
+    showDragHint: boolean;
+    labels: Required<Viewer360Labels>;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onResetView: () => void;
+    onHotspotModeChange: (active: boolean) => void;
+};
+
+type Viewer360Marker = {
+    id: string;
+    title: string;
+    description?: string;
+};
+type Viewer360MarkerPinClassNames = {
+    root?: string;
+    ping?: string;
+    dot?: string;
+    tooltip?: string;
+    tooltipHeader?: string;
+    tooltipBody?: string;
+    tooltipTitle?: string;
+    tooltipDescription?: string;
+    deleteButton?: string;
+};
+type Viewer360MarkerPinLabels = {
+    delete?: string;
+};
+type Viewer360MarkerPinRenderProps<TData = unknown> = {
+    marker: Viewer360Marker;
+    hotspot?: Viewer360Hotspot<TData>;
+};
+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;
+};
+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;
+};
+
+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;
+};
+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;
+};
+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;
+};
+type Viewer360Props<TData = unknown> = {
+    frames: Viewer360Frame[];
+    currentFrameIndex?: number;
+    defaultFrameIndex?: number;
+    onFrameChange?: (index: number) => void;
+    config?: 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;
+};
+
+declare const defaultViewer360Labels: Required<Viewer360Labels>;
+
+declare const defaultViewer360MarkerPinLabels: {
+    readonly delete: "Remove marker";
+};
+
+declare const viewer360ClassNames: Required<Viewer360ClassNames>;
+declare const viewer360MarkerPinClassNames: Required<Viewer360MarkerPinClassNames>;
+/** @deprecated Use `viewer360ClassNames` */
+declare const defaultViewer360ClassNames: Required<Viewer360ClassNames>;
+/** @deprecated Use `viewer360MarkerPinClassNames` */
+declare const defaultViewer360MarkerPinClassNames: Required<Viewer360MarkerPinClassNames>;
+
+declare function Viewer360<TData = unknown>({ frames, currentFrameIndex: controlledFrameIndex, defaultFrameIndex, onFrameChange, config, className, classNames, style, theme, labels, aspectRatio, showZoomControls, showResetControl, showFrameIndicator, showDragHint, showHotspotModeControl, hotspotPin, hotspots, renderHotspot, renderLoading, renderFrameIndicator, renderHotspotModeBanner, renderToolbar, onHotspotClick, hotspotMode: controlledHotspotMode, defaultHotspotMode, onHotspotModeChange, onHotspotAdd, children, }: Viewer360Props<TData>): JSX.Element;
+
+type Viewer360AddModeBannerProps = {
+    className?: string;
+    label: string;
+};
+declare function Viewer360AddModeBanner({ className, label }: Viewer360AddModeBannerProps): JSX.Element;
+
+type Viewer360FrameIndicatorProps = {
+    className?: string;
+    label: string;
+};
+declare function Viewer360FrameIndicator({ className, label }: Viewer360FrameIndicatorProps): JSX.Element;
+
+type Viewer360LoadingOverlayProps = {
+    className?: string;
+    textClassName?: string;
+    label: string;
+};
+declare function Viewer360LoadingOverlay({ className, textClassName, label }: Viewer360LoadingOverlayProps): JSX.Element;
+
+declare function Viewer360MarkerPin<TData = unknown>({ marker, hotspot, leftPercent, topPercent, onDelete, isDeletePending, renderTag, classNames, labels, }: Viewer360MarkerPinProps<TData>): JSX.Element;
+
+type Viewer360ToolbarProps = Viewer360ToolbarRenderProps;
+declare function Viewer360Toolbar({ showDragHint, showHotspotModeControl, showZoomControls, showResetControl, labels, isHotspotMode, zoom, minZoom, maxZoom, isResetDisabled, onHotspotModeChange, onZoomIn, onZoomOut, onResetView, }: Viewer360ToolbarProps): JSX.Element;
+
+type ViewerImageLayout = {
+    width: number;
+    height: number;
+    centerX: number;
+    centerY: number;
+    drawWidth: number;
+    drawHeight: number;
+    offsetX: number;
+    offsetY: number;
+};
+type PanOffset = {
+    panX: number;
+    panY: number;
+};
+type ComputeViewerImageLayoutParams = {
+    containerWidth: number;
+    containerHeight: number;
+    imageWidth: number;
+    imageHeight: number;
+    pan?: PanOffset;
+};
+declare function computeViewerImageLayout({ containerWidth, containerHeight, imageWidth, imageHeight, pan, }: ComputeViewerImageLayoutParams): ViewerImageLayout;
+declare function computeHotspotScreenPosition(hotspotX: number, hotspotY: number, layout: ViewerImageLayout, zoom: number): {
+    leftPercent: number;
+    topPercent: number;
+};
+declare function computeHotspotPositionFromClick(clientX: number, clientY: number, containerRect: DOMRect, layout: ViewerImageLayout, zoom: number): {
+    positionX: number;
+    positionY: number;
+};
+
+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: PointerEvent<HTMLDivElement>) => void;
+    handlePointerMove: (event: PointerEvent<HTMLDivElement>) => void;
+    handlePointerUp: (event: PointerEvent<HTMLDivElement>) => void;
+    handleResetView: () => void;
+    handleWheel: (event: WheelEvent<HTMLDivElement>) => void;
+    handleZoomIn: () => void;
+    handleZoomOut: () => void;
+};
+declare function useViewer360<TData = unknown>({ frames, hotspots, currentFrameIndex, onFrameChange, config, hotspotMode: hotspotModeProp, onHotspotAdd, }: UseViewer360Params<TData>): UseViewer360Return<TData>;
+
+type ResolvedViewer360Config = Required<Viewer360Config>;
+declare function resolveViewer360Config(config?: Viewer360Config): ResolvedViewer360Config;
+declare function clampZoom(zoom: number, config: ResolvedViewer360Config): number;
+declare function applyWheelZoom(currentZoom: number, deltaY: number, currentPan: PanOffset, config: ResolvedViewer360Config): {
+    zoom: number;
+    pan: PanOffset;
+};
+declare function stepZoomIn(currentZoom: number, config: ResolvedViewer360Config): number;
+declare function stepZoomOut(currentZoom: number, currentPan: PanOffset, config: ResolvedViewer360Config): {
+    zoom: number;
+    pan: PanOffset;
+};
+declare function isResetDisabled(zoom: number, pan: PanOffset, config: ResolvedViewer360Config): boolean;
+declare function getViewerCursorClass(isHotspotMode: boolean, zoom: number, isDragging: boolean, minZoom: number): string;
+
+declare function clampFrameIndex(index: number, frameCount: number): number;
+type DragStart = {
+    pointerX: number;
+    frameIndex: number;
+};
+declare function computeDragFrameIndex(dragStart: DragStart, clientX: number, frameCount: number, dragSensitivity: number): number | null;
+
+type PanStart = {
+    pointerX: number;
+    pointerY: number;
+    panX: number;
+    panY: number;
+};
+declare function computeViewerPanOffset(panStart: PanStart, clientX: number, clientY: number): PanOffset;
+
+declare function hotspotToViewer360Marker<TData>(hotspot: Viewer360Hotspot<TData>): Viewer360Marker;
+declare 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>[];
+
+type DrawFrameOnCanvasParams = {
+    canvas: HTMLCanvasElement;
+    container: HTMLDivElement;
+    image: HTMLImageElement;
+    zoom: number;
+    pan: PanOffset;
+};
+declare function drawFrameOnCanvas({ canvas, container, image, zoom, pan }: DrawFrameOnCanvasParams): void;
+declare function getFramesSignature(frames: Viewer360Frame[]): string;
+declare function preloadFrameImage(frame: Viewer360Frame): Promise<HTMLImageElement>;
+declare function preloadViewerFrames(frames: Viewer360Frame[]): Promise<HTMLImageElement[]>;
+declare function hasLoadedViewerFrame(images: HTMLImageElement[]): boolean;
+declare function filterHotspotsByFrame<TData>(hotspots: Array<{
+    frameIndex: number;
+    data?: TData;
+}>, frameIndex: number): Array<{
+    frameIndex: number;
+    data?: TData;
+}>;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "icon" | "sm" | "xs" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React$1.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): JSX.Element;
+
+export { Button, Viewer360, Viewer360AddModeBanner, type Viewer360ClassNames, type Viewer360Config, type Viewer360Frame, Viewer360FrameIndicator, type Viewer360Hotspot, type Viewer360HotspotPinOptions, type Viewer360HotspotPosition, type Viewer360HotspotRenderProps, type Viewer360Labels, Viewer360LoadingOverlay, type Viewer360Marker, Viewer360MarkerPin, type Viewer360MarkerPinClassNames, type Viewer360MarkerPinLabels, type Viewer360MarkerPinProps, type Viewer360MarkerPinRenderProps, type Viewer360OverlayRenderProps, type Viewer360PanOffset, type Viewer360Props, type Viewer360Theme, Viewer360Toolbar, type Viewer360ToolbarRenderProps, type ViewerImageLayout, applyWheelZoom, buttonVariants, clampFrameIndex, clampZoom, cn, computeDragFrameIndex, computeHotspotPositionFromClick, computeHotspotScreenPosition, computeViewerImageLayout, computeViewerPanOffset, defaultViewer360ClassNames, defaultViewer360Config, defaultViewer360Labels, defaultViewer360MarkerPinClassNames, defaultViewer360MarkerPinLabels, drawFrameOnCanvas, filterHotspotsByFrame, getFramesSignature, getViewerCursorClass, hasLoadedViewerFrame, hotspotToViewer360Marker, isResetDisabled, preloadFrameImage, preloadViewerFrames, resolveViewer360Config, stepZoomIn, stepZoomOut, toViewer360Hotspots, useViewer360, viewer360ClassNames, viewer360MarkerPinClassNames };