viewport ui improvements: mouse handling, config

src/mol-plugin/skin/base/components/viewport.scss

@@ -33,7 +33,7 @@
     position: absolute;
     right: $control-spacing;
     top: $control-spacing;
-    width: 290px;
+    width: 32px;
 }
 
 .msp-viewport-controls-buttons {
@@ -66,6 +66,8 @@
     overflow-y: auto;
     max-height: 400px;
     width: 290px;
+    right: 0px;
+    position: absolute;
     background: $control-background;
 
     .msp-control-group-wrapper:first-child {
@@ -98,4 +100,3 @@
     display: inline-block;
     color: $highlight-info-additional-font-color;
 }
-

src/mol-plugin/spec.ts

@@ -20,6 +20,7 @@ interface PluginSpec {
     layout?: {
         initial?: Partial<PluginLayoutStateProps>,
         controls?: PluginSpec.LayoutControls
+        viewport?: React.ComponentClass
     }
 }
 

src/mol-plugin/ui/plugin.tsx

@@ -23,7 +23,6 @@ import { UpdateTransformControl } from './state/update-transform';
 import { SequenceView } from './sequence';
 
 export class Plugin extends React.Component<{ plugin: PluginContext }, {}> {
-
     region(kind: 'left' | 'right' | 'bottom' | 'main', element: JSX.Element) {
         return <div className={`msp-layout-region msp-layout-${kind}`}>
             <div className='msp-layout-static'>
@@ -106,11 +105,12 @@ class Layout extends PluginUIComponent {
     render() {
         const layout = this.plugin.layout.state;
         const controls = (this.plugin.spec.layout && this.plugin.spec.layout.controls) || { };
+        const viewport = (this.plugin.spec.layout && this.plugin.spec.layout.viewport) || ViewportWrapper;
 
         return <div className='msp-plugin'>
             <div className={this.layoutClassName}>
                 <div className={this.layoutVisibilityClassName}>
-                    {this.region('main', ViewportWrapper)}
+                    {this.region('main', viewport)}
                     {layout.showControls && controls.top !== 'none' && this.region('top', controls.top || SequenceView)}
                     {layout.showControls && controls.left !== 'none' && this.region('left', controls.left || State)}
                     {layout.showControls && controls.right !== 'none' && this.region('right', controls.right || ControlsWrapper)}

src/mol-plugin/ui/viewport.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author David Sehnal <david.sehnal@gmail.com>
@@ -16,13 +16,17 @@ import { ControlGroup, IconButton } from './controls/common';
 import { resizeCanvas } from '../../mol-canvas3d/util';
 import { Interactivity } from '../util/interactivity';
 
-interface ViewportState {
-    noWebGl: boolean
+interface ViewportControlsState {
+    isSettingsExpanded: boolean
 }
 
-export class ViewportControls extends PluginUIComponent<{}, { isSettingsExpanded: boolean }> {
+interface ViewportControlsProps {
+    hideSettingsIcon?: boolean
+}
+
+export class ViewportControls extends PluginUIComponent<ViewportControlsProps, ViewportControlsState> {
     state = {
-        isSettingsExpanded: false
+        isSettingsExpanded: false,
     }
 
     resetCamera = () => {
@@ -64,13 +68,18 @@ export class ViewportControls extends PluginUIComponent<{}, { isSettingsExpanded
         return <IconButton icon={name} toggleState={isOn} onClick={onClick} title={title} />;
     }
 
+    onMouseMove = (e: React.MouseEvent) => {
+        // ignore mouse moves when no button is held
+        if (e.buttons === 0) e.stopPropagation()
+    }
+
     render() {
-        return <div className={'msp-viewport-controls'}>
+        return <div className={'msp-viewport-controls'} onMouseMove={this.onMouseMove}>
             <div className='msp-viewport-controls-buttons'>
                 {this.icon('reset-scene', this.resetCamera, 'Reset Camera')}<br/>
                 {this.icon('tools', this.toggleControls, 'Toggle Controls', this.plugin.layout.state.showControls)}<br/>
                 {this.icon('expand-layout', this.toggleExpanded, 'Toggle Expanded', this.plugin.layout.state.isExpanded)}<br />
-                {this.icon('settings', this.toggleSettingsExpanded, 'Settings', this.state.isSettingsExpanded)}<br/>
+                {!this.props.hideSettingsIcon && this.icon('settings', this.toggleSettingsExpanded, 'Settings', this.state.isSettingsExpanded)}<br/>
             </div>
             {this.state.isSettingsExpanded && <div className='msp-viewport-controls-scene-options'>
                 <ControlGroup header='Layout' initialExpanded={true}>
@@ -87,6 +96,10 @@ export class ViewportControls extends PluginUIComponent<{}, { isSettingsExpanded
     }
 }
 
+interface ViewportState {
+    noWebGl: boolean
+}
+
 export class Viewport extends PluginUIComponent<{ }, ViewportState> {
     private container = React.createRef<HTMLDivElement>();
     private canvas = React.createRef<HTMLCanvasElement>();