diff --git a/src/apps/canvas/index.ts b/src/apps/canvas/index.ts index dd72f8aaa98406272ed4a2d583781a38dc97743e..16c12a7201d64423e7d4f3040319728c2dc17a96 100644 --- a/src/apps/canvas/index.ts +++ b/src/apps/canvas/index.ts @@ -28,14 +28,14 @@ if (pdbId) app.loadPdbIdOrMmcifUrl(pdbId, { assemblyId }) // app.loadPdbIdOrMmcifUrl('3pqr') // app.loadCcp4Url('http://localhost:8091/ngl/data/3pqr-mode0.ccp4') -// app.loadPdbIdOrMmcifUrl('1lee') -// app.loadCcp4Url('http://localhost:8091/ngl/data/1lee.ccp4') +app.loadPdbIdOrMmcifUrl('1lee') +app.loadCcp4Url('http://localhost:8091/ngl/data/1lee.ccp4') // app.loadPdbIdOrMmcifUrl('6DRV') // app.loadCcp4Url('http://localhost:8091/ngl/data/betaGal.mrc') // app.loadPdbIdOrMmcifUrl('3pqr') -// app.loadVolCifUrl('https://webchem.ncbr.muni.cz/DensityServer/x-ray/3pqr/cell?space=fractional', true) +// app.loadVolcifUrl('https://webchem.ncbr.muni.cz/DensityServer/x-ray/3pqr/cell?space=fractional', true) // app.loadPdbIdOrMmcifUrl('5ire') // app.loadVolcifUrl('https://webchem.ncbr.muni.cz/DensityServer/em/emd-8116/cell?space=cartesian&detail=6', true) diff --git a/src/apps/canvas/structure-view.ts b/src/apps/canvas/structure-view.ts index 95fbda73b318a8cce38131676a1abc244d56ea7f..3d2c20fc46ff4b7106ec7069e48389550b44a002 100644 --- a/src/apps/canvas/structure-view.ts +++ b/src/apps/canvas/structure-view.ts @@ -202,7 +202,7 @@ export async function StructureView(app: App, canvas3d: Canvas3D, models: Readon structureRepresentations[k] = repr canvas3d.add(repr) } - await app.runTask(repr.createOrUpdate(app.reprCtx, {}, {}, structure).run( + await app.runTask(repr.createOrUpdate(app.reprCtx, {}, structure).run( progress => app.log(progress) ), 'Create/update representation') } else { @@ -261,7 +261,7 @@ export async function StructureView(app: App, canvas3d: Canvas3D, models: Readon // colorFunction: colorTheme.color, // colorGranularity: colorTheme.granularity, // }).run() - await symmetryAxes.createOrUpdate(app.reprCtx, {}, {}, axesShape).run() + await symmetryAxes.createOrUpdate(app.reprCtx, {}, axesShape).run() canvas3d.add(symmetryAxes) } else { canvas3d.remove(symmetryAxes) diff --git a/src/apps/canvas/volume-view.ts b/src/apps/canvas/volume-view.ts index 850cba42831ac8cc7bb4a2d55d97a08cc9ae503f..a0f39495f80aef32f9ad84833791aca5d5605344 100644 --- a/src/apps/canvas/volume-view.ts +++ b/src/apps/canvas/volume-view.ts @@ -54,7 +54,7 @@ export async function VolumeView(app: App, viewer: Canvas3D, volume: VolumeData, async function createVolumeRepr() { for (const k in volumeRepresentations) { if (active[k]) { - await app.runTask(volumeRepresentations[k].createOrUpdate(app.reprCtx, {}, {}, volume).run( + await app.runTask(volumeRepresentations[k].createOrUpdate(app.reprCtx, {}, volume).run( progress => app.log(progress) ), 'Create/update representation') viewer.add(volumeRepresentations[k]) diff --git a/src/mol-geo/geometry/geometry.ts b/src/mol-geo/geometry/geometry.ts index 598e509774c197b60fadf00452ca80637014d776..190e21d27a4cf9ebfe361c2d1b280902e26ebef9 100644 --- a/src/mol-geo/geometry/geometry.ts +++ b/src/mol-geo/geometry/geometry.ts @@ -15,8 +15,8 @@ import { SizeType } from './size-data'; import { Lines } from './lines/lines'; import { ParamDefinition as PD } from 'mol-util/param-definition' import { DirectVolume } from './direct-volume/direct-volume'; -import { BuiltInSizeThemeOptions, BuiltInSizeThemeName } from 'mol-theme/size'; -import { BuiltInColorThemeName, BuiltInColorThemeOptions } from 'mol-theme/color'; +import { BuiltInSizeThemeOptions, getBuiltInSizeThemeParams } from 'mol-theme/size'; +import { BuiltInColorThemeOptions, getBuiltInColorThemeParams } from 'mol-theme/color'; import { Color } from 'mol-util/color'; import { Vec3 } from 'mol-math/linear-algebra'; @@ -69,8 +69,8 @@ export namespace Geometry { quality: PD.Select<VisualQuality>('auto', VisualQualityOptions), - colorTheme: PD.Select<BuiltInColorThemeName>('uniform', BuiltInColorThemeOptions), - sizeTheme: PD.Select<BuiltInSizeThemeName>('uniform', BuiltInSizeThemeOptions), + colorTheme: PD.Mapped('uniform', BuiltInColorThemeOptions, getBuiltInColorThemeParams), + sizeTheme: PD.Mapped('uniform', BuiltInSizeThemeOptions, getBuiltInSizeThemeParams), } export type Params = typeof Params diff --git a/src/mol-plugin/state/transforms/visuals.ts b/src/mol-plugin/state/transforms/visuals.ts index 81760fc7e4bf58b3836a28a4aaf0daa1af46d987..7c42b0490bc422b9152a42dd74bb17fdf4cc65eb 100644 --- a/src/mol-plugin/state/transforms/visuals.ts +++ b/src/mol-plugin/state/transforms/visuals.ts @@ -15,9 +15,6 @@ export { CreateStructureRepresentation } namespace CreateStructureRepresentation { export interface Params { type: { name: string, params: any /** todo is there "common type" */ }, - // TODO - // colorTheme: { name: string, params: any /** todo is there "common type" */ } - // sizeTheme: { name: string, params: any /** todo is there "common type" */ } } } const CreateStructureRepresentation = PluginStateTransform.Create<SO.Molecule.Structure, SO.Molecule.Representation3D, CreateStructureRepresentation.Params>({ @@ -47,7 +44,7 @@ const CreateStructureRepresentation = PluginStateTransform.Create<SO.Molecule.St return Task.create('Structure Representation', async ctx => { const provider = plugin.structureReprensentation.registry.get(params.type.name) const repr = provider.factory(provider.getParams) - await repr.createOrUpdate({ webgl: plugin.canvas3d.webgl, ...plugin.structureReprensentation.themeCtx }, params.type.params || {}, {}, a.data).runInContext(ctx); + await repr.createOrUpdate({ webgl: plugin.canvas3d.webgl, ...plugin.structureReprensentation.themeCtx }, params.type.params || {}, a.data).runInContext(ctx); return new SO.Molecule.Representation3D(repr, { label: provider.label }); }); }, @@ -55,7 +52,7 @@ const CreateStructureRepresentation = PluginStateTransform.Create<SO.Molecule.St return Task.create('Structure Representation', async ctx => { if (newParams.type.name !== oldParams.type.name) return Transformer.UpdateResult.Recreate; - await b.data.createOrUpdate({ webgl: plugin.canvas3d.webgl, ...plugin.structureReprensentation.themeCtx }, { ...b.data.props, ...newParams.type.params }, {}, a.data).runInContext(ctx); + await b.data.createOrUpdate({ webgl: plugin.canvas3d.webgl, ...plugin.structureReprensentation.themeCtx }, { ...b.data.props, ...newParams.type.params }, a.data).runInContext(ctx); return Transformer.UpdateResult.Updated; }); } diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx index 9727a91c9e8c87cc5cb19eec7b8fde48ad64ccba..e118025d9d09b3216294fc83f0fb2a484709bec2 100644 --- a/src/mol-plugin/ui/controls/parameters.tsx +++ b/src/mol-plugin/ui/controls/parameters.tsx @@ -187,9 +187,9 @@ export class ConvertedControl extends React.PureComponent<ValueControlProps<PD.C } render() { - const Control: ValueControl = controlFor(this.props.param.param as PD.Any); + const Control: ValueControl = controlFor(this.props.param.convertedControl as PD.Any); - return <Control value={this.props.param.fromValue(this.props.value)} param={this.props.param.param} onChange={this.onChange} onEnter={this.props.onEnter} isEnabled={this.props.isEnabled} /> + return <Control value={this.props.param.fromValue(this.props.value)} param={this.props.param.convertedControl} onChange={this.onChange} onEnter={this.props.onEnter} isEnabled={this.props.isEnabled} /> } } @@ -236,7 +236,7 @@ export class MappedControl extends React.PureComponent<MappedWrapperProps> { return <div> <ParamWrapper control={SelectControl} param={this.props.param.select} isEnabled={this.props.isEnabled} onChange={this.onChangeName} onEnter={this.props.onEnter} - name={'name'} value={value.name} /> + name={getLabel(this.props.name, this.props.param)} value={value.name} /> <div style={{ borderLeft: '5px solid #777', paddingLeft: '5px' }}> {param.type === 'group' ? <GroupControl param={param} value={value} name='param' onChange={this.onChangeParam} onEnter={this.props.onEnter} isEnabled={this.props.isEnabled} /> diff --git a/src/mol-repr/representation.ts b/src/mol-repr/representation.ts index c456ffcfce5fe78108c0d4b1519e563fe27c2f4e..1325c1481edc2963cb4cff2584431022142599da 100644 --- a/src/mol-repr/representation.ts +++ b/src/mol-repr/representation.ts @@ -14,7 +14,7 @@ import { WebGLContext } from 'mol-gl/webgl/context'; import { getQualityProps } from './util'; import { ColorTheme } from 'mol-theme/color'; import { SizeTheme } from 'mol-theme/size'; -import { ThemeProps, Theme, ThemeRegistryContext } from 'mol-theme/theme'; +import { Theme, ThemeRegistryContext } from 'mol-theme/theme'; import { BehaviorSubject } from 'rxjs'; // export interface RepresentationProps { @@ -84,7 +84,7 @@ interface Representation<D, P extends PD.Params = {}> { readonly renderObjects: ReadonlyArray<RenderObject> readonly props: Readonly<PD.Values<P>> readonly params: Readonly<P> - createOrUpdate: (ctx: RepresentationContext, props?: Partial<PD.Values<P>>, themeProps?: ThemeProps, data?: D) => Task<void> + createOrUpdate: (ctx: RepresentationContext, props?: Partial<PD.Values<P>>, data?: D) => Task<void> getLoci: (pickingId: PickingId) => Loci mark: (loci: Loci, action: MarkerAction) => boolean setVisibility: (value: boolean) => void @@ -137,7 +137,7 @@ namespace Representation { return props as P }, get params() { return currentParams }, - createOrUpdate: (ctx: RepresentationContext, props: Partial<P> = {}, themeProps: ThemeProps = {}, data?: D) => { + createOrUpdate: (ctx: RepresentationContext, props: Partial<P> = {}, data?: D) => { if (data && data !== currentData) { currentParams = getParams(ctx, data) currentData = data @@ -150,7 +150,7 @@ namespace Representation { return Task.create(`Creating '${label}' representation`, async runtime => { for (let i = 0, il = reprList.length; i < il; ++i) { if (!visuals || visuals.includes(reprMap[i])) { - await reprList[i].createOrUpdate(ctx, currentProps, themeProps, currentData).runInContext(runtime) + await reprList[i].createOrUpdate(ctx, currentProps, currentData).runInContext(runtime) } } updated.next(updated.getValue() + 1) diff --git a/src/mol-repr/shape/representation.ts b/src/mol-repr/shape/representation.ts index f9588891c092f2857753c552b4d297024feef2de..27c7d9e7339a29438bce609f766c8cc2d8bf3570 100644 --- a/src/mol-repr/shape/representation.ts +++ b/src/mol-repr/shape/representation.ts @@ -18,7 +18,7 @@ import { createRenderableState } from 'mol-geo/geometry/geometry'; import { PickingId } from 'mol-geo/geometry/picking'; import { MarkerAction, applyMarkerAction } from 'mol-geo/geometry/marker-data'; import { LocationIterator } from 'mol-geo/util/location-iterator'; -import { ThemeProps, createTheme } from 'mol-theme/theme'; +import { createTheme } from 'mol-theme/theme'; import { BehaviorSubject } from 'rxjs'; export interface ShapeRepresentation<P extends ShapeParams> extends Representation<Shape, P> { } @@ -38,7 +38,7 @@ export function ShapeRepresentation<P extends ShapeParams>(): ShapeRepresentatio let currentProps: PD.Values<P> = PD.getDefaultValues(ShapeParams) as PD.Values<P> let currentParams: P - function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.Values<P>> = {}, themeProps: ThemeProps = {}, shape?: Shape) { + function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.Values<P>> = {}, shape?: Shape) { currentProps = Object.assign({}, currentProps, props) if (shape) _shape = shape @@ -49,7 +49,7 @@ export function ShapeRepresentation<P extends ShapeParams>(): ShapeRepresentatio const mesh = _shape.mesh const locationIt = ShapeGroupIterator.fromShape(_shape) - const theme = createTheme(ctx, currentProps, themeProps, {}) + const theme = createTheme(ctx, currentProps, {}) const transform = createIdentityTransform() const values = await Mesh.createValues(runtime, mesh, transform, locationIt, theme, currentProps) diff --git a/src/mol-repr/structure/complex-representation.ts b/src/mol-repr/structure/complex-representation.ts index c99f9c32b60a571797f5aa35db14002e0b1492ee..f74d0551005db1201cd232d17b9b23321ade0838 100644 --- a/src/mol-repr/structure/complex-representation.ts +++ b/src/mol-repr/structure/complex-representation.ts @@ -13,7 +13,7 @@ import { ComplexVisual } from './complex-visual'; import { PickingId } from 'mol-geo/geometry/picking'; import { MarkerAction } from 'mol-geo/geometry/marker-data'; import { RepresentationContext, RepresentationParamsGetter } from 'mol-repr/representation'; -import { Theme, ThemeProps, createTheme } from 'mol-theme/theme'; +import { Theme, createTheme } from 'mol-theme/theme'; import { ParamDefinition as PD } from 'mol-util/param-definition'; import { BehaviorSubject } from 'rxjs'; @@ -26,14 +26,14 @@ export function ComplexRepresentation<P extends StructureParams>(label: string, let _props: PD.Values<P> let _theme: Theme - function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.Values<P>> = {}, themeProps: ThemeProps = {}, structure?: Structure) { + function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.Values<P>> = {}, structure?: Structure) { if (structure && structure !== _structure) { _params = getParams(ctx, structure) _structure = structure if (!_props) _props = PD.getDefaultValues(_params) } _props = Object.assign({}, _props, props) - _theme = createTheme(ctx, { structure: _structure }, props, themeProps, _theme) + _theme = createTheme(ctx, { structure: _structure }, props, _theme) return Task.create('Creating or updating ComplexRepresentation', async runtime => { if (!visual) visual = visualCtor() diff --git a/src/mol-repr/structure/representation/ball-and-stick.ts b/src/mol-repr/structure/representation/ball-and-stick.ts index a5fe7d277859fbc5aff128217e3f32c645a6db5f..d28d478975ce8b18f360dfbbf783ce2b89815bb3 100644 --- a/src/mol-repr/structure/representation/ball-and-stick.ts +++ b/src/mol-repr/structure/representation/ball-and-stick.ts @@ -14,8 +14,7 @@ import { StructureRepresentation, StructureRepresentationProvider } from '../rep import { Representation, RepresentationParamsGetter } from 'mol-repr/representation'; import { ThemeRegistryContext } from 'mol-theme/theme'; import { Structure } from 'mol-model/structure'; -import { BuiltInSizeThemeName, BuiltInSizeThemeOptions } from 'mol-theme/size'; -import { BuiltInColorThemeName, BuiltInColorThemeOptions } from 'mol-theme/color'; +import { BuiltInColorThemeOptions, BuiltInColorThemes, ColorTheme } from 'mol-theme/color'; import { UnitKind, UnitKindOptions } from '../visual/util/common'; const BallAndStickVisuals = { @@ -32,8 +31,7 @@ export const BallAndStickParams = { ...InterUnitLinkParams, unitKinds: PD.MultiSelect<UnitKind>(['atomic'], UnitKindOptions), sizeFactor: PD.Numeric(0.2, { min: 0.01, max: 10, step: 0.01 }), - sizeTheme: PD.Select<BuiltInSizeThemeName>('uniform', BuiltInSizeThemeOptions), - colorTheme: PD.Select<BuiltInColorThemeName>('polymer-index', BuiltInColorThemeOptions), + colorTheme: PD.Mapped('polymer-index', BuiltInColorThemeOptions, name => PD.Group((BuiltInColorThemes as { [k: string]: ColorTheme.Provider<any> })[name].getParams({}))), visuals: PD.MultiSelect<BallAndStickVisualName>(['element-sphere', 'intra-link', 'inter-link'], BallAndStickVisualOptions), } export type BallAndStickParams = typeof BallAndStickParams diff --git a/src/mol-repr/structure/representation/cartoon.ts b/src/mol-repr/structure/representation/cartoon.ts index 1bdd3534bb5cac3c781cd409785c66bb2b10e594..ccb54f9332aca73d05b0e589cc31cbe7352a5028 100644 --- a/src/mol-repr/structure/representation/cartoon.ts +++ b/src/mol-repr/structure/representation/cartoon.ts @@ -14,8 +14,7 @@ import { Representation, RepresentationParamsGetter } from 'mol-repr/representat import { PolymerDirectionVisual, PolymerDirectionParams } from '../visual/polymer-direction-wedge'; import { Structure } from 'mol-model/structure'; import { ThemeRegistryContext } from 'mol-theme/theme'; -import { BuiltInSizeThemeName, BuiltInSizeThemeOptions } from 'mol-theme/size'; -import { BuiltInColorThemeOptions, BuiltInColorThemeName } from 'mol-theme/color'; +import { BuiltInColorThemeOptions, getBuiltInColorThemeParams } from 'mol-theme/color'; const CartoonVisuals = { 'polymer-trace': (getParams: RepresentationParamsGetter<Structure, PolymerTraceParams>) => UnitsRepresentation('Polymer trace mesh', getParams, PolymerTraceVisual), @@ -32,10 +31,10 @@ export const CartoonParams = { ...NucleotideBlockParams, ...PolymerDirectionParams, sizeFactor: PD.Numeric(0.2, { min: 0, max: 10, step: 0.01 }), - sizeTheme: PD.Select<BuiltInSizeThemeName>('uniform', BuiltInSizeThemeOptions), - colorTheme: PD.Select<BuiltInColorThemeName>('polymer-index', BuiltInColorThemeOptions), + colorTheme: PD.Mapped('polymer-index', BuiltInColorThemeOptions, getBuiltInColorThemeParams), visuals: PD.MultiSelect<CartoonVisualName>(['polymer-trace', 'polymer-gap', 'nucleotide-block'], CartoonVisualOptions), } +PD.getDefaultValues(CartoonParams).colorTheme.name export type CartoonParams = typeof CartoonParams export function getCartoonParams(ctx: ThemeRegistryContext, structure: Structure) { return PD.clone(CartoonParams) diff --git a/src/mol-repr/structure/units-representation.ts b/src/mol-repr/structure/units-representation.ts index b836cc849fab8948ddad98f5ba0b40ca59de2022..42bb3fb8604b8660664dbdf7476772105c6cab63 100644 --- a/src/mol-repr/structure/units-representation.ts +++ b/src/mol-repr/structure/units-representation.ts @@ -14,7 +14,7 @@ import { StructureGroup } from './units-visual'; import { StructureRepresentation, StructureParams } from './representation'; import { PickingId } from 'mol-geo/geometry/picking'; import { MarkerAction } from 'mol-geo/geometry/marker-data'; -import { Theme, ThemeProps, createTheme } from 'mol-theme/theme'; +import { Theme, createTheme } from 'mol-theme/theme'; import { ParamDefinition as PD } from 'mol-util/param-definition'; import { UnitKind, UnitKindOptions } from './visual/util/common'; import { BehaviorSubject } from 'rxjs'; @@ -37,13 +37,13 @@ export function UnitsRepresentation<P extends UnitsParams>(label: string, getPar let _props: PD.Values<P> let _theme: Theme - function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.Values<P>> = {}, themeProps: ThemeProps = {}, structure?: Structure) { + function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.Values<P>> = {}, structure?: Structure) { if (structure && structure !== _structure) { _params = getParams(ctx, structure) if (!_props) _props = PD.getDefaultValues(_params) } _props = Object.assign({}, _props, props) - _theme = createTheme(ctx, { structure: structure || _structure }, props, themeProps, _theme) + _theme = createTheme(ctx, { structure: structure || _structure }, props, _theme) return Task.create('Creating or updating UnitsRepresentation', async runtime => { if (!_structure && !structure) { diff --git a/src/mol-repr/structure/visual/element-sphere.ts b/src/mol-repr/structure/visual/element-sphere.ts index 4c18321955d5f11599513b1fc5e92bcad7a13fc8..8f80022307ce1439079883cc4d93486d565ea14a 100644 --- a/src/mol-repr/structure/visual/element-sphere.ts +++ b/src/mol-repr/structure/visual/element-sphere.ts @@ -10,11 +10,11 @@ import { VisualUpdateState } from '../../util'; import { createElementSphereMesh, markElement, getElementLoci, StructureElementIterator } from './util/element'; import { UnitsMeshVisual, UnitsMeshParams } from '../units-visual'; import { ParamDefinition as PD } from 'mol-util/param-definition'; -import { BuiltInSizeThemeName, BuiltInSizeThemeOptions } from 'mol-theme/size'; +import { BuiltInSizeThemeOptions, getBuiltInSizeThemeParams } from 'mol-theme/size'; export const ElementSphereParams = { ...UnitsMeshParams, - sizeTheme: PD.Select<BuiltInSizeThemeName>('physical', BuiltInSizeThemeOptions), + sizeTheme: PD.Mapped('physical', BuiltInSizeThemeOptions, getBuiltInSizeThemeParams), sizeFactor: PD.Numeric(1, { min: 0, max: 10, step: 0.1 }), detail: PD.Numeric(0, { min: 0, max: 3, step: 1 }), } diff --git a/src/mol-repr/volume/representation.ts b/src/mol-repr/volume/representation.ts index c252534c81b70a2c3831785f20af5de0c64a5d20..12e24cdf1cd98895bb3e61971202c9aea2a1b5b8 100644 --- a/src/mol-repr/volume/representation.ts +++ b/src/mol-repr/volume/representation.ts @@ -19,7 +19,7 @@ import { LocationIterator } from 'mol-geo/util/location-iterator'; import { NullLocation } from 'mol-model/location'; import { VisualUpdateState } from 'mol-repr/util'; import { ValueCell } from 'mol-util'; -import { ThemeProps, Theme, createTheme } from 'mol-theme/theme'; +import { Theme, createTheme } from 'mol-theme/theme'; import { BehaviorSubject } from 'rxjs'; export interface VolumeVisual<P extends VolumeParams> extends Visual<VolumeData, P> { } @@ -149,14 +149,14 @@ export function VolumeRepresentation<P extends VolumeParams>(label: string, getP let _theme: Theme let busy = false - function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.Values<P>> = {}, themeProps: ThemeProps = {}, volume?: VolumeData) { + function createOrUpdate(ctx: RepresentationContext, props: Partial<PD.Values<P>> = {}, volume?: VolumeData) { if (volume && volume !== _volume) { _params = getParams(ctx, volume) _volume = volume if (!_props) _props = PD.getDefaultValues(_params) } _props = Object.assign({}, _props, props) - _theme = createTheme(ctx, _props, themeProps, {}, _theme) + _theme = createTheme(ctx, _props, {}, _theme) return Task.create('VolumeRepresentation.create', async runtime => { // TODO queue it somehow diff --git a/src/mol-theme/color.ts b/src/mol-theme/color.ts index 028de8ef251322c99b6a5b9f089d7d8867ff7231..31c5b3fd542397ba368eb6e7ed53c751621b69b3 100644 --- a/src/mol-theme/color.ts +++ b/src/mol-theme/color.ts @@ -11,7 +11,7 @@ import { CarbohydrateSymbolColorThemeProvider } from './color/carbohydrate-symbo import { UniformColorTheme, UniformColorThemeProvider } from './color/uniform'; import { deepEqual } from 'mol-util'; import { ParamDefinition as PD } from 'mol-util/param-definition'; -import { ThemeDataContext } from 'mol-theme/theme'; +import { ThemeDataContext } from './theme'; import { ChainIdColorThemeProvider } from './color/chain-id'; import { CrossLinkColorThemeProvider } from './color/cross-link'; import { ElementIndexColorThemeProvider } from './color/element-index'; @@ -23,27 +23,11 @@ import { SecondaryStructureColorThemeProvider } from './color/secondary-structur import { SequenceIdColorThemeProvider } from './color/sequence-id'; import { ShapeGroupColorThemeProvider } from './color/shape-group'; import { UnitIndexColorThemeProvider } from './color/unit-index'; +import { ScaleLegend } from 'mol-util/color/scale'; +import { TableLegend } from 'mol-util/color/tables'; export type LocationColor = (location: Location, isSecondary: boolean) => Color -export interface ScaleLegend { - kind: 'scale-legend' - minLabel: string, - maxLabel: string, - colors: Color[] -} -export function ScaleLegend(minLabel: string, maxLabel: string, colors: Color[]): ScaleLegend { - return { kind: 'scale-legend', minLabel, maxLabel, colors } -} - -export interface TableLegend { - kind: 'table-legend' - table: [ string, Color ][] -} -export function TableLegend(table: [ string, Color ][]): TableLegend { - return { kind: 'table-legend', table } -} - export type ColorThemeProps = { [k: string]: any } export { ColorTheme } @@ -63,34 +47,40 @@ namespace ColorTheme { } export interface Provider<P extends PD.Params> { + readonly label: string readonly factory: (ctx: ThemeDataContext, props: PD.Values<P>) => ColorTheme<PD.Values<P>> - readonly params: (ctx: ThemeDataContext) => P + readonly getParams: (ctx: ThemeDataContext) => P } + export const EmptyProvider: Provider<{}> = { label: '', factory: () => Empty, getParams: () => ({}) } export class Registry { private _list: { name: string, provider: Provider<any> }[] = [] private _map = new Map<string, Provider<any>>() + get default() { return this._list[0]; } + get types(): [string, string][] { + return this._list.map(e => [e.name, e.provider.label] as [string, string]); + } + constructor() { Object.keys(BuiltInColorThemes).forEach(name => { const p = (BuiltInColorThemes as { [k: string]: Provider<any> })[name] - this.add(name, p.factory, p.params) + this.add(name, p) }) } - add<P extends PD.Params>(name: string, factory: Provider<P>['factory'], params: Provider<P>['params']) { - const provider = { factory, params } as Provider<P> + add<P extends PD.Params>(name: string, provider: Provider<P>) { this._list.push({ name, provider }) this._map.set(name, provider) } - get(id: string) { - return this._map.get(id) + get<P extends PD.Params>(name: string): Provider<P> { + return this._map.get(name) || EmptyProvider as unknown as Provider<P> } create(id: string, ctx: ThemeDataContext, props = {}) { const provider = this.get(id) - return provider ? provider.factory(ctx, { ...PD.getDefaultValues(provider.params(ctx)), ...props }) : Empty + return provider ? provider.factory(ctx, { ...PD.getDefaultValues(provider.getParams(ctx)), ...props }) : Empty } get list() { @@ -116,4 +106,5 @@ export const BuiltInColorThemes = { } export type BuiltInColorThemeName = keyof typeof BuiltInColorThemes export const BuiltInColorThemeNames = Object.keys(BuiltInColorThemes) -export const BuiltInColorThemeOptions = BuiltInColorThemeNames.map(n => [n, n] as [BuiltInColorThemeName, string]) \ No newline at end of file +export const BuiltInColorThemeOptions = BuiltInColorThemeNames.map(n => [n, n] as [BuiltInColorThemeName, string]) +export const getBuiltInColorThemeParams = (name: string, ctx: ThemeDataContext = {}) => PD.Group((BuiltInColorThemes as { [k: string]: ColorTheme.Provider<any> })[name].getParams(ctx)) \ No newline at end of file diff --git a/src/mol-theme/color/carbohydrate-symbol.ts b/src/mol-theme/color/carbohydrate-symbol.ts index ecb4b26c414aa53a691033a61a312488b77c4834..5063ca0c788364a4f79a23dee6fe5ae06a247aa1 100644 --- a/src/mol-theme/color/carbohydrate-symbol.ts +++ b/src/mol-theme/color/carbohydrate-symbol.ts @@ -8,10 +8,11 @@ import { StructureElement, Link, ElementIndex, Unit } from 'mol-model/structure' import { SaccharideColors, MonosaccharidesColorTable } from 'mol-model/structure/structure/carbohydrates/constants'; import { Location } from 'mol-model/location'; -import { ColorTheme, LocationColor, TableLegend } from '../color'; +import { ColorTheme, LocationColor } from '../color'; import { Color } from 'mol-util/color'; import { ParamDefinition as PD } from 'mol-util/param-definition' -import { ThemeDataContext } from 'mol-theme/theme'; +import { ThemeDataContext } from '../theme'; +import { TableLegend } from 'mol-util/color/tables'; const DefaultColor = Color(0xCCCCCC) const Description = 'Assigns colors according to the Symbol Nomenclature for Glycans (SNFG).' @@ -73,5 +74,7 @@ export function CarbohydrateSymbolColorTheme(ctx: ThemeDataContext, props: Carbo } export const CarbohydrateSymbolColorThemeProvider: ColorTheme.Provider<typeof CarbohydrateSymbolColorThemeParams> = { - factory: CarbohydrateSymbolColorTheme, params: getCarbohydrateSymbolColorThemeParams + label: 'Carbohydrate Symbol', + factory: CarbohydrateSymbolColorTheme, + getParams: getCarbohydrateSymbolColorThemeParams } \ No newline at end of file diff --git a/src/mol-theme/color/chain-id.ts b/src/mol-theme/color/chain-id.ts index 139da7c8ac99ba90f5937105b029406481d6c52f..2983ce357fef282afe23182257b8e558fc8cb59f 100644 --- a/src/mol-theme/color/chain-id.ts +++ b/src/mol-theme/color/chain-id.ts @@ -80,5 +80,7 @@ export function ChainIdColorTheme(ctx: ThemeDataContext, props: ChainIdColorThem } export const ChainIdColorThemeProvider: ColorTheme.Provider<typeof ChainIdColorThemeParams> = { - factory: ChainIdColorTheme, params: getChainIdColorThemeParams + label: 'Chain Id', + factory: ChainIdColorTheme, + getParams: getChainIdColorThemeParams } \ No newline at end of file diff --git a/src/mol-theme/color/cross-link.ts b/src/mol-theme/color/cross-link.ts index 1f6ff23b45330f0d1dd9b4ec3b0a781bc454d83e..74b36b07ee393fe476c8dd1fdf030714164a9eb6 100644 --- a/src/mol-theme/color/cross-link.ts +++ b/src/mol-theme/color/cross-link.ts @@ -68,5 +68,7 @@ export function CrossLinkColorTheme(ctx: ThemeDataContext, props: CrossLinkColor } export const CrossLinkColorThemeProvider: ColorTheme.Provider<typeof CrossLinkColorThemeParams> = { - factory: CrossLinkColorTheme, params: getCrossLinkColorThemeParams + label: 'Cross Link', + factory: CrossLinkColorTheme, + getParams: getCrossLinkColorThemeParams } \ No newline at end of file diff --git a/src/mol-theme/color/element-index.ts b/src/mol-theme/color/element-index.ts index d0eb06e6128f8b7af894a7c80d6b5dae32308830..2307fd4d78bdb98dd6399c6b9da155cfd1c7c82a 100644 --- a/src/mol-theme/color/element-index.ts +++ b/src/mol-theme/color/element-index.ts @@ -68,5 +68,7 @@ export function ElementIndexColorTheme(ctx: ThemeDataContext, props: ElementInde } export const ElementIndexColorThemeProvider: ColorTheme.Provider<typeof ElementIndexColorThemeParams> = { - factory: ElementIndexColorTheme, params: getElementIndexColorThemeParams + label: 'Element Index', + factory: ElementIndexColorTheme, + getParams: getElementIndexColorThemeParams } \ No newline at end of file diff --git a/src/mol-theme/color/element-symbol.ts b/src/mol-theme/color/element-symbol.ts index 33bc576fba0aed57fb30bb9bef0bb2cbf9ee5833..2e7650413d6985548dd80a1a821fd5c0e611b32c 100644 --- a/src/mol-theme/color/element-symbol.ts +++ b/src/mol-theme/color/element-symbol.ts @@ -8,9 +8,10 @@ import { ElementSymbol } from 'mol-model/structure/model/types'; import { Color, ColorMap } from 'mol-util/color'; import { StructureElement, Unit, Link } from 'mol-model/structure'; import { Location } from 'mol-model/location'; -import { ColorTheme, TableLegend } from '../color'; +import { ColorTheme } from '../color'; import { ParamDefinition as PD } from 'mol-util/param-definition' -import { ThemeDataContext } from 'mol-theme/theme'; +import { ThemeDataContext } from '../theme'; +import { TableLegend } from 'mol-util/color/tables'; // from Jmol http://jmol.sourceforge.net/jscolors/ (or 0xFFFFFF) export const ElementSymbolColors = ColorMap({ @@ -59,5 +60,7 @@ export function ElementSymbolColorTheme(ctx: ThemeDataContext, props: ElementSym } export const ElementSymbolColorThemeProvider: ColorTheme.Provider<typeof ElementSymbolColorThemeParams> = { - factory: ElementSymbolColorTheme, params: getElementSymbolColorThemeParams + label: 'Element Symbol', + factory: ElementSymbolColorTheme, + getParams: getElementSymbolColorThemeParams } \ No newline at end of file diff --git a/src/mol-theme/color/molecule-type.ts b/src/mol-theme/color/molecule-type.ts index d0581ac4bef9d594b6cfeee2e8ae8ef003402f7f..11c87cbfb77d3f05de0493a9f4c26872de0e7c0d 100644 --- a/src/mol-theme/color/molecule-type.ts +++ b/src/mol-theme/color/molecule-type.ts @@ -7,11 +7,12 @@ import { Color, ColorMap } from 'mol-util/color'; import { StructureElement, Unit, Link, ElementIndex } from 'mol-model/structure'; import { Location } from 'mol-model/location'; -import { ColorTheme, TableLegend } from '../color'; +import { ColorTheme } from '../color'; import { MoleculeType } from 'mol-model/structure/model/types'; import { getElementMoleculeType } from 'mol-model/structure/util'; import { ParamDefinition as PD } from 'mol-util/param-definition' -import { ThemeDataContext } from 'mol-theme/theme'; +import { ThemeDataContext } from '../theme'; +import { TableLegend } from 'mol-util/color/tables'; const MoleculeTypeColors = ColorMap({ water: 0x386cb0, @@ -68,5 +69,7 @@ export function MoleculeTypeColorTheme(ctx: ThemeDataContext, props: MoleculeTyp } export const MoleculeTypeColorThemeProvider: ColorTheme.Provider<typeof MoleculeTypeColorThemeParams> = { - factory: MoleculeTypeColorTheme, params: getMoleculeTypeColorThemeParams + label: 'Molecule Type', + factory: MoleculeTypeColorTheme, + getParams: getMoleculeTypeColorThemeParams } \ No newline at end of file diff --git a/src/mol-theme/color/polymer-index.ts b/src/mol-theme/color/polymer-index.ts index f34dc35a75de219788816e16faddbeb0d40d01de..ed5cc40d6876374d6e8eac6fff366417f40f8e18 100644 --- a/src/mol-theme/color/polymer-index.ts +++ b/src/mol-theme/color/polymer-index.ts @@ -65,5 +65,7 @@ export function PolymerIndexColorTheme(ctx: ThemeDataContext, props: PolymerInde } export const PolymerIndexColorThemeProvider: ColorTheme.Provider<typeof PolymerIndexColorThemeParams> = { - factory: PolymerIndexColorTheme, params: getPolymerIndexColorThemeParams + label: 'Polymer Index', + factory: PolymerIndexColorTheme, + getParams: getPolymerIndexColorThemeParams } \ No newline at end of file diff --git a/src/mol-theme/color/residue-name.ts b/src/mol-theme/color/residue-name.ts index d529c1452f16eef6472faea55962b2fd4691f5c7..178d49634e27e9f45da46aee004073620a6ff765 100644 --- a/src/mol-theme/color/residue-name.ts +++ b/src/mol-theme/color/residue-name.ts @@ -7,9 +7,10 @@ import { Color, ColorMap } from 'mol-util/color'; import { StructureElement, Unit, Link, ElementIndex } from 'mol-model/structure'; import { Location } from 'mol-model/location'; -import { ColorTheme, TableLegend } from '../color'; +import { ColorTheme } from '../color'; import { ParamDefinition as PD } from 'mol-util/param-definition' -import { ThemeDataContext } from 'mol-theme/theme'; +import { ThemeDataContext } from '../theme'; +import { TableLegend } from 'mol-util/color/tables'; // protein colors from Jmol http://jmol.sourceforge.net/jscolors/ const ResidueNameColors = ColorMap({ @@ -124,5 +125,7 @@ export function ResidueNameColorTheme(ctx: ThemeDataContext, props: ResidueNameC } export const ResidueNameColorThemeProvider: ColorTheme.Provider<typeof ResidueNameColorThemeParams> = { - factory: ResidueNameColorTheme, params: getResidueNameColorThemeParams + label: 'Residue Name', + factory: ResidueNameColorTheme, + getParams: getResidueNameColorThemeParams } \ No newline at end of file diff --git a/src/mol-theme/color/secondary-structure.ts b/src/mol-theme/color/secondary-structure.ts index a11eff2a70a7dc6e8790a17176bf6b4fd754d314..955846c5f7574ddce3d1a69acf6e2d04c1d0e7e1 100644 --- a/src/mol-theme/color/secondary-structure.ts +++ b/src/mol-theme/color/secondary-structure.ts @@ -7,11 +7,12 @@ import { Color, ColorMap } from 'mol-util/color'; import { StructureElement, Unit, Link, ElementIndex } from 'mol-model/structure'; import { Location } from 'mol-model/location'; -import { ColorTheme, TableLegend } from '../color'; +import { ColorTheme } from '../color'; import { SecondaryStructureType, MoleculeType } from 'mol-model/structure/model/types'; import { getElementMoleculeType } from 'mol-model/structure/util'; import { ParamDefinition as PD } from 'mol-util/param-definition' -import { ThemeDataContext } from 'mol-theme/theme'; +import { ThemeDataContext } from '../theme'; +import { TableLegend } from 'mol-util/color/tables'; // from Jmol http://jmol.sourceforge.net/jscolors/ (shapely) const SecondaryStructureColors = ColorMap({ @@ -91,5 +92,7 @@ export function SecondaryStructureColorTheme(ctx: ThemeDataContext, props: Secon } export const SecondaryStructureColorThemeProvider: ColorTheme.Provider<typeof SecondaryStructureColorThemeParams> = { - factory: SecondaryStructureColorTheme, params: getSecondaryStructureColorThemeParams + label: 'Secondary Structure', + factory: SecondaryStructureColorTheme, + getParams: getSecondaryStructureColorThemeParams } \ No newline at end of file diff --git a/src/mol-theme/color/sequence-id.ts b/src/mol-theme/color/sequence-id.ts index 43023587eb5ea5cfe8b022ed761abf131fdf2a81..4fbfafa637f6c6050b9b488299afe19f851fad85 100644 --- a/src/mol-theme/color/sequence-id.ts +++ b/src/mol-theme/color/sequence-id.ts @@ -99,5 +99,7 @@ export function SequenceIdColorTheme(ctx: ThemeDataContext, props: SequenceIdCol } export const SequenceIdColorThemeProvider: ColorTheme.Provider<typeof SequenceIdColorThemeParams> = { - factory: SequenceIdColorTheme, params: getSequenceIdColorThemeParams + label: 'Sequence Id', + factory: SequenceIdColorTheme, + getParams: getSequenceIdColorThemeParams } \ No newline at end of file diff --git a/src/mol-theme/color/shape-group.ts b/src/mol-theme/color/shape-group.ts index acbb30625dcfe2b19037a9b54c8f41e08ff9a4f3..4d30c299b6f78e1b1c7f2749ce85c07a3df1115b 100644 --- a/src/mol-theme/color/shape-group.ts +++ b/src/mol-theme/color/shape-group.ts @@ -35,5 +35,7 @@ export function ShapeGroupColorTheme(ctx: ThemeDataContext, props: ShapeGroupCol } export const ShapeGroupColorThemeProvider: ColorTheme.Provider<typeof ShapeGroupColorThemeParams> = { - factory: ShapeGroupColorTheme, params: getShapeGroupColorThemeParams + label: 'Shape Group', + factory: ShapeGroupColorTheme, + getParams: getShapeGroupColorThemeParams } \ No newline at end of file diff --git a/src/mol-theme/color/uniform.ts b/src/mol-theme/color/uniform.ts index 905deb9b3417761a86e9911bf91ff4327f2a7b01..0716bb4ed47e2de68e7b8f42b6f365ff674b1a95 100644 --- a/src/mol-theme/color/uniform.ts +++ b/src/mol-theme/color/uniform.ts @@ -4,10 +4,11 @@ * @author Alexander Rose <alexander.rose@weirdbyte.de> */ -import { ColorTheme, TableLegend } from '../color'; +import { ColorTheme } from '../color'; import { Color } from 'mol-util/color'; import { ParamDefinition as PD } from 'mol-util/param-definition' -import { ThemeDataContext } from 'mol-theme/theme'; +import { ThemeDataContext } from '../theme'; +import { TableLegend } from 'mol-util/color/tables'; const DefaultColor = Color(0xCCCCCC) const Description = 'Gives everything the same, uniform color.' @@ -33,5 +34,7 @@ export function UniformColorTheme(ctx: ThemeDataContext, props: UniformColorThem } export const UniformColorThemeProvider: ColorTheme.Provider<typeof UniformColorThemeParams> = { - factory: UniformColorTheme, params: getUniformColorThemeParams + label: 'Uniform', + factory: UniformColorTheme, + getParams: getUniformColorThemeParams } \ No newline at end of file diff --git a/src/mol-theme/color/unit-index.ts b/src/mol-theme/color/unit-index.ts index 0a50796153b6fc691dd063b9056be67454b06030..15494fc8572c20a07da95677eb739b966c8db046 100644 --- a/src/mol-theme/color/unit-index.ts +++ b/src/mol-theme/color/unit-index.ts @@ -57,5 +57,7 @@ export function UnitIndexColorTheme(ctx: ThemeDataContext, props: UnitIndexColor } export const UnitIndexColorThemeProvider: ColorTheme.Provider<typeof UnitIndexColorThemeParams> = { - factory: UnitIndexColorTheme, params: getUnitIndexColorThemeParams + label: 'Unit Index', + factory: UnitIndexColorTheme, + getParams: getUnitIndexColorThemeParams } \ No newline at end of file diff --git a/src/mol-theme/size.ts b/src/mol-theme/size.ts index 4676d896e9a161325c0afcf640d14987f56da0ae..22042a4557f7aacc83219ca5e304d4aa2c3bbbc3 100644 --- a/src/mol-theme/size.ts +++ b/src/mol-theme/size.ts @@ -27,23 +27,28 @@ namespace SizeTheme { } export interface Provider<P extends PD.Params> { + readonly label: string readonly factory: (ctx: ThemeDataContext, props: PD.Values<P>) => SizeTheme<PD.Values<P>> - readonly params: (ctx: ThemeDataContext) => P + readonly getParams: (ctx: ThemeDataContext) => P } export class Registry { private _list: { name: string, provider: Provider<any> }[] = [] private _map = new Map<string, Provider<any>>() + get default() { return this._list[0]; } + get types(): [string, string][] { + return this._list.map(e => [e.name, e.provider.label] as [string, string]); + } + constructor() { Object.keys(BuiltInSizeThemes).forEach(name => { const p = (BuiltInSizeThemes as { [k: string]: Provider<any> })[name] - this.add(name, p.factory, p.params) + this.add(name, p) }) } - add<P extends PD.Params>(name: string, factory: Provider<P>['factory'], params: Provider<P>['params']) { - const provider = { factory, params } as Provider<P> + add<P extends PD.Params>(name: string, provider: Provider<P>) { this._list.push({ name, provider }) this._map.set(name, provider) } @@ -54,7 +59,7 @@ namespace SizeTheme { create(id: string, ctx: ThemeDataContext, props = {}) { const provider = this.get(id) - return provider ? provider.factory(ctx, { ...PD.getDefaultValues(provider.params(ctx)), ...props }) : Empty + return provider ? provider.factory(ctx, { ...PD.getDefaultValues(provider.getParams(ctx)), ...props }) : Empty } get list() { @@ -69,4 +74,5 @@ export const BuiltInSizeThemes = { } export type BuiltInSizeThemeName = keyof typeof BuiltInSizeThemes export const BuiltInSizeThemeNames = Object.keys(BuiltInSizeThemes) -export const BuiltInSizeThemeOptions = BuiltInSizeThemeNames.map(n => [n, n] as [BuiltInSizeThemeName, string]) \ No newline at end of file +export const BuiltInSizeThemeOptions = BuiltInSizeThemeNames.map(n => [n, n] as [BuiltInSizeThemeName, string]) +export const getBuiltInSizeThemeParams = (name: string, ctx: ThemeDataContext = {}) => PD.Group((BuiltInSizeThemes as { [k: string]: SizeTheme.Provider<any> })[name].getParams(ctx)) \ No newline at end of file diff --git a/src/mol-theme/size/physical.ts b/src/mol-theme/size/physical.ts index 65017be880bd71c1a62f63522fb592ed6a8292be..c7a62dcdb7b0226cd79d8e28a374f12371668b37 100644 --- a/src/mol-theme/size/physical.ts +++ b/src/mol-theme/size/physical.ts @@ -56,5 +56,7 @@ export function PhysicalSizeTheme(ctx: ThemeDataContext, props: PhysicalSizeThem } export const PhysicalSizeThemeProvider: SizeTheme.Provider<typeof PhysicalSizeThemeParams> = { - factory: PhysicalSizeTheme, params: getPhysicalSizeThemeParams + label: 'Physical', + factory: PhysicalSizeTheme, + getParams: getPhysicalSizeThemeParams } \ No newline at end of file diff --git a/src/mol-theme/size/uniform.ts b/src/mol-theme/size/uniform.ts index 8d12a160072461759819e3808895299fe0cfa2d7..5040b9675c69a5b8564c86099be55030df6c767c 100644 --- a/src/mol-theme/size/uniform.ts +++ b/src/mol-theme/size/uniform.ts @@ -30,5 +30,7 @@ export function UniformSizeTheme(ctx: ThemeDataContext, props: UniformSizeThemeP } export const UniformSizeThemeProvider: SizeTheme.Provider<typeof UniformSizeThemeParams> = { - factory: UniformSizeTheme, params: getUniformSizeThemeParams + label: 'Uniform', + factory: UniformSizeTheme, + getParams: getUniformSizeThemeParams } \ No newline at end of file diff --git a/src/mol-theme/theme.ts b/src/mol-theme/theme.ts index a5f1a3e80e8ec39bd68a122ab4eee34a3f6a2c60..f52ad6fd7635663b5d0124b77a3cd8d9384bc520 100644 --- a/src/mol-theme/theme.ts +++ b/src/mol-theme/theme.ts @@ -8,6 +8,7 @@ import { ColorTheme } from './color'; import { SizeTheme } from './size'; import { Structure } from 'mol-model/structure'; import { VolumeData } from 'mol-model/volume'; +import { ParamDefinition as PD } from 'mol-util/param-definition'; export interface ThemeRegistryContext { colorThemeRegistry: ColorTheme.Registry @@ -20,8 +21,6 @@ export interface ThemeDataContext { volume?: VolumeData } -export interface ThemeProps { color?: {}, size?: {} } - export interface Theme { color: ColorTheme size: SizeTheme @@ -30,17 +29,17 @@ export interface Theme { type Props = { [k: string]: any } -export function createTheme(ctx: ThemeRegistryContext, data: ThemeDataContext, props: Props, themeProps: ThemeProps = {}, theme?: Theme) { +export function createTheme(ctx: ThemeRegistryContext, data: ThemeDataContext, props: Props, theme?: Theme) { theme = theme || { color: ColorTheme.Empty, size: SizeTheme.Empty } - // TODO check if props have changed - if (typeof props.colorTheme === 'string') { - theme.color = ctx.colorThemeRegistry.create(props.colorTheme, data, themeProps.color) - } - if (typeof props.sizeTheme === 'string') { - theme.size = ctx.sizeThemeRegistry.create(props.sizeTheme, data, themeProps.size) - } + + const colorProps = props.colorTheme as PD.NamedParams + const sizeProps = props.sizeTheme as PD.NamedParams + + theme.color = ctx.colorThemeRegistry.create(colorProps.name, data, colorProps.params) + theme.size = ctx.sizeThemeRegistry.create(sizeProps.name, data, sizeProps.params) + return theme } \ No newline at end of file diff --git a/src/mol-util/color/scale.ts b/src/mol-util/color/scale.ts index 7ed018496fcfdd4666f29f77325fe9f20fa92047..328a79b7b05823f717b44c5c9419f8eb470d385a 100644 --- a/src/mol-util/color/scale.ts +++ b/src/mol-util/color/scale.ts @@ -6,7 +6,6 @@ import { Color } from './color' import { ColorBrewer, ColorMatplotlib, ColorOther } from './tables' -import { ScaleLegend } from 'mol-theme/color'; import { defaults } from 'mol-util'; export type ColorListName = ( @@ -31,6 +30,16 @@ export function getColorListFromName(name: ColorListName) { // +export interface ScaleLegend { + kind: 'scale-legend' + minLabel: string, + maxLabel: string, + colors: Color[] +} +export function ScaleLegend(minLabel: string, maxLabel: string, colors: Color[]): ScaleLegend { + return { kind: 'scale-legend', minLabel, maxLabel, colors } +} + export interface ColorScale { /** Returns hex color for given value */ color: (value: number) => Color diff --git a/src/mol-util/color/tables.ts b/src/mol-util/color/tables.ts index 6ee4aa931104f3307f87d2717ec01a9f36d391c4..758fe153507c286071972d72d88fd2340e960322 100644 --- a/src/mol-util/color/tables.ts +++ b/src/mol-util/color/tables.ts @@ -4,7 +4,15 @@ * @author Alexander Rose <alexander.rose@weirdbyte.de> */ -import { ColorMap, ColorTable } from './color'; +import { ColorMap, ColorTable, Color } from './color'; + +export interface TableLegend { + kind: 'table-legend' + table: [ string, Color ][] +} +export function TableLegend(table: [ string, Color ][]): TableLegend { + return { kind: 'table-legend', table } +} /** * Brewer Color Lists