added simple color dropwdown as ColorParamComponent

src/apps/canvas/component/viewport.tsx

@@ -12,6 +12,9 @@ import { labelFirst } from 'mol-theme/label';
 import { ButtonsType } from 'mol-util/input/input-observer';
 import { throttleTime } from 'rxjs/operators'
 import { CombinedCameraMode } from 'mol-canvas3d/camera/combined';
+import { ColorParamComponent } from 'mol-app/component/parameter/color';
+import { Color } from 'mol-util/color';
+import { ParamDefinition as PD } from 'mol-util/param-definition'
 
 interface ViewportProps {
     app: App
@@ -22,8 +25,11 @@ interface ViewportState {
     pickingInfo: string
     taskInfo: string
     cameraMode: CombinedCameraMode
+    backgroundColor: Color
 }
 
+const BackgroundColorParam = PD.Color('Background Color', '', Color(0x000000))
+
 export class Viewport extends React.Component<ViewportProps, ViewportState> {
     private container: HTMLDivElement | null = null;
     private canvas: HTMLCanvasElement | null = null;
@@ -32,7 +38,8 @@ export class Viewport extends React.Component<ViewportProps, ViewportState> {
         noWebGl: false,
         pickingInfo: '',
         taskInfo: '',
-        cameraMode: 'perspective'
+        cameraMode: 'perspective',
+        backgroundColor: Color(0x000000)
     };
 
     handleResize() {
@@ -45,7 +52,10 @@ export class Viewport extends React.Component<ViewportProps, ViewportState> {
         }
         this.handleResize()
 
-        this.setState({ cameraMode: this.props.app.canvas3d.camera.mode })
+        this.setState({
+            cameraMode: this.props.app.canvas3d.props.cameraMode,
+            backgroundColor: this.props.app.canvas3d.props.backgroundColor
+        })
 
         const canvas3d = this.props.app.canvas3d
 
@@ -132,19 +142,30 @@ export class Viewport extends React.Component<ViewportProps, ViewportState> {
                     background: 'rgba(0, 0, 0, 0.2)'
                 }}
             >
-                <span>Camera mode </span>
-                <select
-                    value={this.state.cameraMode}
-                    style={{width: '150'}}
-                    onChange={e => {
-                        const cameraMode = e.target.value as CombinedCameraMode
-                        this.props.app.canvas3d.camera.mode = cameraMode
-                        this.setState({ cameraMode })
+                <div>
+                    <span>Camera Mode </span>
+                    <select
+                        value={this.state.cameraMode}
+                        style={{width: '150'}}
+                        onChange={e => {
+                            const p = { cameraMode: e.target.value as CombinedCameraMode }
+                            this.props.app.canvas3d.setProps(p)
+                            this.setState(p)
+                        }}
+                    >
+                        <option value='perspective'>Perspective</option>
+                        <option value='orthographic'>Orthographic</option>
+                    </select>
+                </div>
+                <ColorParamComponent
+                    param={BackgroundColorParam}
+                    value={this.state.backgroundColor}
+                    onChange={value => {
+                        const p = { backgroundColor: value }
+                        this.props.app.canvas3d.setProps(p)
+                        this.setState(p)
                     }}
-                >
-                    <option value='perspective'>Perspective</option>
-                    <option value='orthographic'>Orthographic</option>
-                </select>
+                />
             </div>
             { this.state.taskInfo ?
                 <div

src/mol-app/component/color-theme.tsx

@@ -24,7 +24,7 @@ export class ColorThemeComponent extends React.Component<ColorThemeComponentProp
     render() {
         const ct = this.props.colorTheme
         return <div>
-            <span>Color Theme </span>
+            <span>Color Theme Info </span>
 
             {ct.description ? <div><i>{ct.description}</i></div> : ''}
             {

src/mol-app/component/parameter/color.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import * as React from 'react'
+import { ParamDefinition as PD } from 'mol-util/param-definition';
+import { ColorNames } from 'mol-util/color/tables';
+import { Color } from 'mol-util/color';
+
+export interface ColorParamComponentProps {
+    param: PD.Color
+    value: Color
+    onChange(v: Color): void
+}
+
+export interface ColorParamComponentState {
+    value: Color
+}
+
+export class ColorParamComponent extends React.Component<ColorParamComponentProps, ColorParamComponentState> {
+    state = {
+        value: this.props.value
+    }
+
+    onChange(value: Color) {
+        this.setState({ value })
+        this.props.onChange(value)
+    }
+
+    render() {
+        return <div>
+            <span>{this.props.param.label} </span>
+            <select value={this.state.value} onChange={e => this.onChange(Color(parseInt(e.target.value))) }>
+                {Object.keys(ColorNames).map(name => {
+                    return <option key={name} value={(ColorNames as { [k: string]: Color})[name]}>{name}</option>
+                })}
+            </select>
+        </div>;
+    }
+}

src/mol-app/component/parameters.tsx

@@ -12,6 +12,7 @@ import { RangeParamComponent } from './parameter/range';
 import { SelectParamComponent } from './parameter/select';
 import { MultiSelectParamComponent } from './parameter/multi-select';
 import { TextParamComponent } from './parameter/text';
+import { ColorParamComponent } from './parameter/color';
 
 interface ParametersProps<P extends PD.Params> {
     params: P
@@ -35,6 +36,8 @@ function getParamComponent<P extends PD.Any>(p: PD.Any, value: P['defaultValue']
             return <MultiSelectParamComponent param={p} value={value} onChange={onChange} />
         case 'text':
             return <TextParamComponent param={p} value={value} onChange={onChange} />
+        case 'color':
+            return <ColorParamComponent param={p} value={value} onChange={onChange} />
     }
     return ''
 }

src/mol-canvas3d/canvas3d.ts

@@ -63,6 +63,7 @@ interface Canvas3D {
     readonly camera: CombinedCamera
     downloadScreenshot: () => void
     getImageData: (variant: RenderVariant) => ImageData
+    setProps: (props: Partial<Canvas3DProps>) => void
 
     /** Returns a copy of the current Canvas3D instance props */
     readonly props: Canvas3DProps
@@ -341,6 +342,15 @@ namespace Canvas3D {
             reprCount,
             identified,
             didDraw,
+            setProps: (props: Partial<Canvas3DProps>) => {
+                if (props.cameraMode !== undefined && props.cameraMode !== camera.mode) {
+                    camera.mode = props.cameraMode
+                }
+                if (props.backgroundColor !== undefined && props.backgroundColor !== renderer.props.clearColor) {
+                    renderer.setClearColor(props.backgroundColor)
+                }
+                requestDraw(true)
+            },
 
             get props() {
                 return {

src/mol-geo/geometry/geometry.ts

@@ -78,11 +78,11 @@ export namespace Geometry {
         useFog: PD.Boolean('Use Fog', '', false),
         quality: PD.Select<VisualQuality>('Quality', '', 'auto', VisualQualityOptions),
 
-        colorTheme: PD.Select<ColorThemeName>('Color Theme', '', 'uniform', ColorThemeOptions),
+        colorTheme: PD.Select<ColorThemeName>('Color Name', '', 'uniform', ColorThemeOptions),
         colorList: PD.Select<ColorScaleName>('Color Scale', '', 'default', ColorScaleOptions),
         colorValue: PD.Color('Color Value', '', Color(0xCCCCCC)),
 
-        sizeTheme: PD.Select<SizeThemeName>('Size Theme', '', 'uniform', SizeThemeOptions),
+        sizeTheme: PD.Select<SizeThemeName>('Size Name', '', 'uniform', SizeThemeOptions),
         sizeValue: PD.Numeric('Size Value', '', 1, 0, 20, 0.1),
         sizeFactor: PD.Numeric('Size Factor', '', 1, 0, 10, 0.1),
     }