diff --git a/src/mol-canvas3d/canvas3d.ts b/src/mol-canvas3d/canvas3d.ts
index 0e351df9be98e967c356ba89f564dddd94dea14d..2914b1ab8a6a7dfe1d4048989c9f6f591a0ad1b5 100644
--- a/src/mol-canvas3d/canvas3d.ts
+++ b/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.' }),
diff --git a/src/mol-plugin/behavior/static/representation.ts b/src/mol-plugin/behavior/static/representation.ts
index 5bc71d9fef1f82656404cc046d3f79f42e21f94b..a896996419054fe5290b6b75209c65f0765a5718 100644
--- a/src/mol-plugin/behavior/static/representation.ts
+++ b/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 => {
diff --git a/src/mol-plugin/skin/base/components/controls.scss b/src/mol-plugin/skin/base/components/controls.scss
index 7157b5f3306ec480ca8ea7b6686c4d09bddc7eef..835a585261bff9f9637062e21a414a1154ea924c 100644
--- a/src/mol-plugin/skin/base/components/controls.scss
+++ b/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;
}
diff --git a/src/mol-plugin/skin/base/components/viewport.scss b/src/mol-plugin/skin/base/components/viewport.scss
index 2cd9b9abd48a286deb1cd23f686c647c9f51e3f2..c8123e2f1870928fa462806de1a4d7f2bcdcd25b 100644
--- a/src/mol-plugin/skin/base/components/viewport.scss
+++ b/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;
}
+
diff --git a/src/mol-plugin/state.ts b/src/mol-plugin/state.ts
index 489c9477d831e9644ea3eb4e9a1fcc520cb032d1..a23cbcf603795ba1014fcc6d65810867d3955cc6 100644
--- a/src/mol-plugin/state.ts
+++ b/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>
}
}
}
diff --git a/src/mol-plugin/ui/viewport.tsx b/src/mol-plugin/ui/viewport.tsx
index 8ea152322bf22ad517ec12a28ee02450b7f85011..2ca33df42104d6c9ced5d3e2944af44653575e79 100644
--- a/src/mol-plugin/ui/viewport.tsx
+++ b/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>
+ <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>
}