@nuraly/lumenui 0.2.1 → 0.3.2

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

@@ -0,0 +1,218 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCanvasController } from './base.controller.js';
+/**
+ * Controller for undo/redo operations.
+ * Delegates all undo/redo logic to an externally-provided UndoProvider
+ * so the UI library never imports from the redux store.
+ */
+export class UndoController extends BaseCanvasController {
+    constructor(host) {
+        super(host);
+        this._undoProvider = null;
+    }
+    /**
+     * Set the undo provider (injected by the host)
+     */
+    set undoProvider(provider) {
+        this._undoProvider = provider;
+    }
+    get undoProvider() {
+        return this._undoProvider;
+    }
+    /**
+     * Get the current workflow ID
+     */
+    getWorkflowId() {
+        return this._host.workflow.id;
+    }
+    /**
+     * Execute undo
+     */
+    performUndo() {
+        if (!this._undoProvider)
+            return false;
+        const workflowId = this.getWorkflowId();
+        if (!this._undoProvider.canUndo(workflowId)) {
+            return false;
+        }
+        const result = this._undoProvider.undo(workflowId, this._host.workflow);
+        if (result.success && result.workflow) {
+            this._host.setWorkflow(result.workflow);
+            this._host.dispatchWorkflowChanged();
+            // Clear selection since undone items may no longer exist
+            this._host.selectedNodeIds = new Set();
+            this._host.selectedEdgeIds = new Set();
+            this._host.configuredNode = null;
+            // Dispatch undo event for UI feedback
+            this.dispatchEvent(new CustomEvent('undo-performed', {
+                detail: { description: result.description },
+                bubbles: true,
+                composed: true,
+            }));
+            return true;
+        }
+        if (result.error) {
+            // Dispatch error event
+            this.dispatchEvent(new CustomEvent('undo-error', {
+                detail: { error: result.error },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        return false;
+    }
+    /**
+     * Execute redo
+     */
+    performRedo() {
+        if (!this._undoProvider)
+            return false;
+        const workflowId = this.getWorkflowId();
+        if (!this._undoProvider.canRedo(workflowId)) {
+            return false;
+        }
+        const result = this._undoProvider.redo(workflowId, this._host.workflow);
+        if (result.success && result.workflow) {
+            this._host.setWorkflow(result.workflow);
+            this._host.dispatchWorkflowChanged();
+            // Clear selection since redone items may have changed
+            this._host.selectedNodeIds = new Set();
+            this._host.selectedEdgeIds = new Set();
+            this._host.configuredNode = null;
+            // Dispatch redo event for UI feedback
+            this.dispatchEvent(new CustomEvent('redo-performed', {
+                detail: { description: result.description },
+                bubbles: true,
+                composed: true,
+            }));
+            return true;
+        }
+        if (result.error) {
+            // Dispatch error event
+            this.dispatchEvent(new CustomEvent('redo-error', {
+                detail: { error: result.error },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        return false;
+    }
+    /**
+     * Check if undo is available
+     */
+    canUndo() {
+        var _a, _b;
+        return (_b = (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.canUndo(this.getWorkflowId())) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Check if redo is available
+     */
+    canRedo() {
+        var _a, _b;
+        return (_b = (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.canRedo(this.getWorkflowId())) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Get undo tooltip text
+     */
+    getUndoTooltip() {
+        var _a;
+        const description = (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.getUndoDescription(this.getWorkflowId());
+        if (description) {
+            return `Undo: ${description} (Ctrl+Z)`;
+        }
+        return 'Undo (Ctrl+Z)';
+    }
+    /**
+     * Get redo tooltip text
+     */
+    getRedoTooltip() {
+        var _a;
+        const description = (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.getRedoDescription(this.getWorkflowId());
+        if (description) {
+            return `Redo: ${description} (Ctrl+Shift+Z)`;
+        }
+        return 'Redo (Ctrl+Shift+Z)';
+    }
+    /**
+     * Record that a node was added
+     */
+    recordNodeAdded(node) {
+        var _a;
+        (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.recordAddNode(this.getWorkflowId(), node);
+    }
+    /**
+     * Record that a node was deleted
+     */
+    recordNodeDeleted(node, connectedEdges) {
+        var _a;
+        (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.recordDeleteNode(this.getWorkflowId(), node, connectedEdges);
+    }
+    /**
+     * Record that nodes were moved
+     */
+    recordNodesMoved(moves) {
+        var _a;
+        (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.recordMoveNodes(this.getWorkflowId(), moves);
+    }
+    /**
+     * Record that a node's configuration was updated
+     */
+    recordNodeConfigUpdated(nodeId, changes, previousState) {
+        var _a;
+        (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.recordUpdateNodeConfig(this.getWorkflowId(), nodeId, changes, previousState);
+    }
+    /**
+     * Record that an edge was added
+     */
+    recordEdgeAdded(edge) {
+        var _a;
+        (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.recordAddEdge(this.getWorkflowId(), edge);
+    }
+    /**
+     * Record that an edge was deleted
+     */
+    recordEdgeDeleted(edge) {
+        var _a;
+        (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.recordDeleteEdge(this.getWorkflowId(), edge);
+    }
+    /**
+     * Record a bulk delete operation
+     */
+    recordBulkDeleted(nodes, edges) {
+        var _a;
+        (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.recordBulkDelete(this.getWorkflowId(), nodes, edges);
+    }
+    /**
+     * Record that nodes were pasted
+     */
+    recordNodesPasted(nodes, edges) {
+        var _a;
+        (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.recordPasteNodes(this.getWorkflowId(), nodes, edges);
+    }
+    /**
+     * Record that nodes were duplicated
+     */
+    recordNodesDuplicated(nodes, edges) {
+        var _a;
+        (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.recordDuplicateNodes(this.getWorkflowId(), nodes, edges);
+    }
+    /**
+     * Flush any pending operations (call before undo)
+     */
+    flushPending() {
+        var _a;
+        (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.flushPendingOperations();
+    }
+    /**
+     * Clear undo history for the current workflow
+     */
+    clearHistory() {
+        var _a;
+        (_a = this._undoProvider) === null || _a === void 0 ? void 0 : _a.clearUndoHistory(this.getWorkflowId());
+    }
+}
+//# sourceMappingURL=undo.controller.js.map

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

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveControllerHost } from 'lit';
+import { BaseCanvasController } from './base.controller.js';
+import { CanvasHost, CanvasViewport } from '../interfaces/index.js';
+/**
+ * Extended host interface for viewport controller
+ */
+export interface ViewportHost extends CanvasHost {
+    viewport: CanvasViewport;
+}
+/**
+ * Controller for managing canvas viewport (pan, zoom, transform)
+ */
+export declare class ViewportController extends BaseCanvasController<ViewportHost & ReactiveControllerHost> {
+    private readonly boundHandleWheel;
+    private readonly debouncedDispatchViewportChanged;
+    private animationFrameId;
+    constructor(host: ViewportHost & ReactiveControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Handle wheel events for pan and zoom
+     */
+    private handleWheel;
+    /**
+     * Handle zoom via wheel
+     */
+    private handleZoom;
+    /**
+     * Handle pan via wheel
+     */
+    private handlePan;
+    /**
+     * Update the CSS transform on the viewport element
+     */
+    updateTransform(): void;
+    /**
+     * Update config panel position to follow the configured node
+     */
+    updateConfigPanelPosition(): void;
+    /**
+     * Update insert panel position to track LEFT of the target node
+     */
+    updateInsertPanelPosition(): void;
+    /**
+     * Handle panning via mouse drag
+     */
+    handlePanDrag(e: MouseEvent): void;
+    /**
+     * Start panning
+     */
+    startPan(e: MouseEvent): void;
+    /**
+     * Stop panning and dispatch viewport changed event
+     */
+    stopPan(): void;
+    /**
+     * Zoom in
+     */
+    zoomIn(): void;
+    /**
+     * Zoom out
+     */
+    zoomOut(): void;
+    /**
+     * Pan the viewport to center on a specific canvas coordinate.
+     * Animates smoothly using an ease-out curve. Preserves the current zoom level.
+     */
+    panToPosition(canvasX: number, canvasY: number, animate?: boolean): void;
+    /**
+     * Reset view to default
+     */
+    resetView(): void;
+    /**
+     * Set zoom level centered on a specific screen point (used by pinch-to-zoom)
+     */
+    setZoomAtPoint(newZoom: number, clientX: number, clientY: number): void;
+    /**
+     * Set zoom level centered on viewport
+     */
+    setZoom(zoom: number): void;
+    /**
+     * Get current zoom percentage
+     */
+    getZoomPercentage(): number;
+}
+//# sourceMappingURL=viewport.controller.d.ts.map

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

@@ -0,0 +1,287 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseCanvasController } from './base.controller.js';
+/**
+ * Controller for managing canvas viewport (pan, zoom, transform)
+ */
+export class ViewportController extends BaseCanvasController {
+    constructor(host) {
+        super(host);
+        this.debouncedDispatchViewportChanged = this.debounce(() => {
+            this._host.dispatchViewportChanged();
+        }, 300);
+        this.animationFrameId = null;
+        this.boundHandleWheel = this.handleWheel.bind(this);
+    }
+    hostConnected() {
+        window.addEventListener('wheel', this.boundHandleWheel, { passive: false, capture: true });
+    }
+    hostDisconnected() {
+        window.removeEventListener('wheel', this.boundHandleWheel, { capture: true });
+        this.debouncedDispatchViewportChanged.cancel();
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+    }
+    /**
+     * Handle wheel events for pan and zoom
+     */
+    handleWheel(e) {
+        const wrapper = this.canvasWrapper;
+        if (!wrapper)
+            return;
+        // Block wheel events when canvas is disabled
+        if (this._host.disabled)
+            return;
+        // Check if event is within our canvas (using shadow DOM)
+        const path = e.composedPath();
+        const isInCanvas = path.some(el => el === wrapper || el === this._host);
+        if (!isInCanvas)
+            return;
+        // Skip if inside scrollable panels - check composedPath for shadow DOM support
+        const isInScrollablePanel = path.some(el => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            if (el instanceof HTMLElement) {
+                return ((_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains('node-palette')) ||
+                    ((_b = el.classList) === null || _b === void 0 ? void 0 : _b.contains('config-panel')) ||
+                    ((_c = el.classList) === null || _c === void 0 ? void 0 : _c.contains('insert-panel')) ||
+                    ((_d = el.classList) === null || _d === void 0 ? void 0 : _d.contains('chatbot-preview-panel')) ||
+                    ((_e = el.classList) === null || _e === void 0 ? void 0 : _e.contains('palette-content')) ||
+                    ((_f = el.classList) === null || _f === void 0 ? void 0 : _f.contains('config-panel-content')) ||
+                    ((_g = el.classList) === null || _g === void 0 ? void 0 : _g.contains('chatbot-preview-content'));
+            }
+            return false;
+        });
+        if (isInScrollablePanel) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        const { deltaX, deltaY, ctrlKey, metaKey } = e;
+        if (ctrlKey || metaKey) {
+            this.handleZoom(e, deltaY);
+        }
+        else {
+            this.handlePan(deltaX, deltaY);
+        }
+    }
+    /**
+     * Handle zoom via wheel
+     */
+    handleZoom(e, deltaY) {
+        const wrapper = this.canvasWrapper;
+        if (!wrapper)
+            return;
+        const { viewport } = this._host;
+        const zoom = Math.max(0.25, Math.min(2, viewport.zoom * (1 - deltaY * 0.01)));
+        const rect = wrapper.getBoundingClientRect();
+        const mx = e.clientX - rect.left;
+        const my = e.clientY - rect.top;
+        const scale = zoom / viewport.zoom;
+        this._host.viewport = {
+            zoom,
+            panX: mx - (mx - viewport.panX) * scale,
+            panY: my - (my - viewport.panY) * scale,
+        };
+        this.updateTransform();
+        this._host.dispatchViewportChanged();
+    }
+    /**
+     * Handle pan via wheel
+     */
+    handlePan(deltaX, deltaY) {
+        const { viewport } = this._host;
+        this._host.viewport = Object.assign(Object.assign({}, viewport), { panX: viewport.panX - deltaX, panY: viewport.panY - deltaY });
+        this.updateTransform();
+        // Debounce viewport changed event to avoid excessive saves during scroll
+        this.debouncedDispatchViewportChanged();
+    }
+    /**
+     * Update the CSS transform on the viewport element
+     */
+    updateTransform() {
+        const viewportEl = this.canvasViewport;
+        if (!viewportEl)
+            return;
+        const { viewport } = this._host;
+        viewportEl.style.transform = `translate(${viewport.panX}px, ${viewport.panY}px) scale(${viewport.zoom})`;
+        this.updateConfigPanelPosition();
+        this.updateInsertPanelPosition();
+    }
+    /**
+     * Update config panel position to follow the configured node
+     */
+    updateConfigPanelPosition() {
+        const { configuredNode, configPanel, viewport } = this._host;
+        if (!configPanel || !configuredNode)
+            return;
+        const nodeWidth = 180;
+        const panelOffset = 20;
+        const panelX = (configuredNode.position.x + nodeWidth + panelOffset) * viewport.zoom + viewport.panX;
+        const panelY = configuredNode.position.y * viewport.zoom + viewport.panY;
+        configPanel.style.left = `${panelX}px`;
+        configPanel.style.top = `${panelY}px`;
+    }
+    /**
+     * Update insert panel position to track LEFT of the target node
+     */
+    updateInsertPanelPosition() {
+        const host = this._host;
+        const { insertPanelNode, insertPanel, viewport } = host;
+        if (!insertPanel || !insertPanelNode)
+            return;
+        const panelWidth = 320;
+        const panelOffset = 20;
+        const panelX = insertPanelNode.position.x * viewport.zoom + viewport.panX - (panelWidth + panelOffset) * viewport.zoom;
+        const panelY = insertPanelNode.position.y * viewport.zoom + viewport.panY;
+        insertPanel.style.left = `${panelX}px`;
+        insertPanel.style.top = `${panelY}px`;
+        insertPanel.style.transform = `scale(${viewport.zoom})`;
+        insertPanel.style.transformOrigin = 'top right';
+    }
+    /**
+     * Handle panning via mouse drag
+     */
+    handlePanDrag(e) {
+        if (this._host.disabled)
+            return;
+        const { panStart } = this._host;
+        this._host.viewport = Object.assign(Object.assign({}, this._host.viewport), { panX: e.clientX - panStart.x, panY: e.clientY - panStart.y });
+        this.updateTransform();
+    }
+    /**
+     * Start panning
+     */
+    startPan(e) {
+        if (this._host.disabled)
+            return;
+        this._host.isPanning = true;
+        this._host.panStart = {
+            x: e.clientX - this._host.viewport.panX,
+            y: e.clientY - this._host.viewport.panY,
+        };
+    }
+    /**
+     * Stop panning and dispatch viewport changed event
+     */
+    stopPan() {
+        this._host.isPanning = false;
+        this._host.dispatchViewportChanged();
+    }
+    /**
+     * Zoom in
+     */
+    zoomIn() {
+        this.setZoom(Math.min(2, this._host.viewport.zoom * 1.2));
+    }
+    /**
+     * Zoom out
+     */
+    zoomOut() {
+        this.setZoom(Math.max(0.25, this._host.viewport.zoom / 1.2));
+    }
+    /**
+     * Pan the viewport to center on a specific canvas coordinate.
+     * Animates smoothly using an ease-out curve. Preserves the current zoom level.
+     */
+    panToPosition(canvasX, canvasY, animate = true) {
+        const wrapper = this.canvasWrapper;
+        if (!wrapper)
+            return;
+        const rect = wrapper.getBoundingClientRect();
+        const { zoom } = this._host.viewport;
+        const targetPanX = rect.width / 2 - canvasX * zoom;
+        const targetPanY = rect.height / 2 - canvasY * zoom;
+        if (!animate) {
+            this._host.viewport = { zoom, panX: targetPanX, panY: targetPanY };
+            this.updateTransform();
+            this._host.dispatchViewportChanged();
+            return;
+        }
+        // Cancel any in-progress animation
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+        const startPanX = this._host.viewport.panX;
+        const startPanY = this._host.viewport.panY;
+        const duration = 500; // ms
+        const startTime = performance.now();
+        const step = (now) => {
+            const elapsed = now - startTime;
+            const t = Math.min(elapsed / duration, 1);
+            // ease-out cubic: 1 - (1 - t)^3
+            const eased = 1 - Math.pow(1 - t, 3);
+            const panX = startPanX + (targetPanX - startPanX) * eased;
+            const panY = startPanY + (targetPanY - startPanY) * eased;
+            this._host.viewport = { zoom, panX, panY };
+            this.updateTransform();
+            if (t < 1) {
+                this.animationFrameId = requestAnimationFrame(step);
+            }
+            else {
+                this.animationFrameId = null;
+                this._host.dispatchViewportChanged();
+            }
+        };
+        this.animationFrameId = requestAnimationFrame(step);
+    }
+    /**
+     * Reset view to default
+     */
+    resetView() {
+        this._host.viewport = { zoom: 1, panX: 0, panY: 0 };
+        this.updateTransform();
+        this._host.dispatchViewportChanged();
+    }
+    /**
+     * Set zoom level centered on a specific screen point (used by pinch-to-zoom)
+     */
+    setZoomAtPoint(newZoom, clientX, clientY) {
+        const wrapper = this.canvasWrapper;
+        if (!wrapper)
+            return;
+        const zoom = Math.max(0.25, Math.min(2, newZoom));
+        const rect = wrapper.getBoundingClientRect();
+        const mx = clientX - rect.left;
+        const my = clientY - rect.top;
+        const { viewport } = this._host;
+        const scale = zoom / viewport.zoom;
+        this._host.viewport = {
+            zoom,
+            panX: mx - (mx - viewport.panX) * scale,
+            panY: my - (my - viewport.panY) * scale,
+        };
+        this.updateTransform();
+        this._host.dispatchViewportChanged();
+    }
+    /**
+     * Set zoom level centered on viewport
+     */
+    setZoom(zoom) {
+        const wrapper = this.canvasWrapper;
+        if (!wrapper)
+            return;
+        const rect = wrapper.getBoundingClientRect();
+        const { viewport } = this._host;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const newPanX = centerX - (centerX - viewport.panX) * (zoom / viewport.zoom);
+        const newPanY = centerY - (centerY - viewport.panY) * (zoom / viewport.zoom);
+        this._host.viewport = { zoom, panX: newPanX, panY: newPanY };
+        this.updateTransform();
+        this._host.dispatchViewportChanged();
+    }
+    /**
+     * Get current zoom percentage
+     */
+    getZoomPercentage() {
+        return Math.round(this._host.viewport.zoom * 100);
+    }
+}
+//# sourceMappingURL=viewport.controller.js.map

package/dist/src/components/canvas/data-node/data-node-config.component.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { type DataNodeConfiguration, type DatabaseProvider } from './data-node.types.js';
+import './schema-select.component.js';
+import './table-select.component.js';
+import '../../db-connection-select/db-connection-select.component.js';
+import './data-node-fields.component.js';
+/**
+ * Data Node Configuration Component
+ *
+ * A stateful component that manages the entire data node configuration UI,
+ * including database type, connection, schema, table selection and column-aware
+ * field components.
+ *
+ * @example
+ * ```html
+ * <nr-data-node-config
+ *   .config=${nodeConfig}
+ *   @config-update=${(e) => handleUpdate(e.detail.key, e.detail.value)}
+ * ></nr-data-node-config>
+ * ```
+ *
+ * @fires config-update - Fired when any config value changes
+ */
+export declare class NrDataNodeConfig extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Current node configuration */
+    config: Partial<DataNodeConfiguration>;
+    /** Application ID (host-provided, replaces getVarValue) */
+    applicationId: string;
+    /** Database provider for introspection (host-provided) */
+    databaseProvider?: DatabaseProvider;
+    /** KV entries for connection selects (host-provided) */
+    kvEntries: {
+        keyPath: string;
+        value?: any;
+        isSecret: boolean;
+    }[];
+    /** Callback when a KV entry needs to be created */
+    onCreateKvEntry?: (detail: {
+        keyPath: string;
+        value: any;
+        scope: string;
+        isSecret: boolean;
+    }) => void;
+    private columns;
+    private loadingColumns;
+    updated(changedProperties: Map<string, unknown>): void;
+    private loadColumns;
+    private onUpdate;
+    private renderDatabaseTypeSelect;
+    private renderConnectionSelect;
+    private renderSchemaSelect;
+    private renderTableSelect;
+    private renderColumnDependentSections;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-data-node-config': NrDataNodeConfig;
+    }
+}
+//# sourceMappingURL=data-node-config.component.d.ts.map