@tableslayer/ui 0.0.1

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

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

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

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

@@ -0,0 +1,15 @@
+/**
+ * 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

@@ -0,0 +1,14 @@
+/**
+ * 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

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

@@ -0,0 +1,9 @@
+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 = {}));