Merge pull request #1196 from dermotduffy/allow-scrolling-when-zoomed

Allow scrolling when not zoomed in

src/utils/zoom/zoom.ts

@@ -85,6 +85,10 @@ export class Zoom {
     );
   }
 
+  protected _setTouchAction(touchEnabled: boolean): void {
+    this._element.style.touchAction = touchEnabled ? '' : 'none';
+  }
+
   public activate(): void {
     this._panzoom = Panzoom(this._element, {
       contain: 'outside',
@@ -94,6 +98,11 @@ export class Zoom {
       // Do not force the cursor style (by default it will always show the
       // 'move' type cursor whether or not it is zoomed in).
       cursor: undefined,
+
+      // Disable automatic touchAction setting from Panzoom() as otherwise it
+      // effectively disables dashboard scrolling.
+      // See: https://github.com/dermotduffy/frigate-hass-card/issues/1181
+      touchAction: '',
     });
 
     const registerListeners = (
@@ -117,11 +126,13 @@ export class Zoom {
       // absolute state changes (rather than on every single zoom adjustment).
       if (this._isScaleNormal((<CustomEvent<PanzoomEventDetail>>ev).detail.scale)) {
         if (this._zoomed) {
+          this._setTouchAction(true);
           dispatchFrigateCardEvent(this._element, 'zoom:unzoomed');
         }
         this._zoomed = false;
       } else {
         if (!this._zoomed) {
+          this._setTouchAction(false);
           dispatchFrigateCardEvent(this._element, 'zoom:zoomed');
         }
         this._zoomed = true;

tests/utils/zoom.test.ts

@@ -192,8 +192,7 @@ describe('Zoom', () => {
     element.addEventListener('frigate-card:zoom:zoomed', zoomedFunc);
     element.addEventListener('frigate-card:zoom:unzoomed', unzoomedFunc);
 
-    const panzoom = createMockPanZoom();
+    vi.mocked(Panzoom).mockReturnValueOnce(createMockPanZoom());
-    vi.mocked(Panzoom).mockReturnValueOnce(panzoom);
 
     createAndRegisterZoom(element);
 
@@ -222,4 +221,35 @@ describe('Zoom', () => {
     element.dispatchEvent(ev_2);
     expect(unzoomedFunc).toBeCalled();
   });
+
+  it('should set touch action on zoom/unzoom', () => {
+    const element = document.createElement('div');
+    vi.mocked(Panzoom).mockReturnValueOnce(createMockPanZoom());
+
+    createAndRegisterZoom(element);
+
+    const ev_1 = new CustomEvent<PanzoomEventDetail>('panzoomzoom', {
+      detail: {
+        x: 0,
+        y: 0,
+        scale: 1.2,
+        isSVG: false,
+        originalEvent: new PointerEvent('pointermove'),
+      },
+    });
+    element.dispatchEvent(ev_1);
+    expect(element.style.touchAction).toBe('none');
+
+    const ev_2 = new CustomEvent<PanzoomEventDetail>('panzoomzoom', {
+      detail: {
+        x: 0,
+        y: 0,
+        scale: 1,
+        isSVG: false,
+        originalEvent: new PointerEvent('pointermove'),
+      },
+    });
+    element.dispatchEvent(ev_2);
+    expect(element.style.touchAction).toBeFalsy();
+  });
 });