@nyaruka/temba-components 0.131.0 → 0.131.2

package/src/flow/CanvasNode.ts

@@ -1,6 +1,7 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { ACTION_CONFIG, ActionConfig, NODE_CONFIG, NodeConfig } from './config';
+import { ACTION_GROUP_METADATA, SPLIT_GROUP_METADATA } from './types';
 import { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
@@ -46,6 +47,18 @@ export class CanvasNode extends RapidElement {
   private nodeClickStartPos: { x: number; y: number } | null = null;
   private pendingNodeClick: { event: MouseEvent } | null = null;
 
+  // Track the height of the action being dragged (captured at drag start)
+  private draggedActionHeight: number = 0;
+
+  // Track external action drag (action being dragged from another node)
+  private externalDragInfo: {
+    action: Action;
+    sourceNodeUuid: string;
+    actionIndex: number;
+    dropIndex: number;
+    actionHeight: number;
+  } | null = null;
+
   static get styles() {
     return css`
 
@@ -160,7 +173,7 @@ export class CanvasNode extends RapidElement {
         pointer-events: auto; /* Ensure drag handle can receive events */
       }
       .title-spacer {
-        width: 2em;
+        width: 1.8em;
         
       }
 
@@ -339,12 +352,79 @@ export class CanvasNode extends RapidElement {
         border-top-left-radius: var(--curvature);
         border-top-right-radius: var(--curvature);
       }
+
+      /* Add action button */
+      .add-action-button {
+        position: absolute;
+        bottom: 0.5em;
+        right: 0.5em;
+        width: 1.5em;
+        height: 1.5em;
+        border-radius: 50%;
+        background: var(--color-primary, #3b82f6);
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 200ms ease-in-out;
+        z-index: 10;
+        pointer-events: auto;
+        font-size: 0.9em;
+      }
+
+      .node.execute-actions:hover .add-action-button {
+        opacity: 0.8;
+      }
+
+      .add-action-button:hover {
+        opacity: 1 !important;
+        transform: scale(1.1);
+      }
   }`;
   }
 
   constructor() {
     super();
     this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);
+    this.handleActionDragStart = this.handleActionDragStart.bind(this);
+    this.handleActionDragExternal = this.handleActionDragExternal.bind(this);
+    this.handleActionDragInternal = this.handleActionDragInternal.bind(this);
+    this.handleActionDragStop = this.handleActionDragStop.bind(this);
+    this.handleExternalActionDragOver =
+      this.handleExternalActionDragOver.bind(this);
+    this.handleExternalActionDrop = this.handleExternalActionDrop.bind(this);
+    this.handleExternalActionDragLeave =
+      this.handleExternalActionDragLeave.bind(this);
+    this.handleActionShowGhost = this.handleActionShowGhost.bind(this);
+    this.handleActionHideGhost = this.handleActionHideGhost.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Listen for external action drag events from Editor
+    this.addEventListener(
+      'action-drag-over',
+      this.handleExternalActionDragOver as EventListener
+    );
+    this.addEventListener(
+      'action-drop',
+      this.handleExternalActionDrop as EventListener
+    );
+    this.addEventListener(
+      'action-drag-leave',
+      this.handleExternalActionDragLeave as EventListener
+    );
+    this.addEventListener(
+      'action-show-ghost',
+      this.handleActionShowGhost as EventListener
+    );
+    this.addEventListener(
+      'action-hide-ghost',
+      this.handleActionHideGhost as EventListener
+    );
   }
 
   protected updated(
@@ -391,6 +471,28 @@ export class CanvasNode extends RapidElement {
     // Remove the event listener when the component is removed
     super.disconnectedCallback();
 
+    // Remove external drag event listeners
+    this.removeEventListener(
+      'action-drag-over',
+      this.handleExternalActionDragOver as EventListener
+    );
+    this.removeEventListener(
+      'action-drop',
+      this.handleExternalActionDrop as EventListener
+    );
+    this.removeEventListener(
+      'action-drag-leave',
+      this.handleExternalActionDragLeave as EventListener
+    );
+    this.removeEventListener(
+      'action-show-ghost',
+      this.handleActionShowGhost as EventListener
+    );
+    this.removeEventListener(
+      'action-hide-ghost',
+      this.handleActionHideGhost as EventListener
+    );
+
     // Clear any pending exit removal timeouts
     this.exitRemovalTimeouts.forEach((timeoutId) => {
       clearTimeout(timeoutId);
@@ -615,6 +717,82 @@ export class CanvasNode extends RapidElement {
       .updateNode(this.node.uuid, { ...this.node, actions: newActions });
   }
 
+  private handleActionDragStart(event: CustomEvent) {
+    // Capture the height of the action being dragged
+    const actionId = event.detail.id;
+    const actionElement = this.querySelector(`#${actionId}`) as HTMLElement;
+
+    if (actionElement) {
+      const rect = actionElement.getBoundingClientRect();
+      this.draggedActionHeight = rect.height;
+    } else {
+      // Fallback to a reasonable default
+      this.draggedActionHeight = 60;
+    }
+  }
+
+  private handleActionDragExternal(event: CustomEvent) {
+    // stop propagation of the original event from SortableList
+    event.stopPropagation();
+
+    // get the action being dragged
+    const actionId = event.detail.id;
+    const splitId = actionId.split('-');
+    if (splitId.length < 2 || isNaN(parseInt(splitId[1], 10))) {
+      // invalid format, do not proceed
+      return;
+    }
+    const actionIndex = parseInt(splitId[1], 10);
+    const action = this.node.actions[actionIndex];
+
+    // fire event to editor to show canvas drop preview, including the captured height
+    this.fireCustomEvent(CustomEventType.DragExternal, {
+      action,
+      nodeUuid: this.node.uuid,
+      actionIndex,
+      mouseX: event.detail.mouseX,
+      mouseY: event.detail.mouseY,
+      actionHeight: this.draggedActionHeight
+    });
+  }
+
+  private handleActionDragInternal(_event: CustomEvent) {
+    // stop propagation of the original event from SortableList
+    _event.stopPropagation();
+
+    // fire event to editor to hide canvas drop preview
+    this.fireCustomEvent(CustomEventType.DragInternal, {});
+  }
+
+  private handleActionDragStop(event: CustomEvent) {
+    const isExternal = event.detail.isExternal;
+
+    if (isExternal) {
+      // stop propagation of the original event from SortableList
+      event.stopPropagation();
+
+      // get the action being dragged
+      const actionId = event.detail.id;
+      const split = actionId.split('-');
+      if (split.length < 2 || isNaN(Number(split[1]))) {
+        // invalid actionId format, do not proceed
+        return;
+      }
+      const actionIndex = parseInt(split[1], 10);
+      const action = this.node.actions[actionIndex];
+
+      // fire event to editor to create new node
+      this.fireCustomEvent(CustomEventType.DragStop, {
+        action,
+        nodeUuid: this.node.uuid,
+        actionIndex,
+        isExternal: true,
+        mouseX: event.detail.mouseX,
+        mouseY: event.detail.mouseY
+      });
+    }
+  }
+
   private handleActionMouseDown(event: MouseEvent, action: Action): void {
     // Don't handle clicks on the remove button, drag handle, or when action is in removing state
     const target = event.target as HTMLElement;
@@ -813,16 +991,171 @@ export class CanvasNode extends RapidElement {
     this.pendingNodeClick = null;
   }
 
+  private handleAddActionClick(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Fire event to request adding a new action to this node
+    this.fireCustomEvent(CustomEventType.AddActionRequested, {
+      nodeUuid: this.node.uuid
+    });
+  }
+
+  private calculateDropIndex(mouseY: number): number {
+    // Get the sortable list element
+    const sortableList = this.querySelector('temba-sortable-list');
+    if (!sortableList || !this.node.actions)
+      return this.node.actions?.length ?? 0;
+
+    // Get all action elements
+    const actionElements = Array.from(
+      sortableList.querySelectorAll('.action.sortable')
+    );
+
+    if (actionElements.length === 0) {
+      return 0;
+    }
+
+    // Find where to insert based on mouse Y position
+    for (let i = 0; i < actionElements.length; i++) {
+      const actionElement = actionElements[i] as HTMLElement;
+      const rect = actionElement.getBoundingClientRect();
+      const centerY = rect.top + rect.height / 2;
+
+      if (mouseY < centerY) {
+        return i;
+      }
+    }
+
+    // If past all elements, insert at the end
+    return actionElements.length;
+  }
+
+  private handleExternalActionDragOver(event: CustomEvent): void {
+    // Only handle if this is an execute_actions node
+    if (this.ui.type !== 'execute_actions') return;
+
+    const { action, sourceNodeUuid, actionIndex, mouseY, actionHeight } =
+      event.detail;
+
+    // Don't accept drops from the same node
+    if (sourceNodeUuid === this.node.uuid) return;
+
+    // Calculate where to drop
+    const dropIndex = this.calculateDropIndex(mouseY);
+
+    // Store the drag info
+    this.externalDragInfo = {
+      action,
+      sourceNodeUuid,
+      actionIndex,
+      dropIndex,
+      actionHeight: actionHeight || 60 // fallback to 60px if not provided
+    };
+
+    // Request update to show placeholder
+    this.requestUpdate();
+  }
+
+  private handleExternalActionDragLeave(_event: CustomEvent): void {
+    // Clear external drag state when drag leaves this node
+    this.externalDragInfo = null;
+    this.requestUpdate();
+  }
+
+  private handleActionShowGhost(_event: CustomEvent): void {
+    // Show the ghost element in the sortable list
+    const sortableList = this.querySelector('temba-sortable-list');
+    if (sortableList) {
+      const ghostElement = document.querySelector('.ghost') as HTMLElement;
+      if (ghostElement) {
+        ghostElement.style.display = 'block';
+      }
+    }
+  }
+
+  private handleActionHideGhost(_event: CustomEvent): void {
+    // Hide the ghost element in the sortable list
+    const sortableList = this.querySelector('temba-sortable-list');
+    if (sortableList) {
+      const ghostElement = document.querySelector('.ghost') as HTMLElement;
+      if (ghostElement) {
+        ghostElement.style.display = 'none';
+      }
+    }
+  }
+
+  private handleExternalActionDrop(event: CustomEvent): void {
+    // Only handle if this is an execute_actions node
+    if (this.ui.type !== 'execute_actions') return;
+
+    const { action, sourceNodeUuid, actionIndex } = event.detail;
+
+    // Don't accept drops from the same node
+    if (sourceNodeUuid === this.node.uuid) return;
+
+    // Get the drop index from our tracking state
+    const dropIndex =
+      this.externalDragInfo?.dropIndex ?? this.node.actions?.length ?? 0;
+
+    // Clear external drag state
+    this.externalDragInfo = null;
+
+    // Remove the action from the source node
+    const store = getStore();
+    if (!store) return;
+
+    const flowDefinition = store.getState().flowDefinition;
+    if (!flowDefinition) return;
+
+    const sourceNode = flowDefinition.nodes.find(
+      (n) => n.uuid === sourceNodeUuid
+    );
+
+    if (sourceNode) {
+      const updatedSourceActions = sourceNode.actions.filter(
+        (_a, idx) => idx !== actionIndex
+      );
+
+      // If source node has no actions left, remove it
+      if (updatedSourceActions.length === 0) {
+        this.fireCustomEvent(CustomEventType.NodeDeleted, {
+          uuid: sourceNodeUuid
+        });
+      } else {
+        // Update source node
+        const updatedSourceNode = {
+          ...sourceNode,
+          actions: updatedSourceActions
+        };
+        getStore()?.getState().updateNode(sourceNodeUuid, updatedSourceNode);
+      }
+    }
+
+    // Add the action to this node at the calculated position
+    const newActions = [...this.node.actions];
+    newActions.splice(dropIndex, 0, action);
+
+    const updatedNode = { ...this.node, actions: newActions };
+    getStore()?.getState().updateNode(this.node.uuid, updatedNode);
+
+    // Request update
+    this.requestUpdate();
+  }
+
   private renderTitle(
     config: ActionConfig,
     action: Action,
     index: number,
     isRemoving: boolean = false
   ) {
-    return html`<div class="cn-title" style="background:${config.color}">
+    const color = config.group
+      ? ACTION_GROUP_METADATA[config.group]?.color
+      : '#aaaaaa';
+    return html`<div class="cn-title" style="background:${color}">
       ${this.node?.actions?.length > 1
         ? html`<temba-icon class="drag-handle" name="sort"></temba-icon>`
-        : null}
+        : html`<div class="title-spacer"></div>`}
 
       <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
       <div
@@ -836,13 +1169,29 @@ export class CanvasNode extends RapidElement {
     </div>`;
   }
 
-  private renderNodeTitle(config: NodeConfig, isRemoving: boolean = false) {
+  private renderNodeTitle(
+    config: NodeConfig,
+    node: Node,
+    ui: NodeUI,
+    isRemoving: boolean = false
+  ) {
+    // Get color from the appropriate metadata (either ACTION or SPLIT)
+    const color = config.group
+      ? ACTION_GROUP_METADATA[config.group]?.color ||
+        SPLIT_GROUP_METADATA[config.group]?.color
+      : '#aaaaaa';
     return html`<div
       class="cn-title ${isRemoving ? 'removing' : ''}"
-      style="background:${config.color}"
+      style="background:${color}"
     >
       <div class="title-spacer"></div>
-      <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
+      <div class="name">
+        ${isRemoving
+          ? 'Remove?'
+          : config.renderTitle
+          ? config.renderTitle(node, ui)
+          : html`${config.name}`}
+      </div>
       <div
         class="remove-button"
         @click=${(e: MouseEvent) => this.handleNodeRemoveClick(e)}
@@ -853,6 +1202,14 @@ export class CanvasNode extends RapidElement {
     </div>`;
   }
 
+  private renderDropPlaceholder() {
+    const height = this.externalDragInfo?.actionHeight || 60;
+    return html`<div
+      class="action sortable drop-placeholder"
+      style="height: ${height}px; background: #f3f4f6; border: 2px dashed #d1d5db; border-radius: var(--curvature);"
+    ></div>`;
+  }
+
   private renderAction(node: Node, action: Action, index: number) {
     const config = ACTION_CONFIG[action.type];
     const isRemoving = this.actionRemovingState.has(action.uuid);
@@ -893,6 +1250,31 @@ export class CanvasNode extends RapidElement {
     </div>`;
   }
 
+  private renderActionsWithPlaceholder() {
+    if (!this.externalDragInfo) {
+      // No external drag, render normally
+      return this.node.actions.map((action, index) =>
+        this.renderAction(this.node, action, index)
+      );
+    }
+
+    // Insert placeholder at the drop index
+    const result = [];
+    for (let i = 0; i < this.node.actions.length; i++) {
+      if (i === this.externalDragInfo.dropIndex) {
+        result.push(this.renderDropPlaceholder());
+      }
+      result.push(this.renderAction(this.node, this.node.actions[i], i));
+    }
+
+    // If dropping at the end, add placeholder after all actions
+    if (this.externalDragInfo.dropIndex >= this.node.actions.length) {
+      result.push(this.renderDropPlaceholder());
+    }
+
+    return result;
+  }
+
   private renderRouter(router: Router, ui: NodeUI) {
     const nodeConfig = NODE_CONFIG[ui.type];
     if (nodeConfig) {
@@ -978,20 +1360,27 @@ export class CanvasNode extends RapidElement {
               >
                 ${this.renderNodeTitle(
                   nodeConfig,
+                  this.node,
+                  this.ui,
                   this.actionRemovingState.has(this.node.uuid)
                 )}
-                ${nodeConfig.render ? nodeConfig.render(this.node) : null}
+                ${nodeConfig.render
+                  ? nodeConfig.render(this.node, this.ui)
+                  : null}
               </div>
             </div>`
           : this.node.actions.length > 0
           ? this.ui.type === 'execute_actions'
             ? html`<temba-sortable-list
                 dragHandle="drag-handle"
+                externalDrag
                 @temba-order-changed="${this.handleActionOrderChanged}"
+                @temba-drag-start="${this.handleActionDragStart}"
+                @temba-drag-external="${this.handleActionDragExternal}"
+                @temba-drag-internal="${this.handleActionDragInternal}"
+                @temba-drag-stop="${this.handleActionDragStop}"
               >
-                ${this.node.actions.map((action, index) =>
-                  this.renderAction(this.node, action, index)
-                )}
+                ${this.renderActionsWithPlaceholder()}
               </temba-sortable-list>`
             : html`${this.node.actions.map((action, index) =>
                 this.renderAction(this.node, action, index)
@@ -1007,6 +1396,15 @@ export class CanvasNode extends RapidElement {
                 (exit) => this.renderExit(exit)
               )}
             </div>`}
+        ${this.ui.type === 'execute_actions'
+          ? html`<div
+              class="add-action-button"
+              @click=${(e: MouseEvent) => this.handleAddActionClick(e)}
+              title="Add action"
+            >
+              <temba-icon name="add"></temba-icon>
+            </div>`
+          : ''}
       </div>
     `;
   }