import { EventBus } from '../core/events/EventBus'; import { DataService } from "./data/DataService"; import { AnimationService } from "./AnimationService"; import { Logger } from "../utils/Logger"; type D3SVGSelection = d3.Selection; type D3DivSelection = d3.Selection; interface InteractionState { isMouseDown: boolean; lastMousePosition: { x: number; y: number; }; selectedElement: Element | null; isDragging: boolean; touchStartTime: number; keyboardShortcutsEnabled: boolean; } interface InteractionHandlers { onElementHover?: (element: Element, event: MouseEvent) => void; onElementClick?: (element: Element, event: MouseEvent) => void; onKeyboardNavigation?: (key: string, event: KeyboardEvent) => void; onSliderInteraction?: (value: number, event: Event) => void; } /** * Interaction Service - Advanced User Interface & Accessibility Management * * ARCHITECTURAL RESPONSIBILITY: Comprehensive User Interaction & Accessibility Framework * * This service implements sophisticated interaction patterns for multi-platform energy * visualization, providing seamless mouse, touch, keyboard, and accessibility support. * Ensures inclusive design principles and responsive user experience across all devices. * * ADVANCED INTERACTION PATTERNS: * 1. **Multi-Modal Input**: Mouse, touch, and keyboard with context switching * 2. **Event Delegation**: Efficient handling of dynamic SVG elements * 3. **Accessibility Integration**: WCAG 2.1 compliance with screen reader support * 4. **Cross-Platform Compatibility**: Desktop, tablet, and mobile optimization * 5. **Performance Optimization**: Event debouncing and efficient listener management * 6. **State Management**: Centralized interaction state for coordinated responses * * USER EXPERIENCE ARCHITECTURE: * - **Mouse Interactions**: Precise hover, click, and drag operations * - **Touch Interactions**: Gesture recognition with mobile-optimized responses * - **Keyboard Navigation**: Full accessibility with arrow keys, space, enter * - **Screen Reader Support**: ARIA labels and semantic markup integration * - **Visual Feedback**: Immediate response to all user interactions * * ACCESSIBILITY FEATURES: * - Keyboard-only navigation through all interactive elements * - Screen reader compatibility with descriptive ARIA labels * - High contrast support and focus management * - Mobile accessibility with proper touch target sizing * - Semantic HTML structure for assistive technologies * * EVENT-DRIVEN INTEGRATION: * Communicates through event bus for loose coupling with other services, * enabling coordinated responses without direct dependencies. */ export declare class InteractionService { private animationControlService; private dataService; private eventBus; private logger; private state; private handlers; private eventListeners; constructor(animationControlService: AnimationService, dataService: DataService, eventBus: EventBus, logger: Logger); /** * Initialize Comprehensive Multi-Platform User Interactions * * INITIALIZATION RESPONSIBILITY: Complete interaction system setup across all input modalities * * This method orchestrates the setup of all user interaction capabilities, creating * a comprehensive interface layer that supports mouse, touch, keyboard, and accessibility * interactions for the energy visualization. * * MULTI-MODAL INTERACTION INITIALIZATION: * 1. **Mouse Interactions**: Hover effects, click handling, drag operations * 2. **Touch Interactions**: Mobile gestures with responsive feedback * 3. **Keyboard Navigation**: Full accessibility with arrow key navigation * 4. **Slider Controls**: Timeline interaction with precise positioning * 5. **Button Controls**: Play/pause and control button event handling * 6. **Accessibility Features**: WCAG 2.1 compliance with screen reader support * * CROSS-PLATFORM COMPATIBILITY: * Automatically detects device capabilities (touch support, keyboard availability) * and adapts interaction patterns for optimal user experience on each platform. * * EVENT SYSTEM INTEGRATION: * Broadcasts initialization completion to coordinate with other services, * enabling system-wide awareness of interaction capability readiness. */ initializeInteractions(svg: D3SVGSelection, tooltip: D3DivSelection): void; /** * Set up mouse event handlers * Provides hover effects, click handling, and drag support */ private setupMouseInteractions; /** * Set up touch event handlers * Provides mobile-friendly touch interactions */ private setupTouchInteractions; /** * Enable keyboard navigation shortcuts * * **Accessibility Enhancement Responsibility:** * - WCAG 2.1 AA compliance for keyboard navigation * - Document-level keyboard event delegation * - Form input safety (prevents interference) * - Global shortcut system activation * * **Keyboard Navigation Architecture:** * - Document Event Delegation: Single handler for all keyboard events * - Input Safety: Excludes form fields from shortcut processing * - State Management: Prevents duplicate handler registration * - Event System Integration: Coordinates with EventBus * * **Performance Optimization:** * - Single document listener (efficient delegation pattern) * - Early return for duplicate activation * - Form input filtering (performance + UX) * * **Accessibility Standards:** * - Follows ARIA keyboard navigation patterns * - Provides alternative to mouse interaction * - Ensures consistent cross-platform behavior */ enableKeyboardNavigation(): void; /** * Disable keyboard navigation * * **Resource Management Responsibility:** * - Graceful keyboard navigation shutdown * - State cleanup coordination * - Memory leak prevention (handlers cleaned by cleanup()) * * **Accessibility Pattern:** * - Allows dynamic keyboard navigation toggling * - Maintains system state consistency * - Prepares for service disposal */ disableKeyboardNavigation(): void; /** * Handle keyboard navigation events * * **Keyboard Shortcuts Responsibility:** * - Comprehensive animation control via keyboard * - Standard accessibility key mapping * - Cross-platform keyboard compatibility * - Event delegation and custom handler integration * * **Standard Keyboard Mappings (WCAG 2.1 AA):** * - Space/Enter: Play/Pause toggle (standard media controls) * - Arrow Left/Right: Year navigation (standard timeline controls) * - Home/End: First/Last year navigation (standard list navigation) * - Escape: Pause/Stop action (standard escape behavior) * * **Event-Driven Architecture Integration:** * - Emits structured keyboard events to EventBus * - Captures modifier keys (Ctrl, Shift, Alt) for advanced interactions * - Integrates with AnimationService for timeline control * - Supports custom keyboard handlers via callback pattern * * **Accessibility Design Principles:** * - Follows operating system keyboard conventions * - Provides equivalent functionality to mouse interactions * - Preventable default behavior (event.preventDefault()) * - Comprehensive modifier key support for power users */ private handleKeyboardNavigation; /** * Set up slider interactions * * **Timeline Control Responsibility:** * - Direct year selection via range slider * - Real-time year value feedback * - Smooth animation coordination * - Event-driven timeline synchronization * * **User Control Patterns:** * - HTML5 range input integration (native accessibility) * - Continuous value updates (smooth interaction) * - Animation service coordination (timeline sync) * - Custom event emission (extensibility) * * **Accessibility Features:** * - Native keyboard support (arrow keys, page up/down) * - Screen reader compatibility (range slider semantics) * - Touch-friendly interaction (mobile/tablet support) * - Visual feedback during interaction * * **Performance Considerations:** * - Direct DOM element access (cached reference) * - Efficient value parsing (parseFloat optimization) * - Event delegation pattern (single handler) */ private setupSliderInteractions; /** * Set up button interactions * * **Control Button Responsibility:** * - Play/pause animation control * - Speed adjustment controls * - Animation state management * - User feedback coordination * * **User Interface Patterns:** * - Primary action button (play/pause toggle) * - Secondary action buttons (speed controls) * - Event delegation for button groups * - State-aware button behavior * * **Accessibility Integration:** * - Click event handling (mouse + keyboard activation) * - Focus management (keyboard navigation) * - Screen reader button semantics * - Touch-friendly tap targets * * **Animation Control Architecture:** * - Direct AnimationService integration * - State synchronization (playing/paused) * - Speed control coordination * - Event emission for system coordination */ private setupButtonInteractions; /** * Set up accessibility features * * **WCAG 2.1 AA Compliance Responsibility:** * - ARIA labels and semantic roles * - Keyboard focus management * - Screen reader support * - Visual focus indicators * - Interactive element accessibility * * **Accessibility Standards Implementation:** * - SVG accessibility (role="img", aria-label) * - Keyboard navigation (tabindex, focus/blur) * - Control accessibility (slider, button roles) * - Focus indicators (visual outline feedback) * - Screen reader descriptions (meaningful labels) * * **Universal Design Principles:** * - Perceivable: Visual focus indicators, semantic structure * - Operable: Keyboard navigation, touch targets * - Understandable: Clear labels, consistent behavior * - Robust: Cross-platform compatibility, assistive technology support * * **Focus Management Architecture:** * - Logical tab order (sequential navigation) * - Visual focus indicators (CSS outline styling) * - Focus trap prevention (proper event handling) * - Screen reader announcements (ARIA integration) */ private setupAccessibilityFeatures; /** * Handle element hover events * * **Visual Feedback Responsibility:** * - Interactive element highlighting * - Hover state management * - Multi-element coordination (exclusive hover) * - Event-driven hover notifications * * **User Experience Patterns:** * - Visual Affordance: Immediate hover feedback via CSS classes * - Exclusive Interaction: Single element hover state (removes others) * - Event Context: Rich hover event data (element type, fuel, sector) * - Mouse Position: Coordinates for tooltip positioning * * **Interaction Architecture:** * - CSS Class-Based Styling: .hovered class for visual feedback * - Event Bus Integration: Structured hover events for system coordination * - Custom Handler Support: Extensible hover behavior * - Element Classification: Flow vs Box element detection * * **Performance Considerations:** * - Efficient DOM querying (.hovered class removal) * - Minimal DOM manipulation (add/remove classes) * - Event data extraction (cached attribute access) */ private handleElementHover; /** * Handle element click events * * **Selection Management Responsibility:** * - Element selection state management * - Exclusive selection pattern (single selection) * - Visual selection feedback * - Event-driven selection notifications * * **User Interaction Patterns:** * - Click-to-Select: Primary selection mechanism * - Exclusive Selection: Single element selected at a time * - Visual Feedback: .selected class for styling * - Context Preservation: Rich click event data * * **State Management Architecture:** * - CSS Class-Based Selection: .selected class for visual state * - DOM State Management: Clear previous selections * - Event Data Capture: Element type, fuel, sector, coordinates * - Extensible Handler Support: Custom click behavior * * **Integration Benefits:** * - Analytics Support: Click tracking and user behavior * - Tooltip Coordination: Click-based detailed information display * - Custom Behavior: Application-specific selection actions */ private handleElementClick; /** * Set custom interaction handlers */ setInteractionHandlers(handlers: InteractionHandlers): void; /** * Helper method to add event listener and track for cleanup */ private addEventListener; /** * Clean up all interactions and event listeners * * **Resource Management Responsibility:** * - Complete memory cleanup and leak prevention * - Event listener disposal * - State reset and consistency * - DOM class cleanup * * **Memory Management Architecture:** * - Event Listener Cleanup: Remove all tracked listeners to prevent leaks * - State Reset: Return to initial state for consistent disposal * - Handler Clearing: Remove all custom handlers * - DOM Cleanup: Remove visual state classes (.hovered, .selected) * * **Cleanup Pattern Benefits:** * - Memory Leak Prevention: Proper event listener disposal * - State Consistency: Clean slate for reinitialization * - Resource Optimization: Free unused memory and references * - Visual Cleanup: Remove transient UI states * * **Architecture Integration:** * - Service Lifecycle: Proper service disposal pattern * - Event-Driven Cleanup: Coordinated with other services * - DOM State Management: Visual consistency maintenance * - Performance Optimization: Resource deallocation */ cleanup(): void; /** * Get current interaction state */ getInteractionState(): Readonly; /** * Check if interactions are enabled */ isInteractionEnabled(): boolean; /** * Get interaction statistics */ getInteractionStats(): { eventListeners: number; keyboardEnabled: boolean; touchSupported: boolean; lastInteraction: { x: number; y: number; }; }; /** * Programmatically trigger element hover */ triggerElementHover(element: Element): void; /** * Programmatically trigger element click */ triggerElementClick(element: Element): void; } export {}; //# sourceMappingURL=InteractionService.d.ts.map