35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
/**
|
|
* Copyright (c) 2022 The xterm.js authors. All rights reserved.
|
|
* @license MIT
|
|
*/
|
|
|
|
import { toDisposable } from 'common/Lifecycle';
|
|
import { IDisposable } from 'common/Types';
|
|
|
|
export function observeDevicePixelDimensions(element: HTMLElement, 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 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;
|
|
}
|
|
|
|
callback(
|
|
entry.devicePixelContentBoxSize[0].inlineSize,
|
|
entry.devicePixelContentBoxSize[0].blockSize
|
|
);
|
|
});
|
|
observer.observe(element, { box: ['device-pixel-content-box'] } as any);
|
|
return toDisposable(() => observer?.disconnect());
|
|
}
|