@nyaruka/temba-components 0.127.0 → 0.128.0

package/src/flow/Editor.ts

@@ -1,7 +1,7 @@
 import { html, TemplateResult } from 'lit-html';
 import { css, PropertyValueMap, unsafeCSS } from 'lit';
-import { property } from 'lit/decorators.js';
-import { FlowDefinition } from '../store/flow-definition';
+import { property, state } from 'lit/decorators.js';
+import { FlowDefinition, FlowPosition } from '../store/flow-definition';
 import { getStore } from '../store/Store';
 import { AppState, fromStore, zustand } from '../store/AppState';
 import { RapidElement } from '../RapidElement';
@@ -9,8 +9,21 @@ import { RapidElement } from '../RapidElement';
 import { Plumber } from './Plumber';
 import { EditorNode } from './EditorNode';
 
+export function snapToGrid(value: number): number {
+  return Math.round(value / 20) * 20;
+}
+
 const SAVE_QUIET_TIME = 500;
 
+export interface DraggableItem {
+  uuid: string;
+  position: FlowPosition;
+  element: HTMLElement;
+  type: 'node' | 'sticky';
+}
+
+const DRAG_THRESHOLD = 10;
+
 export class Editor extends RapidElement {
   // unfortunately, jsplumb requires that we be in light DOM
   createRenderRoot() {
@@ -38,6 +51,20 @@ export class Editor extends RapidElement {
   @fromStore(zustand, (state: AppState) => state.dirtyDate)
   private dirtyDate!: Date;
 
+  // Drag state
+  @state()
+  private isDragging = false;
+  private isMouseDown = false;
+  private dragStartPos = { x: 0, y: 0 };
+
+  @state()
+  private currentDragItem: DraggableItem | null = null;
+  private startPos = { left: 0, top: 0 };
+
+  // Bound event handlers to maintain proper 'this' context
+  private boundMouseMove = this.handleMouseMove.bind(this);
+  private boundMouseUp = this.handleMouseUp.bind(this);
+
   static get styles() {
     return css`
       #editor {
@@ -86,6 +113,15 @@ export class Editor extends RapidElement {
         margin: 20px;
       }
 
+      #canvas > .draggable {
+        position: absolute;
+        z-index: 100;
+      }
+
+      #canvas > .dragging {
+        z-index: 10000 !important;
+      }
+
       body .jtk-endpoint {
         width: initial;
         height: initial;
@@ -183,6 +219,7 @@ export class Editor extends RapidElement {
   ): void {
     super.firstUpdated(changes);
     this.plumber = new Plumber(this.querySelector('#canvas'));
+    this.setupGlobalEventListeners();
     if (changes.has('flow')) {
       getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
     }
@@ -196,6 +233,10 @@ export class Editor extends RapidElement {
       // console.log('Setting canvas size', this.canvasSize);
     }
 
+    if (changes.has('definition')) {
+      this.updateCanvasSize();
+    }
+
     if (changes.has('dirtyDate')) {
       if (this.dirtyDate) {
         this.debouncedSave();
@@ -234,6 +275,189 @@ export class Editor extends RapidElement {
       clearTimeout(this.saveTimer);
       this.saveTimer = null;
     }
+    document.removeEventListener('mousemove', this.boundMouseMove);
+    document.removeEventListener('mouseup', this.boundMouseUp);
+  }
+
+  private setupGlobalEventListeners(): void {
+    document.addEventListener('mousemove', this.boundMouseMove);
+    document.addEventListener('mouseup', this.boundMouseUp);
+  }
+
+  private getPosition(uuid: string, type: 'node' | 'sticky'): FlowPosition {
+    if (type === 'node') {
+      return this.definition._ui.nodes[uuid]?.position;
+    } else {
+      return this.definition._ui.stickies?.[uuid]?.position;
+    }
+  }
+
+  private updatePosition(
+    uuid: string,
+    type: 'node' | 'sticky',
+    position: FlowPosition
+  ): void {
+    if (type === 'node') {
+      getStore().getState().updateNodePosition(uuid, position);
+    } else {
+      const currentSticky = this.definition._ui.stickies?.[uuid];
+      if (currentSticky) {
+        getStore()
+          .getState()
+          .updateStickyNote(uuid, {
+            ...currentSticky,
+            position
+          });
+      }
+    }
+  }
+
+  private handleMouseDown(event: MouseEvent): void {
+    const element = event.currentTarget as HTMLElement;
+    // Only start dragging if clicking on the element itself, not on exits or other interactive elements
+    const target = event.target as HTMLElement;
+    if (target.classList.contains('exit') || target.closest('.exit')) {
+      return;
+    }
+
+    const uuid = element.getAttribute('uuid');
+    const type = element.tagName === 'TEMBA-FLOW-NODE' ? 'node' : 'sticky';
+
+    const position = this.getPosition(uuid, type);
+    if (!position) return;
+
+    // Set up potential drag state, but don't start dragging yet
+    this.isMouseDown = true;
+    this.dragStartPos = { x: event.clientX, y: event.clientY };
+    this.startPos = { left: position.left, top: position.top };
+    this.currentDragItem = {
+      uuid,
+      position,
+      element,
+      type
+    };
+
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  private handleMouseMove(event: MouseEvent): void {
+    if (!this.isMouseDown || !this.currentDragItem) return;
+
+    const deltaX = event.clientX - this.dragStartPos.x;
+    const deltaY = event.clientY - this.dragStartPos.y;
+    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+    // Only start dragging if we've moved beyond the threshold
+    if (!this.isDragging && distance > DRAG_THRESHOLD) {
+      this.isDragging = true;
+
+      // If this is a node, elevate connections
+      if (this.currentDragItem.type === 'node' && this.plumber) {
+        this.plumber.elevateNodeConnections(this.currentDragItem.uuid);
+      }
+    }
+
+    // If we're actually dragging, update positions
+    if (this.isDragging) {
+      const newLeft = this.startPos.left + deltaX;
+      const newTop = this.startPos.top + deltaY;
+
+      // Update the visual position during drag
+      this.currentDragItem.element.style.left = `${newLeft}px`;
+      this.currentDragItem.element.style.top = `${newTop}px`;
+
+      // Repaint connections if this is a node
+      if (this.currentDragItem.type === 'node' && this.plumber) {
+        this.plumber.repaintEverything();
+      }
+    }
+  }
+
+  private handleMouseUp(event: MouseEvent): void {
+    if (!this.isMouseDown || !this.currentDragItem) return;
+
+    // If we were actually dragging, handle the drag end
+    if (this.isDragging) {
+      // Restore normal z-index for node connections
+      if (this.currentDragItem.type === 'node' && this.plumber) {
+        this.plumber.restoreNodeConnections(this.currentDragItem.uuid);
+      }
+
+      const deltaX = event.clientX - this.dragStartPos.x;
+      const deltaY = event.clientY - this.dragStartPos.y;
+
+      const newLeft = this.startPos.left + deltaX;
+      const newTop = this.startPos.top + deltaY;
+
+      // Snap to 20px grid for final position
+      const snappedLeft = snapToGrid(newLeft);
+      const snappedTop = snapToGrid(newTop);
+
+      const newPosition = { left: snappedLeft, top: snappedTop };
+
+      // Update the store with the new snapped position
+      this.updatePosition(
+        this.currentDragItem.uuid,
+        this.currentDragItem.type,
+        newPosition
+      );
+
+      // Update canvas positions for nodes
+      if (this.currentDragItem.type === 'node') {
+        getStore()
+          .getState()
+          .updateCanvasPositions({
+            [this.currentDragItem.uuid]: newPosition
+          });
+      }
+
+      // Repaint connections if this is a node
+      if (this.currentDragItem.type === 'node' && this.plumber) {
+        this.plumber.repaintEverything();
+      }
+    }
+
+    // Reset all drag state
+    this.isDragging = false;
+    this.isMouseDown = false;
+    this.currentDragItem = null;
+  }
+
+  private updateCanvasSize(): void {
+    if (!this.definition) return;
+
+    const store = getStore();
+    if (!store) return;
+
+    // Calculate required canvas size based on all elements
+    let maxWidth = 0;
+    let maxHeight = 0;
+
+    // Check node positions
+    this.definition.nodes.forEach((node) => {
+      const ui = this.definition._ui.nodes[node.uuid];
+      if (ui && ui.position) {
+        const nodeElement = this.querySelector(`[id="${node.uuid}"]`);
+        if (nodeElement) {
+          const rect = nodeElement.getBoundingClientRect();
+          maxWidth = Math.max(maxWidth, ui.position.left + rect.width);
+          maxHeight = Math.max(maxHeight, ui.position.top + rect.height);
+        }
+      }
+    });
+
+    // Check sticky note positions
+    const stickies = this.definition._ui?.stickies || {};
+    Object.values(stickies).forEach((sticky) => {
+      if (sticky.position) {
+        maxWidth = Math.max(maxWidth, sticky.position.left + 200); // Sticky note width
+        maxHeight = Math.max(maxHeight, sticky.position.top + 100); // Sticky note height
+      }
+    });
+
+    // Update canvas size in store
+    store.getState().expandCanvas(maxWidth, maxHeight);
   }
 
   public render(): TemplateResult {
@@ -243,6 +467,8 @@ export class Editor extends RapidElement {
       ${unsafeCSS(EditorNode.styles.cssText)}
     </style>`;
 
+    const stickies = this.definition?._ui?.stickies || {};
+
     return html`${style}
       <div id="editor">
         <div
@@ -253,13 +479,37 @@ export class Editor extends RapidElement {
           <div id="canvas">
             ${this.definition
               ? this.definition.nodes.map((node) => {
+                  const position =
+                    this.definition._ui.nodes[node.uuid].position;
+
+                  const dragging =
+                    this.isDragging && this.currentDragItem?.uuid === node.uuid;
+
                   return html`<temba-flow-node
+                    class="draggable ${dragging ? 'dragging' : ''}"
+                    @mousedown=${this.handleMouseDown.bind(this)}
+                    uuid=${node.uuid}
+                    style="left:${position.left}px; top:${position.top}px"
                     .plumber=${this.plumber}
                     .node=${node}
                     .ui=${this.definition._ui.nodes[node.uuid]}
                   ></temba-flow-node>`;
                 })
               : html`<temba-loading></temba-loading>`}
+            ${Object.entries(stickies).map(([uuid, sticky]) => {
+              const position = sticky.position || { left: 0, top: 0 };
+              const dragging =
+                this.isDragging && this.currentDragItem?.uuid === uuid;
+              return html`<temba-sticky-note
+                class="draggable ${dragging ? 'dragging' : ''}"
+                @mousedown=${this.handleMouseDown.bind(this)}
+                style="left:${position.left}px; top:${position.top}px; z-index: ${1000 +
+                position.top}"
+                uuid=${uuid}
+                .data=${sticky}
+                .dragging=${dragging}
+              ></temba-sticky-note>`;
+            })}
           </div>
         </div>
       </div>`;

package/src/flow/EditorNode.ts

@@ -21,26 +21,10 @@ export class EditorNode extends RapidElement {
   @property({ type: Object })
   private ui: NodeUI;
 
-  // Drag state properties
-  private isDragging = false;
-  private dragStartPos = { x: 0, y: 0 };
-  private nodeStartPos = { left: 0, top: 0 };
-
-  // Bound event handlers to maintain proper 'this' context
-  private boundMouseMove = this.handleMouseMove.bind(this);
-  private boundMouseUp = this.handleMouseUp.bind(this);
-
-  /**
-   * Snaps a coordinate value to the nearest 20px grid position
-   */
-  private snapToGrid(value: number): number {
-    return Math.round(value / 20) * 20;
-  }
-
   static get styles() {
     return css`
+
       .node {
-        position: absolute;
         background-color: #fff;
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
         min-width: 200px;
@@ -49,7 +33,7 @@ export class EditorNode extends RapidElement {
         color: #333;
         cursor: move;
         user-select: none;
-        z-index: 500;
+
       }
 
       .node:hover {
@@ -64,21 +48,59 @@ export class EditorNode extends RapidElement {
         
       .action {
         max-width: 200px;
+        position: relative;
+      }
+
+      .action.sortable {
+        display: flex;
+        align-items: stretch;
+      }
+
+      .action .action-content {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
       }
 
       .action .body {
         padding: 1em;
       }
 
+      .action .drag-handle {
+        opacity: 0;
+        transition: all 200ms ease-in-out;
+        cursor: move;
+        background: rgba(0, 0, 0, 0.02);
+        max-width:0px;
+        position: absolute;
+      }
+
+      .action:hover .drag-handle {
+        opacity: 0.5;
+        padding: 0.25em;
+        max-width: 20px;
+      }
+
+      .action .drag-handle:hover {
+        opacity: 1;
+        
+      }
+
       .action .title,
       .router .title {
+        display: flex;
         color: #fff;
         padding: 5px 1px;
         text-align: center;
         font-size: 1em;
         font-weight: normal;
+
       }
 
+      .title .name {
+        flex-grow: 1;
+        }
+
       .quick-replies {
         margin-top: 0.5em;
       }
@@ -133,176 +155,89 @@ export class EditorNode extends RapidElement {
   }`;
   }
 
+  constructor() {
+    super();
+    this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);
+  }
+
   protected updated(
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
     super.updated(changes);
     if (changes.has('node')) {
-      this.plumber.makeTarget(this.node.uuid);
-
-      // our node was changed, see if we have new destinations
-      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);
+      // 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);
+          }
         }
       }
 
-      const ele = this.querySelector('.node');
+      const ele = this.parentElement;
       const rect = ele.getBoundingClientRect();
 
       getStore()
-        .getState()
+        ?.getState()
         .expandCanvas(
           this.ui.position.left + rect.width,
           this.ui.position.top + rect.height
         );
-
-      // Add drag event listeners to the node
-      this.addDragEventListeners();
     }
   }
 
-  private addDragEventListeners(): void {
-    const nodeElement = this.querySelector('.node') as HTMLElement;
-    if (!nodeElement) return;
-
-    nodeElement.addEventListener('mousedown', this.handleMouseDown.bind(this));
-    document.addEventListener('mousemove', this.boundMouseMove);
-    document.addEventListener('mouseup', this.boundMouseUp);
-  }
+  private handleActionOrderChanged(event: CustomEvent) {
+    const [fromIdx, toIdx] = event.detail.swap;
 
-  private handleMouseDown(event: MouseEvent): void {
-    // Only start dragging if clicking on the node itself, not on exits or other interactive elements
-    const target = event.target as HTMLElement;
-    if (target.classList.contains('exit') || target.closest('.exit')) {
-      return;
-    }
+    // swap our actions
+    const newActions = [...this.node.actions];
+    const movedAction = newActions.splice(fromIdx, 1)[0];
+    newActions.splice(toIdx, 0, movedAction);
 
-    this.isDragging = true;
-    this.dragStartPos = { x: event.clientX, y: event.clientY };
-    this.nodeStartPos = {
-      left: this.ui.position.left,
-      top: this.ui.position.top
-    };
-
-    // Add dragging class for visual feedback
-    const nodeElement = this.querySelector('.node') as HTMLElement;
-    if (nodeElement) {
-      nodeElement.classList.add('dragging');
-    }
+    // udate our internal reprensentation, this isn't strictly necessary
+    // since the editor will update us from it's definition subscription
+    // but it makes testing a lot easier
+    this.node = { ...this.node, actions: newActions };
 
-    // Elevate connections for this node during dragging
-    if (this.plumber) {
-      this.plumber.elevateNodeConnections(this.node.uuid);
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-  }
-
-  private handleMouseMove(event: MouseEvent): void {
-    if (!this.isDragging) return;
-
-    const deltaX = event.clientX - this.dragStartPos.x;
-    const deltaY = event.clientY - this.dragStartPos.y;
-
-    const newLeft = this.nodeStartPos.left + deltaX;
-    const newTop = this.nodeStartPos.top + deltaY;
-
-    // Update the UI position temporarily (for visual feedback)
-    const nodeElement = this.querySelector('.node') as HTMLElement;
-    if (nodeElement) {
-      nodeElement.style.left = `${newLeft}px`;
-      nodeElement.style.top = `${newTop}px`;
-    }
-
-    // Repaint connections during dragging for smooth updates
-    if (this.plumber) {
-      this.plumber.repaintEverything();
-    }
-  }
-
-  private handleMouseUp(event: MouseEvent): void {
-    if (!this.isDragging) return;
-
-    this.isDragging = false;
-
-    // Remove dragging class
-    const nodeElement = this.querySelector('.node') as HTMLElement;
-    if (nodeElement) {
-      nodeElement.classList.remove('dragging');
-    }
-
-    // Restore normal z-index for connections
-    if (this.plumber) {
-      this.plumber.restoreNodeConnections(this.node.uuid);
-    }
-
-    const deltaX = event.clientX - this.dragStartPos.x;
-    const deltaY = event.clientY - this.dragStartPos.y;
-
-    const newLeft = this.nodeStartPos.left + deltaX;
-    const newTop = this.nodeStartPos.top + deltaY;
-
-    // Snap to 20px grid for final position
-    const snappedLeft = this.snapToGrid(newLeft);
-    const snappedTop = this.snapToGrid(newTop);
-
-    // Update the store with the new snapped position
-    const newPosition = { left: snappedLeft, top: snappedTop };
     getStore()
-      .getState()
-      .updateCanvasPositions({
-        [this.node.uuid]: newPosition
-      });
-
-    // Repaint connections if plumber is available
-    if (this.plumber) {
-      this.plumber.repaintEverything();
-    }
-
-    getStore().getState().updateNodePosition(this.node.uuid, newPosition);
-
-    // Fire a custom event with the new coordinates
-    /*this.fireCustomEvent(CustomEventType.Moved, {
-      nodeId: this.node.uuid,
-      position: newPosition,
-      oldPosition: {
-        left: this.nodeStartPos.left,
-        top: this.nodeStartPos.top
-      }
-    });*/
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    // Clean up event listeners
-    document.removeEventListener('mousemove', this.boundMouseMove);
-    document.removeEventListener('mouseup', this.boundMouseUp);
+      ?.getState()
+      .updateNode(this.node.uuid, { ...this.node, actions: newActions });
   }
 
   private renderTitle(config: UIConfig) {
     return html`<div class="title" style="background:${config.color}">
-      ${config.name}
+      ${this.node?.actions?.length > 1
+        ? html`<temba-icon class="drag-handle" name="sort"></temba-icon>`
+        : null}
+
+      <div class="name">${config.name}</div>
     </div>`;
   }
 
-  private renderAction(node: Node, action: Action) {
+  private renderAction(node: Node, action: Action, index: number) {
     const config = EDITOR_CONFIG[action.type];
 
     if (config) {
-      return html`<div class="action ${action.type}">
-        ${this.renderTitle(config)}
-        <div class="body">
-          ${config.render
-            ? config.render(node, action)
-            : html`<pre>${action.type}</pre>`}
+      return html`<div
+        class="action sortable ${action.type}"
+        id="action-${index}"
+      >
+        <div class="action-content">
+          ${this.renderTitle(config)}
+          <div class="body">
+            ${config.render
+              ? config.render(node, action)
+              : html`<pre>${action.type}</pre>`}
+          </div>
         </div>
       </div>`;
     }
-    return html`<div>${action.type}</div>`;
+    return html`<div class="action sortable" id="action-${index}">
+      ${action.type}
+    </div>`;
   }
 
   private renderRouter(router: Router, ui: NodeUI) {
@@ -359,9 +294,16 @@ export class EditorNode extends RapidElement {
         class="node"
         style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
       >
-        ${this.node.actions.map((actionSpec) => {
-          return this.renderAction(this.node, actionSpec);
-        })}
+        ${this.node.actions.length > 0
+          ? html`<temba-sortable-list
+              dragHandle="drag-handle"
+              @temba-order-changed="${this.handleActionOrderChanged}"
+            >
+              ${this.node.actions.map((actionSpec, index) => {
+                return this.renderAction(this.node, actionSpec, index);
+              })}
+            </temba-sortable-list>`
+          : ''}
         ${this.node.router
           ? html` ${this.renderRouter(this.node.router, this.ui)}
             ${this.renderCategories(this.node)}`