plusui-native-core 0.1.4 → 0.1.5

package/Core/Features/Menu/menu.ts

@@ -0,0 +1,439 @@
+/**
+ * PlusUI Menu API
+ *
+ * Cross-platform native menu system including:
+ * - Application menu bar (File, Edit, View, etc.)
+ * - Context menus (right-click)
+ * - Popup menus
+ * - System tray menus
+ */
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type MenuItemType = 'normal' | 'separator' | 'submenu' | 'checkbox' | 'radio';
+
+export interface MenuItem {
+    /** Unique identifier for this menu item */
+    id: string;
+    /** Display text (use & before a letter for keyboard shortcut, e.g., "&File") */
+    label: string;
+    /** Keyboard shortcut (e.g., "Ctrl+S", "Cmd+Shift+N") */
+    accelerator?: string;
+    /** Icon path or data URL */
+    icon?: string;
+    /** Type of menu item */
+    type?: MenuItemType;
+    /** Whether the item is clickable */
+    enabled?: boolean;
+    /** For checkbox/radio types, whether it's checked */
+    checked?: boolean;
+    /** Nested menu items for submenus */
+    submenu?: MenuItem[];
+    /** Click handler (frontend only, not sent to backend) */
+    click?: (menuItem: MenuItem) => void;
+    /** Custom data attached to this item */
+    data?: Record<string, unknown>;
+}
+
+export interface MenuBarData {
+    items: MenuItem[];
+}
+
+export interface ContextMenuOptions {
+    /** Position to show the menu (defaults to cursor position) */
+    x?: number;
+    y?: number;
+    /** Only show for elements matching this selector */
+    selector?: string;
+    /** Context info passed to click handlers */
+    context?: Record<string, unknown>;
+}
+
+export interface ContextInfo {
+    x: number;
+    y: number;
+    clientX: number;
+    clientY: number;
+    selector: string;
+    tagName: string;
+    isEditable: boolean;
+    hasSelection: boolean;
+    selectedText?: string;
+}
+
+// ============================================================================
+// Menu API Class
+// ============================================================================
+
+export class MenuAPI {
+    private clickHandlers: Map<string, (item: MenuItem) => void> = new Map();
+    private contextMenuItems: MenuItem[] = [];
+    private contextMenuEnabled = false;
+    private selectorMenus: Map<string, MenuItem[]> = new Map();
+    private unsubscribeClick?: () => void;
+
+    constructor(
+        private invokeFn: (name: string, args?: unknown[]) => Promise<unknown>,
+        private eventFn: (event: string, callback: (...args: unknown[]) => void) => () => void
+    ) {
+        // Listen for menu item clicks from backend
+        this.unsubscribeClick = this.eventFn('menu:itemClick', (...args: unknown[]) => {
+            const id = args[0] as string;
+            this.handleItemClick(id);
+        });
+    }
+
+    // ========================================================================
+    // Popup Menus
+    // ========================================================================
+
+    /**
+     * Create a new popup menu and return its ID
+     */
+    async create(items: MenuItem[]): Promise<string> {
+        this.registerClickHandlers(items);
+        const cleanItems = this.stripFunctions(items);
+        return await this.invokeFn('menu.create', [cleanItems]) as string;
+    }
+
+    /**
+     * Show a popup menu at specified coordinates
+     */
+    async popup(menuId: string, x?: number, y?: number): Promise<void> {
+        await this.invokeFn('menu.popup', [menuId, x ?? 0, y ?? 0]);
+    }
+
+    /**
+     * Show a popup menu at the current cursor position
+     */
+    async popupAtCursor(menuId: string): Promise<void> {
+        await this.invokeFn('menu.popupAtCursor', [menuId]);
+    }
+
+    /**
+     * Close an open popup menu
+     */
+    async close(menuId: string): Promise<void> {
+        await this.invokeFn('menu.close', [menuId]);
+    }
+
+    /**
+     * Destroy a menu and free its resources
+     */
+    async destroy(menuId: string): Promise<void> {
+        await this.invokeFn('menu.destroy', [menuId]);
+    }
+
+    // ========================================================================
+    // Application Menu Bar
+    // ========================================================================
+
+    /**
+     * Set the application menu bar (Window menu on Windows/Linux, global on macOS)
+     */
+    async setApplicationMenu(items: MenuItem[]): Promise<void> {
+        this.registerClickHandlers(items);
+        const cleanItems = this.stripFunctions(items);
+        await this.invokeFn('menu.setApplicationMenu', [cleanItems]);
+    }
+
+    /**
+     * Get the current application menu structure
+     */
+    async getApplicationMenu(): Promise<MenuItem[]> {
+        return await this.invokeFn('menu.getApplicationMenu', []) as MenuItem[];
+    }
+
+    /**
+     * Append an item to the application menu bar
+     */
+    async appendToMenuBar(item: MenuItem): Promise<void> {
+        this.registerClickHandlers([item]);
+        const cleanItem = this.stripFunctions([item])[0];
+        await this.invokeFn('menu.appendToMenuBar', [cleanItem]);
+    }
+
+    // ========================================================================
+    // Context Menus (Right-Click)
+    // ========================================================================
+
+    /**
+     * Enable custom context menu, replacing the default browser/webview menu
+     */
+    enableContextMenu(items: MenuItem[]): void {
+        this.contextMenuItems = items;
+        this.contextMenuEnabled = true;
+        this.registerClickHandlers(items);
+        this.setupContextMenuHandler();
+    }
+
+    /**
+     * Disable custom context menu, restoring default behavior
+     */
+    disableContextMenu(): void {
+        this.contextMenuEnabled = false;
+    }
+
+    /**
+     * Set context menu items for a specific CSS selector
+     * Allows different menus for different elements
+     */
+    setContextMenuForSelector(selector: string, items: MenuItem[]): void {
+        this.selectorMenus.set(selector, items);
+        this.registerClickHandlers(items);
+    }
+
+    /**
+     * Show context menu programmatically
+     */
+    async showContextMenu(items: MenuItem[], options: ContextMenuOptions = {}): Promise<void> {
+        const menuId = await this.create(items);
+        await this.popup(menuId, options.x, options.y);
+    }
+
+    // ========================================================================
+    // Event Handling
+    // ========================================================================
+
+    /**
+     * Listen for any menu item click
+     */
+    onMenuItemClick(callback: (id: string, item?: MenuItem) => void): () => void {
+        return this.eventFn('menu:itemClick', (...args: unknown[]) => {
+            const id = args[0] as string;
+            callback(id);
+        });
+    }
+
+    /**
+     * Listen for context menu open
+     */
+    onContextMenuOpen(callback: (info: ContextInfo) => void): () => void {
+        return this.eventFn('menu:contextOpen', callback as (...args: unknown[]) => void);
+    }
+
+    // ========================================================================
+    // Predefined Menu Templates
+    // ========================================================================
+
+    /**
+     * Create a standard edit menu (Cut, Copy, Paste, etc.)
+     */
+    static createEditMenu(handlers?: Partial<{
+        undo: () => void;
+        redo: () => void;
+        cut: () => void;
+        copy: () => void;
+        paste: () => void;
+        selectAll: () => void;
+    }>): MenuItem {
+        return {
+            id: 'edit',
+            label: '&Edit',
+            submenu: [
+                { id: 'undo', label: 'Undo', accelerator: 'Ctrl+Z', click: handlers?.undo },
+                { id: 'redo', label: 'Redo', accelerator: 'Ctrl+Y', click: handlers?.redo },
+                { id: 'sep1', label: '', type: 'separator' },
+                { id: 'cut', label: 'Cut', accelerator: 'Ctrl+X', click: handlers?.cut },
+                { id: 'copy', label: 'Copy', accelerator: 'Ctrl+C', click: handlers?.copy },
+                { id: 'paste', label: 'Paste', accelerator: 'Ctrl+V', click: handlers?.paste },
+                { id: 'sep2', label: '', type: 'separator' },
+                { id: 'selectAll', label: 'Select All', accelerator: 'Ctrl+A', click: handlers?.selectAll },
+            ]
+        };
+    }
+
+    /**
+     * Create a standard file menu
+     */
+    static createFileMenu(handlers?: Partial<{
+        new: () => void;
+        open: () => void;
+        save: () => void;
+        saveAs: () => void;
+        exit: () => void;
+    }>): MenuItem {
+        return {
+            id: 'file',
+            label: '&File',
+            submenu: [
+                { id: 'new', label: 'New', accelerator: 'Ctrl+N', click: handlers?.new },
+                { id: 'open', label: 'Open...', accelerator: 'Ctrl+O', click: handlers?.open },
+                { id: 'sep1', label: '', type: 'separator' },
+                { id: 'save', label: 'Save', accelerator: 'Ctrl+S', click: handlers?.save },
+                { id: 'saveAs', label: 'Save As...', accelerator: 'Ctrl+Shift+S', click: handlers?.saveAs },
+                { id: 'sep2', label: '', type: 'separator' },
+                { id: 'exit', label: 'Exit', accelerator: 'Alt+F4', click: handlers?.exit },
+            ]
+        };
+    }
+
+    /**
+     * Create a standard view menu
+     */
+    static createViewMenu(handlers?: Partial<{
+        zoomIn: () => void;
+        zoomOut: () => void;
+        resetZoom: () => void;
+        fullscreen: () => void;
+        devtools: () => void;
+    }>): MenuItem {
+        return {
+            id: 'view',
+            label: '&View',
+            submenu: [
+                { id: 'zoomIn', label: 'Zoom In', accelerator: 'Ctrl++', click: handlers?.zoomIn },
+                { id: 'zoomOut', label: 'Zoom Out', accelerator: 'Ctrl+-', click: handlers?.zoomOut },
+                { id: 'resetZoom', label: 'Reset Zoom', accelerator: 'Ctrl+0', click: handlers?.resetZoom },
+                { id: 'sep1', label: '', type: 'separator' },
+                { id: 'fullscreen', label: 'Toggle Fullscreen', accelerator: 'F11', click: handlers?.fullscreen },
+                { id: 'sep2', label: '', type: 'separator' },
+                { id: 'devtools', label: 'Developer Tools', accelerator: 'F12', click: handlers?.devtools },
+            ]
+        };
+    }
+
+    /**
+     * Create a default context menu for text areas
+     */
+    static createTextContextMenu(): MenuItem[] {
+        return [
+            { id: 'cut', label: 'Cut', accelerator: 'Ctrl+X' },
+            { id: 'copy', label: 'Copy', accelerator: 'Ctrl+C' },
+            { id: 'paste', label: 'Paste', accelerator: 'Ctrl+V' },
+            { id: 'sep1', label: '', type: 'separator' },
+            { id: 'selectAll', label: 'Select All', accelerator: 'Ctrl+A' },
+        ];
+    }
+
+    /**
+     * Create a default context menu for images
+     */
+    static createImageContextMenu(): MenuItem[] {
+        return [
+            { id: 'copyImage', label: 'Copy Image' },
+            { id: 'saveImage', label: 'Save Image As...' },
+            { id: 'sep1', label: '', type: 'separator' },
+            { id: 'openInNewTab', label: 'Open Image in New Tab' },
+        ];
+    }
+
+    /**
+     * Create a default context menu for links
+     */
+    static createLinkContextMenu(): MenuItem[] {
+        return [
+            { id: 'openLink', label: 'Open Link' },
+            { id: 'openInNewTab', label: 'Open in New Tab' },
+            { id: 'sep1', label: '', type: 'separator' },
+            { id: 'copyLink', label: 'Copy Link Address' },
+        ];
+    }
+
+    // ========================================================================
+    // Private Helpers
+    // ========================================================================
+
+    private contextMenuHandlerSetup = false;
+
+    private setupContextMenuHandler(): void {
+        if (this.contextMenuHandlerSetup) return;
+        this.contextMenuHandlerSetup = true;
+
+        document.addEventListener('contextmenu', async (e) => {
+            if (!this.contextMenuEnabled) return;
+
+            e.preventDefault();
+
+            const target = e.target as HTMLElement;
+            const info: ContextInfo = {
+                x: e.screenX,
+                y: e.screenY,
+                clientX: e.clientX,
+                clientY: e.clientY,
+                selector: this.getElementSelector(target),
+                tagName: target.tagName,
+                isEditable: target.isContentEditable ||
+                    target.tagName === 'INPUT' ||
+                    target.tagName === 'TEXTAREA',
+                hasSelection: (window.getSelection()?.toString().length ?? 0) > 0,
+                selectedText: window.getSelection()?.toString()
+            };
+
+            // Find appropriate menu for this element
+            let items = this.contextMenuItems;
+
+            for (const [selector, menuItems] of this.selectorMenus) {
+                if (target.matches(selector)) {
+                    items = menuItems;
+                    break;
+                }
+            }
+
+            // Show the menu
+            await this.showContextMenu(items, { x: info.x, y: info.y, context: info as unknown as Record<string, unknown> });
+        });
+    }
+
+    private getElementSelector(el: HTMLElement): string {
+        let selector = el.tagName.toLowerCase();
+        if (el.id) selector += '#' + el.id;
+        if (el.className && typeof el.className === 'string') {
+            selector += '.' + el.className.split(' ').filter(Boolean).join('.');
+        }
+        return selector;
+    }
+
+    private registerClickHandlers(items: MenuItem[]): void {
+        for (const item of items) {
+            if (item.click) {
+                this.clickHandlers.set(item.id, item.click);
+            }
+            if (item.submenu) {
+                this.registerClickHandlers(item.submenu);
+            }
+        }
+    }
+
+    private handleItemClick(id: string): void {
+        const handler = this.clickHandlers.get(id);
+        if (handler) {
+            handler({ id, label: '' });
+        }
+    }
+
+    private stripFunctions(items: MenuItem[]): unknown[] {
+        return items.map(item => {
+            const { click, submenu, ...rest } = item;
+            const cleanItem: Record<string, unknown> = { ...rest };
+            if (submenu) {
+                cleanItem.submenu = this.stripFunctions(submenu);
+            }
+            return cleanItem;
+        });
+    }
+
+    /**
+     * Cleanup resources
+     */
+    dispose(): void {
+        this.unsubscribeClick?.();
+        this.clickHandlers.clear();
+        this.selectorMenus.clear();
+    }
+}
+
+// ============================================================================
+// Factory Function
+// ============================================================================
+
+export function createMenuAPI(
+    invokeFn: (name: string, args?: unknown[]) => Promise<unknown>,
+    eventFn: (event: string, callback: (...args: unknown[]) => void) => () => void
+): MenuAPI {
+    return new MenuAPI(invokeFn, eventFn);
+}
+
+export default MenuAPI;