@nyaruka/temba-components 0.129.3 → 0.129.5

package/src/flow/Editor.ts

@@ -1,14 +1,21 @@
 import { html, TemplateResult } from 'lit-html';
 import { css, PropertyValueMap, unsafeCSS } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { FlowDefinition, FlowPosition } from '../store/flow-definition';
+import {
+  FlowDefinition,
+  FlowPosition,
+  Action,
+  Node,
+  NodeUI
+} from '../store/flow-definition';
 import { getStore } from '../store/Store';
 import { AppState, fromStore, zustand } from '../store/AppState';
 import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
+import { CustomEventType } from '../interfaces';
 
 import { Plumber } from './Plumber';
-import { EditorNode } from './EditorNode';
+import { CanvasNode } from './CanvasNode';
 import { Dialog } from '../layout/Dialog';
 import { Connection } from '@jsplumb/browser-ui';
 
@@ -81,6 +88,11 @@ export class Editor extends RapidElement {
   private isMouseDown = false;
   private dragStartPos = { x: 0, y: 0 };
 
+  // Public getter for drag state
+  public get dragging(): boolean {
+    return this.isDragging;
+  }
+
   @state()
   private currentDragItem: DraggableItem | null = null;
   private startPos = { left: 0, top: 0 };
@@ -107,6 +119,16 @@ export class Editor extends RapidElement {
   @state()
   private isValidTarget = true;
 
+  // NodeEditor state - handles both node and action editing
+  @state()
+  private editingNode: Node | null = null;
+
+  @state()
+  private editingNodeUI: NodeUI | null = null;
+
+  @state()
+  private editingAction: Action | null = null;
+
   private canvasMouseDown = false;
 
   // Bound event handlers to maintain proper 'this' context
@@ -392,6 +414,18 @@ export class Editor extends RapidElement {
     if (canvas) {
       canvas.addEventListener('dblclick', this.boundCanvasDoubleClick);
     }
+
+    // Listen for action edit requests from flow nodes
+    this.addEventListener(
+      CustomEventType.ActionEditRequested,
+      this.handleActionEditRequested.bind(this)
+    );
+
+    // Listen for node edit requests from flow nodes
+    this.addEventListener(
+      CustomEventType.NodeEditRequested,
+      this.handleNodeEditRequested.bind(this)
+    );
   }
 
   private getPosition(uuid: string, type: 'node' | 'sticky'): FlowPosition {
@@ -929,11 +963,100 @@ export class Editor extends RapidElement {
     event.stopPropagation();
   }
 
+  private handleActionEditRequested(event: CustomEvent): void {
+    // For action editing, we set the action and find the corresponding node
+    this.editingAction = event.detail.action;
+
+    // Find the node that contains this action
+    const nodeUuid = event.detail.nodeUuid;
+    const node = this.definition.nodes.find((n) => n.uuid === nodeUuid);
+
+    if (node) {
+      this.editingNode = node;
+      this.editingNodeUI = this.definition._ui.nodes[nodeUuid];
+    }
+  }
+  private handleNodeEditRequested(event: CustomEvent): void {
+    this.editingNode = event.detail.node;
+    this.editingNodeUI = event.detail.nodeUI;
+  }
+
+  private handleActionSaved(updatedAction: Action): void {
+    if (this.editingNode && this.editingAction) {
+      // Update the specific action in the node
+      const updatedActions = this.editingNode.actions.map((action) =>
+        action.uuid === this.editingAction.uuid ? updatedAction : action
+      );
+      const updatedNode = { ...this.editingNode, actions: updatedActions };
+
+      // Update the node in the store
+      getStore()?.getState().updateNode(this.editingNode.uuid, updatedNode);
+
+      // Repaint jsplumb connections in case node size changed
+      if (this.plumber) {
+        // Use requestAnimationFrame to ensure DOM has been updated first
+        requestAnimationFrame(() => {
+          this.plumber.repaintEverything();
+        });
+      }
+    }
+    this.closeNodeEditor();
+  }
+
+  private closeNodeEditor(): void {
+    this.editingNode = null;
+    this.editingNodeUI = null;
+    this.editingAction = null;
+  }
+
+  private handleActionEditCanceled(): void {
+    this.closeNodeEditor();
+  }
+
+  private handleNodeSaved(updatedNode: Node): void {
+    if (this.editingNode) {
+      // Clean up jsPlumb connections for removed exits before updating the node
+      if (this.plumber) {
+        const oldExits = this.editingNode.exits || [];
+        const newExits = updatedNode.exits || [];
+
+        // Find exits that were removed
+        const removedExits = oldExits.filter(
+          (oldExit) =>
+            !newExits.find((newExit) => newExit.uuid === oldExit.uuid)
+        );
+
+        // Remove jsPlumb connections for removed exits
+        removedExits.forEach((exit) => {
+          this.plumber.removeExitConnection(exit.uuid);
+        });
+      }
+
+      this.plumber.revalidate([updatedNode.uuid]);
+
+      // Update the node in the store
+      getStore()?.getState().updateNode(this.editingNode.uuid, updatedNode);
+
+      // Repaint jsplumb connections in case node size changed
+      if (this.plumber) {
+        // Use requestAnimationFrame to ensure DOM has been updated first
+        requestAnimationFrame(() => {
+          this.plumber.repaintEverything();
+        });
+      }
+    }
+    this.closeNodeEditor();
+  }
+
+  private handleNodeEditCanceled(): void {
+    this.closeNodeEditor();
+  }
+
   public render(): TemplateResult {
     // we have to embed our own style since we are in light DOM
     const style = html`<style>
       ${unsafeCSS(Editor.styles.cssText)}
-      ${unsafeCSS(EditorNode.styles.cssText)}
+      ${unsafeCSS(CanvasNode.styles.cssText)}
     </style>`;
 
     const stickies = this.definition?._ui?.stickies || {};
@@ -1002,6 +1125,19 @@ export class Editor extends RapidElement {
             ${this.renderSelectionBox()}
           </div>
         </div>
-      </div>`;
+      </div>
+
+      ${this.editingNode || this.editingAction
+        ? html`<temba-node-editor
+            .node=${this.editingNode}
+            .nodeUI=${this.editingNodeUI}
+            .action=${this.editingAction}
+            @temba-node-saved=${(e: CustomEvent) =>
+              this.handleNodeSaved(e.detail.node)}
+            @temba-action-saved=${(e: CustomEvent) =>
+              this.handleActionSaved(e.detail.action)}
+            @temba-node-edit-cancelled=${this.handleNodeEditCanceled}
+          ></temba-node-editor>`
+        : ''} `;
   }
 }