storysplat-viewer 0.1.21 → 0.2.1

package/dist/types/core/cameraManager.d.ts

@@ -17,6 +17,7 @@ export declare class CameraManager {
     private _isMobile;
     navigationManager: NavigationManager;
     private _analyticsManager;
+    onCameraModeChange?: (mode: CameraMode) => void;
     constructor(canvas: HTMLCanvasElement, scene: Scene, data: StorySplatData, options?: ViewerOptions, // Correct options parameter
     analyticsManager?: AnalyticsManager);
     get camera(): UniversalCamera | null;

package/dist/types/features/customScriptManager.d.ts

@@ -0,0 +1,34 @@
+import { Scene } from "@babylonjs/core/scene";
+import { Camera } from "@babylonjs/core/Cameras/camera";
+import * as BABYLON from "@babylonjs/core";
+import { ViewerData } from "../types/dataTypes";
+import { Hotspot } from "../types/hotspotTypes";
+export interface CustomScriptAPI {
+    scene: Scene;
+    camera: Camera;
+    BABYLON: typeof BABYLON;
+    canvas: HTMLCanvasElement;
+    getScrollPercentage: () => number;
+    getCurrentWaypointIndex: () => number;
+    getHotspots: () => Hotspot[];
+    getHTMLMeshes: () => any[];
+    getSplats: () => any[];
+}
+export declare class CustomScriptManager {
+    private scene;
+    private camera;
+    private customScript;
+    private scriptCleanup;
+    private isInitialized;
+    private scrollPercentage;
+    private currentWaypointIndex;
+    private hotspots;
+    private htmlMeshes;
+    constructor(scene: Scene, data?: ViewerData);
+    setCamera(camera: Camera): void;
+    updateScrollPercentage(percentage: number): void;
+    updateCurrentWaypointIndex(index: number): void;
+    execute(): void;
+    private cleanup;
+    dispose(): void;
+}

package/dist/types/features/htmlMeshManager.d.ts

@@ -0,0 +1,23 @@
+import { Scene } from "@babylonjs/core/scene";
+import { HtmlMesh } from "@babylonjs/addons";
+import { HTMLMesh } from "../types/HTMLMeshTypes";
+export declare class HTMLMeshManager {
+    private scene;
+    private renderer;
+    private babylonMeshes;
+    private meshes;
+    private onMeshClick?;
+    constructor(scene: Scene, onMeshClick?: (meshId: string) => void);
+    private initializeRenderer;
+    createHTMLMesh(meshData: HTMLMesh): void;
+    private createHTMLElement;
+    private createFormElement;
+    private applyElementStyles;
+    private mapFitStrategy;
+    createAllHTMLMeshes(htmlMeshesData: HTMLMesh[]): void;
+    updateHTMLMesh(meshId: string, updates: Partial<HTMLMesh>): void;
+    deleteHTMLMesh(meshId: string): void;
+    getHTMLMesh(meshId: string): HtmlMesh | undefined;
+    getAllHTMLMeshes(): HTMLMesh[];
+    dispose(): void;
+}

package/dist/types/features/navigationManager.d.ts

@@ -142,5 +142,9 @@ export declare class NavigationManager {
     getTargetRotation(): Quaternion;
     /** Called by external systems (like RenderLoopManager) to indicate interpolation can stop. */
     markInterpolationComplete(): void;
+    /** Gets the current scroll progress as a percentage (0-1). */
+    getScrollProgress(): number;
+    /** Gets the current waypoint index based on scroll position. */
+    getCurrentWaypointIndex(): number;
     dispose(): void;
 }

package/dist/types/index.d.ts

@@ -9,6 +9,7 @@ import { Waypoint } from './types/navigationTypes';
 import { CameraManager } from './core/cameraManager';
 import { NavigationManager } from './features/navigationManager';
 import { SplatSwapManager } from './features/splatSwapManager';
+import { CustomScriptManager } from './features/customScriptManager';
 export * from './types';
 export { Viewer } from './viewer';
 export interface ViewerInstance {
@@ -19,6 +20,7 @@ export interface ViewerInstance {
     cameraManager: CameraManager;
     navigationManager: NavigationManager;
     splatSwapManager: SplatSwapManager | undefined;
+    customScriptManager: CustomScriptManager | undefined;
     getHotspotData: (id: string | number) => Hotspot | undefined;
     getWaypointData: (name: string) => Waypoint | undefined;
     setCameraMode: (mode: CameraMode) => void;

package/dist/types/types/dataTypes.d.ts

@@ -1,6 +1,7 @@
 import { ParticleSystem } from "@babylonjs/core/Particles/particleSystem";
 import { Hotspot } from "./hotspotTypes";
 import { CameraMode } from "./viewerOptions";
+import { HTMLMesh } from "./HTMLMeshTypes";
 export declare enum UIType {
     Standard = "standard",
     Minimal = "minimal",
@@ -195,6 +196,8 @@ export interface StorySplatData {
     splatScale?: number;
     invertXScale?: boolean;
     invertYScale?: boolean;
+    customScript?: string;
+    htmlMeshes?: HTMLMesh[];
 }
 export interface UIOptionsData {
     infoPosition?: "controls" | "corner" | string;
@@ -246,3 +249,4 @@ export interface CustomMesh {
 export interface InternalParticleSystem extends ParticleSystemData {
     system?: ParticleSystem;
 }
+export type ViewerData = StorySplatData;

package/dist/types/types/htmlMeshTypes.d.ts

@@ -0,0 +1,58 @@
+import * as BABYLON from "@babylonjs/core";
+export type HTMLMeshContentType = 'html' | 'iframe' | 'form';
+export type HTMLMeshFitStrategy = 'none' | 'contain' | 'cover' | 'stretch';
+export interface HTMLMeshOptions {
+    captureOnPointerEnter?: boolean;
+    isCanvasOverlay?: boolean;
+    fitStrategy?: HTMLMeshFitStrategy;
+}
+export interface HTMLMesh {
+    id: string;
+    position: BABYLON.Vector3;
+    scale: BABYLON.Vector3;
+    rotation: BABYLON.Vector3;
+    contentType: HTMLMeshContentType;
+    htmlContent?: string;
+    iframeUrl?: string;
+    formConfig?: HTMLMeshFormConfig;
+    width: number;
+    height: number;
+    billboard?: boolean;
+    opacity?: number;
+    visible?: boolean;
+    captureOnPointerEnter?: boolean;
+    isCanvasOverlay?: boolean;
+    fitStrategy?: HTMLMeshFitStrategy;
+    backgroundColor?: string;
+    padding?: number;
+    borderRadius?: number;
+    fontSize?: string;
+    fontFamily?: string;
+    clickable?: boolean;
+    draggable?: boolean;
+    resizable?: boolean;
+}
+export interface HTMLMeshFormConfig {
+    fields: HTMLMeshFormField[];
+    submitUrl?: string;
+    submitMethod?: 'GET' | 'POST';
+    onSubmit?: (data: any) => void;
+}
+export interface HTMLMeshFormField {
+    type: 'text' | 'email' | 'password' | 'select' | 'checkbox' | 'radio' | 'textarea';
+    name: string;
+    label: string;
+    placeholder?: string;
+    required?: boolean;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    defaultValue?: string;
+}
+export interface HTMLMeshInteraction {
+    meshId: string;
+    type: 'click' | 'hover' | 'submit';
+    action: 'navigate' | 'script' | 'animate';
+    data?: any;
+}

package/dist/types/ui/templateManager.d.ts

@@ -0,0 +1,121 @@
+import { ViewerOptions } from "../types/viewerOptions";
+import { PreloaderUI } from "./preloader";
+import { AudioManager } from "../features/audioManager";
+import { NavigationManager } from "../features/navigationManager";
+import { CameraManager } from "../core/cameraManager";
+/**
+ * Manages UI layout templates for the StorySplat viewer
+ * Renders different UI layouts based on the uiType from scene JSON
+ */
+export declare class TemplateManager {
+    private targetElement;
+    private options;
+    private uiType;
+    private preloaderUI;
+    private startButtonUI;
+    private watermarkUI;
+    private helpPanelUI;
+    private muteButtonUI;
+    private controlsContainer;
+    private modeToggleContainer;
+    private progressContainer;
+    private navigationContainer;
+    constructor(targetElement: HTMLElement, options: ViewerOptions);
+    /**
+     * Initialize UI components based on template type
+     */
+    initializeUI(audioManager: AudioManager | null, navigationManager: NavigationManager | null, cameraManager: CameraManager | null, onStartExperience?: () => void): Promise<void>;
+    /**
+     * Create base UI components common to all templates
+     */
+    private createBaseComponents;
+    /**
+     * Apply Minimal template layout (overlay controls)
+     */
+    private applyMinimalTemplate;
+    /**
+     * Apply Standard template layout (bottom navigation)
+     */
+    private applyStandardTemplate;
+    /**
+     * Apply Pro template layout (enhanced bottom navigation)
+     */
+    private applyProTemplate;
+    /**
+     * Helper to determine if mode toggle should be shown
+     */
+    private shouldShowModeToggle;
+    /**
+     * Create minimal overlay controls
+     */
+    private createMinimalControls;
+    /**
+     * Create standard bottom controls
+     */
+    private createStandardControls;
+    /**
+     * Create pro enhanced controls
+     */
+    private createProControls;
+    /**
+     * Create minimal mode toggle
+     */
+    private createMinimalModeToggle;
+    /**
+     * Create standard mode toggle
+     */
+    private createStandardModeToggle;
+    /**
+     * Create pro mode toggle (left side)
+     */
+    private createProModeToggle;
+    /**
+     * Create pro waypoint info display
+     */
+    private createProWaypointInfo;
+    /**
+     * Helper to create navigation buttons
+     */
+    private createNavButton;
+    /**
+     * Connect navigation controls to NavigationManager
+     */
+    private connectNavigationControls;
+    /**
+     * Apply minimal template styles
+     */
+    private applyMinimalStyles;
+    /**
+     * Apply standard template styles
+     */
+    private applyStandardStyles;
+    /**
+     * Apply pro template styles
+     */
+    private applyProStyles;
+    /**
+     * Update progress display
+     */
+    updateProgress(percentage: number): void;
+    /**
+     * Get preloader UI instance (for direct access if needed)
+     */
+    getPreloaderUI(): PreloaderUI | null;
+    /**
+     * Show/hide preloader
+     */
+    showPreloader(): void;
+    hidePreloader(): void;
+    /**
+     * Update preloader progress
+     */
+    updatePreloaderProgress(percentage: number, text?: string): void;
+    /**
+     * Update mode toggle button states
+     */
+    private updateModeToggleState;
+    /**
+     * Clean up and dispose
+     */
+    dispose(): void;
+}

package/dist/types/viewer.d.ts

@@ -101,5 +101,13 @@ export declare class Viewer {
      * Get the underlying ViewerInstance (for advanced usage)
      */
     getInstance(): ViewerInstance | null;
+    /**
+     * Execute custom script in the viewer
+     */
+    executeCustomScript(script?: string): void;
+    /**
+     * Update custom script state (scroll percentage, waypoint index)
+     */
+    updateCustomScriptState(scrollPercentage?: number, waypointIndex?: number): void;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storysplat-viewer",
-  "version": "0.1.21",
+  "version": "0.2.1",
   "description": "A viewer component for StorySplat scenes.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -15,11 +15,14 @@
     "test:build-watch": "npm run build && concurrently \"npm run dev\" \"npm run test:serve\"",
     "test": "npm run build && npm run test:serve",
     "test:python": "npm run build && python3 test/simple-server.py",
-    "test:open": "npm run build && open http://localhost:8080/test/index.html && npm run test:serve"
+    "test:open": "npm run build && open http://localhost:8080/test/index.html && npm run test:serve",
+    "docs:serve": "bash scripts/serve-docs.sh",
+    "docs:build": "bash scripts/build-docs.sh",
+    "docs:deploy": "bash scripts/deploy-docs.sh"
   },
   "devDependencies": {
-    "@babylonjs/core": "^8.4.1",
-    "@babylonjs/loaders": "^8.4.1",
+    "@babylonjs/core": "^8.18.0",
+    "@babylonjs/loaders": "^8.18.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -39,10 +42,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@babylonjs/loaders": "^8.4.1",
+    "@babylonjs/loaders": "^8.18.0",
+    "@babylonjs/addons": "^8.18.0",
     "gifuct-js": "^2.1.2"
   },
   "peerDependencies": {
-    "@babylonjs/core": "^8.4.1"
+    "@babylonjs/core": "^8.18.0"
   }
 }