From cbbec79339e090f920c2603117c3381af5fd5f47 Mon Sep 17 00:00:00 2001 From: Alexander Rose <alex.rose@rcsb.org> Date: Thu, 23 Aug 2018 18:14:52 -0700 Subject: [PATCH] added custom color theme, color refactoring --- src/mol-geo/util/color-data.ts | 7 ++----- src/mol-view/theme/color.ts | 12 ++++++++++-- .../theme/color/carbohydrate-symbol.ts | 5 ++--- src/mol-view/theme/color/chain-id.ts | 2 +- src/mol-view/theme/color/cross-link.ts | 5 ++--- src/mol-view/theme/color/custom.ts | 19 +++++++++++++++++++ src/mol-view/theme/color/element-index.ts | 5 ++--- src/mol-view/theme/color/element-symbol.ts | 2 +- src/mol-view/theme/color/shape-group.ts | 2 +- src/mol-view/theme/color/uniform.ts | 2 +- src/mol-view/theme/color/unit-index.ts | 5 ++--- 11 files changed, 43 insertions(+), 23 deletions(-) create mode 100644 src/mol-view/theme/color/custom.ts diff --git a/src/mol-geo/util/color-data.ts b/src/mol-geo/util/color-data.ts index d8f0c3d2e..3188f6850 100644 --- a/src/mol-geo/util/color-data.ts +++ b/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 { diff --git a/src/mol-view/theme/color.ts b/src/mol-view/theme/color.ts index f02f54b3a..345ba4d0d 100644 --- a/src/mol-view/theme/color.ts +++ b/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) \ No newline at end of file diff --git a/src/mol-view/theme/color/carbohydrate-symbol.ts b/src/mol-view/theme/color/carbohydrate-symbol.ts index 7c3093a0b..b4328c2fe 100644 --- a/src/mol-view/theme/color/carbohydrate-symbol.ts +++ b/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 diff --git a/src/mol-view/theme/color/chain-id.ts b/src/mol-view/theme/color/chain-id.ts index 9e15eec0f..f7d86f740 100644 --- a/src/mol-view/theme/color/chain-id.ts +++ b/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) { diff --git a/src/mol-view/theme/color/cross-link.ts b/src/mol-view/theme/color/cross-link.ts index 5a4709dc5..e31e7080a 100644 --- a/src/mol-view/theme/color/cross-link.ts +++ b/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) { diff --git a/src/mol-view/theme/color/custom.ts b/src/mol-view/theme/color/custom.ts new file mode 100644 index 000000000..f3b8de22b --- /dev/null +++ b/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) + } +} \ No newline at end of file diff --git a/src/mol-view/theme/color/element-index.ts b/src/mol-view/theme/color/element-index.ts index f6abd54f3..cb0e097f5 100644 --- a/src/mol-view/theme/color/element-index.ts +++ b/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 diff --git a/src/mol-view/theme/color/element-symbol.ts b/src/mol-view/theme/color/element-symbol.ts index eaa64ebb6..d1b20c5ed 100644 --- a/src/mol-view/theme/color/element-symbol.ts +++ b/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]; diff --git a/src/mol-view/theme/color/shape-group.ts b/src/mol-view/theme/color/shape-group.ts index f7be8107b..ba27b7c70 100644 --- a/src/mol-view/theme/color/shape-group.ts +++ b/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 { diff --git a/src/mol-view/theme/color/uniform.ts b/src/mol-view/theme/color/uniform.ts index 7236e88fb..44f705dbb 100644 --- a/src/mol-view/theme/color/uniform.ts +++ b/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 diff --git a/src/mol-view/theme/color/unit-index.ts b/src/mol-view/theme/color/unit-index.ts index f980de05b..8f604fac3 100644 --- a/src/mol-view/theme/color/unit-index.ts +++ b/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 -- GitLab