@tableslayer/ui 0.1.4 → 0.1.6

package/dist/components/Stage/components/MapLayer/dataSources/VideoDataSource.js

@@ -1,141 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import * as THREE from 'three';
-/**
- * Data source for loading and playing video files as textures in a 3D scene.
- *
- * This class implements the IMapDataSource interface to provide video playback
- * capabilities for map layers. It creates an HTML video element, sets up
- * proper video attributes for web playback, and creates a Three.js VideoTexture
- * for real-time video rendering in 3D space.
- */
-export class VideoDataSource {
-    constructor() {
-        /** HTML video element used for video playback */
-        this.videoElement = null;
-        /** Three.js video texture created from the video element */
-        this.texture = null;
-        /** Dimensions of the video */
-        this.size = null;
-    }
-    /**
-     * Gets the Three.js video texture containing the playing video.
-     *
-     * @returns The video texture with the current video frame, or null if not loaded
-     */
-    getTexture() {
-        return this.texture;
-    }
-    /**
-     * Gets the dimensions of the loaded video.
-     *
-     * @returns The width and height of the video, or null if not loaded
-     */
-    getSize() {
-        return this.size;
-    }
-    /**
-     * Loads a video from a URL and starts playback.
-     *
-     * This method creates an HTML video element with appropriate attributes
-     * for web playback (autoplay, muted, loop, etc.), sets up event listeners
-     * for loading and error handling, and creates a Three.js VideoTexture
-     * for real-time rendering in 3D space.
-     *
-     * @param url - The URL of the video file to load
-     * @returns A promise that resolves when the video is loaded and ready to play
-     * @throws Error if the video cannot be loaded or played
-     */
-    load(url) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Dispose of previous resources
-            this.dispose();
-            return new Promise((resolve, reject) => {
-                // Create video element
-                this.videoElement = document.createElement('video');
-                // Set crossOrigin to 'anonymous' for CORS-enabled servers
-                // This is required for THREE.VideoTexture to work with cross-origin videos
-                this.videoElement.crossOrigin = 'anonymous';
-                this.videoElement.loop = true;
-                this.videoElement.muted = true;
-                this.videoElement.playsInline = true;
-                this.videoElement.autoplay = true;
-                // Preload the video to ensure it's ready
-                this.videoElement.preload = 'auto';
-                // Wait for enough data to be loaded before creating texture
-                // 'canplaythrough' ensures the video has enough data buffered
-                const handleCanPlay = () => {
-                    if (this.videoElement && this.videoElement.readyState >= 2) {
-                        this.size = {
-                            width: this.videoElement.videoWidth,
-                            height: this.videoElement.videoHeight
-                        };
-                        // Create video texture only when video is ready
-                        this.texture = new THREE.VideoTexture(this.videoElement);
-                        this.texture.colorSpace = THREE.SRGBColorSpace;
-                        // Set texture parameters for better compatibility
-                        this.texture.minFilter = THREE.LinearFilter;
-                        this.texture.magFilter = THREE.LinearFilter;
-                        this.texture.format = THREE.RGBAFormat;
-                        // Disable mipmaps to prevent power-of-two issues
-                        this.texture.generateMipmaps = false;
-                        // Force texture update on every frame for videos
-                        this.texture.needsUpdate = true;
-                        // Start playback
-                        this.videoElement.play().catch((e) => {
-                            console.warn('Video autoplay failed:', e);
-                        });
-                        resolve();
-                    }
-                };
-                // Use canplaythrough for Chrome compatibility
-                this.videoElement.addEventListener('canplaythrough', handleCanPlay, { once: true });
-                // Fallback: also listen for loadeddata as some browsers may not fire canplaythrough
-                this.videoElement.addEventListener('loadeddata', () => {
-                    // Give it a small delay to ensure the first frame is ready
-                    setTimeout(() => {
-                        if (!this.texture && this.videoElement && this.videoElement.readyState >= 2) {
-                            handleCanPlay();
-                        }
-                    }, 100);
-                }, { once: true });
-                this.videoElement.addEventListener('error', (error) => {
-                    console.error('Failed to load video:', error);
-                    reject(error);
-                });
-                // Set source with cache busting
-                // Force reload by ensuring the URL is unique
-                this.videoElement.src = url;
-                // Force the browser to reload the video
-                this.videoElement.load();
-            });
-        });
-    }
-    /**
-     * Disposes of the video element and texture, stopping playback.
-     *
-     * This method stops video playback, removes the video source,
-     * disposes of the Three.js texture, and cleans up all references
-     * to prevent memory leaks.
-     */
-    dispose() {
-        if (this.videoElement) {
-            this.videoElement.pause();
-            this.videoElement.removeAttribute('src');
-            this.videoElement.load();
-            this.videoElement = null;
-        }
-        if (this.texture) {
-            this.texture.dispose();
-            this.texture = null;
-        }
-        this.size = null;
-    }
-}

package/dist/components/Stage/components/MapLayer/dataSources/dataSourceFactory.d.ts

@@ -1,21 +0,0 @@
-import type { IMapDataSource } from './IMapDataSource';
-/**
- * Factory function that creates the appropriate data source based on file extension.
- *
- * This function analyzes the URL's file extension to determine which type of
- * data source to create. It supports various media formats:
- * - Video formats (mp4, webm, mov, avi) → VideoDataSource
- * - GIF animations → GifDataSource
- * - Image formats (jpg, jpeg, png, webp, bmp, tiff) → ImageDataSource
- * - Unknown formats default to ImageDataSource
- *
- * @param url - The URL of the media file to load
- * @returns An instance of the appropriate data source implementation
- *
- * @example
- * ```typescript
- * const dataSource = createDataSource('https://example.com/image.jpg');
- * await dataSource.load('https://example.com/image.jpg');
- * ```
- */
-export declare function createDataSource(url: string): IMapDataSource;

package/dist/components/Stage/components/MapLayer/dataSources/dataSourceFactory.js

@@ -1,44 +0,0 @@
-import { GifDataSource } from './GifDataSource';
-import { ImageDataSource } from './ImageDataSource';
-import { VideoDataSource } from './VideoDataSource';
-/**
- * Factory function that creates the appropriate data source based on file extension.
- *
- * This function analyzes the URL's file extension to determine which type of
- * data source to create. It supports various media formats:
- * - Video formats (mp4, webm, mov, avi) → VideoDataSource
- * - GIF animations → GifDataSource
- * - Image formats (jpg, jpeg, png, webp, bmp, tiff) → ImageDataSource
- * - Unknown formats default to ImageDataSource
- *
- * @param url - The URL of the media file to load
- * @returns An instance of the appropriate data source implementation
- *
- * @example
- * ```typescript
- * const dataSource = createDataSource('https://example.com/image.jpg');
- * await dataSource.load('https://example.com/image.jpg');
- * ```
- */
-export function createDataSource(url) {
-    var _a;
-    const urlWithoutParams = url.split('?')[0];
-    const extension = ((_a = urlWithoutParams.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
-    switch (extension) {
-        case 'mp4':
-        case 'webm':
-        case 'mov':
-        case 'avi':
-            return new VideoDataSource();
-        case 'gif':
-            return new GifDataSource();
-        case 'jpg':
-        case 'jpeg':
-        case 'png':
-        case 'webp':
-        case 'bmp':
-        case 'tiff':
-        default:
-            return new ImageDataSource();
-    }
-}

package/dist/components/Stage/components/MapLayer/dataSources/index.d.ts

@@ -1,15 +0,0 @@
-/**
- * Map Layer Data Sources Module
- *
- * This module provides a unified interface for loading different types of media
- * as textures in 3D map layers. It includes implementations for static images,
- * video files, and animated GIFs, along with a factory function to automatically
- * select the appropriate data source based on file extension.
- *
- * @module MapLayerDataSources
- */
-export { createDataSource } from './dataSourceFactory';
-export { GifDataSource } from './GifDataSource';
-export { ImageDataSource } from './ImageDataSource';
-export type { IMapDataSource } from './IMapDataSource';
-export { VideoDataSource } from './VideoDataSource';

package/dist/components/Stage/components/MapLayer/dataSources/index.js

@@ -1,14 +0,0 @@
-/**
- * Map Layer Data Sources Module
- *
- * This module provides a unified interface for loading different types of media
- * as textures in 3D map layers. It includes implementations for static images,
- * video files, and animated GIFs, along with a factory function to automatically
- * select the appropriate data source based on file extension.
- *
- * @module MapLayerDataSources
- */
-export { createDataSource } from './dataSourceFactory';
-export { GifDataSource } from './GifDataSource';
-export { ImageDataSource } from './ImageDataSource';
-export { VideoDataSource } from './VideoDataSource';

package/dist/components/Stage/components/MapLayer/types.d.ts

@@ -1,54 +0,0 @@
-import * as THREE from 'three';
-export declare enum MapLayerType {
-    None = 0,
-    FogOfWar = 1,
-    Marker = 2,
-    Annotation = 3,
-    Measurement = 4
-}
-/**
- * Props for the Map layer
- */
-export interface MapLayerProps {
-    /**
-     * The position of the map relative to the scene
-     */
-    offset: {
-        x: number;
-        y: number;
-    };
-    /**
-     * Rotation of the map relative to the scene in degrees
-     */
-    rotation: number;
-    /**
-     * Url for the map image
-     */
-    url: string;
-    /**
-     * Indicates if the map should autoplay (for video assets)
-     * @default true
-     */
-    autoplay?: boolean;
-    /**
-     * The scale of the map relative to the scene
-     */
-    zoom: number;
-}
-export interface MapLayerExports {
-    getCompositeMapTexture: () => THREE.Texture | null;
-    fit: () => void;
-    fill: () => void;
-    mapSize: {
-        width: number;
-        height: number;
-    } | null;
-    fogOfWar: {
-        clear: () => void;
-        reset: () => void;
-        toPng: () => Promise<Blob>;
-        toRLE: () => Promise<Uint8Array>;
-        fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
-        isDrawing: () => boolean;
-    };
-}

package/dist/components/Stage/components/MapLayer/types.js

@@ -1,9 +0,0 @@
-import * as THREE from 'three';
-export var MapLayerType;
-(function (MapLayerType) {
-    MapLayerType[MapLayerType["None"] = 0] = "None";
-    MapLayerType[MapLayerType["FogOfWar"] = 1] = "FogOfWar";
-    MapLayerType[MapLayerType["Marker"] = 2] = "Marker";
-    MapLayerType[MapLayerType["Annotation"] = 3] = "Annotation";
-    MapLayerType[MapLayerType["Measurement"] = 4] = "Measurement";
-})(MapLayerType || (MapLayerType = {}));