component.ts 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
  1. /**
  2. * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
  3. *
  4. * @author David Sehnal <david.sehnal@gmail.com>
  5. */
  6. import { VisualQualityOptions } from '../../../mol-geo/geometry/base';
  7. import { InteractionsProvider } from '../../../mol-model-props/computed/interactions';
  8. import { Structure, StructureElement, StructureSelection } from '../../../mol-model/structure';
  9. import { structureAreEqual, structureAreIntersecting, structureIntersect, structureSubtract, structureUnion } from '../../../mol-model/structure/query/utils/structure-set';
  10. import { setSubtreeVisibility } from '../../../mol-plugin/behavior/static/state';
  11. import { PluginContext } from '../../../mol-plugin/context';
  12. import { StateBuilder, StateObjectRef, StateTransformer } from '../../../mol-state';
  13. import { Task } from '../../../mol-task';
  14. import { ColorTheme } from '../../../mol-theme/color';
  15. import { SizeTheme } from '../../../mol-theme/size';
  16. import { UUID } from '../../../mol-util';
  17. import { ColorNames } from '../../../mol-util/color/names';
  18. import { objectForEach } from '../../../mol-util/object';
  19. import { ParamDefinition as PD } from '../../../mol-util/param-definition';
  20. import { StructureRepresentationPresetProvider } from '../../builder/structure/representation-preset';
  21. import { StatefulPluginComponent } from '../../component';
  22. import { StructureComponentParams } from '../../helpers/structure-component';
  23. import { setStructureOverpaint } from '../../helpers/structure-overpaint';
  24. import { createStructureColorThemeParams, createStructureSizeThemeParams } from '../../helpers/structure-representation-params';
  25. import { StructureSelectionQueries, StructureSelectionQuery } from '../../helpers/structure-selection-query';
  26. import { StructureRepresentation3D } from '../../transforms/representation';
  27. import { StructureHierarchyRef, StructureComponentRef, StructureRef, StructureRepresentationRef } from './hierarchy-state';
  28. import { Clipping } from '../../../mol-theme/clipping';
  29. import { setStructureClipping } from '../../helpers/structure-clipping';
  30. import { setStructureTransparency } from '../../helpers/structure-transparency';
  31. import { StructureFocusRepresentation } from '../../../mol-plugin/behavior/dynamic/selection/structure-focus-representation';
  32. import { setStructureSubstance } from '../../helpers/structure-substance';
  33. import { Material } from '../../../mol-util/material';
  34. export { StructureComponentManager };
  35. interface StructureComponentManagerState {
  36. options: StructureComponentManager.Options
  37. }
  38. class StructureComponentManager extends StatefulPluginComponent<StructureComponentManagerState> {
  39. readonly events = {
  40. optionsUpdated: this.ev<undefined>()
  41. }
  42. get currentStructures() {
  43. return this.plugin.managers.structure.hierarchy.selection.structures;
  44. }
  45. get pivotStructure(): StructureRef | undefined {
  46. return this.currentStructures[0];
  47. }
  48. async setOptions(options: StructureComponentManager.Options) {
  49. const interactionChanged = options.interactions !== this.state.options.interactions;
  50. this.updateState({ options });
  51. this.events.optionsUpdated.next(void 0);
  52. const update = this.dataState.build();
  53. for (const s of this.currentStructures) {
  54. for (const c of s.components) {
  55. this.updateReprParams(update, c);
  56. }
  57. }
  58. return this.plugin.dataTransaction(async () => {
  59. await update.commit();
  60. await this.plugin.state.updateBehavior(StructureFocusRepresentation, p => {
  61. p.ignoreHydrogens = !options.showHydrogens;
  62. p.material = options.materialStyle;
  63. });
  64. if (interactionChanged) await this.updateInterationProps();
  65. });
  66. }
  67. private updateReprParams(update: StateBuilder.Root, component: StructureComponentRef) {
  68. const { showHydrogens, visualQuality: quality, materialStyle: material } = this.state.options;
  69. const ignoreHydrogens = !showHydrogens;
  70. for (const r of component.representations) {
  71. if (r.cell.transform.transformer !== StructureRepresentation3D) continue;
  72. const params = r.cell.transform.params as StateTransformer.Params<StructureRepresentation3D>;
  73. if (!!params.type.params.ignoreHydrogens !== ignoreHydrogens || params.type.params.quality !== quality || params.type.params.material !== material) {
  74. update.to(r.cell).update(old => {
  75. old.type.params.ignoreHydrogens = ignoreHydrogens;
  76. old.type.params.quality = quality;
  77. old.type.params.material = material;
  78. });
  79. }
  80. }
  81. }
  82. private async updateInterationProps() {
  83. for (const s of this.currentStructures) {
  84. const interactionParams = InteractionsProvider.getParams(s.cell.obj?.data!);
  85. if (s.properties) {
  86. const oldParams = s.properties.cell.transform.params?.properties[InteractionsProvider.descriptor.name];
  87. if (PD.areEqual(interactionParams, oldParams, this.state.options.interactions)) continue;
  88. await this.dataState.build().to(s.properties.cell)
  89. .update(old => {
  90. old.properties[InteractionsProvider.descriptor.name] = this.state.options.interactions;
  91. })
  92. .commit();
  93. } else {
  94. const pd = this.plugin.customStructureProperties.getParams(s.cell.obj?.data);
  95. const params = PD.getDefaultValues(pd);
  96. if (PD.areEqual(interactionParams, params.properties[InteractionsProvider.descriptor.name], this.state.options.interactions)) continue;
  97. params.properties[InteractionsProvider.descriptor.name] = this.state.options.interactions;
  98. await this.plugin.builders.structure.insertStructureProperties(s.cell, params);
  99. }
  100. }
  101. }
  102. applyPreset<P extends StructureRepresentationPresetProvider>(structures: ReadonlyArray<StructureRef>, provider: P, params?: StructureRepresentationPresetProvider.Params<P>): Promise<any> {
  103. return this.plugin.dataTransaction(async () => {
  104. for (const s of structures) {
  105. const preset = await this.plugin.builders.structure.representation.applyPreset(s.cell, provider, params);
  106. await this.syncPreset(s, preset);
  107. }
  108. }, { canUndo: 'Preset' });
  109. }
  110. private syncPreset(root: StructureRef, preset?: StructureRepresentationPresetProvider.Result) {
  111. if (!preset || !preset.components) return this.clearComponents([root]);
  112. const keptRefs = new Set<string>();
  113. objectForEach(preset.components, c => {
  114. if (c) keptRefs.add(c.ref);
  115. });
  116. if (preset.representations) {
  117. objectForEach(preset.representations, r => {
  118. if (r) keptRefs.add(r.ref);
  119. });
  120. }
  121. if (keptRefs.size === 0) return this.clearComponents([root]);
  122. let changed = false;
  123. const update = this.dataState.build();
  124. const sync = (r: StructureHierarchyRef) => {
  125. if (!keptRefs.has(r.cell.transform.ref)) {
  126. changed = true;
  127. update.delete(r.cell);
  128. }
  129. };
  130. for (const c of root.components) {
  131. sync(c);
  132. for (const r of c.representations) sync(r);
  133. if (c.genericRepresentations) {
  134. for (const r of c.genericRepresentations) sync(r);
  135. }
  136. }
  137. if (root.genericRepresentations) {
  138. for (const r of root.genericRepresentations) {
  139. sync(r);
  140. }
  141. }
  142. if (changed) return update.commit();
  143. }
  144. clear(structures: ReadonlyArray<StructureRef>) {
  145. return this.clearComponents(structures);
  146. }
  147. selectThis(components: ReadonlyArray<StructureComponentRef>) {
  148. const mng = this.plugin.managers.structure.selection;
  149. mng.clear();
  150. for (const c of components) {
  151. const loci = Structure.toSubStructureElementLoci(c.structure.cell.obj!.data, c.cell.obj?.data!);
  152. mng.fromLoci('set', loci);
  153. }
  154. }
  155. canBeModified(ref: StructureHierarchyRef) {
  156. return this.plugin.builders.structure.isComponentTransform(ref.cell);
  157. }
  158. modifyByCurrentSelection(components: ReadonlyArray<StructureComponentRef>, action: StructureComponentManager.ModifyAction) {
  159. return this.plugin.runTask(Task.create('Modify Component', async taskCtx => {
  160. const b = this.dataState.build();
  161. for (const c of components) {
  162. if (!this.canBeModified(c)) continue;
  163. const selection = this.plugin.managers.structure.selection.getStructure(c.structure.cell.obj!.data);
  164. if (!selection || selection.elementCount === 0) continue;
  165. this.modifyComponent(b, c, selection, action);
  166. }
  167. await this.dataState.updateTree(b, { canUndo: 'Modify Selection' }).runInContext(taskCtx);
  168. }));
  169. }
  170. toggleVisibility(components: ReadonlyArray<StructureComponentRef>, reprPivot?: StructureRepresentationRef) {
  171. if (components.length === 0) return;
  172. if (!reprPivot) {
  173. const isHidden = !components[0].cell.state.isHidden;
  174. for (const c of components) {
  175. setSubtreeVisibility(this.dataState, c.cell.transform.ref, isHidden);
  176. }
  177. } else {
  178. const index = components[0].representations.indexOf(reprPivot);
  179. const isHidden = !reprPivot.cell.state.isHidden;
  180. for (const c of components) {
  181. // TODO: is it ok to use just the index here? Could possible lead to ugly edge cases, but perhaps not worth the trouble to "fix".
  182. const repr = c.representations[index];
  183. if (!repr) continue;
  184. setSubtreeVisibility(this.dataState, repr.cell.transform.ref, isHidden);
  185. }
  186. }
  187. }
  188. removeRepresentations(components: ReadonlyArray<StructureComponentRef>, pivot?: StructureRepresentationRef) {
  189. if (components.length === 0) return;
  190. const toRemove: StructureHierarchyRef[] = [];
  191. if (pivot) {
  192. const index = components[0].representations.indexOf(pivot);
  193. if (index < 0) return;
  194. for (const c of components) {
  195. if (c.representations[index]) toRemove.push(c.representations[index]);
  196. }
  197. } else {
  198. for (const c of components) {
  199. for (const r of c.representations) {
  200. toRemove.push(r);
  201. }
  202. }
  203. }
  204. return this.plugin.managers.structure.hierarchy.remove(toRemove, true);
  205. }
  206. updateRepresentations(components: ReadonlyArray<StructureComponentRef>, pivot: StructureRepresentationRef, params: StateTransformer.Params<StructureRepresentation3D>) {
  207. if (components.length === 0) return Promise.resolve();
  208. const index = components[0].representations.indexOf(pivot);
  209. if (index < 0) return Promise.resolve();
  210. const update = this.dataState.build();
  211. for (const c of components) {
  212. // TODO: is it ok to use just the index here? Could possible lead to ugly edge cases, but perhaps not worth the trouble to "fix".
  213. const repr = c.representations[index];
  214. if (!repr) continue;
  215. if (repr.cell.transform.transformer !== pivot.cell.transform.transformer) continue;
  216. update.to(repr.cell).update(params);
  217. }
  218. return update.commit({ canUndo: 'Update Representation' });
  219. }
  220. /**
  221. * To update theme for all selected structures, use
  222. * plugin.dataTransaction(async () => {
  223. * for (const s of structure.hierarchy.selection.structures) await updateRepresentationsTheme(s.componets, ...);
  224. * }, { canUndo: 'Update Theme' });
  225. */
  226. updateRepresentationsTheme<C extends ColorTheme.BuiltIn, S extends SizeTheme.BuiltIn>(components: ReadonlyArray<StructureComponentRef>, params: StructureComponentManager.UpdateThemeParams<C, S>): Promise<any> | undefined
  227. updateRepresentationsTheme<C extends ColorTheme.BuiltIn, S extends SizeTheme.BuiltIn>(components: ReadonlyArray<StructureComponentRef>, params: (c: StructureComponentRef, r: StructureRepresentationRef) => StructureComponentManager.UpdateThemeParams<C, S>): Promise<any> | undefined
  228. updateRepresentationsTheme(components: ReadonlyArray<StructureComponentRef>, paramsOrProvider: StructureComponentManager.UpdateThemeParams<any, any> | ((c: StructureComponentRef, r: StructureRepresentationRef) => StructureComponentManager.UpdateThemeParams<any, any>)) {
  229. if (components.length === 0) return;
  230. const update = this.dataState.build();
  231. for (const c of components) {
  232. for (const repr of c.representations) {
  233. const old = repr.cell.transform.params;
  234. const params: StructureComponentManager.UpdateThemeParams<any, any> = typeof paramsOrProvider === 'function' ? paramsOrProvider(c, repr) : paramsOrProvider;
  235. const colorTheme = params.color === 'default'
  236. ? createStructureColorThemeParams(this.plugin, c.structure.cell.obj?.data, old?.type.name)
  237. : params.color
  238. ? createStructureColorThemeParams(this.plugin, c.structure.cell.obj?.data, old?.type.name, params.color, params.colorParams)
  239. : void 0;
  240. const sizeTheme = params.size === 'default'
  241. ? createStructureSizeThemeParams(this.plugin, c.structure.cell.obj?.data, old?.type.name)
  242. : params.color
  243. ? createStructureSizeThemeParams(this.plugin, c.structure.cell.obj?.data, old?.type.name, params.size, params.sizeParams)
  244. : void 0;
  245. if (colorTheme || sizeTheme) {
  246. update.to(repr.cell).update(prev => {
  247. if (colorTheme) prev.colorTheme = colorTheme;
  248. if (sizeTheme) prev.sizeTheme = sizeTheme;
  249. });
  250. }
  251. }
  252. }
  253. return update.commit({ canUndo: 'Update Theme' });
  254. }
  255. addRepresentation(components: ReadonlyArray<StructureComponentRef>, type: string) {
  256. if (components.length === 0) return;
  257. const { showHydrogens, visualQuality: quality, materialStyle: material } = this.state.options;
  258. const ignoreHydrogens = !showHydrogens;
  259. const typeParams = { ignoreHydrogens, quality, material };
  260. return this.plugin.dataTransaction(async () => {
  261. for (const component of components) {
  262. await this.plugin.builders.structure.representation.addRepresentation(component.cell, {
  263. type: this.plugin.representation.structure.registry.get(type),
  264. typeParams
  265. });
  266. }
  267. }, { canUndo: 'Add Representation' });
  268. }
  269. private tryFindComponent(structure: StructureRef, selection: StructureSelectionQuery) {
  270. if (structure.components.length === 0) return;
  271. return this.plugin.runTask(Task.create('Find Component', async taskCtx => {
  272. const data = structure.cell.obj?.data;
  273. if (!data) return;
  274. const sel = StructureSelection.unionStructure(await selection.getSelection(this.plugin, taskCtx, data));
  275. for (const c of structure.components) {
  276. const comp = c.cell.obj?.data;
  277. if (!comp || !c.cell.parent) continue;
  278. if (structureAreEqual(sel, comp)) return c.cell;
  279. }
  280. }));
  281. }
  282. async add(params: StructureComponentManager.AddParams, structures?: ReadonlyArray<StructureRef>) {
  283. return this.plugin.dataTransaction(async () => {
  284. const xs = structures || this.currentStructures;
  285. if (xs.length === 0) return;
  286. const { showHydrogens, visualQuality: quality, materialStyle: material } = this.state.options;
  287. const ignoreHydrogens = !showHydrogens;
  288. const typeParams = { ignoreHydrogens, quality, material };
  289. const componentKey = UUID.create22();
  290. for (const s of xs) {
  291. let component: StateObjectRef | undefined = void 0;
  292. if (params.options.checkExisting) {
  293. component = await this.tryFindComponent(s, params.selection);
  294. }
  295. if (!component) {
  296. component = await this.plugin.builders.structure.tryCreateComponentFromSelection(s.cell, params.selection, componentKey, {
  297. label: params.options.label || (params.selection === StructureSelectionQueries.current ? 'Custom Selection' : ''),
  298. });
  299. }
  300. if (params.representation === 'none' || !component) continue;
  301. await this.plugin.builders.structure.representation.addRepresentation(component, {
  302. type: this.plugin.representation.structure.registry.get(params.representation),
  303. typeParams
  304. });
  305. }
  306. }, { canUndo: 'Add Selection' });
  307. }
  308. async applyTheme(params: StructureComponentManager.ThemeParams, structures?: ReadonlyArray<StructureRef>) {
  309. return this.plugin.dataTransaction(async ctx => {
  310. const xs = structures || this.currentStructures;
  311. if (xs.length === 0) return;
  312. const getLoci = async (s: Structure) => StructureSelection.toLociWithSourceUnits(await params.selection.getSelection(this.plugin, ctx, s));
  313. for (const s of xs) {
  314. if (params.action.name === 'color') {
  315. const p = params.action.params;
  316. await setStructureOverpaint(this.plugin, s.components, p.color, getLoci, params.representations);
  317. } else if (params.action.name === 'resetColor') {
  318. await setStructureOverpaint(this.plugin, s.components, -1, getLoci, params.representations);
  319. } else if (params.action.name === 'transparency') {
  320. const p = params.action.params;
  321. await setStructureTransparency(this.plugin, s.components, p.value, getLoci, params.representations);
  322. } else if (params.action.name === 'material') {
  323. const p = params.action.params;
  324. await setStructureSubstance(this.plugin, s.components, p.material, getLoci, params.representations);
  325. } else if (params.action.name === 'resetMaterial') {
  326. await setStructureSubstance(this.plugin, s.components, void 0, getLoci, params.representations);
  327. } else if (params.action.name === 'clipping') {
  328. const p = params.action.params;
  329. await setStructureClipping(this.plugin, s.components, Clipping.Groups.fromNames(p.excludeGroups), getLoci, params.representations);
  330. }
  331. }
  332. }, { canUndo: 'Apply Theme' });
  333. }
  334. private modifyComponent(builder: StateBuilder.Root, component: StructureComponentRef, by: Structure, action: StructureComponentManager.ModifyAction) {
  335. const structure = component.cell.obj?.data;
  336. if (!structure) return;
  337. if ((action === 'subtract' || action === 'intersect') && !structureAreIntersecting(structure, by)) return;
  338. const parent = component.structure.cell.obj?.data!;
  339. const modified = action === 'union'
  340. ? structureUnion(parent, [structure, by])
  341. : action === 'intersect'
  342. ? structureIntersect(structure, by)
  343. : structureSubtract(structure, by);
  344. if (modified.elementCount === 0) {
  345. builder.delete(component.cell.transform.ref);
  346. } else {
  347. const bundle = StructureElement.Bundle.fromSubStructure(parent, modified);
  348. const params: StructureComponentParams = {
  349. type: { name: 'bundle', params: bundle },
  350. nullIfEmpty: true,
  351. label: component.cell.obj?.label!
  352. };
  353. builder.to(component.cell).update(params);
  354. }
  355. }
  356. updateLabel(component: StructureComponentRef, label: string) {
  357. const params: StructureComponentParams = {
  358. type: component.cell.params?.values.type,
  359. nullIfEmpty: component.cell.params?.values.nullIfEmpty,
  360. label
  361. };
  362. this.dataState.build().to(component.cell).update(params).commit();
  363. }
  364. private get dataState() {
  365. return this.plugin.state.data;
  366. }
  367. private clearComponents(structures: ReadonlyArray<StructureRef>) {
  368. const deletes = this.dataState.build();
  369. for (const s of structures) {
  370. for (const c of s.components) {
  371. deletes.delete(c.cell.transform.ref);
  372. }
  373. }
  374. return deletes.commit({ canUndo: 'Clear Selections' });
  375. }
  376. constructor(public plugin: PluginContext) {
  377. super({ options: PD.getDefaultValues(StructureComponentManager.OptionsParams) });
  378. }
  379. }
  380. namespace StructureComponentManager {
  381. export const OptionsParams = {
  382. showHydrogens: PD.Boolean(true, { description: 'Toggle display of hydrogen atoms in representations' }),
  383. visualQuality: PD.Select('auto', VisualQualityOptions, { description: 'Control the visual/rendering quality of representations' }),
  384. materialStyle: Material.getParam(),
  385. interactions: PD.Group(InteractionsProvider.defaultParams, { label: 'Non-covalent Interactions' }),
  386. };
  387. export type Options = PD.Values<typeof OptionsParams>
  388. export function getAddParams(plugin: PluginContext, params?: { pivot?: StructureRef, allowNone: boolean, hideSelection?: boolean, checkExisting?: boolean }) {
  389. const { options } = plugin.query.structure.registry;
  390. params = {
  391. pivot: plugin.managers.structure.component.pivotStructure,
  392. allowNone: true,
  393. hideSelection: false,
  394. checkExisting: false,
  395. ...params
  396. };
  397. return {
  398. selection: PD.Select(options[1][0], options, { isHidden: params?.hideSelection }),
  399. representation: getRepresentationTypesSelect(plugin, params?.pivot, params?.allowNone ? [['none', '< Create Later >']] : []),
  400. options: PD.Group({
  401. label: PD.Text(''),
  402. checkExisting: PD.Boolean(!!params?.checkExisting, { help: () => ({ description: 'Checks if a selection with the specifield elements already exists to avoid creating duplicate components.' }) }),
  403. })
  404. };
  405. }
  406. export type AddParams = { selection: StructureSelectionQuery, options: { checkExisting: boolean, label: string }, representation: string }
  407. export function getThemeParams(plugin: PluginContext, pivot: StructureRef | StructureComponentRef | undefined) {
  408. const { options } = plugin.query.structure.registry;
  409. return {
  410. selection: PD.Select(options[1][0], options, { isHidden: false }),
  411. action: PD.MappedStatic('color', {
  412. color: PD.Group({
  413. color: PD.Color(ColorNames.blue, { isExpanded: true }),
  414. }, { isFlat: true }),
  415. resetColor: PD.EmptyGroup({ label: 'Reset Color' }),
  416. transparency: PD.Group({
  417. value: PD.Numeric(0.5, { min: 0, max: 1, step: 0.01 }),
  418. }, { isFlat: true }),
  419. material: PD.Group({
  420. material: Material.getParam({ isFlat: true }),
  421. }, { isFlat: true }),
  422. resetMaterial: PD.EmptyGroup({ label: 'Reset Material' }),
  423. clipping: PD.Group({
  424. excludeGroups: PD.MultiSelect([] as Clipping.Groups.Names[], PD.objectToOptions(Clipping.Groups.Names)),
  425. }, { isFlat: true }),
  426. }),
  427. representations: PD.MultiSelect([], getRepresentationTypes(plugin, pivot), { emptyValue: 'All' })
  428. };
  429. }
  430. export type ThemeParams = PD.Values<ReturnType<typeof getThemeParams>>
  431. export function getRepresentationTypes(plugin: PluginContext, pivot: StructureRef | StructureComponentRef | undefined) {
  432. return pivot?.cell.obj?.data
  433. ? plugin.representation.structure.registry.getApplicableTypes(pivot.cell.obj?.data!)
  434. : plugin.representation.structure.registry.types;
  435. }
  436. function getRepresentationTypesSelect(plugin: PluginContext, pivot: StructureRef | undefined, custom: [string, string][], label?: string) {
  437. const types = [
  438. ...custom,
  439. ...getRepresentationTypes(plugin, pivot)
  440. ] as [string, string][];
  441. return PD.Select(types[0][0], types, { label });
  442. }
  443. export type ModifyAction = 'union' | 'subtract' | 'intersect'
  444. export interface UpdateThemeParams<C extends ColorTheme.BuiltIn, S extends SizeTheme.BuiltIn> {
  445. /**
  446. * this works for any theme name (use 'name as any'), but code completion will break
  447. */
  448. color?: C | 'default',
  449. colorParams?: ColorTheme.BuiltInParams<C>,
  450. size?: S | 'default',
  451. sizeParams?: SizeTheme.BuiltInParams<S>
  452. }
  453. }