wip: plugin layout

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>;
     }
 }
 

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() {