From 51fbb619e5d1e7f54a3a418281ae72890c1f15e8 Mon Sep 17 00:00:00 2001
From: David Sehnal <david.sehnal@gmail.com>
Date: Thu, 12 Mar 2020 21:14:20 +0100
Subject: [PATCH] UI customization via spec & tweaks
---
src/mol-plugin-ui/controls.tsx | 9 +++++----
src/mol-plugin-ui/plugin.tsx | 19 ++++++++++---------
src/mol-plugin/spec.ts | 6 ++++--
3 files changed, 19 insertions(+), 15 deletions(-)
diff --git a/src/mol-plugin-ui/controls.tsx b/src/mol-plugin-ui/controls.tsx
index 1264dd369..4ad21d2d6 100644
--- a/src/mol-plugin-ui/controls.tsx
+++ b/src/mol-plugin-ui/controls.tsx
@@ -45,6 +45,7 @@ export class TrajectoryViewportControls extends PluginUIComponent<{}, { show: bo
if (parents.has(m.sourceRef)) {
// do not show the controls if there are 2 models of the same trajectory present
this.setState({ show: false });
+ return;
}
parents.add(m.sourceRef);
@@ -262,15 +263,15 @@ export class LociLabels extends PluginUIComponent<{}, { entries: ReadonlyArray<L
}
}
-export class StructureToolsWrapper extends PluginUIComponent {
+export class DefaultStructureTools extends PluginUIComponent {
render() {
- return <div>
- <div className='msp-section-header'><Icon name='code' /> Structure Tools</div>
+ return <>
+ <div className='msp-section-header'><Icon name='tools' /> Structure Tools</div>
<StructureSourceControls />
<StructureSelectionControls />
<StructureComponentControls />
<StructureMeasurementsControls />
- </div>;
+ </>;
}
}
diff --git a/src/mol-plugin-ui/plugin.tsx b/src/mol-plugin-ui/plugin.tsx
index e5f3a25af..3a537fa6c 100644
--- a/src/mol-plugin-ui/plugin.tsx
+++ b/src/mol-plugin-ui/plugin.tsx
@@ -1,5 +1,5 @@
/**
- * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author David Sehnal <david.sehnal@gmail.com>
* @author Alexander Rose <alexander.rose@weirdbyte.de>
@@ -11,7 +11,7 @@ import { LogEntry } from '../mol-util/log-entry';
import * as React from 'react';
import { PluginContext } from '../mol-plugin/context';
import { PluginReactContext, PluginUIComponent } from './base';
-import { LociLabels, TrajectoryViewportControls, StateSnapshotViewportControls, AnimationViewportControls, StructureToolsWrapper } from './controls';
+import { LociLabels, TrajectoryViewportControls, StateSnapshotViewportControls, AnimationViewportControls, DefaultStructureTools } from './controls';
import { StateObjectActionSelect } from './state/actions';
import { BackgroundTaskProgress } from './task';
import { Viewport, ViewportControls } from './viewport';
@@ -105,8 +105,8 @@ 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;
+ const controls = this.plugin.spec.layout?.controls || { };
+ const viewport = this.plugin.spec.components?.viewport || DefaultViewport;
return <div className='msp-plugin'>
<div className={this.layoutClassName}>
@@ -124,17 +124,18 @@ class Layout extends PluginUIComponent {
export class ControlsWrapper extends PluginUIComponent {
render() {
+ const StructureTools = this.plugin.spec.components?.structureTools || DefaultStructureTools;
return <div className='msp-scrollable-container'>
<CurrentObject />
- {/* <AnimationControlsWrapper /> */}
- {/* <CameraSnapshots /> */}
- <StructureToolsWrapper />
+ <StructureTools />
</div>;
}
}
-export class ViewportWrapper extends PluginUIComponent {
+export class DefaultViewport extends PluginUIComponent {
render() {
+ const VPControls = this.plugin.spec.components?.viewportControls || ViewportControls;
+
return <>
<Viewport />
<div className='msp-viewport-top-left-controls'>
@@ -142,7 +143,7 @@ export class ViewportWrapper extends PluginUIComponent {
<TrajectoryViewportControls />
<StateSnapshotViewportControls />
</div>
- <ViewportControls />
+ <VPControls />
<BackgroundTaskProgress />
<div className='msp-highlight-toast-wrapper'>
<LociLabels />
diff --git a/src/mol-plugin/spec.ts b/src/mol-plugin/spec.ts
index 9ecda229b..e6ea6ddb4 100644
--- a/src/mol-plugin/spec.ts
+++ b/src/mol-plugin/spec.ts
@@ -22,10 +22,12 @@ interface PluginSpec {
layout?: {
initial?: Partial<PluginLayoutStateProps>,
controls?: PluginSpec.LayoutControls
- viewport?: React.ComponentClass
},
components?: {
- remoteState?: 'none' | 'default'
+ remoteState?: 'none' | 'default',
+ structureTools?: React.ComponentClass,
+ viewport?: React.ComponentClass,
+ viewportControls?: React.ComponentClass
},
config?: Map<PluginConfigItem, unknown>
}
--
GitLab