@nyaruka/temba-components 0.138.4 → 0.139.0

package/src/flow/Editor.ts

@@ -37,25 +37,26 @@ interface Revision {
 import { ACTION_GROUP_METADATA } from './types';
 import { Checkbox } from '../form/Checkbox';
 
-import { Plumber } from './Plumber';
+import {
+  Plumber,
+  calculateFlowchartPath,
+  ARROW_LENGTH,
+  ARROW_HALF_WIDTH,
+  CURSOR_GAP
+} from './Plumber';
 import { CanvasNode } from './CanvasNode';
 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
+  snapToGrid
 } from './utils';
 import { FloatingWindow } from '../layout/FloatingWindow';
 
-export function snapToGrid(value: number): number {
-  const snapped = Math.round(value / 20) * 20;
-  return Math.max(snapped, 0);
-}
-
 export function findNodeForExit(
   definition: FlowDefinition,
   exitUuid: string
@@ -122,7 +123,7 @@ 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;
   }
@@ -212,6 +213,10 @@ export class Editor extends RapidElement {
   @state()
   private isValidTarget = true;
 
+  // Canvas-relative source exit position (set at drag start)
+  private connectionSourceX: number | null = null;
+  private connectionSourceY: number | null = null;
+
   @state()
   private localizationWindowHidden = true;
 
@@ -294,6 +299,7 @@ export class Editor extends RapidElement {
   private connectionPlaceholder: {
     position: FlowPosition;
     visible: boolean;
+    dragUp?: boolean;
   } | null = null;
 
   // Track pending connection when dropping on canvas
@@ -401,100 +407,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 */
@@ -516,6 +478,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% {
@@ -585,7 +571,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 {
@@ -601,17 +586,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;
@@ -641,10 +615,6 @@ export class Editor extends RapidElement {
         border-radius: var(--curvature);
       }
 
-      .jtk-floating-endpoint {
-        pointer-events: none;
-      }
-
       .localization-window-content {
         display: flex;
         flex-direction: column;
@@ -852,17 +822,15 @@ export class Editor extends RapidElement {
       getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
     }
 
-    this.plumber.on('connection:drag', (connection: Connection) => {
-      // console.log('connection:drag', connection);
-      this.dragFromNodeId =
-        connection.data.nodeId ||
-        document.getElementById(connection.sourceId).closest('.node').id;
+    this.plumber.on('connection:drag', (connection: any) => {
+      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);
     });
 
@@ -898,6 +866,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;
@@ -909,12 +878,14 @@ export class Editor extends RapidElement {
         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'
@@ -950,6 +921,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;
@@ -1130,7 +1103,7 @@ export class Editor extends RapidElement {
       }
 
       this.activityTimer = window.setTimeout(() => {
-        // this.fetchActivityData();
+        this.fetchActivityData();
       }, this.activityInterval);
     });
   }
@@ -1570,86 +1543,71 @@ export class Editor extends RapidElement {
     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}`;
+    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: 'top' | 'left' | 'right' = dragUp
+        ? targetX < sourceX
+          ? 'left'
+          : 'right'
+        : 'top';
+
+      const pathData = calculateFlowchartPath(
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        20,
+        dragUp ? 0 : 10,
+        5,
+        routeFace
+      );
 
-        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>
-        `;
+      const aw = ARROW_HALF_WIDTH;
+      const al = ARROW_LENGTH;
+      let arrowPoints: string;
+      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}
@@ -1673,22 +1631,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.
    */
-  private checkCollisionsAndReflow(
-    movedNodeUuids: string[],
-    droppedNodeUuid: string | null = null,
-    dropTargetBounds: NodeBounds | null = null
-  ): void {
+  private checkCollisionsAndReflow(sacredNodeUuids: string[]): 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;
@@ -1699,45 +1648,17 @@ export class Editor extends RapidElement {
       }
     }
 
-    // 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
-      );
+    const reflowPositions = calculateReflowPositions(
+      sacredNodeUuids,
+      allBounds
+    );
 
-      // Merge into all reflow positions
+    if (reflowPositions.size > 0) {
+      const positions: { [uuid: string]: FlowPosition } = {};
       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);
     }
   }
 
@@ -1780,23 +1701,41 @@ export class Editor extends RapidElement {
         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: number;
+          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
           };
         }
       }
@@ -1924,49 +1863,7 @@ export class Editor extends RapidElement {
         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
-            );
+            this.checkCollisionsAndReflow(nodeUuids);
           }, 0);
         } else {
           // No nodes moved, just repaint connections
@@ -2091,6 +1988,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 {
       // Show node type selector
@@ -2126,6 +2025,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;
     }
@@ -2362,6 +2263,8 @@ export class Editor extends RapidElement {
           this.pendingCanvasConnection = null;
           this.connectionPlaceholder = null;
           this.sourceId = null;
+          this.connectionSourceX = null;
+          this.connectionSourceY = null;
           this.dragFromNodeId = null;
         }
 
@@ -2431,6 +2334,8 @@ export class Editor extends RapidElement {
           this.pendingCanvasConnection = null;
           this.connectionPlaceholder = null;
           this.sourceId = null;
+          this.connectionSourceX = null;
+          this.connectionSourceY = null;
           this.dragFromNodeId = null;
         }
 
@@ -3430,7 +3335,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>
@@ -3728,7 +3633,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>