@nyaruka/temba-components 0.126.0 → 0.128.0

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

@@ -1 +1 @@
-{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../src/flow/Editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit-html';\nimport { css, PropertyValueMap, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FlowDefinition } from '../store/flow-definition';\nimport { getStore } from '../store/Store';\nimport { AppState, fromStore, zustand } from '../store/AppState';\nimport { RapidElement } from '../RapidElement';\n\nimport { Plumber } from './Plumber';\nimport { EditorNode } from './EditorNode';\n\nconst SAVE_QUIET_TIME = 500;\n\nexport class Editor extends RapidElement {\n  // unfortunately, jsplumb requires that we be in light DOM\n  createRenderRoot() {\n    return this;\n  }\n\n  // this is the master plumber\n  private plumber: Plumber;\n\n  // timer for debounced saving\n  private saveTimer: number | null = null;\n\n  @property({ type: String })\n  public flow: string;\n\n  @property({ type: String })\n  public version: string;\n\n  @fromStore(zustand, (state: AppState) => state.flowDefinition)\n  private definition!: FlowDefinition;\n\n  @fromStore(zustand, (state: AppState) => state.canvasSize)\n  private canvasSize!: { width: number; height: number };\n\n  @fromStore(zustand, (state: AppState) => state.dirtyDate)\n  private dirtyDate!: Date;\n\n  static get styles() {\n    return css`\n      #editor {\n        overflow: scroll;\n        flex: 1;\n      }\n\n      #grid {\n        position: relative;\n        background-color: #f9f9f9;\n        background-position: 10px 10px;\n        background-image: linear-gradient(\n            0deg,\n            transparent 24%,\n            rgba(61, 177, 255, 0.15) 25%,\n            rgba(61, 177, 255, 0.15) 26%,\n            transparent 27%,\n            transparent 74%,\n            rgba(61, 177, 255, 0.15) 75%,\n            rgba(61, 177, 255, 0.15) 76%,\n            transparent 77%,\n            transparent\n          ),\n          linear-gradient(\n            90deg,\n            transparent 24%,\n            rgba(61, 177, 255, 0.15) 25%,\n            rgba(61, 177, 255, 0.15) 26%,\n            transparent 27%,\n            transparent 74%,\n            rgba(61, 177, 255, 0.15) 75%,\n            rgba(61, 177, 255, 0.15) 76%,\n            transparent 77%,\n            transparent\n          );\n        background-size: 40px 40px;\n        box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.05);\n        border-top: 1px solid #e0e0e0;\n        display: inline-block;\n        width: 100%;\n      }\n\n      #canvas {\n        position: relative;\n        padding: 20px;\n        margin: 20px;\n      }\n\n      body .jtk-endpoint {\n        width: initial;\n        height: initial;\n      }\n\n      .jtk-endpoint {\n        z-index: 600;\n      }\n\n      .plumb-source {\n        z-index: 600;\n        border: 0px solid var(--color-connectors);\n      }\n\n      .plumb-source.connected {\n        box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.1);\n        border-radius: 50%;\n      }\n\n      .plumb-source circle {\n        fill: tomato;\n      }\n\n      .plumb-source.connected circle {\n        fill: #fff;\n      }\n\n      .plumb-source svg {\n        fill: var(--color-connectors) !important;\n        stroke: var(--color-connectors);\n      }\n\n      .plumb-target {\n        margin-top: -6px;\n        z-index: 600;\n        opacity: 0;\n        cursor: pointer;\n      }\n\n      body .plumb-connector path {\n        stroke: var(--color-connectors) !important;\n        stroke-width: 3px;\n        z-index: 10;\n      }\n\n      body .plumb-connector {\n        z-index: 10;\n      }\n\n      body .plumb-connector.elevated {\n        z-index: 550;\n      }\n\n      body .plumb-connector.elevated path {\n        stroke: var(--color-connectors) !important;\n        stroke-width: 3px;\n        z-index: 550;\n      }\n\n      body .plumb-connector.elevated .plumb-arrow {\n        fill: var(--color-connectors);\n        stroke: var(--color-connectors);\n        stroke-width: 0px;\n        margin-top: 6px;\n        z-index: 550;\n      }\n\n      body .plumb-connector .plumb-arrow {\n        fill: var(--color-connectors);\n        stroke: var(--color-connectors);\n        stroke-width: 0px;\n        margin-top: 6px;\n        z-index: 10;\n      }\n\n      body svg.jtk-connector.jtk-hover path {\n        stroke: var(--color-success) !important;\n        stroke-width: 3px;\n      }\n\n      body .plumb-connector.jtk-hover .plumb-arrow {\n        fill: var(--color-success) !important;\n        stroke-width: 0px;\n        z-index: 10;\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n    this.plumber = new Plumber(this.querySelector('#canvas'));\n    if (changes.has('flow')) {\n      getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);\n    }\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('canvasSize')) {\n      // console.log('Setting canvas size', this.canvasSize);\n    }\n\n    if (changes.has('dirtyDate')) {\n      if (this.dirtyDate) {\n        this.debouncedSave();\n      }\n    }\n  }\n\n  private debouncedSave(): void {\n    // Clear any existing timer\n    if (this.saveTimer !== null) {\n      clearTimeout(this.saveTimer);\n    }\n\n    this.saveTimer = window.setTimeout(() => {\n      const now = new Date();\n      const timeSinceLastChange = now.getTime() - this.dirtyDate.getTime();\n\n      if (timeSinceLastChange >= SAVE_QUIET_TIME) {\n        this.saveChanges();\n        this.saveTimer = null;\n      } else {\n        this.debouncedSave();\n      }\n    }, SAVE_QUIET_TIME);\n  }\n\n  private saveChanges(): void {\n    // post the flow definition to the server\n    getStore().postJSON(`/flow/revisions/${this.flow}`, this.definition);\n    getStore().getState().setDirtyDate(null);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.saveTimer !== null) {\n      clearTimeout(this.saveTimer);\n      this.saveTimer = null;\n    }\n  }\n\n  public render(): TemplateResult {\n    // we have to embed our own style since we are in light DOM\n    const style = html`<style>\n      ${unsafeCSS(Editor.styles.cssText)}\n      ${unsafeCSS(EditorNode.styles.cssText)}\n    </style>`;\n\n    return html`${style}\n      <div id=\"editor\">\n        <div\n          id=\"grid\"\n          style=\"min-width:100%;width:${this.canvasSize.width}px; height:${this\n            .canvasSize.height}px\"\n        >\n          <div id=\"canvas\">\n            ${this.definition\n              ? this.definition.nodes.map((node) => {\n                  return html`<temba-flow-node\n                    .plumber=${this.plumber}\n                    .node=${node}\n                    .ui=${this.definition._ui.nodes[node.uuid]}\n                  ></temba-flow-node>`;\n                })\n              : html`<temba-loading></temba-loading>`}\n          </div>\n        </div>\n      </div>`;\n  }\n}\n"]}
+{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../src/flow/Editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit-html';\nimport { css, PropertyValueMap, unsafeCSS } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { FlowDefinition, FlowPosition } from '../store/flow-definition';\nimport { getStore } from '../store/Store';\nimport { AppState, fromStore, zustand } from '../store/AppState';\nimport { RapidElement } from '../RapidElement';\n\nimport { Plumber } from './Plumber';\nimport { EditorNode } from './EditorNode';\n\nexport function snapToGrid(value: number): number {\n  return Math.round(value / 20) * 20;\n}\n\nconst SAVE_QUIET_TIME = 500;\n\nexport interface DraggableItem {\n  uuid: string;\n  position: FlowPosition;\n  element: HTMLElement;\n  type: 'node' | 'sticky';\n}\n\nconst DRAG_THRESHOLD = 10;\n\nexport class Editor extends RapidElement {\n  // unfortunately, jsplumb requires that we be in light DOM\n  createRenderRoot() {\n    return this;\n  }\n\n  // this is the master plumber\n  private plumber: Plumber;\n\n  // timer for debounced saving\n  private saveTimer: number | null = null;\n\n  @property({ type: String })\n  public flow: string;\n\n  @property({ type: String })\n  public version: string;\n\n  @fromStore(zustand, (state: AppState) => state.flowDefinition)\n  private definition!: FlowDefinition;\n\n  @fromStore(zustand, (state: AppState) => state.canvasSize)\n  private canvasSize!: { width: number; height: number };\n\n  @fromStore(zustand, (state: AppState) => state.dirtyDate)\n  private dirtyDate!: Date;\n\n  // Drag state\n  @state()\n  private isDragging = false;\n  private isMouseDown = false;\n  private dragStartPos = { x: 0, y: 0 };\n\n  @state()\n  private currentDragItem: DraggableItem | null = null;\n  private startPos = { left: 0, top: 0 };\n\n  // Bound event handlers to maintain proper 'this' context\n  private boundMouseMove = this.handleMouseMove.bind(this);\n  private boundMouseUp = this.handleMouseUp.bind(this);\n\n  static get styles() {\n    return css`\n      #editor {\n        overflow: scroll;\n        flex: 1;\n      }\n\n      #grid {\n        position: relative;\n        background-color: #f9f9f9;\n        background-position: 10px 10px;\n        background-image: linear-gradient(\n            0deg,\n            transparent 24%,\n            rgba(61, 177, 255, 0.15) 25%,\n            rgba(61, 177, 255, 0.15) 26%,\n            transparent 27%,\n            transparent 74%,\n            rgba(61, 177, 255, 0.15) 75%,\n            rgba(61, 177, 255, 0.15) 76%,\n            transparent 77%,\n            transparent\n          ),\n          linear-gradient(\n            90deg,\n            transparent 24%,\n            rgba(61, 177, 255, 0.15) 25%,\n            rgba(61, 177, 255, 0.15) 26%,\n            transparent 27%,\n            transparent 74%,\n            rgba(61, 177, 255, 0.15) 75%,\n            rgba(61, 177, 255, 0.15) 76%,\n            transparent 77%,\n            transparent\n          );\n        background-size: 40px 40px;\n        box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.05);\n        border-top: 1px solid #e0e0e0;\n        display: inline-block;\n        width: 100%;\n      }\n\n      #canvas {\n        position: relative;\n        padding: 20px;\n        margin: 20px;\n      }\n\n      #canvas > .draggable {\n        position: absolute;\n        z-index: 100;\n      }\n\n      #canvas > .dragging {\n        z-index: 10000 !important;\n      }\n\n      body .jtk-endpoint {\n        width: initial;\n        height: initial;\n      }\n\n      .jtk-endpoint {\n        z-index: 600;\n      }\n\n      .plumb-source {\n        z-index: 600;\n        border: 0px solid var(--color-connectors);\n      }\n\n      .plumb-source.connected {\n        box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.1);\n        border-radius: 50%;\n      }\n\n      .plumb-source circle {\n        fill: tomato;\n      }\n\n      .plumb-source.connected circle {\n        fill: #fff;\n      }\n\n      .plumb-source svg {\n        fill: var(--color-connectors) !important;\n        stroke: var(--color-connectors);\n      }\n\n      .plumb-target {\n        margin-top: -6px;\n        z-index: 600;\n        opacity: 0;\n        cursor: pointer;\n      }\n\n      body .plumb-connector path {\n        stroke: var(--color-connectors) !important;\n        stroke-width: 3px;\n        z-index: 10;\n      }\n\n      body .plumb-connector {\n        z-index: 10;\n      }\n\n      body .plumb-connector.elevated {\n        z-index: 550;\n      }\n\n      body .plumb-connector.elevated path {\n        stroke: var(--color-connectors) !important;\n        stroke-width: 3px;\n        z-index: 550;\n      }\n\n      body .plumb-connector.elevated .plumb-arrow {\n        fill: var(--color-connectors);\n        stroke: var(--color-connectors);\n        stroke-width: 0px;\n        margin-top: 6px;\n        z-index: 550;\n      }\n\n      body .plumb-connector .plumb-arrow {\n        fill: var(--color-connectors);\n        stroke: var(--color-connectors);\n        stroke-width: 0px;\n        margin-top: 6px;\n        z-index: 10;\n      }\n\n      body svg.jtk-connector.jtk-hover path {\n        stroke: var(--color-success) !important;\n        stroke-width: 3px;\n      }\n\n      body .plumb-connector.jtk-hover .plumb-arrow {\n        fill: var(--color-success) !important;\n        stroke-width: 0px;\n        z-index: 10;\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n    this.plumber = new Plumber(this.querySelector('#canvas'));\n    this.setupGlobalEventListeners();\n    if (changes.has('flow')) {\n      getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);\n    }\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('canvasSize')) {\n      // console.log('Setting canvas size', this.canvasSize);\n    }\n\n    if (changes.has('definition')) {\n      this.updateCanvasSize();\n    }\n\n    if (changes.has('dirtyDate')) {\n      if (this.dirtyDate) {\n        this.debouncedSave();\n      }\n    }\n  }\n\n  private debouncedSave(): void {\n    // Clear any existing timer\n    if (this.saveTimer !== null) {\n      clearTimeout(this.saveTimer);\n    }\n\n    this.saveTimer = window.setTimeout(() => {\n      const now = new Date();\n      const timeSinceLastChange = now.getTime() - this.dirtyDate.getTime();\n\n      if (timeSinceLastChange >= SAVE_QUIET_TIME) {\n        this.saveChanges();\n        this.saveTimer = null;\n      } else {\n        this.debouncedSave();\n      }\n    }, SAVE_QUIET_TIME);\n  }\n\n  private saveChanges(): void {\n    // post the flow definition to the server\n    getStore().postJSON(`/flow/revisions/${this.flow}`, this.definition);\n    getStore().getState().setDirtyDate(null);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.saveTimer !== null) {\n      clearTimeout(this.saveTimer);\n      this.saveTimer = null;\n    }\n    document.removeEventListener('mousemove', this.boundMouseMove);\n    document.removeEventListener('mouseup', this.boundMouseUp);\n  }\n\n  private setupGlobalEventListeners(): void {\n    document.addEventListener('mousemove', this.boundMouseMove);\n    document.addEventListener('mouseup', this.boundMouseUp);\n  }\n\n  private getPosition(uuid: string, type: 'node' | 'sticky'): FlowPosition {\n    if (type === 'node') {\n      return this.definition._ui.nodes[uuid]?.position;\n    } else {\n      return this.definition._ui.stickies?.[uuid]?.position;\n    }\n  }\n\n  private updatePosition(\n    uuid: string,\n    type: 'node' | 'sticky',\n    position: FlowPosition\n  ): void {\n    if (type === 'node') {\n      getStore().getState().updateNodePosition(uuid, position);\n    } else {\n      const currentSticky = this.definition._ui.stickies?.[uuid];\n      if (currentSticky) {\n        getStore()\n          .getState()\n          .updateStickyNote(uuid, {\n            ...currentSticky,\n            position\n          });\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent): void {\n    const element = event.currentTarget as HTMLElement;\n    // Only start dragging if clicking on the element itself, not on exits or other interactive elements\n    const target = event.target as HTMLElement;\n    if (target.classList.contains('exit') || target.closest('.exit')) {\n      return;\n    }\n\n    const uuid = element.getAttribute('uuid');\n    const type = element.tagName === 'TEMBA-FLOW-NODE' ? 'node' : 'sticky';\n\n    const position = this.getPosition(uuid, type);\n    if (!position) return;\n\n    // Set up potential drag state, but don't start dragging yet\n    this.isMouseDown = true;\n    this.dragStartPos = { x: event.clientX, y: event.clientY };\n    this.startPos = { left: position.left, top: position.top };\n    this.currentDragItem = {\n      uuid,\n      position,\n      element,\n      type\n    };\n\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  private handleMouseMove(event: MouseEvent): void {\n    if (!this.isMouseDown || !this.currentDragItem) return;\n\n    const deltaX = event.clientX - this.dragStartPos.x;\n    const deltaY = event.clientY - this.dragStartPos.y;\n    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n\n    // Only start dragging if we've moved beyond the threshold\n    if (!this.isDragging && distance > DRAG_THRESHOLD) {\n      this.isDragging = true;\n\n      // If this is a node, elevate connections\n      if (this.currentDragItem.type === 'node' && this.plumber) {\n        this.plumber.elevateNodeConnections(this.currentDragItem.uuid);\n      }\n    }\n\n    // If we're actually dragging, update positions\n    if (this.isDragging) {\n      const newLeft = this.startPos.left + deltaX;\n      const newTop = this.startPos.top + deltaY;\n\n      // Update the visual position during drag\n      this.currentDragItem.element.style.left = `${newLeft}px`;\n      this.currentDragItem.element.style.top = `${newTop}px`;\n\n      // Repaint connections if this is a node\n      if (this.currentDragItem.type === 'node' && this.plumber) {\n        this.plumber.repaintEverything();\n      }\n    }\n  }\n\n  private handleMouseUp(event: MouseEvent): void {\n    if (!this.isMouseDown || !this.currentDragItem) return;\n\n    // If we were actually dragging, handle the drag end\n    if (this.isDragging) {\n      // Restore normal z-index for node connections\n      if (this.currentDragItem.type === 'node' && this.plumber) {\n        this.plumber.restoreNodeConnections(this.currentDragItem.uuid);\n      }\n\n      const deltaX = event.clientX - this.dragStartPos.x;\n      const deltaY = event.clientY - this.dragStartPos.y;\n\n      const newLeft = this.startPos.left + deltaX;\n      const newTop = this.startPos.top + deltaY;\n\n      // Snap to 20px grid for final position\n      const snappedLeft = snapToGrid(newLeft);\n      const snappedTop = snapToGrid(newTop);\n\n      const newPosition = { left: snappedLeft, top: snappedTop };\n\n      // Update the store with the new snapped position\n      this.updatePosition(\n        this.currentDragItem.uuid,\n        this.currentDragItem.type,\n        newPosition\n      );\n\n      // Update canvas positions for nodes\n      if (this.currentDragItem.type === 'node') {\n        getStore()\n          .getState()\n          .updateCanvasPositions({\n            [this.currentDragItem.uuid]: newPosition\n          });\n      }\n\n      // Repaint connections if this is a node\n      if (this.currentDragItem.type === 'node' && this.plumber) {\n        this.plumber.repaintEverything();\n      }\n    }\n\n    // Reset all drag state\n    this.isDragging = false;\n    this.isMouseDown = false;\n    this.currentDragItem = null;\n  }\n\n  private updateCanvasSize(): void {\n    if (!this.definition) return;\n\n    const store = getStore();\n    if (!store) return;\n\n    // Calculate required canvas size based on all elements\n    let maxWidth = 0;\n    let maxHeight = 0;\n\n    // Check node positions\n    this.definition.nodes.forEach((node) => {\n      const ui = this.definition._ui.nodes[node.uuid];\n      if (ui && ui.position) {\n        const nodeElement = this.querySelector(`[id=\"${node.uuid}\"]`);\n        if (nodeElement) {\n          const rect = nodeElement.getBoundingClientRect();\n          maxWidth = Math.max(maxWidth, ui.position.left + rect.width);\n          maxHeight = Math.max(maxHeight, ui.position.top + rect.height);\n        }\n      }\n    });\n\n    // Check sticky note positions\n    const stickies = this.definition._ui?.stickies || {};\n    Object.values(stickies).forEach((sticky) => {\n      if (sticky.position) {\n        maxWidth = Math.max(maxWidth, sticky.position.left + 200); // Sticky note width\n        maxHeight = Math.max(maxHeight, sticky.position.top + 100); // Sticky note height\n      }\n    });\n\n    // Update canvas size in store\n    store.getState().expandCanvas(maxWidth, maxHeight);\n  }\n\n  public render(): TemplateResult {\n    // we have to embed our own style since we are in light DOM\n    const style = html`<style>\n      ${unsafeCSS(Editor.styles.cssText)}\n      ${unsafeCSS(EditorNode.styles.cssText)}\n    </style>`;\n\n    const stickies = this.definition?._ui?.stickies || {};\n\n    return html`${style}\n      <div id=\"editor\">\n        <div\n          id=\"grid\"\n          style=\"min-width:100%;width:${this.canvasSize.width}px; height:${this\n            .canvasSize.height}px\"\n        >\n          <div id=\"canvas\">\n            ${this.definition\n              ? this.definition.nodes.map((node) => {\n                  const position =\n                    this.definition._ui.nodes[node.uuid].position;\n\n                  const dragging =\n                    this.isDragging && this.currentDragItem?.uuid === node.uuid;\n\n                  return html`<temba-flow-node\n                    class=\"draggable ${dragging ? 'dragging' : ''}\"\n                    @mousedown=${this.handleMouseDown.bind(this)}\n                    uuid=${node.uuid}\n                    style=\"left:${position.left}px; top:${position.top}px\"\n                    .plumber=${this.plumber}\n                    .node=${node}\n                    .ui=${this.definition._ui.nodes[node.uuid]}\n                  ></temba-flow-node>`;\n                })\n              : html`<temba-loading></temba-loading>`}\n            ${Object.entries(stickies).map(([uuid, sticky]) => {\n              const position = sticky.position || { left: 0, top: 0 };\n              const dragging =\n                this.isDragging && this.currentDragItem?.uuid === uuid;\n              return html`<temba-sticky-note\n                class=\"draggable ${dragging ? 'dragging' : ''}\"\n                @mousedown=${this.handleMouseDown.bind(this)}\n                style=\"left:${position.left}px; top:${position.top}px; z-index: ${1000 +\n                position.top}\"\n                uuid=${uuid}\n                .data=${sticky}\n                .dragging=${dragging}\n              ></temba-sticky-note>`;\n            })}\n          </div>\n        </div>\n      </div>`;\n  }\n}\n"]}

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

@@ -6,29 +6,13 @@ import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
 import { getStore } from '../store/Store';
 export class EditorNode extends RapidElement {
-    constructor() {
-        super(...arguments);
-        // Drag state properties
-        this.isDragging = false;
-        this.dragStartPos = { x: 0, y: 0 };
-        this.nodeStartPos = { left: 0, top: 0 };
-        // Bound event handlers to maintain proper 'this' context
-        this.boundMouseMove = this.handleMouseMove.bind(this);
-        this.boundMouseUp = this.handleMouseUp.bind(this);
-    }
     createRenderRoot() {
         return this;
     }
-    /**
-     * Snaps a coordinate value to the nearest 20px grid position
-     */
-    snapToGrid(value) {
-        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;
@@ -37,7 +21,7 @@ export class EditorNode extends RapidElement {
         color: #333;
         cursor: move;
         user-select: none;
-        z-index: 500;
+
       }
 
       .node:hover {
@@ -52,21 +36,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;
       }
@@ -120,147 +142,74 @@ export class EditorNode extends RapidElement {
       }
   }`;
     }
+    constructor() {
+        super();
+        this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);
+    }
     updated(changes) {
+        var _a;
         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()
-                .expandCanvas(this.ui.position.left + rect.width, this.ui.position.top + rect.height);
-            // Add drag event listeners to the node
-            this.addDragEventListeners();
-        }
-    }
-    addDragEventListeners() {
-        const nodeElement = this.querySelector('.node');
-        if (!nodeElement)
-            return;
-        nodeElement.addEventListener('mousedown', this.handleMouseDown.bind(this));
-        document.addEventListener('mousemove', this.boundMouseMove);
-        document.addEventListener('mouseup', this.boundMouseUp);
-    }
-    handleMouseDown(event) {
-        // Only start dragging if clicking on the node itself, not on exits or other interactive elements
-        const target = event.target;
-        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');
-        if (nodeElement) {
-            nodeElement.classList.add('dragging');
-        }
-        // Elevate connections for this node during dragging
-        if (this.plumber) {
-            this.plumber.elevateNodeConnections(this.node.uuid);
+            (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().expandCanvas(this.ui.position.left + rect.width, this.ui.position.top + rect.height);
         }
-        event.preventDefault();
-        event.stopPropagation();
     }
-    handleMouseMove(event) {
-        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');
-        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();
-        }
-    }
-    handleMouseUp(event) {
-        if (!this.isDragging)
-            return;
-        this.isDragging = false;
-        // Remove dragging class
-        const nodeElement = this.querySelector('.node');
-        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() {
-        super.disconnectedCallback();
-        // Clean up event listeners
-        document.removeEventListener('mousemove', this.boundMouseMove);
-        document.removeEventListener('mouseup', this.boundMouseUp);
+    handleActionOrderChanged(event) {
+        var _a;
+        const [fromIdx, toIdx] = event.detail.swap;
+        // swap our actions
+        const newActions = [...this.node.actions];
+        const movedAction = newActions.splice(fromIdx, 1)[0];
+        newActions.splice(toIdx, 0, movedAction);
+        // 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 };
+        (_a = getStore()) === null || _a === void 0 ? void 0 : _a.getState().updateNode(this.node.uuid, { ...this.node, actions: newActions });
     }
     renderTitle(config) {
+        var _a, _b;
         return html `<div class="title" style="background:${config.color}">
-      ${config.name}
+      ${((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.length) > 1
+            ? html `<temba-icon class="drag-handle" name="sort"></temba-icon>`
+            : null}
+
+      <div class="name">${config.name}</div>
     </div>`;
     }
-    renderAction(node, action) {
+    renderAction(node, action, index) {
         const config = EDITOR_CONFIG[action.type];
         if (config) {
-            return html `<div class="action ${action.type}">
-        ${this.renderTitle(config)}
-        <div class="body">
-          ${config.render
+            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>`;
     }
     renderRouter(router, ui) {
         const config = EDITOR_CONFIG[ui.type];
@@ -308,9 +257,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)}`

package/out-tsc/src/flow/EditorNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorNode.js","sourceRoot":"","sources":["../../../src/flow/EditorNode.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { EDITOR_CONFIG, UIConfig } from './config';\nimport { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Plumber } from './Plumber';\nimport { getStore } from '../store/Store';\n\nexport class EditorNode extends RapidElement {\n  createRenderRoot() {\n    return this;\n  }\n\n  @property({ type: Object })\n  private plumber: Plumber;\n\n  @property({ type: Object })\n  private node: Node;\n\n  @property({ type: Object })\n  private ui: NodeUI;\n\n  // Drag state properties\n  private isDragging = false;\n  private dragStartPos = { x: 0, y: 0 };\n  private nodeStartPos = { left: 0, top: 0 };\n\n  // Bound event handlers to maintain proper 'this' context\n  private boundMouseMove = this.handleMouseMove.bind(this);\n  private boundMouseUp = this.handleMouseUp.bind(this);\n\n  /**\n   * Snaps a coordinate value to the nearest 20px grid position\n   */\n  private snapToGrid(value: number): number {\n    return Math.round(value / 20) * 20;\n  }\n\n  static get styles() {\n    return css`\n      .node {\n        position: absolute;\n        background-color: #fff;\n        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n        min-width: 200px;\n        border-radius: calc(var(--curvature) * 1.5);\n        overflow: hidden;\n        color: #333;\n        cursor: move;\n        user-select: none;\n        z-index: 500;\n      }\n\n      .node:hover {\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n      }\n\n      .node.dragging {\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);\n        transform: scale(1.02);\n        z-index: 1000;\n      }\n        \n      .action {\n        max-width: 200px;\n      }\n\n      .action .body {\n        padding: 1em;\n      }\n\n      .action .title,\n      .router .title {\n        color: #fff;\n        padding: 5px 1px;\n        text-align: center;\n        font-size: 1em;\n        font-weight: normal;\n      }\n\n      .quick-replies {\n        margin-top: 0.5em;\n      }\n\n      .quick-reply {\n        background-color: #f0f0f0;\n        border: 1px solid #e0e0e0;\n        border-radius: calc(var(--curvature) * 1.5);\n        padding: 0.2em 1em;\n        display: inline-block;\n        font-size: 0.8em;\n        margin: 0.2em;\n      }\n\n      .categories {\n        display: flex;\n        flex-direction: row;\n\n      }\n\n      .category {\n        margin:-1px -0.5px;\n        border: 1px solid #f3f3f3;\n        padding: 0.75em;\n        flex-grow:1;\n        text-align: center;\n      }\n\n      .action-exits {\n        padding-bottom: 0.75em;\n        margin-top: -0.75em;\n      }\n\n      .category .title {\n        font-weight: normal;\n        font-size: 1em;\n      }\n\n      .router .body {\n        padding: 0.75em;\n      }\n\n      .result-name {\n        font-weight: bold;\n        display: inline-block;\n      }\n      \n      .exit {\n        padding-top: 10px;\n        margin-bottom: -10px;\n      }\n  }`;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('node')) {\n      this.plumber.makeTarget(this.node.uuid);\n\n      // our node was changed, see if we have new destinations\n      for (const exit of this.node.exits) {\n        if (!exit.destination_uuid) {\n          this.plumber.makeSource(exit.uuid);\n        } else {\n          this.plumber.connectIds(exit.uuid, exit.destination_uuid);\n        }\n      }\n\n      const ele = this.querySelector('.node');\n      const rect = ele.getBoundingClientRect();\n\n      getStore()\n        .getState()\n        .expandCanvas(\n          this.ui.position.left + rect.width,\n          this.ui.position.top + rect.height\n        );\n\n      // Add drag event listeners to the node\n      this.addDragEventListeners();\n    }\n  }\n\n  private addDragEventListeners(): void {\n    const nodeElement = this.querySelector('.node') as HTMLElement;\n    if (!nodeElement) return;\n\n    nodeElement.addEventListener('mousedown', this.handleMouseDown.bind(this));\n    document.addEventListener('mousemove', this.boundMouseMove);\n    document.addEventListener('mouseup', this.boundMouseUp);\n  }\n\n  private handleMouseDown(event: MouseEvent): void {\n    // Only start dragging if clicking on the node itself, not on exits or other interactive elements\n    const target = event.target as HTMLElement;\n    if (target.classList.contains('exit') || target.closest('.exit')) {\n      return;\n    }\n\n    this.isDragging = true;\n    this.dragStartPos = { x: event.clientX, y: event.clientY };\n    this.nodeStartPos = {\n      left: this.ui.position.left,\n      top: this.ui.position.top\n    };\n\n    // Add dragging class for visual feedback\n    const nodeElement = this.querySelector('.node') as HTMLElement;\n    if (nodeElement) {\n      nodeElement.classList.add('dragging');\n    }\n\n    // Elevate connections for this node during dragging\n    if (this.plumber) {\n      this.plumber.elevateNodeConnections(this.node.uuid);\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  private handleMouseMove(event: MouseEvent): void {\n    if (!this.isDragging) return;\n\n    const deltaX = event.clientX - this.dragStartPos.x;\n    const deltaY = event.clientY - this.dragStartPos.y;\n\n    const newLeft = this.nodeStartPos.left + deltaX;\n    const newTop = this.nodeStartPos.top + deltaY;\n\n    // Snap to 20px grid\n    const snappedLeft = this.snapToGrid(newLeft);\n    const snappedTop = this.snapToGrid(newTop);\n\n    // Update the UI position temporarily (for visual feedback)\n    const nodeElement = this.querySelector('.node') as HTMLElement;\n    if (nodeElement) {\n      nodeElement.style.left = `${snappedLeft}px`;\n      nodeElement.style.top = `${snappedTop}px`;\n    }\n\n    // Repaint connections during dragging for smooth updates\n    if (this.plumber) {\n      this.plumber.repaintEverything();\n    }\n  }\n\n  private handleMouseUp(event: MouseEvent): void {\n    if (!this.isDragging) return;\n\n    this.isDragging = false;\n\n    // Remove dragging class\n    const nodeElement = this.querySelector('.node') as HTMLElement;\n    if (nodeElement) {\n      nodeElement.classList.remove('dragging');\n    }\n\n    // Restore normal z-index for connections\n    if (this.plumber) {\n      this.plumber.restoreNodeConnections(this.node.uuid);\n    }\n\n    const deltaX = event.clientX - this.dragStartPos.x;\n    const deltaY = event.clientY - this.dragStartPos.y;\n\n    const newLeft = this.nodeStartPos.left + deltaX;\n    const newTop = this.nodeStartPos.top + deltaY;\n\n    // Snap to 20px grid for final position\n    const snappedLeft = this.snapToGrid(newLeft);\n    const snappedTop = this.snapToGrid(newTop);\n\n    // Update the store with the new snapped position\n    const newPosition = { left: snappedLeft, top: snappedTop };\n    getStore()\n      .getState()\n      .updateCanvasPositions({\n        [this.node.uuid]: newPosition\n      });\n\n    // Repaint connections if plumber is available\n    if (this.plumber) {\n      this.plumber.repaintEverything();\n    }\n\n    getStore().getState().updateNodePosition(this.node.uuid, newPosition);\n\n    // Fire a custom event with the new coordinates\n    /*this.fireCustomEvent(CustomEventType.Moved, {\n      nodeId: this.node.uuid,\n      position: newPosition,\n      oldPosition: {\n        left: this.nodeStartPos.left,\n        top: this.nodeStartPos.top\n      }\n    });*/\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    // Clean up event listeners\n    document.removeEventListener('mousemove', this.boundMouseMove);\n    document.removeEventListener('mouseup', this.boundMouseUp);\n  }\n\n  private renderTitle(config: UIConfig) {\n    return html`<div class=\"title\" style=\"background:${config.color}\">\n      ${config.name}\n    </div>`;\n  }\n\n  private renderAction(node: Node, action: Action) {\n    const config = EDITOR_CONFIG[action.type];\n\n    if (config) {\n      return html`<div class=\"action ${action.type}\">\n        ${this.renderTitle(config)}\n        <div class=\"body\">\n          ${config.render\n            ? config.render(node, action)\n            : html`<pre>${action.type}</pre>`}\n        </div>\n      </div>`;\n    }\n    return html`<div>${action.type}</div>`;\n  }\n\n  private renderRouter(router: Router, ui: NodeUI) {\n    const config = EDITOR_CONFIG[ui.type];\n    if (config) {\n      return html`<div class=\"router\">\n        ${this.renderTitle(config)}\n        ${router.result_name\n          ? html`<div class=\"body\">\n              Save as\n              <div class=\"result-name\">${router.result_name}</div>\n            </div>`\n          : null}\n      </div>`;\n    }\n  }\n\n  private renderCategories(node: Node) {\n    if (!node.router || !node.router.categories) {\n      return null;\n    }\n    const categories = node.router.categories.map((category) => {\n      const exit = node.exits.find(\n        (exit: Exit) => exit.uuid == category.exit_uuid\n      );\n\n      return html`<div class=\"category\">\n        <div class=\"title\">${category.name}</div>\n        ${this.renderExit(exit)}\n      </div>`;\n    });\n\n    return html`<div class=\"categories\">${categories}</div>`;\n  }\n\n  private renderExit(exit: Exit): TemplateResult {\n    return html`<div\n      id=\"${exit.uuid}\"\n      class=${getClasses({\n        exit: true,\n        connected: !!exit.destination_uuid\n      })}\n    ></div>`;\n  }\n\n  public render() {\n    if (!this.node || !this.ui) {\n      return html`<div class=\"node\">Loading...</div>`;\n    }\n\n    return html`\n      <div\n        id=\"${this.node.uuid}\"\n        class=\"node\"\n        style=\"left:${this.ui.position.left}px;top:${this.ui.position.top}px\"\n      >\n        ${this.node.actions.map((actionSpec) => {\n          return this.renderAction(this.node, actionSpec);\n        })}\n        ${this.node.router\n          ? html` ${this.renderRouter(this.node.router, this.ui)}\n            ${this.renderCategories(this.node)}`\n          : html`<div class=\"action-exits\">\n              ${this.node.exits.map((exit) => {\n                return this.renderExit(exit);\n              })}\n            </div>`}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"EditorNode.js","sourceRoot":"","sources":["../../../src/flow/EditorNode.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { EDITOR_CONFIG, UIConfig } from './config';\nimport { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Plumber } from './Plumber';\nimport { getStore } from '../store/Store';\n\nexport class EditorNode extends RapidElement {\n  createRenderRoot() {\n    return this;\n  }\n\n  @property({ type: Object })\n  private plumber: Plumber;\n\n  @property({ type: Object })\n  private node: Node;\n\n  @property({ type: Object })\n  private ui: NodeUI;\n\n  static get styles() {\n    return css`\n\n      .node {\n        background-color: #fff;\n        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n        min-width: 200px;\n        border-radius: calc(var(--curvature) * 1.5);\n        overflow: hidden;\n        color: #333;\n        cursor: move;\n        user-select: none;\n\n      }\n\n      .node:hover {\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n      }\n\n      .node.dragging {\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);\n        transform: scale(1.02);\n        z-index: 1000;\n      }\n        \n      .action {\n        max-width: 200px;\n        position: relative;\n      }\n\n      .action.sortable {\n        display: flex;\n        align-items: stretch;\n      }\n\n      .action .action-content {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .action .body {\n        padding: 1em;\n      }\n\n      .action .drag-handle {\n        opacity: 0;\n        transition: all 200ms ease-in-out;\n        cursor: move;\n        background: rgba(0, 0, 0, 0.02);\n        max-width:0px;\n        position: absolute;\n      }\n\n      .action:hover .drag-handle {\n        opacity: 0.5;\n        padding: 0.25em;\n        max-width: 20px;\n      }\n\n      .action .drag-handle:hover {\n        opacity: 1;\n        \n      }\n\n      .action .title,\n      .router .title {\n        display: flex;\n        color: #fff;\n        padding: 5px 1px;\n        text-align: center;\n        font-size: 1em;\n        font-weight: normal;\n\n      }\n\n      .title .name {\n        flex-grow: 1;\n        }\n\n      .quick-replies {\n        margin-top: 0.5em;\n      }\n\n      .quick-reply {\n        background-color: #f0f0f0;\n        border: 1px solid #e0e0e0;\n        border-radius: calc(var(--curvature) * 1.5);\n        padding: 0.2em 1em;\n        display: inline-block;\n        font-size: 0.8em;\n        margin: 0.2em;\n      }\n\n      .categories {\n        display: flex;\n        flex-direction: row;\n\n      }\n\n      .category {\n        margin:-1px -0.5px;\n        border: 1px solid #f3f3f3;\n        padding: 0.75em;\n        flex-grow:1;\n        text-align: center;\n      }\n\n      .action-exits {\n        padding-bottom: 0.75em;\n        margin-top: -0.75em;\n      }\n\n      .category .title {\n        font-weight: normal;\n        font-size: 1em;\n      }\n\n      .router .body {\n        padding: 0.75em;\n      }\n\n      .result-name {\n        font-weight: bold;\n        display: inline-block;\n      }\n      \n      .exit {\n        padding-top: 10px;\n        margin-bottom: -10px;\n      }\n  }`;\n  }\n\n  constructor() {\n    super();\n    this.handleActionOrderChanged = this.handleActionOrderChanged.bind(this);\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('node')) {\n      // make our initial connections\n      if (changes.get('node') === undefined) {\n        // this.plumber.makeTarget(this.node.uuid);\n        for (const exit of this.node.exits) {\n          if (!exit.destination_uuid) {\n            this.plumber.makeSource(exit.uuid);\n          } else {\n            this.plumber.connectIds(exit.uuid, exit.destination_uuid);\n          }\n        }\n      }\n\n      const ele = this.parentElement;\n      const rect = ele.getBoundingClientRect();\n\n      getStore()\n        ?.getState()\n        .expandCanvas(\n          this.ui.position.left + rect.width,\n          this.ui.position.top + rect.height\n        );\n    }\n  }\n\n  private handleActionOrderChanged(event: CustomEvent) {\n    const [fromIdx, toIdx] = event.detail.swap;\n\n    // swap our actions\n    const newActions = [...this.node.actions];\n    const movedAction = newActions.splice(fromIdx, 1)[0];\n    newActions.splice(toIdx, 0, movedAction);\n\n    // udate our internal reprensentation, this isn't strictly necessary\n    // since the editor will update us from it's definition subscription\n    // but it makes testing a lot easier\n    this.node = { ...this.node, actions: newActions };\n\n    getStore()\n      ?.getState()\n      .updateNode(this.node.uuid, { ...this.node, actions: newActions });\n  }\n\n  private renderTitle(config: UIConfig) {\n    return html`<div class=\"title\" style=\"background:${config.color}\">\n      ${this.node?.actions?.length > 1\n        ? html`<temba-icon class=\"drag-handle\" name=\"sort\"></temba-icon>`\n        : null}\n\n      <div class=\"name\">${config.name}</div>\n    </div>`;\n  }\n\n  private renderAction(node: Node, action: Action, index: number) {\n    const config = EDITOR_CONFIG[action.type];\n\n    if (config) {\n      return html`<div\n        class=\"action sortable ${action.type}\"\n        id=\"action-${index}\"\n      >\n        <div class=\"action-content\">\n          ${this.renderTitle(config)}\n          <div class=\"body\">\n            ${config.render\n              ? config.render(node, action)\n              : html`<pre>${action.type}</pre>`}\n          </div>\n        </div>\n      </div>`;\n    }\n    return html`<div class=\"action sortable\" id=\"action-${index}\">\n      ${action.type}\n    </div>`;\n  }\n\n  private renderRouter(router: Router, ui: NodeUI) {\n    const config = EDITOR_CONFIG[ui.type];\n    if (config) {\n      return html`<div class=\"router\">\n        ${this.renderTitle(config)}\n        ${router.result_name\n          ? html`<div class=\"body\">\n              Save as\n              <div class=\"result-name\">${router.result_name}</div>\n            </div>`\n          : null}\n      </div>`;\n    }\n  }\n\n  private renderCategories(node: Node) {\n    if (!node.router || !node.router.categories) {\n      return null;\n    }\n    const categories = node.router.categories.map((category) => {\n      const exit = node.exits.find(\n        (exit: Exit) => exit.uuid == category.exit_uuid\n      );\n\n      return html`<div class=\"category\">\n        <div class=\"title\">${category.name}</div>\n        ${this.renderExit(exit)}\n      </div>`;\n    });\n\n    return html`<div class=\"categories\">${categories}</div>`;\n  }\n\n  private renderExit(exit: Exit): TemplateResult {\n    return html`<div\n      id=\"${exit.uuid}\"\n      class=${getClasses({\n        exit: true,\n        connected: !!exit.destination_uuid\n      })}\n    ></div>`;\n  }\n\n  public render() {\n    if (!this.node || !this.ui) {\n      return html`<div class=\"node\">Loading...</div>`;\n    }\n\n    return html`\n      <div\n        id=\"${this.node.uuid}\"\n        class=\"node\"\n        style=\"left:${this.ui.position.left}px;top:${this.ui.position.top}px\"\n      >\n        ${this.node.actions.length > 0\n          ? html`<temba-sortable-list\n              dragHandle=\"drag-handle\"\n              @temba-order-changed=\"${this.handleActionOrderChanged}\"\n            >\n              ${this.node.actions.map((actionSpec, index) => {\n                return this.renderAction(this.node, actionSpec, index);\n              })}\n            </temba-sortable-list>`\n          : ''}\n        ${this.node.router\n          ? html` ${this.renderRouter(this.node.router, this.ui)}\n            ${this.renderCategories(this.node)}`\n          : html`<div class=\"action-exits\">\n              ${this.node.exits.map((exit) => {\n                return this.renderExit(exit);\n              })}\n            </div>`}\n      </div>\n    `;\n  }\n}\n"]}