@nyaruka/temba-components 0.133.0 → 0.134.1

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);
@@ -105,6 +106,7 @@ export class Editor extends RapidElement {
 
       #canvas > .dragging {
         z-index: 99999 !important;
+        transition: none !important;
       }
 
       body .jtk-endpoint {
@@ -912,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) {
@@ -1031,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();
         }
@@ -1297,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();
@@ -1347,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
@@ -1368,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]);
                 });
             }
         }
@@ -1606,12 +1697,10 @@ export class Editor extends RapidElement {
         // 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) {
@@ -2209,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]}