diff --git a/src/mol-canvas3d/canvas3d.ts b/src/mol-canvas3d/canvas3d.ts index 0e84165ba188af11a9efe1c32cabde9d350790c3..616c6b8b920a4b37c326837d7f3eb2080ba91b18 100644 --- a/src/mol-canvas3d/canvas3d.ts +++ b/src/mol-canvas3d/canvas3d.ts @@ -29,16 +29,17 @@ import { Camera } from './camera'; import { ParamDefinition as PD } from 'mol-util/param-definition'; import { BoundingSphereHelper } from './helper/bounding-sphere-helper'; -export const Canvas3DParams = { +export const Canvas3DParams: PD.Params = { // TODO: FPS cap? // maxFps: PD.Numeric(30), cameraPosition: PD.Vec3(Vec3.create(0, 0, 50)), // TODO or should it be in a seperate 'state' property? - cameraMode: PD.Select('perspective', [['perspective', 'Perspective'], ['orthographic', 'Orthographic']]), - backgroundColor: PD.Color(Color(0x000000)), pickingAlphaThreshold: PD.Numeric(0.5, { min: 0.0, max: 1.0, step: 0.01 }, { description: 'The minimum opacity value needed for an object to be pickable.' }), - debug: PD.Group({ - showBoundingSpheres: PD.Boolean(true, { description: 'Show bounding spheres of render objects.' }), - }) + backgroundColor: PD.Color(Color(0x000000)), + cameraMode: PD.Select('perspective', [['perspective', 'Perspective'], ['orthographic', 'Orthographic']]), + showBoundingSpheres: PD.Boolean(true, { description: 'Show bounding spheres of render objects.' }), + // debug: PD.Group({ + // showBoundingSpheres: PD.Boolean(true, { description: 'Show bounding spheres of render objects.' }), + // }) } export type Canvas3DParams = typeof Canvas3DParams @@ -126,7 +127,7 @@ namespace Canvas3D { let drawPending = false let lastRenderTime = -1 - const boundingSphereHelper = new BoundingSphereHelper(scene, p.debug.showBoundingSpheres) + const boundingSphereHelper = new BoundingSphereHelper(scene, p.showBoundingSpheres) function getLoci(pickingId: PickingId) { let loci: Loci = EmptyLoci @@ -377,8 +378,8 @@ namespace Canvas3D { if (props.pickingAlphaThreshold !== undefined && props.pickingAlphaThreshold !== renderer.props.pickingAlphaThreshold) { renderer.setPickingAlphaThreshold(props.pickingAlphaThreshold) } - if (props.debug && props.debug.showBoundingSpheres) { - boundingSphereHelper.visible = props.debug.showBoundingSpheres + if (props.showBoundingSpheres !== undefined) { + boundingSphereHelper.visible = props.showBoundingSpheres } requestDraw(true) }, @@ -389,9 +390,7 @@ namespace Canvas3D { cameraMode: camera.state.mode, backgroundColor: renderer.props.clearColor, pickingAlphaThreshold: renderer.props.pickingAlphaThreshold, - debug: { - showBoundingSpheres: boundingSphereHelper.visible - } + showBoundingSpheres: boundingSphereHelper.visible } }, get input() { diff --git a/src/mol-plugin/skin/base/components/viewport.scss b/src/mol-plugin/skin/base/components/viewport.scss index 55ca6cd8b1b16f786f320f1a61a35c3625040f10..2cd9b9abd48a286deb1cd23f686c647c9f51e3f2 100644 --- a/src/mol-plugin/skin/base/components/viewport.scss +++ b/src/mol-plugin/skin/base/components/viewport.scss @@ -5,11 +5,11 @@ right: 0; bottom: 0; background: black; - + .msp-btn-link { background: rgba(0,0,0,0.2); } - + } .msp-viewport-expanded { @@ -31,30 +31,31 @@ .msp-viewport-controls { position: absolute; right: $control-spacing; - top: $control-spacing; + top: $control-spacing; + width: 290px; } .msp-viewport-controls-buttons { text-align: right; - + > button { padding: 0; text-align: center; width: $row-height; } - + > button:last-child { margin-left: $control-spacing; - } - + } + .msp-btn-link, .msp-btn-link-toggle-on { color: #eee; } - + .msp-btn-link-toggle-off { color: $msp-btn-link-toggle-off-font-color; } - + .msp-btn-link:hover { color: $hover-font-color; } @@ -68,18 +69,18 @@ /* highlight */ .msp-highlight-info { - + color: $highlight-info-font-color; padding: $info-vertical-padding $control-spacing; background: $default-background; //$highlight-info-background; - + position: absolute; top: $control-spacing; left: $control-spacing; text-align: left; min-height: $row-height; max-width: 95%; - + //border-bottom-right-radius: 6px; z-index: 10000; @include non-selectable; @@ -90,4 +91,3 @@ display: inline-block; color: $highlight-info-additional-font-color; } - diff --git a/src/mol-plugin/ui/viewport.tsx b/src/mol-plugin/ui/viewport.tsx index 6d0d5ed973e84e4274762b9befa1ba7f52487ad5..8ea152322bf22ad517ec12a28ee02450b7f85011 100644 --- a/src/mol-plugin/ui/viewport.tsx +++ b/src/mol-plugin/ui/viewport.tsx @@ -10,19 +10,45 @@ import { ButtonsType } from 'mol-util/input/input-observer'; import { Canvas3dIdentifyHelper } from 'mol-plugin/util/canvas3d-identify'; import { PluginComponent } from './base'; import { PluginCommands } from 'mol-plugin/command'; +import { ParamDefinition as PD } from 'mol-util/param-definition'; +import { ParameterControls } from './controls/parameters'; +import { Canvas3DParams } from 'mol-canvas3d/canvas3d'; interface ViewportState { noWebGl: boolean } export class ViewportControls extends PluginComponent { + state = { + isSettingsExpanded: false, + settings: PD.getDefaultValues(Canvas3DParams) + } + resetCamera = () => { PluginCommands.Camera.Reset.dispatch(this.plugin, {}); } + toggleSettingsExpanded = (e: React.MouseEvent<HTMLButtonElement>) => { + this.setState({ isSettingsExpanded: !this.state.isSettingsExpanded }); + e.currentTarget.blur(); + } + + setSettings = (p: { param: PD.Base<any>, name: string, value: any }) => { + this.plugin.canvas3d.setProps({ [p.name]: p.value }) + this.setState({ settings: this.plugin.canvas3d.props }) + } + render() { - return <div style={{ position: 'absolute', right: '10px', top: '10px', height: '100%', color: 'white' }}> - <button className='msp-btn msp-btn-link' onClick={this.resetCamera}>↻ Camera</button> + return <div className={'msp-viewport-controls'}> + <div className={'msp-row'}> + <button className='msp-btn msp-btn-link' onClick={this.resetCamera}>↻ Camera</button> + <div> + <button className='msp-btn msp-btn-link'onClick={this.toggleSettingsExpanded}>Settings</button> + <div className='msp-control-offset' style={{ display: this.state.isSettingsExpanded ? 'block' : 'none' }}> + <ParameterControls params={Canvas3DParams} values={this.state.settings} onChange={this.setSettings} /> + </div> + </div> + </div> </div> } }