@nyaruka/temba-components 0.129.3 → 0.129.5

package/src/flow/{EditorNode.ts → CanvasNode.ts}

@@ -1,5 +1,6 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
-import { EDITOR_CONFIG, UIConfig } from './config';
+import { repeat } from 'lit/directives/repeat.js';
+import { ACTION_CONFIG, ActionConfig, NODE_CONFIG, NodeConfig } from './config';
 import { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
@@ -8,7 +9,9 @@ import { Plumber } from './Plumber';
 import { getStore } from '../store/Store';
 import { CustomEventType } from '../interfaces';
 
-export class EditorNode extends RapidElement {
+const DRAG_THRESHOLD = 5;
+
+export class CanvasNode extends RapidElement {
   createRenderRoot() {
     return this;
   }
@@ -34,6 +37,15 @@ export class EditorNode extends RapidElement {
   // Set of action UUIDs that are in the removing state
   private actionRemovingState: Set<string> = new Set();
 
+  // Track action click state to distinguish from drag
+  private actionClickStartPos: { x: number; y: number } | null = null;
+  private pendingActionClick: { action: Action; event: MouseEvent } | null =
+    null;
+
+  // Track node click state to distinguish from drag
+  private nodeClickStartPos: { x: number; y: number } | null = null;
+  private pendingNodeClick: { event: MouseEvent } | null = null;
+
   static get styles() {
     return css`
 
@@ -49,6 +61,11 @@ export class EditorNode extends RapidElement {
 
       }
 
+      /* Cap width for execute_actions nodes */
+      .node.execute-actions {
+        max-width: 200px;
+      }
+
       .node:hover {
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
       }
@@ -60,8 +77,8 @@ export class EditorNode extends RapidElement {
       }
 
       .action {
-        max-width: 200px;
         position: relative;
+        font-size: 13px;
       }
 
       .action .remove-button {
@@ -83,18 +100,40 @@ export class EditorNode extends RapidElement {
         z-index: 10;
       }
 
-      .action:hover .remove-button {
+      .action:hover .remove-button,
+      .router:hover .remove-button {
         display: flex;
       }
 
-      .action.removing .title {
+      .action.removing .title,
+      .router .title.removing {
         background-color: var(--color-error, #dc3545) !important;
       }
 
-      .action.removing .title .name {
+      .action.removing .title .name,
+      .router .title.removing .name {
         color: white;
       }
 
+      .router .remove-button {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: var(--color-error, #dc3545);
+        color: white;
+        border: none;
+        cursor: pointer;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        line-height: 1;
+        z-index: 10;
+      }
+
       .action.sortable {
         display: flex;
         align-items: stretch;
@@ -104,10 +143,17 @@ export class EditorNode extends RapidElement {
         flex-grow: 1;
         display: flex;
         flex-direction: column;
+        min-width: 0; /* Allow flex item to shrink below its content size */
+        overflow: hidden;
       }
 
       .action .body {
-        padding: 1em;
+        padding: 0.75em;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        hyphens: auto;
+        white-space: normal;
+        overflow: hidden;
       }
 
       .action .drag-handle {
@@ -183,6 +229,10 @@ export class EditorNode extends RapidElement {
       .category .title {
         font-weight: normal;
         font-size: 1em;
+        max-width: 150px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .router .body {
@@ -292,10 +342,14 @@ export class EditorNode extends RapidElement {
   ): void {
     super.updated(changes);
     if (changes.has('node')) {
-      // make our initial connections
-      if (changes.get('node') === undefined) {
+      // Only proceed if plumber is available (for tests that don't set it up)
+      if (this.plumber) {
+        this.plumber.removeNodeConnections(this.node.uuid);
+        // make our initial connections
         for (const exit of this.node.exits) {
           if (!exit.destination_uuid) {
+            // if we have no destination, then we are a source
+            // so make our source endpoint
             this.plumber.makeSource(exit.uuid);
           } else {
             this.plumber.connectIds(
@@ -305,17 +359,21 @@ export class EditorNode extends RapidElement {
             );
           }
         }
+
+        this.plumber.revalidate([this.node.uuid]);
       }
 
       const ele = this.parentElement;
-      const rect = ele.getBoundingClientRect();
-
-      getStore()
-        ?.getState()
-        .expandCanvas(
-          this.ui.position.left + rect.width,
-          this.ui.position.top + rect.height
-        );
+      if (ele) {
+        const rect = ele.getBoundingClientRect();
+
+        getStore()
+          ?.getState()
+          .expandCanvas(
+            this.ui.position.left + rect.width,
+            this.ui.position.top + rect.height
+          );
+      }
     }
   }
 
@@ -480,6 +538,55 @@ export class EditorNode extends RapidElement {
     }
   }
 
+  private handleNodeRemoveClick(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const nodeId = this.node.uuid;
+
+    // If the node is already in removing state, perform the removal
+    if (this.actionRemovingState.has(nodeId)) {
+      this.removeNode();
+      return;
+    }
+
+    // Start removal UI state
+    this.actionRemovingState.add(nodeId);
+    this.requestUpdate();
+
+    // Clear any existing timeout for this node
+    if (this.actionRemovalTimeouts.has(nodeId)) {
+      clearTimeout(this.actionRemovalTimeouts.get(nodeId));
+    }
+
+    // Set timeout to reset UI if user doesn't click
+    const timeoutId = window.setTimeout(() => {
+      this.actionRemovingState.delete(nodeId);
+      this.actionRemovalTimeouts.delete(nodeId);
+      this.requestUpdate();
+    }, 1000); // 1 second as per requirements
+
+    this.actionRemovalTimeouts.set(nodeId, timeoutId);
+  }
+
+  private removeNode() {
+    const nodeId = this.node.uuid;
+
+    // Clear the UI state
+    this.actionRemovingState.delete(nodeId);
+
+    // Clear any timeout
+    if (this.actionRemovalTimeouts.has(nodeId)) {
+      clearTimeout(this.actionRemovalTimeouts.get(nodeId));
+      this.actionRemovalTimeouts.delete(nodeId);
+    }
+
+    // Fire the node deleted event
+    this.fireCustomEvent(CustomEventType.NodeDeleted, {
+      uuid: this.node.uuid
+    });
+  }
+
   private handleActionOrderChanged(event: CustomEvent) {
     const [fromIdx, toIdx] = event.detail.swap;
 
@@ -498,7 +605,197 @@ export class EditorNode extends RapidElement {
       .updateNode(this.node.uuid, { ...this.node, actions: newActions });
   }
 
-  private renderTitle(config: UIConfig, isRemoving: boolean = false) {
+  private handleActionMouseDown(event: MouseEvent, action: Action): void {
+    // Don't handle clicks on the remove button or when action is in removing state
+    const target = event.target as HTMLElement;
+    if (
+      target.closest('.remove-button') ||
+      this.actionRemovingState.has(action.uuid)
+    ) {
+      return;
+    }
+
+    // Store the starting position and action for later comparison
+    // Don't prevent default - let the Editor's drag system work normally
+    this.actionClickStartPos = { x: event.clientX, y: event.clientY };
+    this.pendingActionClick = { action, event };
+  }
+
+  private handleActionMouseUp(event: MouseEvent, action: Action): void {
+    // Don't handle if we don't have a pending click or if it's not the same action
+    if (
+      !this.pendingActionClick ||
+      this.pendingActionClick.action.uuid !== action.uuid
+    ) {
+      this.actionClickStartPos = null;
+      this.pendingActionClick = null;
+      return;
+    }
+
+    // Don't handle clicks on the remove button or when action is in removing state
+    const target = event.target as HTMLElement;
+    if (
+      target.closest('.remove-button') ||
+      this.actionRemovingState.has(action.uuid)
+    ) {
+      this.actionClickStartPos = null;
+      this.pendingActionClick = null;
+      return;
+    }
+
+    // Check if the mouse moved beyond the drag threshold
+    if (this.actionClickStartPos) {
+      const deltaX = event.clientX - this.actionClickStartPos.x;
+      const deltaY = event.clientY - this.actionClickStartPos.y;
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+      // Check if the Editor is currently in dragging mode
+      const editor = this.closest('temba-flow-editor') as any;
+      const editorWasDragging = editor?.dragging;
+
+      // Only fire the action edit event if we haven't dragged beyond the threshold
+      // AND either there's no Editor parent (test case) or the Editor didn't drag the node
+      if (distance <= DRAG_THRESHOLD && (!editor || !editorWasDragging)) {
+        // Fire event to request action editing
+        this.fireCustomEvent(CustomEventType.ActionEditRequested, {
+          action,
+          nodeUuid: this.node.uuid
+        });
+      }
+    }
+
+    // Clean up
+    this.actionClickStartPos = null;
+    this.pendingActionClick = null;
+  }
+
+  private handleActionClick(event: MouseEvent, action: Action): void {
+    // This method is kept for backward compatibility but should not be used
+    // The new mousedown/mouseup approach handles click vs drag properly
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Don't handle clicks on the remove button or when action is in removing state
+    const target = event.target as HTMLElement;
+    if (
+      target.closest('.remove-button') ||
+      this.actionRemovingState.has(action.uuid)
+    ) {
+      return;
+    }
+
+    // Fire event to request action editing
+    this.fireCustomEvent(CustomEventType.ActionEditRequested, {
+      action,
+      nodeUuid: this.node.uuid
+    });
+  }
+
+  private handleNodeEditClick(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Don't handle clicks on the remove button or when node is in removing state
+    const target = event.target as HTMLElement;
+    if (
+      target.closest('.remove-button') ||
+      this.actionRemovingState.has(this.node.uuid)
+    ) {
+      return;
+    }
+
+    // Fire node edit requested event if the node has a router
+    if (this.node.router) {
+      // If router node has exactly one action, open the action editor directly
+      if (this.node.actions && this.node.actions.length === 1) {
+        this.fireCustomEvent(CustomEventType.ActionEditRequested, {
+          action: this.node.actions[0],
+          nodeUuid: this.node.uuid
+        });
+      } else {
+        // Otherwise open the node editor as before
+        this.fireCustomEvent(CustomEventType.NodeEditRequested, {
+          node: this.node,
+          nodeUI: this.ui
+        });
+      }
+    }
+  }
+
+  private handleNodeMouseDown(event: MouseEvent): void {
+    // Don't handle clicks on the remove button or when node is in removing state
+    const target = event.target as HTMLElement;
+    if (
+      target.closest('.remove-button') ||
+      this.actionRemovingState.has(this.node.uuid)
+    ) {
+      return;
+    }
+
+    // Store the starting position for later comparison
+    // Don't prevent default - let the Editor's drag system work normally
+    this.nodeClickStartPos = { x: event.clientX, y: event.clientY };
+    this.pendingNodeClick = { event };
+  }
+
+  private handleNodeMouseUp(event: MouseEvent): void {
+    // Don't handle if we don't have a pending click
+    if (!this.pendingNodeClick) {
+      this.nodeClickStartPos = null;
+      this.pendingNodeClick = null;
+      return;
+    }
+
+    // Don't handle clicks on the remove button or when node is in removing state
+    const target = event.target as HTMLElement;
+    if (
+      target.closest('.remove-button') ||
+      this.actionRemovingState.has(this.node.uuid)
+    ) {
+      this.nodeClickStartPos = null;
+      this.pendingNodeClick = null;
+      return;
+    }
+
+    // Check if the mouse moved beyond the drag threshold
+    if (this.nodeClickStartPos) {
+      const deltaX = event.clientX - this.nodeClickStartPos.x;
+      const deltaY = event.clientY - this.nodeClickStartPos.y;
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+      // Check if the Editor is currently in dragging mode
+      const editor = this.closest('temba-flow-editor') as any;
+      const editorWasDragging = editor?.dragging;
+
+      // Only fire the node edit event if we haven't dragged beyond the threshold
+      // AND either there's no Editor parent (test case) or the Editor didn't drag the node
+      if (distance <= 5 && (!editor || !editorWasDragging)) {
+        // Using literal 5 instead of DRAG_THRESHOLD since it's not imported
+        // Fire event to request node editing if the node has a router
+        if (this.node.router) {
+          // If router node has exactly one action, open the action editor directly
+          if (this.node.actions && this.node.actions.length === 1) {
+            this.fireCustomEvent(CustomEventType.ActionEditRequested, {
+              action: this.node.actions[0],
+              nodeUuid: this.node.uuid
+            });
+          } else {
+            // Otherwise open the node editor as before
+            this.fireCustomEvent(CustomEventType.NodeEditRequested, {
+              node: this.node,
+              nodeUI: this.ui
+            });
+          }
+        }
+      }
+    }
+
+    // Clean up
+    this.nodeClickStartPos = null;
+    this.pendingNodeClick = null;
+  }
+
+  private renderTitle(config: ActionConfig, isRemoving: boolean = false) {
     return html`<div class="title" style="background:${config.color}">
       ${this.node?.actions?.length > 1
         ? html`<temba-icon class="drag-handle" name="sort"></temba-icon>`
@@ -508,8 +805,17 @@ export class EditorNode extends RapidElement {
     </div>`;
   }
 
+  private renderNodeTitle(config: NodeConfig, isRemoving: boolean = false) {
+    return html`<div
+      class="title ${isRemoving ? 'removing' : ''}"
+      style="background:${config.color}"
+    >
+      <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
+    </div>`;
+  }
+
   private renderAction(node: Node, action: Action, index: number) {
-    const config = EDITOR_CONFIG[action.type];
+    const config = ACTION_CONFIG[action.type];
     const isRemoving = this.actionRemovingState.has(action.uuid);
 
     if (config) {
@@ -525,7 +831,12 @@ export class EditorNode extends RapidElement {
         >
           ✕
         </button>
-        <div class="action-content">
+        <div
+          class="action-content"
+          @mousedown=${(e: MouseEvent) => this.handleActionMouseDown(e, action)}
+          @mouseup=${(e: MouseEvent) => this.handleActionMouseUp(e, action)}
+          style="cursor: pointer;"
+        >
           ${this.renderTitle(config, isRemoving)}
           <div class="body">
             ${config.render
@@ -552,12 +863,39 @@ export class EditorNode extends RapidElement {
   }
 
   private renderRouter(router: Router, ui: NodeUI) {
-    const config = EDITOR_CONFIG[ui.type];
-    if (config) {
-      return html`<div class="router">
-        ${this.renderTitle(config, false)}
+    const nodeConfig = NODE_CONFIG[ui.type];
+    if (nodeConfig) {
+      // For tests that call renderRouter directly without setting this.node
+      const hasActions = this.node ? this.node.actions.length > 0 : false;
+      const isRemoving =
+        this.node &&
+        this.node.actions.length === 0 &&
+        this.actionRemovingState.has(this.node.uuid);
+
+      return html`<div class="router" style="position: relative;">
+        ${!hasActions
+          ? html` <button
+                class="remove-button"
+                @click=${(e: MouseEvent) => this.handleNodeRemoveClick(e)}
+                title="Remove node"
+              >
+                ✕
+              </button>
+              <div
+                @mousedown=${(e: MouseEvent) => this.handleNodeMouseDown(e)}
+                @mouseup=${(e: MouseEvent) => this.handleNodeMouseUp(e)}
+                style="cursor: pointer;"
+              >
+                ${this.renderNodeTitle(nodeConfig, isRemoving)}
+              </div>`
+          : ''}
         ${router.result_name
-          ? html`<div class="body">
+          ? html`<div
+              class="body"
+              @mousedown=${(e: MouseEvent) => this.handleNodeMouseDown(e)}
+              @mouseup=${(e: MouseEvent) => this.handleNodeMouseUp(e)}
+              style="cursor: pointer;"
+            >
               Save as
               <div class="result-name">${router.result_name}</div>
             </div>`
@@ -570,18 +908,28 @@ export class EditorNode extends RapidElement {
     if (!node.router || !node.router.categories) {
       return null;
     }
-    const categories = node.router.categories.map((category) => {
-      const exit = node.exits.find(
-        (exit: Exit) => exit.uuid == category.exit_uuid
-      );
-
-      return html`<div class="category">
-        <div class="title">${category.name}</div>
-        ${this.renderExit(exit)}
-      </div>`;
-    });
 
-    return html`<div class="categories">${categories}</div>`;
+    return html`<div class="categories">
+      ${repeat(
+        node.router.categories,
+        (category) => category.uuid,
+        (category) => {
+          const exit = node.exits.find(
+            (exit: Exit) => exit.uuid == category.exit_uuid
+          );
+
+          return html`<div
+            class="category"
+            @mousedown=${(e: MouseEvent) => this.handleNodeMouseDown(e)}
+            @mouseup=${(e: MouseEvent) => this.handleNodeMouseUp(e)}
+            style="cursor: pointer;"
+          >
+            <div class="title">${category.name}</div>
+            ${this.renderExit(exit)}
+          </div>`;
+        }
+      )}
+    </div>`;
   }
 
   private renderExit(exit: Exit): TemplateResult {
@@ -603,29 +951,57 @@ export class EditorNode extends RapidElement {
       return html`<div class="node">Loading...</div>`;
     }
 
+    const nodeConfig = NODE_CONFIG[this.ui.type];
+
     return html`
       <div
         id="${this.node.uuid}"
-        class="node"
+        class="node ${this.ui.type === 'execute_actions'
+          ? 'execute-actions'
+          : ''}"
         style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
       >
         ${this.node.actions.length > 0
-          ? html`<temba-sortable-list
-              dragHandle="drag-handle"
-              @temba-order-changed="${this.handleActionOrderChanged}"
-            >
-              ${this.node.actions.map((actionSpec, index) => {
-                return this.renderAction(this.node, actionSpec, index);
-              })}
-            </temba-sortable-list>`
+          ? this.ui.type === 'execute_actions'
+            ? html`<temba-sortable-list
+                dragHandle="drag-handle"
+                @temba-order-changed="${this.handleActionOrderChanged}"
+              >
+                ${repeat(
+                  this.node.actions,
+                  (action) => action.uuid,
+                  (action, index) => this.renderAction(this.node, action, index)
+                )}
+              </temba-sortable-list>`
+            : html`${repeat(
+                this.node.actions,
+                (action) => action.uuid,
+                (action, index) => this.renderAction(this.node, action, index)
+              )}`
+          : !this.node.router && nodeConfig && nodeConfig.name
+          ? html`<div class="router" style="position: relative;">
+              <button
+                class="remove-button"
+                @click=${(e: MouseEvent) => this.handleNodeRemoveClick(e)}
+                title="Remove node"
+              >
+                ✕
+              </button>
+              ${this.renderNodeTitle(
+                nodeConfig,
+                this.actionRemovingState.has(this.node.uuid)
+              )}
+            </div>`
           : ''}
         ${this.node.router
           ? html` ${this.renderRouter(this.node.router, this.ui)}
             ${this.renderCategories(this.node)}`
           : html`<div class="action-exits">
-              ${this.node.exits.map((exit) => {
-                return this.renderExit(exit);
-              })}
+              ${repeat(
+                this.node.exits,
+                (exit) => exit.uuid,
+                (exit) => this.renderExit(exit)
+              )}
             </div>`}
       </div>
     `;