pixi.js
Version:
<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">
1 lines • 8.43 kB
Source Map (JSON)
{"version":3,"file":"HTMLTextSystem.mjs","sources":["../../../src/scene/text-html/HTMLTextSystem.ts"],"sourcesContent":["import { ExtensionType } from '../../extensions/Extensions';\nimport { type CanvasAndContext, CanvasPool } from '../../rendering/renderers/shared/texture/CanvasPool';\nimport { TexturePool } from '../../rendering/renderers/shared/texture/TexturePool';\nimport { type TextureStyle } from '../../rendering/renderers/shared/texture/TextureStyle';\nimport { type Renderer, RendererType } from '../../rendering/renderers/types';\nimport { isSafari } from '../../utils/browser/isSafari';\nimport { warn } from '../../utils/logging/warn';\nimport { BigPool } from '../../utils/pool/PoolGroup';\nimport { getPo2TextureFromSource } from '../text/utils/getPo2TextureFromSource';\nimport { HTMLTextRenderData } from './HTMLTextRenderData';\nimport { HTMLTextStyle } from './HTMLTextStyle';\nimport { extractFontFamilies } from './utils/extractFontFamilies';\nimport { getFontCss } from './utils/getFontCss';\nimport { getSVGUrl } from './utils/getSVGUrl';\nimport { getTemporaryCanvasFromImage } from './utils/getTemporaryCanvasFromImage';\nimport { loadSVGImage } from './utils/loadSVGImage';\nimport { measureHtmlText } from './utils/measureHtmlText';\n\nimport type { System } from '../../rendering/renderers/shared/system/System';\nimport type { Texture } from '../../rendering/renderers/shared/texture/Texture';\nimport type { PoolItem } from '../../utils/pool/Pool';\nimport type { HTMLTextOptions } from './HTMLText';\n\n/**\n * System plugin to the renderer to manage HTMLText\n * @category rendering\n * @advanced\n */\nexport class HTMLTextSystem implements System\n{\n /** @ignore */\n public static extension = {\n type: [\n ExtensionType.WebGLSystem,\n ExtensionType.WebGPUSystem,\n ExtensionType.CanvasSystem,\n ],\n name: 'htmlText',\n } as const;\n\n /**\n * WebGPU has a cors issue when uploading an image that is an SVGImage\n * To get around this we need to create a canvas draw the image to it and upload that instead.\n * Bit of a shame.. but no other work around just yet!\n */\n private readonly _createCanvas: boolean;\n private readonly _renderer: Renderer;\n\n constructor(renderer: Renderer)\n {\n this._renderer = renderer;\n this._createCanvas = renderer.type === RendererType.WEBGPU;\n }\n\n /**\n * @param options\n * @deprecated Use getTexturePromise instead\n */\n public getTexture(options: HTMLTextOptions): Promise<Texture>\n {\n return this.getTexturePromise(options);\n }\n\n public getTexturePromise(options: HTMLTextOptions): Promise<Texture>\n {\n return this._buildTexturePromise(options);\n }\n\n private async _buildTexturePromise(options: HTMLTextOptions)\n {\n const { text, style, resolution, textureStyle } = options as {\n text: string,\n style: HTMLTextStyle,\n resolution: number,\n textureStyle?: TextureStyle,\n };\n\n const htmlTextData = BigPool.get(HTMLTextRenderData);\n const fontFamilies = extractFontFamilies(text, style);\n const fontCSS = await getFontCss(\n fontFamilies,\n style,\n HTMLTextStyle.defaultTextStyle as {fontWeight: string, fontStyle: string}\n );\n const measured = measureHtmlText(text, style, fontCSS, htmlTextData);\n\n const width = Math.ceil(Math.ceil((Math.max(1, measured.width) + (style.padding * 2))) * resolution);\n const height = Math.ceil(Math.ceil((Math.max(1, measured.height) + (style.padding * 2))) * resolution);\n\n const image = htmlTextData.image;\n\n // this off set will ensure we don't get any UV bleeding!\n const uvSafeOffset = 2;\n\n image.width = (width | 0) + uvSafeOffset;\n image.height = (height | 0) + uvSafeOffset;\n\n const svgURL = getSVGUrl(text, style, resolution, fontCSS, htmlTextData);\n\n await loadSVGImage(image, svgURL, isSafari() && fontFamilies.length > 0);\n\n const resource: HTMLImageElement | HTMLCanvasElement = image;\n let canvasAndContext: CanvasAndContext;\n\n if (this._createCanvas)\n {\n // silly webGPU workaround..\n canvasAndContext = getTemporaryCanvasFromImage(image, resolution);\n }\n\n const texture = getPo2TextureFromSource(canvasAndContext ? canvasAndContext.canvas : resource,\n image.width - uvSafeOffset,\n image.height - uvSafeOffset,\n resolution\n );\n\n if (textureStyle) texture.source.style = textureStyle;\n\n if (this._createCanvas)\n {\n this._renderer.texture.initSource(texture.source);\n CanvasPool.returnCanvasAndContext(canvasAndContext);\n }\n\n BigPool.return(htmlTextData as PoolItem);\n\n return texture;\n }\n\n public returnTexturePromise(texturePromise: Promise<Texture>)\n {\n texturePromise.then((texture) =>\n {\n this._cleanUp(texture);\n }).catch(() =>\n {\n // #if _DEBUG\n warn('HTMLTextSystem: Failed to clean texture');\n // #endif\n });\n }\n\n private _cleanUp(texture: Texture)\n {\n TexturePool.returnTexture(texture, true);\n texture.source.resource = null;\n texture.source.uploadMethodId = 'unknown';\n }\n\n public destroy()\n {\n // BOOM!\n (this._renderer as null) = null;\n }\n}\n"],"names":[],"mappings":"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"}