|
|
@ -194,122 +194,64 @@ export class Canvas { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
type SizeWatcherElement = { |
|
|
type ResizeHandlerCallback = (displayWidth: number, displayHeight: number, dpi: number) => void; |
|
|
SizeWatcher: SizeWatcherInstance; |
|
|
|
|
|
} & HTMLElement; |
|
|
|
|
|
|
|
|
|
|
|
interface SizeWatcherInstance { |
|
|
type ResizeObserverWithCallbacks = { |
|
|
callback: (width: number, height: number) => void; |
|
|
callbacks: Map<Element, ResizeHandlerCallback>; |
|
|
} |
|
|
} & ResizeObserver; |
|
|
|
|
|
|
|
|
export class SizeWatcher { |
|
|
export class ResizeHandler { |
|
|
static observer: ResizeObserver; |
|
|
private static resizeObserver?: ResizeObserverWithCallbacks; |
|
|
static elements: Map<string, HTMLElement>; |
|
|
|
|
|
private static lastMove: number; |
|
|
|
|
|
private static timeoutHandle?: number; |
|
|
|
|
|
|
|
|
|
|
|
public static observe(element: HTMLElement, elementId: string | undefined, callback: (width: number, height: number) => void): void { |
|
|
public static observeSize(element: HTMLElement, callback: ResizeHandlerCallback): (() => void) { |
|
|
if (!element || !callback) { |
|
|
if (!this.resizeObserver) { |
|
|
return; |
|
|
this.resizeObserver = new ResizeObserver(this.onResize) as ResizeObserverWithCallbacks; |
|
|
|
|
|
this.resizeObserver.callbacks = new Map<Element, ResizeHandlerCallback>(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
SizeWatcher.lastMove = Date.now(); |
|
|
this.resizeObserver.callbacks.set(element, callback); |
|
|
|
|
|
this.resizeObserver.observe(element, { box: "content-box" }); |
|
|
callback(element.clientWidth, element.clientHeight); |
|
|
|
|
|
|
|
|
|
|
|
const handleResize = (args: UIEvent) => { |
|
|
return () => { |
|
|
if (Date.now() - SizeWatcher.lastMove > 33) { |
|
|
this.resizeObserver?.callbacks.delete(element); |
|
|
callback(element.clientWidth, element.clientHeight); |
|
|
this.resizeObserver?.unobserve(element); |
|
|
SizeWatcher.lastMove = Date.now(); |
|
|
|
|
|
if (SizeWatcher.timeoutHandle) { |
|
|
|
|
|
clearTimeout(SizeWatcher.timeoutHandle); |
|
|
|
|
|
SizeWatcher.timeoutHandle = undefined; |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
if (SizeWatcher.timeoutHandle) { |
|
|
|
|
|
clearTimeout(SizeWatcher.timeoutHandle); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
SizeWatcher.timeoutHandle = setTimeout(() => { |
|
|
|
|
|
callback(element.clientWidth, element.clientHeight); |
|
|
|
|
|
SizeWatcher.lastMove = Date.now(); |
|
|
|
|
|
SizeWatcher.timeoutHandle = undefined; |
|
|
|
|
|
}, 100); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
window.addEventListener("resize", handleResize); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public static unobserve(elementId: string): void { |
|
|
private static onResize(entries: ResizeObserverEntry[], observer: ResizeObserver) { |
|
|
if (!elementId || !SizeWatcher.observer) { |
|
|
for (const entry of entries) { |
|
|
return; |
|
|
const callback = (observer as ResizeObserverWithCallbacks).callbacks.get(entry.target); |
|
|
} |
|
|
if (!callback) { |
|
|
|
|
|
continue; |
|
|
const element = SizeWatcher.elements.get(elementId); |
|
|
|
|
|
if (element) { |
|
|
|
|
|
SizeWatcher.elements.delete(elementId); |
|
|
|
|
|
SizeWatcher.observer.unobserve(element); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
static init(): void { |
|
|
|
|
|
if (SizeWatcher.observer) { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
SizeWatcher.elements = new Map<string, HTMLElement>(); |
|
|
|
|
|
SizeWatcher.observer = new ResizeObserver((entries) => { |
|
|
|
|
|
for (const entry of entries) { |
|
|
|
|
|
SizeWatcher.invoke(entry.target); |
|
|
|
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
static invoke(element: Element): void { |
|
|
|
|
|
const watcherElement = element as SizeWatcherElement; |
|
|
|
|
|
const instance = watcherElement.SizeWatcher; |
|
|
|
|
|
|
|
|
|
|
|
if (!instance || !instance.callback) { |
|
|
const trueDpr = window.devicePixelRatio; |
|
|
return; |
|
|
let width; |
|
|
} |
|
|
let height; |
|
|
|
|
|
let dpr = trueDpr; |
|
|
return instance.callback(element.clientWidth, element.clientHeight); |
|
|
if (entry.devicePixelContentBoxSize) { |
|
|
} |
|
|
// NOTE: Only this path gives the correct answer
|
|
|
} |
|
|
// The other paths are imperfect fallbacks
|
|
|
|
|
|
// for browsers that don't provide anyway to do this
|
|
|
export class DpiWatcher { |
|
|
width = entry.devicePixelContentBoxSize[0].inlineSize; |
|
|
static lastDpi: number; |
|
|
height = entry.devicePixelContentBoxSize[0].blockSize; |
|
|
static timerId: number; |
|
|
dpr = 1; // it's already in width and height
|
|
|
static callback: (old: number, newdpi: number) => void; |
|
|
} else if (entry.contentBoxSize) { |
|
|
|
|
|
if (entry.contentBoxSize[0]) { |
|
|
public static getDpi(): number { |
|
|
width = entry.contentBoxSize[0].inlineSize; |
|
|
return window.devicePixelRatio; |
|
|
height = entry.contentBoxSize[0].blockSize; |
|
|
} |
|
|
} else { |
|
|
|
|
|
width = (entry.contentBoxSize as any).inlineSize; |
|
|
public static start(callback: (old: number, newdpi: number) => void): number { |
|
|
height = (entry.contentBoxSize as any).blockSize; |
|
|
DpiWatcher.lastDpi = window.devicePixelRatio; |
|
|
} |
|
|
DpiWatcher.timerId = window.setInterval(DpiWatcher.update, 1000); |
|
|
} else { |
|
|
DpiWatcher.callback = callback; |
|
|
width = entry.contentRect.width; |
|
|
|
|
|
height = entry.contentRect.height; |
|
|
return DpiWatcher.lastDpi; |
|
|
} |
|
|
} |
|
|
const displayWidth = Math.round(width * dpr); |
|
|
|
|
|
const displayHeight = Math.round(height * dpr); |
|
|
public static stop(): void { |
|
|
|
|
|
window.clearInterval(DpiWatcher.timerId); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
static update(): void { |
|
|
|
|
|
if (!DpiWatcher.callback) { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const currentDpi = window.devicePixelRatio; |
|
|
|
|
|
const lastDpi = DpiWatcher.lastDpi; |
|
|
|
|
|
DpiWatcher.lastDpi = currentDpi; |
|
|
|
|
|
|
|
|
|
|
|
if (Math.abs(lastDpi - currentDpi) > 0.001) { |
|
|
callback(displayWidth, displayHeight, trueDpr); |
|
|
DpiWatcher.callback(lastDpi, currentDpi); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
Johan Polson
2 years ago
GitHub