From 40d539c4aaa311d27f158f4d079445ff04416389 Mon Sep 17 00:00:00 2001
From: Alexander Rose <alex.rose@rcsb.org>
Date: Tue, 13 Aug 2019 11:42:42 -0700
Subject: [PATCH] viewport ui improvements: mouse handling, config
---
.../skin/base/components/viewport.scss | 5 ++--
src/mol-plugin/spec.ts | 1 +
src/mol-plugin/ui/plugin.tsx | 4 +--
src/mol-plugin/ui/viewport.tsx | 27 ++++++++++++++-----
4 files changed, 26 insertions(+), 11 deletions(-)
diff --git a/src/mol-plugin/skin/base/components/viewport.scss b/src/mol-plugin/skin/base/components/viewport.scss
index a03f6020f..a6dd6f3e8 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 970a6921e..7bf04bddd 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 f13a8ec28..fc8cc6f28 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 539496b0d..1c034b063 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>();
--
GitLab