@nuraly/lumenui 0.2.1 → 0.3.2

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

@@ -0,0 +1,183 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCanvasController } from './base.controller.js';
+/**
+ * Controller for managing edge connections
+ */
+export class ConnectionController extends BaseCanvasController {
+    constructor(host) {
+        super(host);
+        this.undoController = null;
+    }
+    /**
+     * Set the undo controller (called after initialization)
+     */
+    setUndoController(controller) {
+        this.undoController = controller;
+    }
+    /**
+     * Start creating a connection from a port
+     */
+    startConnection(node, port, isInput, event) {
+        const pos = this.clientToCanvas(event.clientX, event.clientY);
+        this._host.connectionState = {
+            sourceNodeId: node.id,
+            sourcePortId: port.id,
+            sourceIsInput: isInput,
+            mouseX: pos.x,
+            mouseY: pos.y,
+        };
+    }
+    /**
+     * Update the connection line position during drag
+     */
+    updateConnectionPosition(event) {
+        if (!this._host.connectionState)
+            return;
+        const pos = this.clientToCanvas(event.clientX, event.clientY);
+        this._host.connectionState = Object.assign(Object.assign({}, this._host.connectionState), { mouseX: pos.x, mouseY: pos.y });
+    }
+    /**
+     * Complete the connection when released on a valid port
+     */
+    completeConnection(node, port, isInput) {
+        const state = this._host.connectionState;
+        if (!state)
+            return false;
+        // Can't connect input to input or output to output
+        if (state.sourceIsInput === isInput) {
+            this.cancelConnection();
+            return false;
+        }
+        // Can't connect to same node
+        if (state.sourceNodeId === node.id) {
+            this.cancelConnection();
+            return false;
+        }
+        // Determine source and target based on which port started the connection
+        const sourceNodeId = state.sourceIsInput ? node.id : state.sourceNodeId;
+        const sourcePortId = state.sourceIsInput ? port.id : state.sourcePortId;
+        const targetNodeId = state.sourceIsInput ? state.sourceNodeId : node.id;
+        const targetPortId = state.sourceIsInput ? state.sourcePortId : port.id;
+        // Check if edge already exists
+        const edgeExists = this._host.workflow.edges.some(edge => edge.sourceNodeId === sourceNodeId &&
+            edge.sourcePortId === sourcePortId &&
+            edge.targetNodeId === targetNodeId &&
+            edge.targetPortId === targetPortId);
+        if (!edgeExists) {
+            const newEdge = {
+                id: 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { const r = (Math.random() * 16) | 0; return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16); }),
+                sourceNodeId,
+                sourcePortId,
+                targetNodeId,
+                targetPortId,
+            };
+            // Record for undo before making changes
+            if (this.undoController) {
+                this.undoController.recordEdgeAdded(newEdge);
+            }
+            this._host.setWorkflow(Object.assign(Object.assign({}, this._host.workflow), { edges: [...this._host.workflow.edges, newEdge] }));
+            this._host.dispatchWorkflowChanged();
+        }
+        this.cancelConnection();
+        return !edgeExists;
+    }
+    /**
+     * Cancel the current connection
+     */
+    cancelConnection() {
+        this._host.connectionState = null;
+    }
+    /**
+     * Check if currently creating a connection
+     */
+    isConnecting() {
+        return this._host.connectionState !== null;
+    }
+    /**
+     * Get the current connection state
+     */
+    getConnectionState() {
+        return this._host.connectionState;
+    }
+    /**
+     * Get port position for a node
+     */
+    getPortPosition(node, portId, isInput) {
+        const nodeWidth = 180;
+        // Check if this is a config port (bottom ports)
+        const configPorts = node.ports.configs || [];
+        const configIndex = configPorts.findIndex(p => p.id === portId);
+        if (configIndex !== -1) {
+            // Config ports use: left: calc(50% + offset - 5px)
+            // where offset = (index - (total - 1) / 2) * 45
+            const totalConfigs = configPorts.length;
+            const portSpacing = 45;
+            const offsetFromCenter = (configIndex - (totalConfigs - 1) / 2) * portSpacing;
+            // Estimate node height - base height + status/content
+            // When there's status shown, node is taller
+            const hasStatus = node.status && node.status !== 'IDLE';
+            const nodeHeight = hasStatus ? 110 : 85;
+            return {
+                x: node.position.x + (nodeWidth / 2) + offsetFromCenter,
+                y: node.position.y + nodeHeight, // Bottom of node (port is at bottom: -4px)
+            };
+        }
+        // Regular input/output ports
+        const portIndex = isInput
+            ? node.ports.inputs.findIndex(p => p.id === portId)
+            : node.ports.outputs.findIndex(p => p.id === portId);
+        const totalPorts = isInput ? node.ports.inputs.length : node.ports.outputs.length;
+        // Match the port positioning from workflow-node.component.ts
+        const nodeHeight = 80;
+        const portSpacing = 20;
+        // Calculate vertical center position
+        const totalPortsHeight = (totalPorts - 1) * portSpacing;
+        const startY = (nodeHeight - totalPortsHeight) / 2;
+        const topOffset = startY + portIndex * portSpacing;
+        return {
+            x: node.position.x + (isInput ? 2 : nodeWidth - 2),
+            y: node.position.y + topOffset + 3,
+        };
+    }
+    /**
+     * Delete an edge by ID
+     */
+    deleteEdge(edgeId) {
+        if (this._host.readonly)
+            return;
+        // Get the edge for undo
+        const edgeToDelete = this._host.workflow.edges.find(e => e.id === edgeId);
+        // Record for undo before making changes
+        if (this.undoController && edgeToDelete) {
+            this.undoController.recordEdgeDeleted(edgeToDelete);
+        }
+        this._host.setWorkflow(Object.assign(Object.assign({}, this._host.workflow), { edges: this._host.workflow.edges.filter(e => e.id !== edgeId) }));
+        this._host.dispatchWorkflowChanged();
+    }
+    /**
+     * Get edges connected to a node
+     */
+    getNodeEdges(nodeId) {
+        return {
+            inputs: this._host.workflow.edges.filter(e => e.targetNodeId === nodeId),
+            outputs: this._host.workflow.edges.filter(e => e.sourceNodeId === nodeId),
+        };
+    }
+    /**
+     * Set hovered edge ID
+     */
+    setHoveredEdge(edgeId) {
+        this._host.hoveredEdgeId = edgeId;
+    }
+    /**
+     * Get hovered edge ID
+     */
+    getHoveredEdge() {
+        return this._host.hoveredEdgeId;
+    }
+}
+//# sourceMappingURL=connection.controller.js.map

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

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveControllerHost } from 'lit';
+import { BaseCanvasController } from './base.controller.js';
+import { CanvasHost, DragState } from '../interfaces/index.js';
+import { WorkflowNode } from '../workflow-canvas.types.js';
+import { ViewportController } from './viewport.controller.js';
+import type { UndoController } from './undo.controller.js';
+import type { FrameController } from './frame.controller.js';
+/**
+ * Controller for managing node dragging
+ */
+export declare class DragController extends BaseCanvasController {
+    private viewportController;
+    private undoController;
+    private frameController;
+    private dragStartPositions;
+    private frameContainedNodeIds;
+    constructor(host: CanvasHost & ReactiveControllerHost, viewportController: ViewportController);
+    /**
+     * Set the undo controller (called after initialization)
+     */
+    setUndoController(controller: UndoController): void;
+    /**
+     * Set the frame controller (called after initialization)
+     */
+    setFrameController(controller: FrameController): void;
+    /**
+     * Start dragging a node
+     */
+    startDrag(node: WorkflowNode, event: MouseEvent): void;
+    /**
+     * Handle node drag movement
+     */
+    handleDrag(event: MouseEvent): void;
+    /**
+     * Stop dragging
+     */
+    stopDrag(): void;
+    /**
+     * Check if currently dragging
+     */
+    isDragging(): boolean;
+    /**
+     * Get current drag state
+     */
+    getDragState(): DragState | null;
+    /**
+     * Get the node being dragged
+     */
+    getDraggedNodeId(): string | null;
+}
+//# sourceMappingURL=drag.controller.d.ts.map

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

@@ -0,0 +1,195 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCanvasController } from './base.controller.js';
+import { WorkflowNodeType } from '../workflow-canvas.types.js';
+/**
+ * Controller for managing node dragging
+ */
+export class DragController extends BaseCanvasController {
+    constructor(host, viewportController) {
+        super(host);
+        this.undoController = null;
+        this.frameController = null;
+        this.dragStartPositions = new Map();
+        // Track nodes being moved due to frame drag (contained nodes)
+        this.frameContainedNodeIds = new Set();
+        this.viewportController = viewportController;
+    }
+    /**
+     * Set the undo controller (called after initialization)
+     */
+    setUndoController(controller) {
+        this.undoController = controller;
+    }
+    /**
+     * Set the frame controller (called after initialization)
+     */
+    setFrameController(controller) {
+        this.frameController = controller;
+    }
+    /**
+     * Start dragging a node
+     */
+    startDrag(node, event) {
+        const pos = this.clientToCanvas(event.clientX, event.clientY);
+        this._host.dragState = {
+            nodeId: node.id,
+            startX: node.position.x,
+            startY: node.position.y,
+            offsetX: pos.x - node.position.x,
+            offsetY: pos.y - node.position.y,
+        };
+        // Record start positions for all selected nodes
+        this.dragStartPositions.clear();
+        this.frameContainedNodeIds.clear();
+        this._host.selectedNodeIds.forEach(nodeId => {
+            const n = this._host.workflow.nodes.find(x => x.id === nodeId);
+            if (n) {
+                this.dragStartPositions.set(nodeId, Object.assign({}, n.position));
+                // If dragging a frame, also record positions of contained nodes
+                if (n.type === WorkflowNodeType.FRAME && n.containedNodeIds) {
+                    for (const containedId of n.containedNodeIds) {
+                        // Skip if already selected (will be moved as part of selection)
+                        if (this._host.selectedNodeIds.has(containedId))
+                            continue;
+                        const containedNode = this._host.workflow.nodes.find(x => x.id === containedId);
+                        if (containedNode) {
+                            this.frameContainedNodeIds.add(containedId);
+                            this.dragStartPositions.set(containedId, Object.assign({}, containedNode.position));
+                        }
+                    }
+                }
+            }
+        });
+    }
+    /**
+     * Handle node drag movement
+     */
+    handleDrag(event) {
+        const { dragState } = this._host;
+        if (!dragState)
+            return;
+        const pos = this.clientToCanvas(event.clientX, event.clientY);
+        const x = pos.x - dragState.offsetX;
+        const y = pos.y - dragState.offsetY;
+        // Snap to grid
+        const snapped = this.snapToGrid(x, y);
+        // Move all selected nodes
+        const deltaX = snapped.x - dragState.startX;
+        const deltaY = snapped.y - dragState.startY;
+        this._host.setWorkflow(Object.assign(Object.assign({}, this._host.workflow), { nodes: this._host.workflow.nodes.map(node => {
+                // Move selected nodes
+                if (this._host.selectedNodeIds.has(node.id)) {
+                    if (node.id === dragState.nodeId) {
+                        return Object.assign(Object.assign({}, node), { position: { x: snapped.x, y: snapped.y } });
+                    }
+                    return Object.assign(Object.assign({}, node), { position: {
+                            x: node.position.x + deltaX,
+                            y: node.position.y + deltaY,
+                        } });
+                }
+                // Move contained nodes (when dragging a frame)
+                if (this.frameContainedNodeIds.has(node.id)) {
+                    return Object.assign(Object.assign({}, node), { position: {
+                            x: node.position.x + deltaX,
+                            y: node.position.y + deltaY,
+                        } });
+                }
+                return node;
+            }) }));
+        this._host.dragState = Object.assign(Object.assign({}, dragState), { startX: snapped.x, startY: snapped.y });
+        // Update config panel position if the configured node is being dragged
+        if (this._host.configuredNode &&
+            this._host.selectedNodeIds.has(this._host.configuredNode.id)) {
+            const updatedNode = this._host.workflow.nodes.find(n => n.id === this._host.configuredNode.id);
+            if (updatedNode) {
+                this._host.configuredNode = updatedNode;
+                this.viewportController.updateConfigPanelPosition();
+            }
+        }
+        // Update insert panel position if the insert panel node is being dragged
+        if (this._host.insertPanelNode &&
+            this._host.selectedNodeIds.has(this._host.insertPanelNode.id)) {
+            const updatedNode = this._host.workflow.nodes.find(n => n.id === this._host.insertPanelNode.id);
+            if (updatedNode) {
+                this._host.insertPanelNode = updatedNode;
+                this.viewportController.updateInsertPanelPosition();
+            }
+        }
+    }
+    /**
+     * Stop dragging
+     */
+    stopDrag() {
+        if (this._host.dragState) {
+            // Record move for undo (includes selected nodes and frame contained nodes)
+            if (this.undoController && this.dragStartPositions.size > 0) {
+                const moves = [];
+                // Collect all node IDs that were moved
+                const movedNodeIds = new Set([
+                    ...this._host.selectedNodeIds,
+                    ...this.frameContainedNodeIds,
+                ]);
+                movedNodeIds.forEach(nodeId => {
+                    const node = this._host.workflow.nodes.find(n => n.id === nodeId);
+                    const oldPos = this.dragStartPositions.get(nodeId);
+                    if (node && oldPos) {
+                        // Only record if position actually changed
+                        if (node.position.x !== oldPos.x || node.position.y !== oldPos.y) {
+                            moves.push({
+                                nodeId,
+                                oldPosition: oldPos,
+                                newPosition: Object.assign({}, node.position),
+                            });
+                        }
+                    }
+                });
+                if (moves.length > 0) {
+                    this.undoController.recordNodesMoved(moves);
+                }
+            }
+            // Dispatch node-moved event for each moved node
+            const movedNodeIds = new Set([
+                ...this._host.selectedNodeIds,
+                ...this.frameContainedNodeIds,
+            ]);
+            movedNodeIds.forEach(nodeId => {
+                const node = this._host.workflow.nodes.find(n => n.id === nodeId);
+                if (node) {
+                    this._host.dispatchNodeMoved(node, node.position);
+                }
+            });
+            // Update frame containment for all frames after move
+            if (this.frameController) {
+                this.frameController.updateAllFrameContainments();
+            }
+            this._host.dragState = null;
+            this.dragStartPositions.clear();
+            this.frameContainedNodeIds.clear();
+            this._host.dispatchWorkflowChanged();
+        }
+    }
+    /**
+     * Check if currently dragging
+     */
+    isDragging() {
+        return this._host.dragState !== null;
+    }
+    /**
+     * Get current drag state
+     */
+    getDragState() {
+        return this._host.dragState;
+    }
+    /**
+     * Get the node being dragged
+     */
+    getDraggedNodeId() {
+        var _a;
+        return ((_a = this._host.dragState) === null || _a === void 0 ? void 0 : _a.nodeId) || null;
+    }
+}
+//# sourceMappingURL=drag.controller.js.map

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

@@ -0,0 +1,94 @@
+/**
+ * @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 { WorkflowNode, ResizeHandle, AggregatedPort } from '../workflow-canvas.types.js';
+/**
+ * Controller for frame node operations including:
+ * - Resize functionality
+ * - Containment detection
+ * - Move with contents
+ * - Collapse/expand
+ * - Aggregated ports calculation
+ */
+export declare class FrameController extends BaseCanvasController {
+    private resizeState;
+    private readonly MIN_FRAME_WIDTH;
+    private readonly MIN_FRAME_HEIGHT;
+    constructor(host: CanvasHost & ReactiveControllerHost);
+    /**
+     * Start resizing a frame from a specific handle
+     */
+    startResize(event: MouseEvent, frame: WorkflowNode, handle: ResizeHandle): void;
+    private handleResizeDragWithCoords;
+    private handleResizeDrag;
+    private readonly handleResizeTouchDrag;
+    stopResize: () => void;
+    private readonly stopResizeTouch;
+    /**
+     * Check if a node's center is within a frame's bounds
+     */
+    isNodeInFrame(node: WorkflowNode, frame: WorkflowNode): boolean;
+    /**
+     * Update frame's containedNodeIds based on current node positions
+     */
+    updateFrameContainment(frame: WorkflowNode): void;
+    /**
+     * Update all frames' containment after node move
+     * @param triggerUpdate If true, triggers a workflow update after containment changes
+     */
+    updateAllFrameContainments(triggerUpdate?: boolean): void;
+    /**
+     * Get all nodes contained in a frame
+     */
+    getContainedNodes(frame: WorkflowNode): WorkflowNode[];
+    /**
+     * Move a frame and all its contained nodes by delta
+     */
+    moveFrameWithContents(frame: WorkflowNode, deltaX: number, deltaY: number): void;
+    /**
+     * Toggle frame collapsed state
+     */
+    toggleCollapsed(frame: WorkflowNode): void;
+    /**
+     * Set visibility of nodes contained in a frame
+     */
+    private setContainedNodesVisibility;
+    /**
+     * Calculate aggregated ports for a collapsed frame
+     */
+    getAggregatedPorts(frame: WorkflowNode): {
+        inputs: AggregatedPort[];
+        outputs: AggregatedPort[];
+    };
+    /**
+     * Auto-resize frame to fit its contained nodes with padding
+     */
+    fitToContents(frame: WorkflowNode, padding?: number): void;
+    /**
+     * Create a new frame around currently selected nodes
+     */
+    createFrameFromSelection(): WorkflowNode | null;
+    /**
+     * Delete a frame
+     * @param deleteContents If true, also delete contained nodes
+     */
+    deleteFrame(frame: WorkflowNode, deleteContents?: boolean): void;
+    /**
+     * Check if a frame is collapsed
+     */
+    isFrameCollapsed(frame: WorkflowNode): boolean;
+    /**
+     * Get node icons and colors for collapsed frame preview
+     */
+    getContainedNodePreviews(frame: WorkflowNode, maxCount?: number): Array<{
+        icon: string;
+        color: string;
+        name: string;
+    }>;
+}
+//# sourceMappingURL=frame.controller.d.ts.map