wip, quick canvas3d settings ui

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() {

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;
 }
-

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>
     }
 }