pixi.js/lib/scene/text-html/HTMLText.mjs.map

<p align="center"> <a href="https://pixijs.com" target="_blank" rel="noopener noreferrer"> <img height="150" src="https://files.pixijs.download/branding/pixijs-logo-transparent-dark.svg?v=1" alt="PixiJS logo"> </a> </p> <br/> <p align="center">

{"version":3,"file":"HTMLText.mjs","sources":["../../../src/scene/text-html/HTMLText.ts"],"sourcesContent":["import { TextureStyle, type TextureStyleOptions } from '../../rendering/renderers/shared/texture/TextureStyle';\nimport { AbstractText, ensureTextOptions } from '../text/AbstractText';\nimport { type BatchableHTMLText } from './BatchableHTMLText';\nimport { HTMLTextStyle } from './HTMLTextStyle';\nimport { measureHtmlText } from './utils/measureHtmlText';\n\nimport type { View } from '../../rendering/renderers/shared/view/View';\nimport type { TextOptions, TextString } from '../text/AbstractText';\nimport type { HTMLTextStyleOptions } from './HTMLTextStyle';\n\n/**\n * Constructor options used for `HTMLText` instances. Extends the base text options\n * with HTML-specific features and texture styling capabilities.\n * @example\n * ```ts\n * // Basic HTML text\n * const basicText = new HTMLText({\n *     text: '<b>Bold</b> and <i>Italic</i> text',\n *     style: {\n *         fontSize: 24,\n *         fill: 0xff1010\n *     }\n * });\n *\n * // Rich HTML text with styling\n * const richText = new HTMLText({\n *     text: '<custom>Custom Tag</custom>',\n *     style: {\n *         fontFamily: 'Arial',\n *         fontSize: 32,\n *         fill: 0x4a4a4a,\n *         align: 'center',\n *         tagStyles: {\n *             custom: {\n *                 fontSize: 32,\n *                 fill: '#00ff00',\n *                 fontStyle: 'italic'\n *             }\n *         }\n *     }\n *     textureStyle: {\n *         scaleMode: 'linear',\n *         resolution: 2\n *     }\n * });\n * ```\n * @category text\n * @standard\n */\nexport interface HTMLTextOptions extends TextOptions<HTMLTextStyle, HTMLTextStyleOptions>, PixiMixins.HTMLTextOptions\n{\n    /**\n     * Optional texture style to use for the text texture. This allows fine control over\n     * how the text is rendered to a texture before being displayed.\n     *\n     * The texture style can affect:\n     * - Scale mode (nearest/linear)\n     * - Resolution\n     * - Format (rgb/rgba)\n     * - Alpha handling\n     * @example\n     * ```ts\n     * const text = new HTMLText({\n     *     text: 'Crisp Text',\n     *     textureStyle: {\n     *         scaleMode: 'nearest', // Pixel-perfect scaling\n     *         format: 'rgba',       // Include alpha channel\n     *         resolution: 2,        // Higher resolution\n     *         premultiplyAlpha: true\n     *     }\n     * });\n     * ```\n     * @advanced\n     */\n    textureStyle?: TextureStyle | TextureStyleOptions;\n}\n\n// eslint-disable-next-line requireExport/require-export-jsdoc, requireMemberAPI/require-member-api-doc\nexport interface HTMLText extends PixiMixins.HTMLText, AbstractText<\n    HTMLTextStyle,\n    HTMLTextStyleOptions,\n    HTMLTextOptions,\n    BatchableHTMLText\n> {}\n\n/**\n * A HTMLText object creates text using HTML/CSS rendering with SVG foreignObject.\n * This allows for rich text formatting using standard HTML tags and CSS styling.\n *\n * Key features:\n * - HTML tag support (<strong>, <em>, etc.)\n * - CSS styling and custom style overrides\n * - Emoji and special character support\n * - Line breaking and word wrapping\n * - SVG-based rendering\n * @example\n * ```ts\n * import { HTMLText } from 'pixi.js';\n *\n * // Basic HTML text with tags\n * const text = new HTMLText({\n *     text: '<h1>Title</h1><p>This is a <strong>bold</strong> and <em>italic</em> text.</p>',\n *     style: {\n *         fontFamily: 'Arial',\n *         fontSize: 24,\n *         fill: 0xff1010,\n *         align: 'center',\n *     }\n * });\n *\n * // Rich HTML text with custom styling\n * const richText = new HTMLText({\n *     text: `\n *         <div class=\"title\">Welcome</div>\n *         <div class=\"content\">\n *             This text supports:\n *             <ul>\n *                 <li>✨ Emojis</li>\n *                 <li>🎨 Custom CSS</li>\n *                 <li>📏 Auto-sizing</li>\n *             </ul>\n *         </div>\n *     `,\n *     style: {\n *         fontSize: 24,\n *         fill: '#334455',\n *         cssOverrides: [\n *             '.title { font-size: 32px; color: red; }',\n *             '.content { line-height: 1.5; }'\n *         ],\n *         wordWrap: true,\n *         wordWrapWidth: 300,\n *     }\n * });\n *\n * // Text with custom texture settings\n * const crispText = new HTMLText({\n *     text: '<div style=\"padding: 10px\">High Quality Text</div>',\n *     style: {\n *         fontSize: 24,\n *         fill: '#4a4a4a',\n *     },\n *     textureStyle: {\n *         scaleMode: 'nearest',\n *         resolution: 2,\n *     }\n * });\n * ```\n *\n * Platform Considerations:\n * - Rendering may vary slightly between browsers\n * - Requires browser support for foreignObject\n * - Performance similar to Canvas text\n * - Memory usage comparable to Canvas text\n * @category text\n * @standard\n * @see {@link HTMLTextStyle} For detailed style options\n * @see {@link Text} For canvas-based text rendering\n * @see {@link BitmapText} For high-performance static text\n */\nexport class HTMLText extends AbstractText<\n    HTMLTextStyle,\n    HTMLTextStyleOptions,\n    HTMLTextOptions,\n    BatchableHTMLText\n> implements View\n{\n    /** @internal */\n    public override readonly renderPipeId: string = 'htmlText';\n\n    /**\n     * Optional texture style to use for the text.\n     * > [!NOTE] HTMLText is not updated when this property is updated,\n     * > you must update the text manually by calling `text.onViewUpdate()`\n     * @advanced\n     */\n    public textureStyle?: TextureStyle;\n\n    /**\n     * @param {HTMLTextOptions} options - The options of the html text.\n     */\n    constructor(options?: HTMLTextOptions);\n    /** @deprecated since 8.0.0 */\n    constructor(text?: TextString, options?: Partial<HTMLTextStyle>);\n    constructor(...args: [HTMLTextOptions?] | [TextString, Partial<HTMLTextStyle>])\n    {\n        const options = ensureTextOptions<HTMLTextOptions>(args, 'HtmlText');\n\n        super(options, HTMLTextStyle);\n\n        if (options.textureStyle)\n        {\n            this.textureStyle = options.textureStyle instanceof TextureStyle\n                ? options.textureStyle\n                : new TextureStyle(options.textureStyle);\n        }\n    }\n\n    /** @private */\n    protected updateBounds()\n    {\n        const bounds = this._bounds;\n        const anchor = this._anchor;\n\n        const htmlMeasurement = measureHtmlText(this.text, this._style as HTMLTextStyle);\n\n        const { width, height } = htmlMeasurement;\n\n        bounds.minX = (-anchor._x * width);\n        bounds.maxX = bounds.minX + width;\n        bounds.minY = (-anchor._y * height);\n        bounds.maxY = bounds.minY + height;\n    }\n}\n"],"names":[],"mappings":";;;;;;AAgKO,MAAM,iBAAiB,YAM9B,CAAA;AAAA,EAkBI,eAAe,IACf,EAAA;AACI,IAAM,MAAA,OAAA,GAAU,iBAAmC,CAAA,IAAA,EAAM,UAAU,CAAA,CAAA;AAEnE,IAAA,KAAA,CAAM,SAAS,aAAa,CAAA,CAAA;AApBhC;AAAA,IAAA,IAAA,CAAyB,YAAuB,GAAA,UAAA,CAAA;AAsB5C,IAAA,IAAI,QAAQ,YACZ,EAAA;AACI,MAAK,IAAA,CAAA,YAAA,GAAe,QAAQ,YAAwB,YAAA,YAAA,GAC9C,QAAQ,YACR,GAAA,IAAI,YAAa,CAAA,OAAA,CAAQ,YAAY,CAAA,CAAA;AAAA,KAC/C;AAAA,GACJ;AAAA;AAAA,EAGU,YACV,GAAA;AACI,IAAA,MAAM,SAAS,IAAK,CAAA,OAAA,CAAA;AACpB,IAAA,MAAM,SAAS,IAAK,CAAA,OAAA,CAAA;AAEpB,IAAA,MAAM,eAAkB,GAAA,eAAA,CAAgB,IAAK,CAAA,IAAA,EAAM,KAAK,MAAuB,CAAA,CAAA;AAE/E,IAAM,MAAA,EAAE,KAAO,EAAA,MAAA,EAAW,GAAA,eAAA,CAAA;AAE1B,IAAO,MAAA,CAAA,IAAA,GAAQ,CAAC,MAAA,CAAO,EAAK,GAAA,KAAA,CAAA;AAC5B,IAAO,MAAA,CAAA,IAAA,GAAO,OAAO,IAAO,GAAA,KAAA,CAAA;AAC5B,IAAO,MAAA,CAAA,IAAA,GAAQ,CAAC,MAAA,CAAO,EAAK,GAAA,MAAA,CAAA;AAC5B,IAAO,MAAA,CAAA,IAAA,GAAO,OAAO,IAAO,GAAA,MAAA,CAAA;AAAA,GAChC;AACJ;;;;"}