@nyaruka/temba-components 0.132.0 → 0.134.0

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

@@ -12,6 +12,7 @@ import { ACTION_CONFIG, NODE_CONFIG } from './config';
 import { ACTION_GROUP_METADATA } from './types';
 import { Plumber } from './Plumber';
 import { CanvasNode } from './CanvasNode';
+import { getNodeBounds, calculateReflowPositions, nodesOverlap } from './utils';
 export function snapToGrid(value) {
     const snapped = Math.round(value / 20) * 20;
     return Math.max(snapped, 0);
@@ -87,8 +88,6 @@ export class Editor extends RapidElement {
         );
         background-size: 20px 20px;
         background-position: 10px 10px;
-        box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.05);
-        border-top: 1px solid #e0e0e0;
         width: 100%;
         display: flex;
       }
@@ -107,6 +106,7 @@ export class Editor extends RapidElement {
 
       #canvas > .dragging {
         z-index: 99999 !important;
+        transition: none !important;
       }
 
       body .jtk-endpoint {
@@ -553,11 +553,18 @@ export class Editor extends RapidElement {
     saveChanges() {
         // post the flow definition to the server
         getStore()
-            .postJSON(`/flow/revisions/${this.flow}`, this.definition)
+            .postJSON(`/flow/revisions/${this.flow}/`, this.definition)
             .then((response) => {
-            // Update flow info with the response data
-            if (response.json && response.json.info) {
-                getStore().getState().setFlowInfo(response.json.info);
+            var _b;
+            // Update flow info and revision with the response data
+            if (response.json) {
+                const state = getStore().getState();
+                if (response.json.info) {
+                    state.setFlowInfo(response.json.info);
+                }
+                if (((_b = response.json.revision) === null || _b === void 0 ? void 0 : _b.revision) !== undefined) {
+                    state.setRevision(response.json.revision.revision);
+                }
             }
         })
             .catch((error) => {
@@ -604,6 +611,8 @@ export class Editor extends RapidElement {
         this.addEventListener(CustomEventType.AddActionRequested, this.handleAddActionRequested.bind(this));
         // Listen for node edit requests from flow nodes
         this.addEventListener(CustomEventType.NodeEditRequested, this.handleNodeEditRequested.bind(this));
+        // Listen for node deletion events
+        this.addEventListener(CustomEventType.NodeDeleted, this.handleNodeDeleted.bind(this));
         // Listen for canvas menu selections
         this.addEventListener(CustomEventType.Selection, (event) => {
             const target = event.target;
@@ -905,6 +914,60 @@ export class Editor extends RapidElement {
       </div>
     </div>`;
     }
+    /**
+     * Checks for node collisions and reflows nodes as needed.
+     * Nodes are only moved downward to resolve collisions.
+     *
+     * @param movedNodeUuids - UUIDs of nodes that were just moved/dropped
+     * @param droppedNodeUuid - UUID of the specific node that was dropped (if applicable)
+     * @param dropTargetBounds - Bounds of the node that was dropped onto (if applicable)
+     */
+    checkCollisionsAndReflow(movedNodeUuids, droppedNodeUuid = null, dropTargetBounds = null) {
+        var _b;
+        if (!this.definition)
+            return;
+        // Get all node bounds (only for actual nodes, not stickies)
+        const allBounds = [];
+        for (const node of this.definition.nodes) {
+            const nodeUI = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[node.uuid];
+            if (!(nodeUI === null || nodeUI === void 0 ? void 0 : nodeUI.position))
+                continue;
+            const bounds = getNodeBounds(node.uuid, nodeUI.position);
+            if (bounds) {
+                allBounds.push(bounds);
+            }
+        }
+        // Check if we need to determine midpoint priority for a dropped node
+        let targetHasPriority = false;
+        if (droppedNodeUuid && dropTargetBounds) {
+            const droppedBounds = allBounds.find((b) => b.uuid === droppedNodeUuid);
+            if (droppedBounds) {
+                // Check if the bottom of the dropped node is below the midpoint of the target
+                // If bottom is above midpoint, dropped node gets preference (targetHasPriority = false)
+                // If bottom is below midpoint, target gets preference (targetHasPriority = true)
+                const droppedBottom = droppedBounds.bottom;
+                const targetMidpoint = dropTargetBounds.top + dropTargetBounds.height / 2;
+                targetHasPriority = droppedBottom > targetMidpoint;
+            }
+        }
+        // Calculate reflow positions for each moved node
+        const allReflowPositions = {};
+        for (const movedUuid of movedNodeUuids) {
+            const movedBounds = allBounds.find((b) => b.uuid === movedUuid);
+            if (!movedBounds)
+                continue;
+            // Calculate reflow for this moved node
+            const reflowPositions = calculateReflowPositions(movedUuid, movedBounds, allBounds, droppedNodeUuid === movedUuid ? targetHasPriority : false);
+            // Merge into all reflow positions
+            for (const [uuid, position] of reflowPositions.entries()) {
+                allReflowPositions[uuid] = position;
+            }
+        }
+        // If there are positions to update, apply them
+        if (Object.keys(allReflowPositions).length > 0) {
+            getStore().getState().updateCanvasPositions(allReflowPositions);
+        }
+    }
     handleMouseMove(event) {
         // Handle selection box drawing
         if (this.canvasMouseDown && !this.isMouseDown) {
@@ -1024,9 +1087,48 @@ export class Editor extends RapidElement {
             });
             if (Object.keys(newPositions).length > 0) {
                 getStore().getState().updateCanvasPositions(newPositions);
-                setTimeout(() => {
-                    this.plumber.repaintEverything();
-                }, 0);
+                // Check for collisions and reflow nodes after updating positions
+                // Filter to only check nodes (not stickies)
+                const nodeUuids = itemsToMove.filter((uuid) => this.definition.nodes.find((node) => node.uuid === uuid));
+                if (nodeUuids.length > 0) {
+                    // Allow DOM to update before checking collisions
+                    setTimeout(() => {
+                        var _b, _c;
+                        // If only one node was moved, detect which node it might have been dropped onto
+                        let droppedNodeUuid = null;
+                        let dropTargetBounds = null;
+                        if (nodeUuids.length === 1) {
+                            droppedNodeUuid = nodeUuids[0];
+                            const droppedNodeUI = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[droppedNodeUuid];
+                            if (droppedNodeUI === null || droppedNodeUI === void 0 ? void 0 : droppedNodeUI.position) {
+                                const droppedBounds = getNodeBounds(droppedNodeUuid, droppedNodeUI.position);
+                                if (droppedBounds) {
+                                    // Find which node (if any) the dropped node overlaps with
+                                    for (const node of this.definition.nodes) {
+                                        if (node.uuid === droppedNodeUuid)
+                                            continue;
+                                        const nodeUI = (_c = this.definition._ui) === null || _c === void 0 ? void 0 : _c.nodes[node.uuid];
+                                        if (!(nodeUI === null || nodeUI === void 0 ? void 0 : nodeUI.position))
+                                            continue;
+                                        const targetBounds = getNodeBounds(node.uuid, nodeUI.position);
+                                        if (targetBounds &&
+                                            nodesOverlap(droppedBounds, targetBounds)) {
+                                            dropTargetBounds = targetBounds;
+                                            break; // Use the first overlapping node
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                        this.checkCollisionsAndReflow(nodeUuids, droppedNodeUuid, dropTargetBounds);
+                    }, 0);
+                }
+                else {
+                    // No nodes moved, just repaint connections
+                    setTimeout(() => {
+                        this.plumber.repaintEverything();
+                    }, 0);
+                }
             }
             this.selectedItems.clear();
         }
@@ -1255,6 +1357,12 @@ export class Editor extends RapidElement {
         this.editingNode = event.detail.node;
         this.editingNodeUI = event.detail.nodeUI;
     }
+    handleNodeDeleted(event) {
+        const nodeUuid = event.detail.uuid;
+        if (nodeUuid) {
+            this.deleteNodes([nodeUuid]);
+        }
+    }
     handleActionSaved(updatedAction) {
         var _b, _c;
         if (this.editingNode && this.editingAction) {
@@ -1284,23 +1392,18 @@ export class Editor extends RapidElement {
                 // Reset the creation flags
                 this.isCreatingNewNode = false;
                 this.pendingNodePosition = null;
-                // Repaint jsplumb connections
-                if (this.plumber) {
-                    requestAnimationFrame(() => {
-                        this.plumber.repaintEverything();
-                    });
-                }
+                // Check for collisions and reflow
+                requestAnimationFrame(() => {
+                    this.checkCollisionsAndReflow([updatedNode.uuid]);
+                });
             }
             else {
                 // Update existing node in the store
                 (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().updateNode(this.editingNode.uuid, updatedNode);
-                // Repaint jsplumb connections in case node size changed
-                if (this.plumber) {
-                    // Use requestAnimationFrame to ensure DOM has been updated first
-                    requestAnimationFrame(() => {
-                        this.plumber.repaintEverything();
-                    });
-                }
+                // Check for collisions and reflow in case node size changed
+                requestAnimationFrame(() => {
+                    this.checkCollisionsAndReflow([this.editingNode.uuid]);
+                });
             }
         }
         this.closeNodeEditor();
@@ -1334,6 +1437,10 @@ export class Editor extends RapidElement {
                 // Reset the creation flags
                 this.isCreatingNewNode = false;
                 this.pendingNodePosition = null;
+                // Check for collisions and reflow
+                requestAnimationFrame(() => {
+                    this.checkCollisionsAndReflow([updatedNode.uuid]);
+                });
             }
             else {
                 // This is an existing node - update it
@@ -1355,12 +1462,9 @@ export class Editor extends RapidElement {
                 if (uiConfig) {
                     (_d = getStore()) === null || _d === void 0 ? void 0 : _d.getState().updateNodeUIConfig(updatedNode.uuid, uiConfig);
                 }
-            }
-            // Repaint jsplumb connections in case node size changed
-            if (this.plumber) {
-                // Use requestAnimationFrame to ensure DOM has been updated first
+                // Check for collisions and reflow in case node size changed
                 requestAnimationFrame(() => {
-                    this.plumber.repaintEverything();
+                    this.checkCollisionsAndReflow([this.editingNode.uuid]);
                 });
             }
         }
@@ -1409,7 +1513,7 @@ export class Editor extends RapidElement {
         return { left, top };
     }
     handleActionDragExternal(event) {
-        const { action, nodeUuid, actionIndex, mouseX, mouseY, actionHeight = 60 } = event.detail;
+        const { action, nodeUuid, actionIndex, mouseX, mouseY, actionHeight = 60, isLastAction = false } = event.detail;
         // Check if mouse is over another execute_actions node
         const targetNode = this.getNodeAtPosition(mouseX, mouseY);
         if (targetNode && targetNode !== nodeUuid) {
@@ -1472,23 +1576,38 @@ export class Editor extends RapidElement {
             this.previousActionDragTargetNodeUuid = null;
         }
         this.actionDragTargetNodeUuid = null;
-        // Tell source node to hide ghost (we're not over a valid target)
         const sourceElement = this.querySelector(`temba-flow-node[data-node-uuid="${nodeUuid}"]`);
-        if (sourceElement) {
-            sourceElement.dispatchEvent(new CustomEvent('action-hide-ghost', {
-                detail: {},
-                bubbles: false
-            }));
+        // Show canvas drop preview only if this is NOT the last action
+        // Last actions can only be dropped on other nodes, not on canvas
+        if (!isLastAction) {
+            // Hide ghost when showing canvas preview (for canvas drops)
+            if (sourceElement) {
+                sourceElement.dispatchEvent(new CustomEvent('action-hide-ghost', {
+                    detail: {},
+                    bubbles: false
+                }));
+            }
+            // Don't snap to grid for preview - let it follow cursor smoothly
+            const position = this.calculateCanvasDropPosition(mouseX, mouseY, false);
+            this.canvasDropPreview = {
+                action,
+                nodeUuid,
+                actionIndex,
+                position,
+                actionHeight
+            };
+        }
+        else {
+            // For last action, keep ghost visible (can't drop on canvas)
+            if (sourceElement) {
+                sourceElement.dispatchEvent(new CustomEvent('action-show-ghost', {
+                    detail: {},
+                    bubbles: false
+                }));
+            }
+            // Clear any existing preview for last action
+            this.canvasDropPreview = null;
         }
-        // Don't snap to grid for preview - let it follow cursor smoothly
-        const position = this.calculateCanvasDropPosition(mouseX, mouseY, false);
-        this.canvasDropPreview = {
-            action,
-            nodeUuid,
-            actionIndex,
-            position,
-            actionHeight
-        };
         // Force re-render to update preview position
         this.requestUpdate();
     }
@@ -1508,8 +1627,8 @@ export class Editor extends RapidElement {
         this.actionDragTargetNodeUuid = null;
     }
     handleActionDropExternal(event) {
-        var _b, _c, _d;
-        const { action, nodeUuid, actionIndex, mouseX, mouseY } = event.detail;
+        var _b, _c;
+        const { action, nodeUuid, actionIndex, mouseX, mouseY, isLastAction = false } = event.detail;
         // Check if we're dropping on an existing execute_actions node
         const targetNodeUuid = this.actionDragTargetNodeUuid;
         if (targetNodeUuid && targetNodeUuid !== nodeUuid) {
@@ -1532,6 +1651,13 @@ export class Editor extends RapidElement {
             this.actionDragTargetNodeUuid = null;
             return;
         }
+        // If this is the last action and we're not dropping on another node, do nothing
+        // Last actions can only be moved to other nodes, not dropped on canvas
+        if (isLastAction) {
+            this.canvasDropPreview = null;
+            this.actionDragTargetNodeUuid = null;
+            return;
+        }
         // Not dropping on another node, create a new one on canvas
         // Snap to grid for the final drop position
         const position = this.calculateCanvasDropPosition(mouseX, mouseY, true);
@@ -1542,12 +1668,13 @@ export class Editor extends RapidElement {
         const updatedActions = originalNode.actions.filter((_a, idx) => idx !== actionIndex);
         // if no actions remain, delete the node
         if (updatedActions.length === 0) {
-            (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().removeNodes([nodeUuid]);
+            // Use deleteNodes to properly clean up Plumber connections before removing
+            this.deleteNodes([nodeUuid]);
         }
         else {
             // update the node
             const updatedNode = { ...originalNode, actions: updatedActions };
-            (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().updateNode(nodeUuid, updatedNode);
+            (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().updateNode(nodeUuid, updatedNode);
         }
         // create a new execute_actions node with the dropped action
         const newNode = {
@@ -1566,16 +1693,14 @@ export class Editor extends RapidElement {
             config: {}
         };
         // add the new node
-        (_d = getStore()) === null || _d === void 0 ? void 0 : _d.getState().addNode(newNode, newNodeUI);
+        (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().addNode(newNode, newNodeUI);
         // clear the preview
         this.canvasDropPreview = null;
         this.actionDragTargetNodeUuid = null;
-        // repaint connections
-        if (this.plumber) {
-            requestAnimationFrame(() => {
-                this.plumber.repaintEverything();
-            });
-        }
+        // Check for collisions and reflow after adding new node
+        requestAnimationFrame(() => {
+            this.checkCollisionsAndReflow([newNode.uuid]);
+        });
     }
     getLocalizationLanguages() {
         if (!this.definition) {
@@ -1975,7 +2100,7 @@ export class Editor extends RapidElement {
         header="Translations"
         .width=${360}
         .maxHeight=${600}
-        .top=${20}
+        .top=${170}
         color="#6b7280"
         .hidden=${this.localizationWindowHidden}
         @temba-dialog-hidden=${this.handleLocalizationWindowClosed}
@@ -2133,6 +2258,7 @@ export class Editor extends RapidElement {
         icon="language"
         label="Translate Flow"
         color="#6b7280"
+        top="180"
         .hidden=${!this.localizationWindowHidden}
         @temba-button-clicked=${this.handleLocalizationTabClick}
       ></temba-floating-tab>
@@ -2172,7 +2298,7 @@ export class Editor extends RapidElement {
                       @mousedown=${this.handleMouseDown.bind(this)}
                       uuid=${node.uuid}
                       data-node-uuid=${node.uuid}
-                      style="left:${position.left}px; top:${position.top}px"
+                      style="left:${position.left}px; top:${position.top}px;transition: all 0.2s ease-in-out;"
                       .plumber=${this.plumber}
                       .node=${node}
                       .ui=${this.definition._ui.nodes[node.uuid]}
@@ -2192,8 +2318,7 @@ export class Editor extends RapidElement {
                 ? 'selected'
                 : ''}"
                   @mousedown=${this.handleMouseDown.bind(this)}
-                  style="left:${position.left}px; top:${position.top}px; z-index: ${1000 +
-                position.top}"
+                  style="left:${position.left}px; top:${position.top}px;"
                   uuid=${uuid}
                   .data=${sticky}
                   .dragging=${dragging}