mol-plugin: viewport settings, tweaks

src/mol-canvas3d/canvas3d.ts

@@ -34,8 +34,10 @@ export const Canvas3DParams = {
     // maxFps: PD.Numeric(30),
     cameraMode: PD.Select('perspective', [['perspective', 'Perspective'], ['orthographic', 'Orthographic']]),
     backgroundColor: PD.Color(Color(0x000000)),
+    // TODO: make this an interval?
     clipNear: PD.Numeric(1, { min: 1, max: 100, step: 1 }),
     clipFar: PD.Numeric(100, { min: 1, max: 100, step: 1 }),
+    // TODO: make this an interval?
     fogNear: PD.Numeric(50, { min: 1, max: 100, step: 1 }),
     fogFar: PD.Numeric(100, { min: 1, max: 100, step: 1 }),
     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.' }),

src/mol-plugin/behavior/static/representation.ts

@@ -20,6 +20,8 @@ export function SyncRepresentationToCanvas(ctx: PluginContext) {
         if (!SO.isRepresentation3D(e.obj)) return;
         updateVisibility(e, e.obj.data);
         ctx.canvas3d.add(e.obj.data);
+        // TODO: only do this if there were no representations previously
+        ctx.canvas3d.resetCamera();
         ctx.canvas3d.requestDraw(true);
     });
     events.object.updated.subscribe(e => {

src/mol-plugin/skin/base/components/controls.scss

@@ -28,6 +28,9 @@
         text-align: right;
         padding: 0 $control-spacing; 
         color: color-lower-contrast($font-color, 15%);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         
         @include non-selectable;        
     }

src/mol-plugin/skin/base/components/viewport.scss

@@ -48,9 +48,9 @@
         margin-left: $control-spacing;
     }
 
-    .msp-btn-link, .msp-btn-link-toggle-on {
-        color: #eee;
-    }
+    // .msp-btn-link, .msp-btn-link-toggle-on {
+    //     color: #eee;
+    // }
 
     .msp-btn-link-toggle-off {
         color: $msp-btn-link-toggle-off-font-color;
@@ -91,3 +91,4 @@
     display: inline-block;
     color: $highlight-info-additional-font-color;
 }
+

src/mol-plugin/state.ts

@@ -11,6 +11,8 @@ import { PluginBehavior } from './behavior';
 import { CameraSnapshotManager } from './state/camera';
 import { PluginStateSnapshotManager } from './state/snapshots';
 import { RxEventHelper } from 'mol-util/rx-event-helper';
+import { Canvas3DParams } from 'mol-canvas3d/canvas3d';
+import { ParamDefinition } from 'mol-util/param-definition';
 export { PluginState }
 
 class PluginState {
@@ -43,14 +45,16 @@ class PluginState {
             behaviour: this.behaviorState.getSnapshot(),
             cameraSnapshots: this.cameraSnapshots.getStateSnapshot(),
             canvas3d: {
-                camera: this.plugin.canvas3d.camera.getSnapshot()
+                camera: this.plugin.canvas3d.camera.getSnapshot(),
+                viewport: this.plugin.canvas3d.props
             }
         };
     }
 
     async setSnapshot(snapshot: PluginState.Snapshot) {
-        // await this.plugin.runTask(this.behaviorState.setSnapshot(snapshot.behaviour));
+        await this.plugin.runTask(this.behaviorState.setSnapshot(snapshot.behaviour));
         await this.plugin.runTask(this.dataState.setSnapshot(snapshot.data));
+        this.plugin.canvas3d.setProps(snapshot.canvas3d.viewport || { })
         this.cameraSnapshots.setStateSnapshot(snapshot.cameraSnapshots);
         this.plugin.canvas3d.camera.setState(snapshot.canvas3d.camera);
         this.plugin.canvas3d.requestDraw(true);
@@ -86,7 +90,8 @@ namespace PluginState {
         behaviour: State.Snapshot,
         cameraSnapshots: CameraSnapshotManager.StateSnapshot,
         canvas3d: {
-            camera: Camera.Snapshot
+            camera: Camera.Snapshot,
+            viewport: ParamDefinition.Values<Canvas3DParams>
         }
     }
 }

src/mol-plugin/ui/viewport.tsx

@@ -33,6 +33,10 @@ export class ViewportControls extends PluginComponent {
         e.currentTarget.blur();
     }
 
+    hideSettings = () => {
+        this.setState({ isSettingsExpanded: false });
+    }
+
     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 })
@@ -40,14 +44,12 @@ export class ViewportControls extends PluginComponent {
 
     render() {
         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 className='msp-viewport-controls-buttons'>
+                <button className='msp-btn msp-btn-link' title='Reset Camera' onClick={this.toggleSettingsExpanded}><span className='msp-icon msp-icon-settings'/></button>
+                <button className='msp-btn msp-btn-link' onClick={this.resetCamera}><span className='msp-icon msp-icon-reset-scene'/></button>
             </div>
+            <div onMouseLeave={this.hideSettings} className='msp-viewport-controls-scene-options' style={{ display: this.state.isSettingsExpanded ? 'block' : 'none' }}>
+                <ParameterControls params={Canvas3DParams} values={this.state.settings} onChange={this.setSettings} />
             </div>
         </div>
     }