@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -0,0 +1,425 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { io } from 'socket.io-client';
+import { BaseCanvasController } from './base.controller.js';
+const CURSOR_THROTTLE_MS = 33;
+const STALE_CURSOR_MS = 10000;
+const STALE_CURSOR_CHECK_MS = 5000;
+/**
+ * CollaborationController manages real-time collaboration via Socket.IO.
+ * Connects to the existing Canvas Gateway at /socket.io/presence.
+ */
+export class CollaborationController extends BaseCanvasController {
+    constructor() {
+        super(...arguments);
+        this.socket = null;
+        this.staleCursorInterval = null;
+        this.lastCursorBroadcast = 0;
+        this.cursorThrottleTimer = null;
+        this.state = {
+            connected: false,
+            canvasId: null,
+            users: new Map(),
+            cursors: new Map(),
+            selections: new Map(),
+            typingIndicators: new Map(),
+            serverVersion: 0,
+            pendingOps: new Map(),
+        };
+        this.opCounter = 0;
+    }
+    // ==================== Lifecycle ====================
+    connect(canvasId, canvasType = 'WHITEBOARD') {
+        var _a;
+        if (((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) && this.state.canvasId === canvasId)
+            return;
+        this.disconnect();
+        this.state.canvasId = canvasId;
+        try {
+            const origin = globalThis.location.origin;
+            this.socket = io(origin, {
+                path: '/socket.io/presence',
+                transports: ['websocket', 'polling'],
+                reconnection: true,
+                reconnectionAttempts: Infinity,
+                reconnectionDelay: 1000,
+            });
+            this.socket.on('connect', () => {
+                this.state.connected = true;
+                this.safeExecute(() => this.socket.emit('canvas:join', { canvasId, canvasType }), 'connect: canvas:join');
+                this._host.requestUpdate();
+            });
+            this.socket.on('disconnect', () => {
+                this.state.connected = false;
+                this._host.requestUpdate();
+            });
+            this.socket.on('reconnect', () => {
+                this.safeExecute(() => this.socket.emit('canvas:join', { canvasId, canvasType }), 'reconnect: canvas:join');
+            });
+            // Register inbound event handlers
+            this.registerEventHandlers();
+            // Start stale cursor cleanup
+            this.staleCursorInterval = setInterval(() => this.cleanStaleCursors(), STALE_CURSOR_CHECK_MS);
+        }
+        catch (error) {
+            this.handleError(error, 'connect');
+        }
+    }
+    disconnect() {
+        if (this.socket) {
+            this.safeExecute(() => {
+                if (this.state.canvasId) {
+                    this.socket.emit('canvas:leave', { canvasId: this.state.canvasId });
+                }
+                this.socket.removeAllListeners();
+                this.socket.disconnect();
+            }, 'disconnect');
+            this.socket = null;
+        }
+        if (this.staleCursorInterval) {
+            clearInterval(this.staleCursorInterval);
+            this.staleCursorInterval = null;
+        }
+        if (this.cursorThrottleTimer) {
+            clearTimeout(this.cursorThrottleTimer);
+            this.cursorThrottleTimer = null;
+        }
+        this.state = {
+            connected: false,
+            canvasId: null,
+            users: new Map(),
+            cursors: new Map(),
+            selections: new Map(),
+            typingIndicators: new Map(),
+            serverVersion: 0,
+            pendingOps: new Map(),
+        };
+    }
+    hostDisconnected() {
+        this.disconnect();
+    }
+    // ==================== Event Registration ====================
+    registerEventHandlers() {
+        if (!this.socket)
+            return;
+        this.socket.on('canvas:users:sync', (data) => {
+            this.safeExecute(() => this.handleUsersSync(data), 'handleUsersSync');
+        });
+        this.socket.on('canvas:user:joined', (data) => {
+            this.safeExecute(() => this.handleUserJoined(data), 'handleUserJoined');
+        });
+        this.socket.on('canvas:user:left', (data) => {
+            this.safeExecute(() => this.handleUserLeft(data), 'handleUserLeft');
+        });
+        this.socket.on('cursor:update', (data) => {
+            this.safeExecute(() => this.handleCursorUpdate(data), 'handleCursorUpdate');
+        });
+        this.socket.on('selection:update', (data) => {
+            this.safeExecute(() => this.handleSelectionUpdate(data), 'handleSelectionUpdate');
+        });
+        this.socket.on('typing:indicator', (data) => {
+            this.safeExecute(() => this.handleTypingIndicator(data), 'handleTypingIndicator');
+        });
+        this.socket.on('operation:received', (data) => {
+            this.safeExecute(() => this.handleOperationReceived(data), 'handleOperationReceived');
+        });
+        this.socket.on('operation:ack', (data) => {
+            this.safeExecute(() => this.handleOperationAck(data), 'handleOperationAck');
+        });
+    }
+    // ==================== Outbound Methods ====================
+    broadcastCursorMove(x, y) {
+        var _a;
+        if (!((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) || !this.state.canvasId)
+            return;
+        const now = Date.now();
+        if (now - this.lastCursorBroadcast < CURSOR_THROTTLE_MS) {
+            // Throttle: schedule a trailing emit
+            if (!this.cursorThrottleTimer) {
+                this.cursorThrottleTimer = setTimeout(() => {
+                    this.cursorThrottleTimer = null;
+                    this.emitCursorMove(x, y);
+                }, CURSOR_THROTTLE_MS - (now - this.lastCursorBroadcast));
+            }
+            return;
+        }
+        this.emitCursorMove(x, y);
+    }
+    emitCursorMove(x, y) {
+        var _a;
+        if (!((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) || !this.state.canvasId)
+            return;
+        this.lastCursorBroadcast = Date.now();
+        this.safeExecute(() => this.socket.emit('cursor:move', { canvasId: this.state.canvasId, x, y }), 'emitCursorMove');
+    }
+    broadcastSelectionChange(elementIds) {
+        var _a;
+        if (!((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) || !this.state.canvasId)
+            return;
+        this.safeExecute(() => this.socket.emit('selection:change', { canvasId: this.state.canvasId, elementIds }), 'broadcastSelectionChange');
+    }
+    broadcastTypingStart(elementId) {
+        var _a;
+        if (!((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) || !this.state.canvasId)
+            return;
+        this.safeExecute(() => this.socket.emit('typing:start', { canvasId: this.state.canvasId, elementId }), 'broadcastTypingStart');
+    }
+    broadcastTypingStop(elementId) {
+        var _a;
+        if (!((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) || !this.state.canvasId)
+            return;
+        this.safeExecute(() => this.socket.emit('typing:stop', { canvasId: this.state.canvasId, elementId }), 'broadcastTypingStop');
+    }
+    broadcastOperation(type, elementId, data) {
+        var _a;
+        if (!((_a = this.socket) === null || _a === void 0 ? void 0 : _a.connected) || !this.state.canvasId)
+            return;
+        const opId = `op_${Date.now()}_${++this.opCounter}`;
+        const operation = {
+            id: opId,
+            type,
+            elementId,
+            data,
+            userId: '', // server fills this
+            timestamp: Date.now(),
+            version: this.state.serverVersion,
+        };
+        this.state.pendingOps.set(opId, operation);
+        this.safeExecute(() => this.socket.emit('operation:apply', {
+            canvasId: this.state.canvasId,
+            operationType: type,
+            elementId,
+            data,
+            baseVersion: this.state.serverVersion,
+        }), 'broadcastOperation');
+    }
+    // ==================== Inbound Handlers ====================
+    handleUsersSync(data) {
+        if (data.canvasId !== this.state.canvasId)
+            return;
+        this.state.users.clear();
+        for (const user of data.users) {
+            this.state.users.set(user.userId, user);
+        }
+        this._host.requestUpdate();
+    }
+    handleUserJoined(data) {
+        if (data.canvasId !== this.state.canvasId)
+            return;
+        this.state.users.set(data.user.userId, data.user);
+        this._host.requestUpdate();
+    }
+    handleUserLeft(data) {
+        if (data.canvasId !== this.state.canvasId)
+            return;
+        this.state.users.delete(data.userId);
+        this.state.cursors.delete(data.userId);
+        this.state.selections.delete(data.userId);
+        this.state.typingIndicators.delete(data.userId);
+        this._host.requestUpdate();
+    }
+    handleCursorUpdate(data) {
+        if (data.canvasId !== this.state.canvasId)
+            return;
+        this.state.cursors.set(data.userId, {
+            userId: data.userId,
+            username: data.username,
+            color: data.color,
+            x: data.x,
+            y: data.y,
+            lastUpdate: Date.now(),
+        });
+        this._host.requestUpdate();
+    }
+    handleSelectionUpdate(data) {
+        if (data.canvasId !== this.state.canvasId)
+            return;
+        if (data.elementIds.length === 0) {
+            this.state.selections.delete(data.userId);
+        }
+        else {
+            this.state.selections.set(data.userId, {
+                userId: data.userId,
+                elementIds: data.elementIds,
+            });
+        }
+        this._host.requestUpdate();
+    }
+    handleTypingIndicator(data) {
+        if (data.canvasId !== this.state.canvasId)
+            return;
+        if (data.isTyping) {
+            this.state.typingIndicators.set(data.userId, {
+                userId: data.userId,
+                elementId: data.elementId,
+                isTyping: true,
+            });
+        }
+        else {
+            this.state.typingIndicators.delete(data.userId);
+        }
+        this._host.requestUpdate();
+    }
+    handleOperationReceived(data) {
+        if (data.canvasId !== this.state.canvasId)
+            return;
+        this.state.serverVersion = Math.max(this.state.serverVersion, data.operation.version);
+        this.applyRemoteOperation(data.operation);
+    }
+    handleOperationAck(data) {
+        this.state.pendingOps.delete(data.operationId);
+        this.state.serverVersion = Math.max(this.state.serverVersion, data.serverVersion);
+    }
+    // ==================== Remote Operation Application ====================
+    applyRemoteOperation(op) {
+        const workflow = this._host.workflow;
+        if (!workflow)
+            return;
+        let updatedNodes = [...workflow.nodes];
+        let updatedEdges = [...workflow.edges];
+        let modified = false;
+        switch (op.type) {
+            case 'ADD': {
+                const nodeData = op.data.node;
+                if (nodeData) {
+                    updatedNodes = [...updatedNodes, nodeData];
+                    modified = true;
+                }
+                break;
+            }
+            case 'DELETE': {
+                if (op.elementId) {
+                    updatedNodes = updatedNodes.filter(n => n.id !== op.elementId);
+                    updatedEdges = updatedEdges.filter(e => e.sourceNodeId !== op.elementId && e.targetNodeId !== op.elementId);
+                    modified = true;
+                }
+                break;
+            }
+            case 'MOVE': {
+                if (op.elementId) {
+                    updatedNodes = updatedNodes.map(n => {
+                        if (n.id === op.elementId) {
+                            return Object.assign(Object.assign({}, n), { position: {
+                                    x: op.data.x,
+                                    y: op.data.y,
+                                } });
+                        }
+                        return n;
+                    });
+                    modified = true;
+                }
+                break;
+            }
+            case 'RESIZE': {
+                if (op.elementId) {
+                    updatedNodes = updatedNodes.map(n => {
+                        if (n.id === op.elementId) {
+                            return Object.assign(Object.assign({}, n), { configuration: Object.assign(Object.assign({}, n.configuration), { width: op.data.width, height: op.data.height }) });
+                        }
+                        return n;
+                    });
+                    modified = true;
+                }
+                break;
+            }
+            case 'UPDATE_TEXT': {
+                if (op.elementId) {
+                    updatedNodes = updatedNodes.map(n => {
+                        if (n.id === op.elementId) {
+                            return Object.assign(Object.assign({}, n), { configuration: Object.assign(Object.assign({}, n.configuration), { textContent: op.data.textContent }) });
+                        }
+                        return n;
+                    });
+                    modified = true;
+                }
+                break;
+            }
+            case 'UPDATE': {
+                if (op.elementId) {
+                    updatedNodes = updatedNodes.map(n => {
+                        if (n.id === op.elementId) {
+                            return Object.assign(Object.assign({}, n), { configuration: Object.assign(Object.assign({}, n.configuration), op.data) });
+                        }
+                        return n;
+                    });
+                    modified = true;
+                }
+                break;
+            }
+            case 'ADD_CONNECTOR': {
+                const edgeData = op.data.edge;
+                if (edgeData) {
+                    updatedEdges = [...updatedEdges, edgeData];
+                    modified = true;
+                }
+                break;
+            }
+            case 'DELETE_CONNECTOR': {
+                if (op.elementId) {
+                    updatedEdges = updatedEdges.filter(e => e.id !== op.elementId);
+                    modified = true;
+                }
+                break;
+            }
+        }
+        if (modified) {
+            // Update workflow WITHOUT dispatching workflow-changed event
+            // to prevent re-broadcasting and re-triggering HTTP save
+            this._host.setWorkflow(Object.assign(Object.assign({}, workflow), { nodes: updatedNodes, edges: updatedEdges }));
+            this._host.requestUpdate();
+        }
+    }
+    // ==================== Query Methods ====================
+    getState() {
+        return this.state;
+    }
+    isConnected() {
+        return this.state.connected;
+    }
+    getUsers() {
+        return Array.from(this.state.users.values());
+    }
+    getCursors() {
+        return Array.from(this.state.cursors.values());
+    }
+    isElementSelectedByRemote(elementId) {
+        for (const [userId, sel] of this.state.selections) {
+            if (sel.elementIds.includes(elementId)) {
+                const user = this.state.users.get(userId);
+                if (user) {
+                    return { userId, color: user.color, username: user.username };
+                }
+            }
+        }
+        return null;
+    }
+    isElementBeingTypedByRemote(elementId) {
+        for (const [userId, indicator] of this.state.typingIndicators) {
+            if (indicator.elementId === elementId && indicator.isTyping) {
+                const user = this.state.users.get(userId);
+                if (user) {
+                    return { userId, username: user.username, color: user.color };
+                }
+            }
+        }
+        return null;
+    }
+    // ==================== Helpers ====================
+    cleanStaleCursors() {
+        const now = Date.now();
+        let changed = false;
+        for (const [userId, cursor] of this.state.cursors) {
+            if (now - cursor.lastUpdate > STALE_CURSOR_MS) {
+                this.state.cursors.delete(userId);
+                changed = true;
+            }
+        }
+        if (changed) {
+            this._host.requestUpdate();
+        }
+    }
+}
+//# sourceMappingURL=collaboration.controller.js.map

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

@@ -0,0 +1,61 @@
+/**
+ * @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 } from '../workflow-canvas.types.js';
+import type { UndoController } from './undo.controller.js';
+/**
+ * Controller for managing node configuration panel
+ */
+export declare class ConfigController extends BaseCanvasController {
+    private undoController;
+    constructor(host: CanvasHost & ReactiveControllerHost);
+    /**
+     * Set the undo controller (called after initialization)
+     */
+    setUndoController(controller: UndoController): void;
+    /**
+     * Open config panel for a node
+     */
+    openConfig(node: WorkflowNode): void;
+    /**
+     * Close the config panel
+     */
+    closeConfig(): void;
+    /**
+     * Get currently configured node
+     */
+    getConfiguredNode(): WorkflowNode | null;
+    /**
+     * Check if config panel is open
+     */
+    isOpen(): boolean;
+    /**
+     * Update a configuration field
+     */
+    updateConfig(key: string, value: unknown): void;
+    /**
+     * Update the node name
+     */
+    updateName(name: string): void;
+    /**
+     * Update the node description
+     */
+    updateDescription(description: string): void;
+    /**
+     * Apply a node update to the workflow
+     */
+    private applyNodeUpdate;
+    /**
+     * Calculate panel position next to the configured node
+     */
+    getPanelPosition(): {
+        x: number;
+        y: number;
+    } | null;
+}
+//# sourceMappingURL=config.controller.d.ts.map

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

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCanvasController } from './base.controller.js';
+/**
+ * Controller for managing node configuration panel
+ */
+export class ConfigController extends BaseCanvasController {
+    constructor(host) {
+        super(host);
+        this.undoController = null;
+    }
+    /**
+     * Set the undo controller (called after initialization)
+     */
+    setUndoController(controller) {
+        this.undoController = controller;
+    }
+    /**
+     * Open config panel for a node
+     */
+    openConfig(node) {
+        this._host.configuredNode = node;
+    }
+    /**
+     * Close the config panel
+     */
+    closeConfig() {
+        this._host.configuredNode = null;
+    }
+    /**
+     * Get currently configured node
+     */
+    getConfiguredNode() {
+        return this._host.configuredNode;
+    }
+    /**
+     * Check if config panel is open
+     */
+    isOpen() {
+        return this._host.configuredNode !== null;
+    }
+    /**
+     * Update a configuration field
+     */
+    updateConfig(key, value) {
+        const node = this._host.configuredNode;
+        if (!node)
+            return;
+        const previousState = {
+            configuration: Object.assign({}, node.configuration),
+        };
+        const updatedNode = Object.assign(Object.assign({}, node), { configuration: Object.assign(Object.assign({}, node.configuration), { [key]: value }) });
+        // Record for undo before making changes
+        if (this.undoController) {
+            this.undoController.recordNodeConfigUpdated(node.id, { configuration: updatedNode.configuration }, previousState);
+        }
+        this.applyNodeUpdate(updatedNode);
+    }
+    /**
+     * Update the node name
+     */
+    updateName(name) {
+        const node = this._host.configuredNode;
+        if (!node)
+            return;
+        const previousState = { name: node.name };
+        const updatedNode = Object.assign(Object.assign({}, node), { name });
+        // Record for undo before making changes
+        if (this.undoController) {
+            this.undoController.recordNodeConfigUpdated(node.id, { name }, previousState);
+        }
+        this.applyNodeUpdate(updatedNode);
+    }
+    /**
+     * Update the node description
+     */
+    updateDescription(description) {
+        const node = this._host.configuredNode;
+        if (!node)
+            return;
+        const previousState = {
+            metadata: Object.assign({}, node.metadata),
+        };
+        const updatedNode = Object.assign(Object.assign({}, node), { metadata: Object.assign(Object.assign({}, node.metadata), { description }) });
+        // Record for undo before making changes
+        if (this.undoController) {
+            this.undoController.recordNodeConfigUpdated(node.id, { metadata: updatedNode.metadata }, previousState);
+        }
+        this.applyNodeUpdate(updatedNode);
+    }
+    /**
+     * Apply a node update to the workflow
+     */
+    applyNodeUpdate(updatedNode) {
+        this._host.setWorkflow(Object.assign(Object.assign({}, this._host.workflow), { nodes: this._host.workflow.nodes.map(n => n.id === updatedNode.id ? updatedNode : n) }));
+        this._host.configuredNode = updatedNode;
+        this._host.dispatchWorkflowChanged();
+    }
+    /**
+     * Calculate panel position next to the configured node
+     */
+    getPanelPosition() {
+        const node = this._host.configuredNode;
+        if (!node)
+            return null;
+        const { viewport } = this._host;
+        const nodeWidth = 180;
+        const panelOffset = 20;
+        return {
+            x: (node.position.x + nodeWidth + panelOffset) * viewport.zoom + viewport.panX,
+            y: node.position.y * viewport.zoom + viewport.panY,
+        };
+    }
+}
+//# sourceMappingURL=config.controller.js.map

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

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveControllerHost } from 'lit';
+import { BaseCanvasController } from './base.controller.js';
+import { CanvasHost, ConnectionState } from '../interfaces/index.js';
+import { WorkflowNode, WorkflowEdge, NodePort, Position } from '../workflow-canvas.types.js';
+import type { UndoController } from './undo.controller.js';
+/**
+ * Controller for managing edge connections
+ */
+export declare class ConnectionController extends BaseCanvasController {
+    private undoController;
+    constructor(host: CanvasHost & ReactiveControllerHost);
+    /**
+     * Set the undo controller (called after initialization)
+     */
+    setUndoController(controller: UndoController): void;
+    /**
+     * Start creating a connection from a port
+     */
+    startConnection(node: WorkflowNode, port: NodePort, isInput: boolean, event: MouseEvent): void;
+    /**
+     * Update the connection line position during drag
+     */
+    updateConnectionPosition(event: MouseEvent): void;
+    /**
+     * Complete the connection when released on a valid port
+     */
+    completeConnection(node: WorkflowNode, port: NodePort, isInput: boolean): boolean;
+    /**
+     * Cancel the current connection
+     */
+    cancelConnection(): void;
+    /**
+     * Check if currently creating a connection
+     */
+    isConnecting(): boolean;
+    /**
+     * Get the current connection state
+     */
+    getConnectionState(): ConnectionState | null;
+    /**
+     * Get port position for a node
+     */
+    getPortPosition(node: WorkflowNode, portId: string, isInput: boolean): Position;
+    /**
+     * Delete an edge by ID
+     */
+    deleteEdge(edgeId: string): void;
+    /**
+     * Get edges connected to a node
+     */
+    getNodeEdges(nodeId: string): {
+        inputs: WorkflowEdge[];
+        outputs: WorkflowEdge[];
+    };
+    /**
+     * Set hovered edge ID
+     */
+    setHoveredEdge(edgeId: string | null): void;
+    /**
+     * Get hovered edge ID
+     */
+    getHoveredEdge(): string | null;
+}
+//# sourceMappingURL=connection.controller.d.ts.map