From 231e3087b7f505d1ed47d72ca526aae56140ff85 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 26 Jul 2026 20:54:07 -0700
Subject: [PATCH] fix: Error when a zoomable element is removed during zoom
 initialization (#2624)

- Closes: #2410
---
 package.json                                      |  2 +-
 src/components-lib/zoom/zoom-controller.ts        |  4 +++-
 tests/components-lib/zoom/zoom-controller.test.ts |  3 +++
 yarn.lock                                         | 10 +++++-----
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 8e52d3e3..ee578611 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   "license": "MIT",
   "dependencies": {
     "@cycjimmy/jsmpeg-player": "^6.0.5",
-    "@dermotduffy/panzoom": "^4.5.1",
+    "@dermotduffy/panzoom": "^4.6.2",
     "@egjs/hammerjs": "^2.0.17",
     "@graphiteds/core": "^1.9.21",
     "@lit-labs/scoped-registry-mixin": "^1.0.3",
diff --git a/src/components-lib/zoom/zoom-controller.ts b/src/components-lib/zoom/zoom-controller.ts
index 5db0346f..15e51462 100644
--- a/src/components-lib/zoom/zoom-controller.ts
+++ b/src/components-lib/zoom/zoom-controller.ts
@@ -18,7 +18,7 @@ import {
 
 export class ZoomController {
   private _element: HTMLElement;
-  private _panzoom?: PanzoomObject;
+  private _panzoom: PanzoomObject | null = null;
 
   // Is the controller zoomed in at all?
   private _zoomed = false;
@@ -184,6 +184,8 @@ export class ZoomController {
 
     this._resizeObserver.disconnect();
     this._element.removeEventListener('panzoomchange', this._debouncedChangeHandler);
+
+    this._panzoom = null;
   }
 
   public setDefaultSettings(config: PartialZoomSettings | null): void {
diff --git a/tests/components-lib/zoom/zoom-controller.test.ts b/tests/components-lib/zoom/zoom-controller.test.ts
index 21fcbe09..18040b7a 100644
--- a/tests/components-lib/zoom/zoom-controller.test.ts
+++ b/tests/components-lib/zoom/zoom-controller.test.ts
@@ -655,6 +655,9 @@ describe('ZoomController', () => {
 
     controller.activate();
     expect(controller.isActivated()).toBe(true);
+
+    controller.deactivate();
+    expect(controller.isActivated()).toBe(false);
   });
 
   it('should not zoom or pan when zoom is disabled', () => {
diff --git a/yarn.lock b/yarn.lock
index c1078515..18f3911c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -209,10 +209,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@dermotduffy/panzoom@npm:^4.5.1":
-  version: 4.5.1
-  resolution: "@dermotduffy/panzoom@npm:4.5.1"
-  checksum: 10c0/566f62a81714f9b836b6c0138cdc9913577c3854fe7ce6b609e26734c6692a3db5c9282945930bb6e83c0a70befa269203694f9aeb588e8831842a698c7b51cf
+"@dermotduffy/panzoom@npm:^4.6.2":
+  version: 4.6.2
+  resolution: "@dermotduffy/panzoom@npm:4.6.2"
+  checksum: 10c0/a9c105a2be9dfd1f20e87dc091263579c0f1f4ce6ea0dfe045aa1c5d8c2aea9417783b3f994276e4a840b4bb78f1a048953d4ce7e056ad4d45ed31fae8158b5e
   languageName: node
   linkType: hard
 
@@ -2324,7 +2324,7 @@ __metadata:
   resolution: "advanced-camera-card@workspace:."
   dependencies:
     "@cycjimmy/jsmpeg-player": "npm:^6.0.5"
-    "@dermotduffy/panzoom": "npm:^4.5.1"
+    "@dermotduffy/panzoom": "npm:^4.6.2"
     "@egjs/hammerjs": "npm:^2.0.17"
     "@eslint/eslintrc": "npm:^3.3.6"
     "@eslint/js": "npm:^9.24.0"