Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +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
// 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.
const [prevUpdateTransforms, setPrevUpdateTransforms] = useState<() => void>(undefined);
const [resizeObserver, setResizeObserver] = useState<ResizeObserver>(undefined);
useEffect(() => {
if (overlayContainerRef.current) {
console.log("replace resize listener");
if (prevUpdateTransforms) window.removeEventListener("resize", prevUpdateTransforms);
window.addEventListener("resize", updateTransforms);
setPrevUpdateTransforms(updateTransforms);
if (resizeObserver) resizeObserver.disconnect();
const newResizeObserver = new ResizeObserver(updateTransforms);
newResizeObserver.observe(overlayContainerRef.current);
setResizeObserver(newResizeObserver);
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.
// `animate` will be disabled until after the transforms have all applied the first time.