pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 9.66 kB

Source Map (JSON)

View Raw

{"version":3,"file":"DOMPipe.mjs","sources":["../../src/dom/DOMPipe.ts"],"sourcesContent":["import { ExtensionType } from '../extensions/Extensions';\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\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 // 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 /**\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 const canvas = this._renderer.view.canvas as HTMLCanvasElement;\n\n if (this._domElement.parentNode !== canvas.parentNode)\n {\n canvas.parentNode?.appendChild(this._domElement);\n }\n\n const sx = (parseFloat(canvas.style.width) / canvas.width) * this._renderer.resolution;\n const sy = (parseFloat(canvas.style.height) / canvas.height) * this._renderer.resolution;\n // scale according to the canvas scale and translate\n\n this._domElement.style.transform = `translate(${canvas.offsetLeft}px, ${canvas.offsetTop}px) scale(${sx}, ${sy})`;\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._renderer = null;\n }\n}\n"],"names":[],"mappings":"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"}