@nyaruka/temba-components 0.131.0 → 0.131.2

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

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
+import { ACTION_GROUP_METADATA, SPLIT_GROUP_METADATA } from './types';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
@@ -126,7 +127,7 @@ export class CanvasNode extends RapidElement {
         pointer-events: auto; /* Ensure drag handle can receive events */
       }
       .title-spacer {
-        width: 2em;
+        width: 1.8em;
         
       }
 
@@ -305,6 +306,36 @@ 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() {
@@ -323,10 +354,34 @@ export class CanvasNode extends RapidElement {
         // Track node click state to distinguish from drag
         this.nodeClickStartPos = null;
         this.pendingNodeClick = null;
+        // Track the height of the action being dragged (captured at drag start)
+        this.draggedActionHeight = 0;
+        // Track external action drag (action being dragged from another node)
+        this.externalDragInfo = null;
         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);
+        this.addEventListener('action-drop', this.handleExternalActionDrop);
+        this.addEventListener('action-drag-leave', this.handleExternalActionDragLeave);
+        this.addEventListener('action-show-ghost', this.handleActionShowGhost);
+        this.addEventListener('action-hide-ghost', this.handleActionHideGhost);
     }
     updated(changes) {
-        var _a;
+        var _b;
         super.updated(changes);
         if (changes.has('node')) {
             // Only proceed if plumber is available (for tests that don't set it up)
@@ -348,13 +403,19 @@ export class CanvasNode extends RapidElement {
             const ele = this.parentElement;
             if (ele) {
                 const rect = ele.getBoundingClientRect();
-                (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().expandCanvas(this.ui.position.left + rect.width, this.ui.position.top + rect.height);
+                (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().expandCanvas(this.ui.position.left + rect.width, this.ui.position.top + rect.height);
             }
         }
     }
     disconnectedCallback() {
         // Remove the event listener when the component is removed
         super.disconnectedCallback();
+        // Remove external drag event listeners
+        this.removeEventListener('action-drag-over', this.handleExternalActionDragOver);
+        this.removeEventListener('action-drop', this.handleExternalActionDrop);
+        this.removeEventListener('action-drag-leave', this.handleExternalActionDragLeave);
+        this.removeEventListener('action-show-ghost', this.handleActionShowGhost);
+        this.removeEventListener('action-hide-ghost', this.handleActionHideGhost);
         // Clear any pending exit removal timeouts
         this.exitRemovalTimeouts.forEach((timeoutId) => {
             clearTimeout(timeoutId);
@@ -401,7 +462,7 @@ export class CanvasNode extends RapidElement {
         this.exitRemovalTimeouts.set(exitId, timeoutId);
     }
     disconnectExit(exit) {
-        var _a;
+        var _b;
         const exitId = exit.uuid;
         // Clear the UI state
         this.exitRemovingState.delete(exitId);
@@ -420,7 +481,7 @@ export class CanvasNode extends RapidElement {
         const updatedExits = this.node.exits.map((e) => e.uuid === exitId ? updatedExit : e);
         // Update the node
         const updatedNode = { ...this.node, exits: updatedExits };
-        (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().updateNode(this.node.uuid, updatedNode);
+        (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().updateNode(this.node.uuid, updatedNode);
         // Request update to reflect changes
         this.requestUpdate();
     }
@@ -450,7 +511,7 @@ export class CanvasNode extends RapidElement {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     removeAction(action, _index) {
-        var _a;
+        var _b;
         const actionId = action.uuid;
         // Clear the UI state
         this.actionRemovingState.delete(actionId);
@@ -470,7 +531,7 @@ export class CanvasNode extends RapidElement {
         else {
             // Update the node with remaining actions
             const updatedNode = { ...this.node, actions: updatedActions };
-            (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().updateNode(this.node.uuid, updatedNode);
+            (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().updateNode(this.node.uuid, updatedNode);
             // Request update to reflect changes
             this.requestUpdate();
         }
@@ -514,7 +575,7 @@ export class CanvasNode extends RapidElement {
         });
     }
     handleActionOrderChanged(event) {
-        var _a;
+        var _b;
         const [fromIdx, toIdx] = event.detail.swap;
         // swap our actions
         const newActions = [...this.node.actions];
@@ -524,7 +585,73 @@ export class CanvasNode extends RapidElement {
         // since the editor will update us from it's definition subscription
         // but it makes testing a lot easier
         this.node = { ...this.node, actions: newActions };
-        (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().updateNode(this.node.uuid, { ...this.node, actions: newActions });
+        (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().updateNode(this.node.uuid, { ...this.node, actions: newActions });
+    }
+    handleActionDragStart(event) {
+        // Capture the height of the action being dragged
+        const actionId = event.detail.id;
+        const actionElement = this.querySelector(`#${actionId}`);
+        if (actionElement) {
+            const rect = actionElement.getBoundingClientRect();
+            this.draggedActionHeight = rect.height;
+        }
+        else {
+            // Fallback to a reasonable default
+            this.draggedActionHeight = 60;
+        }
+    }
+    handleActionDragExternal(event) {
+        // 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
+        });
+    }
+    handleActionDragInternal(_event) {
+        // stop propagation of the original event from SortableList
+        _event.stopPropagation();
+        // fire event to editor to hide canvas drop preview
+        this.fireCustomEvent(CustomEventType.DragInternal, {});
+    }
+    handleActionDragStop(event) {
+        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
+            });
+        }
     }
     handleActionMouseDown(event, action) {
         // Don't handle clicks on the remove button, drag handle, or when action is in removing state
@@ -690,12 +817,138 @@ export class CanvasNode extends RapidElement {
         this.nodeClickStartPos = null;
         this.pendingNodeClick = null;
     }
+    handleAddActionClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        // Fire event to request adding a new action to this node
+        this.fireCustomEvent(CustomEventType.AddActionRequested, {
+            nodeUuid: this.node.uuid
+        });
+    }
+    calculateDropIndex(mouseY) {
+        var _b, _c;
+        // Get the sortable list element
+        const sortableList = this.querySelector('temba-sortable-list');
+        if (!sortableList || !this.node.actions)
+            return (_c = (_b = this.node.actions) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 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];
+            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;
+    }
+    handleExternalActionDragOver(event) {
+        // 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();
+    }
+    handleExternalActionDragLeave(_event) {
+        // Clear external drag state when drag leaves this node
+        this.externalDragInfo = null;
+        this.requestUpdate();
+    }
+    handleActionShowGhost(_event) {
+        // Show the ghost element in the sortable list
+        const sortableList = this.querySelector('temba-sortable-list');
+        if (sortableList) {
+            const ghostElement = document.querySelector('.ghost');
+            if (ghostElement) {
+                ghostElement.style.display = 'block';
+            }
+        }
+    }
+    handleActionHideGhost(_event) {
+        // Hide the ghost element in the sortable list
+        const sortableList = this.querySelector('temba-sortable-list');
+        if (sortableList) {
+            const ghostElement = document.querySelector('.ghost');
+            if (ghostElement) {
+                ghostElement.style.display = 'none';
+            }
+        }
+    }
+    handleExternalActionDrop(event) {
+        var _b, _c, _d, _e, _f, _g;
+        // 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 = (_e = (_c = (_b = this.externalDragInfo) === null || _b === void 0 ? void 0 : _b.dropIndex) !== null && _c !== void 0 ? _c : (_d = this.node.actions) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 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
+                };
+                (_f = getStore()) === null || _f === void 0 ? void 0 : _f.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 };
+        (_g = getStore()) === null || _g === void 0 ? void 0 : _g.getState().updateNode(this.node.uuid, updatedNode);
+        // Request update
+        this.requestUpdate();
+    }
     renderTitle(config, action, index, isRemoving = false) {
-        var _a, _b;
-        return html `<div class="cn-title" style="background:${config.color}">
-      ${((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.length) > 1
+        var _b, _c, _d;
+        const color = config.group
+            ? (_b = ACTION_GROUP_METADATA[config.group]) === null || _b === void 0 ? void 0 : _b.color
+            : '#aaaaaa';
+        return html `<div class="cn-title" style="background:${color}">
+      ${((_d = (_c = this.node) === null || _c === void 0 ? void 0 : _c.actions) === null || _d === void 0 ? void 0 : _d.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
@@ -707,13 +960,25 @@ export class CanvasNode extends RapidElement {
       </div>
     </div>`;
     }
-    renderNodeTitle(config, isRemoving = false) {
+    renderNodeTitle(config, node, ui, isRemoving = false) {
+        var _b, _c;
+        // Get color from the appropriate metadata (either ACTION or SPLIT)
+        const color = config.group
+            ? ((_b = ACTION_GROUP_METADATA[config.group]) === null || _b === void 0 ? void 0 : _b.color) ||
+                ((_c = SPLIT_GROUP_METADATA[config.group]) === null || _c === void 0 ? void 0 : _c.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) => this.handleNodeRemoveClick(e)}
@@ -723,6 +988,14 @@ export class CanvasNode extends RapidElement {
       </div>
     </div>`;
     }
+    renderDropPlaceholder() {
+        var _b;
+        const height = ((_b = this.externalDragInfo) === null || _b === void 0 ? void 0 : _b.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>`;
+    }
     renderAction(node, action, index) {
         const config = ACTION_CONFIG[action.type];
         const isRemoving = this.actionRemovingState.has(action.uuid);
@@ -760,6 +1033,25 @@ export class CanvasNode extends RapidElement {
       ${action.type}
     </div>`;
     }
+    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;
+    }
     renderRouter(router, ui) {
         const nodeConfig = NODE_CONFIG[ui.type];
         if (nodeConfig) {
@@ -830,17 +1122,24 @@ export class CanvasNode extends RapidElement {
                 @mouseup=${(e) => this.handleNodeMouseUp(e)}
                 style="cursor: pointer;"
               >
-                ${this.renderNodeTitle(nodeConfig, this.actionRemovingState.has(this.node.uuid))}
-                ${nodeConfig.render ? nodeConfig.render(this.node) : null}
+                ${this.renderNodeTitle(nodeConfig, this.node, this.ui, this.actionRemovingState.has(this.node.uuid))}
+                ${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))}`
                 : ''}
@@ -850,6 +1149,15 @@ export class CanvasNode extends RapidElement {
             : html `<div class="action-exits">
               ${repeat(this.node.exits, (exit) => exit.uuid, (exit) => this.renderExit(exit))}
             </div>`}
+        ${this.ui.type === 'execute_actions'
+            ? html `<div
+              class="add-action-button"
+              @click=${(e) => this.handleAddActionClick(e)}
+              title="Add action"
+            >
+              <temba-icon name="add"></temba-icon>
+            </div>`
+            : ''}
       </div>
     `;
     }