@nyaruka/temba-components 0.131.3 → 0.133.0

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

@@ -42,16 +42,32 @@ export class Editor extends RapidElement {
         return this.isDragging;
     }
     getAvailableLanguages() {
-        var _b, _c;
-        // Use languages from flow definition if available, otherwise use defaults
-        if (((_c = (_b = this.definition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.languages) &&
+        var _b, _c, _d;
+        // Use languages from workspace if available
+        if (((_b = this.workspace) === null || _b === void 0 ? void 0 : _b.languages) && this.workspace.languages.length > 0) {
+            const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
+            return this.workspace.languages
+                .map((code) => {
+                try {
+                    const name = languageNames.of(code);
+                    return name ? { code, name } : { code, name: code };
+                }
+                catch (_b) {
+                    return { code, name: code };
+                }
+            })
+                .filter((lang) => lang.code && lang.name);
+        }
+        // Fall back to flow definition languages if available
+        if (((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c._ui) === null || _d === void 0 ? void 0 : _d.languages) &&
             this.definition._ui.languages.length > 0) {
             return this.definition._ui.languages.map((lang) => ({
                 code: typeof lang === 'string' ? lang : lang.iso || lang.code,
                 name: typeof lang === 'string' ? lang : lang.name
             }));
         }
-        return this.DEFAULT_LANGUAGES;
+        // No languages available
+        return [];
     }
     static get styles() {
         return css `
@@ -71,8 +87,6 @@ export class Editor extends RapidElement {
         );
         background-size: 20px 20px;
         background-position: 10px 10px;
-        box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.05);
-        border-top: 1px solid #e0e0e0;
         width: 100%;
         display: flex;
       }
@@ -421,12 +435,6 @@ export class Editor extends RapidElement {
         // Track previous target node to clear placeholder when moving between nodes
         this.previousActionDragTargetNodeUuid = null;
         this.canvasMouseDown = false;
-        // Default languages if not specified in flow definition
-        this.DEFAULT_LANGUAGES = [
-            { code: 'eng', name: 'English' },
-            { code: 'fra', name: 'French' },
-            { code: 'esp', name: 'Spanish' }
-        ];
         // Bound event handlers to maintain proper 'this' context
         this.boundMouseMove = this.handleMouseMove.bind(this);
         this.boundMouseUp = this.handleMouseUp.bind(this);
@@ -543,11 +551,18 @@ export class Editor extends RapidElement {
     saveChanges() {
         // post the flow definition to the server
         getStore()
-            .postJSON(`/flow/revisions/${this.flow}`, this.definition)
+            .postJSON(`/flow/revisions/${this.flow}/`, this.definition)
             .then((response) => {
-            // Update flow info with the response data
-            if (response.json && response.json.info) {
-                getStore().getState().setFlowInfo(response.json.info);
+            var _b;
+            // Update flow info and revision with the response data
+            if (response.json) {
+                const state = getStore().getState();
+                if (response.json.info) {
+                    state.setFlowInfo(response.json.info);
+                }
+                if (((_b = response.json.revision) === null || _b === void 0 ? void 0 : _b.revision) !== undefined) {
+                    state.setRevision(response.json.revision.revision);
+                }
             }
         })
             .catch((error) => {
@@ -594,6 +609,8 @@ export class Editor extends RapidElement {
         this.addEventListener(CustomEventType.AddActionRequested, this.handleAddActionRequested.bind(this));
         // Listen for node edit requests from flow nodes
         this.addEventListener(CustomEventType.NodeEditRequested, this.handleNodeEditRequested.bind(this));
+        // Listen for node deletion events
+        this.addEventListener(CustomEventType.NodeDeleted, this.handleNodeDeleted.bind(this));
         // Listen for canvas menu selections
         this.addEventListener(CustomEventType.Selection, (event) => {
             const target = event.target;
@@ -1245,6 +1262,12 @@ export class Editor extends RapidElement {
         this.editingNode = event.detail.node;
         this.editingNodeUI = event.detail.nodeUI;
     }
+    handleNodeDeleted(event) {
+        const nodeUuid = event.detail.uuid;
+        if (nodeUuid) {
+            this.deleteNodes([nodeUuid]);
+        }
+    }
     handleActionSaved(updatedAction) {
         var _b, _c;
         if (this.editingNode && this.editingAction) {
@@ -1399,7 +1422,7 @@ export class Editor extends RapidElement {
         return { left, top };
     }
     handleActionDragExternal(event) {
-        const { action, nodeUuid, actionIndex, mouseX, mouseY, actionHeight = 60 } = event.detail;
+        const { action, nodeUuid, actionIndex, mouseX, mouseY, actionHeight = 60, isLastAction = false } = event.detail;
         // Check if mouse is over another execute_actions node
         const targetNode = this.getNodeAtPosition(mouseX, mouseY);
         if (targetNode && targetNode !== nodeUuid) {
@@ -1462,23 +1485,38 @@ export class Editor extends RapidElement {
             this.previousActionDragTargetNodeUuid = null;
         }
         this.actionDragTargetNodeUuid = null;
-        // Tell source node to hide ghost (we're not over a valid target)
         const sourceElement = this.querySelector(`temba-flow-node[data-node-uuid="${nodeUuid}"]`);
-        if (sourceElement) {
-            sourceElement.dispatchEvent(new CustomEvent('action-hide-ghost', {
-                detail: {},
-                bubbles: false
-            }));
+        // Show canvas drop preview only if this is NOT the last action
+        // Last actions can only be dropped on other nodes, not on canvas
+        if (!isLastAction) {
+            // Hide ghost when showing canvas preview (for canvas drops)
+            if (sourceElement) {
+                sourceElement.dispatchEvent(new CustomEvent('action-hide-ghost', {
+                    detail: {},
+                    bubbles: false
+                }));
+            }
+            // Don't snap to grid for preview - let it follow cursor smoothly
+            const position = this.calculateCanvasDropPosition(mouseX, mouseY, false);
+            this.canvasDropPreview = {
+                action,
+                nodeUuid,
+                actionIndex,
+                position,
+                actionHeight
+            };
+        }
+        else {
+            // For last action, keep ghost visible (can't drop on canvas)
+            if (sourceElement) {
+                sourceElement.dispatchEvent(new CustomEvent('action-show-ghost', {
+                    detail: {},
+                    bubbles: false
+                }));
+            }
+            // Clear any existing preview for last action
+            this.canvasDropPreview = null;
         }
-        // Don't snap to grid for preview - let it follow cursor smoothly
-        const position = this.calculateCanvasDropPosition(mouseX, mouseY, false);
-        this.canvasDropPreview = {
-            action,
-            nodeUuid,
-            actionIndex,
-            position,
-            actionHeight
-        };
         // Force re-render to update preview position
         this.requestUpdate();
     }
@@ -1498,8 +1536,8 @@ export class Editor extends RapidElement {
         this.actionDragTargetNodeUuid = null;
     }
     handleActionDropExternal(event) {
-        var _b, _c, _d;
-        const { action, nodeUuid, actionIndex, mouseX, mouseY } = event.detail;
+        var _b, _c;
+        const { action, nodeUuid, actionIndex, mouseX, mouseY, isLastAction = false } = event.detail;
         // Check if we're dropping on an existing execute_actions node
         const targetNodeUuid = this.actionDragTargetNodeUuid;
         if (targetNodeUuid && targetNodeUuid !== nodeUuid) {
@@ -1522,6 +1560,13 @@ export class Editor extends RapidElement {
             this.actionDragTargetNodeUuid = null;
             return;
         }
+        // If this is the last action and we're not dropping on another node, do nothing
+        // Last actions can only be moved to other nodes, not dropped on canvas
+        if (isLastAction) {
+            this.canvasDropPreview = null;
+            this.actionDragTargetNodeUuid = null;
+            return;
+        }
         // Not dropping on another node, create a new one on canvas
         // Snap to grid for the final drop position
         const position = this.calculateCanvasDropPosition(mouseX, mouseY, true);
@@ -1532,12 +1577,13 @@ export class Editor extends RapidElement {
         const updatedActions = originalNode.actions.filter((_a, idx) => idx !== actionIndex);
         // if no actions remain, delete the node
         if (updatedActions.length === 0) {
-            (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().removeNodes([nodeUuid]);
+            // Use deleteNodes to properly clean up Plumber connections before removing
+            this.deleteNodes([nodeUuid]);
         }
         else {
             // update the node
             const updatedNode = { ...originalNode, actions: updatedActions };
-            (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().updateNode(nodeUuid, updatedNode);
+            (_b = getStore()) === null || _b === void 0 ? void 0 : _b.getState().updateNode(nodeUuid, updatedNode);
         }
         // create a new execute_actions node with the dropped action
         const newNode = {
@@ -1556,7 +1602,7 @@ export class Editor extends RapidElement {
             config: {}
         };
         // add the new node
-        (_d = getStore()) === null || _d === void 0 ? void 0 : _d.getState().addNode(newNode, newNodeUI);
+        (_c = getStore()) === null || _c === void 0 ? void 0 : _c.getState().addNode(newNode, newNodeUI);
         // clear the preview
         this.canvasDropPreview = null;
         this.actionDragTargetNodeUuid = null;
@@ -1965,7 +2011,7 @@ export class Editor extends RapidElement {
         header="Translations"
         .width=${360}
         .maxHeight=${600}
-        .top=${20}
+        .top=${170}
         color="#6b7280"
         .hidden=${this.localizationWindowHidden}
         @temba-dialog-hidden=${this.handleLocalizationWindowClosed}
@@ -2123,6 +2169,7 @@ export class Editor extends RapidElement {
         icon="language"
         label="Translate Flow"
         color="#6b7280"
+        top="180"
         .hidden=${!this.localizationWindowHidden}
         @temba-button-clicked=${this.handleLocalizationTabClick}
       ></temba-floating-tab>
@@ -2182,8 +2229,7 @@ export class Editor extends RapidElement {
                 ? 'selected'
                 : ''}"
                   @mousedown=${this.handleMouseDown.bind(this)}
-                  style="left:${position.left}px; top:${position.top}px; z-index: ${1000 +
-                position.top}"
+                  style="left:${position.left}px; top:${position.top}px;"
                   uuid=${uuid}
                   .data=${sticky}
                   .dragging=${dragging}
@@ -2241,6 +2287,9 @@ __decorate([
 __decorate([
     fromStore(zustand, (state) => state.isTranslating)
 ], Editor.prototype, "isTranslating", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.workspace)
+], Editor.prototype, "workspace", void 0);
 __decorate([
     state()
 ], Editor.prototype, "isDragging", void 0);