From 7cb96ce983fa5881cc41f91d688a93e8ea68f1cd Mon Sep 17 00:00:00 2001
From: Russell Parker <russell@benchling.com>
Date: Thu, 30 Mar 2023 08:51:20 -0400
Subject: [PATCH] Handle resizing viewer element when window remains the same
 size (#763)

* Handle resizing viewer element when window remains the same size

* Fix bad rebase

* Fall back to window resize event listener when ResizeObserver not defined

---------

Co-authored-by: David Sehnal <dsehnal@users.noreply.github.com>
---
 CHANGELOG.md                         |  2 +-
 src/mol-util/input/input-observer.ts | 23 +++++++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9371d1f23..97dd75731 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,9 +5,9 @@ Note that since we don't clearly distinguish between a public and private interf
 
 
 ## [Unreleased]
+- Handle resizes of viewer element even when window remains the same size
 - Selection toggle buttons hidden if selection mode is off
 - Camera focus loci bindings allow reset on click-away to be overridden
-
 - Input/controls improvements
     - Move or fly around the scene using keys
     - Pointer lock to look around scene
diff --git a/src/mol-util/input/input-observer.ts b/src/mol-util/input/input-observer.ts
index cca94225a..0764c6c88 100644
--- a/src/mol-util/input/input-observer.ts
+++ b/src/mol-util/input/input-observer.ts
@@ -3,6 +3,7 @@
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Russell Parker <russell@benchling.com>
  */
 
 import { Subject, Observable } from 'rxjs';
@@ -360,6 +361,11 @@ namespace InputObserver {
         let isInside = false;
         let hasMoved = false;
 
+        let resizeObserver: ResizeObserver | undefined;
+        if (typeof window.ResizeObserver !== 'undefined') {
+            resizeObserver = new window.ResizeObserver(onResize);
+        }
+
         const events = createEvents();
         const { drag, interactionEnd, wheel, pinch, gesture, click, move, leave, enter, resize, modifiers, key, keyUp, keyDown, lock } = events;
 
@@ -393,7 +399,11 @@ namespace InputObserver {
             document.addEventListener('pointerlockchange', onPointerLockChange, false);
             document.addEventListener('pointerlockerror', onPointerLockError, false);
 
-            window.addEventListener('resize', onResize, false);
+            if (resizeObserver != null) {
+                resizeObserver.observe(element.parentElement!);
+            } else {
+                window.addEventListener('resize', onResize, false);
+            }
         }
 
         function dispose() {
@@ -423,9 +433,14 @@ namespace InputObserver {
             document.removeEventListener('pointerlockchange', onPointerLockChange, false);
             document.removeEventListener('pointerlockerror', onPointerLockError, false);
 
-            window.removeEventListener('resize', onResize, false);
-
             cross.remove();
+
+            if (resizeObserver != null) {
+                resizeObserver.unobserve(element.parentElement!);
+                resizeObserver.disconnect();
+            } else {
+                window.removeEventListener('resize', onResize, false);
+            }
         }
 
         function onPointerLockChange() {
@@ -773,7 +788,7 @@ namespace InputObserver {
             gestureDelta(ev, true);
         }
 
-        function onResize(ev: Event) {
+        function onResize() {
             resize.next({});
         }
 
-- 
GitLab