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">
240 lines (237 loc) • 7.63 kB
JavaScript
import { warn } from '../../utils/logging/warn.mjs';
import { TextStyle } from '../text/TextStyle.mjs';
import { textStyleToCSS } from './utils/textStyleToCSS.mjs';
"use strict";
class HTMLTextStyle extends TextStyle {
constructor(options = {}) {
super(options);
this._cssOverrides = [];
this.cssOverrides = options.cssOverrides ?? [];
this.tagStyles = options.tagStyles ?? {};
}
/**
* List of CSS style overrides to apply to the HTML text.
* These styles are added after the built-in styles and can override any default styling.
* @advanced
*/
set cssOverrides(value) {
this._cssOverrides = value instanceof Array ? value : [value];
this.update();
}
/** @advanced */
get cssOverrides() {
return this._cssOverrides;
}
/**
* Updates the text style and triggers a refresh of the CSS style cache.
* This method is called automatically when style properties are changed.
* @example
* ```ts
* // Update after multiple changes
* const text = new HTMLText({
* text: 'Hello World',
* style
* });
*
* style.fontSize = 32;
* style.fill = '#00ff00';
* style.fontFamily = 'Arial';
* style.update(); // Apply all changes at once
* ```
* @advanced
* @see {@link HTMLTextStyle#cssStyle} For accessing the generated CSS
* @see {@link HTMLTextStyle#cssOverrides} For managing CSS overrides
*/
update() {
this._cssStyle = null;
super.update();
}
/**
* Creates a new HTMLTextStyle object with the same values as this one.
* This creates a deep copy of all style properties, including dropShadow and tag styles.
* @example
* ```ts
* // Create original style
* const originalStyle = new HTMLTextStyle({
* fontSize: 24,
* fill: '#ff0000',
* tagStyles: {
* header: { fontSize: 32, fill: '#00ff00' }
* }
* });
*
* // Clone the style
* const clonedStyle = originalStyle.clone();
*
* // Modify cloned style independently
* clonedStyle.fontSize = 36;
* clonedStyle.fill = '#0000ff';
*
* // Original style remains unchanged
* console.log(originalStyle.fontSize); // Still 24
* console.log(originalStyle.fill); // Still '#ff0000'
* ```
*
* Properties that are cloned:
* - Basic text properties (fontSize, fontFamily, etc.)
* - Fill and stroke styles
* - Drop shadow configuration
* - CSS overrides
* - Tag styles (deep copied)
* - Word wrap settings
* - Alignment and spacing
* @returns {HTMLTextStyle} A new HTMLTextStyle instance with the same properties
* @see {@link HTMLTextStyle} For available style properties
* @see {@link HTMLTextStyle#cssOverrides} For CSS override handling
* @see {@link HTMLTextStyle#tagStyles} For tag style configuration
* @standard
*/
clone() {
return new HTMLTextStyle({
align: this.align,
breakWords: this.breakWords,
dropShadow: this.dropShadow ? { ...this.dropShadow } : null,
fill: this._fill,
fontFamily: this.fontFamily,
fontSize: this.fontSize,
fontStyle: this.fontStyle,
fontVariant: this.fontVariant,
fontWeight: this.fontWeight,
letterSpacing: this.letterSpacing,
lineHeight: this.lineHeight,
padding: this.padding,
stroke: this._stroke,
whiteSpace: this.whiteSpace,
wordWrap: this.wordWrap,
wordWrapWidth: this.wordWrapWidth,
cssOverrides: this.cssOverrides,
tagStyles: { ...this.tagStyles }
});
}
/**
* The CSS style string that will be applied to the HTML text.
* @advanced
*/
get cssStyle() {
if (!this._cssStyle) {
this._cssStyle = textStyleToCSS(this);
}
return this._cssStyle;
}
/**
* Add a style override, this can be any CSS property
* it will override any built-in style. This is the
* property and the value as a string (e.g., `color: red`).
* This will override any other internal style.
* @param {string} value - CSS style(s) to add.
* @example
* style.addOverride('background-color: red');
* @advanced
*/
addOverride(...value) {
const toAdd = value.filter((v) => !this.cssOverrides.includes(v));
if (toAdd.length > 0) {
this.cssOverrides.push(...toAdd);
this.update();
}
}
/**
* Remove any overrides that match the value.
* @param {string} value - CSS style to remove.
* @example
* style.removeOverride('background-color: red');
* @advanced
*/
removeOverride(...value) {
const toRemove = value.filter((v) => this.cssOverrides.includes(v));
if (toRemove.length > 0) {
this.cssOverrides = this.cssOverrides.filter((v) => !toRemove.includes(v));
this.update();
}
}
/**
* Sets the fill style for the text. HTML text only supports color fills (string or number values).
* Texture fills are not supported and will trigger a warning in debug mode.
* @example
* ```ts
* // Using hex colors
* const text = new HTMLText({
* text: 'Colored Text',
* style: {
* fill: 0xff0000 // Red color
* }
* });
*
* // Using CSS color strings
* text.style.fill = '#00ff00'; // Hex string (Green)
* text.style.fill = 'blue'; // Named color
* text.style.fill = 'rgb(255,0,0)' // RGB
* text.style.fill = '#f0f'; // Short hex
*
* // Invalid usage (will trigger warning in debug)
* text.style.fill = {
* type: 'pattern',
* texture: Texture.from('pattern.png')
* }; // Not supported, falls back to default
* ```
* @param value - The fill color to use. Must be a string or number.
* @throws {Warning} In debug mode when attempting to use unsupported fill types
* @see {@link TextStyle#fill} For full fill options in canvas text
* @standard
*/
set fill(value) {
if (typeof value !== "string" && typeof value !== "number") {
warn("[HTMLTextStyle] only color fill is not supported by HTMLText");
}
super.fill = value;
}
/**
* Sets the stroke style for the text. HTML text only supports color strokes (string or number values).
* Texture strokes are not supported and will trigger a warning in debug mode.
* @example
* ```ts
* // Using hex colors
* const text = new HTMLText({
* text: 'Outlined Text',
* style: {
* stroke: 0xff0000 // Red outline
* }
* });
*
* // Using CSS color strings
* text.style.stroke = '#00ff00'; // Hex string (Green)
* text.style.stroke = 'blue'; // Named color
* text.style.stroke = 'rgb(255,0,0)' // RGB
* text.style.stroke = '#f0f'; // Short hex
*
* // Using stroke width
* text.style = {
* stroke: {
* color: '#ff0000',
* width: 2
* }
* };
*
* // Remove stroke
* text.style.stroke = null;
*
* // Invalid usage (will trigger warning in debug)
* text.style.stroke = {
* type: 'pattern',
* texture: Texture.from('pattern.png')
* }; // Not supported, falls back to default
* ```
* @param value - The stroke style to use. Must be a string, number, or stroke configuration object
* @throws {Warning} In debug mode when attempting to use unsupported stroke types
* @see {@link TextStyle#stroke} For full stroke options in canvas text
* @standard
*/
set stroke(value) {
if (value && typeof value !== "string" && typeof value !== "number") {
warn("[HTMLTextStyle] only color stroke is not supported by HTMLText");
}
super.stroke = value;
}
}
export { HTMLTextStyle };
//# sourceMappingURL=HTMLTextStyle.mjs.map