@nyaruka/temba-components 0.132.0 → 0.134.0

package/src/flow/Editor.ts

@@ -24,6 +24,12 @@ import { Dialog } from '../layout/Dialog';
 import { Connection } from '@jsplumb/browser-ui';
 import { CanvasMenu, CanvasMenuSelection } from './CanvasMenu';
 import { NodeTypeSelector, NodeTypeSelection } from './NodeTypeSelector';
+import {
+  getNodeBounds,
+  calculateReflowPositions,
+  NodeBounds,
+  nodesOverlap
+} from './utils';
 
 export function snapToGrid(value: number): number {
   const snapped = Math.round(value / 20) * 20;
@@ -292,8 +298,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;
       }
@@ -312,6 +316,7 @@ export class Editor extends RapidElement {
 
       #canvas > .dragging {
         z-index: 99999 !important;
+        transition: none !important;
       }
 
       body .jtk-endpoint {
@@ -741,11 +746,19 @@ export class Editor extends RapidElement {
   private saveChanges(): void {
     // 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);
+        // 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 (response.json.revision?.revision !== undefined) {
+            state.setRevision(response.json.revision.revision);
+          }
         }
       })
       .catch((error) => {
@@ -812,6 +825,12 @@ export class Editor extends RapidElement {
       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: CustomEvent) => {
       const target = event.target as HTMLElement;
@@ -1174,6 +1193,76 @@ export class Editor extends RapidElement {
     </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)
+   */
+  private checkCollisionsAndReflow(
+    movedNodeUuids: string[],
+    droppedNodeUuid: string | null = null,
+    dropTargetBounds: NodeBounds | null = null
+  ): void {
+    if (!this.definition) return;
+
+    // Get all node bounds (only for actual nodes, not stickies)
+    const allBounds: NodeBounds[] = [];
+
+    for (const node of this.definition.nodes) {
+      const nodeUI = this.definition._ui?.nodes[node.uuid];
+      if (!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: { [uuid: string]: FlowPosition } = {};
+
+    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);
+    }
+  }
+
   private handleMouseMove(event: MouseEvent): void {
     // Handle selection box drawing
     if (this.canvasMouseDown && !this.isMouseDown) {
@@ -1321,9 +1410,65 @@ 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(() => {
+            // If only one node was moved, detect which node it might have been dropped onto
+            let droppedNodeUuid: string | null = null;
+            let dropTargetBounds: NodeBounds | null = null;
+
+            if (nodeUuids.length === 1) {
+              droppedNodeUuid = nodeUuids[0];
+              const droppedNodeUI = this.definition._ui?.nodes[droppedNodeUuid];
+
+              if (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 = this.definition._ui?.nodes[node.uuid];
+                    if (!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();
@@ -1599,6 +1744,13 @@ export class Editor extends RapidElement {
     this.editingNodeUI = event.detail.nodeUI;
   }
 
+  private handleNodeDeleted(event: CustomEvent): void {
+    const nodeUuid = event.detail.uuid;
+    if (nodeUuid) {
+      this.deleteNodes([nodeUuid]);
+    }
+  }
+
   private handleActionSaved(updatedAction: Action): void {
     if (this.editingNode && this.editingAction) {
       let updatedActions: Action[];
@@ -1638,23 +1790,18 @@ export class Editor extends RapidElement {
         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
         getStore()?.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();
@@ -1696,6 +1843,11 @@ 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
         // Clean up jsPlumb connections for removed exits before updating the node
@@ -1724,13 +1876,10 @@ export class Editor extends RapidElement {
         if (uiConfig) {
           getStore()?.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]);
         });
       }
     }
@@ -1801,7 +1950,8 @@ export class Editor extends RapidElement {
       actionIndex,
       mouseX,
       mouseY,
-      actionHeight = 60
+      actionHeight = 60,
+      isLastAction = false
     } = event.detail;
 
     // Check if mouse is over another execute_actions node
@@ -1896,29 +2046,47 @@ export class Editor extends RapidElement {
 
     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
-        })
-      );
-    }
 
-    // Don't snap to grid for preview - let it follow cursor smoothly
-    const position = this.calculateCanvasDropPosition(mouseX, mouseY, 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
+          })
+        );
+      }
 
-    this.canvasDropPreview = {
-      action,
-      nodeUuid,
-      actionIndex,
-      position,
-      actionHeight
-    };
+      // 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;
+    }
 
     // Force re-render to update preview position
     this.requestUpdate();
@@ -1946,7 +2114,14 @@ export class Editor extends RapidElement {
   }
 
   private handleActionDropExternal(event: CustomEvent): void {
-    const { action, nodeUuid, actionIndex, mouseX, mouseY } = event.detail;
+    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;
@@ -1977,6 +2152,14 @@ export class Editor extends RapidElement {
       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);
@@ -1991,7 +2174,8 @@ export class Editor extends RapidElement {
 
     // if no actions remain, delete the node
     if (updatedActions.length === 0) {
-      getStore()?.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 };
@@ -2023,12 +2207,10 @@ export class Editor extends RapidElement {
     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]);
+    });
   }
 
   private getLocalizationLanguages(): Array<{ code: string; name: string }> {
@@ -2573,7 +2755,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}
@@ -2738,6 +2920,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>
@@ -2786,7 +2969,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]}
@@ -2810,8 +2993,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}

package/src/flow/utils.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { NamedObject } from '../store/flow-definition';
+import { NamedObject, FlowPosition } from '../store/flow-definition';
 
 /**
  * Renders a single line item with optional icon
@@ -168,3 +168,209 @@ export const SCHEMES: Scheme[] = [
     path: 'External ID'
   }
 ];
+
+/**
+ * Represents the bounding box of a node on the canvas
+ */
+export interface NodeBounds {
+  uuid: string;
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * Minimum vertical spacing between nodes (in pixels)
+ */
+const MIN_NODE_SPACING = 30;
+
+/**
+ * Small buffer to avoid floating point precision issues in overlap detection (in pixels)
+ * This prevents false positives when nodes are exactly adjacent (e.g., bottom of one node
+ * at exactly the same position as top of another)
+ */
+const OVERLAP_BUFFER = 10;
+
+/**
+ * Gets the bounding box for a node from the DOM
+ *
+ * @param nodeUuid - The UUID of the node
+ * @param position - The current position of the node
+ * @param element - Optional pre-fetched DOM element (recommended for performance when checking multiple nodes)
+ * @returns NodeBounds object or null if element not found
+ *
+ * Note: When element is not provided, performs a DOM query which may impact performance
+ * during bulk collision detection. Consider fetching elements beforehand when possible.
+ */
+export const getNodeBounds = (
+  nodeUuid: string,
+  position: FlowPosition,
+  element?: HTMLElement
+): NodeBounds | null => {
+  // If element is provided, use it; otherwise try to find it in DOM
+  const nodeElement =
+    element || (document.querySelector(`[id="${nodeUuid}"]`) as HTMLElement);
+
+  if (!nodeElement) {
+    return null;
+  }
+
+  const rect = nodeElement.getBoundingClientRect();
+  const width = rect.width;
+  const height = rect.height;
+
+  return {
+    uuid: nodeUuid,
+    left: position.left,
+    top: position.top,
+    right: position.left + width,
+    bottom: position.top + height,
+    width,
+    height
+  };
+};
+
+/**
+ * Checks if two node bounding boxes overlap
+ */
+export const nodesOverlap = (
+  bounds1: NodeBounds,
+  bounds2: NodeBounds
+): boolean => {
+  // Use a small buffer to avoid floating point precision issues
+  const buffer = OVERLAP_BUFFER;
+
+  return !(
+    bounds1.right <= bounds2.left - buffer ||
+    bounds1.left >= bounds2.right + buffer ||
+    bounds1.bottom <= bounds2.top - buffer ||
+    bounds1.top >= bounds2.bottom + buffer
+  );
+};
+
+/**
+ * Detects all collisions between a node and other nodes
+ */
+export const detectCollisions = (
+  targetBounds: NodeBounds,
+  allBounds: NodeBounds[]
+): NodeBounds[] => {
+  return allBounds.filter(
+    (bounds) =>
+      bounds.uuid !== targetBounds.uuid && nodesOverlap(targetBounds, bounds)
+  );
+};
+
+/**
+ * Calculates the new positions needed to resolve all collisions
+ * Nodes are only moved downward, never up, left, or right
+ * Returns a map of node UUIDs to their new positions
+ */
+export const calculateReflowPositions = (
+  movedNodeUuid: string,
+  movedNodeBounds: NodeBounds,
+  allBounds: NodeBounds[],
+  droppedBelowMidpoint: boolean = false
+): Map<string, FlowPosition> => {
+  const newPositions = new Map<string, FlowPosition>();
+
+  // If dropped below midpoint, the moved node should move down instead
+  if (droppedBelowMidpoint) {
+    // Find all nodes that collide with the moved node
+    const collisions = detectCollisions(movedNodeBounds, allBounds);
+
+    if (collisions.length > 0) {
+      // Find the highest bottom position of all colliding nodes
+      const maxBottom = Math.max(...collisions.map((b) => b.bottom));
+
+      // Move the dropped node below all colliding nodes
+      const newTop = maxBottom + MIN_NODE_SPACING;
+      newPositions.set(movedNodeUuid, {
+        left: movedNodeBounds.left,
+        top: newTop
+      });
+
+      // Update the moved node bounds for further collision checks
+      movedNodeBounds = {
+        ...movedNodeBounds,
+        top: newTop,
+        bottom: newTop + movedNodeBounds.height
+      };
+    }
+  }
+
+  // Now check for any remaining collisions and move other nodes down
+  const processedNodes = new Set<string>();
+  processedNodes.add(movedNodeUuid);
+
+  // Keep checking for collisions until none remain
+  let hasCollisions = true;
+  let iterations = 0;
+  const maxIterations = 100; // Prevent infinite loops
+
+  while (hasCollisions && iterations < maxIterations) {
+    hasCollisions = false;
+    iterations++;
+
+    // Check all nodes for collisions
+    for (const bounds of allBounds) {
+      if (processedNodes.has(bounds.uuid)) {
+        continue;
+      }
+
+      // Use original bounds since we skip already processed nodes
+      const currentBounds = bounds;
+
+      // Check if this node collides with the moved node or any already repositioned nodes
+      let collisionFound = false;
+      let maxCollisionBottom = 0;
+
+      // Check against moved node
+      if (nodesOverlap(currentBounds, movedNodeBounds)) {
+        collisionFound = true;
+        maxCollisionBottom = Math.max(
+          maxCollisionBottom,
+          movedNodeBounds.bottom
+        );
+      }
+
+      // Check against other repositioned nodes
+      for (const [otherUuid, otherPosition] of newPositions.entries()) {
+        if (otherUuid === bounds.uuid) continue;
+
+        const otherBounds = allBounds.find((b) => b.uuid === otherUuid);
+        if (!otherBounds) continue;
+
+        const otherUpdatedBounds = {
+          ...otherBounds,
+          top: otherPosition.top,
+          bottom: otherPosition.top + otherBounds.height
+        };
+
+        if (nodesOverlap(currentBounds, otherUpdatedBounds)) {
+          collisionFound = true;
+          maxCollisionBottom = Math.max(
+            maxCollisionBottom,
+            otherUpdatedBounds.bottom
+          );
+        }
+      }
+
+      if (collisionFound) {
+        // Move this node down below the collision
+        const newTop = maxCollisionBottom + MIN_NODE_SPACING;
+        newPositions.set(bounds.uuid, {
+          left: bounds.left,
+          top: newTop
+        });
+        hasCollisions = true;
+        processedNodes.add(bounds.uuid);
+      }
+    }
+  }
+
+  return newPositions;
+};

package/src/interfaces.ts

@@ -103,6 +103,13 @@ export interface Msg {
   direction: string;
   type: string;
   attachments: string[];
+  unsendable_reason?:
+    | 'no_route'
+    | 'contact_blocked'
+    | 'contact_stopped'
+    | 'contact_archived'
+    | 'org_suspended'
+    | 'looping';
 }
 
 export interface ObjectReference {

package/src/layout/FloatingWindow.ts

@@ -18,7 +18,7 @@ export class FloatingWindow extends RapidElement {
         transition: transform var(--transition-duration, 300ms) ease-in-out,
           opacity var(--transition-duration, 300ms) ease-in-out;
         position: fixed;
-        z-index: 9999;
+        z-index: 5000;
         top: 100px;
         background: white;
         border-radius: 8px;
@@ -193,8 +193,6 @@ export class FloatingWindow extends RapidElement {
   ): void {
     super.updated(changes);
     if (changes.has('hidden')) {
-      this.classList.toggle('hidden', this.hidden);
-
       // when hiding, reset positioning behavior to original
       if (this.hidden && !changes.get('hidden')) {
         if (this.defaultLeft === -1) {