{"version":3,"file":"DOMPipe.mjs","sources":["../../src/dom/DOMPipe.ts"],"sourcesContent":["/* eslint-disable no-restricted-globals */\nimport { ExtensionType } from '../extensions/Extensions';\nimport { CanvasObserver } from './CanvasObserver';\nimport { type DOMContainer } from './DOMContainer';\n\nimport type { InstructionSet } from '../rendering/renderers/shared/instructions/InstructionSet';\nimport type { RenderPipe } from '../rendering/renderers/shared/instructions/RenderPipe';\nimport type { Renderer } from '../rendering/renderers/types';\n\n/**\n * The DOMPipe class is responsible for managing and rendering DOM elements within a PixiJS scene.\n * It maps dom elements to the canvas and ensures they are correctly positioned and visible.\n * @internal\n */\nexport class DOMPipe implements RenderPipe<DOMContainer>\n{\n    /**\n     * Static property defining the extension type and name for the DOMPipe.\n     * This is used to register the DOMPipe with different rendering pipelines.\n     */\n    public static extension = {\n        type: [\n            ExtensionType.WebGLPipes,\n            ExtensionType.WebGPUPipes,\n            ExtensionType.CanvasPipes,\n        ],\n        name: 'dom',\n    } as const;\n\n    private _renderer: Renderer;\n\n    /** Array to keep track of attached DOM elements */\n    private readonly _attachedDomElements: DOMContainer[] = [];\n    /** The main DOM element that acts as a container for other DOM elements */\n    private readonly _domElement: HTMLDivElement;\n    /** The CanvasTransformSync instance that keeps the DOM element in sync with the canvas */\n    private _canvasObserver: CanvasObserver;\n\n    /**\n     * Constructor for the DOMPipe class.\n     * @param renderer - The renderer instance that this DOMPipe will be associated with.\n     */\n    constructor(renderer: Renderer)\n    {\n        this._renderer = renderer;\n\n        // Add this DOMPipe to the postrender runner of the renderer\n        // we want to dom elements are calculated after all things have been rendered\n        this._renderer.runners.postrender.add(this);\n\n        // add DOMPipe to init runners\n        this._renderer.runners.init.add(this);\n\n        // Create a main DOM element to contain other DOM elements\n        this._domElement = document.createElement('div');\n        this._domElement.style.position = 'absolute';\n        this._domElement.style.top = '0';\n        this._domElement.style.left = '0';\n        this._domElement.style.pointerEvents = 'none';\n        this._domElement.style.zIndex = '1000';\n    }\n\n    /** Initializes the DOMPipe, setting up the main DOM element and adding it to the document body. */\n    public init(): void\n    {\n        // Initialize the CanvasTransformSync to keep the DOM element in sync with the canvas\n        this._canvasObserver = new CanvasObserver({\n            domElement: this._domElement,\n            renderer: this._renderer,\n        });\n    }\n\n    /**\n     * Adds a renderable DOM container to the list of attached elements.\n     * @param domContainer - The DOM container to be added.\n     * @param _instructionSet - The instruction set (unused).\n     */\n    public addRenderable(domContainer: DOMContainer, _instructionSet: InstructionSet): void\n    {\n        if (!this._attachedDomElements.includes(domContainer))\n        {\n            this._attachedDomElements.push(domContainer);\n        }\n    }\n\n    /**\n     * Updates a renderable DOM container.\n     * @param _domContainer - The DOM container to be updated (unused).\n     */\n    public updateRenderable(_domContainer: DOMContainer): void\n    {\n        // Updates happen in postrender\n    }\n\n    /**\n     * Validates a renderable DOM container.\n     * @param _domContainer - The DOM container to be validated (unused).\n     * @returns Always returns true as validation is not required.\n     */\n    public validateRenderable(_domContainer: DOMContainer): boolean\n    {\n        return true;\n    }\n\n    /** Handles the post-rendering process, ensuring DOM elements are correctly positioned and visible. */\n    public postrender(): void\n    {\n        const attachedDomElements = this._attachedDomElements;\n\n        if (attachedDomElements.length === 0)\n        {\n            this._domElement.remove();\n\n            return;\n        }\n\n        // Ensure the main DOM element is attached to the same parent as the canvas\n        this._canvasObserver.ensureAttached();\n\n        for (let i = 0; i < attachedDomElements.length; i++)\n        {\n            const domContainer = attachedDomElements[i];\n            const element = domContainer.element;\n\n            if (!domContainer.parent || domContainer.globalDisplayStatus < 0b111)\n            {\n                element?.remove();\n                attachedDomElements.splice(i, 1);\n                i--;\n            }\n            else\n            {\n                if (!this._domElement.contains(element))\n                {\n                    element.style.position = 'absolute';\n                    element.style.pointerEvents = 'auto';\n                    this._domElement.appendChild(element);\n                }\n\n                const wt = domContainer.worldTransform;\n                const anchor = domContainer._anchor;\n                const ax = domContainer.width * anchor.x;\n                const ay = domContainer.height * anchor.y;\n\n                element.style.transformOrigin = `${ax}px ${ay}px`;\n                element.style.transform = `matrix(${wt.a}, ${wt.b}, ${wt.c}, ${wt.d}, ${wt.tx - ax}, ${wt.ty - ay})`;\n                element.style.opacity = domContainer.groupAlpha.toString();\n            }\n        }\n    }\n\n    /** Destroys the DOMPipe, removing all attached DOM elements and cleaning up resources. */\n    public destroy(): void\n    {\n        this._renderer.runners.postrender.remove(this);\n\n        for (let i = 0; i < this._attachedDomElements.length; i++)\n        {\n            const domContainer = this._attachedDomElements[i];\n\n            domContainer.element?.remove();\n        }\n\n        this._attachedDomElements.length = 0;\n        this._domElement.remove();\n        this._canvasObserver.destroy();\n        this._renderer = null;\n    }\n}\n"],"names":[],"mappings":"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"}