pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 9.07 kB

Source Map (JSON)

View Raw

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