@nyaruka/temba-components 0.127.0 → 0.129.0

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

@@ -1,13 +1,17 @@
 import { __decorate } from "tslib";
 import { html } from 'lit-html';
 import { css, unsafeCSS } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { getStore } from '../store/Store';
 import { fromStore, zustand } from '../store/AppState';
 import { RapidElement } from '../RapidElement';
 import { Plumber } from './Plumber';
 import { EditorNode } from './EditorNode';
+export function snapToGrid(value) {
+    return Math.round(value / 20) * 20;
+}
 const SAVE_QUIET_TIME = 500;
+const DRAG_THRESHOLD = 10;
 export class Editor extends RapidElement {
     // unfortunately, jsplumb requires that we be in light DOM
     createRenderRoot() {
@@ -61,6 +65,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;
@@ -152,10 +165,20 @@ export class Editor extends RapidElement {
         super();
         // timer for debounced saving
         this.saveTimer = null;
+        // Drag state
+        this.isDragging = false;
+        this.isMouseDown = false;
+        this.dragStartPos = { x: 0, y: 0 };
+        this.currentDragItem = null;
+        this.startPos = { left: 0, top: 0 };
+        // Bound event handlers to maintain proper 'this' context
+        this.boundMouseMove = this.handleMouseMove.bind(this);
+        this.boundMouseUp = this.handleMouseUp.bind(this);
     }
     firstUpdated(changes) {
         super.firstUpdated(changes);
         this.plumber = new Plumber(this.querySelector('#canvas'));
+        this.setupGlobalEventListeners();
         if (changes.has('flow')) {
             getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
         }
@@ -165,6 +188,9 @@ export class Editor extends RapidElement {
         if (changes.has('canvasSize')) {
             // console.log('Setting canvas size', this.canvasSize);
         }
+        if (changes.has('definition')) {
+            this.updateCanvasSize();
+        }
         if (changes.has('dirtyDate')) {
             if (this.dirtyDate) {
                 this.debouncedSave();
@@ -199,13 +225,169 @@ export class Editor extends RapidElement {
             clearTimeout(this.saveTimer);
             this.saveTimer = null;
         }
+        document.removeEventListener('mousemove', this.boundMouseMove);
+        document.removeEventListener('mouseup', this.boundMouseUp);
+    }
+    setupGlobalEventListeners() {
+        document.addEventListener('mousemove', this.boundMouseMove);
+        document.addEventListener('mouseup', this.boundMouseUp);
+    }
+    getPosition(uuid, type) {
+        var _a, _b, _c;
+        if (type === 'node') {
+            return (_a = this.definition._ui.nodes[uuid]) === null || _a === void 0 ? void 0 : _a.position;
+        }
+        else {
+            return (_c = (_b = this.definition._ui.stickies) === null || _b === void 0 ? void 0 : _b[uuid]) === null || _c === void 0 ? void 0 : _c.position;
+        }
+    }
+    updatePosition(uuid, type, position) {
+        var _a;
+        if (type === 'node') {
+            getStore().getState().updateNodePosition(uuid, position);
+        }
+        else {
+            const currentSticky = (_a = this.definition._ui.stickies) === null || _a === void 0 ? void 0 : _a[uuid];
+            if (currentSticky) {
+                getStore()
+                    .getState()
+                    .updateStickyNote(uuid, {
+                    ...currentSticky,
+                    position
+                });
+            }
+        }
+    }
+    handleMouseDown(event) {
+        const element = event.currentTarget;
+        // Only start dragging if clicking on the element itself, not on exits or other interactive elements
+        const target = event.target;
+        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();
+    }
+    handleMouseMove(event) {
+        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();
+            }
+        }
+    }
+    handleMouseUp(event) {
+        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;
+    }
+    updateCanvasSize() {
+        var _a;
+        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 = ((_a = this.definition._ui) === null || _a === void 0 ? void 0 : _a.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);
     }
     render() {
+        var _a, _b;
         // we have to embed our own style since we are in light DOM
         const style = html `<style>
       ${unsafeCSS(Editor.styles.cssText)}
       ${unsafeCSS(EditorNode.styles.cssText)}
     </style>`;
+        const stickies = ((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a._ui) === null || _b === void 0 ? void 0 : _b.stickies) || {};
         return html `${style}
       <div id="editor">
         <div
@@ -216,13 +398,34 @@ export class Editor extends RapidElement {
           <div id="canvas">
             ${this.definition
             ? this.definition.nodes.map((node) => {
+                var _a;
+                const position = this.definition._ui.nodes[node.uuid].position;
+                const dragging = this.isDragging && ((_a = this.currentDragItem) === null || _a === void 0 ? void 0 : _a.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]) => {
+            var _a;
+            const position = sticky.position || { left: 0, top: 0 };
+            const dragging = this.isDragging && ((_a = this.currentDragItem) === null || _a === void 0 ? void 0 : _a.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>`;
@@ -243,4 +446,10 @@ __decorate([
 __decorate([
     fromStore(zustand, (state) => state.dirtyDate)
 ], Editor.prototype, "dirtyDate", void 0);
+__decorate([
+    state()
+], Editor.prototype, "isDragging", void 0);
+__decorate([
+    state()
+], Editor.prototype, "currentDragItem", void 0);
 //# sourceMappingURL=Editor.js.map

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"]}