Skip to content
Snippets Groups Projects
Commit 9c977bf9 authored by Alexander Rose's avatar Alexander Rose
Browse files

add ColorSwatch and use instead of ColorNames for color dropdown

parent 525f32fe
No related branches found
No related tags found
No related merge requests found
...@@ -2,16 +2,17 @@ ...@@ -2,16 +2,17 @@
* Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info. * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
* *
* @author David Sehnal <david.sehnal@gmail.com> * @author David Sehnal <david.sehnal@gmail.com>
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/ */
import { Color } from '../../../mol-util/color'; import { Color } from '../../../mol-util/color';
import { ColorNames, ColorNamesValueMap } from '../../../mol-util/color/names';
import { ParamDefinition as PD } from '../../../mol-util/param-definition'; import { ParamDefinition as PD } from '../../../mol-util/param-definition';
import { camelCaseToWords } from '../../../mol-util/string'; import { camelCaseToWords, stringToWords } from '../../../mol-util/string';
import * as React from 'react'; import * as React from 'react';
import { _Props, _State } from '../base'; import { _Props, _State } from '../base';
import { ParamProps } from './parameters'; import { ParamProps } from './parameters';
import { TextInput } from './common'; import { TextInput } from './common';
import { DefaultColorSwatch } from '../../../mol-util/color/swatches';
export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Color>, { isExpanded: boolean }> { export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Color>, { isExpanded: boolean }> {
state = { isExpanded: false } state = { isExpanded: false }
...@@ -49,7 +50,7 @@ export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Colo ...@@ -49,7 +50,7 @@ export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Colo
// const def = this.props.param.defaultValue; // const def = this.props.param.defaultValue;
return <div className='msp-combined-color-swatch'> return <div className='msp-combined-color-swatch'>
{/* <button title='Default Color' key={def} className='msp-form-control msp-btn' data-color={def} onClick={this.onClickSwatch} style={{ background: Color.toStyle(def) }}></button> */} {/* <button title='Default Color' key={def} className='msp-form-control msp-btn' data-color={def} onClick={this.onClickSwatch} style={{ background: Color.toStyle(def) }}></button> */}
{SwatchColors.map(c => <button key={c} className='msp-form-control msp-btn' data-color={c} onClick={this.onClickSwatch} style={{ background: Color.toStyle(c) }}></button>)} {DefaultColorSwatch.map(c => <button key={c[1]} className='msp-form-control msp-btn' data-color={c[1]} onClick={this.onClickSwatch} style={{ background: Color.toStyle(c[1]) }}></button>)}
</div>; </div>;
} }
...@@ -84,16 +85,6 @@ export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Colo ...@@ -84,16 +85,6 @@ export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Colo
placeholder='e.g. 127 127 127' delayMs={250} /> placeholder='e.g. 127 127 127' delayMs={250} />
</div> </div>
</div> </div>
<div className='msp-control-row'>
<span>Color List</span>
<div>
<select value={this.props.value} onChange={this.onChangeSelect}>
{ColorValueOption(this.props.value)}
{ColorOptions()}
</select>
<div style={this.stripStyle()} />
</div>
</div>
</div>} </div>}
</>; </>;
} }
...@@ -121,25 +112,24 @@ function isValidColorString(s: string) { ...@@ -121,25 +112,24 @@ function isValidColorString(s: string) {
return true; return true;
} }
// the 1st color is the default value.
const SwatchColors = [
0x000000, 0x808080, 0xFFFFFF, 0xD33115, 0xE27300, 0xFCC400,
0x68BC00, 0x16A5A5, 0x009CE0, 0x7B64FF, 0xFA28FF, 0x7D2187
].map(Color);
let _colors: React.ReactFragment | undefined = void 0; let _colors: React.ReactFragment | undefined = void 0;
function ColorOptions() { export function ColorOptions() {
if (_colors) return _colors; if (_colors) return _colors;
_colors = <>{Object.keys(ColorNames).map(name => _colors = <>{DefaultColorSwatch.map(v =>
<option key={name} value={(ColorNames as { [k: string]: Color })[name]} style={{ background: `${Color.toStyle((ColorNames as { [k: string]: Color })[name])}` }} > <option key={v[1]} value={v[1]} style={{ background: `${Color.toStyle(v[1])}` }} >
{name} {stringToWords(v[0])}
</option> </option>
)}</>; )}</>;
return _colors; return _colors;
} }
function ColorValueOption(color: Color) { const DefaultColorSwatchMap = (function () {
return !ColorNamesValueMap.has(color) ? <option key={Color.toHexString(color)} value={color} style={{ background: `${Color.toStyle(color)}` }} > const map = new Map<Color, string>()
for (const v of DefaultColorSwatch) map.set(v[1], v[0])
return map
})()
export function ColorValueOption(color: Color) {
return !DefaultColorSwatchMap.has(color) ? <option key={Color.toHexString(color)} value={color} style={{ background: `${Color.toStyle(color)}` }} >
{Color.toRgbString(color)} {Color.toRgbString(color)}
</option> : null </option> : null
} }
\ No newline at end of file
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
import { Vec2, Vec3 } from '../../../mol-math/linear-algebra'; import { Vec2, Vec3 } from '../../../mol-math/linear-algebra';
import { Color } from '../../../mol-util/color'; import { Color } from '../../../mol-util/color';
import { ColorListName, getColorListFromName } from '../../../mol-util/color/lists'; import { ColorListName, getColorListFromName } from '../../../mol-util/color/lists';
import { ColorNames, ColorNamesValueMap } from '../../../mol-util/color/names';
import { memoize1 } from '../../../mol-util/memoize'; import { memoize1 } from '../../../mol-util/memoize';
import { ParamDefinition as PD } from '../../../mol-util/param-definition'; import { ParamDefinition as PD } from '../../../mol-util/param-definition';
import { camelCaseToWords } from '../../../mol-util/string'; import { camelCaseToWords } from '../../../mol-util/string';
...@@ -19,7 +18,7 @@ import { NumericInput, IconButton, ControlGroup } from './common'; ...@@ -19,7 +18,7 @@ import { NumericInput, IconButton, ControlGroup } from './common';
import { _Props, _State } from '../base'; import { _Props, _State } from '../base';
import { legendFor } from './legend'; import { legendFor } from './legend';
import { Legend as LegendData } from '../../../mol-util/legend'; import { Legend as LegendData } from '../../../mol-util/legend';
import { CombinedColorControl } from './color'; import { CombinedColorControl, ColorValueOption, ColorOptions } from './color';
export interface ParameterControlsProps<P extends PD.Params = PD.Params> { export interface ParameterControlsProps<P extends PD.Params = PD.Params> {
params: P, params: P,
...@@ -297,23 +296,6 @@ export class BoundedIntervalControl extends SimpleParam<PD.Interval> { ...@@ -297,23 +296,6 @@ export class BoundedIntervalControl extends SimpleParam<PD.Interval> {
} }
} }
let _colors: React.ReactFragment | undefined = void 0;
export function ColorOptions() {
if (_colors) return _colors;
_colors = <>{Object.keys(ColorNames).map(name =>
<option key={name} value={(ColorNames as { [k: string]: Color })[name]} style={{ background: `${Color.toStyle((ColorNames as { [k: string]: Color })[name])}` }} >
{name}
</option>
)}</>;
return _colors;
}
function ColorValueOption(color: Color) {
return !ColorNamesValueMap.has(color) ? <option key={Color.toHexString(color)} value={color} style={{ background: `${Color.toStyle(color)}` }} >
{Color.toRgbString(color)}
</option> : null
}
export class ColorControl extends SimpleParam<PD.Color> { export class ColorControl extends SimpleParam<PD.Color> {
onChange = (e: React.ChangeEvent<HTMLSelectElement>) => { onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
this.update(Color(parseInt(e.target.value))); this.update(Color(parseInt(e.target.value)));
......
...@@ -8,7 +8,7 @@ import * as React from 'react'; ...@@ -8,7 +8,7 @@ import * as React from 'react';
import { PluginUIComponent, CollapsableState, CollapsableProps } from '../base'; import { PluginUIComponent, CollapsableState, CollapsableProps } from '../base';
import { Structure, StructureElement } from '../../../mol-model/structure'; import { Structure, StructureElement } from '../../../mol-model/structure';
import { isEmptyLoci } from '../../../mol-model/loci'; import { isEmptyLoci } from '../../../mol-model/loci';
import { ColorOptions, ParameterControls } from '../controls/parameters'; import { ParameterControls } from '../controls/parameters';
import { Color } from '../../../mol-util/color'; import { Color } from '../../../mol-util/color';
import { ButtonSelect, Options } from '../controls/common' import { ButtonSelect, Options } from '../controls/common'
import { ParamDefinition as PD } from '../../../mol-util/param-definition'; import { ParamDefinition as PD } from '../../../mol-util/param-definition';
...@@ -18,6 +18,7 @@ import { camelCaseToWords } from '../../../mol-util/string'; ...@@ -18,6 +18,7 @@ import { camelCaseToWords } from '../../../mol-util/string';
import { CollapsableControls } from '../base'; import { CollapsableControls } from '../base';
import { StateSelection, StateObject } from '../../../mol-state'; import { StateSelection, StateObject } from '../../../mol-state';
import { PluginStateObject } from '../../state/objects'; import { PluginStateObject } from '../../state/objects';
import { ColorOptions } from '../controls/color';
interface BaseStructureRepresentationControlsState { interface BaseStructureRepresentationControlsState {
isDisabled: boolean isDisabled: boolean
......
...@@ -145,3 +145,6 @@ export function getAdjustedColorMap<T extends { [k: string]: number }>(map: Colo ...@@ -145,3 +145,6 @@ export function getAdjustedColorMap<T extends { [k: string]: number }>(map: Colo
} }
return adjustedMap as ColorMap<T> return adjustedMap as ColorMap<T>
} }
export type ColorSwatch = [string, Color][]
export function ColorSwatch(l: [string, number][]) { return l as unknown as ColorSwatch }
\ No newline at end of file
/**
* Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author Alexander Rose <alexander.rose@weirdbyte.de>
* @author David Sehnal <david.sehnal@gmail.com>
*/
import { ColorSwatch } from './color';
export const DefaultColorSwatch = ColorSwatch([
['black', 0x000000],
['gray', 0x808080],
['white', 0xFFFFFF],
['red', 0xD33115],
['orange', 0xE27300],
['yellow', 0xFCC400],
['green', 0x68BC00],
['cyan', 0x16A5A5],
['blue', 0x009CE0],
['purple', 0x7B64FF],
['magenta', 0xFA28FF],
['violet', 0x7D2187]
])
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment