@nyaruka/temba-components 0.141.1 → 0.142.1

package/test/temba-flow-editor.test.ts

@@ -1,7 +1,7 @@
 import { html, fixture, expect } from '@open-wc/testing';
 import { Editor } from '../src/flow/Editor';
 import { Plumber } from '../src/flow/Plumber';
-import { stub, restore } from 'sinon';
+import { stub, restore, useFakeTimers } from 'sinon';
 import { zustand } from '../src/store/AppState';
 import { TEMBA_COMPONENTS_VERSION } from '../src/version';
 
@@ -1086,4 +1086,190 @@ describe('Editor', () => {
       ).to.equal('Save failed with status 403.');
     });
   });
+
+  describe('reflow card', () => {
+    let clock: any;
+
+    beforeEach(() => {
+      clock = useFakeTimers();
+    });
+
+    afterEach(() => {
+      clock.restore();
+    });
+
+    it('renders only Discard button and meter when reflowUnsaved', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      (editor as any).reflowUnsaved = true;
+      await editor.updateComplete;
+
+      const card = editor.querySelector('.reflow-card');
+      expect(card).to.exist;
+
+      const discardBtn = card.querySelector('.reflow-discard');
+      expect(discardBtn).to.exist;
+      expect(discardBtn.textContent.trim()).to.equal('Discard');
+
+      const saveBtn = card.querySelector('.reflow-save');
+      expect(saveBtn).to.not.exist;
+
+      const meter = card.querySelector('.reflow-meter');
+      expect(meter).to.exist;
+
+      const meterFill = card.querySelector('.reflow-meter-fill');
+      expect(meterFill).to.exist;
+    });
+
+    it('does not render reflow card when reflowUnsaved is false', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      (editor as any).reflowUnsaved = false;
+      await editor.updateComplete;
+
+      const card = editor.querySelector('.reflow-card');
+      expect(card).to.not.exist;
+    });
+
+    it('auto-saves after countdown expires', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      const saveStub = stub(editor as any, 'saveChanges').resolves();
+      (editor as any).reflowUnsaved = true;
+      (editor as any).savedReflowPositions = { 'node-1': { left: 0, top: 0 } };
+
+      // Start the auto-save timer
+      (editor as any).clearReflowAutoSaveTimer();
+      (editor as any).reflowAutoSaveTimer = setTimeout(() => {
+        (editor as any).reflowAutoSaveTimer = null;
+        if ((editor as any).reflowUnsaved) {
+          (editor as any).reflowUnsaved = false;
+          (editor as any).savedReflowPositions = null;
+          (editor as any).saveChanges();
+        }
+      }, 5000);
+
+      // Advance time just before the deadline
+      clock.tick(4999);
+      expect(saveStub).to.not.have.been.called;
+      expect((editor as any).reflowUnsaved).to.be.true;
+
+      // Advance past the deadline
+      clock.tick(1);
+      expect(saveStub).to.have.been.calledOnce;
+      expect((editor as any).reflowUnsaved).to.be.false;
+      expect((editor as any).savedReflowPositions).to.be.null;
+
+      saveStub.restore();
+    });
+
+    it('cancels auto-save timer when Discard is clicked', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      const saveStub = stub(editor as any, 'saveChanges').resolves();
+      (editor as any).reflowUnsaved = true;
+      // Don't set savedReflowPositions — we're testing timer cancellation,
+      // not the position-revert logic (which needs the store).
+
+      // Start the auto-save timer
+      (editor as any).reflowAutoSaveTimer = setTimeout(() => {
+        (editor as any).saveChanges();
+      }, 5000);
+
+      // Click discard
+      (editor as any).handleReflowDiscard();
+
+      expect((editor as any).reflowUnsaved).to.be.false;
+      expect((editor as any).reflowAutoSaveTimer).to.be.null;
+
+      // Advance past the original deadline — save should NOT fire
+      clock.tick(6000);
+      expect(saveStub).to.not.have.been.called;
+
+      saveStub.restore();
+    });
+
+    it('cancels auto-save timer when a normal edit dismisses card', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      const saveStub = stub(editor as any, 'saveChanges').resolves();
+      (editor as any).reflowUnsaved = true;
+      (editor as any).savedReflowPositions = { 'node-1': { left: 0, top: 0 } };
+
+      // Start the auto-save timer
+      (editor as any).reflowAutoSaveTimer = setTimeout(() => {
+        (editor as any).saveChanges();
+      }, 5000);
+
+      // Simulate a normal edit triggering the dirtyDate handler
+      (editor as any).dirtyDate = new Date();
+      const changes = new Map();
+      changes.set('dirtyDate', null);
+      (editor as any).updated(changes);
+
+      expect((editor as any).reflowUnsaved).to.be.false;
+      expect((editor as any).reflowAutoSaveTimer).to.be.null;
+
+      // The debouncedSave from the normal edit will call saveChanges,
+      // but the reflow timer should not fire separately
+      clock.tick(6000);
+
+      saveStub.restore();
+    });
+
+    it('clears auto-save timer in disconnectedCallback', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      // Start the auto-save timer
+      (editor as any).reflowAutoSaveTimer = setTimeout(() => {}, 5000);
+      expect((editor as any).reflowAutoSaveTimer).to.not.be.null;
+
+      // Remove the editor from DOM
+      editor.remove();
+
+      expect((editor as any).reflowAutoSaveTimer).to.be.null;
+    });
+
+    it('clears existing timer when performReflow is called again', () => {
+      editor = new Editor();
+
+      // Set up a first timer
+      const firstTimer = setTimeout(() => {}, 5000);
+      (editor as any).reflowAutoSaveTimer = firstTimer;
+
+      // Call clearReflowAutoSaveTimer (which performReflow calls)
+      (editor as any).clearReflowAutoSaveTimer();
+
+      expect((editor as any).reflowAutoSaveTimer).to.be.null;
+
+      // The old timer should be cleared — advancing time should not fire it
+      clock.tick(6000);
+    });
+  });
 });

package/test/temba-flow-node-drag.test.ts

@@ -334,4 +334,175 @@ describe('temba-flow-node drag and drop functionality', () => {
     document.removeEventListener('mousemove', handleMouseMove);
     document.removeEventListener('mouseup', handleMouseUp);
   });
+
+  describe('auto-scroll during drag', () => {
+    const AUTO_SCROLL_EDGE_ZONE = 100;
+    const AUTO_SCROLL_MAX_SPEED = 15;
+
+    function calculateScrollSpeed(
+      mousePos: number,
+      edgeStart: number,
+      edgeEnd: number
+    ): { dx: number; dy: number } {
+      const dx = 0;
+      const dy = 0;
+
+      // Left/top edge
+      const distFromStart = mousePos - edgeStart;
+      if (distFromStart >= 0 && distFromStart < AUTO_SCROLL_EDGE_ZONE) {
+        const ratio = 1 - distFromStart / AUTO_SCROLL_EDGE_ZONE;
+        return { dx: -(ratio * AUTO_SCROLL_MAX_SPEED), dy: 0 };
+      }
+
+      // Right/bottom edge
+      const distFromEnd = edgeEnd - mousePos;
+      if (distFromEnd >= 0 && distFromEnd < AUTO_SCROLL_EDGE_ZONE) {
+        const ratio = 1 - distFromEnd / AUTO_SCROLL_EDGE_ZONE;
+        return { dx: ratio * AUTO_SCROLL_MAX_SPEED, dy: 0 };
+      }
+
+      return { dx, dy };
+    }
+
+    it('should calculate scroll speed based on distance to edge', () => {
+      const edgeStart = 0;
+      const edgeEnd = 800;
+
+      // At the very left edge (distance = 0), speed should be max
+      let result = calculateScrollSpeed(0, edgeStart, edgeEnd);
+      assert.equal(result.dx, -AUTO_SCROLL_MAX_SPEED);
+
+      // At the edge zone boundary, speed should be 0
+      result = calculateScrollSpeed(AUTO_SCROLL_EDGE_ZONE, edgeStart, edgeEnd);
+      assert.equal(result.dx, 0);
+
+      // Halfway into the zone, speed should be half of max
+      result = calculateScrollSpeed(
+        AUTO_SCROLL_EDGE_ZONE / 2,
+        edgeStart,
+        edgeEnd
+      );
+      assert.closeTo(result.dx, -AUTO_SCROLL_MAX_SPEED / 2, 0.01);
+
+      // At the very right edge (distance = 0), speed should be max positive
+      result = calculateScrollSpeed(800, edgeStart, edgeEnd);
+      assert.equal(result.dx, AUTO_SCROLL_MAX_SPEED);
+
+      // Halfway into the right edge zone
+      result = calculateScrollSpeed(
+        edgeEnd - AUTO_SCROLL_EDGE_ZONE / 2,
+        edgeStart,
+        edgeEnd
+      );
+      assert.closeTo(result.dx, AUTO_SCROLL_MAX_SPEED / 2, 0.01);
+
+      // In the middle of the viewport, no scrolling
+      result = calculateScrollSpeed(400, edgeStart, edgeEnd);
+      assert.equal(result.dx, 0);
+    });
+
+    it('should not scroll when mouse is outside the viewport', () => {
+      const edgeStart = 0;
+      const edgeEnd = 800;
+
+      // Mouse is to the left of the viewport
+      const result = calculateScrollSpeed(-10, edgeStart, edgeEnd);
+      assert.equal(result.dx, 0);
+    });
+
+    it('should account for scroll delta in drag position calculation', () => {
+      // Simulate the formula: deltaX = (clientX - startX) + autoScrollDeltaX
+      const dragStartX = 400;
+      const currentClientX = 450;
+      const autoScrollDeltaX = 200;
+
+      const deltaX = currentClientX - dragStartX + autoScrollDeltaX;
+
+      // Without auto-scroll, delta would be 50. With 200px of scroll, it's 250.
+      assert.equal(deltaX, 250);
+
+      const originalLeft = 100;
+      const newLeft = originalLeft + deltaX;
+      assert.equal(newLeft, 350);
+    });
+
+    it('should accumulate scroll deltas correctly over multiple frames', () => {
+      let autoScrollDeltaX = 0;
+      let autoScrollDeltaY = 0;
+
+      // Simulate several frames of scrolling
+      const scrollIncrements = [
+        { dx: 5, dy: 3 },
+        { dx: 8, dy: 6 },
+        { dx: 10, dy: 9 },
+        { dx: 0, dy: 12 } // only vertical scrolling
+      ];
+
+      scrollIncrements.forEach(({ dx, dy }) => {
+        autoScrollDeltaX += dx;
+        autoScrollDeltaY += dy;
+      });
+
+      assert.equal(autoScrollDeltaX, 23);
+      assert.equal(autoScrollDeltaY, 30);
+    });
+
+    it('should clamp scroll delta when at scroll boundaries', () => {
+      // Simulate a scroll container at its left boundary
+      let scrollLeft = 0;
+      const requestedDx = -10;
+
+      const beforeScrollLeft = scrollLeft;
+      scrollLeft = Math.max(0, scrollLeft + requestedDx);
+      const actualDx = scrollLeft - beforeScrollLeft;
+
+      // At the boundary, actual delta should be 0
+      assert.equal(actualDx, 0);
+
+      // Simulate a scroll container not at boundary
+      scrollLeft = 50;
+      const beforeScrollLeft2 = scrollLeft;
+      scrollLeft = Math.max(0, scrollLeft + requestedDx);
+      const actualDx2 = scrollLeft - beforeScrollLeft2;
+
+      // Should have scrolled the full amount
+      assert.equal(actualDx2, -10);
+    });
+
+    it('should reset scroll deltas after drag ends', () => {
+      let autoScrollDeltaX = 150;
+      let autoScrollDeltaY = 200;
+
+      // Simulate drag end reset
+      autoScrollDeltaX = 0;
+      autoScrollDeltaY = 0;
+
+      assert.equal(autoScrollDeltaX, 0);
+      assert.equal(autoScrollDeltaY, 0);
+    });
+
+    it('should handle simultaneous horizontal and vertical auto-scroll', () => {
+      // Simulate mouse in the bottom-right corner of the viewport
+      const edgeEnd = 800;
+      const mousePos = 780; // 20px from the right/bottom edge
+
+      const distFromEnd = edgeEnd - mousePos;
+      assert.isTrue(distFromEnd < AUTO_SCROLL_EDGE_ZONE);
+
+      const ratio = 1 - distFromEnd / AUTO_SCROLL_EDGE_ZONE;
+      const scrollSpeed = ratio * AUTO_SCROLL_MAX_SPEED;
+
+      // Both axes should get the same speed when equidistant from edges
+      assert.isAbove(scrollSpeed, 0);
+
+      // Apply to both axes
+      let autoScrollDeltaX = 0;
+      let autoScrollDeltaY = 0;
+      autoScrollDeltaX += scrollSpeed;
+      autoScrollDeltaY += scrollSpeed;
+
+      assert.equal(autoScrollDeltaX, autoScrollDeltaY);
+      assert.isAbove(autoScrollDeltaX, 0);
+    });
+  });
 });

package/test/temba-flow-plumber.test.ts

@@ -120,6 +120,44 @@ describe('Plumber', () => {
       expect((plumber as any).sources.size).to.equal(0);
     });
   });
+
+  describe('zoom property', () => {
+    it('defaults to 1.0', () => {
+      expect(plumber.zoom).to.equal(1.0);
+    });
+
+    it('is writable', () => {
+      plumber.zoom = 0.75;
+      expect(plumber.zoom).to.equal(0.75);
+    });
+  });
+
+  describe('toCanvas', () => {
+    it('returns identity at zoom 1.0', () => {
+      plumber.zoom = 1.0;
+      expect((plumber as any).toCanvas(100)).to.equal(100);
+    });
+
+    it('divides by zoom at 0.5', () => {
+      plumber.zoom = 0.5;
+      expect((plumber as any).toCanvas(100)).to.equal(200);
+    });
+
+    it('handles minimum zoom 0.1', () => {
+      plumber.zoom = 0.1;
+      expect((plumber as any).toCanvas(50)).to.equal(500);
+    });
+
+    it('handles negative viewport diffs', () => {
+      plumber.zoom = 0.5;
+      expect((plumber as any).toCanvas(-100)).to.equal(-200);
+    });
+
+    it('handles zero', () => {
+      plumber.zoom = 0.5;
+      expect((plumber as any).toCanvas(0)).to.equal(0);
+    });
+  });
 });
 
 describe('calculateFlowchartPath', () => {