theme.ts 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /**
  2. * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
  3. *
  4. * @author Alexander Rose <alexander.rose@weirdbyte.de>
  5. */
  6. import { ColorTheme } from './color';
  7. import { SizeTheme } from './size';
  8. import { Structure } from '../mol-model/structure';
  9. import { VolumeData } from '../mol-model/volume';
  10. import { ParamDefinition as PD } from '../mol-util/param-definition';
  11. import { Shape } from '../mol-model/shape';
  12. export interface ThemeRegistryContext {
  13. colorThemeRegistry: ColorTheme.Registry
  14. sizeThemeRegistry: SizeTheme.Registry
  15. }
  16. export interface ThemeDataContext {
  17. [k: string]: any
  18. structure?: Structure
  19. volume?: VolumeData
  20. shape?: Shape
  21. }
  22. export interface Theme {
  23. color: ColorTheme<any>
  24. size: SizeTheme<any>
  25. // label: LabelTheme // TODO
  26. }
  27. type Props = { [k: string]: any }
  28. export function createTheme(ctx: ThemeRegistryContext, data: ThemeDataContext, props: Props, theme?: Theme) {
  29. theme = theme || createEmptyTheme()
  30. const colorProps = props.colorTheme as PD.NamedParams
  31. const sizeProps = props.sizeTheme as PD.NamedParams
  32. theme.color = ctx.colorThemeRegistry.create(colorProps.name, data, colorProps.params)
  33. theme.size = ctx.sizeThemeRegistry.create(sizeProps.name, data, sizeProps.params)
  34. return theme
  35. }
  36. export function createEmptyTheme(): Theme {
  37. return { color: ColorTheme.Empty, size: SizeTheme.Empty }
  38. }
  39. //
  40. export interface ThemeProvider<T extends ColorTheme<P> | SizeTheme<P>, P extends PD.Params> {
  41. readonly label: string
  42. readonly factory: (ctx: ThemeDataContext, props: PD.Values<P>) => T
  43. readonly getParams: (ctx: ThemeDataContext) => P
  44. readonly defaultValues: PD.Values<P>
  45. readonly isApplicable: (ctx: ThemeDataContext) => boolean
  46. }
  47. function getTypes(list: { name: string, provider: ThemeProvider<any, any> }[]) {
  48. return list.map(e => [e.name, e.provider.label] as [string, string]);
  49. }
  50. export class ThemeRegistry<T extends ColorTheme<any> | SizeTheme<any>> {
  51. private _list: { name: string, provider: ThemeProvider<T, any> }[] = []
  52. private _map = new Map<string, ThemeProvider<T, any>>()
  53. private _name = new Map<ThemeProvider<T, any>, string>()
  54. get default() { return this._list[0]; }
  55. get list() { return this._list }
  56. get types(): [string, string][] { return getTypes(this._list) }
  57. constructor(builtInThemes: { [k: string]: ThemeProvider<T, any> }, private emptyProvider: ThemeProvider<T, any>) {
  58. Object.keys(builtInThemes).forEach(name => this.add(name, builtInThemes[name]))
  59. }
  60. add<P extends PD.Params>(name: string, provider: ThemeProvider<T, P>) {
  61. this._list.push({ name, provider })
  62. this._map.set(name, provider)
  63. this._name.set(provider, name)
  64. }
  65. remove(name: string) {
  66. this._list.splice(this._list.findIndex(e => e.name === name), 1)
  67. const p = this._map.get(name);
  68. if (p) {
  69. this._map.delete(name);
  70. this._name.delete(p);
  71. }
  72. }
  73. get<P extends PD.Params>(name: string): ThemeProvider<T, P> {
  74. return this._map.get(name) || this.emptyProvider
  75. }
  76. getName(provider: ThemeProvider<T, any>): string {
  77. if (!this._name.has(provider)) throw new Error(`'${provider.label}' is not a registered represenatation provider.`);
  78. return this._name.get(provider)!;
  79. }
  80. create(name: string, ctx: ThemeDataContext, props = {}) {
  81. const provider = this.get(name)
  82. return provider.factory(ctx, { ...PD.getDefaultValues(provider.getParams(ctx)), ...props })
  83. }
  84. getApplicableList(ctx: ThemeDataContext) {
  85. return this._list.filter(e => e.provider.isApplicable(ctx));
  86. }
  87. getApplicableTypes(ctx: ThemeDataContext) {
  88. return getTypes(this.getApplicableList(ctx))
  89. }
  90. }