41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
/**
|
|
* Copyright (c) 2022 The xterm.js authors. All rights reserved.
|
|
* @license MIT
|
|
*/
|
|
|
|
import { toDisposable, IDisposable } from 'common/Lifecycle';
|
|
|
|
export function observeDevicePixelDimensions(element: HTMLElement, parentWindow: Window & typeof globalThis, callback: (deviceWidth: number, deviceHeight: number) => void): IDisposable {
|
|
// Observe any resizes to the element and extract the actual pixel size of the element if the
|
|
// devicePixelContentBoxSize API is supported. This allows correcting rounding errors when
|
|
// converting between CSS pixels and device pixels which causes blurry rendering when device
|
|
// pixel ratio is not a round number.
|
|
let observer: ResizeObserver | undefined = new parentWindow.ResizeObserver((entries) => {
|
|
const entry = entries.find((entry) => entry.target === element);
|
|
if (!entry) {
|
|
return;
|
|
}
|
|
|
|
// Disconnect if devicePixelContentBoxSize isn't supported by the browser
|
|
if (!('devicePixelContentBoxSize' in entry)) {
|
|
observer?.disconnect();
|
|
observer = undefined;
|
|
return;
|
|
}
|
|
|
|
// Fire the callback, ignore events where the dimensions are 0x0 as the canvas is likely hidden
|
|
const width = entry.devicePixelContentBoxSize[0].inlineSize;
|
|
const height = entry.devicePixelContentBoxSize[0].blockSize;
|
|
if (width > 0 && height > 0) {
|
|
callback(width, height);
|
|
}
|
|
});
|
|
try {
|
|
observer.observe(element, { box: ['device-pixel-content-box'] } as any);
|
|
} catch {
|
|
observer.disconnect();
|
|
observer = undefined;
|
|
}
|
|
return toDisposable(() => observer?.disconnect());
|
|
}
|