From c7e6fccea3cb51a1e3965eb6ea6d6eee7221cd2a Mon Sep 17 00:00:00 2001
From: David Sehnal <david.sehnal@gmail.com>
Date: Mon, 11 Feb 2019 13:45:56 +0100
Subject: [PATCH] wip: plugin layout
---
src/mol-plugin/ui/plugin.tsx | 48 ++++++++++++++++++++++++----------
src/mol-plugin/ui/viewport.tsx | 11 +++++++-
2 files changed, 44 insertions(+), 15 deletions(-)
diff --git a/src/mol-plugin/ui/plugin.tsx b/src/mol-plugin/ui/plugin.tsx
index 01166c0f6..9805b9fa8 100644
--- a/src/mol-plugin/ui/plugin.tsx
+++ b/src/mol-plugin/ui/plugin.tsx
@@ -33,22 +33,42 @@ export class Plugin extends React.Component<{ plugin: PluginContext }, {}> {
render() {
return <PluginReactContext.Provider value={this.props.plugin}>
- <div className='msp-plugin'>
- <div className='msp-plugin-content msp-layout-expanded'>
- <div className='msp-layout-hide-top'>
- {this.region('main', <ViewportWrapper />)}
- {this.region('left', <State />)}
- {this.region('right', <div className='msp-scrollable-container msp-right-controls'>
- <CurrentObject />
- <Controls />
- <CameraSnapshots />
- <StateSnapshots />
- </div>)}
- {this.region('bottom', <Log />)}
- </div>
+ <Layout />
+ </PluginReactContext.Provider>;
+ }
+}
+
+class Layout extends PluginComponent {
+ componentDidMount() {
+ this.subscribe(this.plugin.layout.updated, () => this.forceUpdate());
+ }
+
+ region(kind: 'left' | 'right' | 'bottom' | 'main', element: JSX.Element) {
+ return <div className={`msp-layout-region msp-layout-${kind}`}>
+ <div className='msp-layout-static'>
+ {element}
+ </div>
+ </div>;
+ }
+
+ render() {
+ const showControls = this.plugin.layout.latestState.showControls;
+
+ return <div className='msp-plugin'>
+ <div className='msp-plugin-content msp-layout-expanded'>
+ <div className={showControls ? 'msp-layout-hide-top' : 'msp-layout-hide-top msp-layout-hide-right msp-layout-hide-bottom msp-layout-hide-left'}>
+ {this.region('main', <ViewportWrapper />)}
+ {showControls && this.region('left', <State />)}
+ {showControls && this.region('right', <div className='msp-scrollable-container msp-right-controls'>
+ <CurrentObject />
+ <Controls />
+ <CameraSnapshots />
+ <StateSnapshots />
+ </div>)}
+ {showControls && this.region('bottom', <Log />)}
</div>
</div>
- </PluginReactContext.Provider>;
+ </div>;
}
}
diff --git a/src/mol-plugin/ui/viewport.tsx b/src/mol-plugin/ui/viewport.tsx
index 85eacd40a..04309aa3b 100644
--- a/src/mol-plugin/ui/viewport.tsx
+++ b/src/mol-plugin/ui/viewport.tsx
@@ -34,6 +34,10 @@ export class ViewportControls extends PluginComponent {
e.currentTarget.blur();
}
+ toggleControls = () => {
+ PluginCommands.Layout.Update.dispatch(this.plugin, { state: { showControls: !this.plugin.layout.latestState.showControls } });
+ }
+
setSettings = (p: { param: PD.Base<any>, name: string, value: any }) => {
PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: { [p.name]: p.value } });
}
@@ -56,6 +60,7 @@ export class ViewportControls extends PluginComponent {
// TODO: show some icons dimmed etc..
return <div className={'msp-viewport-controls'}>
<div className='msp-viewport-controls-buttons'>
+ <button className='msp-btn msp-btn-link' onClick={this.toggleControls} title='Show/Hide Controls'><span className='msp-icon msp-icon-tools'/></button>
<button className='msp-btn msp-btn-link' onClick={this.toggleSettingsExpanded}><span className='msp-icon msp-icon-settings'/></button>
<button className='msp-btn msp-btn-link' title='Reset Camera' onClick={this.resetCamera}><span className='msp-icon msp-icon-reset-scene'/></button>
</div>
@@ -81,7 +86,7 @@ export class Viewport extends PluginComponent<{ }, ViewportState> {
};
private handleResize = () => {
- this.plugin.canvas3d.handleResize();
+ this.plugin.canvas3d.handleResize();
}
componentDidMount() {
@@ -108,6 +113,10 @@ export class Viewport extends PluginComponent<{ }, ViewportState> {
if (buttons !== ButtonsType.Flag.Primary) return;
idHelper.select(x, y);
});
+
+ this.subscribe(this.plugin.layout.updated, () => {
+ setTimeout(this.handleResize, 50);
+ });
}
componentWillUnmount() {
--
GitLab