@nyaruka/temba-components 0.133.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;
@@ -310,6 +316,7 @@ export class Editor extends RapidElement {
 
       #canvas > .dragging {
         z-index: 99999 !important;
+        transition: none !important;
       }
 
       body .jtk-endpoint {
@@ -1186,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) {
@@ -1333,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();
@@ -1657,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();
@@ -1715,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
@@ -1743,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]);
         });
       }
     }
@@ -2077,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 }> {
@@ -2841,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]}

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 {