@nuraly/lumenui 0.1.0

package/dist/src/components/canvas/base-canvas.component.js

@@ -0,0 +1,865 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { LitElement, html, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { CanvasMode, createNodeFromTemplate, isFrameNode, } from './workflow-canvas.types.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import '../icon/icon.component.js';
+import '../input/input.component.js';
+import '../chatbot/chatbot.component.js';
+import { ChatbotCoreController } from '../chatbot/core/chatbot-core.controller.js';
+// Controllers
+import { ViewportController, SelectionController, ConnectionController, KeyboardController, DragController, ConfigController, MarqueeController, ClipboardController, UndoController, FrameController, CollaborationController, TouchController, } from './controllers/index.js';
+// Templates
+import { renderToolbarTemplate, renderZoomControlsTemplate, renderContextMenuTemplate, renderEmptyStateTemplate, renderConfigPanelTemplate, renderEdgesTemplate, renderRemoteCursorsTemplate, renderPresenceBarTemplate, renderChatbotPanelTemplate, } from './templates/index.js';
+import { renderExpandedFrameTemplate } from './templates/frame.template.js';
+// Constants
+import { FRAME_DEFAULT_WIDTH, FRAME_DEFAULT_HEIGHT, FRAME_DEFAULT_LABEL, NOTE_MIN_WIDTH, NOTE_MIN_HEIGHT, VIEWPORT_ADD_NODE_OFFSET_X, VIEWPORT_ADD_NODE_OFFSET_Y, } from './canvas.constants.js';
+/**
+ * Abstract base class for canvas components (workflow & whiteboard).
+ *
+ * Shared infrastructure: controllers, lifecycle, event handlers,
+ * dispatch helpers, frame handling, note editing, and render helpers.
+ *
+ * Subclasses implement abstract hooks for differences in node
+ * normalization, containment dimensions, note config keys, etc.
+ */
+export class BaseCanvasElement extends NuralyUIBaseMixin(LitElement) {
+    get workflow() {
+        return this._workflow;
+    }
+    set workflow(value) {
+        this.setWorkflow(value);
+    }
+    get undoProvider() {
+        var _a, _b;
+        return (_b = (_a = this.undoController) === null || _a === void 0 ? void 0 : _a.undoProvider) !== null && _b !== void 0 ? _b : null;
+    }
+    set undoProvider(provider) {
+        if (this.undoController) {
+            this.undoController.undoProvider = provider;
+        }
+    }
+    // ==================== Constructor ====================
+    constructor() {
+        super();
+        // ==================== Workflow Property ====================
+        this._workflow = {
+            id: '',
+            name: '',
+            nodes: [],
+            edges: [],
+        };
+        // ==================== Public Properties ====================
+        this.readonly = false;
+        this.disabled = false;
+        this.showMinimap = true;
+        this.showToolbar = true;
+        this.showPalette = false;
+        this.canvasId = '';
+        this.collaborative = false;
+        // ==================== State ====================
+        this.viewport = { zoom: 1, panX: 0, panY: 0 };
+        this.mode = CanvasMode.SELECT;
+        this.selectedNodeIds = new Set();
+        this.selectedEdgeIds = new Set();
+        this.connectionState = null;
+        this.dragState = null;
+        this.contextMenu = null;
+        this.isPanning = false;
+        this.panStart = { x: 0, y: 0 };
+        this.hoveredEdgeId = null;
+        this.marqueeState = null;
+        this.lastMousePosition = null;
+        this.editingFrameLabelId = null;
+        this.editingNoteId = null;
+        this.configuredNode = null;
+        this.insertPanelNode = null;
+        this.expandedCategories = new Set();
+        // Canvas chatbot panel (AI Assistant)
+        this.showChatbotPanel = false;
+        this.chatbotUnreadCount = 0;
+        this.canvasChatbotController = null;
+        // ==================== Note Resize State ====================
+        this.noteResizeState = null;
+        this.insertPanelColumns = [];
+        this.insertPanelSchemaName = '';
+        // ==================== Event Handlers ====================
+        this.handleGlobalMouseUp = (e) => {
+            if (this.disabled)
+                return;
+            const wasDragging = this.dragState;
+            const draggedNodeIds = wasDragging ? new Set(this.selectedNodeIds) : null;
+            this.dragController.stopDrag();
+            this.viewportController.stopPan();
+            this.connectionController.cancelConnection();
+            if (this.marqueeState) {
+                this.marqueeController.endSelection(e.shiftKey);
+            }
+            if (this.collaborative && wasDragging && draggedNodeIds) {
+                for (const nodeId of draggedNodeIds) {
+                    const node = this.workflow.nodes.find(n => n.id === nodeId);
+                    if (node) {
+                        this.collaborationController.broadcastOperation('MOVE', nodeId, {
+                            x: node.position.x,
+                            y: node.position.y,
+                        });
+                    }
+                }
+            }
+        };
+        this.handleGlobalMouseMove = (e) => {
+            if (this.disabled)
+                return;
+            if (this.canvasWrapper) {
+                const rect = this.canvasWrapper.getBoundingClientRect();
+                this.lastMousePosition = {
+                    x: (e.clientX - rect.left - this.viewport.panX) / this.viewport.zoom,
+                    y: (e.clientY - rect.top - this.viewport.panY) / this.viewport.zoom,
+                };
+            }
+            if (this.collaborative && this.lastMousePosition) {
+                this.collaborationController.broadcastCursorMove(this.lastMousePosition.x, this.lastMousePosition.y);
+            }
+            // Subclass hook — whiteboard uses this for note resize short-circuit
+            if (this.onGlobalMouseMoveExtra(e))
+                return;
+            if (this.dragState) {
+                this.dragController.handleDrag(e);
+            }
+            if (this.isPanning) {
+                this.viewportController.handlePanDrag(e);
+            }
+            if (this.connectionState) {
+                this.connectionController.updateConnectionPosition(e);
+            }
+            if (this.marqueeState) {
+                this.marqueeController.updateSelection(e);
+            }
+        };
+        this.handleCanvasMouseDown = (e) => {
+            if (this.disabled)
+                return;
+            this.contextMenu = null;
+            // Subclass hook (e.g. close colour picker)
+            this.onCanvasMouseDownExtra(e);
+            const target = e.target;
+            const isCanvasBackground = target.classList.contains('canvas-grid') || target.classList.contains('canvas-wrapper');
+            if (e.button === 1) {
+                e.preventDefault();
+                this.viewportController.startPan(e);
+            }
+            else if (e.button === 0 && isCanvasBackground) {
+                e.preventDefault();
+                if (e.ctrlKey || e.metaKey || this.mode === CanvasMode.PAN) {
+                    this.viewportController.startPan(e);
+                    if (!e.shiftKey) {
+                        this.selectionController.clearSelection();
+                    }
+                }
+                else {
+                    this.marqueeController.startSelection(e, e.shiftKey);
+                }
+            }
+        };
+        this.handleCanvasContextMenu = (e) => {
+            e.preventDefault();
+            if (this.disabled)
+                return;
+            const menuType = this.selectedNodeIds.size > 0 ? 'node' : 'canvas';
+            this.contextMenu = {
+                x: e.clientX,
+                y: e.clientY,
+                type: menuType,
+            };
+        };
+        this.handleCanvasDrop = (e) => {
+            var _a;
+            e.preventDefault();
+            if (this.disabled)
+                return;
+            const type = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('application/workflow-node-type');
+            if (!type)
+                return;
+            const rect = this.canvasWrapper.getBoundingClientRect();
+            const x = (e.clientX - rect.left - this.viewport.panX) / this.viewport.zoom;
+            const y = (e.clientY - rect.top - this.viewport.panY) / this.viewport.zoom;
+            this.addNode(type, { x: Math.round(x / 20) * 20, y: Math.round(y / 20) * 20 });
+        };
+        this.handleCanvasDragOver = (e) => {
+            if (this.disabled)
+                return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+        };
+        this.handleNoteResizeDrag = (event) => {
+            this.handleNoteResizeWithCoords(event.clientX, event.clientY);
+        };
+        this.stopNoteResize = () => {
+            if (!this.noteResizeState)
+                return;
+            const resizedNodeId = this.noteResizeState.nodeId;
+            this.noteResizeState = null;
+            document.removeEventListener('mousemove', this.handleNoteResizeDrag);
+            document.removeEventListener('mouseup', this.stopNoteResize);
+            this.onNoteResizeStopped(resizedNodeId);
+            this.dispatchWorkflowChanged();
+        };
+        const host = this;
+        this.viewportController = new ViewportController(host);
+        this.selectionController = new SelectionController(host);
+        this.connectionController = new ConnectionController(host);
+        this.configController = new ConfigController(host);
+        this.marqueeController = new MarqueeController(this);
+        this.clipboardController = new ClipboardController(this);
+        this.undoController = new UndoController(host);
+        this.frameController = new FrameController(host);
+        this.keyboardController = new KeyboardController(host, this.selectionController);
+        this.keyboardController.setClipboardController(this.clipboardController);
+        this.keyboardController.setUndoController(this.undoController);
+        this.dragController = new DragController(host, this.viewportController);
+        new TouchController(// NOSONAR — side-effect: self-registers as reactive controller via addController
+        host, this.viewportController, this.dragController, this.selectionController);
+        this.selectionController.setUndoController(this.undoController);
+        this.dragController.setUndoController(this.undoController);
+        this.connectionController.setUndoController(this.undoController);
+        this.configController.setUndoController(this.undoController);
+        this.clipboardController.setUndoController(this.undoController);
+        this.dragController.setFrameController(this.frameController);
+        this.collaborationController = new CollaborationController(host);
+    }
+    // ==================== Overridable Hooks ====================
+    /** Extra logic at the start of handleCanvasMouseDown (e.g. close colour picker). */
+    onCanvasMouseDownExtra(_e) { }
+    /** Extra logic in handleGlobalMouseMove; return true to short-circuit remaining handlers. */
+    onGlobalMouseMoveExtra(_e) { return false; }
+    /** Extra logic after standard handleNodeMouseDown (e.g. auto-open chat preview). */
+    onNodeMouseDownExtra(_node) { }
+    /** Called at end of connectedCallback. */
+    onConnected() { }
+    /** Called at end of disconnectedCallback. */
+    onDisconnected() { }
+    /** Called when note resize starts (e.g. add touch listeners). */
+    onNoteResizeStarted(_node, _event) { }
+    /** Called when note resize stops (e.g. remove touch listeners, broadcast). */
+    onNoteResizeStopped(_nodeId) { }
+    /** Return nodes for edge/frame/visible-node rendering. Workflow overrides to apply statuses. */
+    getNodesForRendering() {
+        return this.workflow.nodes;
+    }
+    // ==================== Frame Containment ====================
+    isNodeInsideFrame(node, frameLeft, frameTop, frameRight, frameBottom) {
+        const dims = this.getNodeDimensionsForContainment(node);
+        const nodeCenterX = node.position.x + dims.width / 2;
+        const nodeCenterY = node.position.y + dims.height / 2;
+        return (nodeCenterX >= frameLeft && nodeCenterX <= frameRight &&
+            nodeCenterY >= frameTop && nodeCenterY <= frameBottom);
+    }
+    computeFrameContainment(nodes) {
+        const frames = nodes.filter(n => isFrameNode(n.type));
+        for (const frame of frames) {
+            const config = frame.configuration || {};
+            const frameWidth = config.frameWidth || FRAME_DEFAULT_WIDTH;
+            const frameHeight = config.frameHeight || FRAME_DEFAULT_HEIGHT;
+            const frameLeft = frame.position.x;
+            const frameTop = frame.position.y;
+            const frameRight = frameLeft + frameWidth;
+            const frameBottom = frameTop + frameHeight;
+            const isCollapsed = config.frameCollapsed;
+            const containedIds = [];
+            for (const node of nodes) {
+                if (node.id === frame.id || isFrameNode(node.type) || this.shouldExcludeFromContainment(node))
+                    continue;
+                if (this.isNodeInsideFrame(node, frameLeft, frameTop, frameRight, frameBottom)) {
+                    containedIds.push(node.id);
+                    node.parentFrameId = frame.id;
+                    if (isCollapsed) {
+                        node.metadata = node.metadata || {};
+                        node.metadata._hiddenByFrame = true;
+                    }
+                }
+            }
+            frame.containedNodeIds = containedIds;
+        }
+        return nodes;
+    }
+    // ==================== Lifecycle ====================
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            globalThis.addEventListener('mouseup', this.handleGlobalMouseUp);
+            globalThis.addEventListener('mousemove', this.handleGlobalMouseMove);
+            yield this.updateComplete;
+            this.viewportController.updateTransform();
+            if (this.collaborative && this.canvasId) {
+                this.collaborationController.connect(this.canvasId, this.getCanvasType());
+            }
+            this.onConnected();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        globalThis.removeEventListener('mouseup', this.handleGlobalMouseUp);
+        globalThis.removeEventListener('mousemove', this.handleGlobalMouseMove);
+        this.onDisconnected();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (this.collaborative && changedProperties.has('selectedNodeIds')) {
+            this.collaborationController.broadcastSelectionChange(Array.from(this.selectedNodeIds));
+        }
+    }
+    // ==================== CanvasHost Interface ====================
+    setWorkflow(workflow) {
+        const oldValue = this._workflow;
+        // Subclass-specific node normalization
+        let nodes = this.normalizeNodes([...workflow.nodes]);
+        // Shared frame containment computation
+        nodes = this.computeFrameContainment(nodes);
+        this._workflow = Object.assign(Object.assign({}, workflow), { nodes });
+        this.requestUpdate('workflow', oldValue);
+        // Restore viewport from workflow ONLY when loading a different workflow
+        if (workflow.viewport && (oldValue === null || oldValue === void 0 ? void 0 : oldValue.id) !== workflow.id) {
+            this.viewport = workflow.viewport;
+            this.updateComplete.then(() => {
+                var _a;
+                (_a = this.viewportController) === null || _a === void 0 ? void 0 : _a.updateTransform();
+            });
+        }
+        // Subclass-specific post-load hook
+        this.onWorkflowLoaded(workflow, oldValue);
+    }
+    dispatchWorkflowChanged() {
+        this.dispatchEvent(new CustomEvent('workflow-changed', {
+            detail: { workflow: this.workflow },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    dispatchViewportChanged() {
+        this.dispatchEvent(new CustomEvent('viewport-changed', {
+            detail: { viewport: this.viewport },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    dispatchNodeSelected(node) {
+        this.dispatchEvent(new CustomEvent('node-selected', {
+            detail: { node },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    dispatchNodeMoved(node, position) {
+        this.dispatchEvent(new CustomEvent('node-moved', {
+            detail: { node, position },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleNodeMouseDown(e) {
+        if (this.disabled)
+            return;
+        this.contextMenu = null;
+        const { node, event } = e.detail;
+        const isAlreadySelected = this.selectedNodeIds.has(node.id);
+        if (event.shiftKey) {
+            this.selectionController.selectNode(node.id, true);
+        }
+        else if (!isAlreadySelected) {
+            this.selectionController.clearSelection();
+            this.selectionController.selectNode(node.id, false);
+        }
+        if (this.configuredNode) {
+            this.configuredNode = node;
+        }
+        if (!this.readonly) {
+            this.dragController.startDrag(node, event);
+        }
+        this.dispatchNodeSelected(node);
+        // Subclass hook
+        this.onNodeMouseDownExtra(node);
+    }
+    handleEdgeClick(e, edge) {
+        if (this.disabled)
+            return;
+        e.stopPropagation();
+        this.selectionController.selectEdge(edge.id, e.shiftKey);
+    }
+    handlePortMouseDown(e) {
+        if (this.disabled || this.readonly)
+            return;
+        const { node, port, isInput, event } = e.detail;
+        this.connectionController.startConnection(node, port, isInput, event);
+    }
+    handlePortMouseUp(e) {
+        if (this.disabled)
+            return;
+        const { node, port, isInput } = e.detail;
+        const edgesBefore = this.workflow.edges.length;
+        this.connectionController.completeConnection(node, port, isInput);
+        if (this.collaborative && this.workflow.edges.length > edgesBefore) {
+            const newEdge = this.workflow.edges[this.workflow.edges.length - 1];
+            if (newEdge) {
+                this.collaborationController.broadcastOperation('ADD_CONNECTOR', newEdge.id, { edge: newEdge });
+            }
+        }
+    }
+    // ==================== Node Operations ====================
+    addNode(type, position) {
+        if (this.readonly)
+            return;
+        const pos = position || {
+            x: (-this.viewport.panX + VIEWPORT_ADD_NODE_OFFSET_X) / this.viewport.zoom,
+            y: (-this.viewport.panY + VIEWPORT_ADD_NODE_OFFSET_Y) / this.viewport.zoom,
+        };
+        const newNode = createNodeFromTemplate(type, pos);
+        if (newNode) {
+            this.undoController.recordNodeAdded(newNode);
+            if (isFrameNode(type)) {
+                this.workflow = Object.assign(Object.assign({}, this.workflow), { nodes: [newNode, ...this.workflow.nodes] });
+                this.frameController.updateFrameContainment(newNode);
+            }
+            else {
+                this.workflow = Object.assign(Object.assign({}, this.workflow), { nodes: [...this.workflow.nodes, newNode] });
+                this.frameController.updateAllFrameContainments();
+            }
+            this.dispatchWorkflowChanged();
+            if (this.collaborative) {
+                this.collaborationController.broadcastOperation('ADD', newNode.id, { node: newNode });
+            }
+        }
+    }
+    getPortPosition(node, portId, isInput) {
+        return this.connectionController.getPortPosition(node, portId, isInput);
+    }
+    // ==================== Frame Handling ====================
+    getFrameNodes() {
+        return this.getNodesForRendering().filter(node => isFrameNode(node.type));
+    }
+    getVisibleNonFrameNodes() {
+        return this.getNodesForRendering().filter(node => {
+            var _a;
+            if (isFrameNode(node.type))
+                return false;
+            if ((_a = node.metadata) === null || _a === void 0 ? void 0 : _a._hiddenByFrame)
+                return false;
+            return true;
+        });
+    }
+    renderExpandedFrame(frame) {
+        return renderExpandedFrameTemplate({
+            frame,
+            isSelected: this.selectedNodeIds.has(frame.id),
+            editingFrameLabelId: this.editingFrameLabelId,
+            readonly: this.readonly,
+            callbacks: {
+                onFrameMouseDown: (e, f) => this.handleFrameMouseDown(e, f),
+                onFrameDblClick: (e, f) => this.handleFrameDblClick(e, f),
+                onFrameResize: (e, f, h) => this.handleFrameResize(e, f, h),
+                onStartEditingLabel: (e, f) => this.startEditingFrameLabel(e, f),
+                onLabelBlur: (e, f) => this.handleFrameLabelBlur(e, f),
+                onLabelKeydown: (e, f) => this.handleFrameLabelKeydown(e, f),
+            },
+        });
+    }
+    handleFrameMouseDown(e, frame) {
+        e.stopPropagation();
+        if (!e.shiftKey) {
+            this.selectedNodeIds.clear();
+            this.selectedEdgeIds.clear();
+        }
+        this.selectedNodeIds.add(frame.id);
+        this.handleNodeMouseDown({
+            detail: { node: frame, event: e },
+        });
+        this.requestUpdate();
+    }
+    handleFrameDblClick(e, frame) {
+        e.stopPropagation();
+        this.frameController.toggleCollapsed(frame);
+    }
+    handleFrameResize(e, frame, handle) {
+        e.stopPropagation();
+        this.frameController.startResize(e, frame, handle);
+    }
+    startEditingFrameLabel(e, frame) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (this.readonly)
+            return;
+        this.editingFrameLabelId = frame.id;
+        this.updateComplete.then(() => {
+            var _a;
+            const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.frame-label-input, .collapsed-frame-title-input');
+            if (input) {
+                input.focus();
+                input.select();
+            }
+        });
+    }
+    handleFrameLabelBlur(e, frame) {
+        const input = e.target;
+        const newLabel = input.value.trim() || FRAME_DEFAULT_LABEL;
+        this.saveFrameLabel(frame, newLabel);
+        this.editingFrameLabelId = null;
+    }
+    handleFrameLabelKeydown(e, frame) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const input = e.target;
+            const newLabel = input.value.trim() || FRAME_DEFAULT_LABEL;
+            this.saveFrameLabel(frame, newLabel);
+            this.editingFrameLabelId = null;
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            this.editingFrameLabelId = null;
+        }
+    }
+    saveFrameLabel(frame, newLabel) {
+        const updatedNodes = this.workflow.nodes.map(node => {
+            if (node.id === frame.id) {
+                return Object.assign(Object.assign({}, node), { name: newLabel, configuration: Object.assign(Object.assign({}, node.configuration), { frameLabel: newLabel }) });
+            }
+            return node;
+        });
+        this.setWorkflow(Object.assign(Object.assign({}, this.workflow), { nodes: updatedNodes }));
+        this.dispatchWorkflowChanged();
+        if (this.collaborative) {
+            this.collaborationController.broadcastOperation('UPDATE', frame.id, { frameLabel: newLabel });
+        }
+    }
+    // ==================== Note Content Editing ====================
+    handleNoteContentChange(e) {
+        const { node, content } = e.detail;
+        const configKey = this.getNoteContentKey(node);
+        const updatedNodes = this.workflow.nodes.map(n => {
+            if (n.id === node.id) {
+                return Object.assign(Object.assign({}, n), { configuration: Object.assign(Object.assign({}, n.configuration), { [configKey]: content }) });
+            }
+            return n;
+        });
+        this.setWorkflow(Object.assign(Object.assign({}, this.workflow), { nodes: updatedNodes }));
+        this.dispatchWorkflowChanged();
+        if (this.collaborative) {
+            this.collaborationController.broadcastOperation('UPDATE_TEXT', node.id, { [configKey]: content });
+        }
+    }
+    handleNoteEditEnd(_e) {
+        if (this.collaborative && this.editingNoteId) {
+            this.collaborationController.broadcastTypingStop(this.editingNoteId);
+        }
+        this.editingNoteId = null;
+    }
+    // ==================== Note Resize ====================
+    handleNoteResizeStart(e) {
+        const { node, event } = e.detail;
+        this.startNoteResize(node, event);
+    }
+    startNoteResize(node, event) {
+        const config = node.configuration || {};
+        const keys = this.getNoteSizeKeys();
+        const defaults = this.getDefaultNoteSize();
+        this.noteResizeState = {
+            nodeId: node.id,
+            startX: event.clientX,
+            startY: event.clientY,
+            startWidth: config[keys.widthKey] || defaults.width,
+            startHeight: config[keys.heightKey] || defaults.height,
+        };
+        document.addEventListener('mousemove', this.handleNoteResizeDrag);
+        document.addEventListener('mouseup', this.stopNoteResize);
+        this.onNoteResizeStarted(node, event);
+    }
+    handleNoteResizeWithCoords(clientX, clientY) {
+        if (!this.noteResizeState)
+            return;
+        const { nodeId, startX, startY, startWidth, startHeight } = this.noteResizeState;
+        const node = this.workflow.nodes.find(n => n.id === nodeId);
+        if (!node)
+            return;
+        const deltaX = (clientX - startX) / this.viewport.zoom;
+        const deltaY = (clientY - startY) / this.viewport.zoom;
+        const newWidth = Math.max(NOTE_MIN_WIDTH, startWidth + deltaX);
+        const newHeight = Math.max(NOTE_MIN_HEIGHT, startHeight + deltaY);
+        const keys = this.getNoteSizeKeys();
+        node.configuration = Object.assign(Object.assign({}, node.configuration), { [keys.widthKey]: newWidth, [keys.heightKey]: newHeight });
+        this.requestUpdate();
+    }
+    // ==================== Chatbot Panel ====================
+    initCanvasChatbotController() {
+        var _a;
+        (_a = this.canvasChatbotController) !== null && _a !== void 0 ? _a : (this.canvasChatbotController = new ChatbotCoreController());
+    }
+    toggleChatbotPanel() {
+        this.showChatbotPanel = !this.showChatbotPanel;
+        if (this.showChatbotPanel) {
+            this.initCanvasChatbotController();
+            this.chatbotUnreadCount = 0;
+        }
+    }
+    // ==================== Render Helpers ====================
+    renderEdges() {
+        return renderEdgesTemplate({
+            edges: this.workflow.edges,
+            nodes: this.getNodesForRendering(),
+            selectedEdgeIds: this.selectedEdgeIds,
+            hoveredEdgeId: this.hoveredEdgeId,
+            connectionState: this.connectionState,
+            currentTheme: this.currentTheme,
+            callbacks: {
+                onEdgeClick: (e, edge) => this.handleEdgeClick(e, edge),
+                onEdgeHover: (edgeId) => this.connectionController.setHoveredEdge(edgeId),
+                getPortPosition: (node, portId, isInput) => this.getPortPosition(node, portId, isInput),
+            },
+        });
+    }
+    renderToolbar() {
+        return renderToolbarTemplate({
+            showToolbar: this.showToolbar,
+            mode: this.mode,
+            showPalette: this.showPalette,
+            canvasType: this.getCanvasType(),
+            hasSelection: this.selectedNodeIds.size > 0 || this.selectedEdgeIds.size > 0,
+            hasSingleSelection: this.selectedNodeIds.size === 1,
+            readonly: this.readonly,
+            canUndo: this.undoController.canUndo(),
+            canRedo: this.undoController.canRedo(),
+            undoTooltip: this.undoController.getUndoTooltip(),
+            redoTooltip: this.undoController.getRedoTooltip(),
+            showChatbot: this.showChatbotPanel,
+            onToggleChatbot: () => this.toggleChatbotPanel(),
+            chatbotUnreadCount: this.chatbotUnreadCount,
+            onModeChange: (mode) => { this.mode = mode; },
+            onTogglePalette: () => { this.showPalette = !this.showPalette; },
+            onZoomIn: () => this.viewportController.zoomIn(),
+            onZoomOut: () => this.viewportController.zoomOut(),
+            onResetView: () => this.viewportController.resetView(),
+            onOpenConfig: () => this.selectionController.openConfigForSelected(),
+            onDelete: () => this.selectionController.deleteSelected(),
+            onUndo: () => this.undoController.performUndo(),
+            onRedo: () => this.undoController.performRedo(),
+        });
+    }
+    renderZoomControls() {
+        return renderZoomControlsTemplate({
+            zoomPercentage: this.viewportController.getZoomPercentage(),
+            onZoomIn: () => this.viewportController.zoomIn(),
+            onZoomOut: () => this.viewportController.zoomOut(),
+        });
+    }
+    renderContextMenu() {
+        return renderContextMenuTemplate({
+            contextMenu: this.contextMenu,
+            readonly: this.readonly,
+            hasSelection: this.selectedNodeIds.size > 0,
+            onClose: () => { this.contextMenu = null; },
+            onAddNode: () => { this.showPalette = !this.showPalette; },
+            onSelectAll: () => this.selectionController.selectAll(),
+            onResetView: () => this.viewportController.resetView(),
+            onConfigure: () => this.selectionController.openConfigForSelected(),
+            onDuplicate: () => this.selectionController.duplicateSelected(),
+            onDelete: () => this.selectionController.deleteSelected(),
+            onCopy: () => { void this.clipboardController.copySelected(); },
+            onCut: () => { void this.clipboardController.cutSelected(); },
+            onPaste: () => { void this.clipboardController.pasteFromClipboard(); },
+        });
+    }
+    renderEmptyState() {
+        return renderEmptyStateTemplate({
+            hasNodes: this.workflow.nodes.length > 0,
+        });
+    }
+    renderMarqueeBox() {
+        if (!this.marqueeState)
+            return html ``;
+        const rect = this.marqueeController.getSelectionRect();
+        const style = {
+            left: `${rect.x * this.viewport.zoom + this.viewport.panX}px`,
+            top: `${rect.y * this.viewport.zoom + this.viewport.panY}px`,
+            width: `${rect.width * this.viewport.zoom}px`,
+            height: `${rect.height * this.viewport.zoom}px`,
+        };
+        return html `
+      <div class="selection-box" style=${styleMap(style)}></div>
+    `;
+    }
+    renderRemoteCursors() {
+        if (!this.collaborative)
+            return nothing;
+        return renderRemoteCursorsTemplate({
+            cursors: this.collaborationController.getCursors(),
+            viewport: this.viewport,
+        });
+    }
+    handlePanToUser(userId) {
+        const cursors = this.collaborationController.getCursors();
+        const cursor = cursors.find(c => c.userId === userId);
+        if (cursor) {
+            this.viewportController.panToPosition(cursor.x, cursor.y);
+        }
+    }
+    renderPresenceBar() {
+        if (!this.collaborative)
+            return nothing;
+        return renderPresenceBarTemplate({
+            users: this.collaborationController.getUsers(),
+            connected: this.collaborationController.isConnected(),
+            onUserClick: (userId) => this.handlePanToUser(userId),
+        });
+    }
+    renderConfigPanel() {
+        return renderConfigPanelTemplate({
+            node: this.configuredNode,
+            position: this.configController.getPanelPosition(),
+            callbacks: {
+                onClose: () => this.configController.closeConfig(),
+                onUpdateName: (name) => this.configController.updateName(name),
+                onUpdateDescription: (desc) => this.configController.updateDescription(desc),
+                onUpdateConfig: (key, value) => {
+                    this.configController.updateConfig(key, value);
+                    if (this.collaborative && this.configuredNode) {
+                        this.collaborationController.broadcastOperation('UPDATE', this.configuredNode.id, { [key]: value });
+                    }
+                },
+            },
+            workflow: this.workflow,
+        });
+    }
+    renderChatbotPanel() {
+        return renderChatbotPanelTemplate({
+            isOpen: this.showChatbotPanel,
+            controller: this.canvasChatbotController,
+            unreadCount: this.chatbotUnreadCount,
+            currentTheme: this.currentTheme,
+        }, {
+            onClose: () => this.toggleChatbotPanel(),
+        });
+    }
+}
+__decorate([
+    property({ type: Object })
+], BaseCanvasElement.prototype, "workflow", null);
+__decorate([
+    property({ type: Boolean })
+], BaseCanvasElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], BaseCanvasElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], BaseCanvasElement.prototype, "showMinimap", void 0);
+__decorate([
+    property({ type: Boolean })
+], BaseCanvasElement.prototype, "showToolbar", void 0);
+__decorate([
+    property({ type: Boolean })
+], BaseCanvasElement.prototype, "showPalette", void 0);
+__decorate([
+    property({ type: String, attribute: 'canvas-id' })
+], BaseCanvasElement.prototype, "canvasId", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'collaborative' })
+], BaseCanvasElement.prototype, "collaborative", void 0);
+__decorate([
+    property({ attribute: false })
+], BaseCanvasElement.prototype, "undoProvider", null);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "viewport", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "mode", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "selectedNodeIds", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "selectedEdgeIds", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "connectionState", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "dragState", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "contextMenu", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "isPanning", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "panStart", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "hoveredEdgeId", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "marqueeState", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "lastMousePosition", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "editingFrameLabelId", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "editingNoteId", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "configuredNode", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "insertPanelNode", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "expandedCategories", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "showChatbotPanel", void 0);
+__decorate([
+    state()
+], BaseCanvasElement.prototype, "chatbotUnreadCount", void 0);
+__decorate([
+    query('.canvas-wrapper')
+], BaseCanvasElement.prototype, "canvasWrapper", void 0);
+__decorate([
+    query('.canvas-viewport')
+], BaseCanvasElement.prototype, "canvasViewport", void 0);
+__decorate([
+    query('.config-panel')
+], BaseCanvasElement.prototype, "configPanel", void 0);
+__decorate([
+    query('.insert-panel')
+], BaseCanvasElement.prototype, "insertPanel", void 0);
+__decorate([
+    property({ attribute: false })
+], BaseCanvasElement.prototype, "insertPanelColumns", void 0);
+__decorate([
+    property({ type: String })
+], BaseCanvasElement.prototype, "insertPanelSchemaName", void 0);
+//# sourceMappingURL=base-canvas.component.js.map