@nyaruka/temba-components 0.125.0 → 0.126.0

package/src/flow/EditorNode.ts

@@ -1,7 +1,7 @@
 import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { EDITOR_CONFIG, UIConfig } from './config';
 import { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';
-import { state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
 import { Plumber } from './Plumber';
@@ -12,15 +12,31 @@ export class EditorNode extends RapidElement {
     return this;
   }
 
-  @state()
+  @property({ type: Object })
   private plumber: Plumber;
 
-  @state()
+  @property({ type: Object })
   private node: Node;
 
-  @state()
+  @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 {
@@ -31,6 +47,19 @@ export class EditorNode extends RapidElement {
         border-radius: calc(var(--curvature) * 1.5);
         overflow: hidden;
         color: #333;
+        cursor: move;
+        user-select: none;
+        z-index: 500;
+      }
+
+      .node:hover {
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+      }
+
+      .node.dragging {
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
+        transform: scale(1.02);
+        z-index: 1000;
       }
         
       .action {
@@ -129,9 +158,135 @@ export class EditorNode extends RapidElement {
           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 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;
+    }
+
+    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');
+    }
+
+    // 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;
+
+    // Snap to 20px grid
+    const snappedLeft = this.snapToGrid(newLeft);
+    const snappedTop = this.snapToGrid(newTop);
+
+    // Update the UI position temporarily (for visual feedback)
+    const nodeElement = this.querySelector('.node') as HTMLElement;
+    if (nodeElement) {
+      nodeElement.style.left = `${snappedLeft}px`;
+      nodeElement.style.top = `${snappedTop}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);
+  }
+
   private renderTitle(config: UIConfig) {
     return html`<div class="title" style="background:${config.color}">
       ${config.name}
@@ -198,6 +353,10 @@ export class EditorNode extends RapidElement {
   }
 
   public render() {
+    if (!this.node || !this.ui) {
+      return html`<div class="node">Loading...</div>`;
+    }
+
     return html`
       <div
         id="${this.node.uuid}"

package/src/flow/Plumber.ts

@@ -132,4 +132,69 @@ export class Plumber {
     this.pendingConnections.push({ fromId, toId });
     this.processPendingConnections();
   }
+
+  public repaintEverything() {
+    if (this.jsPlumb) {
+      this.jsPlumb.repaintEverything();
+    }
+  }
+  public elevateNodeConnections(nodeId: string) {
+    if (!this.jsPlumb) return;
+
+    // Get all connections
+    const connections = this.jsPlumb.getConnections();
+
+    // Get the node element to find its exit elements
+    const nodeElement = document.getElementById(nodeId);
+    const exitElements = nodeElement
+      ? nodeElement.querySelectorAll('.exit')
+      : [];
+    const exitIds = Array.from(exitElements).map((exit) => exit.id);
+
+    connections.forEach((connection) => {
+      const sourceId = connection.source.id;
+      const targetId = connection.target.id;
+
+      // Check if this connection involves the dragged node:
+      // - Incoming: target is the node itself
+      // - Outgoing: source is one of the node's exits
+      if (targetId === nodeId || exitIds.includes(sourceId)) {
+        // Add elevated class to the connector element
+        const connectorElement = connection.connector.canvas;
+        if (connectorElement) {
+          connectorElement.classList.add('elevated');
+        }
+      }
+    });
+  }
+
+  public restoreNodeConnections(nodeId: string) {
+    if (!this.jsPlumb) return;
+
+    // Get all connections
+    const connections = this.jsPlumb.getConnections();
+
+    // Get the node element to find its exit elements
+    const nodeElement = document.getElementById(nodeId);
+    const exitElements = nodeElement
+      ? nodeElement.querySelectorAll('.exit')
+      : [];
+    const exitIds = Array.from(exitElements).map((exit) => exit.id);
+
+    connections.forEach((connection) => {
+      const sourceId = connection.source.id;
+      const targetId = connection.target.id;
+
+      // Check if this connection involves the node:
+      // - Incoming: target is the node itself
+      // - Outgoing: source is one of the node's exits
+      if (targetId === nodeId || exitIds.includes(sourceId)) {
+        // Remove elevated class from the connector element
+        const connectorElement = connection.connector.canvas;
+        if (connectorElement) {
+          connectorElement.classList.remove('elevated');
+        }
+      }
+    });
+  }
 }

package/src/interfaces.ts

@@ -284,5 +284,6 @@ export enum CustomEventType {
   Error = 'temba-error',
   Interrupt = 'temba-interrupt',
   Opened = 'temba-opened',
-  TicketUpdated = 'temba-ticket-updated'
+  TicketUpdated = 'temba-ticket-updated',
+  Moved = 'temba-moved'
 }

package/src/store/AppState.ts

@@ -65,6 +65,8 @@ export interface AppState {
   workspace: Workspace;
   isTranslating: boolean;
 
+  dirtyDate: Date | null;
+
   canvasSize: { width: number; height: number };
 
   fetchRevision: (endpoint: string, id?: string) => void;
@@ -77,10 +79,11 @@ export interface AppState {
   setFlowContents: (flow: FlowContents) => void;
   setFlowInfo: (info: FlowInfo) => void;
   setLanguageCode: (languageCode: string) => void;
-  setTestUpdate: () => void;
+  setDirtyDate: (date: Date) => void;
   expandCanvas: (width: number, height: number) => void;
 
   updateCanvasPositions: (positions: CanvasPositions) => void;
+  updateNodePosition(uuid: string, newPosition: FlowPosition): void;
   removeNodes: (uuids: string[]) => void;
 }
 
@@ -94,6 +97,13 @@ export const zustand = createStore<AppState>()(
       flowDefinition: null,
       flowInfo: null,
       isTranslating: false,
+      dirtyDate: null,
+
+      setDirtyDate: (date: Date) => {
+        set((state: AppState) => {
+          state.dirtyDate = date;
+        });
+      },
 
       fetchRevision: async (endpoint: string, id: string = null) => {
         if (!id) {
@@ -178,12 +188,6 @@ export const zustand = createStore<AppState>()(
         });
       },
 
-      setTestUpdate: () => {
-        set((state: AppState) => {
-          state.flowDefinition.name = 'Bloop!';
-        });
-      },
-
       expandCanvas: (width: number, height: number) => {
         set((state: AppState) => {
           const minWidth = Math.max(
@@ -211,6 +215,23 @@ export const zustand = createStore<AppState>()(
         });
       },
 
+      updateNodePosition: (uuid: string, newPosition: FlowPosition) => {
+        set((state: AppState) => {
+          if (state.flowDefinition._ui.nodes[uuid]) {
+            state.flowDefinition._ui.nodes[uuid].position = newPosition;
+          } else {
+            // If the node doesn't exist in _ui, we can add it
+            state.flowDefinition._ui.nodes[uuid] = {
+              position: newPosition,
+              type: null,
+              config: {}
+            };
+          }
+
+          state.dirtyDate = new Date();
+        });
+      },
+
       removeNodes: (uuids: string[]) => {
         set((state: AppState) => {
           for (const uuid of uuids) {

package/test/temba-chart.test.ts

@@ -146,6 +146,42 @@ describe('temba-chart', () => {
     expect(tickCallback.call({}, 604800, 9, [])).to.equal('7d'); // 1 week in seconds
     expect(tickCallback.call({}, 1209600, 10, [])).to.equal('14d'); // 2 weeks in seconds
   });
+
+  it('applies xFormat when xType is time', async () => {
+    const chart: TembaChart = await getChart({
+      xType: 'time',
+      xFormat: 'DD'
+    });
+
+    chart.data = sampleData;
+    await chart.updateComplete;
+
+    // Wait for the chart to be created after data is set
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(chart.chart).to.exist;
+    expect(chart.chart.options.scales.x.type).to.equal('time');
+    expect(
+      (chart.chart.options.scales.x as any).time.displayFormats.day
+    ).to.equal('DD');
+  });
+
+  it('does not include time config when xType is category', async () => {
+    const chart: TembaChart = await getChart({
+      xType: 'category',
+      xFormat: 'DD'
+    });
+
+    chart.data = sampleData;
+    await chart.updateComplete;
+
+    // Wait for the chart to be created after data is set
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(chart.chart).to.exist;
+    expect(chart.chart.options.scales.x.type).to.equal('category');
+    expect((chart.chart.options.scales.x as any).time).to.be.undefined;
+  });
 });
 
 describe('formatDurationFromSeconds', () => {