@nuraly/lumenui 0.2.1 → 0.3.2

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

@@ -0,0 +1,456 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCanvasController } from './base.controller.js';
+import { WorkflowNodeType, NODE_COLORS, NODE_ICONS, } from '../workflow-canvas.types.js';
+/**
+ * Controller for frame node operations including:
+ * - Resize functionality
+ * - Containment detection
+ * - Move with contents
+ * - Collapse/expand
+ * - Aggregated ports calculation
+ */
+export class FrameController extends BaseCanvasController {
+    constructor(host) {
+        super(host);
+        this.resizeState = null;
+        this.MIN_FRAME_WIDTH = 200;
+        this.MIN_FRAME_HEIGHT = 150;
+        this.handleResizeDrag = (event) => {
+            this.handleResizeDragWithCoords(event.clientX, event.clientY);
+        };
+        this.handleResizeTouchDrag = (event) => {
+            event.preventDefault();
+            if (event.touches.length > 0) {
+                this.handleResizeDragWithCoords(event.touches[0].clientX, event.touches[0].clientY);
+            }
+        };
+        this.stopResize = () => {
+            if (!this.resizeState)
+                return;
+            const frame = this._host.workflow.nodes.find(n => n.id === this.resizeState.frameId);
+            if (frame) {
+                // Update containment after resize
+                this.updateFrameContainment(frame);
+            }
+            this.resizeState = null;
+            document.removeEventListener('mousemove', this.handleResizeDrag);
+            document.removeEventListener('mouseup', this.stopResize);
+            document.removeEventListener('touchmove', this.handleResizeTouchDrag);
+            document.removeEventListener('touchend', this.stopResizeTouch);
+            this._host.dispatchWorkflowChanged();
+        };
+        this.stopResizeTouch = () => {
+            this.stopResize();
+        };
+    }
+    // ===== RESIZE OPERATIONS =====
+    /**
+     * Start resizing a frame from a specific handle
+     */
+    startResize(event, frame, handle) {
+        event.stopPropagation();
+        event.preventDefault();
+        const config = frame.configuration || {};
+        this.resizeState = {
+            frameId: frame.id,
+            handle,
+            startX: event.clientX,
+            startY: event.clientY,
+            startWidth: config.frameWidth || 400,
+            startHeight: config.frameHeight || 300,
+            startPosition: Object.assign({}, frame.position),
+        };
+        // Add global listeners
+        document.addEventListener('mousemove', this.handleResizeDrag);
+        document.addEventListener('mouseup', this.stopResize);
+        document.addEventListener('touchmove', this.handleResizeTouchDrag, { passive: false });
+        document.addEventListener('touchend', this.stopResizeTouch);
+    }
+    handleResizeDragWithCoords(clientX, clientY) {
+        if (!this.resizeState)
+            return;
+        const { handle, startX, startY, startWidth, startHeight, startPosition, frameId } = this.resizeState;
+        const frame = this._host.workflow.nodes.find(n => n.id === frameId);
+        if (!frame)
+            return;
+        const deltaX = (clientX - startX) / this._host.viewport.zoom;
+        const deltaY = (clientY - startY) / this._host.viewport.zoom;
+        let newWidth = startWidth;
+        let newHeight = startHeight;
+        let newX = startPosition.x;
+        let newY = startPosition.y;
+        // Calculate new dimensions based on handle
+        switch (handle) {
+            case 'se':
+                newWidth = Math.max(this.MIN_FRAME_WIDTH, startWidth + deltaX);
+                newHeight = Math.max(this.MIN_FRAME_HEIGHT, startHeight + deltaY);
+                break;
+            case 'sw':
+                newWidth = Math.max(this.MIN_FRAME_WIDTH, startWidth - deltaX);
+                newHeight = Math.max(this.MIN_FRAME_HEIGHT, startHeight + deltaY);
+                newX = startPosition.x + (startWidth - newWidth);
+                break;
+            case 'ne':
+                newWidth = Math.max(this.MIN_FRAME_WIDTH, startWidth + deltaX);
+                newHeight = Math.max(this.MIN_FRAME_HEIGHT, startHeight - deltaY);
+                newY = startPosition.y + (startHeight - newHeight);
+                break;
+            case 'nw':
+                newWidth = Math.max(this.MIN_FRAME_WIDTH, startWidth - deltaX);
+                newHeight = Math.max(this.MIN_FRAME_HEIGHT, startHeight - deltaY);
+                newX = startPosition.x + (startWidth - newWidth);
+                newY = startPosition.y + (startHeight - newHeight);
+                break;
+            case 'n':
+                newHeight = Math.max(this.MIN_FRAME_HEIGHT, startHeight - deltaY);
+                newY = startPosition.y + (startHeight - newHeight);
+                break;
+            case 's':
+                newHeight = Math.max(this.MIN_FRAME_HEIGHT, startHeight + deltaY);
+                break;
+            case 'e':
+                newWidth = Math.max(this.MIN_FRAME_WIDTH, startWidth + deltaX);
+                break;
+            case 'w':
+                newWidth = Math.max(this.MIN_FRAME_WIDTH, startWidth - deltaX);
+                newX = startPosition.x + (startWidth - newWidth);
+                break;
+        }
+        // Snap to grid
+        const snapped = this.snapToGrid(newX, newY);
+        newX = snapped.x;
+        newY = snapped.y;
+        newWidth = Math.round(newWidth / 20) * 20;
+        newHeight = Math.round(newHeight / 20) * 20;
+        // Update frame
+        frame.position = { x: newX, y: newY };
+        frame.configuration = Object.assign(Object.assign({}, frame.configuration), { frameWidth: newWidth, frameHeight: newHeight });
+        this._host.requestUpdate();
+    }
+    // ===== CONTAINMENT DETECTION =====
+    /**
+     * Check if a node's center is within a frame's bounds
+     */
+    isNodeInFrame(node, frame) {
+        // Frames and notes cannot be contained in frames
+        if (node.type === WorkflowNodeType.FRAME || node.type === WorkflowNodeType.NOTE) {
+            return false;
+        }
+        const config = frame.configuration || {};
+        const frameWidth = config.frameWidth || 400;
+        const frameHeight = config.frameHeight || 300;
+        const nodeWidth = 180; // Standard node width
+        const nodeHeight = 80; // Standard node height
+        const frameLeft = frame.position.x;
+        const frameTop = frame.position.y;
+        const frameRight = frameLeft + frameWidth;
+        const frameBottom = frameTop + frameHeight;
+        // Node center must be inside frame
+        const nodeCenterX = node.position.x + nodeWidth / 2;
+        const nodeCenterY = node.position.y + nodeHeight / 2;
+        return (nodeCenterX >= frameLeft &&
+            nodeCenterX <= frameRight &&
+            nodeCenterY >= frameTop &&
+            nodeCenterY <= frameBottom);
+    }
+    /**
+     * Update frame's containedNodeIds based on current node positions
+     */
+    updateFrameContainment(frame) {
+        const containedIds = [];
+        for (const node of this._host.workflow.nodes) {
+            if (node.id === frame.id)
+                continue;
+            if (node.type === WorkflowNodeType.FRAME)
+                continue;
+            if (this.isNodeInFrame(node, frame)) {
+                containedIds.push(node.id);
+                node.parentFrameId = frame.id;
+            }
+            else if (node.parentFrameId === frame.id) {
+                node.parentFrameId = null;
+            }
+        }
+        frame.containedNodeIds = containedIds;
+    }
+    /**
+     * Update all frames' containment after node move
+     * @param triggerUpdate If true, triggers a workflow update after containment changes
+     */
+    updateAllFrameContainments(triggerUpdate = false) {
+        const frames = this._host.workflow.nodes.filter(n => n.type === WorkflowNodeType.FRAME);
+        let hasChanges = false;
+        for (const frame of frames) {
+            const oldIds = new Set(frame.containedNodeIds || []);
+            this.updateFrameContainment(frame);
+            const newIds = new Set(frame.containedNodeIds || []);
+            // Check if containment changed
+            if (oldIds.size !== newIds.size || ![...oldIds].every(id => newIds.has(id))) {
+                hasChanges = true;
+            }
+        }
+        // If changes occurred and update is requested, trigger a re-render
+        if (hasChanges && triggerUpdate) {
+            this._host.requestUpdate();
+        }
+    }
+    /**
+     * Get all nodes contained in a frame
+     */
+    getContainedNodes(frame) {
+        const ids = new Set(frame.containedNodeIds || []);
+        return this._host.workflow.nodes.filter(n => ids.has(n.id));
+    }
+    // ===== MOVE WITH CONTENTS =====
+    /**
+     * Move a frame and all its contained nodes by delta
+     */
+    moveFrameWithContents(frame, deltaX, deltaY) {
+        // Move frame
+        frame.position.x += deltaX;
+        frame.position.y += deltaY;
+        // Move contained nodes
+        const containedNodes = this.getContainedNodes(frame);
+        for (const node of containedNodes) {
+            node.position.x += deltaX;
+            node.position.y += deltaY;
+        }
+    }
+    // ===== COLLAPSE / EXPAND =====
+    /**
+     * Toggle frame collapsed state
+     */
+    toggleCollapsed(frame) {
+        const config = frame.configuration || {};
+        const collapsed = config.frameCollapsed;
+        // Build new configuration
+        let newConfig;
+        if (collapsed) {
+            // Expand: restore original dimensions
+            newConfig = Object.assign(Object.assign({}, config), { frameWidth: config._frameExpandedWidth || 400, frameHeight: config._frameExpandedHeight || 300, frameCollapsed: false });
+        }
+        else {
+            // Collapse: save dimensions and collapse
+            newConfig = Object.assign(Object.assign({}, config), { _frameExpandedWidth: config.frameWidth, _frameExpandedHeight: config.frameHeight, frameCollapsed: true });
+        }
+        // Determine visibility for contained nodes
+        // collapsed=true (currently collapsed) means we're expanding -> show nodes (visible=true)
+        // collapsed=false (currently expanded) means we're collapsing -> hide nodes (visible=false)
+        const shouldHide = !collapsed; // Hide when collapsing
+        const containedIds = new Set(frame.containedNodeIds || []);
+        // Create immutable workflow update to ensure Lit detects the change
+        const updatedNodes = this._host.workflow.nodes.map(node => {
+            if (node.id === frame.id) {
+                return Object.assign(Object.assign({}, node), { configuration: newConfig, 
+                    // Preserve containedNodeIds
+                    containedNodeIds: frame.containedNodeIds });
+            }
+            // Update contained nodes' metadata immutably
+            if (containedIds.has(node.id)) {
+                return Object.assign(Object.assign({}, node), { metadata: Object.assign(Object.assign({}, node.metadata), { _hiddenByFrame: shouldHide }) });
+            }
+            return node;
+        });
+        // Update edges between contained nodes immutably
+        const updatedEdges = this._host.workflow.edges.map(edge => {
+            const sourceInside = containedIds.has(edge.sourceNodeId);
+            const targetInside = containedIds.has(edge.targetNodeId);
+            // Internal edges (both nodes inside) should be hidden when collapsed
+            if (sourceInside && targetInside) {
+                return Object.assign(Object.assign({}, edge), { _hiddenByFrame: shouldHide });
+            }
+            return edge;
+        });
+        this._host.setWorkflow(Object.assign(Object.assign({}, this._host.workflow), { nodes: updatedNodes, edges: updatedEdges }));
+        this._host.dispatchWorkflowChanged();
+    }
+    /**
+     * Set visibility of nodes contained in a frame
+     */
+    // @ts-ignore Reserved for future frame collapse/expand feature
+    setContainedNodesVisibility(frame, visible) {
+        const containedNodes = this.getContainedNodes(frame);
+        for (const node of containedNodes) {
+            // Use a metadata flag for visibility
+            node.metadata = node.metadata || {};
+            node.metadata._hiddenByFrame = !visible;
+        }
+        // Also handle edges between contained nodes
+        const containedIds = new Set(frame.containedNodeIds || []);
+        for (const edge of this._host.workflow.edges) {
+            const sourceInside = containedIds.has(edge.sourceNodeId);
+            const targetInside = containedIds.has(edge.targetNodeId);
+            // Internal edges (both nodes inside) should be hidden
+            if (sourceInside && targetInside) {
+                edge._hiddenByFrame = !visible;
+            }
+        }
+    }
+    // ===== AGGREGATED PORTS =====
+    /**
+     * Calculate aggregated ports for a collapsed frame
+     */
+    getAggregatedPorts(frame) {
+        const containedIds = new Set(frame.containedNodeIds || []);
+        const inputs = [];
+        const outputs = [];
+        for (const edge of this._host.workflow.edges) {
+            const sourceInside = containedIds.has(edge.sourceNodeId);
+            const targetInside = containedIds.has(edge.targetNodeId);
+            // External -> Internal = Input
+            if (!sourceInside && targetInside) {
+                const sourceNode = this._host.workflow.nodes.find(n => n.id === edge.sourceNodeId);
+                inputs.push({
+                    id: `agg-in-${edge.id}`,
+                    originalEdgeId: edge.id,
+                    internalNodeId: edge.targetNodeId,
+                    internalPortId: edge.targetPortId,
+                    label: (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.name) || 'Input',
+                    direction: 'incoming',
+                });
+            }
+            // Internal -> External = Output
+            if (sourceInside && !targetInside) {
+                const targetNode = this._host.workflow.nodes.find(n => n.id === edge.targetNodeId);
+                outputs.push({
+                    id: `agg-out-${edge.id}`,
+                    originalEdgeId: edge.id,
+                    internalNodeId: edge.sourceNodeId,
+                    internalPortId: edge.sourcePortId,
+                    label: (targetNode === null || targetNode === void 0 ? void 0 : targetNode.name) || 'Output',
+                    direction: 'outgoing',
+                });
+            }
+        }
+        return { inputs, outputs };
+    }
+    // ===== FIT TO CONTENTS =====
+    /**
+     * Auto-resize frame to fit its contained nodes with padding
+     */
+    fitToContents(frame, padding = 40) {
+        const containedNodes = this.getContainedNodes(frame);
+        if (containedNodes.length === 0)
+            return;
+        const nodeWidth = 180;
+        const nodeHeight = 80;
+        let minX = Infinity, minY = Infinity;
+        let maxX = -Infinity, maxY = -Infinity;
+        for (const node of containedNodes) {
+            minX = Math.min(minX, node.position.x);
+            minY = Math.min(minY, node.position.y);
+            maxX = Math.max(maxX, node.position.x + nodeWidth);
+            maxY = Math.max(maxY, node.position.y + nodeHeight);
+        }
+        const config = frame.configuration || {};
+        const labelPlacement = config.frameLabelPlacement || 'outside';
+        frame.position = {
+            x: minX - padding,
+            y: minY - padding - (labelPlacement === 'outside' ? 24 : 0),
+        };
+        frame.configuration = Object.assign(Object.assign({}, config), { frameWidth: maxX - minX + padding * 2, frameHeight: maxY - minY + padding * 2 + (labelPlacement === 'outside' ? 24 : 0) });
+        this._host.requestUpdate();
+        this._host.dispatchWorkflowChanged();
+    }
+    // ===== CREATE FRAME FROM SELECTION =====
+    /**
+     * Create a new frame around currently selected nodes
+     */
+    createFrameFromSelection() {
+        const selectedNodes = this._host.workflow.nodes.filter(n => this._host.selectedNodeIds.has(n.id) &&
+            n.type !== WorkflowNodeType.FRAME &&
+            n.type !== WorkflowNodeType.NOTE);
+        if (selectedNodes.length === 0)
+            return null;
+        const nodeWidth = 180;
+        const nodeHeight = 80;
+        const padding = 40;
+        // Calculate bounds
+        let minX = Infinity, minY = Infinity;
+        let maxX = -Infinity, maxY = -Infinity;
+        for (const node of selectedNodes) {
+            minX = Math.min(minX, node.position.x);
+            minY = Math.min(minY, node.position.y);
+            maxX = Math.max(maxX, node.position.x + nodeWidth);
+            maxY = Math.max(maxY, node.position.y + nodeHeight);
+        }
+        // Create frame node
+        const frame = {
+            id: `frame-${Date.now()}`,
+            name: 'Group',
+            type: WorkflowNodeType.FRAME,
+            position: {
+                x: minX - padding,
+                y: minY - padding - 24, // Account for outside label
+            },
+            configuration: {
+                frameLabel: 'Group',
+                frameWidth: maxX - minX + padding * 2,
+                frameHeight: maxY - minY + padding * 2 + 24,
+                frameBackgroundColor: 'rgba(99, 102, 241, 0.05)',
+                frameBorderColor: 'rgba(99, 102, 241, 0.3)',
+                frameLabelPosition: 'top-left',
+                frameLabelPlacement: 'outside',
+                frameShowLabel: true,
+                frameCollapsed: false,
+            },
+            ports: { inputs: [], outputs: [] },
+            containedNodeIds: selectedNodes.map(n => n.id),
+        };
+        // Add frame at beginning (renders behind) and update parentFrameId immutably
+        const selectedIds = new Set(selectedNodes.map(n => n.id));
+        this._host.setWorkflow(Object.assign(Object.assign({}, this._host.workflow), { nodes: [
+                frame,
+                ...this._host.workflow.nodes.map(node => selectedIds.has(node.id) ? Object.assign(Object.assign({}, node), { parentFrameId: frame.id }) : node),
+            ] }));
+        this._host.dispatchWorkflowChanged();
+        return frame;
+    }
+    // ===== DELETE FRAME =====
+    /**
+     * Delete a frame
+     * @param deleteContents If true, also delete contained nodes
+     */
+    deleteFrame(frame, deleteContents = false) {
+        if (deleteContents) {
+            // Delete all contained nodes and their edges
+            const containedIds = new Set(frame.containedNodeIds || []);
+            this._host.setWorkflow(Object.assign(Object.assign({}, this._host.workflow), { edges: this._host.workflow.edges.filter(e => !containedIds.has(e.sourceNodeId) && !containedIds.has(e.targetNodeId)), nodes: this._host.workflow.nodes.filter(n => n.id !== frame.id && !containedIds.has(n.id)) }));
+        }
+        else {
+            // Only delete frame, clear parentFrameId on contained nodes
+            const containedNodeIdSet = new Set(frame.containedNodeIds || []);
+            this._host.setWorkflow(Object.assign(Object.assign({}, this._host.workflow), { nodes: this._host.workflow.nodes
+                    .filter(n => n.id !== frame.id)
+                    .map(n => containedNodeIdSet.has(n.id) ? Object.assign(Object.assign({}, n), { parentFrameId: null }) : n) }));
+        }
+        this._host.dispatchWorkflowChanged();
+    }
+    // ===== HELPERS =====
+    /**
+     * Check if a frame is collapsed
+     */
+    isFrameCollapsed(frame) {
+        var _a;
+        return Boolean((_a = frame.configuration) === null || _a === void 0 ? void 0 : _a.frameCollapsed);
+    }
+    /**
+     * Get node icons and colors for collapsed frame preview
+     */
+    getContainedNodePreviews(frame, maxCount = 5) {
+        const containedNodes = this.getContainedNodes(frame);
+        return containedNodes.slice(0, maxCount).map(node => {
+            var _a, _b;
+            return ({
+                icon: ((_a = node.metadata) === null || _a === void 0 ? void 0 : _a.icon) || NODE_ICONS[node.type] || 'box',
+                color: ((_b = node.metadata) === null || _b === void 0 ? void 0 : _b.color) || NODE_COLORS[node.type] || '#3b82f6',
+                name: node.name,
+            });
+        });
+    }
+}
+//# sourceMappingURL=frame.controller.js.map

package/dist/src/components/canvas/controllers/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseCanvasController } from './base.controller.js';
+export { ViewportController, type ViewportHost } from './viewport.controller.js';
+export { SelectionController } from './selection.controller.js';
+export { ConnectionController } from './connection.controller.js';
+export { KeyboardController } from './keyboard.controller.js';
+export { DragController } from './drag.controller.js';
+export { ConfigController } from './config.controller.js';
+export { MarqueeController, type MarqueeState, type MarqueeHost } from './marquee.controller.js';
+export { ClipboardController, type ClipboardData, type ClipboardHost } from './clipboard.controller.js';
+export { UndoController } from './undo.controller.js';
+export { FrameController } from './frame.controller.js';
+export { CollaborationController } from './collaboration.controller.js';
+export { TouchController } from './touch.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/canvas/controllers/index.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// Base controller
+export { BaseCanvasController } from './base.controller.js';
+// Viewport controller for pan/zoom
+export { ViewportController } from './viewport.controller.js';
+// Selection controller
+export { SelectionController } from './selection.controller.js';
+// Connection controller for edge management
+export { ConnectionController } from './connection.controller.js';
+// Keyboard controller for navigation and shortcuts
+export { KeyboardController } from './keyboard.controller.js';
+// Drag controller for node dragging
+export { DragController } from './drag.controller.js';
+// Config controller for node configuration panel
+export { ConfigController } from './config.controller.js';
+// Marquee controller for box selection
+export { MarqueeController } from './marquee.controller.js';
+// Clipboard controller for copy/cut/paste
+export { ClipboardController } from './clipboard.controller.js';
+// Undo controller for undo/redo operations
+export { UndoController } from './undo.controller.js';
+// Frame controller for frame node operations
+export { FrameController } from './frame.controller.js';
+// Collaboration controller for real-time multi-user sync
+export { CollaborationController } from './collaboration.controller.js';
+// Touch controller for mobile gesture support
+export { TouchController } from './touch.controller.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,44 @@
+/**
+ * @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 { SelectionController } from './selection.controller.js';
+import { ClipboardController } from './clipboard.controller.js';
+import type { UndoController } from './undo.controller.js';
+/**
+ * Controller for keyboard navigation and shortcuts
+ */
+export declare class KeyboardController extends BaseCanvasController {
+    private boundHandleKeyDown;
+    private selectionController;
+    private clipboardController;
+    private undoController;
+    constructor(host: CanvasHost & ReactiveControllerHost, selectionController: SelectionController);
+    /**
+     * Set the clipboard controller (called after initialization)
+     */
+    setClipboardController(controller: ClipboardController): void;
+    /**
+     * Set the undo controller (called after initialization)
+     */
+    setUndoController(controller: UndoController): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Check if an element or any of its shadow roots contain an editable element
+     */
+    private isEditableElement;
+    /**
+     * Handle keyboard events
+     */
+    private handleKeyDown;
+    /**
+     * Navigate to a node using arrow keys
+     */
+    private navigateToNode;
+}
+//# sourceMappingURL=keyboard.controller.d.ts.map