@nuraly/lumenui 0.2.1 → 0.2.2

package/dist/src/components/canvas/controllers/keyboard.controller.js

@@ -0,0 +1,275 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCanvasController } from './base.controller.js';
+import { CanvasMode } from '../workflow-canvas.types.js';
+/**
+ * Controller for keyboard navigation and shortcuts
+ */
+export class KeyboardController extends BaseCanvasController {
+    constructor(host, selectionController) {
+        super(host);
+        this.clipboardController = null;
+        this.undoController = null;
+        this.selectionController = selectionController;
+        this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+    }
+    /**
+     * Set the clipboard controller (called after initialization)
+     */
+    setClipboardController(controller) {
+        this.clipboardController = controller;
+    }
+    /**
+     * Set the undo controller (called after initialization)
+     */
+    setUndoController(controller) {
+        this.undoController = controller;
+    }
+    hostConnected() {
+        window.addEventListener('keydown', this.boundHandleKeyDown);
+    }
+    hostDisconnected() {
+        window.removeEventListener('keydown', this.boundHandleKeyDown);
+    }
+    /**
+     * Check if an element or any of its shadow roots contain an editable element
+     */
+    isEditableElement(element) {
+        if (!element)
+            return false;
+        const tagName = element.tagName.toUpperCase();
+        // Check if it's a native editable element
+        if (tagName === 'INPUT' || tagName === 'TEXTAREA') {
+            return true;
+        }
+        // Check for contenteditable
+        if (element.isContentEditable) {
+            return true;
+        }
+        // Check if it's a custom input component (nr-input, nr-select, etc.)
+        if (tagName.startsWith('NR-') && (tagName.includes('INPUT') ||
+            tagName.includes('SELECT') ||
+            tagName.includes('TEXTAREA'))) {
+            return true;
+        }
+        // Check shadow root for editable elements
+        const shadowRoot = element.shadowRoot;
+        if (shadowRoot) {
+            const activeInShadow = shadowRoot.activeElement;
+            if (activeInShadow && this.isEditableElement(activeInShadow)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Handle keyboard events
+     */
+    handleKeyDown(e) {
+        var _a, _b;
+        // Block keyboard events when canvas is disabled
+        if (this._host.disabled)
+            return;
+        // Don't handle key events if focus is in an input field
+        const target = e.target;
+        const activeElement = document.activeElement;
+        // Check both the event target and the active element
+        if (this.isEditableElement(target) || this.isEditableElement(activeElement)) {
+            return;
+        }
+        switch (e.key) {
+            case 'Delete':
+            case 'Backspace':
+                if (!this._host.readonly && this.selectionController.hasSelection()) {
+                    e.preventDefault();
+                    this.selectionController.deleteSelected();
+                }
+                break;
+            case 'Escape':
+                this._host.connectionState = null;
+                this._host.contextMenu = null;
+                this._host.configuredNode = null;
+                this.selectionController.clearSelection();
+                break;
+            case 'a':
+                if (e.ctrlKey || e.metaKey) {
+                    e.preventDefault();
+                    this.selectionController.selectAll();
+                }
+                break;
+            case 'c':
+                // Copy (Ctrl+C / Cmd+C) - only if nodes are selected, otherwise allow default text copy
+                if ((e.ctrlKey || e.metaKey) && this.clipboardController && this.selectionController.hasSelection()) {
+                    e.preventDefault();
+                    this.clipboardController.copySelected();
+                }
+                break;
+            case 'x':
+                // Cut (Ctrl+X / Cmd+X) - only if nodes are selected, otherwise allow default text cut
+                if ((e.ctrlKey || e.metaKey) && !this._host.readonly && this.clipboardController && this.selectionController.hasSelection()) {
+                    e.preventDefault();
+                    this.clipboardController.cutSelected();
+                }
+                break;
+            case 'v':
+                // Paste (Ctrl+V / Cmd+V) or Select mode (V key alone)
+                if ((e.ctrlKey || e.metaKey) && !this._host.readonly && this.clipboardController) {
+                    e.preventDefault();
+                    this.clipboardController.pasteFromClipboard();
+                }
+                else if (!e.ctrlKey && !e.metaKey && !e.shiftKey) {
+                    // Select mode (V key alone)
+                    e.preventDefault();
+                    this._host.mode = CanvasMode.SELECT;
+                    this._host.requestUpdate();
+                }
+                break;
+            case 'd':
+                // Duplicate (Ctrl+D / Cmd+D)
+                if ((e.ctrlKey || e.metaKey) && !this._host.readonly) {
+                    e.preventDefault();
+                    this.selectionController.duplicateSelected();
+                }
+                break;
+            case 'z':
+                // Undo (Ctrl+Z / Cmd+Z) or Redo (Ctrl+Shift+Z / Cmd+Shift+Z)
+                if ((e.ctrlKey || e.metaKey) && !this._host.readonly && this.undoController) {
+                    e.preventDefault();
+                    if (e.shiftKey) {
+                        this.undoController.performRedo();
+                    }
+                    else {
+                        this.undoController.performUndo();
+                    }
+                }
+                break;
+            case 'y':
+                // Redo (Ctrl+Y / Cmd+Y) - alternative shortcut
+                if ((e.ctrlKey || e.metaKey) && !this._host.readonly && this.undoController) {
+                    e.preventDefault();
+                    this.undoController.performRedo();
+                }
+                break;
+            case 'h':
+                // Pan mode (H key)
+                if (!e.ctrlKey && !e.metaKey && !e.shiftKey) {
+                    e.preventDefault();
+                    this._host.mode = CanvasMode.PAN;
+                    this._host.requestUpdate();
+                }
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                e.preventDefault();
+                this.navigateToNode(e.key);
+                break;
+            case 'Enter':
+                if (this._host.selectedNodeIds.size === 1) {
+                    this.selectionController.openConfigForSelected();
+                }
+                break;
+            case '/':
+                if (e.ctrlKey || e.metaKey) {
+                    e.preventDefault();
+                    (_b = (_a = this._host).toggleChatbotPanel) === null || _b === void 0 ? void 0 : _b.call(_a);
+                }
+                break;
+        }
+    }
+    /**
+     * Navigate to a node using arrow keys
+     */
+    navigateToNode(direction) {
+        const { workflow, selectedNodeIds, viewport, configuredNode } = this._host;
+        if (workflow.nodes.length === 0)
+            return;
+        // Get current position
+        let currentPosition;
+        if (selectedNodeIds.size > 0) {
+            const selectedId = Array.from(selectedNodeIds)[0];
+            const selectedNode = workflow.nodes.find(n => n.id === selectedId);
+            if (selectedNode) {
+                currentPosition = selectedNode.position;
+            }
+            else {
+                currentPosition = { x: 0, y: 0 };
+            }
+        }
+        else {
+            // No node selected, start from center of viewport
+            currentPosition = {
+                x: (-viewport.panX + 400) / viewport.zoom,
+                y: (-viewport.panY + 300) / viewport.zoom,
+            };
+        }
+        // Find the nearest node in the specified direction
+        let bestNode = null;
+        let bestScore = Infinity;
+        for (const node of workflow.nodes) {
+            if (selectedNodeIds.has(node.id))
+                continue;
+            const dx = node.position.x - currentPosition.x;
+            const dy = node.position.y - currentPosition.y;
+            let isInDirection = false;
+            let primaryDist = 0;
+            let secondaryDist = 0;
+            switch (direction) {
+                case 'ArrowUp':
+                    isInDirection = dy < -10;
+                    primaryDist = Math.abs(dy);
+                    secondaryDist = Math.abs(dx);
+                    break;
+                case 'ArrowDown':
+                    isInDirection = dy > 10;
+                    primaryDist = Math.abs(dy);
+                    secondaryDist = Math.abs(dx);
+                    break;
+                case 'ArrowLeft':
+                    isInDirection = dx < -10;
+                    primaryDist = Math.abs(dx);
+                    secondaryDist = Math.abs(dy);
+                    break;
+                case 'ArrowRight':
+                    isInDirection = dx > 10;
+                    primaryDist = Math.abs(dx);
+                    secondaryDist = Math.abs(dy);
+                    break;
+            }
+            if (isInDirection) {
+                const score = primaryDist + secondaryDist * 2;
+                if (score < bestScore) {
+                    bestScore = score;
+                    bestNode = node;
+                }
+            }
+        }
+        // If no node found in direction, try to find the closest node overall
+        if (!bestNode && selectedNodeIds.size === 0) {
+            for (const node of workflow.nodes) {
+                const dx = node.position.x - currentPosition.x;
+                const dy = node.position.y - currentPosition.y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                if (dist < bestScore) {
+                    bestScore = dist;
+                    bestNode = node;
+                }
+            }
+        }
+        if (bestNode) {
+            this.selectionController.clearSelection();
+            this._host.selectedNodeIds.add(bestNode.id);
+            this._host.selectedNodeIds = new Set(this._host.selectedNodeIds);
+            // Update config panel if it's open
+            if (configuredNode) {
+                this._host.configuredNode = bestNode;
+            }
+            this._host.dispatchNodeSelected(bestNode);
+        }
+    }
+}
+//# sourceMappingURL=keyboard.controller.js.map

package/dist/src/components/canvas/controllers/marquee.controller.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveControllerHost } from 'lit';
+import { BaseCanvasController } from './base.controller.js';
+import { CanvasHost } from '../interfaces/index.js';
+/**
+ * State for marquee selection box
+ */
+export interface MarqueeState {
+    startX: number;
+    startY: number;
+    currentX: number;
+    currentY: number;
+}
+/**
+ * Extended canvas host interface for marquee controller
+ */
+export interface MarqueeHost extends CanvasHost {
+    marqueeState: MarqueeState | null;
+}
+/**
+ * Controller for marquee (box) selection on canvas
+ * Allows users to click and drag to select multiple nodes
+ */
+export declare class MarqueeController extends BaseCanvasController<MarqueeHost & ReactiveControllerHost> {
+    /**
+     * Check if marquee selection is currently active
+     */
+    get isSelecting(): boolean;
+    /**
+     * Get the current marquee state
+     */
+    get marqueeState(): MarqueeState | null;
+    /**
+     * Start marquee selection
+     * Call this on mousedown on empty canvas area
+     */
+    startSelection(e: MouseEvent, addToSelection?: boolean): void;
+    /**
+     * Update marquee selection box during drag
+     * Call this on mousemove while marquee is active
+     */
+    updateSelection(e: MouseEvent): void;
+    /**
+     * End marquee selection and select nodes/edges within the box
+     * Call this on mouseup
+     */
+    endSelection(addToSelection?: boolean): void;
+    /**
+     * Cancel marquee selection without applying selection
+     */
+    cancelSelection(): void;
+    /**
+     * Get the normalized selection rectangle (always positive width/height)
+     */
+    getSelectionRect(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * Check if a node intersects with a rectangle
+     * Uses the node's bounding box (position + estimated size)
+     */
+    private nodeIntersectsRect;
+}
+//# sourceMappingURL=marquee.controller.d.ts.map

package/dist/src/components/canvas/controllers/marquee.controller.js

@@ -0,0 +1,128 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCanvasController } from './base.controller.js';
+/**
+ * Controller for marquee (box) selection on canvas
+ * Allows users to click and drag to select multiple nodes
+ */
+export class MarqueeController extends BaseCanvasController {
+    /**
+     * Check if marquee selection is currently active
+     */
+    get isSelecting() {
+        return this._host.marqueeState !== null;
+    }
+    /**
+     * Get the current marquee state
+     */
+    get marqueeState() {
+        return this._host.marqueeState;
+    }
+    /**
+     * Start marquee selection
+     * Call this on mousedown on empty canvas area
+     */
+    startSelection(e, addToSelection = false) {
+        if (this._host.readonly || this._host.disabled)
+            return;
+        const canvasPos = this.clientToCanvas(e.clientX, e.clientY);
+        this._host.marqueeState = {
+            startX: canvasPos.x,
+            startY: canvasPos.y,
+            currentX: canvasPos.x,
+            currentY: canvasPos.y,
+        };
+        // Clear selection unless shift is held
+        if (!addToSelection) {
+            this._host.selectedNodeIds = new Set();
+            this._host.selectedEdgeIds = new Set();
+        }
+        this._host.requestUpdate();
+    }
+    /**
+     * Update marquee selection box during drag
+     * Call this on mousemove while marquee is active
+     */
+    updateSelection(e) {
+        if (!this._host.marqueeState)
+            return;
+        const canvasPos = this.clientToCanvas(e.clientX, e.clientY);
+        this._host.marqueeState = Object.assign(Object.assign({}, this._host.marqueeState), { currentX: canvasPos.x, currentY: canvasPos.y });
+        this._host.requestUpdate();
+    }
+    /**
+     * End marquee selection and select nodes/edges within the box
+     * Call this on mouseup
+     */
+    endSelection(addToSelection = false) {
+        if (!this._host.marqueeState)
+            return;
+        const rect = this.getSelectionRect();
+        const selectedNodeIds = new Set(addToSelection ? this._host.selectedNodeIds : []);
+        const selectedEdgeIds = new Set(addToSelection ? this._host.selectedEdgeIds : []);
+        // Select nodes that intersect with the marquee rectangle
+        for (const node of this._host.workflow.nodes) {
+            if (this.nodeIntersectsRect(node, rect)) {
+                selectedNodeIds.add(node.id);
+            }
+        }
+        // Select edges where both source and target nodes are selected
+        for (const edge of this._host.workflow.edges) {
+            if (selectedNodeIds.has(edge.sourceNodeId) && selectedNodeIds.has(edge.targetNodeId)) {
+                selectedEdgeIds.add(edge.id);
+            }
+        }
+        // Update selection state
+        this._host.selectedNodeIds = selectedNodeIds;
+        this._host.selectedEdgeIds = selectedEdgeIds;
+        // Clear marquee state
+        this._host.marqueeState = null;
+        this._host.requestUpdate();
+    }
+    /**
+     * Cancel marquee selection without applying selection
+     */
+    cancelSelection() {
+        this._host.marqueeState = null;
+        this._host.requestUpdate();
+    }
+    /**
+     * Get the normalized selection rectangle (always positive width/height)
+     */
+    getSelectionRect() {
+        const state = this._host.marqueeState;
+        if (!state) {
+            return { x: 0, y: 0, width: 0, height: 0 };
+        }
+        return {
+            x: Math.min(state.startX, state.currentX),
+            y: Math.min(state.startY, state.currentY),
+            width: Math.abs(state.currentX - state.startX),
+            height: Math.abs(state.currentY - state.startY),
+        };
+    }
+    /**
+     * Check if a node intersects with a rectangle
+     * Uses the node's bounding box (position + estimated size)
+     */
+    nodeIntersectsRect(node, rect) {
+        // Estimated node dimensions (adjust based on your node component)
+        const nodeWidth = 200;
+        const nodeHeight = 80;
+        const nodeRect = {
+            x: node.position.x,
+            y: node.position.y,
+            width: nodeWidth,
+            height: nodeHeight,
+        };
+        // Check for intersection
+        return !(nodeRect.x + nodeRect.width < rect.x ||
+            rect.x + rect.width < nodeRect.x ||
+            nodeRect.y + nodeRect.height < rect.y ||
+            rect.y + rect.height < nodeRect.y);
+    }
+}
+//# sourceMappingURL=marquee.controller.js.map

package/dist/src/components/canvas/controllers/selection.controller.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveControllerHost } from 'lit';
+import { BaseCanvasController } from './base.controller.js';
+import { CanvasHost } from '../interfaces/index.js';
+import type { WorkflowNode, WorkflowEdge } from '../workflow-canvas.types.js';
+import type { UndoController } from './undo.controller.js';
+/**
+ * Controller for managing selection state (nodes and edges)
+ */
+export declare class SelectionController extends BaseCanvasController {
+    private undoController;
+    constructor(host: CanvasHost & ReactiveControllerHost);
+    /**
+     * Set the undo controller (called after initialization)
+     */
+    setUndoController(controller: UndoController): void;
+    /**
+     * Clear all selections
+     */
+    clearSelection(): void;
+    /**
+     * Select all nodes and edges
+     */
+    selectAll(): void;
+    /**
+     * Select a node
+     */
+    selectNode(nodeId: string, addToSelection?: boolean): void;
+    /**
+     * Deselect a node
+     */
+    deselectNode(nodeId: string): void;
+    /**
+     * Toggle node selection
+     */
+    toggleNodeSelection(nodeId: string): void;
+    /**
+     * Select an edge
+     */
+    selectEdge(edgeId: string, addToSelection?: boolean): void;
+    /**
+     * Check if a node is selected
+     */
+    isNodeSelected(nodeId: string): boolean;
+    /**
+     * Check if an edge is selected
+     */
+    isEdgeSelected(edgeId: string): boolean;
+    /**
+     * Get selected nodes
+     */
+    getSelectedNodes(): WorkflowNode[];
+    /**
+     * Get selected edges
+     */
+    getSelectedEdges(): WorkflowEdge[];
+    /**
+     * Delete selected items
+     */
+    deleteSelected(): void;
+    /**
+     * Duplicate selected nodes and their connecting edges
+     */
+    duplicateSelected(): void;
+    /**
+     * Open configuration for the first selected node
+     */
+    openConfigForSelected(): void;
+    /**
+     * Check if there are any selections
+     */
+    hasSelection(): boolean;
+    /**
+     * Get count of selected items
+     */
+    getSelectionCount(): {
+        nodes: number;
+        edges: number;
+    };
+}
+//# sourceMappingURL=selection.controller.d.ts.map