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 • 3.75 kB
Source Map (JSON)
{"version":3,"file":"measureHtmlText.mjs","sources":["../../../../src/scene/text-html/utils/measureHtmlText.ts"],"sourcesContent":["/* eslint-disable no-restricted-globals */\nimport { HTMLTextRenderData } from '../HTMLTextRenderData';\n\nimport type { Size } from '../../../maths/misc/Size';\nimport type { HTMLTextStyle } from '../HTMLTextStyle';\n\nlet tempHTMLTextRenderData: HTMLTextRenderData;\n\n/**\n * Measures the HTML text without actually generating an image.\n * This is used to calculate the size of the text.\n * @param text - The text to measure\n * @param style - The style to use\n * @param fontStyleCSS - The font css to use\n * @param htmlTextRenderData - The HTMLTextRenderData to write the SVG to\n * @returns - The size of the text\n * @internal\n */\nexport function measureHtmlText(\n text: string,\n style: HTMLTextStyle,\n fontStyleCSS?: string,\n htmlTextRenderData?: HTMLTextRenderData\n): Size\n{\n htmlTextRenderData ||= tempHTMLTextRenderData || (tempHTMLTextRenderData = new HTMLTextRenderData());\n\n const { domElement, styleElement, svgRoot } = htmlTextRenderData;\n\n domElement.innerHTML = `<style>${style.cssStyle};</style><div style='padding:0'>${text}</div>`;\n\n domElement.setAttribute('style', 'transform-origin: top left; display: inline-block');\n\n if (fontStyleCSS)\n {\n styleElement.textContent = fontStyleCSS;\n }\n\n // Measure the contents using the shadow DOM\n document.body.appendChild(svgRoot);\n\n // Use scrollWidth/scrollHeight instead of getBoundingClientRect\n // This captures the full content size including any overflow\n // (e.g., when wordWrap is true but long words can't break)\n let contentWidth = domElement.scrollWidth;\n let contentHeight = domElement.scrollHeight;\n\n svgRoot.remove();\n\n // Account for drop shadow which extends beyond the layout bounds\n // text-shadow is a visual effect not captured by scrollWidth/scrollHeight\n if (style.dropShadow)\n {\n const { distance, angle, blur } = style.dropShadow;\n const shadowOffsetX = Math.abs(Math.round(Math.cos(angle) * distance));\n const shadowOffsetY = Math.abs(Math.round(Math.sin(angle) * distance));\n\n contentWidth += shadowOffsetX + blur;\n contentHeight += shadowOffsetY + blur;\n }\n\n // padding is included in the scroll dimensions, so we need to remove it here\n const doublePadding = style.padding * 2;\n\n return {\n width: contentWidth - doublePadding,\n height: contentHeight - doublePadding,\n };\n}\n"],"names":[],"mappings":";;;AAMA,IAAI,sBAAA;AAYG,SAAS,eAAA,CACZ,IAAA,EACA,KAAA,EACA,YAAA,EACA,kBAAA,EAEJ;AACI,EAAA,kBAAA,KAAA,kBAAA,GAAuB,sBAAA,KAA2B,sBAAA,GAAyB,IAAI,kBAAA,EAAmB,CAAA,CAAA;AAElG,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAc,OAAA,EAAQ,GAAI,kBAAA;AAE9C,EAAA,UAAA,CAAW,SAAA,GAAY,CAAA,OAAA,EAAU,KAAA,CAAM,QAAQ,mCAAmC,IAAI,CAAA,MAAA,CAAA;AAEtF,EAAA,UAAA,CAAW,YAAA,CAAa,SAAS,mDAAmD,CAAA;AAEpF,EAAA,IAAI,YAAA,EACJ;AACI,IAAA,YAAA,CAAa,WAAA,GAAc,YAAA;AAAA,EAC/B;AAGA,EAAA,QAAA,CAAS,IAAA,CAAK,YAAY,OAAO,CAAA;AAKjC,EAAA,IAAI,eAAe,UAAA,CAAW,WAAA;AAC9B,EAAA,IAAI,gBAAgB,UAAA,CAAW,YAAA;AAE/B,EAAA,OAAA,CAAQ,MAAA,EAAO;AAIf,EAAA,IAAI,MAAM,UAAA,EACV;AACI,IAAA,MAAM,EAAE,QAAA,EAAU,KAAA,EAAO,IAAA,KAAS,KAAA,CAAM,UAAA;AACxC,IAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,KAAA,CAAM,KAAK,GAAA,CAAI,KAAK,CAAA,GAAI,QAAQ,CAAC,CAAA;AACrE,IAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,KAAA,CAAM,KAAK,GAAA,CAAI,KAAK,CAAA,GAAI,QAAQ,CAAC,CAAA;AAErE,IAAA,YAAA,IAAgB,aAAA,GAAgB,IAAA;AAChC,IAAA,aAAA,IAAiB,aAAA,GAAgB,IAAA;AAAA,EACrC;AAGA,EAAA,MAAM,aAAA,GAAgB,MAAM,OAAA,GAAU,CAAA;AAEtC,EAAA,OAAO;AAAA,IACH,OAAO,YAAA,GAAe,aAAA;AAAA,IACtB,QAAQ,aAAA,GAAgB;AAAA,GAC5B;AACJ;;;;"}