pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 9.45 kB

Source Map (JSON)

View Raw

{"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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"}