pixi.js/lib/dom/DOMContainer.mjs

<p align="center"> <a href="https://pixijs.com" target="_blank" rel="noopener noreferrer"> <img height="150" src="https://files.pixijs.download/branding/pixijs-logo-transparent-dark.svg?v=1" alt="PixiJS logo"> </a> </p> <br/> <p align="center">

import { Point } from '../maths/point/Point.mjs';
import { ViewContainer } from '../scene/view/ViewContainer.mjs';

"use strict";
class DOMContainer extends ViewContainer {
  /**
   * @param options - The options for creating the DOM container.
   */
  constructor(options = {}) {
    const { element, anchor, ...rest } = options;
    super({
      label: "DOMContainer",
      ...rest
    });
    /** @internal */
    this.renderPipeId = "dom";
    /** @internal */
    this.batched = false;
    this._anchor = new Point(0, 0);
    if (anchor) {
      this.anchor = anchor;
    }
    this.element = options.element || document.createElement("div");
  }
  /**
   * The anchor sets the origin point of the container.
   * Controls the relative positioning of the DOM element.
   *
   * The default is `(0,0)`, this means the container's origin is the top left.
   * Setting the anchor to `(0.5,0.5)` means the container's origin is centered.
   * Setting the anchor to `(1,1)` would mean the container's origin point will be the bottom right corner.
   * @example
   * ```ts
   * const container = new DOMContainer();
   *
   * // Set anchor to center (shorthand)
   * container.anchor = 0.5;
   *
   * // Set anchor to bottom-right
   * container.anchor = { x: 1, y: 1 };
   *
   * // Set anchor to custom position
   * container.anchor = new Point(0.3, 0.7);
   * ```
   */
  get anchor() {
    return this._anchor;
  }
  /**
   * Sets the anchor point of the container.
   * @param value - New anchor value:
   * - number: Sets both x and y to same value
   * - PointData: Sets x and y separately
   */
  set anchor(value) {
    typeof value === "number" ? this._anchor.set(value) : this._anchor.copyFrom(value);
  }
  /**
   * Sets the DOM element for this container.
   * This will replace the current element and update the view.
   * @param value - The new DOM element to use
   * @example
   * ```ts
   * const domContainer = new DOMContainer();
   * domContainer.element = document.createElement('input');
   * ```
   */
  set element(value) {
    if (this._element === value)
      return;
    this._element = value;
    this.onViewUpdate();
  }
  /**
   * The DOM element associated with this container.
   * @example
   * ```ts
   * const domContainer = new DOMContainer();
   * domContainer.element.innerHTML = 'Hello World!';
   * document.body.appendChild(domContainer.element);
   * ```
   */
  get element() {
    return this._element;
  }
  /** @private */
  updateBounds() {
    const bounds = this._bounds;
    const element = this._element;
    if (!element) {
      bounds.minX = 0;
      bounds.minY = 0;
      bounds.maxX = 0;
      bounds.maxY = 0;
      return;
    }
    const { offsetWidth, offsetHeight } = element;
    bounds.minX = 0;
    bounds.maxX = offsetWidth;
    bounds.minY = 0;
    bounds.maxY = offsetHeight;
  }
  /**
   * Destroys this DOM container.
   * @param options - Options parameter. A boolean will act as if all options
   *  have been set to that
   * @example
   * domContainer.destroy();
   * domContainer.destroy(true);
   */
  destroy(options = false) {
    super.destroy(options);
    this._element?.parentNode?.removeChild(this._element);
    this._element = null;
    this._anchor = null;
  }
}

export { DOMContainer };
//# sourceMappingURL=DOMContainer.mjs.map