@nyaruka/temba-components 0.132.0 → 0.133.0

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

@@ -57,6 +57,7 @@ export class CanvasNode extends RapidElement {
 
       .action .cn-title:hover .remove-button,
       .router:hover .remove-button {
+        visibility: visible;
         opacity: 0.7;
       }
 
@@ -73,7 +74,7 @@ export class CanvasNode extends RapidElement {
       .remove-button {
         background: transparent;
         color: white;
-        opacity: 0;
+        visibility: hidden;
         cursor: pointer;
         font-size: 1em;
         font-weight: 600;
@@ -81,16 +82,22 @@ export class CanvasNode extends RapidElement {
         z-index: 10;
         transition: all 100ms ease-in-out;
         align-self: center;
-        padding:0.25em;
+        margin-right:0.15em;
         border: 0px solid red;
         width: 1em;
         pointer-events: auto; /* Ensure remove button can receive events */
       }
 
       .remove-button:hover {
+        visibility: visible;
         opacity: 1;
       }
 
+      .translating-hidden {
+        visibility: hidden !important;
+        pointer-events: none !important;
+      }
+
       .action.sortable {
         display: flex;
         align-items: stretch;
@@ -102,6 +109,7 @@ export class CanvasNode extends RapidElement {
         flex-direction: column;
         min-width: 0; /* Allow flex item to shrink below its content size */
         overflow: hidden;
+        background: #fff;
       }
 
       .action .body {
@@ -132,7 +140,7 @@ export class CanvasNode extends RapidElement {
       }      
 
       .action .drag-handle {
-        opacity: 0;
+        visibility: hidden;
         transition: all 200ms ease-in-out;
         cursor: move;
         background: rgba(0, 0, 0, 0.02);
@@ -147,6 +155,7 @@ export class CanvasNode extends RapidElement {
       }
 
       .action:hover .drag-handle {
+        visibility: visible;
         opacity: 0.7;
         
         
@@ -157,6 +166,7 @@ export class CanvasNode extends RapidElement {
       }
 
       .action .drag-handle:hover {
+        visibility: visible;
         opacity: 1;
         
       }
@@ -360,6 +370,18 @@ export class CanvasNode extends RapidElement {
         opacity: 1 !important;
         transform: scale(1.1);
       }
+
+      .empty-node-placeholder {
+        height: 60px;
+        background: #f3f4f6;
+        border: 2px dashed #d1d5db;
+        border-radius: var(--curvature);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #9ca3af;
+        font-size: 0.9em;
+      }
   }`;
     }
     constructor() {
@@ -382,6 +404,9 @@ export class CanvasNode extends RapidElement {
         this.draggedActionHeight = 0;
         // Track external action drag (action being dragged from another node)
         this.externalDragInfo = null;
+        // Track if we're showing a placeholder for our own last action being dragged out
+        this.showLastActionPlaceholder = false;
+        this.lastActionPlaceholderHeight = 60;
         this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);
         this.handleActionDragStart = this.handleActionDragStart.bind(this);
         this.handleActionDragExternal = this.handleActionDragExternal.bind(this);
@@ -594,6 +619,8 @@ export class CanvasNode extends RapidElement {
             this.actionRemovalTimeouts.delete(nodeId);
         }
         // Fire the node deleted event
+        // The Editor will handle cleanup (Plumber connections) and call store.removeNodes()
+        // The store's removeNodes method handles rerouting of connections
         this.fireCustomEvent(CustomEventType.NodeDeleted, {
             uuid: this.node.uuid
         });
@@ -601,6 +628,11 @@ export class CanvasNode extends RapidElement {
     handleActionOrderChanged(event) {
         var _b;
         const [fromIdx, toIdx] = event.detail.swap;
+        // If we have an external drag in progress, ignore internal order changes
+        // as they'll be handled by the external drop handler
+        if (this.externalDragInfo) {
+            return;
+        }
         // swap our actions
         const newActions = [...this.node.actions];
         const movedAction = newActions.splice(fromIdx, 1)[0];
@@ -623,6 +655,12 @@ export class CanvasNode extends RapidElement {
             // Fallback to a reasonable default
             this.draggedActionHeight = 60;
         }
+        // If this is the last action, show placeholder
+        if (this.node.actions.length === 1) {
+            this.showLastActionPlaceholder = true;
+            this.lastActionPlaceholderHeight = this.draggedActionHeight;
+            this.requestUpdate();
+        }
     }
     handleActionDragExternal(event) {
         // stop propagation of the original event from SortableList
@@ -636,6 +674,8 @@ export class CanvasNode extends RapidElement {
         }
         const actionIndex = parseInt(splitId[1], 10);
         const action = this.node.actions[actionIndex];
+        // Check if this is the last action
+        const isLastAction = this.node.actions.length === 1;
         // fire event to editor to show canvas drop preview, including the captured height
         this.fireCustomEvent(CustomEventType.DragExternal, {
             action,
@@ -643,7 +683,8 @@ export class CanvasNode extends RapidElement {
             actionIndex,
             mouseX: event.detail.mouseX,
             mouseY: event.detail.mouseY,
-            actionHeight: this.draggedActionHeight
+            actionHeight: this.draggedActionHeight,
+            isLastAction
         });
     }
     handleActionDragInternal(_event) {
@@ -654,6 +695,8 @@ export class CanvasNode extends RapidElement {
     }
     handleActionDragStop(event) {
         const isExternal = event.detail.isExternal;
+        // Clear last action placeholder when drag stops
+        this.showLastActionPlaceholder = false;
         if (isExternal) {
             // stop propagation of the original event from SortableList
             event.stopPropagation();
@@ -666,16 +709,21 @@ export class CanvasNode extends RapidElement {
             }
             const actionIndex = parseInt(split[1], 10);
             const action = this.node.actions[actionIndex];
-            // fire event to editor to create new node
+            // Check if this is the last action in the node
+            const isLastAction = this.node.actions.length === 1;
+            // Always fire the DragStop event so the Editor can handle drops on other nodes
+            // The Editor will decide whether to create a new node or drop on existing node
             this.fireCustomEvent(CustomEventType.DragStop, {
                 action,
                 nodeUuid: this.node.uuid,
                 actionIndex,
                 isExternal: true,
+                isLastAction,
                 mouseX: event.detail.mouseX,
                 mouseY: event.detail.mouseY
             });
         }
+        this.requestUpdate();
     }
     handleActionMouseDown(event, action) {
         // Don't handle clicks on the remove button, drag handle, or when action is in removing state
@@ -931,7 +979,6 @@ export class CanvasNode extends RapidElement {
         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;
@@ -939,51 +986,64 @@ export class CanvasNode extends RapidElement {
         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
+        if (!sourceNode)
+            return;
+        // IMPORTANT: Add the action to this node FIRST, before removing from source
+        // This ensures we don't lose the action if the source node gets deleted
         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);
+        (_f = getStore()) === null || _f === void 0 ? void 0 : _f.getState().updateNode(this.node.uuid, updatedNode);
+        // Now remove the action from the source node
+        const updatedSourceActions = sourceNode.actions.filter((_a, idx) => idx !== actionIndex);
+        // If source node has no actions left, remove it
+        if (updatedSourceActions.length === 0) {
+            // Fire event to Editor so it can clean up jsPlumb connections properly
+            this.fireCustomEvent(CustomEventType.NodeDeleted, {
+                uuid: sourceNodeUuid
+            });
+        }
+        else {
+            // Update source node
+            const updatedSourceNode = {
+                ...sourceNode,
+                actions: updatedSourceActions
+            };
+            (_g = getStore()) === null || _g === void 0 ? void 0 : _g.getState().updateNode(sourceNodeUuid, updatedSourceNode);
+        }
         // Request update
         this.requestUpdate();
     }
     renderTitle(config, action, index, isRemoving = false) {
-        var _b, _c, _d;
+        var _b, _c, _d, _e;
         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}">
-      ${!this.isTranslating && ((_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>`
-            : html `<div class="title-spacer"></div>`}
+      ${((_c = this.ui) === null || _c === void 0 ? void 0 : _c.type) === 'execute_actions'
+            ? html `<temba-icon
+            class="drag-handle ${this.isTranslating
+                ? 'translating-hidden'
+                : ''}"
+            name="sort"
+          ></temba-icon>`
+            : ((_e = (_d = this.node) === null || _d === void 0 ? void 0 : _d.actions) === null || _e === void 0 ? void 0 : _e.length) > 1
+                ? html `<temba-icon
+            class="drag-handle ${this.isTranslating
+                    ? 'translating-hidden'
+                    : ''}"
+            name="sort"
+          ></temba-icon>`
+                : html `<div class="title-spacer"></div>`}
 
       <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
-      ${!this.isTranslating
-            ? html `<div
-            class="remove-button"
-            @click=${(e) => this.handleActionRemoveClick(e, action, index)}
-            title="Remove action"
-          >
-            ✕
-          </div>`
-            : html `<div class="title-spacer"></div>`}
+      <div
+        class="remove-button ${this.isTranslating ? 'translating-hidden' : ''}"
+        @click=${(e) => this.handleActionRemoveClick(e, action, index)}
+        title="Remove action"
+      >
+        ✕
+      </div>
     </div>`;
     }
     renderNodeTitle(config, node, ui, isRemoving = false) {
@@ -1005,15 +1065,13 @@ export class CanvasNode extends RapidElement {
                 ? config.renderTitle(node, ui)
                 : html `${config.name}`}
       </div>
-      ${!this.isTranslating
-            ? html `<div
-            class="remove-button"
-            @click=${(e) => this.handleNodeRemoveClick(e)}
-            title="Remove node"
-          >
-            ✕
-          </div>`
-            : html `<div class="title-spacer"></div>`}
+      <div
+        class="remove-button ${this.isTranslating ? 'translating-hidden' : ''}"
+        @click=${(e) => this.handleNodeRemoveClick(e)}
+        title="Remove node"
+      >
+        ✕
+      </div>
     </div>`;
     }
     renderDropPlaceholder() {
@@ -1251,18 +1309,26 @@ export class CanvasNode extends RapidElement {
             : 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.renderActionsWithPlaceholder()}
-              </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.renderActionsWithPlaceholder()}
+                </temba-sortable-list>
+                ${this.showLastActionPlaceholder
+                        ? html `<div
+                      class="empty-node-placeholder"
+                      style="height: ${this.lastActionPlaceholderHeight}px;"
+                    ></div>`
+                        : ''}`
                     : html `${this.node.actions.map((action, index) => this.renderAction(this.node, action, index))}`
-                : ''}
+                : this.ui.type === 'execute_actions'
+                    ? html `<div class="empty-node-placeholder"></div>`
+                    : ''}
         ${this.node.router
             ? html `<div class="router-section">
               ${this.renderRouter(this.node.router, this.ui)}