@nyaruka/temba-components 0.138.6 → 0.139.0

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

@@ -10,13 +10,9 @@ import { CustomEventType } from '../interfaces';
 import { generateUUID, postJSON, fetchResults, getClasses } from '../utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 import { ACTION_GROUP_METADATA } from './types';
-import { Plumber } from './Plumber';
+import { Plumber, calculateFlowchartPath, ARROW_LENGTH, ARROW_HALF_WIDTH, CURSOR_GAP } 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);
-}
+import { getNodeBounds, calculateReflowPositions, snapToGrid } from './utils';
 export function findNodeForExit(definition, exitUuid) {
     for (const node of definition.nodes) {
         const exit = node.exits.find((e) => e.uuid === exitUuid);
@@ -34,7 +30,7 @@ const AUTO_TRANSLATE_MODELS_ENDPOINT = '/api/internal/llms.json';
 const DROP_PREVIEW_OFFSET_X = 20;
 const DROP_PREVIEW_OFFSET_Y = 20;
 export class Editor extends RapidElement {
-    // unfortunately, jsplumb requires that we be in light DOM
+    // connection SVGs are appended directly to the canvas, so we need light DOM
     createRenderRoot() {
         return this;
     }
@@ -128,100 +124,56 @@ export class Editor extends RapidElement {
       }
 
       #grid.viewing-revision temba-flow-node,
-      #grid.viewing-revision svg.jtk-connector,
-      #grid.viewing-revision .activity-overlay {
+      #grid.viewing-revision svg.plumb-connector {
         opacity: 0.5;
       }
 
-      body .jtk-endpoint {
-        width: initial;
-        height: initial;
-      }
-
-      .jtk-endpoint {
-        z-index: 600;
-        opacity: 0;
-      }
-
-      .plumb-source {
-        z-index: 600;
-        cursor: pointer;
-        opacity: 0;
-      }
-
-      .plumb-source.connected {
-        border-radius: 50%;
-        pointer-events: none;
+      svg.plumb-connector {
+        z-index: 10;
       }
 
-      .plumb-source circle {
-        fill: purple;
+      svg.plumb-connector path {
+        stroke: var(--color-connectors);
+        stroke-width: 3px;
       }
 
-      .plumb-target {
-        z-index: 600;
-        opacity: 0;
-        cursor: pointer;
-        fill: transparent;
+      svg.plumb-connector .plumb-arrow {
+        fill: var(--color-connectors);
+        stroke: none;
       }
 
-      body svg.jtk-connector.plumb-connector path {
-        stroke: var(--color-connectors) !important;
-        stroke-width: 3px;
+      svg.plumb-connector.hover path {
+        stroke: var(--color-success);
       }
 
-      body .plumb-connector {
-        z-index: 10 !important;
+      svg.plumb-connector.hover .plumb-arrow {
+        fill: var(--color-success);
       }
 
-      body .plumb-connector .plumb-arrow {
-        fill: var(--color-connectors);
+      #canvas.read-only-connections svg.plumb-connector.hover path {
         stroke: var(--color-connectors);
-        stroke-width: 0px !important;
-        margin-top: 6px;
-        z-index: 10;
-      }
-
-      body svg.jtk-connector.jtk-hover path {
-        stroke: var(--color-success) !important;
-        stroke-width: 3px;
       }
 
-      body #canvas.read-only-connections svg.jtk-connector.jtk-hover path {
-        stroke: var(--color-connectors) !important;
+      #canvas.read-only-connections svg.plumb-connector.hover .plumb-arrow {
+        fill: var(--color-connectors);
       }
 
-      body .plumb-connector.jtk-hover .plumb-arrow {
-        fill: var(--color-success) !important;
-        stroke-width: 0px;
-        z-index: 10;
+      #canvas.read-only-connections svg.plumb-connector,
+      #canvas.read-only-connections svg.plumb-connector * {
+        pointer-events: none !important;
+        cursor: default !important;
       }
 
-      body
-        #canvas.read-only-connections
-        .plumb-connector.jtk-hover
-        .plumb-arrow {
-        fill: var(--color-connectors) !important;
-        ponter-events: none;
+      svg.plumb-connector.removing path {
+        stroke: var(--color-error);
       }
 
-      body #canvas.read-only-connections svg {
-        pointer-events: none;
+      svg.plumb-connector.removing .plumb-arrow {
+        fill: var(--color-error);
       }
 
-      /* Activity overlays on connections */
-      .jtk-overlay.activity-overlay {
-        background: #f3f3f3;
-        border: 1px solid #d9d9d9;
-        color: #333;
-        border-radius: 4px;
-        padding: 2px 4px;
-        font-size: 10px;
-        font-weight: 600;
-        line-height: 0.9;
-        cursor: pointer;
-        z-index: 500;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      svg.plumb-connector.dragging {
+        z-index: 99999;
       }
 
       /* Active contact count on nodes */
@@ -243,6 +195,30 @@ export class Editor extends RapidElement {
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
       }
 
+      /* Activity overlay badges on connection exit stubs */
+      .activity-overlay {
+        position: absolute;
+        background: #f3f3f3;
+        border: 1px solid #d9d9d9;
+        color: #333;
+        border-radius: 4px;
+        padding: 2px 4px;
+        font-size: 10px;
+        font-weight: 600;
+        line-height: 0.9;
+        cursor: pointer;
+        z-index: 500;
+        pointer-events: auto;
+        white-space: nowrap;
+        user-select: none;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      #grid.viewing-revision .activity-overlay {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
       /* Recent contacts popup */
       @keyframes popupBounceIn {
         0% {
@@ -312,7 +288,6 @@ export class Editor extends RapidElement {
 
       .recent-contacts-popup .contact-name:hover {
         text-decoration: underline;
-        color: var(--color-link-primary, #1d4ed8);
       }
 
       .recent-contacts-popup .contact-operand {
@@ -328,17 +303,6 @@ export class Editor extends RapidElement {
         color: #999;
       }
 
-      /* 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;
@@ -368,10 +332,6 @@ export class Editor extends RapidElement {
         border-radius: var(--curvature);
       }
 
-      .jtk-floating-endpoint {
-        pointer-events: none;
-      }
-
       .localization-window-content {
         display: flex;
         flex-direction: column;
@@ -587,6 +547,9 @@ export class Editor extends RapidElement {
         this.dragFromNodeId = null;
         this.originalConnectionTargetId = null;
         this.isValidTarget = true;
+        // Canvas-relative source exit position (set at drag start)
+        this.connectionSourceX = null;
+        this.connectionSourceY = null;
         this.localizationWindowHidden = true;
         this.translationFilters = {
             categories: false
@@ -635,15 +598,13 @@ export class Editor extends RapidElement {
             getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
         }
         this.plumber.on('connection:drag', (connection) => {
-            // console.log('connection:drag', connection);
-            this.dragFromNodeId =
-                connection.data.nodeId ||
-                    document.getElementById(connection.sourceId).closest('.node').id;
+            this.dragFromNodeId = connection.data.nodeId;
             this.sourceId = connection.sourceId;
+            this.connectionSourceX = connection.sourceX;
+            this.connectionSourceY = connection.sourceY;
             this.originalConnectionTargetId = connection.target.id;
         });
         this.plumber.on('connection:abort', (info) => {
-            // console.log('Connection aborted', info);
             this.makeConnection(info);
         });
         this.plumber.on('connection:detach', (info) => {
@@ -672,6 +633,7 @@ export class Editor extends RapidElement {
                 left: snapToGrid(this.connectionPlaceholder.position.left),
                 top: snapToGrid(this.connectionPlaceholder.position.top)
             };
+            const isDragUp = !!this.connectionPlaceholder.dragUp;
             // Update the placeholder to the snapped position
             this.connectionPlaceholder.position = snappedPosition;
             // Store the pending connection info
@@ -680,12 +642,14 @@ export class Editor extends RapidElement {
                 exitId: this.sourceId,
                 position: snappedPosition
             };
-            // Show the context menu just below the placeholder
+            // Show the context menu near the placeholder
             const canvas = this.querySelector('#canvas');
             if (canvas) {
                 const canvasRect = canvas.getBoundingClientRect();
-                const menuX = canvasRect.left + snappedPosition.left - 40; // center horizontally
-                const menuY = canvasRect.top + snappedPosition.top + 80; // just below placeholder
+                const menuX = canvasRect.left + snappedPosition.left - 40;
+                const menuY = isDragUp
+                    ? canvasRect.top + snappedPosition.top + 74 // just below placeholder bottom
+                    : canvasRect.top + snappedPosition.top + 80; // just below placeholder
                 const canvasMenu = this.querySelector('temba-canvas-menu');
                 if (canvasMenu) {
                     canvasMenu.show(menuX, menuY, {
@@ -706,6 +670,8 @@ export class Editor extends RapidElement {
         // Clear connection state (but keep sourceId/dragFromNodeId if we have a pending connection)
         if (!this.pendingCanvasConnection) {
             this.sourceId = null;
+            this.connectionSourceX = null;
+            this.connectionSourceY = null;
             this.dragFromNodeId = null;
         }
         this.targetId = null;
@@ -862,7 +828,7 @@ export class Editor extends RapidElement {
                 clearTimeout(this.activityTimer);
             }
             this.activityTimer = window.setTimeout(() => {
-                // this.fetchActivityData();
+                this.fetchActivityData();
             }, this.activityInterval);
         });
     }
@@ -1219,72 +1185,52 @@ export class Editor extends RapidElement {
     renderConnectionPlaceholder() {
         if (!this.connectionPlaceholder || !this.connectionPlaceholder.visible)
             return '';
-        const { position } = this.connectionPlaceholder;
+        const { position, dragUp } = this.connectionPlaceholder;
         // Render connection line when we have a pending connection (after drop)
         let svgPath = null;
-        if (this.sourceId && this.dragFromNodeId && this.pendingCanvasConnection) {
-            const sourceElement = document.getElementById(this.sourceId);
-            if (sourceElement) {
-                const sourceRect = sourceElement.getBoundingClientRect();
-                const canvas = this.querySelector('#canvas');
-                const canvasRect = canvas.getBoundingClientRect();
-                // Source point (bottom center of exit)
-                const sourceX = sourceRect.left + sourceRect.width / 2 - canvasRect.left;
-                const sourceY = sourceRect.bottom - canvasRect.top;
-                // Target point (top center of placeholder)
-                const targetX = position.left + 100; // 100 is half the placeholder width (200px)
-                const targetY = position.top;
-                // Use jsPlumb FlowchartConnector parameters: stub [20, 10], cornerRadius 5
-                const stubStart = 20;
-                const stubEnd = 10;
-                const cornerRadius = 5;
-                // Calculate flowchart path with corners
-                const verticalStart = sourceY + stubStart;
-                const verticalEnd = targetY - stubEnd;
-                const midY = (verticalStart + verticalEnd) / 2;
-                // Build path with rounded corners (flowchart style)
-                let pathData = `M ${sourceX} ${sourceY} L ${sourceX} ${verticalStart}`;
-                if (sourceX !== targetX) {
-                    // Horizontal segment needed
-                    if (Math.abs(verticalEnd - verticalStart) > cornerRadius * 2) {
-                        // Enough space for corners
-                        pathData += ` L ${sourceX} ${midY - cornerRadius}`;
-                        pathData += ` Q ${sourceX} ${midY}, ${sourceX + (targetX > sourceX ? cornerRadius : -cornerRadius)} ${midY}`;
-                        pathData += ` L ${targetX - (targetX > sourceX ? cornerRadius : -cornerRadius)} ${midY}`;
-                        pathData += ` Q ${targetX} ${midY}, ${targetX} ${midY + cornerRadius}`;
-                        pathData += ` L ${targetX} ${verticalEnd}`;
-                    }
-                    else {
-                        // Direct horizontal transition
-                        pathData += ` L ${targetX} ${verticalStart}`;
-                        pathData += ` L ${targetX} ${verticalEnd}`;
-                    }
-                }
-                else {
-                    // Straight vertical line
-                    pathData += ` L ${targetX} ${verticalEnd}`;
-                }
-                pathData += ` L ${targetX} ${targetY}`;
-                svgPath = html `
-          <svg
-            style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"
-          >
-            <path
-              d="${pathData}"
-              fill="none"
-              stroke="var(--color-connectors, #ccc)"
-              stroke-width="3"
-              class="plumb-connector"
-            />
-            <polygon
-              points="${targetX},${targetY} ${targetX - 6.5},${targetY -
-                    13} ${targetX + 6.5},${targetY - 13}"
-              fill="var(--color-connectors, #ccc)"
-              class="plumb-arrow"
-            />
-          </svg>
-        `;
+        if (this.sourceId &&
+            this.dragFromNodeId &&
+            this.pendingCanvasConnection &&
+            this.connectionSourceX != null &&
+            this.connectionSourceY != null) {
+            const sourceX = this.connectionSourceX;
+            const sourceY = this.connectionSourceY;
+            const targetX = position.left + 100;
+            // When dragging up, connect to the placeholder bottom; otherwise to the top
+            const targetY = dragUp ? position.top + 64 : position.top;
+            const routeFace = dragUp
+                ? targetX < sourceX
+                    ? 'left'
+                    : 'right'
+                : 'top';
+            const pathData = calculateFlowchartPath(sourceX, sourceY, targetX, targetY, 20, dragUp ? 0 : 10, 5, routeFace);
+            const aw = ARROW_HALF_WIDTH;
+            const al = ARROW_LENGTH;
+            let arrowPoints;
+            if (dragUp) {
+                // Arrow tip pointing up, base at placeholder bottom
+                arrowPoints = `${targetX},${targetY - al} ${targetX - aw},${targetY} ${targetX + aw},${targetY}`;
+            }
+            else {
+                // Arrow pointing down into top of placeholder
+                arrowPoints = `${targetX},${targetY} ${targetX - aw},${targetY - al} ${targetX + aw},${targetY - al}`;
             }
+            svgPath = html `
+        <svg
+          style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"
+        >
+          <path
+            d="${pathData}"
+            fill="none"
+            stroke="var(--color-connectors, #ccc)"
+            stroke-width="3"
+          />
+          <polygon
+            points="${arrowPoints}"
+            fill="var(--color-connectors, #ccc)"
+          />
+        </svg>
+      `;
         }
         return html `${svgPath}
       <div
@@ -1306,17 +1252,13 @@ export class Editor extends RapidElement {
     }
     /**
      * 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)
+     * Sacred nodes (just moved/dropped) keep their positions while
+     * other nodes are moved in the least-disruptive direction.
      */
-    checkCollisionsAndReflow(movedNodeUuids, droppedNodeUuid = null, dropTargetBounds = null) {
+    checkCollisionsAndReflow(sacredNodeUuids) {
         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];
@@ -1327,35 +1269,13 @@ export class Editor extends RapidElement {
                 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
+        const reflowPositions = calculateReflowPositions(sacredNodeUuids, allBounds);
+        if (reflowPositions.size > 0) {
+            const positions = {};
             for (const [uuid, position] of reflowPositions.entries()) {
-                allReflowPositions[uuid] = position;
+                positions[uuid] = position;
             }
-        }
-        // If there are positions to update, apply them
-        if (Object.keys(allReflowPositions).length > 0) {
-            getStore().getState().updateCanvasPositions(allReflowPositions);
+            getStore().getState().updateCanvasPositions(positions);
         }
     }
     handleMouseMove(event) {
@@ -1390,21 +1310,37 @@ export class Editor extends RapidElement {
                 this.targetId = null;
                 this.isValidTarget = true;
                 // Show connection placeholder when over empty canvas
-                // Calculate position: horizontally centered at mouse, vertically just below mouse
                 const canvas = this.querySelector('#canvas');
                 if (canvas) {
                     const canvasRect = canvas.getBoundingClientRect();
                     const relativeX = event.clientX - canvasRect.left;
                     const relativeY = event.clientY - canvasRect.top;
-                    // offset the placeholder so it's centered horizontally and just below the mouse
-                    const placeholderWidth = 200; // approximate node width
-                    const placeholderOffset = 20; // distance below mouse cursor
+                    const placeholderWidth = 200;
+                    const placeholderHeight = 64;
+                    const arrowLength = ARROW_LENGTH;
+                    const cursorGap = CURSOR_GAP;
+                    // Determine if cursor is above the source exit using stored sourceY
+                    const dragUp = this.connectionSourceY != null
+                        ? relativeY < this.connectionSourceY
+                        : false;
+                    let top;
+                    if (dragUp) {
+                        // Arrow points up: tip at cy + cursorGap.
+                        // Placeholder bottom should sit just above the arrow tip.
+                        top = relativeY + cursorGap - placeholderHeight;
+                    }
+                    else {
+                        // Arrow points down: tip at cy - cursorGap + arrowLength.
+                        // Placeholder top sits just below the arrow tip.
+                        top = relativeY - cursorGap + arrowLength;
+                    }
                     this.connectionPlaceholder = {
                         position: {
                             left: relativeX - placeholderWidth / 2,
-                            top: relativeY + placeholderOffset
+                            top
                         },
-                        visible: true
+                        visible: true,
+                        dragUp
                     };
                 }
             }
@@ -1505,34 +1441,7 @@ export class Editor extends RapidElement {
                 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);
+                        this.checkCollisionsAndReflow(nodeUuids);
                     }, 0);
                 }
                 else {
@@ -1642,6 +1551,8 @@ export class Editor extends RapidElement {
             this.pendingCanvasConnection = null;
             this.connectionPlaceholder = null;
             this.sourceId = null;
+            this.connectionSourceX = null;
+            this.connectionSourceY = null;
             this.dragFromNodeId = null;
         }
         else {
@@ -1669,6 +1580,8 @@ export class Editor extends RapidElement {
             this.pendingCanvasConnection = null;
             this.connectionPlaceholder = null;
             this.sourceId = null;
+            this.connectionSourceX = null;
+            this.connectionSourceY = null;
             this.dragFromNodeId = null;
             this.originalConnectionTargetId = null;
         }
@@ -1856,6 +1769,8 @@ export class Editor extends RapidElement {
                     this.pendingCanvasConnection = null;
                     this.connectionPlaceholder = null;
                     this.sourceId = null;
+                    this.connectionSourceX = null;
+                    this.connectionSourceY = null;
                     this.dragFromNodeId = null;
                 }
                 // Reset the creation flags
@@ -1910,6 +1825,8 @@ export class Editor extends RapidElement {
                     this.pendingCanvasConnection = null;
                     this.connectionPlaceholder = null;
                     this.sourceId = null;
+                    this.connectionSourceX = null;
+                    this.connectionSourceY = null;
                     this.dragFromNodeId = null;
                 }
                 // Reset the creation flags
@@ -2655,7 +2572,7 @@ export class Editor extends RapidElement {
         icon="revisions"
         label="Revisions"
         color="rgb(142, 94, 167)"
-        top="105"
+        order="1"
         .hidden=${!this.revisionsWindowHidden && this.localizationWindowHidden}
         @temba-button-clicked=${this.handleRevisionsTabClick}
       ></temba-floating-tab>
@@ -2926,7 +2843,7 @@ export class Editor extends RapidElement {
         icon="language"
         label="Translate Flow"
         color="#6b7280"
-        top="180"
+        order="2"
         .hidden=${!this.localizationWindowHidden}
         @temba-button-clicked=${this.handleLocalizationTabClick}
       ></temba-floating-tab>