@mmmmzxe/react-360-viewer 0.1.13 → 0.1.15

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

package/src/helpers/computeViewerImageLayout.test.ts

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

package/src/helpers/computeViewerImageLayout.ts

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

package/src/helpers/computeViewerPanOffset.ts

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

package/src/helpers/markerHelpers.test.ts

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

package/src/helpers/markerHelpers.ts

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

package/src/helpers/viewer360PropsHelpers.ts

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