266 lines
9.5 KiB
JavaScript
266 lines
9.5 KiB
JavaScript
/**
|
|
* 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 })
|
|
}
|
|
}
|