@mmmmzxe/react-360-viewer 0.1.13 → 0.1.14

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

package/src/types/Viewer360Props.ts

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

@@ -1,30 +0,0 @@
-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';

package/src/utils/index.ts

@@ -1,6 +0,0 @@
-import clsx, { type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]): string {
-    return twMerge(clsx(inputs));
-}