@nyaruka/temba-components 0.129.1 → 0.129.3

package/src/flow/EditorNode.ts

@@ -6,6 +6,7 @@ import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
 import { Plumber } from './Plumber';
 import { getStore } from '../store/Store';
+import { CustomEventType } from '../interfaces';
 
 export class EditorNode extends RapidElement {
   createRenderRoot() {
@@ -21,6 +22,18 @@ export class EditorNode extends RapidElement {
   @property({ type: Object })
   private ui: NodeUI;
 
+  // Track exits that are in "removing" state
+  private exitRemovalTimeouts: Map<string, number> = new Map();
+
+  // Set of exit UUIDs that are in the removing state
+  private exitRemovingState: Set<string> = new Set();
+
+  // Track actions that are in "removing" state
+  private actionRemovalTimeouts: Map<string, number> = new Map();
+
+  // Set of action UUIDs that are in the removing state
+  private actionRemovingState: Set<string> = new Set();
+
   static get styles() {
     return css`
 
@@ -28,8 +41,8 @@ export class EditorNode extends RapidElement {
         background-color: #fff;
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
         min-width: 200px;
-        border-radius: calc(var(--curvature) * 1.5);
-        overflow: hidden;
+        border-radius: var(--curvature);
+        
         color: #333;
         cursor: move;
         user-select: none;
@@ -45,12 +58,43 @@ export class EditorNode extends RapidElement {
         transform: scale(1.02);
         z-index: 1000;
       }
-        
+
       .action {
         max-width: 200px;
         position: relative;
       }
 
+      .action .remove-button {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: var(--color-error, #dc3545);
+        color: white;
+        border: none;
+        cursor: pointer;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        line-height: 1;
+        z-index: 10;
+      }
+
+      .action:hover .remove-button {
+        display: flex;
+      }
+
+      .action.removing .title {
+        background-color: var(--color-error, #dc3545) !important;
+      }
+
+      .action.removing .title .name {
+        color: white;
+      }
+
       .action.sortable {
         display: flex;
         align-items: stretch;
@@ -127,11 +171,13 @@ export class EditorNode extends RapidElement {
         padding: 0.75em;
         flex-grow:1;
         text-align: center;
+        display: flex;
+        flex-direction: column;
       }
 
       .action-exits {
-        padding-bottom: 0.75em;
-        margin-top: -0.75em;
+        padding-bottom: 0.6em;
+        margin-top: -0.8em;
       }
 
       .category .title {
@@ -148,9 +194,90 @@ export class EditorNode extends RapidElement {
         display: inline-block;
       }
       
+      .exit-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        margin-bottom: -1.2em;
+        padding-top:0.2em;
+      }
+
       .exit {
-        padding-top: 10px;
-        margin-bottom: -10px;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background-color: tomato;
+        position: relative;
+        box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
+        cursor: pointer;
+        pointer-events: none;
+      }
+
+      .exit.jtk-connected {
+        background: var(--color-connectors, #e6e6e6);
+      }
+
+      .exit.connected {
+        background-color: #fff;
+        pointer-events: all;
+      }
+
+      .exit.connected:hover {
+        background-color: var(--color-connectors, #e6e6e6);
+      }
+      
+      .exit.removing, .exit.removing:hover {
+        background-color: var(--color-error);
+        pointer-events: all;
+      }
+      
+      .exit.removing::before {
+        content: '✕';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 8px;
+        color: white;
+        line-height: 1;
+      }
+      
+      /* Connector in removing state */
+      :host {
+        --color-connector-removing: var(--color-error);
+      }
+      
+      body svg.plumb-connector.removing path {
+        stroke: var(--color-connector-removing, tomato) !important;
+        stroke-width: 3px;
+      }
+      
+      body .plumb-connector.removing .plumb-arrow {
+        fill: var(--color-connector-removing, tomato) !important;
+        stroke: var(--color-connector-removing, transparent) !important;
+      }
+
+      .category:first-child {
+        border-bottom-left-radius: var(--curvature);
+      }
+
+      .category:last-child {
+        border-bottom-right-radius: var(--curvature);
+      }
+
+      .router .title {
+        border-top-left-radius: var(--curvature);
+        border-top-right-radius: var(--curvature);
+      }
+
+      .action{
+        overflow: hidden;
+      }
+
+      .action:first-child .title {
+        border-top-left-radius: var(--curvature);
+        border-top-right-radius: var(--curvature);
       }
   }`;
   }
@@ -167,12 +294,15 @@ export class EditorNode extends RapidElement {
     if (changes.has('node')) {
       // make our initial connections
       if (changes.get('node') === undefined) {
-        // this.plumber.makeTarget(this.node.uuid);
         for (const exit of this.node.exits) {
           if (!exit.destination_uuid) {
             this.plumber.makeSource(exit.uuid);
           } else {
-            this.plumber.connectIds(exit.uuid, exit.destination_uuid);
+            this.plumber.connectIds(
+              this.node.uuid,
+              exit.uuid,
+              exit.destination_uuid
+            );
           }
         }
       }
@@ -189,6 +319,167 @@ export class EditorNode extends RapidElement {
     }
   }
 
+  disconnectedCallback() {
+    // Remove the event listener when the component is removed
+    super.disconnectedCallback();
+
+    // Clear any pending exit removal timeouts
+    this.exitRemovalTimeouts.forEach((timeoutId) => {
+      clearTimeout(timeoutId);
+    });
+    this.exitRemovalTimeouts.clear();
+
+    // Clear any pending action removal timeouts
+    this.actionRemovalTimeouts.forEach((timeoutId) => {
+      clearTimeout(timeoutId);
+    });
+    this.actionRemovalTimeouts.clear();
+
+    // Clear the removing state
+    this.exitRemovingState.clear();
+    this.actionRemovingState.clear();
+  }
+
+  private handleExitClick(event: MouseEvent, exit: Exit) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const exitId = exit.uuid;
+
+    // If exit is not connected, do nothing
+    if (!exit.destination_uuid) return;
+
+    // If the exit is already in removing state, perform the disconnect
+    if (this.exitRemovingState.has(exitId)) {
+      this.disconnectExit(exit);
+      return;
+    }
+
+    // Start removal UI state
+    this.exitRemovingState.add(exitId);
+    this.requestUpdate();
+
+    // Set the connection to removing state
+    this.plumber.setConnectionRemovingState(exitId, true);
+
+    // Clear any existing timeout for this exit
+    if (this.exitRemovalTimeouts.has(exitId)) {
+      clearTimeout(this.exitRemovalTimeouts.get(exitId));
+    }
+
+    // Set timeout to reset UI if user doesn't click
+    const timeoutId = window.setTimeout(() => {
+      this.exitRemovingState.delete(exitId);
+      this.exitRemovalTimeouts.delete(exitId);
+
+      // Reset the connection to normal state
+      this.plumber.setConnectionRemovingState(exitId, false);
+
+      this.requestUpdate();
+    }, 1500);
+
+    this.exitRemovalTimeouts.set(exitId, timeoutId);
+  }
+
+  private disconnectExit(exit: Exit) {
+    const exitId = exit.uuid;
+
+    // Clear the UI state
+    this.exitRemovingState.delete(exitId);
+
+    // Reset the connection to normal state (this will be redundant as we're about to remove it,
+    // but it's safer to do this in case there's any timing issue)
+    this.plumber.setConnectionRemovingState(exitId, false);
+
+    // Clear any timeout
+    if (this.exitRemovalTimeouts.has(exitId)) {
+      clearTimeout(this.exitRemovalTimeouts.get(exitId));
+      this.exitRemovalTimeouts.delete(exitId);
+    }
+
+    // Remove the JSPlumb connection
+    this.plumber.removeExitConnection(exitId);
+
+    // Update the flow definition
+    const updatedExit = { ...exit, destination_uuid: null };
+    const updatedExits = this.node.exits.map((e) =>
+      e.uuid === exitId ? updatedExit : e
+    );
+
+    // Update the node
+    const updatedNode = { ...this.node, exits: updatedExits };
+    getStore()?.getState().updateNode(this.node.uuid, updatedNode);
+
+    // Request update to reflect changes
+    this.requestUpdate();
+  }
+
+  private handleActionRemoveClick(
+    event: MouseEvent,
+    action: Action,
+    index: number
+  ) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const actionId = action.uuid;
+
+    // If the action is already in removing state, perform the removal
+    if (this.actionRemovingState.has(actionId)) {
+      this.removeAction(action, index);
+      return;
+    }
+
+    // Start removal UI state
+    this.actionRemovingState.add(actionId);
+    this.requestUpdate();
+
+    // Clear any existing timeout for this action
+    if (this.actionRemovalTimeouts.has(actionId)) {
+      clearTimeout(this.actionRemovalTimeouts.get(actionId));
+    }
+
+    // Set timeout to reset UI if user doesn't click
+    const timeoutId = window.setTimeout(() => {
+      this.actionRemovingState.delete(actionId);
+      this.actionRemovalTimeouts.delete(actionId);
+      this.requestUpdate();
+    }, 1000); // 1 second as per requirements
+
+    this.actionRemovalTimeouts.set(actionId, timeoutId);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  private removeAction(action: Action, _index: number) {
+    const actionId = action.uuid;
+
+    // Clear the UI state
+    this.actionRemovingState.delete(actionId);
+
+    // Clear any timeout
+    if (this.actionRemovalTimeouts.has(actionId)) {
+      clearTimeout(this.actionRemovalTimeouts.get(actionId));
+      this.actionRemovalTimeouts.delete(actionId);
+    }
+
+    // Remove the action from the node
+    const updatedActions = this.node.actions.filter((a) => a.uuid !== actionId);
+
+    // If no actions remain, remove the entire node
+    if (updatedActions.length === 0) {
+      this.fireCustomEvent(CustomEventType.NodeDeleted, {
+        uuid: this.node.uuid
+      });
+    } else {
+      // Update the node with remaining actions
+      const updatedNode = { ...this.node, actions: updatedActions };
+      getStore()?.getState().updateNode(this.node.uuid, updatedNode);
+
+      // Request update to reflect changes
+      this.requestUpdate();
+    }
+  }
+
   private handleActionOrderChanged(event: CustomEvent) {
     const [fromIdx, toIdx] = event.detail.swap;
 
@@ -207,26 +498,35 @@ export class EditorNode extends RapidElement {
       .updateNode(this.node.uuid, { ...this.node, actions: newActions });
   }
 
-  private renderTitle(config: UIConfig) {
+  private renderTitle(config: UIConfig, isRemoving: boolean = false) {
     return html`<div class="title" style="background:${config.color}">
       ${this.node?.actions?.length > 1
         ? html`<temba-icon class="drag-handle" name="sort"></temba-icon>`
         : null}
 
-      <div class="name">${config.name}</div>
+      <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
     </div>`;
   }
 
   private renderAction(node: Node, action: Action, index: number) {
     const config = EDITOR_CONFIG[action.type];
+    const isRemoving = this.actionRemovingState.has(action.uuid);
 
     if (config) {
       return html`<div
-        class="action sortable ${action.type}"
+        class="action sortable ${action.type} ${isRemoving ? 'removing' : ''}"
         id="action-${index}"
       >
+        <button
+          class="remove-button"
+          @click=${(e: MouseEvent) =>
+            this.handleActionRemoveClick(e, action, index)}
+          title="Remove action"
+        >
+          ✕
+        </button>
         <div class="action-content">
-          ${this.renderTitle(config)}
+          ${this.renderTitle(config, isRemoving)}
           <div class="body">
             ${config.render
               ? config.render(node, action)
@@ -235,7 +535,18 @@ export class EditorNode extends RapidElement {
         </div>
       </div>`;
     }
-    return html`<div class="action sortable" id="action-${index}">
+    return html`<div
+      class="action sortable ${isRemoving ? 'removing' : ''}"
+      id="action-${index}"
+    >
+      <button
+        class="remove-button"
+        @click=${(e: MouseEvent) =>
+          this.handleActionRemoveClick(e, action, index)}
+        title="Remove action"
+      >
+        ✕
+      </button>
       ${action.type}
     </div>`;
   }
@@ -244,7 +555,7 @@ export class EditorNode extends RapidElement {
     const config = EDITOR_CONFIG[ui.type];
     if (config) {
       return html`<div class="router">
-        ${this.renderTitle(config)}
+        ${this.renderTitle(config, false)}
         ${router.result_name
           ? html`<div class="body">
               Save as
@@ -274,13 +585,17 @@ export class EditorNode extends RapidElement {
   }
 
   private renderExit(exit: Exit): TemplateResult {
-    return html`<div
-      id="${exit.uuid}"
-      class=${getClasses({
-        exit: true,
-        connected: !!exit.destination_uuid
-      })}
-    ></div>`;
+    return html`<div class="exit-wrapper">
+      <div
+        id="${exit.uuid}"
+        class=${getClasses({
+          exit: true,
+          connected: !!exit.destination_uuid,
+          removing: this.exitRemovingState.has(exit.uuid)
+        })}
+        @click=${(e: MouseEvent) => this.handleExitClick(e, exit)}
+      ></div>
+    </div>`;
   }
 
   public render() {