{"version":3,"file":"DOMContainer.mjs","sources":["../../src/dom/DOMContainer.ts"],"sourcesContent":["import { Point } from '../maths/point/Point';\nimport { ViewContainer, type ViewContainerOptions } from '../scene/view/ViewContainer';\n\nimport type { PointData } from '../maths/point/PointData';\n\n/**\n * Options for configuring a {@link DOMContainer}.\n * Controls how DOM elements are integrated into the PixiJS scene graph.\n * @example\n * ```ts\n * // Create with a custom element\n * const domContainer = new DOMContainer({\n *     element: document.createElement('input'),\n *     anchor: { x: 0.5, y: 0.5 } // or anchor: 0.5 to center both x and y\n * });\n * ```\n * @category scene\n * @standard\n * @noInheritDoc\n */\nexport interface DOMContainerOptions extends ViewContainerOptions\n{\n    /**\n     * The DOM element to use for the container.\n     * Can be any HTML element like div, input, textarea, etc.\n     *\n     * If not provided, creates a new div element.\n     * @default document.createElement('div')\n     */\n    element?: HTMLElement;\n\n    /**\n     * The anchor point of the container.\n     * - Can be a single number to set both x and y\n     * - Can be a point-like object with x,y coordinates\n     * - (0,0) is top-left\n     * - (1,1) is bottom-right\n     * - (0.5,0.5) is center\n     * @default 0\n     */\n    anchor?: PointData | number;\n}\n\n/**\n * The DOMContainer object is used to render DOM elements within the PixiJS scene graph.\n * It allows you to integrate HTML elements into your PixiJS application while maintaining\n * proper transform hierarchy and visibility.\n *\n * DOMContainer is especially useful for rendering standard DOM elements\n * that handle user input, such as `<input>` or `<textarea>`.\n * This is often simpler and more flexible than trying to implement text input\n * directly in PixiJS. For instance, if you need text fields or text areas,\n * you can embed them through this container for native browser text handling.\n *\n * --------- EXPERIMENTAL ---------\n *\n * This is a new API, things may change and it may not work as expected.\n * We want to hear your feedback as we go!\n *\n * --------------------------------\n * @example\n * @example\n * ```ts\n * // Basic text display\n * const textContainer = new DOMContainer();\n * textContainer.element.innerHTML = 'Hello World!';\n * app.stage.addChild(textContainer);\n *\n * // Input field with centered anchor\n * const inputContainer = new DOMContainer({\n *     element: document.createElement('input'),\n *     anchor: 0.5\n * });\n * inputContainer.position.set(400, 300);\n * app.stage.addChild(inputContainer);\n *\n * // Rich text area\n * const textArea = new DOMContainer({\n *     element: document.createElement('textarea'),\n *     anchor: { x: 0, y: 0 }\n * });\n * textArea.scale.set(2);\n * app.stage.addChild(textArea);\n * ```\n * @category scene\n * @standard\n */\nexport class DOMContainer extends ViewContainer<never>\n{\n    /** @internal */\n    public override readonly renderPipeId: string = 'dom';\n\n    /** @internal */\n    public batched = false;\n    /**\n     * The anchor point of the container.\n     * @internal\n     */\n    public readonly _anchor: Point;\n\n    /** The DOM element that this container is using. */\n    private _element: HTMLElement;\n\n    /**\n     * @param options - The options for creating the DOM container.\n     */\n    constructor(options: DOMContainerOptions = {})\n    {\n        const { element, anchor, ...rest } = options;\n\n        super({\n            label: 'DOMContainer',\n            ...rest\n        });\n\n        this._anchor = new Point(0, 0);\n\n        if (anchor)\n        {\n            this.anchor = anchor;\n        }\n\n        this.element = options.element || document.createElement('div');\n    }\n\n    /**\n     * The anchor sets the origin point of the container.\n     * Controls the relative positioning of the DOM element.\n     *\n     * The default is `(0,0)`, this means the container's origin is the top left.\n     * Setting the anchor to `(0.5,0.5)` means the container's origin is centered.\n     * Setting the anchor to `(1,1)` would mean the container's origin point will be the bottom right corner.\n     * @example\n     * ```ts\n     * const container = new DOMContainer();\n     *\n     * // Set anchor to center (shorthand)\n     * container.anchor = 0.5;\n     *\n     * // Set anchor to bottom-right\n     * container.anchor = { x: 1, y: 1 };\n     *\n     * // Set anchor to custom position\n     * container.anchor = new Point(0.3, 0.7);\n     * ```\n     */\n    get anchor(): Point\n    {\n        return this._anchor;\n    }\n\n    /**\n     * Sets the anchor point of the container.\n     * @param value - New anchor value:\n     * - number: Sets both x and y to same value\n     * - PointData: Sets x and y separately\n     */\n    set anchor(value: PointData | number)\n    {\n        typeof value === 'number' ? this._anchor.set(value) : this._anchor.copyFrom(value);\n    }\n\n    /**\n     * Sets the DOM element for this container.\n     * This will replace the current element and update the view.\n     * @param value - The new DOM element to use\n     * @example\n     * ```ts\n     * const domContainer = new DOMContainer();\n     * domContainer.element = document.createElement('input');\n     * ```\n     */\n    set element(value: HTMLElement)\n    {\n        if (this._element === value) return;\n\n        this._element = value;\n        this.onViewUpdate();\n    }\n\n    /**\n     * The DOM element associated with this container.\n     * @example\n     * ```ts\n     * const domContainer = new DOMContainer();\n     * domContainer.element.innerHTML = 'Hello World!';\n     * document.body.appendChild(domContainer.element);\n     * ```\n     */\n    get element(): HTMLElement\n    {\n        return this._element;\n    }\n\n    /** @private */\n    protected updateBounds()\n    {\n        const bounds = this._bounds;\n        const element = this._element;\n\n        if (!element)\n        {\n            bounds.minX = 0;\n            bounds.minY = 0;\n            bounds.maxX = 0;\n            bounds.maxY = 0;\n\n            return;\n        }\n\n        const { offsetWidth, offsetHeight } = element;\n\n        bounds.minX = 0;\n        bounds.maxX = offsetWidth;\n        bounds.minY = 0;\n        bounds.maxY = offsetHeight;\n    }\n\n    /**\n     * Destroys this DOM container.\n     * @param options - Options parameter. A boolean will act as if all options\n     *  have been set to that\n     * @example\n     * domContainer.destroy();\n     * domContainer.destroy(true);\n     */\n    public override destroy(options: boolean = false)\n    {\n        super.destroy(options);\n\n        this._element?.parentNode?.removeChild(this._element);\n        this._element = null;\n        (this._anchor as null) = null;\n    }\n}\n"],"names":[],"mappings":"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"}