@nyaruka/temba-components 0.141.1 → 0.142.0

package/src/flow/NodeEditor.ts

@@ -221,7 +221,7 @@ export class NodeEditor extends RapidElement {
       }
 
       .form-group-content {
-        padding: 6px;
+        padding: var(--group-content-padding, 6px);
         display: flex;
         flex-direction: column;
         gap: 15px;
@@ -233,8 +233,8 @@ export class NodeEditor extends RapidElement {
 
       .form-group-content.collapsed {
         max-height: 0;
-        padding-top: 0;
-        padding-bottom: 0;
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
         opacity: 0;
       }
 
@@ -335,7 +335,7 @@ export class NodeEditor extends RapidElement {
       }
 
       .gutter-fields temba-select {
-        min-width: 120px;
+        min-width: 150px;
       }
 
       .optional-field-link {
@@ -1770,6 +1770,7 @@ export class NodeEditor extends RapidElement {
       collapsible = false,
       collapsed = false,
       helpText,
+      contentPadding,
       getGroupValueCount
     } = groupConfig;
 
@@ -1887,6 +1888,9 @@ export class NodeEditor extends RapidElement {
         </div>
         <div
           class="form-group-content ${isCollapsed ? 'collapsed' : 'expanded'}"
+          style="${contentPadding
+            ? `--group-content-padding: ${contentPadding}`
+            : ''}"
         >
           ${items.map((item) =>
             this.renderLayoutItem(item, config, renderedFields)

package/src/flow/Plumber.ts

@@ -1,3 +1,5 @@
+import { isRightClick } from './utils';
+
 export type TargetFace = 'top' | 'left' | 'right';
 
 // Shared arrow/drag constants used by both Plumber and Editor
@@ -196,6 +198,7 @@ export class Plumber {
   private showContactsTimeout: number | null = null;
 
   public connectionDragging = false;
+  public zoom = 1.0;
 
   constructor(canvas: HTMLElement, editor: any) {
     this.canvas = canvas;
@@ -246,7 +249,7 @@ export class Plumber {
     const DRAG_THRESHOLD = 5;
 
     const onMouseDown = (e: MouseEvent) => {
-      if (e.button !== 0) return;
+      if (isRightClick(e)) return;
 
       // Don't start drag from exit if it already has a connection —
       // existing connections are picked up from the arrowhead instead
@@ -356,15 +359,17 @@ export class Plumber {
 
   // --- Anchor point distribution ---
 
+  /** Convert a viewport-to-canvas rect difference to canvas coordinates */
+  private toCanvas(viewportDiff: number): number {
+    return viewportDiff / this.zoom;
+  }
+
   private determineTargetFace(
     sourceX: number,
     sourceY: number,
-    targetRect: DOMRect,
-    canvasRect: DOMRect
+    targetCenterX: number,
+    targetTop: number
   ): TargetFace {
-    const targetCenterX =
-      targetRect.left + targetRect.width / 2 - canvasRect.left;
-    const targetTop = targetRect.top - canvasRect.top;
     const verticalGap = targetTop - sourceY;
 
     // Top face requires enough vertical room for the exit stub, entry stub,
@@ -396,14 +401,23 @@ export class Plumber {
 
     if (fromRect.width === 0 || toRect.width === 0) return null;
 
-    const sourceX = fromRect.left + fromRect.width / 2 - canvasRect.left;
-    const sourceY = fromRect.bottom - canvasRect.top;
+    // All coordinates are converted to canvas space by dividing by zoom
+    const sourceX = this.toCanvas(
+      fromRect.left + fromRect.width / 2 - canvasRect.left
+    );
+    const sourceY = this.toCanvas(fromRect.bottom - canvasRect.top);
+
+    // Pre-compute target canvas-space values for determineTargetFace
+    const toCenterX = this.toCanvas(
+      toRect.left + toRect.width / 2 - canvasRect.left
+    );
+    const toTopCanvas = this.toCanvas(toRect.top - canvasRect.top);
 
     const targetFace = this.determineTargetFace(
       sourceX,
       sourceY,
-      toRect,
-      canvasRect
+      toCenterX,
+      toTopCanvas
     );
 
     // Find all connections targeting the same node, grouped by face
@@ -417,14 +431,17 @@ export class Plumber {
         const connFromEl = document.getElementById(conn.fromId);
         if (connFromEl) {
           const connFromRect = connFromEl.getBoundingClientRect();
-          const connSourceX =
-            connFromRect.left + connFromRect.width / 2 - canvasRect.left;
-          const connSourceY = connFromRect.bottom - canvasRect.top;
+          const connSourceX = this.toCanvas(
+            connFromRect.left + connFromRect.width / 2 - canvasRect.left
+          );
+          const connSourceY = this.toCanvas(
+            connFromRect.bottom - canvasRect.top
+          );
           const face = this.determineTargetFace(
             connSourceX,
             connSourceY,
-            toRect,
-            canvasRect
+            toCenterX,
+            toTopCanvas
           );
           if (!faceConnections.has(face)) {
             faceConnections.set(face, []);
@@ -451,11 +468,11 @@ export class Plumber {
     const index = faceGroup.findIndex((e) => e.fromId === fromId);
     const count = faceGroup.length;
 
-    // Calculate anchor point on the chosen face
-    const targetLeft = toRect.left - canvasRect.left;
-    const targetTop = toRect.top - canvasRect.top;
-    const targetW = toRect.width;
-    const targetH = toRect.height;
+    // Calculate anchor point on the chosen face (all in canvas space)
+    const targetLeft = this.toCanvas(toRect.left - canvasRect.left);
+    const targetTop = toTopCanvas;
+    const targetW = this.toCanvas(toRect.width);
+    const targetH = this.toCanvas(toRect.height);
 
     let targetX: number;
     let targetY: number;
@@ -504,18 +521,27 @@ export class Plumber {
           if (connFromEl && connToEl) {
             const connFromRect = connFromEl.getBoundingClientRect();
             const connToRect = connToEl.getBoundingClientRect();
-            const connSourceX =
-              connFromRect.left + connFromRect.width / 2 - canvasRect.left;
-            const connSourceY = connFromRect.bottom - canvasRect.top;
+            const connSourceX = this.toCanvas(
+              connFromRect.left + connFromRect.width / 2 - canvasRect.left
+            );
+            const connSourceY = this.toCanvas(
+              connFromRect.bottom - canvasRect.top
+            );
+            const connToCenterX = this.toCanvas(
+              connToRect.left + connToRect.width / 2 - canvasRect.left
+            );
+            const connToTop = this.toCanvas(connToRect.top - canvasRect.top);
             const connFace = this.determineTargetFace(
               connSourceX,
               connSourceY,
-              connToRect,
-              canvasRect
+              connToCenterX,
+              connToTop
             );
             if (connFace === 'top') {
-              const connTargetLeft = connToRect.left - canvasRect.left;
-              const connTargetW = connToRect.width;
+              const connTargetLeft = this.toCanvas(
+                connToRect.left - canvasRect.left
+              );
+              const connTargetW = this.toCanvas(connToRect.width);
               siblings.push({
                 fromId: conn.fromId,
                 targetX: connTargetLeft + connTargetW / 2
@@ -689,7 +715,7 @@ export class Plumber {
     // Make arrowhead draggable for picking up existing connections
     const DRAG_THRESHOLD = 5;
     const onArrowMouseDown = (e: MouseEvent) => {
-      if (e.button !== 0) return;
+      if (isRightClick(e)) return;
       e.stopPropagation();
 
       const startX = e.clientX;
@@ -1195,8 +1221,10 @@ export class Plumber {
 
     const canvasRect = this.canvas.getBoundingClientRect();
     const exitRect = exitEl.getBoundingClientRect();
-    const sourceX = exitRect.left + exitRect.width / 2 - canvasRect.left;
-    const sourceY = exitRect.bottom - canvasRect.top;
+    const sourceX = this.toCanvas(
+      exitRect.left + exitRect.width / 2 - canvasRect.left
+    );
+    const sourceY = this.toCanvas(exitRect.bottom - canvasRect.top);
 
     const aw = ARROW_HALF_WIDTH;
     const al = ARROW_LENGTH;
@@ -1252,16 +1280,18 @@ export class Plumber {
       }
     };
 
-    // Initial path to cursor
-    const cursorX = e.clientX - canvasRect.left;
-    const cursorY = e.clientY - canvasRect.top;
+    // Initial path to cursor (convert viewport to canvas coordinates)
+    const cursorX = this.toCanvas(e.clientX - canvasRect.left);
+    const cursorY = this.toCanvas(e.clientY - canvasRect.top);
     updateDragPath(cursorX, cursorY);
 
     this.connectionDragging = true;
 
     const onMove = (me: MouseEvent) => {
-      const cx = me.clientX - canvasRect.left;
-      const cy = me.clientY - canvasRect.top;
+      // Re-read canvasRect each move since scroll may have changed
+      const rect = this.canvas.getBoundingClientRect();
+      const cx = this.toCanvas(me.clientX - rect.left);
+      const cy = this.toCanvas(me.clientY - rect.top);
       updateDragPath(cx, cy);
     };
 

package/src/flow/actions/send_msg.ts

@@ -63,7 +63,6 @@ export const send_msg: ActionConfig = {
     },
     runtime_attachments: {
       type: 'array',
-      helpText: 'Add dynamic attachments using expressions',
       itemLabel: 'Attachment',
       sortable: true,
       maxItems: 10,
@@ -73,6 +72,7 @@ export const send_msg: ActionConfig = {
       itemConfig: {
         type: {
           type: 'select',
+          width: '140px',
           options: [
             { value: 'image', name: 'Image' },
             { value: 'audio', name: 'Audio' },
@@ -113,6 +113,7 @@ export const send_msg: ActionConfig = {
       collapsible: true,
       collapsed: true,
       helpText: 'Add dynamic attachments that are evaluated at runtime',
+      contentPadding: '12px',
       getGroupValueCount: (formData: FormData) => {
         return (
           formData.runtime_attachments?.filter(

package/src/flow/nodes/wait_for_response.ts

@@ -101,7 +101,7 @@ export const wait_for_response: NodeConfig = {
       type: 'select',
       placeholder: '5 minutes',
       multi: false,
-      maxWidth: '100px',
+      maxWidth: '130px',
       flavor: 'xsmall',
       options: TIMEOUT_OPTIONS,