diff --git a/src/mol-plugin/ui/controls/color.tsx b/src/mol-plugin/ui/controls/color.tsx
index 5fc8c810bddc193e9d82bf5c22a94152b62a437e..13004c190e398a739bbd61de1c32fbc19c584414 100644
--- a/src/mol-plugin/ui/controls/color.tsx
+++ b/src/mol-plugin/ui/controls/color.tsx
@@ -2,16 +2,17 @@
* Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
import { Color } from '../../../mol-util/color';
-import { ColorNames, ColorNamesValueMap } from '../../../mol-util/color/names';
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 { _Props, _State } from '../base';
import { ParamProps } from './parameters';
import { TextInput } from './common';
+import { DefaultColorSwatch } from '../../../mol-util/color/swatches';
export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Color>, { isExpanded: boolean }> {
state = { isExpanded: false }
@@ -49,7 +50,7 @@ export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Colo
// const def = this.props.param.defaultValue;
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> */}
- {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>;
}
@@ -84,16 +85,6 @@ export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Colo
placeholder='e.g. 127 127 127' delayMs={250} />
</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>}
</>;
}
@@ -121,25 +112,24 @@ function isValidColorString(s: string) {
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;
-function ColorOptions() {
+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}
+ _colors = <>{DefaultColorSwatch.map(v =>
+ <option key={v[1]} value={v[1]} style={{ background: `${Color.toStyle(v[1])}` }} >
+ {stringToWords(v[0])}
</option>
)}</>;
return _colors;
}
-function ColorValueOption(color: Color) {
- return !ColorNamesValueMap.has(color) ? <option key={Color.toHexString(color)} value={color} style={{ background: `${Color.toStyle(color)}` }} >
+const DefaultColorSwatchMap = (function () {
+ 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)}
</option> : null
}
\ No newline at end of file
diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx
index a7c53ada02ed28e675ce0b95a3e0e3979c00375c..ab878124d0ed12b65046fd774edbfa191ecabcc1 100644
--- a/src/mol-plugin/ui/controls/parameters.tsx
+++ b/src/mol-plugin/ui/controls/parameters.tsx
@@ -8,7 +8,6 @@
import { Vec2, Vec3 } from '../../../mol-math/linear-algebra';
import { Color } from '../../../mol-util/color';
import { ColorListName, getColorListFromName } from '../../../mol-util/color/lists';
-import { ColorNames, ColorNamesValueMap } from '../../../mol-util/color/names';
import { memoize1 } from '../../../mol-util/memoize';
import { ParamDefinition as PD } from '../../../mol-util/param-definition';
import { camelCaseToWords } from '../../../mol-util/string';
@@ -19,7 +18,7 @@ import { NumericInput, IconButton, ControlGroup } from './common';
import { _Props, _State } from '../base';
import { legendFor } from './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> {
params: P,
@@ -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> {
onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
this.update(Color(parseInt(e.target.value)));
diff --git a/src/mol-plugin/ui/structure/representation.tsx b/src/mol-plugin/ui/structure/representation.tsx
index 8a45ddde8543d749934718f7e351b982023ed35a..07fd61a6b078b6631f7e6ee2420791372bf5b973 100644
--- a/src/mol-plugin/ui/structure/representation.tsx
+++ b/src/mol-plugin/ui/structure/representation.tsx
@@ -8,7 +8,7 @@ import * as React from 'react';
import { PluginUIComponent, CollapsableState, CollapsableProps } from '../base';
import { Structure, StructureElement } from '../../../mol-model/structure';
import { isEmptyLoci } from '../../../mol-model/loci';
-import { ColorOptions, ParameterControls } from '../controls/parameters';
+import { ParameterControls } from '../controls/parameters';
import { Color } from '../../../mol-util/color';
import { ButtonSelect, Options } from '../controls/common'
import { ParamDefinition as PD } from '../../../mol-util/param-definition';
@@ -18,6 +18,7 @@ import { camelCaseToWords } from '../../../mol-util/string';
import { CollapsableControls } from '../base';
import { StateSelection, StateObject } from '../../../mol-state';
import { PluginStateObject } from '../../state/objects';
+import { ColorOptions } from '../controls/color';
interface BaseStructureRepresentationControlsState {
isDisabled: boolean
diff --git a/src/mol-util/color/color.ts b/src/mol-util/color/color.ts
index 7df516c9d8f6edec6e0ae25f1dcab24353e8a9a6..fdd000edc5ce7c9eaea1e1916728577ba2fcc13f 100644
--- a/src/mol-util/color/color.ts
+++ b/src/mol-util/color/color.ts
@@ -144,4 +144,7 @@ export function getAdjustedColorMap<T extends { [k: string]: number }>(map: Colo
adjustedMap[e] = c
}
return adjustedMap as ColorMap<T>
-}
\ No newline at end of file
+}
+
+export type ColorSwatch = [string, Color][]
+export function ColorSwatch(l: [string, number][]) { return l as unknown as ColorSwatch }
\ No newline at end of file
diff --git a/src/mol-util/color/swatches.ts b/src/mol-util/color/swatches.ts
new file mode 100644
index 0000000000000000000000000000000000000000..df619006400f0cd36f1cb7c82498a516f99f8217
--- /dev/null
+++ b/src/mol-util/color/swatches.ts
@@ -0,0 +1,23 @@
+/**
+ * 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