108 lines
3.3 KiB
JavaScript
108 lines
3.3 KiB
JavaScript
'use strict';
|
|
|
|
var warn = require('../../utils/logging/warn.js');
|
|
var TextStyle = require('../text/TextStyle.js');
|
|
var generateTextStyleKey = require('../text/utils/generateTextStyleKey.js');
|
|
var textStyleToCSS = require('./utils/textStyleToCSS.js');
|
|
|
|
"use strict";
|
|
class HTMLTextStyle extends TextStyle.TextStyle {
|
|
constructor(options = {}) {
|
|
super(options);
|
|
this._cssOverrides = [];
|
|
this.cssOverrides ?? (this.cssOverrides = options.cssOverrides);
|
|
this.tagStyles = options.tagStyles ?? {};
|
|
}
|
|
/** List of style overrides that will be applied to the HTML text. */
|
|
set cssOverrides(value) {
|
|
this._cssOverrides = value instanceof Array ? value : [value];
|
|
this.update();
|
|
}
|
|
get cssOverrides() {
|
|
return this._cssOverrides;
|
|
}
|
|
_generateKey() {
|
|
this._styleKey = generateTextStyleKey.generateTextStyleKey(this) + this._cssOverrides.join("-");
|
|
return this._styleKey;
|
|
}
|
|
update() {
|
|
this._cssStyle = null;
|
|
super.update();
|
|
}
|
|
/**
|
|
* Creates a new HTMLTextStyle object with the same values as this one.
|
|
* @returns New cloned HTMLTextStyle object
|
|
*/
|
|
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
|
|
});
|
|
}
|
|
get cssStyle() {
|
|
if (!this._cssStyle) {
|
|
this._cssStyle = textStyleToCSS.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');
|
|
*/
|
|
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');
|
|
*/
|
|
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();
|
|
}
|
|
}
|
|
set fill(value) {
|
|
if (typeof value !== "string" && typeof value !== "number") {
|
|
warn.warn("[HTMLTextStyle] only color fill is not supported by HTMLText");
|
|
}
|
|
super.fill = value;
|
|
}
|
|
set stroke(value) {
|
|
if (value && typeof value !== "string" && typeof value !== "number") {
|
|
warn.warn("[HTMLTextStyle] only color stroke is not supported by HTMLText");
|
|
}
|
|
super.stroke = value;
|
|
}
|
|
}
|
|
|
|
exports.HTMLTextStyle = HTMLTextStyle;
|
|
//# sourceMappingURL=HtmlTextStyle.js.map
|