move resize observer

This commit is contained in:
“chrisshank” 2024-11-17 14:40:37 -08:00
parent a624db6fe3
commit 61883bc805
3 changed files with 44 additions and 42 deletions

View File

@ -32,6 +32,7 @@
<li><a href="spreadsheet.html">Spreadsheet</a></li>
<li><a href="spreadsheet-graph.html">Spreadsheet Graph</a></li>
<li><a href="spreadsheet-propagator.html">Spreadsheet Propagator</a></li>
<li><a href="wiggly.html">Wiggly</a></li>
<!-- <li><a href="chains-of-thought/index.html">Chains of thought</a></li> -->
</ul>
</body>

View File

@ -1,45 +1,4 @@
export type ResizeObserverEntryCallback = (entry: ResizeObserverEntry) => void;
class ResizeObserverManager {
#elementMap = new WeakMap<Element, Set<ResizeObserverEntryCallback>>();
#elementEntry = new WeakMap<Element, ResizeObserverEntry>();
#vo = new ResizeObserver((entries) => {
for (const entry of entries) {
this.#elementEntry.set(entry.target, entry);
this.#elementMap.get(entry.target)?.forEach((callback) => callback(entry));
}
});
observe(target: Element, callback: ResizeObserverEntryCallback): void {
let callbacks = this.#elementMap.get(target);
if (callbacks === undefined) {
this.#vo.observe(target);
this.#elementMap.set(target, (callbacks = new Set()));
} else {
const entry = this.#elementEntry.get(target);
if (entry) {
callback(entry);
}
}
callbacks.add(callback);
}
unobserve(target: Element, callback: ResizeObserverEntryCallback): void {
const callbacks = this.#elementMap.get(target);
if (callbacks === undefined) return;
callbacks.delete(callback);
if (callbacks.size === 0) {
this.#vo.unobserve(target);
this.#elementMap.delete(target);
}
}
}
import { ResizeObserverManager } from '../resize-observer';
const resizeObserver = new ResizeObserverManager();

42
src/resize-observer.ts Normal file
View File

@ -0,0 +1,42 @@
export type ResizeObserverEntryCallback = (entry: ResizeObserverEntry) => void;
export class ResizeObserverManager {
#elementMap = new WeakMap<Element, Set<ResizeObserverEntryCallback>>();
#elementEntry = new WeakMap<Element, ResizeObserverEntry>();
#vo = new ResizeObserver((entries) => {
for (const entry of entries) {
this.#elementEntry.set(entry.target, entry);
this.#elementMap.get(entry.target)?.forEach((callback) => callback(entry));
}
});
observe(target: Element, callback: ResizeObserverEntryCallback): void {
let callbacks = this.#elementMap.get(target);
if (callbacks === undefined) {
this.#vo.observe(target);
this.#elementMap.set(target, (callbacks = new Set()));
} else {
const entry = this.#elementEntry.get(target);
if (entry) {
callback(entry);
}
}
callbacks.add(callback);
}
unobserve(target: Element, callback: ResizeObserverEntryCallback): void {
const callbacks = this.#elementMap.get(target);
if (callbacks === undefined) return;
callbacks.delete(callback);
if (callbacks.size === 0) {
this.#vo.unobserve(target);
this.#elementMap.delete(target);
}
}
}