/**
* Class that represents a PixiJS Theme.
*
* @example
* // Create the theme
* const yellow = new Theme({
* fill: 0xfecd2d,
* fillActive: 0xfe9727,
* strokeActive: 0xfecd2d,
* strokeActiveWidth: 4,
* textStyle: {
* fill: 0x5ec7f8
* },
* textStyleActive: {
* fill: 0x5954d3
* },
* textStyleLarge: {
* fontSize: 36
* }
* })
*
* // Create the app and apply the new theme to it
* const app = new PIXIApp({
* view: canvas,
* width: 450,
* height: 150,
* theme: yellow
* }).setup().run()
*
* @class
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/
export default class Theme {
/**
* Creates an instance of a Theme.
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the theme.
* @param {number} [opts.margin=10] - The outer spacing (distance to other objects) from the border.
* @param {number} [opts.padding=10] - The inner spacing (distance from icon and/or label) to the border.
* @param {number} [opts.radius=4] - The radius used when drawing a rounded rectangle.
* @param {number} [opts.fast=0.25] - The duration of time when it has to be fast.
* @param {number} [opts.normal=0.5] - The duration of time when it has to be normal.
* @param {number} [opts.slow=1] - The duration of time when it has to be slow.
* @param {number} [opts.primaryColor=0x5ec7f8] - The primary color of the theme.
* @param {number} [opts.color1=0x282828] - The first color of the theme. For example used for the background.
* @param {number} [opts.color2=0xf6f6f6] - The second color of the theme. For example used for the border.
* @param {number} [opts.fill=color1] - The color of the background as a hex value.
* @param {number} [opts.fillAlpha=1] - The alpha value of the background.
* @param {number} [opts.fillActive=color1] - The color of the background when activated.
* @param {number} [opts.fillActiveAlpha=1] - The alpha value of the background when activated.
* @param {number} [opts.stroke=color2] - The color of the border as a hex value.
* @param {number} [opts.strokeWidth=0.6] - The width of the border in pixel.
* @param {number} [opts.strokeAlpha=1] - The alpha value of the border.
* @param {number} [opts.strokeActive=color2] - The color of the border when activated.
* @param {number} [opts.strokeActiveWidth=0.6] - The width of the border in pixel when activated.
* @param {number} [opts.strokeActiveAlpha=1] - The alpha value of the border when activated.
* @param {number} [opts.iconColor=color2] - The color of the icon (set by the tint property) as a hex value.
* @param {number} [opts.iconColorActive=colorPrimary] - The color of the icon when activated.
* @param {number} [opts.background=color1] - The color of a background for a component (e.g. at the Modal class).
* @param {object} [opts.textStyle={}] - A textstyle object for the styling of text. See PIXI.TextStyle
* for possible options. Default object:
* @param {string} [opts.textStyle.fontFamily="Avenir Next", "Open Sans", "Segoe UI", ...] - The font family.
* @param {string} [opts.textStyle.fontWeight=400] - The font weight.
* @param {number} [opts.textStyle.fontSize=16] - The font size.
* @param {number} [opts.textStyle.fill=color2] - The fill color.
* @param {number} [opts.textStyle.stroke=color1] - The stroke color.
* @param {number} [opts.textStyle.strokeThickness=0] - The thickness of the stroke.
* @param {number} [opts.textStyle.miterLimit=1] - The meter limit.
* @param {string} [opts.textStyle.lineJoin=round] - The line join.
* @param {object} [opts.textStyleActive=textStyle + {fill: primaryColor}] - A textstyle object which is used
* for actived text.
* @param {object} [opts.textStyleSmall=textStyle + {fontSize: -= 3}] - A textstyle object which is used for
* small text.
* @param {object} [opts.textStyleSmallActive=textStyleSmall + {fill: primaryColor}] - A textstyle object which
* is used for small actived text.
* @param {object} [opts.textStyleLarge=textStyle + {fontSize: += 3}] - A textstyle object which is used for
* large text.
* @param {object} [opts.textStyleLargeActive=textStyleLarge + {fill: primaryColor}] - A textstyle object which
* is used for large actived text.
* @param {number} [opts.textAlpha=Theme.textAlpha] - The alpha value of text.
* @param {number} [opts.textActiveAlpha=Theme.textActiveAlpha] - The alpha value of text when activated.
*/
constructor(opts = {}) {
const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white
this.opts = Object.assign(
{},
{
margin: 12,
padding: 12,
radius: 4,
fast: 0.25,
normal: 0.5,
slow: 1,
primaryColor: colorPrimary,
color1: color1,
color2: color2,
fill: color1,
fillAlpha: 1,
fillActive: color1,
fillActiveAlpha: 1,
stroke: color2,
strokeWidth: 0.6,
strokeAlpha: 1,
strokeActive: color2,
strokeActiveWidth: 0.6,
strokeActiveAlpha: 1,
textAlpha: 1,
textActiveAlpha: 1,
iconColor: color2,
iconColorActive: colorPrimary,
background: color1
},
opts
)
// Set textStyle and variants
this.opts.textStyle = Object.assign(
{},
{
fontFamily:
'"Avenir Next", "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", -apple-system, system-ui, BlinkMacSystemFont, Arial, sans-serif !default',
fontWeight: '500',
fontSize: 18,
fill: color2,
stroke: color1,
strokeThickness: 0,
miterLimit: 1,
lineJoin: 'round'
},
this.opts.textStyle
)
this.opts.textStyleSmall = Object.assign(
{},
this.opts.textStyle,
{ fontSize: this.opts.textStyle.fontSize - 3 },
this.opts.textStyleSmall
)
this.opts.textStyleLarge = Object.assign(
{},
this.opts.textStyle,
{ fontSize: this.opts.textStyle.fontSize + 3 },
this.opts.textStyleLarge
)
this.opts.textStyleActive = Object.assign(
{},
this.opts.textStyle,
{ fill: this.opts.primaryColor },
this.opts.textStyleActive
)
this.opts.textStyleSmallActive = Object.assign(
{},
this.opts.textStyleSmall,
{ fill: this.opts.primaryColor },
this.opts.textStyleSmallActive
)
this.opts.textStyleLargeActive = Object.assign(
{},
this.opts.textStyleLarge,
{ fill: this.opts.primaryColor },
this.opts.textStyleLargeActive
)
Object.assign(this, this.opts)
}
/**
* Factory function
*
* @static
* @param {string} theme=dark - The name of the theme to load.
* @return {Theme} Returns a newly created Theme object.
*/
static fromString(theme) {
if (theme && typeof theme === 'object') {
return theme
}
switch (theme) {
case 'light':
return new ThemeLight()
case 'red':
return new ThemeRed()
default:
return new ThemeDark()
}
}
}
/**
* Class that represents a PixiJS ThemeDark.
*
* @example
* // Create the app with a new dark theme
* const app = new PIXIApp({
* view: canvas,
* width: 450,
* height: 150,
* theme: new ThemeDark()
* }).setup().run()
*
* @class
* @extends Theme
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/
export class ThemeDark extends Theme {}
/**
* Class that represents a PixiJS ThemeLight.
* The color1 is set to 0xf6f6f6, color2 to 0x282828.
*
* @example
* // Create the app with a new light theme
* const app = new PIXIApp({
* view: canvas,
* width: 450,
* height: 150,
* theme: new ThemeLight()
* }).setup().run()
*
* @class
* @extends Theme
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/
export class ThemeLight extends Theme {
/**
* Creates an instance of a ThemeLight.
*
* @constructor
*/
constructor() {
super({ color1: 0xf6f6f6, color2: 0x282828 })
}
}
/**
* Class that represents a PixiJS ThemeRed.
* The primaryColor is set to 0xd92f31.
*
* @example
* // Create the app with a new red theme
* const app = new PIXIApp({
* view: canvas,
* width: 450,
* height: 150,
* theme: new ThemeRed()
* }).setup().run()
*
* @class
* @extends Theme
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/
export class ThemeRed extends Theme {
/**
* Creates an instance of a ThemeRed.
*
* @constructor
*/
constructor() {
super({ primaryColor: 0xd92f31 })
}
}