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