move.gl 0.0.1 → 0.0.2

package/src/ts/Draggable.ts

@@ -0,0 +1,143 @@
+// ============================================================================
+// move.gl | Draggable
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+/**
+ * Options for the Draggable class
+ */
+export interface DraggableOptions {
+    /** Whether to constrain dragging to parent bounds */
+    constrainToParent?: boolean;
+    /** CSS cursor style during drag */
+    dragCursor?: string;
+    /** Callback when drag starts */
+    onDragStart?: (x: number, y: number) => void;
+    /** Callback during drag */
+    onDrag?: (x: number, y: number) => void;
+    /** Callback when drag ends */
+    onDragEnd?: (x: number, y: number) => void;
+}
+
+/**
+ * Draggable Element Handler
+ *
+ * Provides functionality to make an element draggable within the confines
+ * of its parent container. Supports both mouse and touch interactions,
+ * ensuring usability across different devices.
+ *
+ * @example
+ * ```typescript
+ * const draggable = new Draggable('myElement');
+ * // Element with id="myElement" is now draggable
+ * ```
+ */
+export class Draggable {
+    private element: HTMLElement;
+    private isDragging: boolean = false;
+    private startX: number = 0;
+    private startY: number = 0;
+    private boundRect: DOMRect;
+
+    /**
+     * Creates a new Draggable instance.
+     * @param elementId - The ID of the HTML element to make draggable.
+     * @throws Error if element or parent element is not found.
+     */
+    constructor(elementId: string) {
+        const element = document.getElementById(elementId);
+        if (!element) {
+            throw new Error(`Element with id "${elementId}" not found`);
+        }
+        this.element = element;
+
+        const parent = this.element.parentElement;
+        if (!parent) {
+            throw new Error('Draggable element must have a parent element');
+        }
+        this.boundRect = parent.getBoundingClientRect();
+        this.attachEventListeners();
+    }
+
+    /**
+     * Attaches all necessary event listeners for drag functionality.
+     */
+    private attachEventListeners(): void {
+        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 });
+    }
+
+    /**
+     * Gets the client coordinates from a mouse or touch event.
+     */
+    private getClientCoordinates(event: MouseEvent | TouchEvent): { clientX: number; clientY: number } {
+        if ('touches' in event && event.touches.length > 0) {
+            return {
+                clientX: event.touches[0].clientX,
+                clientY: event.touches[0].clientY
+            };
+        }
+        return {
+            clientX: (event as MouseEvent).clientX,
+            clientY: (event as MouseEvent).clientY
+        };
+    }
+
+    /**
+     * Initiates the drag operation.
+     */
+    private startDrag = (event: MouseEvent | TouchEvent): void => {
+        const coords = this.getClientCoordinates(event);
+        this.isDragging = true;
+        this.startX = coords.clientX - this.element.offsetLeft;
+        this.startY = coords.clientY - this.element.offsetTop;
+        event.preventDefault();
+    };
+
+    /**
+     * Handles the drag movement.
+     */
+    private drag = (event: MouseEvent | TouchEvent): void => {
+        if (!this.isDragging) return;
+
+        const coords = this.getClientCoordinates(event);
+        let x = coords.clientX - this.startX;
+        let y = coords.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`;
+    };
+
+    /**
+     * Stops the drag operation.
+     */
+    private stopDrag = (): void => {
+        this.isDragging = false;
+    };
+
+    /**
+     * Removes all event listeners and cleans up.
+     */
+    public destroy(): void {
+        this.element.removeEventListener('mousedown', this.startDrag);
+        this.element.removeEventListener('touchstart', this.startDrag);
+        document.removeEventListener('mouseup', this.stopDrag);
+        document.removeEventListener('touchend', this.stopDrag);
+        document.removeEventListener('mousemove', this.drag);
+        document.removeEventListener('touchmove', this.drag);
+    }
+}
+
+export default Draggable;

package/src/ts/Gesture.ts

@@ -0,0 +1,226 @@
+// ============================================================================
+// move.gl | Gesture Handlers
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+/**
+ * Swipe direction type
+ */
+export type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+
+/**
+ * Gesture event callbacks
+ */
+export interface GestureCallbacks {
+    onTap?: () => void;
+    onSwipe?: (direction: SwipeDirection, deltaX: number, deltaY: number) => void;
+    onPinch?: (scale: number) => void;
+    onRotate?: (angle: number) => void;
+}
+
+/**
+ * Touch Gesture Handler Class
+ *
+ * Manages touch interactions on a specified element, interpreting various
+ * gestures like taps, swipes, and pinches.
+ *
+ * @example
+ * ```typescript
+ * const gesture = new TouchGestureHandler('myElement', {
+ *     onSwipe: (dir, dx, dy) => console.log(`Swiped ${dir}`),
+ *     onPinch: (scale) => console.log(`Pinch scale: ${scale}`)
+ * });
+ * ```
+ */
+export class TouchGestureHandler {
+    private element: HTMLElement;
+    private startTouches: Touch[] | null = null;
+    private lastTouches: Touch[] | null = null;
+    private isSwiping = false;
+    private isPinching = false;
+    private callbacks: GestureCallbacks;
+
+    /**
+     * Creates a new TouchGestureHandler instance.
+     * @param elementId - The ID of the element to attach gesture handling to.
+     * @param callbacks - Optional callback functions for gesture events.
+     */
+    constructor(elementId: string, callbacks: GestureCallbacks = {}) {
+        const element = document.getElementById(elementId);
+        if (!element) {
+            throw new Error(`Element with id "${elementId}" not found`);
+        }
+        this.element = element;
+        this.callbacks = callbacks;
+        this.addTouchListeners();
+    }
+
+    private addTouchListeners(): void {
+        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): void => {
+        if (event.touches.length === 1) {
+            this.startTouches = Array.from(event.touches);
+        } else if (event.touches.length > 1) {
+            this.startTouches = Array.from(event.touches);
+            this.isPinching = true;
+        }
+    };
+
+    private handleTouchMove = (event: TouchEvent): void => {
+        if (!this.startTouches) return;
+
+        this.lastTouches = Array.from(event.touches);
+
+        if (event.touches.length === 1 && !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;
+            }
+        } else if (event.touches.length > 1 && this.isPinching && this.startTouches.length > 1) {
+            const startDistance = this.getDistance(this.startTouches[0], this.startTouches[1]);
+            const currentDistance = this.getDistance(event.touches[0], event.touches[1]);
+            const scale = currentDistance / startDistance;
+            this.callbacks.onPinch?.(scale);
+        }
+    };
+
+    private handleTouchEnd = (): void => {
+        if (this.isSwiping && this.startTouches && this.lastTouches) {
+            const dx = this.lastTouches[0].clientX - this.startTouches[0].clientX;
+            const dy = this.lastTouches[0].clientY - this.startTouches[0].clientY;
+            const direction = this.getSwipeDirection(dx, dy);
+            this.callbacks.onSwipe?.(direction, dx, dy);
+            this.isSwiping = false;
+        } else if (this.isPinching) {
+            this.isPinching = false;
+        } else {
+            this.callbacks.onTap?.();
+        }
+        this.startTouches = null;
+        this.lastTouches = null;
+    };
+
+    /**
+     * Determines swipe direction based on deltas.
+     */
+    private getSwipeDirection(dx: number, dy: number): SwipeDirection {
+        if (Math.abs(dx) > Math.abs(dy)) {
+            return dx > 0 ? 'right' : 'left';
+        }
+        return dy > 0 ? 'down' : 'up';
+    }
+
+    /**
+     * Calculates the distance between two touch points.
+     */
+    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);
+    }
+
+    /**
+     * Removes all event listeners and cleans up.
+     */
+    public destroy(): void {
+        this.element.removeEventListener('touchstart', this.handleTouchStart);
+        this.element.removeEventListener('touchmove', this.handleTouchMove);
+        this.element.removeEventListener('touchend', this.handleTouchEnd);
+    }
+}
+
+
+/**
+ * Pointer event callbacks
+ */
+export interface PointerGestureCallbacks {
+    onGestureStart?: (event: PointerEvent) => void;
+    onGestureMove?: (deltaX: number, deltaY: number, event: PointerEvent) => void;
+    onGestureEnd?: (event: PointerEvent) => void;
+}
+
+/**
+ * Advanced Gesture Recognition Handler
+ *
+ * Handles complex gestures for interactive applications using pointer events.
+ * Works with mouse, touch, and pen input.
+ *
+ * @example
+ * ```typescript
+ * const gesture = new AdvancedGestureRecognition('myElement', {
+ *     onGestureMove: (dx, dy) => console.log(`Moved ${dx}px, ${dy}px`)
+ * });
+ * ```
+ */
+export class AdvancedGestureRecognition {
+    private element: HTMLElement;
+    private ongoingTouches: Map<number, PointerEvent> = new Map();
+    private callbacks: PointerGestureCallbacks;
+
+    /**
+     * Creates a new AdvancedGestureRecognition instance.
+     * @param elementId - The ID of the element to attach gesture handling to.
+     * @param callbacks - Optional callback functions for gesture events.
+     */
+    constructor(elementId: string, callbacks: PointerGestureCallbacks = {}) {
+        const element = document.getElementById(elementId);
+        if (!element) {
+            throw new Error(`Element with id "${elementId}" not found`);
+        }
+        this.element = element;
+        this.callbacks = callbacks;
+        this.attachEventListeners();
+    }
+
+    private attachEventListeners(): void {
+        this.element.addEventListener('pointerdown', this.handleGestureStart, { passive: false });
+        this.element.addEventListener('pointermove', this.handleGestureMove, { passive: false });
+        this.element.addEventListener('pointerup', this.handleGestureEnd, { passive: false });
+        this.element.addEventListener('pointercancel', this.handleGestureEnd, { passive: false });
+    }
+
+    private handleGestureStart = (event: PointerEvent): void => {
+        this.ongoingTouches.set(event.pointerId, event);
+        this.callbacks.onGestureStart?.(event);
+    };
+
+    private handleGestureMove = (event: PointerEvent): void => {
+        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;
+            this.callbacks.onGestureMove?.(dx, dy, event);
+        }
+    };
+
+    private handleGestureEnd = (event: PointerEvent): void => {
+        this.ongoingTouches.delete(event.pointerId);
+        this.callbacks.onGestureEnd?.(event);
+    };
+
+    /**
+     * Removes all event listeners and cleans up.
+     */
+    public destroy(): void {
+        this.element.removeEventListener('pointerdown', this.handleGestureStart);
+        this.element.removeEventListener('pointermove', this.handleGestureMove);
+        this.element.removeEventListener('pointerup', this.handleGestureEnd);
+        this.element.removeEventListener('pointercancel', this.handleGestureEnd);
+    }
+}
+
+export default {
+    TouchGestureHandler,
+    AdvancedGestureRecognition
+};
+
+
+
+

package/src/ts/Keyboard.ts

@@ -0,0 +1,195 @@
+// ============================================================================
+// move.gl | Virtual Keyboard
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+/**
+ * Keyboard layout configuration
+ */
+export interface KeyboardLayout {
+    [mode: string]: string[][];
+}
+
+/**
+ * Virtual Keyboard Configuration Options
+ */
+export interface VirtualKeyboardOptions {
+    /** Custom keyboard layout */
+    layout?: KeyboardLayout;
+    /** Callback when a key is pressed */
+    onKeyPress?: (key: string) => void;
+}
+
+/**
+ * Virtual Keyboard
+ *
+ * Manages the rendering and interaction of a virtual keyboard on the web.
+ * Supports multiple layouts (default, shift, special) and handles both
+ * mouse and keyboard inputs, including touch support.
+ *
+ * @example
+ * ```typescript
+ * const keyboard = new VirtualKeyboard('textInput', 'keyboard');
+ * keyboard.switchMode('special');
+ * ```
+ */
+export 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");
+            rowElement.className = "keyboard__row";
+            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();
+        }
+    }
+
+    /**
+     * Removes all event listeners and cleans up.
+     */
+    public destroy(): void {
+        document.removeEventListener('keydown', this.handlePhysicalKeyPress);
+        this.keyboardElement.removeEventListener('touchstart', this.handleTouchStart);
+        this.keyboardElement.innerHTML = '';
+    }
+}
+
+export default VirtualKeyboard;