src/gui/style.js
import {getShadowColour} from '../utils/colour';
// doc imports
/* eslint-disable no-unused-vars */
import {Scalar2D} from '../math/scalar';
/* eslint-enable no-unused-vars */
/**
* Style class.
*/
export class Style {
/**
* Font size.
*
* @type {number}
*/
#fontSize = 10;
/**
* Font family.
*
* @type {string}
*/
#fontFamily = 'Verdana';
/**
* Text colour.
*
* @type {string}
*/
#textColour = '#fff';
/**
* Line colour.
*
* @type {string}
*/
#lineColour = '#ffff80';
/**
* Base scale.
*
* @type {Scalar2D}
*/
#baseScale = {x: 1, y: 1};
/**
* Zoom scale.
*
* @type {Scalar2D}
*/
#zoomScale = {x: 1, y: 1};
/**
* Stroke width.
*
* @type {number}
*/
#strokeWidth = 2;
/**
* Shadow offset.
*
* @type {Scalar2D}
*/
#shadowOffset = {x: 0.25, y: 0.25};
/**
* Tag opacity.
*
* @type {number}
*/
#tagOpacity = 0.2;
/**
* Text padding.
*
* @type {number}
*/
#textPadding = 3;
/**
* Get the font family.
*
* @returns {string} The font family.
*/
getFontFamily() {
return this.#fontFamily;
}
/**
* Get the font size.
*
* @returns {number} The font size.
*/
getFontSize() {
return this.#fontSize;
}
/**
* Get the stroke width.
*
* @returns {number} The stroke width.
*/
getStrokeWidth() {
return this.#strokeWidth;
}
/**
* Get the text colour.
*
* @returns {string} The text colour.
*/
getTextColour() {
return this.#textColour;
}
/**
* Get the line colour.
*
* @returns {string} The line colour.
*/
getLineColour() {
return this.#lineColour;
}
/**
* Set the line colour.
*
* @param {string} colour The line colour.
*/
setLineColour(colour) {
this.#lineColour = colour;
}
/**
* Set the base scale.
*
* @param {Scalar2D} scale The scale as {x,y}.
*/
setBaseScale(scale) {
this.#baseScale = scale;
}
/**
* Set the zoom scale.
*
* @param {Scalar2D} scale The scale as {x,y}.
*/
setZoomScale(scale) {
this.#zoomScale = scale;
}
/**
* Get the base scale.
*
* @returns {Scalar2D} The scale as {x,y}.
*/
getBaseScale() {
return this.#baseScale;
}
/**
* Get the zoom scale.
*
* @returns {Scalar2D} The scale as {x,y}.
*/
getZoomScale() {
return this.#zoomScale;
}
/**
* Scale an input value using the base scale.
*
* @param {number} value The value to scale.
* @returns {number} The scaled value.
*/
scale(value) {
// TODO: 2D?
return value / this.#baseScale.x;
}
/**
* Apply zoom scale on an input value.
*
* @param {number} value The value to scale.
* @returns {Scalar2D} The scaled value as {x,y}.
*/
applyZoomScale(value) {
return {
x: value / this.#zoomScale.x,
y: value / this.#zoomScale.y
};
}
/**
* Multiply an input value by the zoom ratio (zx/zy).
*
* @param {number} value The value to scale.
* @returns {number} The scaled value.
*/
applyZoomRatio(value) {
return value * this.#zoomScale.x / this.#zoomScale.y;
}
/**
* Get the shadow offset.
*
* @returns {Scalar2D} The offset as {x,y}.
*/
getShadowOffset() {
return this.#shadowOffset;
}
/**
* Get the tag opacity.
*
* @returns {number} The opacity.
*/
getTagOpacity() {
return this.#tagOpacity;
}
/**
* Get the text padding.
*
* @returns {number} The padding.
*/
getTextPadding() {
return this.#textPadding;
}
/**
* Get the font definition string.
*
* @returns {string} The font definition string.
*/
getFontStr() {
return ('normal ' + this.getFontSize() + 'px sans-serif');
}
/**
* Get the line height.
*
* @returns {number} The line height.
*/
getLineHeight() {
return (this.getFontSize() + this.getFontSize() / 5);
}
/**
* Get the font size scaled to the display.
*
* @returns {number} The scaled font size.
*/
getScaledFontSize() {
return this.scale(this.getFontSize());
}
/**
* Get the stroke width scaled to the display.
*
* @returns {number} The scaled stroke width.
*/
getScaledStrokeWidth() {
return this.scale(this.getStrokeWidth());
}
/**
* Get the shadow line colour.
*
* @returns {string} The shadow line colour.
*/
getShadowLineColour() {
return getShadowColour(this.getLineColour());
}
} // class Style