Skip to content
Snippets Groups Projects
Commit 79a09e84 authored by Alexander Rose's avatar Alexander Rose
Browse files

added simple color dropwdown as ColorParamComponent

parent c71aeb76
Branches
Tags
No related merge requests found
......@@ -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
......
......@@ -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> : ''}
{
......
/**
* 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
......@@ -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 ''
}
......
......@@ -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 {
......
......@@ -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),
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment