move.gl 0.0.1

package/ts/AdaptiveUI.ts

@@ -0,0 +1,25 @@
+/**
+ * @title Adaptive UI Elements Handler
+ * @notice Dynamically adjusts UI components based on user interactions and environmental contexts.
+ * @dev Utilizes event listeners and media queries to adapt the UI for different user needs and device capabilities.
+ */
+ class AdaptiveUIHandler {
+    constructor() {
+        this.setupResponsiveListeners();
+    }
+
+    private setupResponsiveListeners() {
+        window.addEventListener('resize', this.adjustLayout);
+        window.addEventListener('orientationchange', this.adjustLayout);
+    }
+
+    private adjustLayout = () => {
+        if (window.innerWidth < 600) {
+            console.log("Switching to mobile layout");
+            // Adjust UI for mobile layout.
+        } else {
+            console.log("Switching to desktop layout");
+            // Adjust UI for desktop layout.
+        }
+    }
+}

package/ts/ContentStreaming.ts

@@ -0,0 +1,20 @@
+/**
+ * @title Dynamic Content Streaming Handler
+ * @notice Manages the streaming and dynamic loading of content into web applications, optimizing for network and rendering performance.
+ * @dev Utilizes service workers and caching strategies to manage content delivery and updates.
+ */
+ class ContentStreamingHandler {
+    constructor(private baseUrl: string) {}
+
+    public async streamContent(contentPath: string) {
+        const response = await fetch(`${this.baseUrl}/${contentPath}`);
+        if (!response.ok) {
+            throw new Error('Failed to load content: ' + response.statusText);
+        }
+        return response.blob(); // Return the raw data for further processing or direct display
+    }
+
+    public updateContentCache(contentId: string, data: Blob) {
+        // Use IndexedDB or local storage to cache content for offline use or quicker loading
+    }
+}

package/ts/Draggable.ts

@@ -0,0 +1,71 @@
+// Copyright 2024 Scape Agency BV
+
+
+// Draggable Element Class
+// Creating draggable elements on the screen can enhance interactivity, especially for applications that involve organizing or direct manipulation of elements, such as dashboards or graphic editors.
+
+
+/**
+ * @title Draggable Element Handler
+ * @notice Provides functionality to make an element draggable within the confines of its parent container.
+ * @dev Supports both mouse and touch interactions, ensuring usability across different devices.
+ */
+ class Draggable {
+    private element: HTMLElement;
+    private isDragging: boolean = false;
+    private startX: number;
+    private startY: number;
+    private boundRect: DOMRect;
+
+    constructor(elementId: string) {
+        this.element = document.getElementById(elementId) as HTMLElement;
+        this.boundRect = this.element.parentElement!.getBoundingClientRect();
+        this.attachEventListeners();
+    }
+
+    private attachEventListeners() {
+        this.element.addEventListener('mousedown', this.startDrag);
+        this.element.addEventListener('touchstart', this.startDrag, { passive: false });
+
+        document.addEventListener('mouseup', this.stopDrag);
+        document.addEventListener('touchend', this.stopDrag);
+
+        document.addEventListener('mousemove', this.drag);
+        document.addEventListener('touchmove', this.drag, { passive: false });
+    }
+
+    private startDrag = (event: MouseEvent | TouchEvent) => {
+        if (event instanceof TouchEvent) {
+            event = event.touches[0];
+        }
+        this.isDragging = true;
+        this.startX = event.clientX - this.element.offsetLeft;
+        this.startY = event.clientY - this.element.offsetTop;
+        event.preventDefault();
+    };
+
+    private drag = (event: MouseEvent | TouchEvent) => {
+        if (!this.isDragging) return;
+        if (event instanceof TouchEvent) {
+            event = event.touches[0];
+        }
+
+        let x = event.clientX - this.startX;
+        let y = event.clientY - this.startY;
+
+        // Constrain the movement within the bounds of the element's parent
+        x = Math.max(this.boundRect.left, Math.min(x, this.boundRect.right - this.element.offsetWidth));
+        y = Math.max(this.boundRect.top, Math.min(y, this.boundRect.bottom - this.element.offsetHeight));
+
+        this.element.style.left = `${x}px`;
+        this.element.style.top = `${y}px`;
+    };
+
+    private stopDrag = () => {
+        if (this.isDragging) {
+            this.isDragging = false;
+        }
+    };
+}
+
+new Draggable('draggableElement');

package/ts/DynamicEnvironment.ts

@@ -0,0 +1,60 @@
+/**
+ * @title Dynamic Environment Handler
+ * @notice Controls dynamic changes in the virtual environment to enhance immersion.
+ * @dev Manages environmental effects like lighting, weather, and background changes.
+ */
+ class DynamicEnvironmentHandler {
+    private environmentSettings: any;
+
+    constructor(private scene: any) {
+        this.environmentSettings = {
+            lighting: 'daylight',
+            weather: 'clear'
+        };
+    }
+
+    public changeLighting(type: string) {
+        // Change lighting type in the scene
+        this.environmentSettings.lighting = type;
+    }
+
+    public changeWeather(type: string) {
+        // Implement weather changes such as rain, snow, or fog
+        this.environmentSettings.weather = type;
+    }
+
+    public updateEnvironment() {
+        // Apply the changes to the scene based on current settings
+    }
+}
+
+
+
+
+/**
+ * @title Environmental Effects Handler
+ * @notice Manages and applies dynamic environmental effects within immersive web applications.
+ * @dev Provides an API to change environmental conditions programmatically.
+ */
+ class EnvironmentalEffectsHandler {
+    private scene: any; // This would be your 3D scene object from a library like Three.js
+
+    constructor(scene: any) {
+        this.scene = scene;
+    }
+
+    public changeWeather(weatherType: string) {
+        console.log(`Changing weather to ${weatherType}`);
+        // Implementation depends on how weather effects are visualized. This could involve changing textures, particle systems, etc.
+    }
+
+    public toggleDayNight(isNight: boolean) {
+        console.log(`Setting environment to ${isNight ? "night" : "day"}`);
+        // Adjust lighting, skybox, and other environmental factors to reflect day or night
+    }
+
+    public triggerLightning() {
+        console.log("Triggering lightning effect");
+        // Activate a lightning effect with visuals and sound
+    }
+}

package/ts/Gesture.ts

@@ -0,0 +1,168 @@
+// Copyright 2024 Scape Agency BV
+
+
+// Touch Gesture Handler Class
+// A class for handling touch gestures can interpret user input like swipes, taps, and pinch actions, which are common in mobile and modern web applications.
+
+
+/**
+ * @title Touch Gesture Handler Class
+ * @notice Manages touch interactions on a specified element, interpreting various gestures like taps, swipes, and pinches.
+ * @dev This class attaches touch event listeners to an element and interprets common gestures by analyzing touch points.
+ */
+ class TouchGestureHandler {
+    private element: HTMLElement;
+    private startTouches: TouchList | null = null;
+    private isSwiping = false;
+    private isPinching = false;
+
+    constructor(elementId: string) {
+        this.element = document.getElementById(elementId) as HTMLElement;
+        this.addTouchListeners();
+    }
+
+    private addTouchListeners() {
+        this.element.addEventListener('touchstart', this.handleTouchStart, false);
+        this.element.addEventListener('touchmove', this.handleTouchMove, false);
+        this.element.addEventListener('touchend', this.handleTouchEnd, false);
+    }
+
+    private handleTouchStart = (event: TouchEvent) => {
+        if (event.touches.length === 1) {
+            this.startTouches = event.touches;
+            console.log("Tap started or potential swipe:", event.touches);
+        } else if (event.touches.length > 1) {
+            this.startTouches = event.touches;
+            console.log("Pinch started or potential rotation:", event.touches);
+            this.isPinching = true;
+        }
+    };
+
+    private handleTouchMove = (event: TouchEvent) => {
+        if (event.touches.length === 1 && this.startTouches && !this.isPinching) {
+            const dx = event.touches[0].clientX - this.startTouches[0].clientX;
+            const dy = event.touches[0].clientY - this.startTouches[0].clientY;
+            if (Math.abs(dx) > 10 || Math.abs(dy) > 10) {
+                this.isSwiping = true;
+                console.log(`Swipe detected: deltaX = ${dx}, deltaY = ${dy}`);
+            }
+        } else if (event.touches.length > 1 && this.isPinching) {
+            const startDistance = this.getDistance(this.startTouches[0], this.startTouches[1]);
+            const currentDistance = this.getDistance(event.touches[0], event.touches[1]);
+            const scale = currentDistance / startDistance;
+            console.log(`Pinch scaling factor: ${scale}`);
+        }
+    };
+
+    private handleTouchEnd = (event: TouchEvent) => {
+        if (this.isSwiping) {
+            console.log("Swipe ended");
+            this.isSwiping = false;
+        } else if (this.isPinching) {
+            console.log("Pinch ended");
+            this.isPinching = false;
+        } else {
+            console.log("Tap confirmed");
+        }
+        this.startTouches = null;
+    };
+
+    /**
+     * Calculates the distance between two touch points.
+     * @param touch1 First touch point.
+     * @param touch2 Second touch point.
+     * @returns Distance in pixels.
+     */
+    private getDistance(touch1: Touch, touch2: Touch): number {
+        const dx = touch2.clientX - touch1.clientX;
+        const dy = touch2.clientY - touch1.clientY;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+}
+
+new TouchGestureHandler('touchElement');
+
+
+
+
+
+
+
+/**
+ * @title Advanced Gesture Recognition Handler
+ * @notice Handles complex gestures for interactive applications, enhancing user experience with intuitive controls.
+ * @dev Utilizes pointer events to detect and interpret various gestures.
+ */
+ class AdvancedGestureRecognition {
+    private element: HTMLElement;
+    private ongoingTouches: Map<number, Touch> = new Map();
+
+    constructor(elementId: string) {
+        this.element = document.getElementById(elementId) as HTMLElement;
+        this.attachEventListeners();
+    }
+
+    private attachEventListeners() {
+        this.element.addEventListener('pointerdown', this.handleGestureStart, { passive: false });
+        this.element.addEventListener('pointermove', this.handleGestureMove, { passive: false });
+        this.element.addEventListener('pointerup', this.handleGestureEnd, { passive: false });
+    }
+
+    private handleGestureStart = (event: PointerEvent) => {
+        this.ongoingTouches.set(event.pointerId, event);
+        console.log("Gesture started:", event.pointerType);
+    };
+
+    private handleGestureMove = (event: PointerEvent) => {
+        if (this.ongoingTouches.has(event.pointerId)) {
+            const startEvent = this.ongoingTouches.get(event.pointerId)!;
+            const dx = event.clientX - startEvent.clientX;
+            const dy = event.clientY - startEvent.clientY;
+            console.log(`Gesture moved: ${dx}px horizontal, ${dy}px vertical`);
+        }
+    };
+
+    private handleGestureEnd = (event: PointerEvent) => {
+        this.ongoingTouches.delete(event.pointerId);
+        console.log("Gesture ended");
+    };
+}
+
+
+
+
+/**
+ * @title Advanced Interaction Controls
+ * @notice Enhances user interactions within immersive environments with sophisticated input methods.
+ * @dev Integrates gesture recognition, voice commands, and potentially eye tracking for advanced control.
+ */
+ class AdvancedInteractionControls {
+    constructor() {
+        this.initializeGestureControls();
+        this.initializeVoiceCommands();
+    }
+
+    private initializeGestureControls() {
+        console.log("Gesture controls initialized.");
+        // Setup gesture recognition logic or integrate with a library like Hammer.js
+    }
+
+    private initializeVoiceCommands() {
+        console.log("Voice command system initialized.");
+        // Setup voice recognition using APIs like the Web Speech API
+    }
+
+    public onGestureRecognized(gesture: string) {
+        console.log(`Gesture recognized: ${gesture}`);
+        // Respond to specific gestures
+    }
+
+    public onVoiceCommand(command: string) {
+        console.log(`Voice command received: ${command}`);
+        // Execute actions based on voice commands
+    }
+}
+
+
+
+

package/ts/ImmersiveAudio.ts

@@ -0,0 +1,40 @@
+/**
+ * @title Immersive Audio Handler
+ * @notice Provides control over spatial and immersive audio in web applications.
+ */
+ class ImmersiveAudioHandler {
+    private audioContext: AudioContext;
+    private listener: AudioListener;
+    private soundSources: Map<string, AudioBufferSourceNode> = new Map();
+
+    constructor() {
+        this.audioContext = new AudioContext();
+        this.listener = this.audioContext.listener;
+    }
+
+    public loadSound(url: string, id: string): Promise<void> {
+        return fetch(url)
+            .then(response => response.arrayBuffer())
+            .then(buffer => this.audioContext.decodeAudioData(buffer))
+            .then(decodedBuffer => {
+                const source = this.audioContext.createBufferSource();
+                source.buffer = decodedBuffer;
+                source.connect(this.audioContext.destination);
+                this.soundSources.set(id, source);
+            });
+    }
+
+    public playSound(id: string) {
+        const source = this.soundSources.get(id);
+        if (source) {
+            source.start();
+        }
+    }
+
+    public stopSound(id: string) {
+        const source = this.soundSources.get(id);
+        if (source) {
+            source.stop();
+        }
+    }
+}

package/ts/InteractiveCanvas.ts

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

@@ -0,0 +1,29 @@
+/**
+ * @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();
+    }
+}