diff --git a/src/apps/canvas/component/viewport.tsx b/src/apps/canvas/component/viewport.tsx
index 5a1f97077cd0a81e81dc957bd053df70b32ed1ee..9f048fd4cd49fe7d634ffc61741137228e3f31fe 100644
--- a/src/apps/canvas/component/viewport.tsx
+++ b/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
diff --git a/src/mol-app/component/color-theme.tsx b/src/mol-app/component/color-theme.tsx
index 43f8d1290a4f9c99d24c29280cdbba03c59e17c1..e546c25bd4eaafd8da71102d14d122bf5a5b6c16 100644
--- a/src/mol-app/component/color-theme.tsx
+++ b/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> : ''}
{
diff --git a/src/mol-app/component/parameter/color.tsx b/src/mol-app/component/parameter/color.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..496254a490195d70079e45fcadea4cc26beadc4f
--- /dev/null
+++ b/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>;
+ }
+}
\ No newline at end of file
diff --git a/src/mol-app/component/parameters.tsx b/src/mol-app/component/parameters.tsx
index 5c1748b7c45443a59badff9a722417769a77de88..02e47939a7d0a7b064c8482d3ea8ab88917a6347 100644
--- a/src/mol-app/component/parameters.tsx
+++ b/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 ''
}
diff --git a/src/mol-canvas3d/canvas3d.ts b/src/mol-canvas3d/canvas3d.ts
index ee2a3c419d1fd59cc3d3a8a74233db8c335b687a..d9460c5ee7d1a34f8c4ae7bbcd4799d5da87def8 100644
--- a/src/mol-canvas3d/canvas3d.ts
+++ b/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 {
diff --git a/src/mol-geo/geometry/geometry.ts b/src/mol-geo/geometry/geometry.ts
index d6cbbb26b1051328d20ef21a120864ae8aab5806..2bf275c6a9590a367dcbdf54fcb75e886fa87985 100644
--- a/src/mol-geo/geometry/geometry.ts
+++ b/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),
}