@tableslayer/ui 0.0.1

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

@@ -0,0 +1,24 @@
+import * as THREE from 'three';
+import type { Size } from '../../types';
+import type { StageProps } from '../Stage/types';
+interface Props {
+    props: StageProps;
+    onMapLoading: () => void;
+    onMapLoaded: (mapUrl: string, mapSize: Size) => void;
+}
+declare const MapLayer: import("svelte").Component<Props, {
+    getCompositeMapTexture: () => THREE.Texture | null;
+    fill: () => void;
+    fit: () => void;
+    mapSize: Size | null;
+    fogOfWar: {
+        clear: () => void;
+        reset: () => void;
+        toPng: () => Promise<Blob>;
+        toRLE: () => Promise<Uint8Array<ArrayBufferLike>>;
+        fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
+        isDrawing: () => boolean;
+    };
+}, "">;
+type MapLayer = ReturnType<typeof MapLayer>;
+export default MapLayer;

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

@@ -0,0 +1,93 @@
+import * as THREE from 'three';
+import type { Size } from '../../../types';
+import type { IMapDataSource } from './IMapDataSource';
+/**
+ * Data source for loading and animating GIF images as textures in a 3D scene.
+ *
+ * This class implements the IMapDataSource interface to provide GIF animation
+ * capabilities for map layers. It handles GIF parsing, frame decompression,
+ * and real-time animation rendering using HTML5 Canvas and Three.js textures.
+ */
+export declare class GifDataSource implements IMapDataSource {
+    /** Canvas element used for rendering the GIF frames */
+    private gifCanvas;
+    /** 2D rendering context for the main GIF canvas */
+    private gifCtx;
+    /** Temporary canvas used for patch rendering of individual frames */
+    private tempCanvas;
+    /** 2D rendering context for the temporary canvas */
+    private tempCtx;
+    /** Three.js texture created from the GIF canvas */
+    private texture;
+    /** Dimensions of the GIF image */
+    private size;
+    /** Array of decompressed GIF frames */
+    private frames;
+    /** Index of the currently displayed frame */
+    private currentFrameIndex;
+    /** Animation frame ID for canceling the animation loop */
+    private animationId;
+    /** Timestamp when the animation started for timing calculations */
+    private startTime;
+    /** Timestamp of the last frame render */
+    private lastFrameTime;
+    /** The total time the animation has been playing */
+    private totalPlayTime;
+    /**
+     * Gets the Three.js texture containing the animated GIF.
+     *
+     * @returns The canvas texture with the current frame, or null if not loaded
+     */
+    getTexture(): THREE.Texture | null;
+    /**
+     * Gets the dimensions of the GIF image.
+     *
+     * @returns The width and height of the GIF, or null if not loaded
+     */
+    getSize(): Size | null;
+    /**
+     * Loads and initializes a GIF from a URL.
+     *
+     * This method fetches the GIF data, parses it, decompresses the frames,
+     * sets up the rendering canvases, and starts the animation loop.
+     *
+     * @param url - The URL of the GIF file to load
+     * @returns A promise that resolves when the GIF is loaded and ready
+     * @throws Error if the GIF cannot be fetched, parsed, or has no frames
+     */
+    load(url: string): Promise<void>;
+    /**
+     * Starts the GIF animation loop.
+     *
+     * This method initializes the animation by setting up the rendering context,
+     * starting the timing mechanism, and beginning the animation frame loop.
+     * The animation automatically loops when all frames have been displayed.
+     */
+    private startAnimation;
+    /**
+     * Renders a specific frame of the GIF animation.
+     *
+     * This method handles frame disposal methods and delegates the actual
+     * drawing to the drawPatch method.
+     *
+     * @param frameIndex - The index of the frame to render
+     */
+    private renderFrame;
+    /**
+     * Draws a frame patch onto the main canvas.
+     *
+     * This method uses a temporary canvas to efficiently render individual
+     * frame patches at their correct positions within the GIF.
+     *
+     * @param frame - The frame object containing patch data and dimensions
+     */
+    private drawPatch;
+    /**
+     * Disposes of all resources used by this data source.
+     *
+     * This method stops the animation loop, disposes of the Three.js texture,
+     * clears all canvas references, and resets internal state. It should be
+     * called before loading a new GIF or when the data source is no longer needed.
+     */
+    dispose(): void;
+}

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

@@ -0,0 +1,229 @@
+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 { decompressFrames, parseGIF } from 'gifuct-js';
+import * as THREE from 'three';
+/**
+ * Data source for loading and animating GIF images as textures in a 3D scene.
+ *
+ * This class implements the IMapDataSource interface to provide GIF animation
+ * capabilities for map layers. It handles GIF parsing, frame decompression,
+ * and real-time animation rendering using HTML5 Canvas and Three.js textures.
+ */
+export class GifDataSource {
+    constructor() {
+        /** Canvas element used for rendering the GIF frames */
+        this.gifCanvas = null;
+        /** 2D rendering context for the main GIF canvas */
+        this.gifCtx = null;
+        /** Temporary canvas used for patch rendering of individual frames */
+        this.tempCanvas = null;
+        /** 2D rendering context for the temporary canvas */
+        this.tempCtx = null;
+        /** Three.js texture created from the GIF canvas */
+        this.texture = null;
+        /** Dimensions of the GIF image */
+        this.size = null;
+        /** Array of decompressed GIF frames */
+        this.frames = [];
+        /** Index of the currently displayed frame */
+        this.currentFrameIndex = 0;
+        /** Animation frame ID for canceling the animation loop */
+        this.animationId = null;
+        /** Timestamp when the animation started for timing calculations */
+        this.startTime = 0;
+        /** Timestamp of the last frame render */
+        this.lastFrameTime = 0;
+        /** The total time the animation has been playing */
+        this.totalPlayTime = 0;
+    }
+    /**
+     * Gets the Three.js texture containing the animated GIF.
+     *
+     * @returns The canvas texture with the current frame, or null if not loaded
+     */
+    getTexture() {
+        return this.texture;
+    }
+    /**
+     * Gets the dimensions of the GIF image.
+     *
+     * @returns The width and height of the GIF, or null if not loaded
+     */
+    getSize() {
+        return this.size;
+    }
+    /**
+     * Loads and initializes a GIF from a URL.
+     *
+     * This method fetches the GIF data, parses it, decompresses the frames,
+     * sets up the rendering canvases, and starts the animation loop.
+     *
+     * @param url - The URL of the GIF file to load
+     * @returns A promise that resolves when the GIF is loaded and ready
+     * @throws Error if the GIF cannot be fetched, parsed, or has no frames
+     */
+    load(url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Dispose of previous resources
+            this.dispose();
+            return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                try {
+                    // Fetch the GIF data
+                    const response = yield fetch(url);
+                    const arrayBuffer = yield response.arrayBuffer();
+                    // Parse the GIF
+                    const gif = parseGIF(arrayBuffer);
+                    this.frames = decompressFrames(gif, true);
+                    if (this.frames.length === 0) {
+                        throw new Error('No frames found in GIF');
+                    }
+                    // Get dimensions from the first frame
+                    const firstFrame = this.frames[0];
+                    this.size = {
+                        width: firstFrame.dims.width,
+                        height: firstFrame.dims.height
+                    };
+                    // Create canvas for rendering
+                    this.gifCanvas = document.createElement('canvas');
+                    this.gifCanvas.width = this.size.width;
+                    this.gifCanvas.height = this.size.height;
+                    // Create temporary canvas for patch rendering
+                    this.tempCanvas = document.createElement('canvas');
+                    this.tempCtx = this.tempCanvas.getContext('2d');
+                    // Create texture from canvas
+                    this.texture = new THREE.CanvasTexture(this.gifCanvas);
+                    this.texture.colorSpace = THREE.SRGBColorSpace;
+                    // Start animation
+                    this.startAnimation();
+                    resolve();
+                }
+                catch (error) {
+                    console.error('Failed to load GIF:', error);
+                    reject(error);
+                }
+            }));
+        });
+    }
+    /**
+     * Starts the GIF animation loop.
+     *
+     * This method initializes the animation by setting up the rendering context,
+     * starting the timing mechanism, and beginning the animation frame loop.
+     * The animation automatically loops when all frames have been displayed.
+     */
+    startAnimation() {
+        if (!this.gifCanvas || this.frames.length === 0)
+            return;
+        this.gifCtx = this.gifCanvas.getContext('2d');
+        this.startTime = performance.now();
+        this.lastFrameTime = this.startTime;
+        this.currentFrameIndex = -1;
+        this.totalPlayTime = 0;
+        const animate = () => {
+            var _a;
+            this.animationId = requestAnimationFrame(animate);
+            const currentTime = performance.now();
+            const elapsedTime = currentTime - this.lastFrameTime;
+            this.lastFrameTime = currentTime;
+            const currentFrame = this.frames[this.currentFrameIndex];
+            const frameDelay = (_a = currentFrame === null || currentFrame === void 0 ? void 0 : currentFrame.delay) !== null && _a !== void 0 ? _a : 0;
+            this.totalPlayTime += elapsedTime;
+            // If the current frame has played for its duration, advance to the next frame
+            if (this.totalPlayTime >= frameDelay) {
+                this.totalPlayTime -= frameDelay;
+                this.currentFrameIndex++;
+                // Loop back to the beginning
+                if (this.currentFrameIndex >= this.frames.length) {
+                    this.currentFrameIndex = 0;
+                }
+                this.renderFrame(this.currentFrameIndex);
+                // Update texture
+                if (this.texture) {
+                    this.texture.needsUpdate = true;
+                }
+            }
+        };
+        // Start the animation loop
+        this.animationId = requestAnimationFrame(animate);
+    }
+    /**
+     * Renders a specific frame of the GIF animation.
+     *
+     * This method handles frame disposal methods and delegates the actual
+     * drawing to the drawPatch method.
+     *
+     * @param frameIndex - The index of the frame to render
+     */
+    renderFrame(frameIndex) {
+        const frame = this.frames[frameIndex];
+        // Clear canvas if disposal method requires it (like the example)
+        if (frame.disposalType === 2) {
+            this.gifCtx.clearRect(0, 0, this.gifCanvas.width, this.gifCanvas.height);
+        }
+        // Draw the patch using the temporary canvas approach
+        this.drawPatch(frame);
+    }
+    /**
+     * Draws a frame patch onto the main canvas.
+     *
+     * This method uses a temporary canvas to efficiently render individual
+     * frame patches at their correct positions within the GIF.
+     *
+     * @param frame - The frame object containing patch data and dimensions
+     */
+    drawPatch(frame) {
+        const dims = frame.dims;
+        // Resize temp canvas if needed
+        if (!this.tempCanvas || dims.width !== this.tempCanvas.width || dims.height !== this.tempCanvas.height) {
+            this.tempCanvas.width = dims.width;
+            this.tempCanvas.height = dims.height;
+        }
+        // Create ImageData for the patch
+        const frameImageData = this.tempCtx.createImageData(dims.width, dims.height);
+        // Set the patch data
+        frameImageData.data.set(frame.patch);
+        // Put the patch data on the temp canvas
+        this.tempCtx.putImageData(frameImageData, 0, 0);
+        // Draw the temp canvas onto the main canvas at the correct position
+        this.gifCtx.drawImage(this.tempCanvas, dims.left, dims.top);
+    }
+    /**
+     * Disposes of all resources used by this data source.
+     *
+     * This method stops the animation loop, disposes of the Three.js texture,
+     * clears all canvas references, and resets internal state. It should be
+     * called before loading a new GIF or when the data source is no longer needed.
+     */
+    dispose() {
+        // Stop animation
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+        // Dispose of texture
+        if (this.texture) {
+            this.texture.dispose();
+            this.texture = null;
+        }
+        // Clear canvas
+        if (this.gifCanvas) {
+            this.gifCanvas = null;
+        }
+        // Clear temp canvas
+        if (this.tempCanvas) {
+            this.tempCanvas = null;
+            this.tempCtx = null;
+        }
+        // Clear frames
+        this.frames = [];
+        this.currentFrameIndex = 0;
+        this.size = null;
+    }
+}

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

@@ -0,0 +1,51 @@
+import type * as THREE from 'three';
+import type { Size } from '../../../types';
+/**
+ * Interface for map data sources that provide textures for map layers.
+ *
+ * This interface defines the contract that all map data sources must implement.
+ * It provides a unified way to handle different types of media (images, videos, GIFs)
+ * as textures in a 3D map environment.
+ */
+export interface IMapDataSource {
+    /**
+     * Gets the texture to be displayed on the map plane.
+     *
+     * This can be a static texture, a video texture, or a canvas texture
+     * depending on the implementation. The texture is used to render the
+     * data source on a 3D plane in the scene.
+     *
+     * @returns The texture to be displayed on the map plane, or null if not loaded
+     */
+    getTexture(): THREE.Texture | null;
+    /**
+     * Gets the dimensions of the map source.
+     *
+     * Returns the width and height of the data source, which is used
+     * to properly size and position the map layer in the 3D scene.
+     *
+     * @returns The dimensions of the map source, or null if not loaded
+     */
+    getSize(): Size | null;
+    /**
+     * Loads the data source from a URL.
+     *
+     * This method handles the loading of different media types (images, videos, GIFs)
+     * from a given URL. The implementation should handle any necessary parsing,
+     * decompression, or setup required for the specific media type.
+     *
+     * @param url - The URL of the data source to load
+     * @returns A promise that resolves when the data source is loaded and ready
+     * @throws Error if the data source cannot be loaded or processed
+     */
+    load(url: string): Promise<void>;
+    /**
+     * Cleans up resources used by the data source.
+     *
+     * This method should dispose of any textures, canvases, video elements,
+     * or other resources that were created during the loading process.
+     * It should be called when the data source is no longer needed to
+     * prevent memory leaks.
+     */
+    dispose(): void;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,49 @@
+import * as THREE from 'three';
+import type { Size } from '../../../types';
+import type { IMapDataSource } from './IMapDataSource';
+/**
+ * Data source for loading static images as textures in a 3D scene.
+ *
+ * This class implements the IMapDataSource interface to provide static image
+ * loading capabilities for map layers. It uses Three.js TextureLoader to load
+ * various image formats and create textures suitable for 3D rendering.
+ */
+export declare class ImageDataSource implements IMapDataSource {
+    /** The loaded texture from the image file */
+    private texture;
+    /** Dimensions of the loaded image */
+    private size;
+    /** Three.js texture loader instance for loading images */
+    private loader;
+    /**
+     * Gets the Three.js texture containing the loaded image.
+     *
+     * @returns The texture with the loaded image, or null if not loaded
+     */
+    getTexture(): THREE.Texture | null;
+    /**
+     * Gets the dimensions of the loaded image.
+     *
+     * @returns The width and height of the image, or null if not loaded
+     */
+    getSize(): Size | null;
+    /**
+     * Loads an image from a URL and creates a texture.
+     *
+     * This method uses Three.js TextureLoader to load various image formats
+     * (JPG, PNG, WebP, etc.) and creates a texture with proper color space
+     * settings for 3D rendering.
+     *
+     * @param url - The URL of the image file to load
+     * @returns A promise that resolves when the image is loaded and ready
+     * @throws Error if the image cannot be loaded or processed
+     */
+    load(url: string): Promise<void>;
+    /**
+     * Disposes of the loaded texture and resets internal state.
+     *
+     * This method cleans up the Three.js texture to prevent memory leaks
+     * and resets the size information.
+     */
+    dispose(): void;
+}

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

@@ -0,0 +1,87 @@
+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 static images as textures in a 3D scene.
+ *
+ * This class implements the IMapDataSource interface to provide static image
+ * loading capabilities for map layers. It uses Three.js TextureLoader to load
+ * various image formats and create textures suitable for 3D rendering.
+ */
+export class ImageDataSource {
+    constructor() {
+        /** The loaded texture from the image file */
+        this.texture = null;
+        /** Dimensions of the loaded image */
+        this.size = null;
+        /** Three.js texture loader instance for loading images */
+        this.loader = new THREE.TextureLoader();
+    }
+    /**
+     * Gets the Three.js texture containing the loaded image.
+     *
+     * @returns The texture with the loaded image, or null if not loaded
+     */
+    getTexture() {
+        return this.texture;
+    }
+    /**
+     * Gets the dimensions of the loaded image.
+     *
+     * @returns The width and height of the image, or null if not loaded
+     */
+    getSize() {
+        return this.size;
+    }
+    /**
+     * Loads an image from a URL and creates a texture.
+     *
+     * This method uses Three.js TextureLoader to load various image formats
+     * (JPG, PNG, WebP, etc.) and creates a texture with proper color space
+     * settings for 3D rendering.
+     *
+     * @param url - The URL of the image file to load
+     * @returns A promise that resolves when the image is loaded and ready
+     * @throws Error if the image cannot be loaded or processed
+     */
+    load(url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Dispose of previous texture if it exists
+            this.dispose();
+            return new Promise((resolve, reject) => {
+                this.loader.load(url, (texture) => {
+                    texture.colorSpace = THREE.SRGBColorSpace;
+                    this.texture = texture;
+                    this.size = {
+                        width: texture.image.width,
+                        height: texture.image.height
+                    };
+                    resolve();
+                }, undefined, (error) => {
+                    console.error('Failed to load image:', error);
+                    reject(error);
+                });
+            });
+        });
+    }
+    /**
+     * Disposes of the loaded texture and resets internal state.
+     *
+     * This method cleans up the Three.js texture to prevent memory leaks
+     * and resets the size information.
+     */
+    dispose() {
+        if (this.texture) {
+            this.texture.dispose();
+            this.texture = null;
+        }
+        this.size = null;
+    }
+}

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

@@ -0,0 +1,52 @@
+import * as THREE from 'three';
+import type { Size } from '../../../types';
+import type { IMapDataSource } from './IMapDataSource';
+/**
+ * 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 declare class VideoDataSource implements IMapDataSource {
+    /** HTML video element used for video playback */
+    private videoElement;
+    /** Three.js video texture created from the video element */
+    private texture;
+    /** Dimensions of the video */
+    private size;
+    /**
+     * 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(): THREE.Texture | null;
+    /**
+     * Gets the dimensions of the loaded video.
+     *
+     * @returns The width and height of the video, or null if not loaded
+     */
+    getSize(): Size | null;
+    /**
+     * 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: string): Promise<void>;
+    /**
+     * 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(): void;
+}