move.gl 0.0.1 → 0.0.2

package/ts/InteractiveCanvas.ts

@@ -1,177 +0,0 @@
-// Copyright 2024 Scape Agency BV
-
-
-
-// Interactive Canvas Class
-// A class for an interactive canvas can enable users to draw, which is
-// beneficial for applications like signature pads, drawing tools, or educational apps.
-
-
-/**
- * @title Interactive Canvas for Drawing
- * @notice This class enables drawing functionalities on a canvas element, supporting features like brush customization, undo/redo actions, and touch responsiveness.
- * @dev Implements event listeners for both mouse and touch interactions, provides methods for brush customization, and maintains a history stack for undo/redo capabilities.
- */
- class InteractiveCanvas {
-    private canvas: HTMLCanvasElement;
-    private context: CanvasRenderingContext2D;
-    private painting: boolean = false;
-    private brushSize: number = 5;
-    private brushColor: string = '#000000';
-    private lineOpacity: number = 1.0;
-    private history: ImageData[] = [];
-    private historyStep: number = 0;
-
-    /**
-     * Constructs an InteractiveCanvas instance linked to a specific canvas element.
-     * @param canvasId The DOM ID of the canvas element.
-     */
-    constructor(canvasId: string) {
-        this.canvas = document.getElementById(canvasId) as HTMLCanvasElement;
-        this.context = this.canvas.getContext('2d')!;
-        this.setupCanvas();
-        this.attachEventListeners();
-    }
-
-    /**
-     * Sets up the canvas drawing context and adjusts the canvas size to its initial container.
-     */
-    private setupCanvas() {
-        this.context.lineWidth = this.brushSize;
-        this.context.lineCap = 'round';
-        this.context.strokeStyle = this.brushColor;
-        this.context.globalAlpha = this.lineOpacity;
-        window.addEventListener('resize', this.resizeCanvas);
-        this.resizeCanvas();
-    }
-
-    /**
-     * Attaches necessary event listeners for mouse and touch interactions.
-     */
-    private attachEventListeners() {
-        this.canvas.addEventListener('mousedown', this.startPaint);
-        this.canvas.addEventListener('mouseup', this.endPaint);
-        this.canvas.addEventListener('mousemove', this.paint);
-        this.canvas.addEventListener('touchstart', this.startPaint, { passive: false });
-        this.canvas.addEventListener('touchend', this.endPaint);
-        this.canvas.addEventListener('touchmove', this.paint, { passive: false });
-    }
-
-    /**
-     * Adjusts the canvas size to fit its container, ensuring that it is responsive to window size changes.
-     */
-    private resizeCanvas = () => {
-        this.canvas.width = this.canvas.offsetWidth;
-        this.canvas.height = this.canvas.offsetHeight;
-    };
-
-    /**
-     * Initiates painting on the canvas, records the initial position, and saves the state for undo functionality.
-     * @param event Mouse or touch event that triggers the start of painting.
-     */
-    private startPaint = (event: MouseEvent | TouchEvent) => {
-        event.preventDefault();
-        this.painting = true;
-        const pos = this.getEventPosition(event);
-        this.context.moveTo(pos.x, pos.y);
-        this.context.beginPath();
-        this.saveState();
-    };
-
-    /**
-     * Stops the painting process on the canvas.
-     */
-    private endPaint = () => {
-        this.painting = false;
-    };
-
-    /**
-     * Continues the painting process, drawing lines based on mouse or touch movements.
-     * @param event Mouse or touch event containing the current position for painting.
-     */
-    private paint = (event: MouseEvent | TouchEvent) => {
-        if (!this.painting) return;
-        const pos = this.getEventPosition(event);
-        this.context.lineTo(pos.x, pos.y);
-        this.context.stroke();
-    };
-
-    /**
-     * Calculates the precise position of the mouse or touch event relative to the canvas.
-     * @param event Mouse or touch event.
-     * @returns The calculated position as an object with x and y coordinates.
-     */
-    private getEventPosition(event: MouseEvent | TouchEvent) {
-        if (event instanceof TouchEvent) {
-            const rect = this.canvas.getBoundingClientRect();
-            const touch = event.touches[0];
-            return { x: touch.clientX - rect.left, y: touch.clientY - rect.top };
-        } else {
-            return { x: event.clientX - this.canvas.offsetLeft, y: event.clientY - this.canvas.offsetTop };
-        }
-    }
-
-    /**
-     * Sets the brush size for painting.
-     * @param size New brush size.
-     */
-    public setBrushSize(size: number) {
-        this.brushSize = size;
-        this.context.lineWidth = size;
-    }
-
-    /**
-     * Sets the color of the brush.
-     * @param color New brush color in CSS format.
-     */
-    public setBrushColor(color: string) {
-        this.brushColor = color;
-        this.context.strokeStyle = color;
-    }
-
-    /**
-     * Sets the opacity of the brush strokes.
-     * @param opacity A value between 0.0 (fully transparent) and 1.0 (fully opaque).
-     */
-    public setOpacity(opacity: number) {
-        this.lineOpacity = opacity;
-        this.context.globalAlpha = opacity;
-    }
-
-    /**
-     * Undoes the last action taken on the canvas, reverting to the previous state.
-     */
-    public undo() {
-        if (this.historyStep > 0) {
-            this.historyStep--;
-            this.context.putImageData(this.history[this.historyStep], 0, 0);
-        }
-    }
-
-    /**
-     * Redoes an action that was previously undone on the canvas, if possible.
-     */
-    public redo() {
-        if (this.historyStep < this.history.length - 1) {
-            this.historyStep++;
-            this.context.putImageData(this.history[this.historyStep], 0, 0);
-        }
-    }
-
-    /**
-     * Saves the current state of the canvas for future undo operations.
-     */
-    private saveState() {
-        if (this.historyStep < this.history.length) this.history.splice(this.historyStep);
-        this.history.push(this.context.getImageData(0, 0, this.canvas.width, this.canvas.height));
-        this.historyStep = this.history.length;
-    }
-
-    /**
-     * Clears the entire canvas and saves the state for undo functionality.
-     */
-    public clearCanvas() {
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.saveState();
-    }
-}

package/ts/InteractiveVideo.ts

@@ -1,29 +0,0 @@
-/**
- * @title Interactive Video Playback Handler
- * @notice Manages complex interactive video elements within web applications.
- */
- class InteractiveVideoHandler {
-    private videoElement: HTMLVideoElement;
-
-    constructor(videoId: string) {
-        this.videoElement = document.getElementById(videoId) as HTMLVideoElement;
-    }
-
-    public addHotspot(x: number, y: number, callback: () => void) {
-        const hotspot = document.createElement("button");
-        hotspot.style.position = "absolute";
-        hotspot.style.left = `${x}px`;
-        hotspot.style.top = `${y}px`;
-        hotspot.innerText = "Click me!";
-        hotspot.addEventListener("click", callback);
-        this.videoElement.parentElement!.appendChild(hotspot);
-    }
-
-    public play() {
-        this.videoElement.play();
-    }
-
-    public pause() {
-        this.videoElement.pause();
-    }
-}

package/ts/Keyboard.ts

@@ -1,162 +0,0 @@
-// Copyright 2024 Scape Agency BV
-
-
-/**
- * @title Virtual Keyboard
- * @notice Manages the rendering and interaction of a virtual keyboard on
- * the web.
- * @dev This class supports multiple layouts (default, shift, special) and
- * handles both mouse and keyboard inputs, including touch support.
- */
- class VirtualKeyboard {
-
-    private keys: { [mode: string]: string[][] } = {
-        'default': [
-            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
-            ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
-            ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
-            ['z', 'x', 'c', 'v', 'b', 'n', 'm', 'Backspace']
-        ],
-        'shift': [
-            ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')'],
-            ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
-            ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
-            ['Z', 'X', 'C', 'V', 'B', 'N', 'M', 'Backspace']
-        ],
-        'special': [
-            ['[', ']', '{', '}', '#', '%', '^', '*', '+', '='],
-            ['_', '\\', '|', '~', '<', '>', '€', '£', '¥'],
-            ['.', ',', '?', '!', "'", '"', ':', ';', 'Backspace']
-        ]
-    };
-    private currentMode = 'default';
-    private inputElement: HTMLInputElement;
-    private keyboardElement: HTMLElement;
-
-    /**
-     * @notice Initializes the virtual keyboard with specific input and
-     * keyboard element IDs.
-     * @param inputId The ID of the HTML input element to which the keyboard
-     * will be linked.
-     * @param keyboardId The ID of the container element where the keyboard
-     * will be rendered.
-     */
-    constructor(inputId: string, keyboardId: string) {
-        this.inputElement = document.getElementById(
-            inputId
-        ) as HTMLInputElement;
-        this.keyboardElement = document.getElementById(
-            keyboardId
-        ) as HTMLElement;
-        this.renderKeyboard();
-        this.attachEventListeners();
-    }
-
-    /**
-     * @notice Renders the keyboard based on the current mode (default, shift,
-     * or special).
-     * @dev Dynamically creates HTML for keyboard keys and appends them to the
-     * keyboardElement.
-     */
-    private renderKeyboard() {
-        // Clear existing keys
-        this.keyboardElement.innerHTML = '';
-        this.keys[this.currentMode].forEach(row => {
-            const rowElement = document.createElement('div');
-            row.forEach(key => {
-                const keyElement = document.createElement('div');
-                keyElement.textContent = key;
-                // Assign a class for easier CSS styling
-                keyElement.className = 'key';
-                keyElement.addEventListener(
-                    'click', () => this.handleKeyPress(key)
-                );
-                rowElement.appendChild(keyElement);
-            });
-            this.keyboardElement.appendChild(rowElement);
-        });
-    }
-
-    /**
-     * @notice Handles key presses on the virtual keyboard.
-     * @param key The key character or function (like 'Backspace') that was
-     * pressed.
-     */
-    private handleKeyPress(key: string) {
-        if (key === 'Backspace') {
-            this.inputElement.value = this.inputElement.value.slice(0, -1);
-        } else if (key === 'Shift' || key === 'CapsLock') {
-            this.toggleShift();
-        } else {
-            this.inputElement.value += key;
-        }
-    }
-
-    /**
-     * @notice Toggles the keyboard between 'default' and 'shift' modes.
-     * @dev This method is called when the 'Shift' or 'CapsLock' key is pressed.
-     */
-    private toggleShift() {
-        this.currentMode = this.currentMode === 'default' ? 'shift' : 'default';
-        this.renderKeyboard();
-    }
-
-    /**
-     * @notice Attaches necessary event listeners to handle both physical
-     * keyboard and touch inputs.
-     */
-    private attachEventListeners() {
-        document.addEventListener('keydown', this.handlePhysicalKeyPress);
-        this.keyboardElement.addEventListener(
-            'touchstart', this.handleTouchStart, false
-        );
-    }
-
-    /**
-     * @notice Handles physical keyboard events and maps them to virtual key
-     * presses.
-     * @param event The keyboard event captured from the user's physical
-     * keyboard.
-     */
-    private handlePhysicalKeyPress = (event: KeyboardEvent) => {
-        const key = event.key;
-        if (key === 'Shift' || key === 'CapsLock') {
-            this.toggleShift();
-            event.preventDefault();
-        } else if (key === 'Enter' || key === 'Tab') {
-            // Optional: Implement behavior for Enter and Tab if needed
-        } else {
-            this.handleKeyPress(key);
-        }
-    };
-
-    /**
-     * @notice Handles touch events on the keyboard element.
-     * @param event The touch event on the virtual keyboard.
-     */
-    private handleTouchStart = (event: TouchEvent) => {
-        event.preventDefault(); // Prevents emulating mouse events
-        const keyElement = event.target as HTMLElement;
-        if (keyElement.classList.contains('key')) {
-            this.handleKeyPress(keyElement.textContent || '');
-        }
-    };
-
-    /**
-     * @notice Switches the keyboard layout to a specified mode.
-     * @param mode The mode to which the keyboard layout should switch
-     * ('default', 'shift', or 'special').
-     */
-    public switchMode(mode: string) {
-        if (this.keys[mode]) {
-            this.currentMode = mode;
-            this.renderKeyboard();
-        }
-    }
-}
-
-// Example usage:
-const keyboard = new VirtualKeyboard('textInput', 'keyboard');
-document.getElementById(
-    'switchToSpecial'
-).addEventListener('click', () => keyboard.switchMode('special'));

package/ts/RealTimeCollaboration.ts

@@ -1,25 +0,0 @@
-/**
- * @title Real-Time Collaboration Handler
- * @notice Facilitates real-time interaction and collaboration in virtual environments.
- * @dev Leverages WebSockets or WebRTC to synchronize user activities across different sessions.
- */
- class RealTimeCollaborationHandler {
-    private socket: WebSocket;
-
-    constructor(serverUrl: string) {
-        this.socket = new WebSocket(serverUrl);
-        this.socket.onmessage = this.handleMessage;
-        this.socket.onopen = () => console.log("Connection established for real-time collaboration.");
-    }
-
-    private handleMessage = (message: MessageEvent) => {
-        const data = JSON.parse(message.data);
-        console.log("Received data for collaboration:", data);
-        // Process and apply data to the collaborative environment
-    }
-
-    public sendUpdate(data: object) {
-        this.socket.send(JSON.stringify(data));
-        console.log("Sent update:", data);
-    }
-}

package/ts/Screensaver.ts

@@ -1,140 +0,0 @@
-// Copyright 2024 Scape Agency BV
-
-
-/**
- * @title Screensaver Class
- * @notice Handles the activation and deactivation of a screensaver based on
- * user inactivity.
- * @dev This class provides methods to start and stop the screensaver, manage
- * media sources, and handle user interactions.
- */
- class Screensaver {
-
-    private timeoutId: number | undefined;
-    private readonly timeout: number;
-    private screensaverElement: HTMLElement | undefined;
-    private videoElement: HTMLVideoElement | undefined;
-    private audioElement: HTMLAudioElement | undefined;
-    private isActive: boolean = false;
-
-    /**
-     * @notice Initializes a new Screensaver instance.
-     * @param timeout The inactivity timeout in milliseconds after which the
-     * screensaver activates.
-     * @param videoUrl The URL for the video to be played when the screensaver
-     * activates.
-     * @param audioUrl The URL for the audio to be played when the screensaver
-     * activates.
-     */
-    constructor(timeout: number, videoUrl: string, audioUrl: string) {
-        this.timeout = timeout;
-        this.initializeElements();
-        this.loadMedia(videoUrl, audioUrl);
-        this.setupEventListeners();
-    }
-
-    /**
-     * @notice Initializes HTML elements from the DOM.
-     * @dev Queries the DOM to get the screensaver, video, and audio elements
-     * by their IDs.
-     */
-    private initializeElements() {
-        this.screensaverElement = document.getElementById("screensaver")!;
-        this.videoElement = document.getElementById(
-            "screensaverVideo"
-        ) as HTMLVideoElement;
-        this.audioElement = document.getElementById(
-            "screensaverAudio"
-        ) as HTMLAudioElement;
-    }
-
-    /**
-     * @notice Loads media sources into the video and audio elements.
-     * @param videoUrl The source URL of the video.
-     * @param audioUrl The source URL of the audio.
-     */
-    private loadMedia(videoUrl: string, audioUrl: string) {
-        this.videoElement.src = videoUrl;
-        this.audioElement.src = audioUrl;
-    }
-
-    /**
-     * @notice Sets up event listeners for user interaction to prevent
-     * screensaver activation.
-     * @dev Listens for 'mousemove', 'keydown', and 'touchstart' events
-     * to reset the screensaver timer.
-     */
-    private setupEventListeners() {
-        ['mousemove', 'keydown', 'touchstart'].forEach(event => {
-            document.addEventListener(event, this.resetScreensaver);
-        });
-    }
-
-    /**
-     * @notice Starts or restarts the screensaver timeout.
-     * @dev Resets any existing timeout and sets a new timeout to activate
-     * the screensaver.
-     */
-    private startScreensaverTimeout() {
-        this.stopScreensaver(); // Stop existing screensaver if active
-        this.timeoutId = window.setTimeout(
-            () => this.activateScreensaver(), this.timeout
-        );
-    }
-
-    /**
-     * @notice Resets the screensaver timer and stops the screensaver if
-     * active.
-     * @dev Called upon user interactions detected by event listeners.
-     */
-    private resetScreensaver = () => {
-        if (this.isActive) {
-            this.stopScreensaver();
-        }
-        this.startScreensaverTimeout();
-    };
-
-    /**
-     * @notice Activates the screensaver, displaying elements and playing media.
-     */
-    private activateScreensaver = () => {
-        this.screensaverElement.style.display = 'block';
-        this.videoElement.play();
-        this.audioElement.play();
-        this.isActive = true;
-    };
-
-    /**
-     * @notice Stops the screensaver and hides its elements.
-     * @dev Pauses media playback and clears the activation timeout.
-     */
-    private stopScreensaver() {
-        this.screensaverElement.style.display = 'none';
-        this.videoElement.pause();
-        this.audioElement.pause();
-        this.isActive = false;
-
-        if (this.timeoutId !== undefined) {
-            clearTimeout(this.timeoutId);
-            this.timeoutId = undefined;
-        }
-    }
-
-    /**
-     * @notice Sets the volume for both video and audio elements of the
-     * screensaver.
-     * @param volume A number between 0.0 and 1.0 indicating the volume level.
-     */
-    public setVolume(volume: number) {
-        this.videoElement.volume = volume;
-        this.audioElement.volume = volume;
-    }
-}
-
-// Example usage:
-const screensaver = new Screensaver(
-    300000,
-    'path/to/video.mp4',
-    'path/to/audio.mp3'
-); // Initialize the screensaver with a 5-minute timeout
-screensaver.setVolume(0.5); // Set initial volume to 50%

package/ts/SpatialNavigation.ts

@@ -1,38 +0,0 @@
-/**
- * @title Spatial Navigation Handler
- * @notice Provides navigation controls for moving through a 3D space or virtual environments.
- * @dev Supports both keyboard and other input methods for movement and rotation in a 3D space.
- */
- class SpatialNavigationHandler {
-    private position: { x: number; y: number; z: number } = { x: 0, y: 0, z: 0 };
-    private rotation: { yaw: number; pitch: number; roll: number } = { yaw: 0, pitch: 0, roll: 0 };
-
-    constructor() {
-        document.addEventListener('keydown', this.handleKeyInput);
-    }
-
-    private handleKeyInput = (event: KeyboardEvent) => {
-        switch(event.key) {
-            case 'ArrowUp':
-                this.position.y += 1; // Move up
-                break;
-            case 'ArrowDown':
-                this.position.y -= 1; // Move down
-                break;
-            case 'ArrowLeft':
-                this.rotation.yaw -= 5; // Turn left
-                break;
-            case 'ArrowRight':
-                this.rotation.yaw += 5; // Turn right
-                break;
-            case 'w':
-                this.position.z += 1; // Move forward
-                break;
-            case 's':
-                this.position.z -= 1; // Move backward
-                break;
-            // Add more controls as needed
-        }
-        console.log(`Position: (${this.position.x}, ${this.position.y}, ${this.position.z}), Rotation: (${this.rotation.yaw}, ${this.rotation.pitch}, ${this.rotation.roll})`);
-    };
-}

package/ts/UserProfile.ts

@@ -1,27 +0,0 @@
-/**
- * @title User Profile and Preferences Handler
- * @notice Manages user-specific settings and preferences for an immersive web application.
- * @dev Stores and retrieves user preferences from local storage or a remote database.
- */
- class UserProfileHandler {
-    private preferences: Map<string, any> = new Map();
-
-    constructor() {
-        this.loadPreferences();
-    }
-
-    private loadPreferences() {
-        console.log("Loading user preferences...");
-        // Load preferences from local storage or a database.
-    }
-
-    public setPreference(key: string, value: any) {
-        this.preferences.set(key, value);
-        console.log(`Preference ${key} set to`, value);
-        // Optionally save to local storage or update the database.
-    }
-
-    public getPreference(key: string) {
-        return this.preferences.get(key);
-    }
-}

package/ts/VRExperience.ts

@@ -1,58 +0,0 @@
-/**
- * @title VR Experience Handler
- * @notice Manages Virtual Reality scenes and interactions using WebXR.
- * @dev Provides an easy interface to setup, control, and interact with VR content.
- */
- class VRExperienceHandler {
-    private xrSession: XRSession | null = null;
-
-    constructor(private container: HTMLElement) {
-        if ('xr' in navigator) {
-            this.initVR();
-        } else {
-            console.error("WebXR not available.");
-        }
-    }
-
-    private async initVR() {
-        try {
-            this.xrSession = await navigator.xr.requestSession('immersive-vr', {
-                optionalFeatures: ['local-floor', 'bounded-floor']
-            });
-            this.xrSession.addEventListener('end', this.onSessionEnded);
-            this.setupXRWebGLLayer();
-        } catch (error) {
-            console.error("Failed to create XR Session: ", error);
-        }
-    }
-
-    private setupXRWebGLLayer() {
-        const gl = this.container.querySelector('canvas')!.getContext('webgl2')!;
-        this.xrSession!.updateRenderState({
-            baseLayer: new XRWebGLLayer(this.xrSession, gl)
-        });
-    }
-
-    private onSessionEnded = () => {
-        console.log("VR session ended.");
-        this.xrSession = null;
-    }
-
-    public startRendering() {
-        if (!this.xrSession) {
-            console.error("XR Session is not initialized.");
-            return;
-        }
-
-        this.xrSession.requestAnimationFrame((time, frame) => this.renderFrame(time, frame));
-    }
-
-    private renderFrame(time: DOMHighResTimeStamp, frame: XRFrame) {
-        const session = frame.session;
-        const pose = frame.getViewerPose(xrReferenceSpace);
-
-        if (pose) {
-            // Update your scene's rendering based on user's position
-        }
-    }
-}