1 line
8.1 KiB
Plaintext
1 line
8.1 KiB
Plaintext
{"version":3,"file":"textStyleToCSS.mjs","sources":["../../../../src/scene/text-html/utils/textStyleToCSS.ts"],"sourcesContent":["import { Color } from '../../../color/Color';\n\nimport type { ConvertedStrokeStyle } from '../../graphics/shared/FillTypes';\nimport type { TextStyle } from '../../text/TextStyle';\nimport type { HTMLTextStyle, HTMLTextStyleOptions } from '../HtmlTextStyle';\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 */\nexport function textStyleToCSS(style: HTMLTextStyle): string\n{\n const stroke = style._stroke;\n const fill = style._fill;\n\n const cssStyleString = [\n `color: ${Color.shared.setValue(fill.color).toHex()}`,\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-wrap: ${style.breakWords ? 'break-all' : 'break-word'}`,\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 color = Color.shared.setValue(dropShadowStyle.color).setAlpha(dropShadowStyle.alpha).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 return [\n `-webkit-text-stroke-width: ${stroke.width}px`,\n `-webkit-text-stroke-color: ${Color.shared.setValue(stroke.color).toHex()}`,\n `text-stroke-width: ${stroke.width}px`,\n `text-stroke-color: ${Color.shared.setValue(stroke.color).toHex()}`,\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).toHex()}`,\n breakWords: (value: string) => `word-wrap: ${value ? 'break-all' : 'break-word'}`,\n stroke: strokeToCSS,\n dropShadow: dropShadowToCSS\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 // eslint-disable-next-line max-len\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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"} |