Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-17 20:51:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use resize observer to detect when the webview gets zoomed (#22)

Browse Source 
I noticed that the display nodes weren't getting updated when the browser zoom level changed. I found that using ResizeObserver was a better mechanism to capture this signal.
This commit is contained in:
Evan Simkowitz 2024-06-06 11:18:05 -07:00 committed by GitHub
parent f12e246c15
commit 1bc4e0c594
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/faraday/lib/TileLayout.tsx
View File

@ -131,16 +131,19 @@ export const TileLayout = <T,>({ layoutTreeStateAtom, className, renderContent,
// Update the transforms on first render and again whenever the window resizes. I had to do a slightly hacky thing // Update the transforms on first render and again whenever the window resizes. I had to do a slightly hacky thing
// because I noticed that the window handler wasn't updating when the callback changed so I remove it each time and // because I noticed that the window handler wasn't updating when the callback changed so I remove it each time and
// reattach the new callback. // reattach the new callback.
const [prevUpdateTransforms, setPrevUpdateTransforms] = useState<() => void>(undefined); const [resizeObserver, setResizeObserver] = useState<ResizeObserver>(undefined);
useEffect(() => { useEffect(() => {
if (overlayContainerRef.current) {
console.log("replace resize listener"); console.log("replace resize listener");
if (prevUpdateTransforms) window.removeEventListener("resize", prevUpdateTransforms); if (resizeObserver) resizeObserver.disconnect();
window.addEventListener("resize", updateTransforms); const newResizeObserver = new ResizeObserver(updateTransforms);
setPrevUpdateTransforms(updateTransforms); newResizeObserver.observe(overlayContainerRef.current);
setResizeObserver(newResizeObserver);
return () => { return () => {
window.removeEventListener("resize", updateTransforms); resizeObserver.disconnect();
}; };
}, [updateTransforms]); }
}, [updateTransforms, overlayContainerRef]);
// Ensure that we don't see any jostling in the layout when we're rendering it the first time. // Ensure that we don't see any jostling in the layout when we're rendering it the first time.
// `animate` will be disabled until after the transforms have all applied the first time. // `animate` will be disabled until after the transforms have all applied the first time.