From 2b1f0f5d8527a767ed18942c97395ffe85365322 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 6 May 2023 13:14:04 -0700
Subject: [PATCH] Show different mouse cursor when zoomed in.

---
 src/components/zoomer.ts | 31 +++++++++++++++++++++++++++++--
 src/utils/zoom/zoom.ts   |  4 +++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/components/zoomer.ts b/src/components/zoomer.ts
index 84885479..cf82844b 100644
--- a/src/components/zoomer.ts
+++ b/src/components/zoomer.ts
@@ -1,20 +1,43 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { setOrRemoveAttribute } from '../utils/basic.js';
 import { Zoom } from '../utils/zoom/zoom.js';
 
 @customElement('frigate-card-zoomer')
 export class FrigateCardZoomer extends LitElement {
   protected _zoom = new Zoom(this);
 
+  @state()
+  protected _zoomed = false;
+
+  protected _zoomHandler = () => (this._zoomed = true);
+  protected _unzoomHandler = () => (this._zoomed = false);
+
   connectedCallback(): void {
     super.connectedCallback();
+    this.addEventListener('frigate-card:zoom:zoomed', this._zoomHandler);
+    this.addEventListener('frigate-card:zoom:unzoomed', this._unzoomHandler);
     this._zoom.activate();
   }
 
   disconnectedCallback(): void {
     this._zoom.deactivate();
+    this.removeEventListener('frigate-card:zoom:zoomed', this._zoomHandler);
+    this.removeEventListener('frigate-card:zoom:unzoomed', this._unzoomHandler);
   }
 
+  protected willUpdate(changedProps: PropertyValues): void {
+    if (changedProps.has('_zoomed')) {
+      setOrRemoveAttribute(this, this._zoomed, 'zoomed');
+    }
+  }
   protected render(): TemplateResult | void {
     return html` <slot></slot> `;
   }
@@ -25,6 +48,10 @@ export class FrigateCardZoomer extends LitElement {
         width: 100%;
         height: 100%;
         display: block;
+        cursor: auto;
+      }
+      :host([zoomed]) {
+        cursor: move;
       }
     `;
   }
diff --git a/src/utils/zoom/zoom.ts b/src/utils/zoom/zoom.ts
index 7b921134..8c0f68b9 100644
--- a/src/utils/zoom/zoom.ts
+++ b/src/utils/zoom/zoom.ts
@@ -75,7 +75,9 @@ export class Zoom {
       maxScale: 10,
       minScale: 1,
       noBind: true,
-      cursor: 'auto',
+      // 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,
     });
 
     const registerListeners = (