added custom color theme, color refactoring

src/mol-geo/util/color-data.ts

@@ -9,9 +9,8 @@ import { TextureImage, createTextureImage } from 'mol-gl/renderable/util';
 import { Color } from 'mol-util/color';
 import { Vec2, Vec3 } from 'mol-math/linear-algebra';
 import { LocationIterator } from './location-iterator';
-import { Location, NullLocation } from 'mol-model/location';
-
-export type ColorType = 'uniform' | 'instance' | 'group' | 'groupInstance'
+import { NullLocation } from 'mol-model/location';
+import { LocationColor, ColorType } from 'mol-view/theme/color';
 
 export type ColorData = {
     uColor: ValueCell<Vec3>,
@@ -21,8 +20,6 @@ export type ColorData = {
     dColorType: ValueCell<string>,
 }
 
-export type LocationColor = (location: Location, isSecondary: boolean) => Color
-
 const emptyColorTexture = { array: new Uint8Array(3), width: 1, height: 1 }
 function createEmptyColorTexture() {
     return {

src/mol-view/theme/color.ts

@@ -6,7 +6,7 @@
 
 import { Color } from 'mol-util/color';
 import { Structure } from 'mol-model/structure';
-import { ColorType, LocationColor } from 'mol-geo/util/color-data';
+import { Location } from 'mol-model/location';
 
 import { ElementIndexColorTheme } from './color/element-index';
 import { CarbohydrateSymbolColorTheme } from './color/carbohydrate-symbol';
@@ -16,6 +16,10 @@ import { UnitIndexColorTheme } from './color/unit-index';
 import { UniformColorTheme } from './color/uniform';
 import { CrossLinkColorTheme } from './color/cross-link';
 import { ShapeGroupColorTheme } from './color/shape-group';
+import { CustomColorTheme } from './color/custom';
+
+export type ColorType = 'uniform' | 'instance' | 'group' | 'groupInstance'
+export type LocationColor = (location: Location, isSecondary: boolean) => Color
 
 export interface ColorTheme {
     kind: ColorType
@@ -32,6 +36,7 @@ export function ColorTheme(props: ColorThemeProps): ColorTheme {
         case 'unit-index': return UnitIndexColorTheme(props)
         case 'uniform': return UniformColorTheme(props)
         case 'shape-group': return ShapeGroupColorTheme(props)
+        case 'custom': return CustomColorTheme(props)
     }
 }
 
@@ -40,6 +45,8 @@ export interface ColorThemeProps {
     domain?: [number, number]
     value?: Color
     structure?: Structure
+    colorFn?: LocationColor
+    kind?: ColorType
 }
 
 export const ColorThemeInfo = {
@@ -50,7 +57,8 @@ export const ColorThemeInfo = {
     'element-symbol': {},
     'unit-index': {},
     'uniform': {},
-    'shape-group': {}
+    'shape-group': {},
+    'custom': {}
 }
 export type ColorThemeName = keyof typeof ColorThemeInfo
 export const ColorThemeNames = Object.keys(ColorThemeInfo)

src/mol-view/theme/color/carbohydrate-symbol.ts

@@ -8,11 +8,10 @@ import { StructureElement, Link, ElementIndex, Unit } from 'mol-model/structure'
 
 import { SaccharideColors } from 'mol-model/structure/structure/carbohydrates/constants';
 import { Location } from 'mol-model/location';
-import { ColorThemeProps, ColorTheme } from '../color';
-import { LocationColor } from 'mol-geo/util/color-data';
+import { ColorThemeProps, ColorTheme, LocationColor } from '../color';
 import { Color } from 'mol-util/color';
 
-const DefaultColor = 0xCCCCCC as Color
+const DefaultColor = Color(0xCCCCCC)
 
 export function CarbohydrateSymbolColorTheme(props: ColorThemeProps): ColorTheme {
     let colorFn: LocationColor

src/mol-view/theme/color/chain-id.ts

@@ -10,7 +10,7 @@ import { ColorScale, Color } from 'mol-util/color';
 import { Location } from 'mol-model/location';
 import { ColorThemeProps, ColorTheme } from '../color';
 
-const DefaultColor = 0xCCCCCC as Color
+const DefaultColor = Color(0xCCCCCC)
 
 function getAsymId(unit: Unit): StructureElement.Property<string> {
     switch (unit.kind) {

src/mol-view/theme/color/cross-link.ts

@@ -8,11 +8,10 @@ import { Link } from 'mol-model/structure';
 
 import { Color, ColorScale, ColorBrewer } from 'mol-util/color';
 import { Location } from 'mol-model/location';
-import { ColorThemeProps, ColorTheme } from '../color';
-import { LocationColor } from 'mol-geo/util/color-data';
+import { ColorThemeProps, ColorTheme, LocationColor } from '../color';
 import { Vec3 } from 'mol-math/linear-algebra';
 
-const DefaultColor = 0xCCCCCC as Color
+const DefaultColor = Color(0xCCCCCC)
 
 const distVecA = Vec3.zero(), distVecB = Vec3.zero()
 function linkDistance(link: Link.Location) {

src/mol-view/theme/color/custom.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Color } from 'mol-util/color';
+import { ColorThemeProps, ColorTheme } from '../color';
+import { defaults } from 'mol-util';
+
+const DefaultColor = Color(0xCCCCCC)
+
+export function CustomColorTheme(props: ColorThemeProps): ColorTheme {
+    const value = defaults(props.value, DefaultColor)
+    return {
+        kind: defaults(props.kind, 'uniform'),
+        color: defaults(props.colorFn, () => value)
+    }
+}

src/mol-view/theme/color/element-index.ts

@@ -8,10 +8,9 @@ import { ColorScale, Color } from 'mol-util/color';
 import { Location } from 'mol-model/location';
 import { StructureElement, Link, Unit } from 'mol-model/structure';
 import { OrderedSet } from 'mol-data/int';
-import { LocationColor } from 'mol-geo/util/color-data';
-import { ColorThemeProps, ColorTheme } from '../color';
+import { ColorThemeProps, ColorTheme, LocationColor } from '../color';
 
-const DefaultColor = 0xCCCCCC as Color
+const DefaultColor = Color(0xCCCCCC)
 
 export function ElementIndexColorTheme(props: ColorThemeProps): ColorTheme {
     let colorFn: LocationColor

src/mol-view/theme/color/element-symbol.ts

@@ -15,7 +15,7 @@ export const ElementSymbolColors = ColorMap({
     'H': 0xFFFFFF, 'HE': 0xD9FFFF, 'LI': 0xCC80FF, 'BE': 0xC2FF00, 'B': 0xFFB5B5, 'C': 0x909090, 'N': 0x3050F8, 'O': 0xFF0D0D, 'F': 0x90E050, 'NE': 0xB3E3F5, 'NA': 0xAB5CF2, 'MG': 0x8AFF00, 'AL': 0xBFA6A6, 'SI': 0xF0C8A0, 'P': 0xFF8000, 'S': 0xFFFF30, 'CL': 0x1FF01F, 'AR': 0x80D1E3, 'K': 0x8F40D4, 'CA': 0x3DFF00, 'SC': 0xE6E6E6, 'TI': 0xBFC2C7, 'V': 0xA6A6AB, 'CR': 0x8A99C7, 'MN': 0x9C7AC7, 'FE': 0xE06633, 'CO': 0xF090A0, 'NI': 0x50D050, 'CU': 0xC88033, 'ZN': 0x7D80B0, 'GA': 0xC28F8F, 'GE': 0x668F8F, 'AS': 0xBD80E3, 'SE': 0xFFA100, 'BR': 0xA62929, 'KR': 0x5CB8D1, 'RB': 0x702EB0, 'SR': 0x00FF00, 'Y': 0x94FFFF, 'ZR': 0x94E0E0, 'NB': 0x73C2C9, 'MO': 0x54B5B5, 'TC': 0x3B9E9E, 'RU': 0x248F8F, 'RH': 0x0A7D8C, 'PD': 0x006985, 'AG': 0xC0C0C0, 'CD': 0xFFD98F, 'IN': 0xA67573, 'SN': 0x668080, 'SB': 0x9E63B5, 'TE': 0xD47A00, 'I': 0x940094, 'XE': 0x940094, 'CS': 0x57178F, 'BA': 0x00C900, 'LA': 0x70D4FF, 'CE': 0xFFFFC7, 'PR': 0xD9FFC7, 'ND': 0xC7FFC7, 'PM': 0xA3FFC7, 'SM': 0x8FFFC7, 'EU': 0x61FFC7, 'GD': 0x45FFC7, 'TB': 0x30FFC7, 'DY': 0x1FFFC7, 'HO': 0x00FF9C, 'ER': 0x00E675, 'TM': 0x00D452, 'YB': 0x00BF38, 'LU': 0x00AB24, 'HF': 0x4DC2FF, 'TA': 0x4DA6FF, 'W': 0x2194D6, 'RE': 0x267DAB, 'OS': 0x266696, 'IR': 0x175487, 'PT': 0xD0D0E0, 'AU': 0xFFD123, 'HG': 0xB8B8D0, 'TL': 0xA6544D, 'PB': 0x575961, 'BI': 0x9E4FB5, 'PO': 0xAB5C00, 'AT': 0x754F45, 'RN': 0x428296, 'FR': 0x420066, 'RA': 0x007D00, 'AC': 0x70ABFA, 'TH': 0x00BAFF, 'PA': 0x00A1FF, 'U': 0x008FFF, 'NP': 0x0080FF, 'PU': 0x006BFF, 'AM': 0x545CF2, 'CM': 0x785CE3, 'BK': 0x8A4FE3, 'CF': 0xA136D4, 'ES': 0xB31FD4, 'FM': 0xB31FBA, 'MD': 0xB30DA6, 'NO': 0xBD0D87, 'LR': 0xC70066, 'RF': 0xCC0059, 'DB': 0xD1004F, 'SG': 0xD90045, 'BH': 0xE00038, 'HS': 0xE6002E, 'MT': 0xEB0026, 'DS': 0xFFFFFF, 'RG': 0xFFFFFF, 'CN': 0xFFFFFF, 'UUT': 0xFFFFFF, 'FL': 0xFFFFFF, 'UUP': 0xFFFFFF, 'LV': 0xFFFFFF, 'UUH': 0xFFFFFF, 'D': 0xFFFFC0, 'T': 0xFFFFA0
 })
 
-const DefaultElementSymbolColor = 0xFFFFFF as Color
+const DefaultElementSymbolColor = Color(0xFFFFFF)
 
 export function elementSymbolColor(element: ElementSymbol): Color {
     const c = (ElementSymbolColors as { [k: string]: Color })[element];

src/mol-view/theme/color/shape-group.ts

@@ -9,7 +9,7 @@ import { Color } from 'mol-util/color';
 import { Location } from 'mol-model/location';
 import { Shape } from 'mol-model/shape';
 
-const DefaultColor = 0xCCCCCC as Color
+const DefaultColor = Color(0xCCCCCC)
 
 export function ShapeGroupColorTheme(props: ColorThemeProps): ColorTheme {
     return {

src/mol-view/theme/color/uniform.ts

@@ -7,7 +7,7 @@
 import { ColorTheme, ColorThemeProps } from '../color';
 import { Color } from 'mol-util/color';
 
-const DefaultColor = 0xCCCCCC as Color
+const DefaultColor = Color(0xCCCCCC)
 
 export function UniformColorTheme(props: ColorThemeProps): ColorTheme {
     const color = props.value || DefaultColor

src/mol-view/theme/color/unit-index.ts

@@ -7,10 +7,9 @@
 import { ColorScale, Color } from 'mol-util/color';
 import { Location } from 'mol-model/location';
 import { Unit, StructureElement, Link } from 'mol-model/structure';
-import { LocationColor } from 'mol-geo/util/color-data';
-import { ColorTheme, ColorThemeProps } from '../color';
+import { ColorTheme, ColorThemeProps, LocationColor } from '../color';
 
-const DefaultColor = 0xCCCCCC as Color
+const DefaultColor = Color(0xCCCCCC)
 
 export function UnitIndexColorTheme(props: ColorThemeProps): ColorTheme {
     let colorFn: LocationColor