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

mol-plugin: customuze UI layout in viewport params

parent 6f98549f
No related branches found
No related tags found
No related merge requests found
......@@ -69,7 +69,7 @@ class Layout extends PluginUIComponent {
const controls = (this.plugin.spec.layout && this.plugin.spec.layout.controls) || { };
const classList: string[] = []
if (controls.top === 'none' || !layout.showControls) {
if (controls.top === 'none' || !layout.showControls || layout.regionState.top === 'hidden') {
classList.push('msp-layout-hide-top')
}
......@@ -79,10 +79,11 @@ class Layout extends PluginUIComponent {
classList.push('msp-layout-collapse-left')
}
if (controls.right === 'none' || !layout.showControls) {
if (controls.right === 'none' || !layout.showControls || layout.regionState.right === 'hidden') {
classList.push('msp-layout-hide-right')
}
if (controls.bottom === 'none' || !layout.showControls) {
if (controls.bottom === 'none' || !layout.showControls || layout.regionState.bottom === 'hidden') {
classList.push('msp-layout-hide-bottom')
}
......
......@@ -6,7 +6,7 @@
*/
import * as React from 'react';
import { Canvas3DParams } from '../../mol-canvas3d/canvas3d';
import { Canvas3DParams, Canvas3DProps } from '../../mol-canvas3d/canvas3d';
import { PluginCommands } from '../../mol-plugin/commands';
import { ColorNames } from '../../mol-util/color/names';
import { ParameterMappingControl } from '../controls/parameters';
......@@ -15,6 +15,9 @@ import { PluginUIComponent } from '../base';
import { Color } from '../../mol-util/color';
import { ParamMapping } from '../../mol-util/param-mapping';
import { PluginContext } from '../../mol-plugin/context';
import { Mutable } from '../../mol-util/type-helpers';
import { produce } from 'immer';
import { StateTransform } from '../../mol-state';
export class SimpleSettingsControl extends PluginUIComponent {
componentDidMount() {
......@@ -28,6 +31,7 @@ export class SimpleSettingsControl extends PluginUIComponent {
}
const SimpleSettingsParams = {
layout: PD.MultiSelect<'sequence' | 'log' | 'left'>([], [['sequence', 'Sequence'], ['log', 'Log'], ['left', 'Left Panel']] as const),
spin: Canvas3DParams.trackball.params.spin,
camera: Canvas3DParams.cameraMode,
background: PD.MappedStatic('opaque', {
......@@ -44,9 +48,17 @@ const SimpleSettingsParams = {
type SimpleSettingsParams = typeof SimpleSettingsParams
const SimpleSettingsMapping = ParamMapping({
params: SimpleSettingsParams,
target(ctx: PluginContext) { return ctx.canvas3d?.props!; } })({
values(t, ctx) {
const renderer = t.renderer;
target(ctx: PluginContext) {
const layout: SimpleSettingsParams['layout']['defaultValue'] = [];
if (ctx.layout.state.regionState.top !== 'hidden') layout.push('sequence');
if (ctx.layout.state.regionState.bottom !== 'hidden') layout.push('log');
if (ctx.layout.state.regionState.left !== 'hidden') layout.push('left');
return { canvas: ctx.canvas3d?.props!, layout };
}
})({
values(props, ctx) {
const { canvas } = props;
const renderer = canvas.renderer;
let renderStyle: SimpleSettingsParams['renderStyle']['defaultValue'] = 'custom' as any;
if (renderer) {
......@@ -64,39 +76,55 @@ const SimpleSettingsMapping = ParamMapping({
}
return {
spin: !!t.trackball.spin,
camera: t.cameraMode,
background: (renderer.backgroundColor === ColorNames.white && t.transparentBackground)
layout: props.layout,
spin: !!canvas.trackball.spin,
camera: canvas.cameraMode,
background: (renderer.backgroundColor === ColorNames.white && canvas.transparentBackground)
? { name: 'transparent', params: { } }
: { name: 'opaque', params: { color: renderer.backgroundColor } },
renderStyle,
occlusion: t.postprocessing.occlusionEnable,
outline: t.postprocessing.outlineEnable,
fog: ctx.canvas3d ? t.cameraFog > 1 : false,
clipFar: t.cameraClipFar
occlusion: canvas.postprocessing.occlusionEnable,
outline: canvas.postprocessing.outlineEnable,
fog: ctx.canvas3d ? canvas.cameraFog > 1 : false,
clipFar: canvas.cameraClipFar
};
},
update(s, t) {
t.trackball.spin = s.spin;
t.cameraMode = s.camera;
t.transparentBackground = s.background.name === 'transparent';
t.renderer.backgroundColor = s.background.name === 'transparent' ? ColorNames.white : s.background.params.color;
update(s, props) {
const canvas = props.canvas as Mutable<Canvas3DProps>;
canvas.trackball.spin = s.spin;
canvas.cameraMode = s.camera;
canvas.transparentBackground = s.background.name === 'transparent';
canvas.renderer.backgroundColor = s.background.name === 'transparent' ? ColorNames.white : s.background.params.color;
switch (s.renderStyle) {
case 'flat': Object.assign(t.renderer, { lightIntensity: 0, ambientIntensity: 1, roughness: 0.4, metalness: 0 }); break;
case 'matte': Object.assign(t.renderer, { lightIntensity: 0.6, ambientIntensity: 0.4, roughness: 1, metalness: 0 }); break;
case 'glossy': Object.assign(t.renderer, { lightIntensity: 0.6, ambientIntensity: 0.4, roughness: 0.4, metalness: 0 }); break;
case 'metallic': Object.assign(t.renderer, { lightIntensity: 0.6, ambientIntensity: 0.4, roughness: 0.6, metalness: 0.4 }); break;
case 'flat': Object.assign(canvas.renderer, { lightIntensity: 0, ambientIntensity: 1, roughness: 0.4, metalness: 0 }); break;
case 'matte': Object.assign(canvas.renderer, { lightIntensity: 0.6, ambientIntensity: 0.4, roughness: 1, metalness: 0 }); break;
case 'glossy': Object.assign(canvas.renderer, { lightIntensity: 0.6, ambientIntensity: 0.4, roughness: 0.4, metalness: 0 }); break;
case 'metallic': Object.assign(canvas.renderer, { lightIntensity: 0.6, ambientIntensity: 0.4, roughness: 0.6, metalness: 0.4 }); break;
}
t.postprocessing.occlusionEnable = s.occlusion;
canvas.postprocessing.occlusionEnable = s.occlusion;
if (s.occlusion) {
t.postprocessing.occlusionBias = 0.5;
t.postprocessing.occlusionRadius = 64;
canvas.postprocessing.occlusionBias = 0.5;
canvas.postprocessing.occlusionRadius = 64;
}
t.postprocessing.outlineEnable = s.outline;
t.cameraFog = s.fog ? 50 : 0;
t.cameraClipFar = s.clipFar;
canvas.postprocessing.outlineEnable = s.outline;
canvas.cameraFog = s.fog ? 50 : 0;
canvas.cameraClipFar = s.clipFar;
props.layout = s.layout;
},
apply(settings, ctx) {
return PluginCommands.Canvas3D.SetSettings(ctx, { settings });
async apply(props, ctx) {
await PluginCommands.Canvas3D.SetSettings(ctx, { settings: props.canvas });
const hideLeft = props.layout.indexOf('left') < 0;
const state = produce(ctx.layout.state, s => {
s.regionState.top = props.layout.indexOf('sequence') >= 0 ? 'full' : 'hidden';
s.regionState.bottom = props.layout.indexOf('log') >= 0 ? 'full' : 'hidden';
s.regionState.left = hideLeft ? 'hidden' : ctx.behaviors.layout.leftPanelTabName.value === 'none' ? 'collapsed' : 'full';
});
await PluginCommands.Layout.Update(ctx, { state });
if (hideLeft) {
PluginCommands.State.SetCurrentObject(ctx, { state: ctx.state.dataState, ref: StateTransform.RootRef });
}
}
})
\ No newline at end of file
......@@ -11,20 +11,23 @@ import { PluginContext } from './context';
import { PluginCommands } from './commands';
const regionStateOptions = [
['full', 'Full'] as const,
['collapsed', 'Collapsed'] as const,
['hidden', 'Hidden'] as const,
];
['full', 'Full'],
['collapsed', 'Collapsed'],
['hidden', 'Hidden'],
] as const;
const simpleRegionStateOptions = [
['full', 'Full'],
['hidden', 'Hidden'],
] as const;
export type PluginLayoutControlsDisplay = 'outside' | 'portrait' | 'landscape' | 'reactive'
export const PluginLayoutStateParams = {
isExpanded: PD.Boolean(false),
showControls: PD.Boolean(true),
regionState: PD.Group({
left: PD.Select('full', regionStateOptions),
// TODO: support other region states
// right: PD.Select('full', regionStateOptions),
// top: PD.Select('full', regionStateOptions),
// bottom: PD.Select('full', regionStateOptions),
top: PD.Select('full', simpleRegionStateOptions),
right: PD.Select('full', simpleRegionStateOptions),
bottom: PD.Select('full', simpleRegionStateOptions),
}),
controlsDisplay: PD.Value<PluginLayoutControlsDisplay>('outside', { isHidden: true })
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment