@nuraly/lumenui 0.2.1 → 0.3.2

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

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Abstract base controller class that implements common functionality
+ * for all canvas component controllers.
+ *
+ * @typeParam THost - The canvas host type. Defaults to CanvasHost & ReactiveControllerHost.
+ *   Subclasses with extended host interfaces can specify a narrower type.
+ */
+export class BaseCanvasController extends BaseComponentController {
+    /**
+     * Helper to get canvas wrapper element
+     */
+    get canvasWrapper() {
+        return this._host.canvasWrapper;
+    }
+    /**
+     * Helper to get canvas viewport element
+     */
+    get canvasViewport() {
+        return this._host.canvasViewport;
+    }
+    /**
+     * Helper to convert client coordinates to canvas coordinates
+     */
+    clientToCanvas(clientX, clientY) {
+        const wrapper = this.canvasWrapper;
+        if (!wrapper)
+            return { x: 0, y: 0 };
+        const rect = wrapper.getBoundingClientRect();
+        const { viewport } = this._host;
+        return {
+            x: (clientX - rect.left - viewport.panX) / viewport.zoom,
+            y: (clientY - rect.top - viewport.panY) / viewport.zoom,
+        };
+    }
+    /**
+     * Helper to snap a position to the grid
+     */
+    snapToGrid(x, y, gridSize = 20) {
+        return {
+            x: Math.round(x / gridSize) * gridSize,
+            y: Math.round(y / gridSize) * gridSize,
+        };
+    }
+    /**
+     * Generate a unique name by appending " (copy)" or " (copy N)" suffix.
+     * Checks against existing node names in the workflow.
+     */
+    generateUniqueName(originalName) {
+        const baseName = originalName.replace(/ \(copy(?: \d+)?\)$/, '');
+        const existingNames = new Set(this._host.workflow.nodes.map(n => n.name));
+        const newName = `${baseName} (copy)`;
+        if (!existingNames.has(newName)) {
+            return newName;
+        }
+        let counter = 2;
+        while (existingNames.has(`${baseName} (copy ${counter})`)) {
+            counter++;
+        }
+        return `${baseName} (copy ${counter})`;
+    }
+    /**
+     * Generate a unique node ID
+     */
+    generateNodeId() {
+        return `node_${Date.now()}_${globalThis.crypto.randomUUID().slice(0, 9)}`;
+    }
+    /**
+     * Generate a unique edge ID
+     */
+    generateEdgeId() {
+        return `edge_${Date.now()}_${globalThis.crypto.randomUUID().slice(0, 9)}`;
+    }
+}
+//# sourceMappingURL=base.controller.js.map

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

@@ -0,0 +1,80 @@
+/**
+ * @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, WorkflowEdge, Position } from '../workflow-canvas.types.js';
+import type { UndoController } from './undo.controller.js';
+/**
+ * Clipboard data format for workflow nodes and edges
+ */
+export interface ClipboardData {
+    type: 'nuraly-workflow-nodes';
+    version: string;
+    nodes: WorkflowNode[];
+    edges: WorkflowEdge[];
+    copyOrigin: Position;
+}
+/**
+ * Extended canvas host interface for clipboard controller
+ */
+export interface ClipboardHost extends CanvasHost {
+    /** Last mouse position on canvas for paste positioning */
+    lastMousePosition: Position | null;
+}
+/**
+ * Controller for clipboard operations (copy, cut, paste)
+ * Supports both internal clipboard and system clipboard with JSON serialization
+ */
+export declare class ClipboardController extends BaseCanvasController<ClipboardHost & ReactiveControllerHost> {
+    private undoController;
+    /** Internal clipboard for fallback when system clipboard is unavailable */
+    private internalClipboard;
+    /**
+     * Set the undo controller (called after initialization)
+     */
+    setUndoController(controller: UndoController): void;
+    /**
+     * Copy selected nodes and their connecting edges to clipboard
+     */
+    copySelected(): Promise<boolean>;
+    /**
+     * Cut selected nodes (copy + delete)
+     */
+    cutSelected(): Promise<boolean>;
+    /**
+     * Paste nodes from clipboard
+     * @param position Optional position to paste at. If not provided, uses mouse position or canvas center.
+     */
+    pasteFromClipboard(position?: Position): Promise<boolean>;
+    /**
+     * Check if there's content available to paste
+     */
+    hasClipboardContent(): Promise<boolean>;
+    /**
+     * Serialize the current selection to clipboard data format
+     */
+    private serializeSelection;
+    /**
+     * Parse clipboard text into ClipboardData
+     * Supports both Nuraly format and raw workflow JSON
+     */
+    private parseClipboardData;
+    /**
+     * Calculate the center position of a selection of nodes
+     */
+    private calculateSelectionCenter;
+    /**
+     * Get the position to paste at
+     * Uses mouse position if available, otherwise offsets from copy origin
+     */
+    private getPastePosition;
+    /**
+     * Delete selected nodes and their connected edges
+     */
+    private deleteSelected;
+}
+//# sourceMappingURL=clipboard.controller.d.ts.map

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

@@ -0,0 +1,300 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { BaseCanvasController } from './base.controller.js';
+/**
+ * Controller for clipboard operations (copy, cut, paste)
+ * Supports both internal clipboard and system clipboard with JSON serialization
+ */
+export class ClipboardController extends BaseCanvasController {
+    constructor() {
+        super(...arguments);
+        this.undoController = null;
+        /** Internal clipboard for fallback when system clipboard is unavailable */
+        this.internalClipboard = null;
+    }
+    /**
+     * Set the undo controller (called after initialization)
+     */
+    setUndoController(controller) {
+        this.undoController = controller;
+    }
+    /**
+     * Copy selected nodes and their connecting edges to clipboard
+     */
+    copySelected() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._host.selectedNodeIds.size === 0) {
+                return false;
+            }
+            const clipboardData = this.serializeSelection();
+            if (!clipboardData) {
+                return false;
+            }
+            // Try to write to system clipboard
+            try {
+                const jsonString = JSON.stringify(clipboardData, null, 2);
+                yield navigator.clipboard.writeText(jsonString);
+            }
+            catch (error) {
+                this.handleError(error, 'copySelected: system clipboard unavailable, using internal clipboard');
+            }
+            // Always store in internal clipboard as fallback
+            this.internalClipboard = clipboardData;
+            // Dispatch event for UI feedback
+            this.dispatchEvent(new CustomEvent('clipboard-copy', {
+                detail: {
+                    nodeCount: clipboardData.nodes.length,
+                    edgeCount: clipboardData.edges.length,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+            return true;
+        });
+    }
+    /**
+     * Cut selected nodes (copy + delete)
+     */
+    cutSelected() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._host.readonly)
+                return false;
+            const copied = yield this.copySelected();
+            if (copied) {
+                this.deleteSelected();
+                // Dispatch event for UI feedback
+                this.dispatchEvent(new CustomEvent('clipboard-cut', {
+                    detail: { success: true },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+            return copied;
+        });
+    }
+    /**
+     * Paste nodes from clipboard
+     * @param position Optional position to paste at. If not provided, uses mouse position or canvas center.
+     */
+    pasteFromClipboard(position) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            if (this._host.readonly)
+                return false;
+            // Try to read from system clipboard first
+            let clipboardData = null;
+            try {
+                const text = yield navigator.clipboard.readText();
+                clipboardData = this.parseClipboardData(text);
+            }
+            catch (error) {
+                this.handleError(error, 'pasteFromClipboard: system clipboard unavailable, using internal clipboard');
+            }
+            // Fall back to internal clipboard
+            if (!clipboardData && this.internalClipboard) {
+                clipboardData = structuredClone(this.internalClipboard);
+            }
+            if (!clipboardData || clipboardData.nodes.length === 0) {
+                return false;
+            }
+            // Calculate paste position
+            const pastePosition = position || this.getPastePosition(clipboardData.copyOrigin);
+            // Generate new IDs for nodes and update edge references
+            const idMap = new Map();
+            const newNodes = [];
+            const newEdges = [];
+            // Clone nodes with new IDs and offset positions
+            for (const node of clipboardData.nodes) {
+                const newId = this.generateNodeId();
+                idMap.set(node.id, newId);
+                const offsetX = pastePosition.x - clipboardData.copyOrigin.x;
+                const offsetY = pastePosition.y - clipboardData.copyOrigin.y;
+                newNodes.push(Object.assign(Object.assign({}, structuredClone(node)), { id: newId, name: this.generateUniqueName(node.name), position: {
+                        x: this.snapToGrid(node.position.x + offsetX, node.position.y + offsetY).x,
+                        y: this.snapToGrid(node.position.x + offsetX, node.position.y + offsetY).y,
+                    }, 
+                    // Deep clone ports to avoid reference issues (with fallbacks for missing arrays)
+                    ports: {
+                        inputs: (((_a = node.ports) === null || _a === void 0 ? void 0 : _a.inputs) || []).map(p => (Object.assign({}, p))),
+                        configs: (_c = (_b = node.ports) === null || _b === void 0 ? void 0 : _b.configs) === null || _c === void 0 ? void 0 : _c.map(p => (Object.assign({}, p))),
+                        outputs: (((_d = node.ports) === null || _d === void 0 ? void 0 : _d.outputs) || []).map(p => (Object.assign({}, p))),
+                    } }));
+            }
+            // Clone edges with updated node references
+            for (const edge of clipboardData.edges) {
+                const newSourceId = idMap.get(edge.sourceNodeId);
+                const newTargetId = idMap.get(edge.targetNodeId);
+                // Only include edge if both nodes are in the paste set
+                if (newSourceId && newTargetId) {
+                    newEdges.push(Object.assign(Object.assign({}, structuredClone(edge)), { id: this.generateEdgeId(), sourceNodeId: newSourceId, targetNodeId: newTargetId }));
+                }
+            }
+            // Select the pasted nodes first (before workflow update triggers re-render)
+            this._host.selectedNodeIds = new Set(newNodes.map(n => n.id));
+            this._host.selectedEdgeIds = new Set(newEdges.map(e => e.id));
+            // Record for undo before making changes
+            if (this.undoController) {
+                this.undoController.recordNodesPasted(newNodes, newEdges);
+            }
+            // Add to workflow
+            this._host.setWorkflow(Object.assign(Object.assign({}, this._host.workflow), { nodes: [...this._host.workflow.nodes, ...newNodes], edges: [...this._host.workflow.edges, ...newEdges] }));
+            this._host.dispatchWorkflowChanged();
+            // Ensure selection persists after workflow update
+            yield this._host.updateComplete;
+            this._host.selectedNodeIds = new Set(newNodes.map(n => n.id));
+            this._host.selectedEdgeIds = new Set(newEdges.map(e => e.id));
+            this._host.requestUpdate();
+            // Dispatch event for UI feedback
+            this.dispatchEvent(new CustomEvent('clipboard-paste', {
+                detail: {
+                    nodeCount: newNodes.length,
+                    edgeCount: newEdges.length,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+            return true;
+        });
+    }
+    /**
+     * Check if there's content available to paste
+     */
+    hasClipboardContent() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.internalClipboard) {
+                return true;
+            }
+            try {
+                const text = yield navigator.clipboard.readText();
+                return this.parseClipboardData(text) !== null;
+            }
+            catch (_a) {
+                return false;
+            }
+        });
+    }
+    /**
+     * Serialize the current selection to clipboard data format
+     */
+    serializeSelection() {
+        const selectedNodes = this._host.workflow.nodes.filter(n => this._host.selectedNodeIds.has(n.id));
+        if (selectedNodes.length === 0) {
+            return null;
+        }
+        // Get edges that connect selected nodes (both ends must be selected)
+        const selectedEdges = this._host.workflow.edges.filter(e => this._host.selectedNodeIds.has(e.sourceNodeId) &&
+            this._host.selectedNodeIds.has(e.targetNodeId));
+        // Calculate the center of the selection (for positioning on paste)
+        const copyOrigin = this.calculateSelectionCenter(selectedNodes);
+        return {
+            type: 'nuraly-workflow-nodes',
+            version: '1.0',
+            nodes: structuredClone(selectedNodes),
+            edges: structuredClone(selectedEdges),
+            copyOrigin,
+        };
+    }
+    /**
+     * Parse clipboard text into ClipboardData
+     * Supports both Nuraly format and raw workflow JSON
+     */
+    parseClipboardData(text) {
+        if (!text || typeof text !== 'string') {
+            return null;
+        }
+        try {
+            const json = JSON.parse(text);
+            // Check for Nuraly clipboard format
+            if (json.type === 'nuraly-workflow-nodes' && Array.isArray(json.nodes)) {
+                return json;
+            }
+            // Support pasting a full workflow
+            if (json.nodes && Array.isArray(json.nodes)) {
+                return {
+                    type: 'nuraly-workflow-nodes',
+                    version: '1.0',
+                    nodes: json.nodes,
+                    edges: json.edges || [],
+                    copyOrigin: this.calculateSelectionCenter(json.nodes),
+                };
+            }
+            // Support pasting a single node
+            if (json.type && json.position && json.ports) {
+                return {
+                    type: 'nuraly-workflow-nodes',
+                    version: '1.0',
+                    nodes: [json],
+                    edges: [],
+                    copyOrigin: json.position,
+                };
+            }
+        }
+        catch (_a) {
+            // Not valid JSON, ignore
+        }
+        return null;
+    }
+    /**
+     * Calculate the center position of a selection of nodes
+     */
+    calculateSelectionCenter(nodes) {
+        if (nodes.length === 0) {
+            return { x: 0, y: 0 };
+        }
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (const node of nodes) {
+            minX = Math.min(minX, node.position.x);
+            minY = Math.min(minY, node.position.y);
+            maxX = Math.max(maxX, node.position.x + 200); // estimated node width
+            maxY = Math.max(maxY, node.position.y + 80); // estimated node height
+        }
+        return {
+            x: (minX + maxX) / 2,
+            y: (minY + maxY) / 2,
+        };
+    }
+    /**
+     * Get the position to paste at
+     * Uses mouse position if available, otherwise offsets from copy origin
+     */
+    getPastePosition(copyOrigin) {
+        // If we have a last mouse position, use it
+        if (this._host.lastMousePosition) {
+            return this._host.lastMousePosition;
+        }
+        // Otherwise, offset from the copy origin
+        return {
+            x: copyOrigin.x + 40,
+            y: copyOrigin.y + 40,
+        };
+    }
+    /**
+     * Delete selected nodes and their connected edges
+     */
+    deleteSelected() {
+        const nodeIdsToDelete = this._host.selectedNodeIds;
+        const edgeIdsToDelete = this._host.selectedEdgeIds;
+        this._host.setWorkflow(Object.assign(Object.assign({}, this._host.workflow), { nodes: this._host.workflow.nodes.filter(n => !nodeIdsToDelete.has(n.id)), edges: this._host.workflow.edges.filter(e => !edgeIdsToDelete.has(e.id) &&
+                !nodeIdsToDelete.has(e.sourceNodeId) &&
+                !nodeIdsToDelete.has(e.targetNodeId)) }));
+        this._host.selectedNodeIds = new Set();
+        this._host.selectedEdgeIds = new Set();
+        this._host.dispatchWorkflowChanged();
+    }
+}
+//# sourceMappingURL=clipboard.controller.js.map

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

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCanvasController } from './base.controller.js';
+import type { CanvasOperationType, CollaborationState, CollaborationUser, RemoteCursor } from '../interfaces/collaboration.interface.js';
+/**
+ * CollaborationController manages real-time collaboration via Socket.IO.
+ * Connects to the existing Canvas Gateway at /socket.io/presence.
+ */
+export declare class CollaborationController extends BaseCanvasController {
+    private socket;
+    private staleCursorInterval;
+    private lastCursorBroadcast;
+    private cursorThrottleTimer;
+    private state;
+    private opCounter;
+    connect(canvasId: string, canvasType?: 'WORKFLOW' | 'WHITEBOARD'): void;
+    disconnect(): void;
+    hostDisconnected(): void;
+    private registerEventHandlers;
+    broadcastCursorMove(x: number, y: number): void;
+    private emitCursorMove;
+    broadcastSelectionChange(elementIds: string[]): void;
+    broadcastTypingStart(elementId: string): void;
+    broadcastTypingStop(elementId: string): void;
+    broadcastOperation(type: CanvasOperationType, elementId: string, data: Record<string, unknown>): void;
+    private handleUsersSync;
+    private handleUserJoined;
+    private handleUserLeft;
+    private handleCursorUpdate;
+    private handleSelectionUpdate;
+    private handleTypingIndicator;
+    private handleOperationReceived;
+    private handleOperationAck;
+    private applyRemoteOperation;
+    getState(): CollaborationState;
+    isConnected(): boolean;
+    getUsers(): CollaborationUser[];
+    getCursors(): RemoteCursor[];
+    isElementSelectedByRemote(elementId: string): {
+        userId: string;
+        color: string;
+        username: string;
+    } | null;
+    isElementBeingTypedByRemote(elementId: string): {
+        userId: string;
+        username: string;
+        color: string;
+    } | null;
+    private cleanStaleCursors;
+}
+//# sourceMappingURL=collaboration.controller.d.ts.map