keyboard.js

/**
 * Keyboard shortcuts and input handling for the dashboard
 */
class KeyboardManager {
    constructor(dashboard) {
        this.dashboard = dashboard;
        this.setupKeyboardShortcuts();
    }

    handleArrowKeys(e, id) {
        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
            e.preventDefault();
            const increment = e.shiftKey ? 10 : 1;
            const direction = e.key === 'ArrowUp' ? 1 : -1;
            this.dashboard[id] = Math.max(this.dashboard.config[id].min, Math.min(this.dashboard.config[id].max, this.dashboard[id] + (increment * direction)));
            e.target.value = this.dashboard[id];
            this.dashboard.updateGrid();
        }
    }
    
    setupKeyboardShortcuts() {
        document.addEventListener('keydown', (e) => {
            const active = document.activeElement;
            const inputFocused = active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.contentEditable === 'true');

            if (!inputFocused) {
                // Shift+G to toggle grid visibility
                if (e.shiftKey && e.key === 'G') {
                    e.preventDefault();
                    this.dashboard.toggleGridVisibility();
                    return;
                }

                // Shift+A to open add widget menu at cursor (edit mode only)
                if (e.shiftKey && e.key === 'A' && this.dashboard.gridMode) {
                    e.preventDefault();
                    this.openWidgetMenuAtCursor();
                    return;
                }

                // Shift+N to create new dashboard (edit mode only)
                if (e.shiftKey && e.key === 'N' && this.dashboard.gridMode) {
                    e.preventDefault();
                    this.dashboard.dashboardManager.createNewDashboard();
                    return;
                }

            }
            
            if (!this.dashboard.gridMode) return; // Guard clause for grid mode
            
            // Handle widget menu navigation
            const widgetMenuOverlay = document.getElementById('widgetMenuOverlay');
            if (widgetMenuOverlay && widgetMenuOverlay.classList.contains('show')) {
                if (e.key === 'Escape') {
                    this.dashboard.closeWidgetMenu();
                } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                    e.preventDefault();
                    this.navigateWidgetMenu(e.key === 'ArrowDown' ? 1 : -1);
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    this.selectFocusedWidget();
                }
            } else {
                // ESC key to deselect widgets when menu is closed
                if (e.key === 'Escape') {
                    this.dashboard.widgetManager.deselectAllWidgets();
                }

                if (!inputFocused && this.dashboard.gridMode) {
                    // Delete selected widget
                    if (e.key === 'Delete' || e.key === 'Backspace') {
                        const selected = document.querySelector('.widget.selected');
                        if (selected) {
                            e.preventDefault();
                            this.dashboard.widgetManager.deleteWidget(selected.id);
                        }
                    }

                    // Arrow keys to navigate between widgets
                    if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
                        const widgets = Array.from(document.querySelectorAll('.widget'));
                        if (widgets.length === 0) return;
                        e.preventDefault();
                        const selected = document.querySelector('.widget.selected');
                        const currentIdx = selected ? widgets.indexOf(selected) : -1;
                        const forward = e.key === 'ArrowRight' || e.key === 'ArrowDown';
                        let nextIdx;
                        if (currentIdx === -1) {
                            nextIdx = 0;
                        } else {
                            nextIdx = forward
                                ? (currentIdx + 1) % widgets.length
                                : (currentIdx - 1 + widgets.length) % widgets.length;
                        }
                        this.dashboard.widgetManager.selectWidget(widgets[nextIdx]);
                    }

                    // [ send backward, ] bring forward
                    if (e.key === '[') {
                        const selected = document.querySelector('.widget.selected');
                        if (selected) {
                            e.preventDefault();
                            this.dashboard.widgetManager.sendBackward(selected.id);
                        }
                    }
                    if (e.key === ']') {
                        const selected = document.querySelector('.widget.selected');
                        if (selected) {
                            e.preventDefault();
                            this.dashboard.widgetManager.bringForward(selected.id);
                        }
                    }
                }
            }
        });
        
        // Click outside to deselect or close menu
        document.addEventListener('click', (e) => {
            // Close widget menu if clicking outside
            const widgetMenuOverlay = document.getElementById('widgetMenuOverlay');
            if (widgetMenuOverlay && widgetMenuOverlay.classList.contains('show')) {
                if (!e.target.closest('.widget-menu') && !e.target.closest('#lpAddWidget')) {
                    this.dashboard.closeWidgetMenu();
                }
            }
            
            // Deselect widgets if clicking on empty canvas (not clicking on widget, controls, config panel, left panel, or widget menu)
            if (!e.target.closest('.widget') && !e.target.closest('.footer-bar') && !e.target.closest('.config-panel') && !e.target.closest('#leftPanel') && !e.target.closest('.widget-menu')) {
                if (this.dashboard.widgetManager._justResized) {
                    this.dashboard.widgetManager._justResized = false;
                } else {
                    this.dashboard.widgetManager.deselectAllWidgets();
                }
            }
        });
        
        // Window resize to update widget positions
        window.addEventListener('resize', () => {
            this.dashboard.updateWidgetPositions();
        });
    }
    
    navigateWidgetMenu(direction) {
        const widgetMenuOverlay = document.getElementById('widgetMenuOverlay');
        if (!widgetMenuOverlay) return;
        
        const options = widgetMenuOverlay.querySelectorAll('.widget-option');
        const currentFocused = widgetMenuOverlay.querySelector('.widget-option.focused');
        
        if (!currentFocused) {
            // If no option is focused, focus the first one
            if (options.length > 0) {
                options[0].classList.add('focused');
                options[0].focus();
            }
            return;
        }
        
        const currentIndex = Array.from(options).indexOf(currentFocused);
        let newIndex = currentIndex + direction;
        
        // Wrap around
        if (newIndex < 0) {
            newIndex = options.length - 1;
        } else if (newIndex >= options.length) {
            newIndex = 0;
        }
        
        // Remove focus from current option
        currentFocused.classList.remove('focused');
        
        // Add focus to new option
        const newFocused = options[newIndex];
        newFocused.classList.add('focused');
        newFocused.focus();
    }
    
    selectFocusedWidget() {
        const widgetMenuOverlay = document.getElementById('widgetMenuOverlay');
        if (!widgetMenuOverlay) return;
        
        const focusedOption = widgetMenuOverlay.querySelector('.widget-option.focused');
        if (focusedOption) {
            const widgetType = focusedOption.dataset.widgetType;
            this.dashboard.selectWidgetType(widgetType);
        }
    }
    
    openWidgetMenuAtCursor() {
        const widgetMenuOverlay = document.getElementById('widgetMenuOverlay');
        if (!widgetMenuOverlay) return;

        if (widgetMenuOverlay.classList.contains('show')) {
            this.dashboard.closeWidgetMenu();
        } else {
            const x = this.dashboard._lastMouseX;
            const y = this.dashboard._lastMouseY;
            this.dashboard.openWidgetMenu(x, y);
        }
    }
}

export { KeyboardManager };