add ColorSwatch and use instead of ColorNames for color dropdown

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
 }

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)));

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

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>
-}
+}
+
+export type ColorSwatch = [string, Color][]
+export function ColorSwatch(l: [string, number][]) { return l as unknown as ColorSwatch }

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]
+])