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 • 9.07 kB
Source Map (JSON)
{"version":3,"file":"textStyleToCSS.mjs","sources":["../../../../src/scene/text-html/utils/textStyleToCSS.ts"],"sourcesContent":["import { Color } from '../../../color/Color';\nimport { type TextDropShadow, TextStyle } from '../../text/TextStyle';\nimport { type HTMLTextStyle, type HTMLTextStyleOptions } from '../HTMLTextStyle';\n\nimport type { ConvertedStrokeStyle } from '../../graphics/shared/FillTypes';\n\n/**\n * Internally converts all of the style properties into CSS equivalents.\n * @param style\n * @returns The CSS style string, for setting `style` property of root HTMLElement.\n * @internal\n */\nexport function textStyleToCSS(style: HTMLTextStyle): string\n{\n const stroke = style._stroke;\n const fill = style._fill;\n\n const color = Color.shared.setValue(fill.color).setAlpha(fill.alpha ?? 1).toHexa();\n const cssStyleString = [\n `color: ${color}`,\n `font-size: ${(style.fontSize as number)}px`,\n `font-family: ${style.fontFamily}`,\n `font-weight: ${style.fontWeight}`,\n `font-style: ${style.fontStyle}`,\n `font-variant: ${style.fontVariant}`,\n `letter-spacing: ${style.letterSpacing}px`,\n `text-align: ${style.align}`,\n `padding: ${style.padding}px`,\n `white-space: ${(style.whiteSpace === 'pre' && style.wordWrap) ? 'pre-wrap' : style.whiteSpace}`,\n ...style.lineHeight ? [`line-height: ${style.lineHeight}px`] : [],\n ...style.wordWrap ? [\n `word-break: ${style.breakWords ? 'break-word' : 'normal'}`,\n `max-width: ${style.wordWrapWidth}px`\n ] : [],\n ...stroke ? [strokeToCSS(stroke)] : [],\n ...style.dropShadow ? [dropShadowToCSS(style.dropShadow)] : [],\n ...style.cssOverrides,\n ].join(';');\n\n const cssStyles = [`div { ${cssStyleString} }`];\n\n tagStyleToCSS(style.tagStyles, cssStyles);\n\n return cssStyles.join(' ');\n}\n\nfunction dropShadowToCSS(dropShadowStyle: TextStyle['dropShadow']): string\n{\n const dropshadowStyle = { ...dropShadowStyle };\n const color = Color.shared.setValue(dropshadowStyle.color).setAlpha(dropshadowStyle.alpha ?? 1).toHexa();\n const x = Math.round(Math.cos(dropshadowStyle.angle) * dropshadowStyle.distance);\n const y = Math.round(Math.sin(dropshadowStyle.angle) * dropshadowStyle.distance);\n\n const position = `${x}px ${y}px`;\n\n if (dropshadowStyle.blur > 0)\n {\n return `text-shadow: ${position} ${dropshadowStyle.blur}px ${color}`;\n }\n\n return `text-shadow: ${position} ${color}`;\n}\n\nfunction strokeToCSS(stroke: ConvertedStrokeStyle): string\n{\n const color = Color.shared.setValue(stroke.color).setAlpha(stroke.alpha ?? 1).toHexa();\n\n return [\n `-webkit-text-stroke-width: ${stroke.width}px`,\n `-webkit-text-stroke-color: ${color}`,\n `text-stroke-width: ${stroke.width}px`,\n `text-stroke-color: ${color}`,\n 'paint-order: stroke',\n ].join(';');\n}\n\n/** Converts the tag styles into CSS. */\nconst templates = {\n fontSize: `font-size: {{VALUE}}px`,\n fontFamily: `font-family: {{VALUE}}`,\n fontWeight: `font-weight: {{VALUE}}`,\n fontStyle: `font-style: {{VALUE}}`,\n fontVariant: `font-variant: {{VALUE}}`,\n letterSpacing: `letter-spacing: {{VALUE}}px`,\n align: `text-align: {{VALUE}}`,\n padding: `padding: {{VALUE}}px`,\n whiteSpace: `white-space: {{VALUE}}`,\n lineHeight: `line-height: {{VALUE}}px`,\n wordWrapWidth: `max-width: {{VALUE}}px`,\n};\n\n/** Converts the tag styles into CSS if modifications are required */\nconst transform = {\n fill: (value: string) => `color: ${Color.shared.setValue(value).toHexa()}`,\n breakWords: (value: string) => `word-break: ${value ? 'break-all' : 'normal'}`,\n stroke: strokeToCSS,\n dropShadow: (value: boolean | Partial<TextDropShadow>) =>\n {\n if (value === true)\n {\n return dropShadowToCSS(TextStyle.defaultDropShadow);\n }\n\n if (value && typeof value === 'object')\n {\n return dropShadowToCSS({ ...TextStyle.defaultDropShadow, ...value });\n }\n\n return '';\n }\n};\n\nfunction tagStyleToCSS(tagStyles: Record<string, HTMLTextStyleOptions>, out: string[])\n{\n for (const i in tagStyles)\n {\n const tagStyle = tagStyles[i];\n const cssTagStyle = [];\n\n for (const j in tagStyle)\n {\n if (transform[j as keyof typeof transform])\n {\n cssTagStyle.push(transform[j as keyof typeof transform](tagStyle[j as keyof HTMLTextStyleOptions] as any));\n }\n else if (templates[j as keyof typeof templates])\n {\n // eslint-disable-next-line max-len\n cssTagStyle.push(templates[j as keyof typeof templates].replace('{{VALUE}}', tagStyle[j as keyof HTMLTextStyleOptions] as any));\n }\n }\n\n out.push(`${i} { ${cssTagStyle.join(';')} }`);\n }\n}\n"],"names":[],"mappings":"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"}