@nyaruka/temba-components 0.125.0 → 0.126.0

package/out-tsc/test/temba-flow-node-drag.test.js

@@ -0,0 +1,257 @@
+import { fixture, assert } from '@open-wc/testing';
+import { html } from 'lit';
+describe('temba-flow-node drag and drop functionality', () => {
+    it('should add drag styling and event listeners to elements', async () => {
+        // Create a simple div to test our drag functionality
+        const testElement = await fixture(html `
+      <div
+        class="node"
+        style="position: absolute; left: 100px; top: 100px; width: 200px; height: 100px; background: white; border: 1px solid #ccc; cursor: move;"
+      >
+        Test Node
+        <div class="exit" style="padding: 5px; background: red;">Exit</div>
+      </div>
+    `);
+        // Test that the node has the correct cursor style
+        const computedStyle = window.getComputedStyle(testElement);
+        assert.equal(computedStyle.cursor, 'move');
+        // Test drag event simulation
+        let dragStarted = false;
+        let dragEnded = false;
+        let newPosition = { left: 0, top: 0 };
+        // Simulate our drag implementation
+        let isDragging = false;
+        let dragStartPos = { x: 0, y: 0 };
+        let nodeStartPos = { left: 100, top: 100 };
+        const handleMouseDown = (event) => {
+            const target = event.target;
+            if (target.classList.contains('exit') || target.closest('.exit')) {
+                return;
+            }
+            isDragging = true;
+            dragStarted = true;
+            dragStartPos = { x: event.clientX, y: event.clientY };
+            nodeStartPos = { left: 100, top: 100 };
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        const handleMouseMove = (event) => {
+            if (!isDragging)
+                return;
+            const deltaX = event.clientX - dragStartPos.x;
+            const deltaY = event.clientY - dragStartPos.y;
+            const newLeft = nodeStartPos.left + deltaX;
+            const newTop = nodeStartPos.top + deltaY;
+            // Update position
+            testElement.style.left = `${newLeft}px`;
+            testElement.style.top = `${newTop}px`;
+        };
+        const handleMouseUp = (event) => {
+            if (!isDragging)
+                return;
+            isDragging = false;
+            dragEnded = true;
+            const deltaX = event.clientX - dragStartPos.x;
+            const deltaY = event.clientY - dragStartPos.y;
+            newPosition = {
+                left: nodeStartPos.left + deltaX,
+                top: nodeStartPos.top + deltaY
+            };
+        };
+        // Add event listeners
+        testElement.addEventListener('mousedown', handleMouseDown);
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        // Test drag from node (should work)
+        const mouseDownEvent = new MouseEvent('mousedown', {
+            clientX: 150,
+            clientY: 150,
+            bubbles: true
+        });
+        testElement.dispatchEvent(mouseDownEvent);
+        assert.isTrue(dragStarted, 'Drag should start when clicking on node');
+        const mouseMoveEvent = new MouseEvent('mousemove', {
+            clientX: 200,
+            clientY: 200,
+            bubbles: true
+        });
+        document.dispatchEvent(mouseMoveEvent);
+        const mouseUpEvent = new MouseEvent('mouseup', {
+            clientX: 200,
+            clientY: 200,
+            bubbles: true
+        });
+        document.dispatchEvent(mouseUpEvent);
+        assert.isTrue(dragEnded, 'Drag should end on mouse up');
+        assert.equal(newPosition.left, 150, 'New left position should be calculated correctly');
+        assert.equal(newPosition.top, 150, 'New top position should be calculated correctly');
+        // Test that position was visually updated
+        assert.equal(testElement.style.left, '150px');
+        assert.equal(testElement.style.top, '150px');
+        // Reset for next test
+        dragStarted = false;
+        dragEnded = false;
+        // Test drag from exit element (should not work)
+        const exitElement = testElement.querySelector('.exit');
+        const exitMouseDownEvent = new MouseEvent('mousedown', {
+            clientX: 150,
+            clientY: 150,
+            bubbles: true
+        });
+        exitElement.dispatchEvent(exitMouseDownEvent);
+        assert.isFalse(dragStarted, 'Drag should not start when clicking on exit element');
+        // Clean up
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+    });
+    it('should snap node positions to 20px grid during drag and drop', async () => {
+        // Create a test node element
+        const testElement = await fixture(html `
+      <div
+        class="node"
+        style="position: absolute; left: 100px; top: 100px; width: 200px; height: 100px; background: white; border: 1px solid #ccc; cursor: move;"
+      >
+        Test Node for Grid Snapping
+      </div>
+    `);
+        // Helper function to snap values to 20px grid (same as implementation)
+        const snapToGrid = (value) => {
+            return Math.round(value / 20) * 20;
+        };
+        // Simulate drag implementation with grid snapping
+        let isDragging = false;
+        let dragStartPos = { x: 0, y: 0 };
+        let nodeStartPos = { left: 100, top: 100 };
+        let finalPosition = { left: 0, top: 0 };
+        const handleMouseDown = (event) => {
+            isDragging = true;
+            dragStartPos = { x: event.clientX, y: event.clientY };
+            // Get current position from element style
+            const currentLeft = parseInt(testElement.style.left) || 0;
+            const currentTop = parseInt(testElement.style.top) || 0;
+            nodeStartPos = { left: currentLeft, top: currentTop };
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        const handleMouseMove = (event) => {
+            if (!isDragging)
+                return;
+            const deltaX = event.clientX - dragStartPos.x;
+            const deltaY = event.clientY - dragStartPos.y;
+            const newLeft = nodeStartPos.left + deltaX;
+            const newTop = nodeStartPos.top + deltaY;
+            // Snap to 20px grid
+            const snappedLeft = snapToGrid(newLeft);
+            const snappedTop = snapToGrid(newTop);
+            // Update position with snapped values
+            testElement.style.left = `${snappedLeft}px`;
+            testElement.style.top = `${snappedTop}px`;
+        };
+        const handleMouseUp = (event) => {
+            if (!isDragging)
+                return;
+            isDragging = false;
+            const deltaX = event.clientX - dragStartPos.x;
+            const deltaY = event.clientY - dragStartPos.y;
+            const newLeft = nodeStartPos.left + deltaX;
+            const newTop = nodeStartPos.top + deltaY;
+            // Snap final position to grid
+            finalPosition = {
+                left: snapToGrid(newLeft),
+                top: snapToGrid(newTop)
+            };
+        };
+        // Add event listeners
+        testElement.addEventListener('mousedown', handleMouseDown);
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        // Test Case 1: Drag to position that should snap to grid
+        // Starting at (100, 100), drag by (33, 27) pixels
+        // Should result in (133, 127) -> snapped to (140, 120)
+        const mouseDownEvent1 = new MouseEvent('mousedown', {
+            clientX: 150,
+            clientY: 150,
+            bubbles: true
+        });
+        testElement.dispatchEvent(mouseDownEvent1);
+        const mouseMoveEvent1 = new MouseEvent('mousemove', {
+            clientX: 183, // 150 + 33
+            clientY: 177, // 150 + 27
+            bubbles: true
+        });
+        document.dispatchEvent(mouseMoveEvent1);
+        // Check that position is snapped during drag
+        assert.equal(testElement.style.left, '140px');
+        assert.equal(testElement.style.top, '120px');
+        const mouseUpEvent1 = new MouseEvent('mouseup', {
+            clientX: 183,
+            clientY: 177,
+            bubbles: true
+        });
+        document.dispatchEvent(mouseUpEvent1);
+        // Check final snapped position
+        assert.equal(finalPosition.left, 140, 'Final left position should be snapped to 140px');
+        assert.equal(finalPosition.top, 120, 'Final top position should be snapped to 120px');
+        // Test Case 2: Test different snap scenarios
+        // Reset position
+        nodeStartPos = { left: 60, top: 80 };
+        testElement.style.left = '60px';
+        testElement.style.top = '80px';
+        const mouseDownEvent2 = new MouseEvent('mousedown', {
+            clientX: 100,
+            clientY: 100,
+            bubbles: true
+        });
+        testElement.dispatchEvent(mouseDownEvent2);
+        // Drag by (15, 25) -> should snap to nearest 20px grid
+        // (60 + 15, 80 + 25) = (75, 105) -> snapped to (80, 100)
+        const mouseMoveEvent2 = new MouseEvent('mousemove', {
+            clientX: 115, // 100 + 15
+            clientY: 125, // 100 + 25
+            bubbles: true
+        });
+        document.dispatchEvent(mouseMoveEvent2);
+        assert.equal(testElement.style.left, '80px');
+        assert.equal(testElement.style.top, '100px');
+        const mouseUpEvent2 = new MouseEvent('mouseup', {
+            clientX: 115,
+            clientY: 125,
+            bubbles: true
+        });
+        document.dispatchEvent(mouseUpEvent2);
+        assert.equal(finalPosition.left, 80, 'Final left position should be snapped to 80px');
+        assert.equal(finalPosition.top, 100, 'Final top position should be snapped to 100px');
+        // Test Case 3: Test exact grid positions remain unchanged
+        nodeStartPos = { left: 120, top: 160 }; // Already on grid
+        testElement.style.left = '120px';
+        testElement.style.top = '160px';
+        const mouseDownEvent3 = new MouseEvent('mousedown', {
+            clientX: 200,
+            clientY: 200,
+            bubbles: true
+        });
+        testElement.dispatchEvent(mouseDownEvent3);
+        // Small movement that should stay on same grid position
+        const mouseMoveEvent3 = new MouseEvent('mousemove', {
+            clientX: 202, // +2 pixels
+            clientY: 203, // +3 pixels
+            bubbles: true
+        });
+        document.dispatchEvent(mouseMoveEvent3);
+        // (120 + 2, 160 + 3) = (122, 163) -> snapped to (120, 160)
+        assert.equal(testElement.style.left, '120px');
+        assert.equal(testElement.style.top, '160px');
+        const mouseUpEvent3 = new MouseEvent('mouseup', {
+            clientX: 202,
+            clientY: 203,
+            bubbles: true
+        });
+        document.dispatchEvent(mouseUpEvent3);
+        assert.equal(finalPosition.left, 120, 'Position should remain on grid');
+        assert.equal(finalPosition.top, 160, 'Position should remain on grid');
+        // Clean up
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+    });
+});
+//# sourceMappingURL=temba-flow-node-drag.test.js.map

package/out-tsc/test/temba-flow-node-drag.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"temba-flow-node-drag.test.js","sourceRoot":"","sources":["../../test/temba-flow-node-drag.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, assert } from '@open-wc/testing';\nimport { html } from 'lit';\n\ndescribe('temba-flow-node drag and drop functionality', () => {\n  it('should add drag styling and event listeners to elements', async () => {\n    // Create a simple div to test our drag functionality\n    const testElement = await fixture(html`\n      <div\n        class=\"node\"\n        style=\"position: absolute; left: 100px; top: 100px; width: 200px; height: 100px; background: white; border: 1px solid #ccc; cursor: move;\"\n      >\n        Test Node\n        <div class=\"exit\" style=\"padding: 5px; background: red;\">Exit</div>\n      </div>\n    `);\n\n    // Test that the node has the correct cursor style\n    const computedStyle = window.getComputedStyle(testElement);\n    assert.equal(computedStyle.cursor, 'move');\n\n    // Test drag event simulation\n    let dragStarted = false;\n    let dragEnded = false;\n    let newPosition = { left: 0, top: 0 };\n\n    // Simulate our drag implementation\n    let isDragging = false;\n    let dragStartPos = { x: 0, y: 0 };\n    let nodeStartPos = { left: 100, top: 100 };\n\n    const handleMouseDown = (event: MouseEvent) => {\n      const target = event.target as HTMLElement;\n      if (target.classList.contains('exit') || target.closest('.exit')) {\n        return;\n      }\n\n      isDragging = true;\n      dragStarted = true;\n      dragStartPos = { x: event.clientX, y: event.clientY };\n      nodeStartPos = { left: 100, top: 100 };\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    const handleMouseMove = (event: MouseEvent) => {\n      if (!isDragging) return;\n\n      const deltaX = event.clientX - dragStartPos.x;\n      const deltaY = event.clientY - dragStartPos.y;\n\n      const newLeft = nodeStartPos.left + deltaX;\n      const newTop = nodeStartPos.top + deltaY;\n\n      // Update position\n      (testElement as HTMLElement).style.left = `${newLeft}px`;\n      (testElement as HTMLElement).style.top = `${newTop}px`;\n    };\n\n    const handleMouseUp = (event: MouseEvent) => {\n      if (!isDragging) return;\n\n      isDragging = false;\n      dragEnded = true;\n\n      const deltaX = event.clientX - dragStartPos.x;\n      const deltaY = event.clientY - dragStartPos.y;\n\n      newPosition = {\n        left: nodeStartPos.left + deltaX,\n        top: nodeStartPos.top + deltaY\n      };\n    };\n\n    // Add event listeners\n    testElement.addEventListener('mousedown', handleMouseDown);\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n\n    // Test drag from node (should work)\n    const mouseDownEvent = new MouseEvent('mousedown', {\n      clientX: 150,\n      clientY: 150,\n      bubbles: true\n    });\n    testElement.dispatchEvent(mouseDownEvent);\n\n    assert.isTrue(dragStarted, 'Drag should start when clicking on node');\n\n    const mouseMoveEvent = new MouseEvent('mousemove', {\n      clientX: 200,\n      clientY: 200,\n      bubbles: true\n    });\n    document.dispatchEvent(mouseMoveEvent);\n\n    const mouseUpEvent = new MouseEvent('mouseup', {\n      clientX: 200,\n      clientY: 200,\n      bubbles: true\n    });\n    document.dispatchEvent(mouseUpEvent);\n\n    assert.isTrue(dragEnded, 'Drag should end on mouse up');\n    assert.equal(\n      newPosition.left,\n      150,\n      'New left position should be calculated correctly'\n    );\n    assert.equal(\n      newPosition.top,\n      150,\n      'New top position should be calculated correctly'\n    );\n\n    // Test that position was visually updated\n    assert.equal((testElement as HTMLElement).style.left, '150px');\n    assert.equal((testElement as HTMLElement).style.top, '150px');\n\n    // Reset for next test\n    dragStarted = false;\n    dragEnded = false;\n\n    // Test drag from exit element (should not work)\n    const exitElement = testElement.querySelector('.exit') as HTMLElement;\n    const exitMouseDownEvent = new MouseEvent('mousedown', {\n      clientX: 150,\n      clientY: 150,\n      bubbles: true\n    });\n    exitElement.dispatchEvent(exitMouseDownEvent);\n\n    assert.isFalse(\n      dragStarted,\n      'Drag should not start when clicking on exit element'\n    );\n\n    // Clean up\n    document.removeEventListener('mousemove', handleMouseMove);\n    document.removeEventListener('mouseup', handleMouseUp);\n  });\n\n  it('should snap node positions to 20px grid during drag and drop', async () => {\n    // Create a test node element\n    const testElement = await fixture(html`\n      <div\n        class=\"node\"\n        style=\"position: absolute; left: 100px; top: 100px; width: 200px; height: 100px; background: white; border: 1px solid #ccc; cursor: move;\"\n      >\n        Test Node for Grid Snapping\n      </div>\n    `);\n\n    // Helper function to snap values to 20px grid (same as implementation)\n    const snapToGrid = (value: number): number => {\n      return Math.round(value / 20) * 20;\n    };\n\n    // Simulate drag implementation with grid snapping\n    let isDragging = false;\n    let dragStartPos = { x: 0, y: 0 };\n    let nodeStartPos = { left: 100, top: 100 };\n    let finalPosition = { left: 0, top: 0 };\n\n    const handleMouseDown = (event: MouseEvent) => {\n      isDragging = true;\n      dragStartPos = { x: event.clientX, y: event.clientY };\n      // Get current position from element style\n      const currentLeft =\n        parseInt((testElement as HTMLElement).style.left) || 0;\n      const currentTop = parseInt((testElement as HTMLElement).style.top) || 0;\n      nodeStartPos = { left: currentLeft, top: currentTop };\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    const handleMouseMove = (event: MouseEvent) => {\n      if (!isDragging) return;\n\n      const deltaX = event.clientX - dragStartPos.x;\n      const deltaY = event.clientY - dragStartPos.y;\n\n      const newLeft = nodeStartPos.left + deltaX;\n      const newTop = nodeStartPos.top + deltaY;\n\n      // Snap to 20px grid\n      const snappedLeft = snapToGrid(newLeft);\n      const snappedTop = snapToGrid(newTop);\n\n      // Update position with snapped values\n      (testElement as HTMLElement).style.left = `${snappedLeft}px`;\n      (testElement as HTMLElement).style.top = `${snappedTop}px`;\n    };\n\n    const handleMouseUp = (event: MouseEvent) => {\n      if (!isDragging) return;\n      isDragging = false;\n\n      const deltaX = event.clientX - dragStartPos.x;\n      const deltaY = event.clientY - dragStartPos.y;\n\n      const newLeft = nodeStartPos.left + deltaX;\n      const newTop = nodeStartPos.top + deltaY;\n\n      // Snap final position to grid\n      finalPosition = {\n        left: snapToGrid(newLeft),\n        top: snapToGrid(newTop)\n      };\n    };\n\n    // Add event listeners\n    testElement.addEventListener('mousedown', handleMouseDown);\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n\n    // Test Case 1: Drag to position that should snap to grid\n    // Starting at (100, 100), drag by (33, 27) pixels\n    // Should result in (133, 127) -> snapped to (140, 120)\n    const mouseDownEvent1 = new MouseEvent('mousedown', {\n      clientX: 150,\n      clientY: 150,\n      bubbles: true\n    });\n    testElement.dispatchEvent(mouseDownEvent1);\n\n    const mouseMoveEvent1 = new MouseEvent('mousemove', {\n      clientX: 183, // 150 + 33\n      clientY: 177, // 150 + 27\n      bubbles: true\n    });\n    document.dispatchEvent(mouseMoveEvent1);\n\n    // Check that position is snapped during drag\n    assert.equal((testElement as HTMLElement).style.left, '140px');\n    assert.equal((testElement as HTMLElement).style.top, '120px');\n\n    const mouseUpEvent1 = new MouseEvent('mouseup', {\n      clientX: 183,\n      clientY: 177,\n      bubbles: true\n    });\n    document.dispatchEvent(mouseUpEvent1);\n\n    // Check final snapped position\n    assert.equal(\n      finalPosition.left,\n      140,\n      'Final left position should be snapped to 140px'\n    );\n    assert.equal(\n      finalPosition.top,\n      120,\n      'Final top position should be snapped to 120px'\n    );\n\n    // Test Case 2: Test different snap scenarios\n    // Reset position\n    nodeStartPos = { left: 60, top: 80 };\n    (testElement as HTMLElement).style.left = '60px';\n    (testElement as HTMLElement).style.top = '80px';\n\n    const mouseDownEvent2 = new MouseEvent('mousedown', {\n      clientX: 100,\n      clientY: 100,\n      bubbles: true\n    });\n    testElement.dispatchEvent(mouseDownEvent2);\n\n    // Drag by (15, 25) -> should snap to nearest 20px grid\n    // (60 + 15, 80 + 25) = (75, 105) -> snapped to (80, 100)\n    const mouseMoveEvent2 = new MouseEvent('mousemove', {\n      clientX: 115, // 100 + 15\n      clientY: 125, // 100 + 25\n      bubbles: true\n    });\n    document.dispatchEvent(mouseMoveEvent2);\n\n    assert.equal((testElement as HTMLElement).style.left, '80px');\n    assert.equal((testElement as HTMLElement).style.top, '100px');\n\n    const mouseUpEvent2 = new MouseEvent('mouseup', {\n      clientX: 115,\n      clientY: 125,\n      bubbles: true\n    });\n    document.dispatchEvent(mouseUpEvent2);\n\n    assert.equal(\n      finalPosition.left,\n      80,\n      'Final left position should be snapped to 80px'\n    );\n    assert.equal(\n      finalPosition.top,\n      100,\n      'Final top position should be snapped to 100px'\n    );\n\n    // Test Case 3: Test exact grid positions remain unchanged\n    nodeStartPos = { left: 120, top: 160 }; // Already on grid\n    (testElement as HTMLElement).style.left = '120px';\n    (testElement as HTMLElement).style.top = '160px';\n\n    const mouseDownEvent3 = new MouseEvent('mousedown', {\n      clientX: 200,\n      clientY: 200,\n      bubbles: true\n    });\n    testElement.dispatchEvent(mouseDownEvent3);\n\n    // Small movement that should stay on same grid position\n    const mouseMoveEvent3 = new MouseEvent('mousemove', {\n      clientX: 202, // +2 pixels\n      clientY: 203, // +3 pixels\n      bubbles: true\n    });\n    document.dispatchEvent(mouseMoveEvent3);\n\n    // (120 + 2, 160 + 3) = (122, 163) -> snapped to (120, 160)\n    assert.equal((testElement as HTMLElement).style.left, '120px');\n    assert.equal((testElement as HTMLElement).style.top, '160px');\n\n    const mouseUpEvent3 = new MouseEvent('mouseup', {\n      clientX: 202,\n      clientY: 203,\n      bubbles: true\n    });\n    document.dispatchEvent(mouseUpEvent3);\n\n    assert.equal(finalPosition.left, 120, 'Position should remain on grid');\n    assert.equal(finalPosition.top, 160, 'Position should remain on grid');\n\n    // Clean up\n    document.removeEventListener('mousemove', handleMouseMove);\n    document.removeEventListener('mouseup', handleMouseUp);\n  });\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.125.0",
+  "version": "0.126.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/chart/TembaChart.ts

@@ -295,6 +295,9 @@ export class TembaChart extends RapidElement {
   @property({ type: String })
   yType: 'count' | 'duration' = 'count';
 
+  @property({ type: String })
+  xFormat: 'MMM dd' | 'DD' | 'EEE' = 'MMM dd';
+
   @property({ type: Boolean })
   hideOther: boolean = false;
 
@@ -674,11 +677,13 @@ export class TembaChart extends RapidElement {
                 type: this.xType,
                 grid: { display: false },
                 stacked: true,
-                time: {
-                  unit: 'day',
-                  tooltipFormat: 'DDD',
-                  displayFormats: { day: 'MMM dd' }
-                }
+                ...(this.xType === 'time' && {
+                  time: {
+                    unit: 'day',
+                    tooltipFormat: 'DDD',
+                    displayFormats: { day: this.xFormat }
+                  }
+                })
               }
             }
           }

package/src/flow/Editor.ts

@@ -9,15 +9,20 @@ import { RapidElement } from '../RapidElement';
 import { Plumber } from './Plumber';
 import { EditorNode } from './EditorNode';
 
+const SAVE_QUIET_TIME = 500;
+
 export class Editor extends RapidElement {
-  // Unfortunately, jsplumb requires that we be in light DOM
+  // unfortunately, jsplumb requires that we be in light DOM
   createRenderRoot() {
     return this;
   }
 
-  // This is the master plumber
+  // this is the master plumber
   private plumber: Plumber;
 
+  // timer for debounced saving
+  private saveTimer: number | null = null;
+
   @property({ type: String })
   public flow: string;
 
@@ -30,6 +35,9 @@ export class Editor extends RapidElement {
   @fromStore(zustand, (state: AppState) => state.canvasSize)
   private canvasSize!: { width: number; height: number };
 
+  @fromStore(zustand, (state: AppState) => state.dirtyDate)
+  private dirtyDate!: Date;
+
   static get styles() {
     return css`
       #editor {
@@ -40,7 +48,7 @@ export class Editor extends RapidElement {
       #grid {
         position: relative;
         background-color: #f9f9f9;
-        background-position: 13px 13px;
+        background-position: 10px 10px;
         background-image: linear-gradient(
             0deg,
             transparent 24%,
@@ -84,11 +92,11 @@ export class Editor extends RapidElement {
       }
 
       .jtk-endpoint {
-        z-index: 1;
+        z-index: 600;
       }
 
       .plumb-source {
-        z-index: 300;
+        z-index: 600;
         border: 0px solid var(--color-connectors);
       }
 
@@ -112,7 +120,7 @@ export class Editor extends RapidElement {
 
       .plumb-target {
         margin-top: -6px;
-        z-index: 200;
+        z-index: 600;
         opacity: 0;
         cursor: pointer;
       }
@@ -120,6 +128,29 @@ export class Editor extends RapidElement {
       body .plumb-connector path {
         stroke: var(--color-connectors) !important;
         stroke-width: 3px;
+        z-index: 10;
+      }
+
+      body .plumb-connector {
+        z-index: 10;
+      }
+
+      body .plumb-connector.elevated {
+        z-index: 550;
+      }
+
+      body .plumb-connector.elevated path {
+        stroke: var(--color-connectors) !important;
+        stroke-width: 3px;
+        z-index: 550;
+      }
+
+      body .plumb-connector.elevated .plumb-arrow {
+        fill: var(--color-connectors);
+        stroke: var(--color-connectors);
+        stroke-width: 0px;
+        margin-top: 6px;
+        z-index: 550;
       }
 
       body .plumb-connector .plumb-arrow {
@@ -127,6 +158,7 @@ export class Editor extends RapidElement {
         stroke: var(--color-connectors);
         stroke-width: 0px;
         margin-top: 6px;
+        z-index: 10;
       }
 
       body svg.jtk-connector.jtk-hover path {
@@ -137,6 +169,7 @@ export class Editor extends RapidElement {
       body .plumb-connector.jtk-hover .plumb-arrow {
         fill: var(--color-success) !important;
         stroke-width: 0px;
+        z-index: 10;
       }
     `;
   }
@@ -162,6 +195,45 @@ export class Editor extends RapidElement {
     if (changes.has('canvasSize')) {
       // console.log('Setting canvas size', this.canvasSize);
     }
+
+    if (changes.has('dirtyDate')) {
+      if (this.dirtyDate) {
+        this.debouncedSave();
+      }
+    }
+  }
+
+  private debouncedSave(): void {
+    // Clear any existing timer
+    if (this.saveTimer !== null) {
+      clearTimeout(this.saveTimer);
+    }
+
+    this.saveTimer = window.setTimeout(() => {
+      const now = new Date();
+      const timeSinceLastChange = now.getTime() - this.dirtyDate.getTime();
+
+      if (timeSinceLastChange >= SAVE_QUIET_TIME) {
+        this.saveChanges();
+        this.saveTimer = null;
+      } else {
+        this.debouncedSave();
+      }
+    }, SAVE_QUIET_TIME);
+  }
+
+  private saveChanges(): void {
+    // post the flow definition to the server
+    getStore().postJSON(`/flow/revisions/${this.flow}`, this.definition);
+    getStore().getState().setDirtyDate(null);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.saveTimer !== null) {
+      clearTimeout(this.saveTimer);
+      this.saveTimer = null;
+    }
   }
 
   public render(): TemplateResult {