@teachinglab/omd 0.6.0 → 0.6.2

package/canvas/events/eventManager.js

@@ -1,445 +1,445 @@
-import { pointerEventHandler } from './pointerEventHandler.js';
-
-/**
- * Event manager for canvas interactions
- * Handles pointer, keyboard, and wheel events
- */
-export class EventManager {
-    /**
-     * @param {OMDCanvas} canvas - Canvas instance
-     */
-    constructor(canvas) {
-        this.canvas = canvas;
-        this.isInitialized = false;
-        
-        // Event handlers
-        this.pointerEventHandler = new pointerEventHandler(canvas);
-        
-        // Bound event listeners
-        this._onPointerDown = this._onPointerDown.bind(this);
-        this._onPointerMove = this._onPointerMove.bind(this);
-        this._onPointerUp = this._onPointerUp.bind(this);
-        this._onPointerCancel = this._onPointerCancel.bind(this);
-        this._onPointerEnter = this._onPointerEnter.bind(this);
-        this._onPointerLeave = this._onPointerLeave.bind(this);
-        this._onKeyDown = this._onKeyDown.bind(this);
-        this._onKeyUp = this._onKeyUp.bind(this);
-        this._onWheel = this._onWheel.bind(this);
-        this._onContextMenu = this._onContextMenu.bind(this);
-        
-        // State tracking
-        this.activePointers = new Map();
-        this.isDrawing = false;
-        this.lastEventTime = 0;
-    }
-    
-    /**
-     * Initialize event listeners
-     */
-    initialize() {
-        if (this.isInitialized) return;
-        
-        const svg = this.canvas.svg;
-        
-        // Pointer events (unified mouse/touch/pen handling)
-        svg.addEventListener('pointerdown', this._onPointerDown);
-        svg.addEventListener('pointermove', this._onPointerMove);
-        svg.addEventListener('pointerup', this._onPointerUp);
-        svg.addEventListener('pointercancel', this._onPointerCancel);
-        svg.addEventListener('pointerenter', this._onPointerEnter);
-        svg.addEventListener('pointerleave', this._onPointerLeave);
-        
-        // Keyboard events (on document for global shortcuts)
-        if (this.canvas.config.enableKeyboardShortcuts) {
-            document.addEventListener('keydown', this._onKeyDown);
-            document.addEventListener('keyup', this._onKeyUp);
-        }
-        
-        // Mouse wheel events
-        svg.addEventListener('wheel', this._onWheel);
-        
-        // Prevent context menu
-        svg.addEventListener('contextmenu', this._onContextMenu);
-        
-        // Set touch-action for better touch handling
-        svg.style.touchAction = 'none';
-        
-        this.isInitialized = true;
-    }
-    
-    /**
-     * Handle pointer down events
-     * @private
-     */
-    _onPointerDown(event) {
-        event.preventDefault();
-        // Track active pointer
-        this.activePointers.set(event.pointerId, event);
-        // Set pointer capture so canvas continues to receive events
-        event.target.setPointerCapture(event.pointerId);
-        // Convert to canvas coordinates
-        const canvasCoords = this.canvas.clientToSVG(event.clientX, event.clientY);
-        // Create normalized event
-        const normalizedEvent = this._normalizePointerEvent(event, canvasCoords);
-        // Handle multi-touch
-        if (this.canvas.config.enableMultiTouch && this.activePointers.size > 1) {
-            this.pointerEventHandler.handleMultiTouchStart(this.activePointers);
-            return;
-        }
-        // Delegate to pointer event handler
-        this.pointerEventHandler.handlePointerDown(event, normalizedEvent);
-        // Delegate to active tool
-        const activeTool = this.canvas.toolManager.getActiveTool();
-        if (activeTool) {
-            // Let the tool decide if it's drawing (e.g., PointerTool won't set isDrawing)
-            activeTool.onPointerDown(normalizedEvent);
-            // If tool hasn't explicitly set isDrawing, set it for backwards compatibility
-            // (tools like PencilTool and EraserTool expect isDrawing to be true)
-            if (this.isDrawing === false && activeTool.constructor.name !== 'PointerTool') {
-                this.isDrawing = true;
-            }
-        }
-        // Emit canvas event
-        this.canvas.emit('pointerDown', normalizedEvent);
-    }
-    
-    /**
-     * Handle pointer move events
-     * @private
-     */
-    _onPointerMove(event) {
-        // Throttle events for performance
-        const now = Date.now();
-        if (now - this.lastEventTime < 16) return; // ~60fps
-        this.lastEventTime = now;
-        
-        // Update active pointer
-        if (this.activePointers.has(event.pointerId)) {
-            this.activePointers.set(event.pointerId, event);
-        }
-        
-        // Convert to canvas coordinates
-        const canvasCoords = this.canvas.clientToSVG(event.clientX, event.clientY);
-        
-        // Create normalized event
-        const normalizedEvent = this._normalizePointerEvent(event, canvasCoords);
-        
-        // Handle multi-touch
-        if (this.canvas.config.enableMultiTouch && this.activePointers.size > 1) {
-            this.pointerEventHandler.handleMultiTouchMove(this.activePointers);
-            return;
-        }
-        
-        // Update cursor position
-        if (this.canvas.cursor) {
-            this.canvas.cursor.setPosition(canvasCoords.x, canvasCoords.y);
-            
-            // Update pressure feedback if available
-            if (event.pressure !== undefined) {
-                this.canvas.cursor.setPressureFeedback(event.pressure);
-            }
-        }
-        
-        // Delegate to pointer event handler
-        this.pointerEventHandler.handlePointerMove(event, normalizedEvent);
-        
-        // Delegate to active tool if drawing
-        if (this.isDrawing) {
-            const activeTool = this.canvas.toolManager.getActiveTool();
-            if (activeTool) {
-                activeTool.onPointerMove(normalizedEvent);
-            }
-        }
-        
-        // Emit canvas event
-        this.canvas.emit('pointerMove', normalizedEvent);
-    }
-    
-    /**
-     * Handle pointer up events
-     * @private
-     */
-    _onPointerUp(event) {
-        // Remove from active pointers
-        this.activePointers.delete(event.pointerId);
-        // Release pointer capture
-        event.target.releasePointerCapture(event.pointerId);
-        // Convert to canvas coordinates
-        const canvasCoords = this.canvas.clientToSVG(event.clientX, event.clientY);
-        // Create normalized event
-        const normalizedEvent = this._normalizePointerEvent(event, canvasCoords);
-        // Handle multi-touch
-        if (this.canvas.config.enableMultiTouch && this.activePointers.size >= 1) {
-            this.pointerEventHandler.handleMultiTouchEnd(this.activePointers);
-            return;
-        }
-        // Clear drawing state
-        this.isDrawing = false;
-        // Delegate to pointer event handler
-        this.pointerEventHandler.handlePointerUp(event, normalizedEvent);
-        // Delegate to active tool
-        const activeTool = this.canvas.toolManager.getActiveTool();
-        if (activeTool) {
-            activeTool.onPointerUp(normalizedEvent);
-        }
-        // Emit canvas event
-        this.canvas.emit('pointerUp', normalizedEvent);
-    }
-    
-    /**
-     * Handle pointer cancel events
-     * @private
-     */
-    _onPointerCancel(event) {
-        // Remove from active pointers
-        this.activePointers.delete(event.pointerId);
-        // Release pointer capture
-        event.target.releasePointerCapture(event.pointerId);
-        // Clear drawing state
-        this.isDrawing = false;
-        // Cancel active tool
-        const activeTool = this.canvas.toolManager.getActiveTool();
-        if (activeTool) {
-            activeTool.onCancel();
-        }
-        // Emit canvas event
-        this.canvas.emit('pointerCancel', { pointerId: event.pointerId });
-    }
-    
-    /**
-     * Handle pointer enter events
-     * @private
-     */
-    _onPointerEnter(event) {
-        // Show custom cursor when entering canvas
-        if (this.canvas.cursor) {
-            this.canvas.cursor.show();
-            // Update cursor from current tool config
-            const activeTool = this.canvas.toolManager.getActiveTool();
-            if (activeTool && activeTool.config) {
-                this.canvas.cursor.updateFromToolConfig(activeTool.config);
-            }
-        }
-        // If mouse is down (event.buttons !== 0), start drawing
-        if (event.buttons !== 0) {
-            // Convert to canvas coordinates
-            const canvasCoords = this.canvas.clientToSVG(event.clientX, event.clientY);
-            const normalizedEvent = this._normalizePointerEvent(event, canvasCoords);
-            this.isDrawing = true;
-            const activeTool = this.canvas.toolManager.getActiveTool();
-            if (activeTool) {
-                activeTool.onPointerDown(normalizedEvent);
-            }
-        }
-        // Emit canvas event
-        this.canvas.emit('pointerEnter', { event });
-    }
-    
-    /**
-     * Handle pointer leave events
-     * @private
-     */
-    _onPointerLeave(event) {
-        // Hide custom cursor when leaving canvas
-        if (this.canvas.cursor) {
-            this.canvas.cursor.hide();
-        }
-        // Do NOT cancel drawing on pointerleave; drawing continues outside canvas
-        // But if no buttons are pressed, we can safely clear the drawing state
-        if (event.buttons === 0) {
-            this.isDrawing = false;
-        }
-        // Clear active pointers only if no buttons pressed
-        if (event.buttons === 0) {
-            this.activePointers.clear();
-        }
-        // Emit canvas event
-        this.canvas.emit('pointerLeave', { event });
-    }
-    
-    /**
-     * Handle keyboard down events
-     * @private
-     */
-    _onKeyDown(event) {
-        // Ignore if typing in input fields
-        if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
-            return;
-        }
-        
-        const key = event.key.toLowerCase();
-        
-        // Global shortcuts
-        switch (key) {
-            case 'p':
-                if (this.canvas.config.enabledTools.includes('pencil')) {
-                    this.canvas.toolManager.setActiveTool('pencil');
-                    event.preventDefault();
-                }
-                break;
-            case 'e':
-                if (this.canvas.config.enabledTools.includes('eraser')) {
-                    this.canvas.toolManager.setActiveTool('eraser');
-                    event.preventDefault();
-                }
-                break;
-            case 's':
-                if (this.canvas.config.enabledTools.includes('select')) {
-                    this.canvas.toolManager.setActiveTool('select');
-                    event.preventDefault();
-                }
-                break;
-            case 'escape':
-                // Cancel current operation
-                const activeTool = this.canvas.toolManager.getActiveTool();
-                if (activeTool) {
-                    activeTool.onCancel();
-                }
-                event.preventDefault();
-                break;
-        }
-        
-        // Delegate to active tool
-        const activeTool = this.canvas.toolManager.getActiveTool();
-        if (activeTool && activeTool.onKeyboardShortcut) {
-            const handled = activeTool.onKeyboardShortcut(key, event);
-            if (handled) {
-                event.preventDefault();
-            }
-        }
-        
-        // Emit canvas event
-        this.canvas.emit('keyDown', { key, event });
-    }
-    
-    /**
-     * Handle keyboard up events
-     * @private
-     */
-    _onKeyUp(event) {
-        // Ignore if typing in input fields
-        if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
-            return;
-        }
-        
-        const key = event.key.toLowerCase();
-        
-        // Emit canvas event
-        this.canvas.emit('keyUp', { key, event });
-    }
-    
-    /**
-     * Handle wheel events (zoom/pan)
-     * @private
-     */
-    _onWheel(event) {
-        // Prevent default scrolling
-        event.preventDefault();
-        
-        // Convert to canvas coordinates
-        const canvasCoords = this.canvas.clientToSVG(event.clientX, event.clientY);
-        
-        // Emit canvas event
-        this.canvas.emit('wheel', {
-            deltaX: event.deltaX,
-            deltaY: event.deltaY,
-            deltaZ: event.deltaZ,
-            x: canvasCoords.x,
-            y: canvasCoords.y,
-            ctrlKey: event.ctrlKey,
-            metaKey: event.metaKey
-        });
-    }
-    
-    /**
-     * Prevent context menu
-     * @private
-     */
-    _onContextMenu(event) {
-        event.preventDefault();
-    }
-    
-    /**
-     * Normalize pointer event data
-     * @private
-     */
-    _normalizePointerEvent(event, canvasCoords) {
-        return {
-            pointerId: event.pointerId,
-            pointerType: event.pointerType,
-            isPrimary: event.isPrimary,
-            x: canvasCoords.x,
-            y: canvasCoords.y,
-            clientX: event.clientX,
-            clientY: event.clientY,
-            pressure: this._normalizePressure(event.pressure),
-            tiltX: event.tiltX || 0,
-            tiltY: event.tiltY || 0,
-            twist: event.twist || 0,
-            width: event.width || 1,
-            height: event.height || 1,
-            tangentialPressure: event.tangentialPressure || 0,
-            buttons: event.buttons,
-            shiftKey: event.shiftKey,
-            ctrlKey: event.ctrlKey,
-            altKey: event.altKey,
-            metaKey: event.metaKey,
-            timestamp: event.timeStamp || Date.now()
-        };
-    }
-    
-    /**
-     * Normalize pressure values
-     * @private
-     */
-    _normalizePressure(pressure) {
-        if (pressure === undefined || pressure === null) {
-            return 0.5; // Default pressure for devices without pressure sensitivity
-        }
-        
-        // Clamp pressure between 0 and 1
-        return Math.max(0, Math.min(1, pressure));
-    }
-    
-    /**
-     * Get current pointer information
-     * @returns {Object} Pointer information
-     */
-    getPointerInfo() {
-        return {
-            activePointers: this.activePointers.size,
-            isDrawing: this.isDrawing,
-            multiTouch: this.activePointers.size > 1
-        };
-    }
-    
-    /**
-     * Destroy event manager
-     */
-    destroy() {
-        if (!this.isInitialized) return;
-        
-        const svg = this.canvas.svg;
-        
-        // Remove pointer events
-        svg.removeEventListener('pointerdown', this._onPointerDown);
-        svg.removeEventListener('pointermove', this._onPointerMove);
-        svg.removeEventListener('pointerup', this._onPointerUp);
-        svg.removeEventListener('pointercancel', this._onPointerCancel);
-        svg.removeEventListener('pointerenter', this._onPointerEnter);
-        svg.removeEventListener('pointerleave', this._onPointerLeave);
-        
-        // Remove keyboard events
-        document.removeEventListener('keydown', this._onKeyDown);
-        document.removeEventListener('keyup', this._onKeyUp);
-        
-        // Remove other events
-        svg.removeEventListener('wheel', this._onWheel);
-        svg.removeEventListener('contextmenu', this._onContextMenu);
-        
-                 // Clear state
-         this.activePointers.clear();
-         this.isDrawing = false;
-         this.isInitialized = false;
-     }
+import { pointerEventHandler } from './pointerEventHandler.js';
+
+/**
+ * Event manager for canvas interactions
+ * Handles pointer, keyboard, and wheel events
+ */
+export class EventManager {
+    /**
+     * @param {OMDCanvas} canvas - Canvas instance
+     */
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.isInitialized = false;
+        
+        // Event handlers
+        this.pointerEventHandler = new pointerEventHandler(canvas);
+        
+        // Bound event listeners
+        this._onPointerDown = this._onPointerDown.bind(this);
+        this._onPointerMove = this._onPointerMove.bind(this);
+        this._onPointerUp = this._onPointerUp.bind(this);
+        this._onPointerCancel = this._onPointerCancel.bind(this);
+        this._onPointerEnter = this._onPointerEnter.bind(this);
+        this._onPointerLeave = this._onPointerLeave.bind(this);
+        this._onKeyDown = this._onKeyDown.bind(this);
+        this._onKeyUp = this._onKeyUp.bind(this);
+        this._onWheel = this._onWheel.bind(this);
+        this._onContextMenu = this._onContextMenu.bind(this);
+        
+        // State tracking
+        this.activePointers = new Map();
+        this.isDrawing = false;
+        this.lastEventTime = 0;
+    }
+    
+    /**
+     * Initialize event listeners
+     */
+    initialize() {
+        if (this.isInitialized) return;
+        
+        const svg = this.canvas.svg;
+        
+        // Pointer events (unified mouse/touch/pen handling)
+        svg.addEventListener('pointerdown', this._onPointerDown);
+        svg.addEventListener('pointermove', this._onPointerMove);
+        svg.addEventListener('pointerup', this._onPointerUp);
+        svg.addEventListener('pointercancel', this._onPointerCancel);
+        svg.addEventListener('pointerenter', this._onPointerEnter);
+        svg.addEventListener('pointerleave', this._onPointerLeave);
+        
+        // Keyboard events (on document for global shortcuts)
+        if (this.canvas.config.enableKeyboardShortcuts) {
+            document.addEventListener('keydown', this._onKeyDown);
+            document.addEventListener('keyup', this._onKeyUp);
+        }
+        
+        // Mouse wheel events
+        svg.addEventListener('wheel', this._onWheel);
+        
+        // Prevent context menu
+        svg.addEventListener('contextmenu', this._onContextMenu);
+        
+        // Set touch-action for better touch handling
+        svg.style.touchAction = 'none';
+        
+        this.isInitialized = true;
+    }
+    
+    /**
+     * Handle pointer down events
+     * @private
+     */
+    _onPointerDown(event) {
+        event.preventDefault();
+        // Track active pointer
+        this.activePointers.set(event.pointerId, event);
+        // Set pointer capture so canvas continues to receive events
+        event.target.setPointerCapture(event.pointerId);
+        // Convert to canvas coordinates
+        const canvasCoords = this.canvas.clientToSVG(event.clientX, event.clientY);
+        // Create normalized event
+        const normalizedEvent = this._normalizePointerEvent(event, canvasCoords);
+        // Handle multi-touch
+        if (this.canvas.config.enableMultiTouch && this.activePointers.size > 1) {
+            this.pointerEventHandler.handleMultiTouchStart(this.activePointers);
+            return;
+        }
+        // Delegate to pointer event handler
+        this.pointerEventHandler.handlePointerDown(event, normalizedEvent);
+        // Delegate to active tool
+        const activeTool = this.canvas.toolManager.getActiveTool();
+        if (activeTool) {
+            // Let the tool decide if it's drawing (e.g., PointerTool won't set isDrawing)
+            activeTool.onPointerDown(normalizedEvent);
+            // If tool hasn't explicitly set isDrawing, set it for backwards compatibility
+            // (tools like PencilTool and EraserTool expect isDrawing to be true)
+            if (this.isDrawing === false && activeTool.constructor.name !== 'PointerTool') {
+                this.isDrawing = true;
+            }
+        }
+        // Emit canvas event
+        this.canvas.emit('pointerDown', normalizedEvent);
+    }
+    
+    /**
+     * Handle pointer move events
+     * @private
+     */
+    _onPointerMove(event) {
+        // Throttle events for performance
+        const now = Date.now();
+        if (now - this.lastEventTime < 16) return; // ~60fps
+        this.lastEventTime = now;
+        
+        // Update active pointer
+        if (this.activePointers.has(event.pointerId)) {
+            this.activePointers.set(event.pointerId, event);
+        }
+        
+        // Convert to canvas coordinates
+        const canvasCoords = this.canvas.clientToSVG(event.clientX, event.clientY);
+        
+        // Create normalized event
+        const normalizedEvent = this._normalizePointerEvent(event, canvasCoords);
+        
+        // Handle multi-touch
+        if (this.canvas.config.enableMultiTouch && this.activePointers.size > 1) {
+            this.pointerEventHandler.handleMultiTouchMove(this.activePointers);
+            return;
+        }
+        
+        // Update cursor position
+        if (this.canvas.cursor) {
+            this.canvas.cursor.setPosition(canvasCoords.x, canvasCoords.y);
+            
+            // Update pressure feedback if available
+            if (event.pressure !== undefined) {
+                this.canvas.cursor.setPressureFeedback(event.pressure);
+            }
+        }
+        
+        // Delegate to pointer event handler
+        this.pointerEventHandler.handlePointerMove(event, normalizedEvent);
+        
+        // Delegate to active tool if drawing
+        if (this.isDrawing) {
+            const activeTool = this.canvas.toolManager.getActiveTool();
+            if (activeTool) {
+                activeTool.onPointerMove(normalizedEvent);
+            }
+        }
+        
+        // Emit canvas event
+        this.canvas.emit('pointerMove', normalizedEvent);
+    }
+    
+    /**
+     * Handle pointer up events
+     * @private
+     */
+    _onPointerUp(event) {
+        // Remove from active pointers
+        this.activePointers.delete(event.pointerId);
+        // Release pointer capture
+        event.target.releasePointerCapture(event.pointerId);
+        // Convert to canvas coordinates
+        const canvasCoords = this.canvas.clientToSVG(event.clientX, event.clientY);
+        // Create normalized event
+        const normalizedEvent = this._normalizePointerEvent(event, canvasCoords);
+        // Handle multi-touch
+        if (this.canvas.config.enableMultiTouch && this.activePointers.size >= 1) {
+            this.pointerEventHandler.handleMultiTouchEnd(this.activePointers);
+            return;
+        }
+        // Clear drawing state
+        this.isDrawing = false;
+        // Delegate to pointer event handler
+        this.pointerEventHandler.handlePointerUp(event, normalizedEvent);
+        // Delegate to active tool
+        const activeTool = this.canvas.toolManager.getActiveTool();
+        if (activeTool) {
+            activeTool.onPointerUp(normalizedEvent);
+        }
+        // Emit canvas event
+        this.canvas.emit('pointerUp', normalizedEvent);
+    }
+    
+    /**
+     * Handle pointer cancel events
+     * @private
+     */
+    _onPointerCancel(event) {
+        // Remove from active pointers
+        this.activePointers.delete(event.pointerId);
+        // Release pointer capture
+        event.target.releasePointerCapture(event.pointerId);
+        // Clear drawing state
+        this.isDrawing = false;
+        // Cancel active tool
+        const activeTool = this.canvas.toolManager.getActiveTool();
+        if (activeTool) {
+            activeTool.onCancel();
+        }
+        // Emit canvas event
+        this.canvas.emit('pointerCancel', { pointerId: event.pointerId });
+    }
+    
+    /**
+     * Handle pointer enter events
+     * @private
+     */
+    _onPointerEnter(event) {
+        // Show custom cursor when entering canvas
+        if (this.canvas.cursor) {
+            this.canvas.cursor.show();
+            // Update cursor from current tool config
+            const activeTool = this.canvas.toolManager.getActiveTool();
+            if (activeTool && activeTool.config) {
+                this.canvas.cursor.updateFromToolConfig(activeTool.config);
+            }
+        }
+        // If mouse is down (event.buttons !== 0), start drawing
+        if (event.buttons !== 0) {
+            // Convert to canvas coordinates
+            const canvasCoords = this.canvas.clientToSVG(event.clientX, event.clientY);
+            const normalizedEvent = this._normalizePointerEvent(event, canvasCoords);
+            this.isDrawing = true;
+            const activeTool = this.canvas.toolManager.getActiveTool();
+            if (activeTool) {
+                activeTool.onPointerDown(normalizedEvent);
+            }
+        }
+        // Emit canvas event
+        this.canvas.emit('pointerEnter', { event });
+    }
+    
+    /**
+     * Handle pointer leave events
+     * @private
+     */
+    _onPointerLeave(event) {
+        // Hide custom cursor when leaving canvas
+        if (this.canvas.cursor) {
+            this.canvas.cursor.hide();
+        }
+        // Do NOT cancel drawing on pointerleave; drawing continues outside canvas
+        // But if no buttons are pressed, we can safely clear the drawing state
+        if (event.buttons === 0) {
+            this.isDrawing = false;
+        }
+        // Clear active pointers only if no buttons pressed
+        if (event.buttons === 0) {
+            this.activePointers.clear();
+        }
+        // Emit canvas event
+        this.canvas.emit('pointerLeave', { event });
+    }
+    
+    /**
+     * Handle keyboard down events
+     * @private
+     */
+    _onKeyDown(event) {
+        // Ignore if typing in input fields
+        if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
+            return;
+        }
+        
+        const key = event.key.toLowerCase();
+        
+        // Global shortcuts
+        switch (key) {
+            case 'p':
+                if (this.canvas.config.enabledTools.includes('pencil')) {
+                    this.canvas.toolManager.setActiveTool('pencil');
+                    event.preventDefault();
+                }
+                break;
+            case 'e':
+                if (this.canvas.config.enabledTools.includes('eraser')) {
+                    this.canvas.toolManager.setActiveTool('eraser');
+                    event.preventDefault();
+                }
+                break;
+            case 's':
+                if (this.canvas.config.enabledTools.includes('select')) {
+                    this.canvas.toolManager.setActiveTool('select');
+                    event.preventDefault();
+                }
+                break;
+            case 'escape':
+                // Cancel current operation
+                const activeTool = this.canvas.toolManager.getActiveTool();
+                if (activeTool) {
+                    activeTool.onCancel();
+                }
+                event.preventDefault();
+                break;
+        }
+        
+        // Delegate to active tool
+        const activeTool = this.canvas.toolManager.getActiveTool();
+        if (activeTool && activeTool.onKeyboardShortcut) {
+            const handled = activeTool.onKeyboardShortcut(key, event);
+            if (handled) {
+                event.preventDefault();
+            }
+        }
+        
+        // Emit canvas event
+        this.canvas.emit('keyDown', { key, event });
+    }
+    
+    /**
+     * Handle keyboard up events
+     * @private
+     */
+    _onKeyUp(event) {
+        // Ignore if typing in input fields
+        if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
+            return;
+        }
+        
+        const key = event.key.toLowerCase();
+        
+        // Emit canvas event
+        this.canvas.emit('keyUp', { key, event });
+    }
+    
+    /**
+     * Handle wheel events (zoom/pan)
+     * @private
+     */
+    _onWheel(event) {
+        // Prevent default scrolling
+        event.preventDefault();
+        
+        // Convert to canvas coordinates
+        const canvasCoords = this.canvas.clientToSVG(event.clientX, event.clientY);
+        
+        // Emit canvas event
+        this.canvas.emit('wheel', {
+            deltaX: event.deltaX,
+            deltaY: event.deltaY,
+            deltaZ: event.deltaZ,
+            x: canvasCoords.x,
+            y: canvasCoords.y,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey
+        });
+    }
+    
+    /**
+     * Prevent context menu
+     * @private
+     */
+    _onContextMenu(event) {
+        event.preventDefault();
+    }
+    
+    /**
+     * Normalize pointer event data
+     * @private
+     */
+    _normalizePointerEvent(event, canvasCoords) {
+        return {
+            pointerId: event.pointerId,
+            pointerType: event.pointerType,
+            isPrimary: event.isPrimary,
+            x: canvasCoords.x,
+            y: canvasCoords.y,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            pressure: this._normalizePressure(event.pressure),
+            tiltX: event.tiltX || 0,
+            tiltY: event.tiltY || 0,
+            twist: event.twist || 0,
+            width: event.width || 1,
+            height: event.height || 1,
+            tangentialPressure: event.tangentialPressure || 0,
+            buttons: event.buttons,
+            shiftKey: event.shiftKey,
+            ctrlKey: event.ctrlKey,
+            altKey: event.altKey,
+            metaKey: event.metaKey,
+            timestamp: event.timeStamp || Date.now()
+        };
+    }
+    
+    /**
+     * Normalize pressure values
+     * @private
+     */
+    _normalizePressure(pressure) {
+        if (pressure === undefined || pressure === null) {
+            return 0.5; // Default pressure for devices without pressure sensitivity
+        }
+        
+        // Clamp pressure between 0 and 1
+        return Math.max(0, Math.min(1, pressure));
+    }
+    
+    /**
+     * Get current pointer information
+     * @returns {Object} Pointer information
+     */
+    getPointerInfo() {
+        return {
+            activePointers: this.activePointers.size,
+            isDrawing: this.isDrawing,
+            multiTouch: this.activePointers.size > 1
+        };
+    }
+    
+    /**
+     * Destroy event manager
+     */
+    destroy() {
+        if (!this.isInitialized) return;
+        
+        const svg = this.canvas.svg;
+        
+        // Remove pointer events
+        svg.removeEventListener('pointerdown', this._onPointerDown);
+        svg.removeEventListener('pointermove', this._onPointerMove);
+        svg.removeEventListener('pointerup', this._onPointerUp);
+        svg.removeEventListener('pointercancel', this._onPointerCancel);
+        svg.removeEventListener('pointerenter', this._onPointerEnter);
+        svg.removeEventListener('pointerleave', this._onPointerLeave);
+        
+        // Remove keyboard events
+        document.removeEventListener('keydown', this._onKeyDown);
+        document.removeEventListener('keyup', this._onKeyUp);
+        
+        // Remove other events
+        svg.removeEventListener('wheel', this._onWheel);
+        svg.removeEventListener('contextmenu', this._onContextMenu);
+        
+                 // Clear state
+         this.activePointers.clear();
+         this.isDrawing = false;
+         this.isInitialized = false;
+     }
 }