@nyaruka/temba-components 0.129.1 → 0.129.3

package/out-tsc/src/flow/Editor.js

@@ -5,13 +5,24 @@ import { property, state } from 'lit/decorators.js';
 import { getStore } from '../store/Store';
 import { fromStore, zustand } from '../store/AppState';
 import { RapidElement } from '../RapidElement';
+import { repeat } from 'lit-html/directives/repeat.js';
 import { Plumber } from './Plumber';
 import { EditorNode } from './EditorNode';
 export function snapToGrid(value) {
-    return Math.round(value / 20) * 20;
+    const snapped = Math.round(value / 20) * 20;
+    return Math.max(snapped, 0);
+}
+export function findNodeForExit(definition, exitUuid) {
+    for (const node of definition.nodes) {
+        const exit = node.exits.find((e) => e.uuid === exitUuid);
+        if (exit) {
+            return node.uuid;
+        }
+    }
+    return null;
 }
 const SAVE_QUIET_TIME = 500;
-const DRAG_THRESHOLD = 10;
+const DRAG_THRESHOLD = 5;
 export class Editor extends RapidElement {
     // unfortunately, jsplumb requires that we be in light DOM
     createRenderRoot() {
@@ -27,41 +38,23 @@ export class Editor extends RapidElement {
       #grid {
         position: relative;
         background-color: #f9f9f9;
+        background-image: radial-gradient(
+          circle,
+          rgba(61, 177, 255, 0.3) 1px,
+          transparent 1px
+        );
+        background-size: 20px 20px;
         background-position: 10px 10px;
-        background-image: linear-gradient(
-            0deg,
-            transparent 24%,
-            rgba(61, 177, 255, 0.15) 25%,
-            rgba(61, 177, 255, 0.15) 26%,
-            transparent 27%,
-            transparent 74%,
-            rgba(61, 177, 255, 0.15) 75%,
-            rgba(61, 177, 255, 0.15) 76%,
-            transparent 77%,
-            transparent
-          ),
-          linear-gradient(
-            90deg,
-            transparent 24%,
-            rgba(61, 177, 255, 0.15) 25%,
-            rgba(61, 177, 255, 0.15) 26%,
-            transparent 27%,
-            transparent 74%,
-            rgba(61, 177, 255, 0.15) 75%,
-            rgba(61, 177, 255, 0.15) 76%,
-            transparent 77%,
-            transparent
-          );
-        background-size: 40px 40px;
         box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.05);
         border-top: 1px solid #e0e0e0;
-        display: inline-block;
         width: 100%;
+        display: flex;
       }
 
       #canvas {
         position: relative;
-        padding: 20px;
+        padding: 0px;
+        flex-grow: 1;
         margin: 20px;
       }
 
@@ -71,7 +64,7 @@ export class Editor extends RapidElement {
       }
 
       #canvas > .dragging {
-        z-index: 10000 !important;
+        z-index: 99999 !important;
       }
 
       body .jtk-endpoint {
@@ -81,70 +74,44 @@ export class Editor extends RapidElement {
 
       .jtk-endpoint {
         z-index: 600;
+        opacity: 0;
       }
 
       .plumb-source {
         z-index: 600;
-        border: 0px solid var(--color-connectors);
+        cursor: pointer;
+        opacity: 0;
       }
 
       .plumb-source.connected {
-        box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.1);
         border-radius: 50%;
+        pointer-events: none;
       }
 
       .plumb-source circle {
-        fill: tomato;
-      }
-
-      .plumb-source.connected circle {
-        fill: #fff;
-      }
-
-      .plumb-source svg {
-        fill: var(--color-connectors) !important;
-        stroke: var(--color-connectors);
+        fill: purple;
       }
 
       .plumb-target {
-        margin-top: -6px;
         z-index: 600;
         opacity: 0;
         cursor: pointer;
+        fill: transparent;
       }
 
-      body .plumb-connector path {
+      body svg.jtk-connector.plumb-connector path {
         stroke: var(--color-connectors) !important;
         stroke-width: 3px;
-        z-index: 10;
       }
 
       body .plumb-connector {
-        z-index: 10;
-      }
-
-      body .plumb-connector.elevated {
-        z-index: 550;
-      }
-
-      body .plumb-connector.elevated path {
-        stroke: var(--color-connectors) !important;
-        stroke-width: 3px;
-        z-index: 550;
-      }
-
-      body .plumb-connector.elevated .plumb-arrow {
-        fill: var(--color-connectors);
-        stroke: var(--color-connectors);
-        stroke-width: 0px;
-        margin-top: 6px;
-        z-index: 550;
+        z-index: 10 !important;
       }
 
       body .plumb-connector .plumb-arrow {
         fill: var(--color-connectors);
         stroke: var(--color-connectors);
-        stroke-width: 0px;
+        stroke-width: 0px !important;
         margin-top: 6px;
         z-index: 10;
       }
@@ -159,6 +126,50 @@ export class Editor extends RapidElement {
         stroke-width: 0px;
         z-index: 10;
       }
+
+      /* Connection dragging feedback */
+      body svg.jtk-connector.jtk-dragging {
+        z-index: 99999 !important;
+      }
+
+      .katavorio-drag-no-select svg.jtk-connector path,
+      .katavorio-drag-no-select svg.jtk-endpoint path {
+        pointer-events: none !important;
+        border: 1px solid purple;
+      }
+
+      /* Connection target feedback */
+      temba-flow-node.connection-target-valid {
+        outline: 3px solid var(--color-success, #22c55e) !important;
+        outline-offset: 2px;
+        border-radius: var(--curvature);
+      }
+
+      temba-flow-node.connection-target-invalid {
+        outline: 3px solid var(--color-error, #ef4444) !important;
+        outline-offset: 2px;
+        border-radius: var(--curvature);
+      }
+
+      /* Selection box styles */
+      .selection-box {
+        position: absolute;
+        border: 2px dashed #6298f0ff;
+        background-color: rgba(59, 130, 246, 0.1);
+        z-index: 9999;
+        pointer-events: none;
+      }
+
+      /* Selected item styles */
+      .draggable.selected {
+        outline: 3px solid #6298f0ff;
+        outline-offset: 0px;
+        border-radius: var(--curvature);
+      }
+
+      .jtk-floating-endpoint {
+        pointer-events: none;
+      }
     `;
     }
     constructor() {
@@ -171,9 +182,21 @@ export class Editor extends RapidElement {
         this.dragStartPos = { x: 0, y: 0 };
         this.currentDragItem = null;
         this.startPos = { left: 0, top: 0 };
+        // Selection state
+        this.selectedItems = new Set();
+        this.isSelecting = false;
+        this.selectionBox = null;
+        this.targetId = null;
+        this.sourceId = null;
+        this.dragFromNodeId = null;
+        this.isValidTarget = true;
+        this.canvasMouseDown = false;
         // Bound event handlers to maintain proper 'this' context
         this.boundMouseMove = this.handleMouseMove.bind(this);
         this.boundMouseUp = this.handleMouseUp.bind(this);
+        this.boundGlobalMouseDown = this.handleGlobalMouseDown.bind(this);
+        this.boundKeyDown = this.handleKeyDown.bind(this);
+        this.boundCanvasDoubleClick = this.handleCanvasDoubleClick.bind(this);
     }
     firstUpdated(changes) {
         super.firstUpdated(changes);
@@ -182,6 +205,37 @@ export class Editor extends RapidElement {
         if (changes.has('flow')) {
             getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
         }
+        this.plumber.on('connection:drag', (info) => {
+            this.dragFromNodeId = document
+                .getElementById(info.sourceId)
+                .closest('.node').id;
+            this.sourceId = info.sourceId;
+        });
+        this.plumber.on('connection:abort', () => {
+            this.makeConnection();
+        });
+        this.plumber.on('connection:detach', () => {
+            this.makeConnection();
+        });
+    }
+    makeConnection() {
+        if (this.sourceId && this.targetId && this.isValidTarget) {
+            this.plumber.connectIds(this.dragFromNodeId, this.sourceId, this.targetId);
+            getStore()
+                .getState()
+                .updateConnection(this.dragFromNodeId, this.sourceId, this.targetId);
+            setTimeout(() => {
+                this.plumber.repaintEverything();
+            }, 100);
+        }
+        // Clean up visual feedback
+        document.querySelectorAll('temba-flow-node').forEach((node) => {
+            node.classList.remove('connection-target-valid', 'connection-target-invalid');
+        });
+        this.sourceId = null;
+        this.targetId = null;
+        this.dragFromNodeId = null;
+        this.isValidTarget = true;
     }
     updated(changes) {
         super.updated(changes);
@@ -227,10 +281,22 @@ export class Editor extends RapidElement {
         }
         document.removeEventListener('mousemove', this.boundMouseMove);
         document.removeEventListener('mouseup', this.boundMouseUp);
+        document.removeEventListener('mousedown', this.boundGlobalMouseDown);
+        document.removeEventListener('keydown', this.boundKeyDown);
+        const canvas = this.querySelector('#canvas');
+        if (canvas) {
+            canvas.removeEventListener('dblclick', this.boundCanvasDoubleClick);
+        }
     }
     setupGlobalEventListeners() {
         document.addEventListener('mousemove', this.boundMouseMove);
         document.addEventListener('mouseup', this.boundMouseUp);
+        document.addEventListener('mousedown', this.boundGlobalMouseDown);
+        document.addEventListener('keydown', this.boundKeyDown);
+        const canvas = this.querySelector('#canvas');
+        if (canvas) {
+            canvas.addEventListener('dblclick', this.boundCanvasDoubleClick);
+        }
     }
     getPosition(uuid, type) {
         var _a, _b, _c;
@@ -241,24 +307,10 @@ export class Editor extends RapidElement {
             return (_c = (_b = this.definition._ui.stickies) === null || _b === void 0 ? void 0 : _b[uuid]) === null || _c === void 0 ? void 0 : _c.position;
         }
     }
-    updatePosition(uuid, type, position) {
-        var _a;
-        if (type === 'node') {
-            getStore().getState().updateNodePosition(uuid, position);
-        }
-        else {
-            const currentSticky = (_a = this.definition._ui.stickies) === null || _a === void 0 ? void 0 : _a[uuid];
-            if (currentSticky) {
-                getStore()
-                    .getState()
-                    .updateStickyNote(uuid, {
-                    ...currentSticky,
-                    position
-                });
-            }
-        }
-    }
     handleMouseDown(event) {
+        // ignore right clicks
+        if (event.button !== 0)
+            return;
         const element = event.currentTarget;
         // Only start dragging if clicking on the element itself, not on exits or other interactive elements
         const target = event.target;
@@ -270,7 +322,17 @@ export class Editor extends RapidElement {
         const position = this.getPosition(uuid, type);
         if (!position)
             return;
-        // Set up potential drag state, but don't start dragging yet
+        // If clicking on a non-selected item, clear selection unless Ctrl/Cmd is held
+        if (!this.selectedItems.has(uuid) && !event.ctrlKey && !event.metaKey) {
+            this.selectedItems.clear();
+            // Don't add single items to selection - single clicks just clear existing selection
+        }
+        else if (!this.selectedItems.has(uuid)) {
+            // Add this item to selection only if Ctrl/Cmd is held
+            this.selectedItems.add(uuid);
+        }
+        // Always set up drag state regardless of selection status
+        // This allows single nodes to be dragged without being selected
         this.isMouseDown = true;
         this.dragStartPos = { x: event.clientX, y: event.clientY };
         this.startPos = { left: position.left, top: position.top };
@@ -283,7 +345,230 @@ export class Editor extends RapidElement {
         event.preventDefault();
         event.stopPropagation();
     }
+    handleGlobalMouseDown(event) {
+        var _a;
+        // ignore right clicks
+        if (event.button !== 0)
+            return;
+        // Check if the click is within our canvas
+        const canvasRect = (_a = this.querySelector('#grid')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!canvasRect)
+            return;
+        const isWithinCanvas = event.clientX >= canvasRect.left &&
+            event.clientX <= canvasRect.right &&
+            event.clientY >= canvasRect.top &&
+            event.clientY <= canvasRect.bottom;
+        if (!isWithinCanvas)
+            return;
+        // Check if we clicked on a draggable item (node or sticky)
+        const target = event.target;
+        const clickedOnDraggable = target.closest('.draggable');
+        if (clickedOnDraggable) {
+            // This is handled by the individual item mousedown handlers
+            return;
+        }
+        // We clicked on empty canvas space, start selection
+        this.handleCanvasMouseDown(event);
+    }
+    handleCanvasMouseDown(event) {
+        var _a;
+        const target = event.target;
+        if (target.id === 'canvas' || target.id === 'grid') {
+            // Ignore clicks on exits
+            // Start selection box
+            this.canvasMouseDown = true;
+            this.dragStartPos = { x: event.clientX, y: event.clientY };
+            const canvasRect = (_a = this.querySelector('#canvas')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (canvasRect) {
+                // Clear current selection
+                this.selectedItems.clear();
+                const relativeX = event.clientX - canvasRect.left;
+                const relativeY = event.clientY - canvasRect.top;
+                this.selectionBox = {
+                    startX: relativeX,
+                    startY: relativeY,
+                    endX: relativeX,
+                    endY: relativeY
+                };
+            }
+            event.preventDefault();
+        }
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Delete' || event.key === 'Backspace') {
+            if (this.selectedItems.size > 0) {
+                this.showDeleteConfirmation();
+            }
+        }
+        if (event.key === 'Escape') {
+            this.selectedItems.clear();
+            this.requestUpdate();
+        }
+    }
+    showDeleteConfirmation() {
+        const itemCount = this.selectedItems.size;
+        const itemType = itemCount === 1 ? 'item' : 'items';
+        // Create and show confirmation dialog
+        const dialog = document.createElement('temba-dialog');
+        dialog.header = 'Delete Items';
+        dialog.primaryButtonName = 'Delete';
+        dialog.cancelButtonName = 'Cancel';
+        dialog.destructive = true;
+        dialog.innerHTML = `<div style="padding: 20px;">Are you sure you want to delete ${itemCount} ${itemType}?</div>`;
+        dialog.addEventListener('temba-button-clicked', (event) => {
+            if (event.detail.button.name === 'Delete') {
+                this.deleteSelectedItems();
+                dialog.open = false;
+            }
+        });
+        // Add to document and show
+        document.body.appendChild(dialog);
+        dialog.open = true;
+        // Clean up dialog when closed
+        dialog.addEventListener('temba-dialog-hidden', () => {
+            document.body.removeChild(dialog);
+        });
+    }
+    deleteNodes(uuids) {
+        // Clean up jsPlumb connections for nodes before removing them
+        uuids.forEach((uuid) => {
+            this.plumber.removeNodeConnections(uuid);
+        });
+        // Now remove them from the definition
+        if (uuids.length > 0 && this.plumber) {
+            getStore().getState().removeNodes(uuids);
+        }
+    }
+    deleteSelectedItems() {
+        const nodes = Array.from(this.selectedItems).filter((uuid) => this.definition.nodes.some((node) => node.uuid === uuid));
+        this.deleteNodes(Array.from(nodes));
+        const stickies = Array.from(this.selectedItems).filter((uuid) => { var _a, _b; return (_b = (_a = this.definition._ui) === null || _a === void 0 ? void 0 : _a.stickies) === null || _b === void 0 ? void 0 : _b[uuid]; });
+        getStore().getState().removeStickyNotes(stickies);
+        // Clear selection
+        this.selectedItems.clear();
+    }
+    updateSelectionBox(event) {
+        var _a;
+        if (!this.selectionBox || !this.canvasMouseDown)
+            return;
+        const canvasRect = (_a = this.querySelector('#canvas')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!canvasRect)
+            return;
+        const relativeX = event.clientX - canvasRect.left;
+        const relativeY = event.clientY - canvasRect.top;
+        this.selectionBox = {
+            ...this.selectionBox,
+            endX: relativeX,
+            endY: relativeY
+        };
+        // Update selected items based on selection box
+        this.updateSelectedItemsFromBox();
+    }
+    updateSelectedItemsFromBox() {
+        var _a, _b, _c;
+        if (!this.selectionBox)
+            return;
+        const newSelection = new Set();
+        const boxLeft = Math.min(this.selectionBox.startX, this.selectionBox.endX);
+        const boxTop = Math.min(this.selectionBox.startY, this.selectionBox.endY);
+        const boxRight = Math.max(this.selectionBox.startX, this.selectionBox.endX);
+        const boxBottom = Math.max(this.selectionBox.startY, this.selectionBox.endY);
+        // Check nodes
+        (_a = this.definition) === null || _a === void 0 ? void 0 : _a.nodes.forEach((node) => {
+            var _a, _b;
+            const nodeElement = this.querySelector(`[id="${node.uuid}"]`);
+            if (nodeElement) {
+                const position = (_a = this.definition._ui.nodes[node.uuid]) === null || _a === void 0 ? void 0 : _a.position;
+                if (position) {
+                    const rect = nodeElement.getBoundingClientRect();
+                    const canvasRect = (_b = this.querySelector('#canvas')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+                    if (canvasRect) {
+                        const nodeLeft = position.left;
+                        const nodeTop = position.top;
+                        const nodeRight = nodeLeft + rect.width;
+                        const nodeBottom = nodeTop + rect.height;
+                        // Check if selection box intersects with node
+                        if (boxLeft < nodeRight &&
+                            boxRight > nodeLeft &&
+                            boxTop < nodeBottom &&
+                            boxBottom > nodeTop) {
+                            newSelection.add(node.uuid);
+                        }
+                    }
+                }
+            }
+        });
+        // Check sticky notes
+        const stickies = ((_c = (_b = this.definition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.stickies) || {};
+        Object.entries(stickies).forEach(([uuid, sticky]) => {
+            if (sticky.position) {
+                const stickyElement = this.querySelector(`temba-sticky-note[uuid="${uuid}"]`);
+                if (stickyElement) {
+                    // Use clientWidth/clientHeight instead of getBoundingClientRect() to get element dimensions
+                    // This avoids the coordinate system mismatch between viewport and canvas coordinates
+                    const width = stickyElement.clientWidth;
+                    const height = stickyElement.clientHeight;
+                    // Use the canvas coordinates from the sticky's position
+                    const stickyLeft = sticky.position.left;
+                    const stickyTop = sticky.position.top;
+                    const stickyRight = stickyLeft + width;
+                    const stickyBottom = stickyTop + height;
+                    // Check if selection box intersects with sticky
+                    if (boxLeft < stickyRight &&
+                        boxRight > stickyLeft &&
+                        boxTop < stickyBottom &&
+                        boxBottom > stickyTop) {
+                        newSelection.add(uuid);
+                    }
+                }
+            }
+        });
+        this.selectedItems = newSelection;
+    }
+    renderSelectionBox() {
+        if (!this.selectionBox || !this.isSelecting)
+            return '';
+        const left = Math.min(this.selectionBox.startX, this.selectionBox.endX);
+        const top = Math.min(this.selectionBox.startY, this.selectionBox.endY);
+        const width = Math.abs(this.selectionBox.endX - this.selectionBox.startX);
+        const height = Math.abs(this.selectionBox.endY - this.selectionBox.startY);
+        return html `<div
+      class="selection-box"
+      style="left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px;"
+    ></div>`;
+    }
     handleMouseMove(event) {
+        // Handle selection box drawing
+        if (this.canvasMouseDown && !this.isMouseDown) {
+            this.isSelecting = true;
+            this.updateSelectionBox(event);
+            this.requestUpdate(); // Force re-render
+            return;
+        }
+        if (this.plumber.connectionDragging) {
+            const targetNode = document.querySelector('temba-flow-node:hover');
+            // Clear previous target styles
+            document.querySelectorAll('temba-flow-node').forEach((node) => {
+                node.classList.remove('connection-target-valid', 'connection-target-invalid');
+            });
+            if (targetNode) {
+                this.targetId = targetNode.getAttribute('uuid');
+                // Check if target is different from source node (prevent self-targeting)
+                this.isValidTarget = this.targetId !== this.dragFromNodeId;
+                // Apply visual feedback based on validity
+                if (this.isValidTarget) {
+                    targetNode.classList.add('connection-target-valid');
+                }
+                else {
+                    targetNode.classList.add('connection-target-invalid');
+                }
+            }
+            else {
+                this.targetId = null;
+                this.isValidTarget = true;
+            }
+        }
+        // Handle item dragging
         if (!this.isMouseDown || !this.currentDragItem)
             return;
         const deltaX = event.clientX - this.dragStartPos.x;
@@ -292,60 +577,96 @@ export class Editor extends RapidElement {
         // Only start dragging if we've moved beyond the threshold
         if (!this.isDragging && distance > DRAG_THRESHOLD) {
             this.isDragging = true;
-            // If this is a node, elevate connections
-            if (this.currentDragItem.type === 'node' && this.plumber) {
-                this.plumber.elevateNodeConnections(this.currentDragItem.uuid);
-            }
         }
         // If we're actually dragging, update positions
         if (this.isDragging) {
-            const newLeft = this.startPos.left + deltaX;
-            const newTop = this.startPos.top + deltaY;
-            // Update the visual position during drag
-            this.currentDragItem.element.style.left = `${newLeft}px`;
-            this.currentDragItem.element.style.top = `${newTop}px`;
-            // Repaint connections if this is a node
-            if (this.currentDragItem.type === 'node' && this.plumber) {
-                this.plumber.repaintEverything();
-            }
+            // Determine what items to move
+            const itemsToMove = this.selectedItems.has(this.currentDragItem.uuid) &&
+                this.selectedItems.size > 1
+                ? Array.from(this.selectedItems)
+                : [this.currentDragItem.uuid];
+            itemsToMove.forEach((uuid) => {
+                const element = this.querySelector(`[uuid="${uuid}"]`);
+                if (element) {
+                    const type = element.tagName === 'TEMBA-FLOW-NODE' ? 'node' : 'sticky';
+                    const position = this.getPosition(uuid, type);
+                    if (position) {
+                        const newLeft = position.left + deltaX;
+                        const newTop = position.top + deltaY;
+                        // Update the visual position during drag
+                        element.style.left = `${newLeft}px`;
+                        element.style.top = `${newTop}px`;
+                        // Add dragging class to ensure highest z-index
+                        element.classList.add('dragging');
+                    }
+                }
+            });
+            this.plumber.revalidate(itemsToMove);
         }
     }
     handleMouseUp(event) {
+        // Handle selection box completion
+        if (this.canvasMouseDown && this.isSelecting) {
+            this.isSelecting = false;
+            this.selectionBox = null;
+            this.canvasMouseDown = false;
+            this.requestUpdate();
+            return;
+        }
+        // Handle canvas click (clear selection)
+        if (this.canvasMouseDown && !this.isSelecting) {
+            this.canvasMouseDown = false;
+            return;
+        }
+        // Handle item drag completion
         if (!this.isMouseDown || !this.currentDragItem)
             return;
         // If we were actually dragging, handle the drag end
         if (this.isDragging) {
-            // Restore normal z-index for node connections
-            if (this.currentDragItem.type === 'node' && this.plumber) {
-                this.plumber.restoreNodeConnections(this.currentDragItem.uuid);
-            }
             const deltaX = event.clientX - this.dragStartPos.x;
             const deltaY = event.clientY - this.dragStartPos.y;
-            const newLeft = this.startPos.left + deltaX;
-            const newTop = this.startPos.top + deltaY;
-            // Snap to 20px grid for final position
-            const snappedLeft = snapToGrid(newLeft);
-            const snappedTop = snapToGrid(newTop);
-            const newPosition = { left: snappedLeft, top: snappedTop };
-            // Update the store with the new snapped position
-            this.updatePosition(this.currentDragItem.uuid, this.currentDragItem.type, newPosition);
-            // Update canvas positions for nodes
-            if (this.currentDragItem.type === 'node') {
-                getStore()
-                    .getState()
-                    .updateCanvasPositions({
-                    [this.currentDragItem.uuid]: newPosition
-                });
-            }
-            // Repaint connections if this is a node
-            if (this.currentDragItem.type === 'node' && this.plumber) {
-                this.plumber.repaintEverything();
+            // Determine what items were moved
+            const itemsToMove = this.selectedItems.has(this.currentDragItem.uuid) &&
+                this.selectedItems.size > 1
+                ? Array.from(this.selectedItems)
+                : [this.currentDragItem.uuid];
+            // Update positions for all moved items
+            const newPositions = {};
+            itemsToMove.forEach((uuid) => {
+                const type = this.definition.nodes.find((node) => node.uuid === uuid)
+                    ? 'node'
+                    : 'sticky';
+                const position = this.getPosition(uuid, type);
+                if (position) {
+                    const newLeft = position.left + deltaX;
+                    const newTop = position.top + deltaY;
+                    // Snap to 20px grid for final position
+                    const snappedLeft = snapToGrid(newLeft);
+                    const snappedTop = snapToGrid(newTop);
+                    const newPosition = { left: snappedLeft, top: snappedTop };
+                    newPositions[uuid] = newPosition;
+                    // Remove dragging class
+                    const element = this.querySelector(`[uuid="${uuid}"]`);
+                    if (element) {
+                        element.classList.remove('dragging');
+                        element.style.left = `${snappedLeft}px`;
+                        element.style.top = `${snappedTop}px`;
+                    }
+                }
+            });
+            if (Object.keys(newPositions).length > 0) {
+                getStore().getState().updateCanvasPositions(newPositions);
+                setTimeout(() => {
+                    this.plumber.repaintEverything();
+                }, 0);
             }
+            this.selectedItems.clear();
         }
         // Reset all drag state
         this.isDragging = false;
         this.isMouseDown = false;
         this.currentDragItem = null;
+        this.canvasMouseDown = false;
     }
     updateCanvasSize() {
         var _a;
@@ -371,15 +692,54 @@ export class Editor extends RapidElement {
         });
         // Check sticky note positions
         const stickies = ((_a = this.definition._ui) === null || _a === void 0 ? void 0 : _a.stickies) || {};
-        Object.values(stickies).forEach((sticky) => {
+        Object.entries(stickies).forEach(([uuid, sticky]) => {
             if (sticky.position) {
-                maxWidth = Math.max(maxWidth, sticky.position.left + 200); // Sticky note width
-                maxHeight = Math.max(maxHeight, sticky.position.top + 100); // Sticky note height
+                const stickyElement = this.querySelector(`temba-sticky-note[uuid="${uuid}"]`);
+                if (stickyElement) {
+                    // Use clientWidth/clientHeight instead of getBoundingClientRect() to get element dimensions
+                    // This avoids the coordinate system mismatch between viewport and canvas coordinates
+                    const width = stickyElement.clientWidth;
+                    const height = stickyElement.clientHeight;
+                    // Both sticky.position and width/height are now in the same coordinate system
+                    maxWidth = Math.max(maxWidth, sticky.position.left + width);
+                    maxHeight = Math.max(maxHeight, sticky.position.top + height);
+                }
+                else {
+                    // Fallback to default sizes if element not found
+                    maxWidth = Math.max(maxWidth, sticky.position.left + 200);
+                    maxHeight = Math.max(maxHeight, sticky.position.top + 100);
+                }
             }
         });
         // Update canvas size in store
         store.getState().expandCanvas(maxWidth, maxHeight);
     }
+    handleCanvasDoubleClick(event) {
+        // Check if we double-clicked on empty canvas space
+        const target = event.target;
+        if (target.id !== 'canvas') {
+            return;
+        }
+        // Get canvas position
+        const canvas = this.querySelector('#canvas');
+        if (!canvas) {
+            return;
+        }
+        const canvasRect = canvas.getBoundingClientRect();
+        const relativeX = event.clientX - canvasRect.left - 10;
+        const relativeY = event.clientY - canvasRect.top - 10;
+        // Snap position to grid
+        const snappedLeft = snapToGrid(relativeX);
+        const snappedTop = snapToGrid(relativeY);
+        // Create new sticky note
+        const store = getStore();
+        store.getState().createStickyNote({
+            left: snappedLeft,
+            top: snappedTop
+        });
+        event.preventDefault();
+        event.stopPropagation();
+    }
     render() {
         var _a, _b;
         // we have to embed our own style since we are in light DOM
@@ -397,35 +757,47 @@ export class Editor extends RapidElement {
         >
           <div id="canvas">
             ${this.definition
-            ? this.definition.nodes.map((node) => {
+            ? repeat(this.definition.nodes, (node) => node.uuid, (node) => {
                 var _a;
                 const position = this.definition._ui.nodes[node.uuid].position;
-                const dragging = this.isDragging && ((_a = this.currentDragItem) === null || _a === void 0 ? void 0 : _a.uuid) === node.uuid;
+                const dragging = this.isDragging &&
+                    ((_a = this.currentDragItem) === null || _a === void 0 ? void 0 : _a.uuid) === node.uuid;
+                const selected = this.selectedItems.has(node.uuid);
                 return html `<temba-flow-node
-                    class="draggable ${dragging ? 'dragging' : ''}"
-                    @mousedown=${this.handleMouseDown.bind(this)}
-                    uuid=${node.uuid}
-                    style="left:${position.left}px; top:${position.top}px"
-                    .plumber=${this.plumber}
-                    .node=${node}
-                    .ui=${this.definition._ui.nodes[node.uuid]}
-                  ></temba-flow-node>`;
+                      class="draggable ${dragging ? 'dragging' : ''} ${selected
+                    ? 'selected'
+                    : ''}"
+                      @mousedown=${this.handleMouseDown.bind(this)}
+                      uuid=${node.uuid}
+                      style="left:${position.left}px; top:${position.top}px"
+                      .plumber=${this.plumber}
+                      .node=${node}
+                      .ui=${this.definition._ui.nodes[node.uuid]}
+                      @temba-node-deleted=${(event) => {
+                    this.deleteNodes([event.detail.uuid]);
+                }}
+                    ></temba-flow-node>`;
             })
             : html `<temba-loading></temba-loading>`}
-            ${Object.entries(stickies).map(([uuid, sticky]) => {
+            ${repeat(Object.entries(stickies), ([uuid]) => uuid, ([uuid, sticky]) => {
             var _a;
             const position = sticky.position || { left: 0, top: 0 };
             const dragging = this.isDragging && ((_a = this.currentDragItem) === null || _a === void 0 ? void 0 : _a.uuid) === uuid;
+            const selected = this.selectedItems.has(uuid);
             return html `<temba-sticky-note
-                class="draggable ${dragging ? 'dragging' : ''}"
-                @mousedown=${this.handleMouseDown.bind(this)}
-                style="left:${position.left}px; top:${position.top}px; z-index: ${1000 +
+                  class="draggable ${dragging ? 'dragging' : ''} ${selected
+                ? 'selected'
+                : ''}"
+                  @mousedown=${this.handleMouseDown.bind(this)}
+                  style="left:${position.left}px; top:${position.top}px; z-index: ${1000 +
                 position.top}"
-                uuid=${uuid}
-                .data=${sticky}
-                .dragging=${dragging}
-              ></temba-sticky-note>`;
+                  uuid=${uuid}
+                  .data=${sticky}
+                  .dragging=${dragging}
+                  .selected=${selected}
+                ></temba-sticky-note>`;
         })}
+            ${this.renderSelectionBox()}
           </div>
         </div>
       </div>`;
@@ -452,4 +824,25 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "currentDragItem", void 0);
+__decorate([
+    state()
+], Editor.prototype, "selectedItems", void 0);
+__decorate([
+    state()
+], Editor.prototype, "isSelecting", void 0);
+__decorate([
+    state()
+], Editor.prototype, "selectionBox", void 0);
+__decorate([
+    state()
+], Editor.prototype, "targetId", void 0);
+__decorate([
+    state()
+], Editor.prototype, "sourceId", void 0);
+__decorate([
+    state()
+], Editor.prototype, "dragFromNodeId", void 0);
+__decorate([
+    state()
+], Editor.prototype, "isValidTarget", void 0);
 //# sourceMappingURL=Editor.js.map