move.gl 0.0.1 → 0.0.2

package/scss/variables/_animation.scss

@@ -1,91 +0,0 @@
-
-// ============================================================================
-// StyleScape | Animations | Base
-// ============================================================================
-
-@use "../dev" as *;
-
-
-// Default Variables
-// ----------------------------------------------------------------------------
-
-$animate_base_duration: 1s !default;
-$animate_base_duration_fast: 0.5s !default;
-$animate_base_duration_slow: 2s !default;
-
-$animate_base_delay: 0s !default;
-$animate_base_timing_function: ease-in-out !default;
-$animate_base_iteration_count: infinite !default;
-$animate_base_direction: normal !default;
-$animate_base_color_start: #ffffff !default;
-$animate_base_color_end: #000000 !default;
-$animate_base_color_glow_01: $N2405 !default;
-$animate_base_color_glow_02: $N3005 !default;
-$animate_base_color_glow_03: $N3605 !default;
-
-
-// ============================================================================
-
-$transition_duration_00:    0.5s;
-$transition_duration_01:    1.0s;
-$transition_duration_02:    1.5s;
-$transition_duration_03:    2.0s;
-
-
-
-$slideshow-time: 6s;
-
-
-
-// ============================================================================
-
-/// Default animation durations
-$animate-base-duration: 0.5s !default;
-$animate-base-duration-slow: 1s !default;
-$animate-base-duration-fast: 0.25s !default;
-
-/// Default timing functions
-$animate-base-timing-function: ease-in-out !default;
-$animate-base-timing-function-fade: cubic-bezier(.4, 0, .6, 1) !default;
-
-/// Default iteration counts
-$animate-base-iteration-count: infinite !default;
-
-/// Default scale values
-$animate-scale-base: 1 !default;
-$animate-scale-beat: 1.25 !default;
-$animate-scale-beat-fade: 1.125 !default;
-$animate-scale-beat-double-small: 0.8 !default;
-$animate-scale-beat-double-large: 1.5 !default;
-
-/// Default opacity values
-$animate-opacity-fade: 0.4 !default;
-
-/// Default angles
-$animate-angle-twist: 10deg !default;
-$animate-angle-gentle: 5deg !default;
-$animate-angle-rapid: 15deg !default;
-
-
-
-
-
-
-/// Animation Durations
-$animate-base-duration: 0.5s !default;
-$animate-base-duration-slow: 1s !default;
-$animate-base-duration-fast: 0.25s !default;
-
-/// Timing Functions
-$animate-base-timing-function: step-end !default;
-$animate-timing-function-rapid: steps(2, end) !default;
-$animate-timing-function-soft: ease-in-out !default;
-$animate-timing-function-alternate: linear !default;
-
-/// Iteration Count
-$animate-base-iteration-count: infinite !default;
-
-/// Opacity Levels
-$animate-opacity-start: 1 !default;
-$animate-opacity-blink: 0 !default;
-$animate-opacity-soft-blink: 0.3 !default;

package/ts/ARContent.ts

@@ -1,27 +0,0 @@
-/**
- * @title Augmented Reality Content Manager
- * @notice Manages the lifecycle and interaction of AR content in web applications.
- * @dev Supports dynamic content updates, positioning, and user interaction in an augmented reality context.
- */
- class ARContentManager {
-    private scene: any; // Placeholder for an AR framework scene object, like AR.js or similar.
-
-    constructor(scene: any) {
-        this.scene = scene;
-    }
-
-    public addContent(modelUrl: string, lat: number, lon: number) {
-        console.log(`Adding AR content at [${lat}, ${lon}] from ${modelUrl}`);
-        // Here you'd add the model to the scene at the specified geolocation.
-    }
-
-    public updateContent(modelId: string, properties: any) {
-        console.log(`Updating content ${modelId} with properties`, properties);
-        // Update properties like scale, rotation, or interactive elements.
-    }
-
-    public removeContent(modelId: string) {
-        console.log(`Removing content ${modelId}`);
-        // Remove a model from the scene.
-    }
-}

package/ts/ARInteraction.ts

@@ -1,34 +0,0 @@
-/**
- * @title AR Interaction Handler
- * @notice Manages Augmented Reality overlays and interactions using the WebXR Device API.
- * @dev Provides functionalities to place and interact with virtual objects in the real world through the user's camera.
- */
- class ARInteractionHandler {
-    private xrSession: XRSession | null = null;
-
-    constructor() {
-        this.checkARSupport();
-    }
-
-    private async checkARSupport() {
-        if (navigator.xr && await navigator.xr.isSessionSupported('immersive-ar')) {
-            console.log("AR is supported.");
-            this.initAR();
-        } else {
-            console.error("AR is not supported on this device.");
-        }
-    }
-
-    private async initAR() {
-        this.xrSession = await navigator.xr.requestSession('immersive-ar');
-        this.setupARSession();
-    }
-
-    private setupARSession() {
-        // Initialize and configure AR session settings
-    }
-
-    public addARObjectAt(x: number, y: number, z: number, object: HTMLElement) {
-        // Translate screen coordinates to real-world coordinates and add an object there
-    }
-}

package/ts/AdaptiveUI.ts

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

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

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

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

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

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