gpu-curtains/dist/esm/utils/ResizeManager.mjs

gpu-curtains is a 3D WebGPU rendering engine. It can be used as a standalone 3D engine, but also includes extra classes focused on mapping 3d objects to DOM elements; It allows users to synchronize values such as position, sizing, or scale between them.

class ResizeManager {
  /**
   * ResizeManager constructor
   */
  constructor() {
    this.shouldWatch = true;
    this.entries = [];
    if (typeof window === "object" && "ResizeObserver" in window) {
      this.resizeObserver = new ResizeObserver((observedEntries) => {
        const allEntries = observedEntries.map((observedEntry) => {
          return this.entries.filter((e) => e.element.isSameNode(observedEntry.target));
        }).flat().sort((a, b) => b.priority - a.priority);
        allEntries?.forEach((entry) => {
          if (entry && entry.callback) {
            entry.callback();
          }
        });
      });
    }
  }
  /**
   * Set {@link ResizeManager.shouldWatch | shouldWatch}.
   * @param shouldWatch - whether to watch or not.
   */
  useObserver(shouldWatch = true) {
    this.shouldWatch = shouldWatch;
  }
  /**
   * Track an {@link HTMLElement} size change and execute a callback function when it happens.
   * @param entry - {@link ResizeManagerEntry | entry} to watch.
   */
  observe({ element, priority, callback }) {
    if (!element || !this.shouldWatch) return;
    this.resizeObserver?.observe(element);
    const entry = {
      element,
      priority,
      callback
    };
    this.entries.push(entry);
  }
  /**
   * Unobserve an {@link HTMLElement} and remove it from our {@link entries} array.
   * @param element - {@link HTMLElement} to unobserve.
   */
  unobserve(element) {
    this.resizeObserver?.unobserve(element);
    this.entries = this.entries.filter((e) => !e.element.isSameNode(element));
  }
  /**
   * Destroy our {@link ResizeManager}.
   */
  destroy() {
    this.resizeObserver?.disconnect();
  }
}
const resizeManager = new ResizeManager();

export { ResizeManager, resizeManager };