From 91f7e7c6223bf1581598b5f33aa731397c7cdbd1 Mon Sep 17 00:00:00 2001
From: Alexander Rose <alexander.rose@weirdbyte.de>
Date: Fri, 23 Nov 2018 20:06:35 -0800
Subject: [PATCH] color ui tweak to show option unnamed colors
---
src/mol-plugin/ui/controls/parameters.tsx | 10 +++++++++-
src/mol-util/color/tables.ts | 11 ++++++++++-
2 files changed, 19 insertions(+), 2 deletions(-)
diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx
index ad5116ba1..bfaff131f 100644
--- a/src/mol-plugin/ui/controls/parameters.tsx
+++ b/src/mol-plugin/ui/controls/parameters.tsx
@@ -8,7 +8,7 @@
import * as React from 'react'
import { ParamDefinition as PD } from 'mol-util/param-definition';
import { camelCaseToWords } from 'mol-util/string';
-import { ColorNames } from 'mol-util/color/tables';
+import { ColorNames, ColorNamesValueMap } from 'mol-util/color/tables';
import { Color } from 'mol-util/color';
import { Slider, Slider2 } from './slider';
@@ -172,6 +172,13 @@ function ColorOptions() {
return _colors;
}
+function ColorValueOption(color: Color) {
+ return !ColorNamesValueMap.has(color) ? <option key={Color.toHexString(color)} value={color} style={{ background: `${Color.toStyle(color)}` }} >
+ {Color.toHexString(color)}
+ </option> : null
+}
+
+
export class ColorControl extends SimpleParam<PD.Color> {
onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
this.update(Color(parseInt(e.target.value)));
@@ -179,6 +186,7 @@ export class ColorControl extends SimpleParam<PD.Color> {
renderControl() {
return <select value={this.props.value} onChange={this.onChange} style={{ borderLeft: `16px solid ${Color.toStyle(this.props.value)}` }}>
+ {ColorValueOption(this.props.value)}
{ColorOptions()}
</select>;
}
diff --git a/src/mol-util/color/tables.ts b/src/mol-util/color/tables.ts
index 758fe1535..b4380176c 100644
--- a/src/mol-util/color/tables.ts
+++ b/src/mol-util/color/tables.ts
@@ -259,4 +259,13 @@ export const ColorNames = ColorMap({
whitesmoke: 0xf5f5f5,
yellow: 0xffff00,
yellowgreen: 0x9acd32
-})
\ No newline at end of file
+})
+export type ColorNames = typeof ColorNames
+export type ColorName = keyof ColorNames
+export const ColorNamesValueMap = (function(){
+ const map = new Map<Color, ColorName>()
+ Object.keys(ColorNames).forEach(name => {
+ map.set(ColorNames[name as ColorName], name as ColorName)
+ })
+ return map
+})()
--
GitLab