Skip to content
Snippets Groups Projects
Commit 59c528b2 authored by David Sehnal's avatar David Sehnal
Browse files

mol-plugin: viewport settings, tweaks

parent 61d617c5
Branches
Tags
No related merge requests found
...@@ -34,8 +34,10 @@ export const Canvas3DParams = { ...@@ -34,8 +34,10 @@ export const Canvas3DParams = {
// maxFps: PD.Numeric(30), // maxFps: PD.Numeric(30),
cameraMode: PD.Select('perspective', [['perspective', 'Perspective'], ['orthographic', 'Orthographic']]), cameraMode: PD.Select('perspective', [['perspective', 'Perspective'], ['orthographic', 'Orthographic']]),
backgroundColor: PD.Color(Color(0x000000)), backgroundColor: PD.Color(Color(0x000000)),
// TODO: make this an interval?
clipNear: PD.Numeric(1, { min: 1, max: 100, step: 1 }), clipNear: PD.Numeric(1, { min: 1, max: 100, step: 1 }),
clipFar: PD.Numeric(100, { 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 }), fogNear: PD.Numeric(50, { min: 1, max: 100, step: 1 }),
fogFar: PD.Numeric(100, { 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.' }), 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.' }),
......
...@@ -20,6 +20,8 @@ export function SyncRepresentationToCanvas(ctx: PluginContext) { ...@@ -20,6 +20,8 @@ export function SyncRepresentationToCanvas(ctx: PluginContext) {
if (!SO.isRepresentation3D(e.obj)) return; if (!SO.isRepresentation3D(e.obj)) return;
updateVisibility(e, e.obj.data); updateVisibility(e, e.obj.data);
ctx.canvas3d.add(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); ctx.canvas3d.requestDraw(true);
}); });
events.object.updated.subscribe(e => { events.object.updated.subscribe(e => {
......
...@@ -28,6 +28,9 @@ ...@@ -28,6 +28,9 @@
text-align: right; text-align: right;
padding: 0 $control-spacing; padding: 0 $control-spacing;
color: color-lower-contrast($font-color, 15%); color: color-lower-contrast($font-color, 15%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@include non-selectable; @include non-selectable;
} }
......
...@@ -48,9 +48,9 @@ ...@@ -48,9 +48,9 @@
margin-left: $control-spacing; margin-left: $control-spacing;
} }
.msp-btn-link, .msp-btn-link-toggle-on { // .msp-btn-link, .msp-btn-link-toggle-on {
color: #eee; // color: #eee;
} // }
.msp-btn-link-toggle-off { .msp-btn-link-toggle-off {
color: $msp-btn-link-toggle-off-font-color; color: $msp-btn-link-toggle-off-font-color;
...@@ -91,3 +91,4 @@ ...@@ -91,3 +91,4 @@
display: inline-block; display: inline-block;
color: $highlight-info-additional-font-color; color: $highlight-info-additional-font-color;
} }
...@@ -11,6 +11,8 @@ import { PluginBehavior } from './behavior'; ...@@ -11,6 +11,8 @@ import { PluginBehavior } from './behavior';
import { CameraSnapshotManager } from './state/camera'; import { CameraSnapshotManager } from './state/camera';
import { PluginStateSnapshotManager } from './state/snapshots'; import { PluginStateSnapshotManager } from './state/snapshots';
import { RxEventHelper } from 'mol-util/rx-event-helper'; import { RxEventHelper } from 'mol-util/rx-event-helper';
import { Canvas3DParams } from 'mol-canvas3d/canvas3d';
import { ParamDefinition } from 'mol-util/param-definition';
export { PluginState } export { PluginState }
class PluginState { class PluginState {
...@@ -43,14 +45,16 @@ class PluginState { ...@@ -43,14 +45,16 @@ class PluginState {
behaviour: this.behaviorState.getSnapshot(), behaviour: this.behaviorState.getSnapshot(),
cameraSnapshots: this.cameraSnapshots.getStateSnapshot(), cameraSnapshots: this.cameraSnapshots.getStateSnapshot(),
canvas3d: { canvas3d: {
camera: this.plugin.canvas3d.camera.getSnapshot() camera: this.plugin.canvas3d.camera.getSnapshot(),
viewport: this.plugin.canvas3d.props
} }
}; };
} }
async setSnapshot(snapshot: PluginState.Snapshot) { 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)); await this.plugin.runTask(this.dataState.setSnapshot(snapshot.data));
this.plugin.canvas3d.setProps(snapshot.canvas3d.viewport || { })
this.cameraSnapshots.setStateSnapshot(snapshot.cameraSnapshots); this.cameraSnapshots.setStateSnapshot(snapshot.cameraSnapshots);
this.plugin.canvas3d.camera.setState(snapshot.canvas3d.camera); this.plugin.canvas3d.camera.setState(snapshot.canvas3d.camera);
this.plugin.canvas3d.requestDraw(true); this.plugin.canvas3d.requestDraw(true);
...@@ -86,7 +90,8 @@ namespace PluginState { ...@@ -86,7 +90,8 @@ namespace PluginState {
behaviour: State.Snapshot, behaviour: State.Snapshot,
cameraSnapshots: CameraSnapshotManager.StateSnapshot, cameraSnapshots: CameraSnapshotManager.StateSnapshot,
canvas3d: { canvas3d: {
camera: Camera.Snapshot camera: Camera.Snapshot,
viewport: ParamDefinition.Values<Canvas3DParams>
} }
} }
} }
...@@ -33,6 +33,10 @@ export class ViewportControls extends PluginComponent { ...@@ -33,6 +33,10 @@ export class ViewportControls extends PluginComponent {
e.currentTarget.blur(); e.currentTarget.blur();
} }
hideSettings = () => {
this.setState({ isSettingsExpanded: false });
}
setSettings = (p: { param: PD.Base<any>, name: string, value: any }) => { setSettings = (p: { param: PD.Base<any>, name: string, value: any }) => {
this.plugin.canvas3d.setProps({ [p.name]: p.value }) this.plugin.canvas3d.setProps({ [p.name]: p.value })
this.setState({ settings: this.plugin.canvas3d.props }) this.setState({ settings: this.plugin.canvas3d.props })
...@@ -40,14 +44,12 @@ export class ViewportControls extends PluginComponent { ...@@ -40,14 +44,12 @@ export class ViewportControls extends PluginComponent {
render() { render() {
return <div className={'msp-viewport-controls'}> return <div className={'msp-viewport-controls'}>
<div className={'msp-row'}> <div className='msp-viewport-controls-buttons'>
<button className='msp-btn msp-btn-link' onClick={this.resetCamera}>↻ Camera</button> <button className='msp-btn msp-btn-link' title='Reset Camera' onClick={this.toggleSettingsExpanded}><span className='msp-icon msp-icon-settings'/></button>
<div> <button className='msp-btn msp-btn-link' onClick={this.resetCamera}><span className='msp-icon msp-icon-reset-scene'/></button>
<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 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>
</div> </div>
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment