diff --git a/src/mol-plugin/skin/base/components/viewport.scss b/src/mol-plugin/skin/base/components/viewport.scss index a03f6020ff54bff550ab2169f1e7d5c4d20877ed..a6dd6f3e8cf3731d50c92bd97eb641f0d9d37816 100644 --- a/src/mol-plugin/skin/base/components/viewport.scss +++ b/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; } - diff --git a/src/mol-plugin/spec.ts b/src/mol-plugin/spec.ts index 970a6921e540ff1545e87f69ec52f3caef43ed21..7bf04bddd14148068cb7d80d093878dca51b88ca 100644 --- a/src/mol-plugin/spec.ts +++ b/src/mol-plugin/spec.ts @@ -20,6 +20,7 @@ interface PluginSpec { layout?: { initial?: Partial<PluginLayoutStateProps>, controls?: PluginSpec.LayoutControls + viewport?: React.ComponentClass } } diff --git a/src/mol-plugin/ui/plugin.tsx b/src/mol-plugin/ui/plugin.tsx index f13a8ec289cf62088607153cf4639cfdca68b55a..fc8cc6f2818bc93d828c676cccf20260eafbf772 100644 --- a/src/mol-plugin/ui/plugin.tsx +++ b/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)} diff --git a/src/mol-plugin/ui/viewport.tsx b/src/mol-plugin/ui/viewport.tsx index 539496b0d3e08d86863224c06c22e4d57ce185ce..1c034b06385ca7a0dbf4feb5c69afe8de6e5df23 100644 --- a/src/mol-plugin/ui/viewport.tsx +++ b/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>();