From acf13fa46f0ee9c9b02d7f6f6020ef745c184145 Mon Sep 17 00:00:00 2001
From: dsehnal <david.sehnal@gmail.com>
Date: Fri, 5 Mar 2021 00:33:00 +0100
Subject: [PATCH] split plugin context (wip)
---
package-lock.json | Bin 1184626 -> 1202055 bytes
package.json | 2 +-
src/apps/docking-viewer/index.ts | 56 ++++-----
src/apps/viewer/index.ts | 70 ++++++------
src/cli/state-docs/index.ts | 1 -
src/examples/alpha-orbitals/index.ts | 32 +++---
src/examples/basic-wrapper/index.ts | 17 ++-
src/examples/lighting/index.ts | 14 ++-
src/examples/proteopedia-wrapper/index.ts | 10 +-
.../proteopedia-wrapper/ui/controls.tsx | 4 +-
src/mol-plugin-ui/base.tsx | 10 +-
src/mol-plugin-ui/context.ts | 40 +++++++
src/mol-plugin-ui/controls/parameters.tsx | 4 +-
src/{mol-plugin => mol-plugin-ui}/index.ts | 14 +--
src/mol-plugin-ui/plugin.tsx | 11 +-
src/mol-plugin-ui/spec.ts | 100 +++++++++++++++++
.../viewport/simple-settings.tsx | 10 +-
src/mol-plugin/context.ts | 50 +++------
src/mol-plugin/layout.ts | 4 +-
src/mol-plugin/spec.ts | 106 ++----------------
src/mol-plugin/util/toast.ts | 6 +-
21 files changed, 296 insertions(+), 265 deletions(-)
create mode 100644 src/mol-plugin-ui/context.ts
rename src/{mol-plugin => mol-plugin-ui}/index.ts (63%)
create mode 100644 src/mol-plugin-ui/spec.ts
diff --git a/package-lock.json b/package-lock.json
index d2e7d63268fff4f1f9d7a7c3db13fcb269dc59e8..ebc7133de32cbf488cf1755857f5be46fa759a44 100644
GIT binary patch
delta 4212
zcmcguYitx%6wck5-JQ9+Gdt6FyW6r$Nwl;;rR5<eWvgA=HC<SKbcGn(1;Kz7C<LUI
zAJk|pqy#HB^k{0eK2jAFRu*!J&nnUys?aDP@dYsvMG!0gkN~pY+1eJw?$(*aA166?
z=G=3?^SI}J7rU!k_W0X&JUz|wR!4|~A3roZ_VOhn*<#CtxiU8y1_bL&=#n`Z{+y;Z
zLpR5#LgYo{Bwmjtdb@Oua*LNPO>DaTpc0*RXrf9S#}x?3oNG*{n&rY1jVAI@O3L={
z#<q+0oGh^u_bFFmccl5ON}t<^MMMUF4n_lKPMG2AO;}0{ckg*K2a!!!fXHLm3ST~K
zb-+BCbB>9c9pj{BkK>u~W1!~={3^IJQ3+{1*9Po6PJABQo|D*urG?a8OpnHX+iD@<
zqXJuGkiZ{OlIWF~OrL7Svk~$3=7aZ5?15SZ?S@z@PLB>;cADZE8MvI>ku!Sf>U^H$
z#hi)CLfDBU)|(1PR6YwLd8nMN6nK*0$Pk1u%crcMAZfd{P5VV#Ipi|MjhH4UkEh*_
zZ1iNiR?*^8Cv=IZi0tljFkljRpTURQOVLVZBhdQ==2+8!X>wA~#eEXITZ7YJupjfJ
z=TbQ|bl`nAgVsLVXty2Znc#UlN>7d$>?)Gz5g9G#K~ho9ICe-1gS|Q(*`QzLo$)-v
z@Haa>kc!T5+VAY~xk{ruGZAmrJgAA=jCQ%u4+xZ8WCgFx6^z~RTAknP8>%y9b&hdt
zslfPZNcT)cpY!0zN9N?m!0CKe&HgCnhPqgpgDh}rHWKOkx1#eV?Y9}W6(lb)$VJT2
z-a@nwX{tzm|2A=eaC8cipehwP;q(D~CEg3{bSnf}d4(RFigubc6L}ml%xl3ex}_9_
zcwlOF;wosDh_VPxJbW+*r6n&i4fo=l(d@9MS81dVPcp?X!`m3s0WZomX}CpT>Nu_$
zMBK=w-GyI=uUQ!lR-jEBC{C9Dt#`A`Bpl>g5a7NC@$`#IRL2i5QxflLnO=>Un3!-(
zcqV2h7A96Yy;|739NcEUbm%#{SS6)^;*m0H9tho4vSE?0X@#%4vT~)*w{ZQkSrxNp
zG%eZS_lIf%_m+p2RQcCc1{;f;Ry?|}aqaxTg2vLd3w$A8sB}inx@ouhSFc;|dt}3!
z;Od4Z|NQ!jz=Or*P`)4K!f7g4TRQg(v~$1stXZ4tVtbF6(_U+LYqvv&RfpB0k>@d`
z{WUckCKaoTz}G8#py5+CA-pF<EBtcABEcuswlt#TmC@JV5$j&k=WG>DiOxPGAm}<S
zW<sP33&ed!h}QQ`wLrra+XOQAD}nA>hMNWGiHSCF6|z~<x!I95PPo*&3V(+5VpF37
zCnt|$%YeGY*a2k~XabF_!G}bBn1EqYX~#yqlG6{Y?QD1yn3l9D#Cy*3pNq+mM3wW^
z*SiY;R7)-l2K2ZhZD(y7b0{$B4(xAYP;?`rnGhe8@tIf9g74(@Wu7*-;#W9*dx7nZ
zKg^6eWQ?NAfN(ZSrMuej9VR1=Z=xBL(Tsc}SckcVtTS0d0pG+VD5DIw7{N8dAg;@z
ztUc%3Y4~IO4Kk3$5nA!@R3qzUoMQ+%1DQr2>c$rgd0~XaLif24n|hJsN*2huiVTrm
zxIovXiMQnld2zpi%Zz~2$jo)qSf-4Sq#@&l8Kyn;M!*emo+T8|(KpexRE^Rg%4m?s
zVx-%Kc~IdE<G|0V`$7+%YGfQ}gh~FVS6FnFlfdml9>ev}I9AYXBzBEaQO2n1bxs%B
nFo64YHbYDB7-nK)VrL>Tk(oGX@R(A6-~Y#{Xj8Fz>HEI`edw~5
delta 1559
zcmZ{kZD?C%6vsI?H}~G0o8%^}>#`)ZVPmXyb{1AG#kxgdy3G#@9q6FdDzl)(E*1Qy
zA3FWei5kPM=Cm@f4iRK-eF^q}&Mqi*U3FTh$ZT9UCi8_(7hh%(ZS}b~Cb^dR;lRDm
z{h$AHp7WgF9T?gD%UioLufn#mY^RI<nDZLr@-~mz+^XcB@UL)g=*)(o`PsCRD}ME)
zWX1|XZX3k)VD=jkiv5kD+)oQ1Bagm`Xs?-p!fm--SHE=g@H^O6k`+&2&g}pE8S}^M
z-PAXVm^->ukSISUvX$lM6`qyhVVMsibjj2kfB@kY>|*isn~P>21f84Cq6e}&;9fdC
zg$4;_fCgvqOg0S9ad!y(62BgS`(!hJ*2jrCTvOV(?-crJ@2wD|p)c@|5cg7i4t;cV
z6ZlJM)>kdt2)eyx`OV9_H^a9s8lFNg*I&R0Q2Zop;mIbLbWyqm6yAFoHL=>D)KT9z
zxWn=`>u1)m?~0>2VahL|k!^vr_!i(#TOlf$i5Zm}?|@Ha>OLuJ6W7q?D7HNbKKec>
z1t{>H&rg|+pi!(2-mtW8O6)AxZKhXr+I*8zL&cq*+o`w~3|_bg_5-C7;Nv~NV{OIN
zpmY~_`N$H6Ty_tHBvLxQ`Tk0j7nX5LNi6R3psk2>K$w^JK|~@^k%vbl-CdDHd3Zm3
zAn{AWRiQ)!s8p<j8p=mN=Bo$bBbgT-hXe9JDg`1W5iSwdyIX`JLgiFSJNy{sTi`=_
z<y|#Qbp=fwm_M)a{CUrin_j-l@KO9PkIJVndM1yR-ZMX-hhl@MiJ|lWW%5{W7N@n`
zx#_J6#gAi{GJmRWPP~AJHOh1b)>0+IJU6Y133gYq+O3Z2W_Mvv)tiNPhrTM)8tq<J
zRb&@H#SzpgZ~`?mUi9UTUyE0ao9N<t2>qYlp#E`r9W_6sx0><ApgH^NoP7>TjNx{R
zh(}jtve>CbTD4e4r?IkYdoI1wA?DF)Lh?2Ab7lf(rOHu^tO_+e`W_x~Ro5)wHUf(_
zKJ8Fe0kod-R&|?fhWPC%ywfQxlj)Zoo&v+LUDb_~SnxODsG&^UD*j0DH(uJ>qK$5D
zfJgY!B7QBb|GihER8;f={_ONC!}$PIdS;ZtyuT!5F%`EsYA$n_boktWFA{u>QoI&x
zY4};x=+Xx96SC)2_!$-M+LdaFWxQT=I9GtW+p)+^s-AFH6D{zgHc%vhTC{duM@AcL
zr{*5m`rlcfcif2up7<@<cP6eUNU<awb2M(CC!~w;itvf>i!ek4xF-}$cG@`dk*9*!
GFaHBAXg&l0
diff --git a/package.json b/package.json
index 6348138cc..b2ec6cd34 100644
--- a/package.json
+++ b/package.json
@@ -144,7 +144,7 @@
"react-dom": "^17.0.1",
"rxjs": "^6.6.3",
"swagger-ui-dist": "^3.37.2",
- "tslib": "^2.0.3",
+ "tslib": "^2.1.0",
"util.promisify": "^1.0.1",
"xhr2": "^0.2.0"
}
diff --git a/src/apps/docking-viewer/index.ts b/src/apps/docking-viewer/index.ts
index c14aa2504..c22b42be4 100644
--- a/src/apps/docking-viewer/index.ts
+++ b/src/apps/docking-viewer/index.ts
@@ -5,31 +5,32 @@
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
-import '../../mol-util/polyfill';
-import { createPlugin } from '../../mol-plugin';
-import { DefaultPluginSpec } from '../../mol-plugin/spec';
-import './index.html';
-import { PluginContext } from '../../mol-plugin/context';
+import { Structure } from '../../mol-model/structure';
+import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
+import { PluginStateObject as PSO, PluginStateTransform } from '../../mol-plugin-state/objects';
+import { createPlugin } from '../../mol-plugin-ui';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
+import { DefaultPluginUISpec, PluginUISpec } from '../../mol-plugin-ui/spec';
+import { PluginBehaviors } from '../../mol-plugin/behavior';
import { PluginCommands } from '../../mol-plugin/commands';
-import { PluginSpec } from '../../mol-plugin/spec';
import { PluginConfig } from '../../mol-plugin/config';
-import { ObjectKeys } from '../../mol-util/type-helpers';
-import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
-import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
-import { Structure } from '../../mol-model/structure';
-import { PluginStateTransform, PluginStateObject as PSO } from '../../mol-plugin-state/objects';
-import { ParamDefinition as PD } from '../../mol-util/param-definition';
-import { Task } from '../../mol-task';
+import { PluginSpec } from '../../mol-plugin/spec';
import { StateObject } from '../../mol-state';
-import { ViewportComponent, StructurePreset, ShowButtons } from './viewport';
-import { PluginBehaviors } from '../../mol-plugin/behavior';
-import { ColorNames } from '../../mol-util/color/names';
+import { Task } from '../../mol-task';
import { Color } from '../../mol-util/color';
+import { ColorNames } from '../../mol-util/color/names';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import '../../mol-util/polyfill';
+import { ObjectKeys } from '../../mol-util/type-helpers';
+import './index.html';
+import { ShowButtons, StructurePreset, ViewportComponent } from './viewport';
require('mol-plugin-ui/skin/light.scss');
export { PLUGIN_VERSION as version } from '../../mol-plugin/version';
-export { setProductionMode, setDebugMode } from '../../mol-util/debug';
+export { setDebugMode, setProductionMode } from '../../mol-util/debug';
+export { Viewer as DockingViewer };
const DefaultViewerOptions = {
extensions: ObjectKeys({}),
@@ -53,7 +54,7 @@ const DefaultViewerOptions = {
};
class Viewer {
- plugin: PluginContext
+ plugin: PluginUIContext
constructor(elementOrId: string | HTMLElement, colors = [Color(0x992211), Color(0xDDDDDD)], showButtons = true) {
const o = { ...DefaultViewerOptions, ...{
@@ -70,10 +71,10 @@ class Viewer {
viewportShowSelectionMode: false,
viewportShowAnimation: false,
} };
- const defaultSpec = DefaultPluginSpec();
+ const defaultSpec = DefaultPluginUISpec();
- const spec: PluginSpec = {
- actions: [...defaultSpec.actions],
+ const spec: PluginUISpec = {
+ actions: defaultSpec.actions,
behaviors: [
PluginSpec.Behavior(PluginBehaviors.Representation.HighlightLoci, { mark: false }),
PluginSpec.Behavior(PluginBehaviors.Representation.DefaultLociLabelProvider),
@@ -83,7 +84,7 @@ class Viewer {
PluginSpec.Behavior(PluginBehaviors.CustomProps.Interactions),
PluginSpec.Behavior(PluginBehaviors.CustomProps.SecondaryStructure),
],
- animations: [...defaultSpec.animations || []],
+ animations: defaultSpec.animations,
customParamEditors: defaultSpec.customParamEditors,
layout: {
initial: {
@@ -91,15 +92,15 @@ class Viewer {
showControls: o.layoutShowControls,
controlsDisplay: o.layoutControlsDisplay,
},
+ },
+ components: {
+ ...defaultSpec.components,
controls: {
- ...defaultSpec.layout && defaultSpec.layout.controls,
+ ...defaultSpec.components?.controls,
top: o.layoutShowSequence ? undefined : 'none',
bottom: o.layoutShowLog ? undefined : 'none',
left: o.layoutShowLeftPanel ? undefined : 'none',
- }
- },
- components: {
- ...defaultSpec.components,
+ },
remoteState: o.layoutShowRemoteState ? 'default' : 'none',
viewport: {
view: ViewportComponent
@@ -210,4 +211,3 @@ const MergeStructures = PluginStateTransform.BuiltIn({
});
(window as any).DockingViewer = Viewer;
-export { Viewer as DockingViewer };
\ No newline at end of file
diff --git a/src/apps/viewer/index.ts b/src/apps/viewer/index.ts
index 2b68a525e..3d25b6f43 100644
--- a/src/apps/viewer/index.ts
+++ b/src/apps/viewer/index.ts
@@ -5,43 +5,43 @@
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
-import '../../mol-util/polyfill';
-import { createPlugin } from '../../mol-plugin';
-import { DefaultPluginSpec } from '../../mol-plugin/spec';
-import './index.html';
-import './embedded.html';
-import './favicon.ico';
-import { PluginContext } from '../../mol-plugin/context';
-import { PluginCommands } from '../../mol-plugin/commands';
-import { PluginSpec } from '../../mol-plugin/spec';
-import { DownloadStructure, PdbDownloadProvider } from '../../mol-plugin-state/actions/structure';
-import { PluginConfig } from '../../mol-plugin/config';
-import { CellPack } from '../../extensions/cellpack';
-import { RCSBAssemblySymmetry, RCSBValidationReport } from '../../extensions/rcsb';
-import { PDBeStructureQualityReport } from '../../extensions/pdbe';
-import { Asset } from '../../mol-util/assets';
-import { ObjectKeys } from '../../mol-util/type-helpers';
-import { PluginState } from '../../mol-plugin/state';
-import { DownloadDensity } from '../../mol-plugin-state/actions/volume';
-import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
-import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
import { ANVILMembraneOrientation } from '../../extensions/anvil/behavior';
+import { CellPack } from '../../extensions/cellpack';
import { DnatcoConfalPyramids } from '../../extensions/dnatco';
import { G3DFormat, G3dProvider } from '../../extensions/g3d/format';
+import { Mp4Export } from '../../extensions/mp4-export';
+import { PDBeStructureQualityReport } from '../../extensions/pdbe';
+import { RCSBAssemblySymmetry, RCSBValidationReport } from '../../extensions/rcsb';
+import { DownloadStructure, PdbDownloadProvider } from '../../mol-plugin-state/actions/structure';
+import { DownloadDensity } from '../../mol-plugin-state/actions/volume';
+import { StructureRepresentationPresetProvider } from '../../mol-plugin-state/builder/structure/representation-preset';
import { DataFormatProvider } from '../../mol-plugin-state/formats/provider';
+import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
import { BuildInVolumeFormat } from '../../mol-plugin-state/formats/volume';
-import { Color } from '../../mol-util/color';
-import { StateObjectSelector } from '../../mol-state';
+import { createVolumeRepresentationParams } from '../../mol-plugin-state/helpers/volume-representation-params';
import { PluginStateObject } from '../../mol-plugin-state/objects';
import { StateTransforms } from '../../mol-plugin-state/transforms';
-import { createVolumeRepresentationParams } from '../../mol-plugin-state/helpers/volume-representation-params';
-import { Mp4Export } from '../../extensions/mp4-export';
-import { StructureRepresentationPresetProvider } from '../../mol-plugin-state/builder/structure/representation-preset';
+import { createPlugin } from '../../mol-plugin-ui';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
+import { DefaultPluginUISpec, PluginUISpec } from '../../mol-plugin-ui/spec';
+import { PluginCommands } from '../../mol-plugin/commands';
+import { PluginConfig } from '../../mol-plugin/config';
+import { PluginSpec } from '../../mol-plugin/spec';
+import { PluginState } from '../../mol-plugin/state';
+import { StateObjectSelector } from '../../mol-state';
+import { Asset } from '../../mol-util/assets';
+import { Color } from '../../mol-util/color';
+import '../../mol-util/polyfill';
+import { ObjectKeys } from '../../mol-util/type-helpers';
+import './embedded.html';
+import './favicon.ico';
+import './index.html';
require('mol-plugin-ui/skin/light.scss');
export { PLUGIN_VERSION as version } from '../../mol-plugin/version';
-export { setProductionMode, setDebugMode } from '../../mol-util/debug';
+export { setDebugMode, setProductionMode } from '../../mol-util/debug';
const CustomFormats = [
['g3d', G3dProvider] as const
@@ -86,14 +86,14 @@ const DefaultViewerOptions = {
type ViewerOptions = typeof DefaultViewerOptions;
export class Viewer {
- plugin: PluginContext
+ plugin: PluginUIContext
constructor(elementOrId: string | HTMLElement, options: Partial<ViewerOptions> = {}) {
const o = { ...DefaultViewerOptions, ...options };
- const defaultSpec = DefaultPluginSpec();
+ const defaultSpec = DefaultPluginUISpec();
- const spec: PluginSpec = {
- actions: [...defaultSpec.actions],
+ const spec: PluginUISpec = {
+ actions: defaultSpec.actions,
behaviors: [
...defaultSpec.behaviors,
...o.extensions.map(e => Extensions[e]),
@@ -107,15 +107,15 @@ export class Viewer {
showControls: o.layoutShowControls,
controlsDisplay: o.layoutControlsDisplay,
},
+ },
+ components: {
+ ...defaultSpec.components,
controls: {
- ...defaultSpec.layout && defaultSpec.layout.controls,
+ ...defaultSpec.components?.controls,
top: o.layoutShowSequence ? undefined : 'none',
bottom: o.layoutShowLog ? undefined : 'none',
left: o.layoutShowLeftPanel ? undefined : 'none',
- }
- },
- components: {
- ...defaultSpec.components,
+ },
remoteState: o.layoutShowRemoteState ? 'default' : 'none',
},
config: [
diff --git a/src/cli/state-docs/index.ts b/src/cli/state-docs/index.ts
index 36ed9a903..287e571c3 100644
--- a/src/cli/state-docs/index.ts
+++ b/src/cli/state-docs/index.ts
@@ -18,7 +18,6 @@ _.StateTransforms.Data.Download.id;
// Empty plugin context
const ctx = new PluginContext({
- actions: [],
behaviors: []
});
diff --git a/src/examples/alpha-orbitals/index.ts b/src/examples/alpha-orbitals/index.ts
index 97c766b95..645ab2e4d 100644
--- a/src/examples/alpha-orbitals/index.ts
+++ b/src/examples/alpha-orbitals/index.ts
@@ -4,25 +4,25 @@
* @author David Sehnal <david.sehnal@gmail.com>
*/
+import { BehaviorSubject } from 'rxjs';
+import { debounceTime, skip } from 'rxjs/operators';
+import { AlphaOrbital, Basis } from '../../extensions/alpha-orbitals/data-model';
import { SphericalBasisOrder } from '../../extensions/alpha-orbitals/spherical-functions';
import { BasisAndOrbitals, CreateOrbitalDensityVolume, CreateOrbitalRepresentation3D, CreateOrbitalVolume, StaticBasisAndOrbitals } from '../../extensions/alpha-orbitals/transforms';
-import { createPluginAsync } from '../../mol-plugin';
-import { DefaultPluginSpec } from '../../mol-plugin/spec';
+import { canComputeGrid3dOnGPU } from '../../mol-gl/compute/grid3d';
import { PluginStateObject } from '../../mol-plugin-state/objects';
+import { createPluginAsync } from '../../mol-plugin-ui';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
+import { PluginCommands } from '../../mol-plugin/commands';
import { PluginConfig } from '../../mol-plugin/config';
-import { PluginContext } from '../../mol-plugin/context';
import { StateObjectSelector, StateTransformer } from '../../mol-state';
import { Color } from '../../mol-util/color';
import { ColorNames } from '../../mol-util/color/names';
import { ParamDefinition } from '../../mol-util/param-definition';
import { mountControls } from './controls';
import { DemoMoleculeSDF, DemoOrbitals } from './example-data';
-import { BehaviorSubject } from 'rxjs';
-import { debounceTime, skip } from 'rxjs/operators';
import './index.html';
-import { Basis, AlphaOrbital } from '../../extensions/alpha-orbitals/data-model';
-import { PluginCommands } from '../../mol-plugin/commands';
-import { canComputeGrid3dOnGPU } from '../../mol-gl/compute/grid3d';
require('mol-plugin-ui/skin/light.scss');
interface DemoInput {
@@ -50,10 +50,10 @@ type Selectors = {
}
export class AlphaOrbitalsExample {
- plugin: PluginContext;
+ plugin: PluginUIContext;
async init(target: string | HTMLElement) {
- const defaultSpec = DefaultPluginSpec();
+ const defaultSpec = DefaultPluginUISpec();
this.plugin = await createPluginAsync(typeof target === 'string' ? document.getElementById(target)! : target, {
...defaultSpec,
layout: {
@@ -61,15 +61,13 @@ export class AlphaOrbitalsExample {
isExpanded: false,
showControls: false
},
- controls: { left: 'none', right: 'none', top: 'none', bottom: 'none' },
},
components: {
- viewport: {
- canvas3d: {
- camera: {
- helper: { axes: { name: 'off', params: { } } }
- }
- }
+ controls: { left: 'none', right: 'none', top: 'none', bottom: 'none' },
+ },
+ canvas3d: {
+ camera: {
+ helper: { axes: { name: 'off', params: { } } }
}
},
config: [
diff --git a/src/examples/basic-wrapper/index.ts b/src/examples/basic-wrapper/index.ts
index 8345a5df8..68f870873 100644
--- a/src/examples/basic-wrapper/index.ts
+++ b/src/examples/basic-wrapper/index.ts
@@ -4,39 +4,36 @@
* @author David Sehnal <david.sehnal@gmail.com>
*/
+import { PDBeStructureQualityReport } from '../../extensions/pdbe';
import { EmptyLoci } from '../../mol-model/loci';
import { StructureSelection } from '../../mol-model/structure';
-import { createPlugin } from '../../mol-plugin';
-import { DefaultPluginSpec } from '../../mol-plugin/spec';
import { AnimateModelIndex } from '../../mol-plugin-state/animation/built-in/model-index';
import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
+import { createPlugin } from '../../mol-plugin-ui';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
import { PluginCommands } from '../../mol-plugin/commands';
-import { PluginContext } from '../../mol-plugin/context';
import { Script } from '../../mol-script/script';
+import { Asset } from '../../mol-util/assets';
import { Color } from '../../mol-util/color';
import { StripedResidues } from './coloring';
import { CustomToastMessage } from './controls';
import './index.html';
import { buildStaticSuperposition, dynamicSuperpositionTest, StaticSuperpositionTestData } from './superposition';
-import { PDBeStructureQualityReport } from '../../extensions/pdbe';
-import { Asset } from '../../mol-util/assets';
require('mol-plugin-ui/skin/light.scss');
type LoadParams = { url: string, format?: BuiltInTrajectoryFormat, isBinary?: boolean, assemblyId?: string }
class BasicWrapper {
- plugin: PluginContext;
+ plugin: PluginUIContext;
init(target: string | HTMLElement) {
this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
- ...DefaultPluginSpec(),
+ ...DefaultPluginUISpec(),
layout: {
initial: {
isExpanded: false,
showControls: false
- },
- controls: {
- // left: 'none'
}
},
components: {
diff --git a/src/examples/lighting/index.ts b/src/examples/lighting/index.ts
index ec6cd8a03..188f99ab9 100644
--- a/src/examples/lighting/index.ts
+++ b/src/examples/lighting/index.ts
@@ -5,13 +5,13 @@
*/
import { Canvas3DProps } from '../../mol-canvas3d/canvas3d';
-import { createPlugin } from '../../mol-plugin';
-import { DefaultPluginSpec } from '../../mol-plugin/spec';
import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
+import { createPlugin } from '../../mol-plugin-ui';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
import { PluginCommands } from '../../mol-plugin/commands';
-import { PluginContext } from '../../mol-plugin/context';
-import './index.html';
import { Asset } from '../../mol-util/assets';
+import './index.html';
require('mol-plugin-ui/skin/light.scss');
type LoadParams = { url: string, format?: BuiltInTrajectoryFormat, isBinary?: boolean, assemblyId?: string }
@@ -62,7 +62,7 @@ const Canvas3DPresets = {
type Canvas3DPreset = keyof typeof Canvas3DPresets
class LightingDemo {
- plugin: PluginContext;
+ plugin: PluginUIContext;
private radius = 5;
private bias = 1.1;
@@ -70,12 +70,14 @@ class LightingDemo {
init(target: string | HTMLElement) {
this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
- ...DefaultPluginSpec(),
+ ...DefaultPluginUISpec(),
layout: {
initial: {
isExpanded: false,
showControls: false
},
+ },
+ components: {
controls: { left: 'none', right: 'none', top: 'none', bottom: 'none' }
}
});
diff --git a/src/examples/proteopedia-wrapper/index.ts b/src/examples/proteopedia-wrapper/index.ts
index 68bb68783..a322fc8aa 100644
--- a/src/examples/proteopedia-wrapper/index.ts
+++ b/src/examples/proteopedia-wrapper/index.ts
@@ -6,15 +6,15 @@
import * as ReactDOM from 'react-dom';
import { Canvas3DProps, DefaultCanvas3DParams } from '../../mol-canvas3d/canvas3d';
-import { createPlugin } from '../../mol-plugin';
-import { DefaultPluginSpec } from '../../mol-plugin/spec';
import { AnimateModelIndex } from '../../mol-plugin-state/animation/built-in/model-index';
import { createStructureRepresentationParams } from '../../mol-plugin-state/helpers/structure-representation-params';
import { PluginStateObject, PluginStateObject as PSO } from '../../mol-plugin-state/objects';
import { StateTransforms } from '../../mol-plugin-state/transforms';
+import { createPlugin } from '../../mol-plugin-ui';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
import { CreateVolumeStreamingInfo, InitVolumeStreaming } from '../../mol-plugin/behavior/dynamic/volume-streaming/transformers';
import { PluginCommands } from '../../mol-plugin/commands';
-import { PluginContext } from '../../mol-plugin/context';
import { PluginState } from '../../mol-plugin/state';
import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
import { StateBuilder, StateObject, StateSelection } from '../../mol-state';
@@ -41,13 +41,13 @@ class MolStarProteopediaWrapper {
modelInfo: this._ev<ModelInfo>()
};
- plugin: PluginContext;
+ plugin: PluginUIContext;
init(target: string | HTMLElement, options?: {
customColorList?: number[]
}) {
this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
- ...DefaultPluginSpec(),
+ ...DefaultPluginUISpec(),
animations: [
AnimateModelIndex
],
diff --git a/src/examples/proteopedia-wrapper/ui/controls.tsx b/src/examples/proteopedia-wrapper/ui/controls.tsx
index df970158b..bf74e9fcc 100644
--- a/src/examples/proteopedia-wrapper/ui/controls.tsx
+++ b/src/examples/proteopedia-wrapper/ui/controls.tsx
@@ -6,12 +6,12 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
+import { PluginUIContext } from '../../../mol-plugin-ui/context';
import { PluginContextContainer } from '../../../mol-plugin-ui/plugin';
import { TransformUpdaterControl } from '../../../mol-plugin-ui/state/update-transform';
-import { PluginContext } from '../../../mol-plugin/context';
import { StateElements } from '../helpers';
-export function volumeStreamingControls(plugin: PluginContext, parent: Element) {
+export function volumeStreamingControls(plugin: PluginUIContext, parent: Element) {
ReactDOM.render(<PluginContextContainer plugin={plugin}>
<TransformUpdaterControl nodeRef={StateElements.VolumeStreaming} />
</PluginContextContainer>, parent);
diff --git a/src/mol-plugin-ui/base.tsx b/src/mol-plugin-ui/base.tsx
index f2826b3c5..fef08ba42 100644
--- a/src/mol-plugin-ui/base.tsx
+++ b/src/mol-plugin-ui/base.tsx
@@ -7,15 +7,15 @@
import * as React from 'react';
import { Observable, Subscription } from 'rxjs';
-import { PluginContext } from '../mol-plugin/context';
+import { PluginUIContext } from './context';
import { Button, ColorAccent } from './controls/common';
import { Icon, ArrowRightSvg, ArrowDropDownSvg } from './controls/icons';
-export const PluginReactContext = React.createContext(void 0 as any as PluginContext);
+export const PluginReactContext = React.createContext(void 0 as any as PluginUIContext);
export abstract class PluginUIComponent<P = {}, S = {}, SS = {}> extends React.Component<P, S, SS> {
static contextType = PluginReactContext;
- readonly plugin: PluginContext;
+ readonly plugin: PluginUIContext;
private subs: Subscription[] | undefined = void 0;
@@ -33,7 +33,7 @@ export abstract class PluginUIComponent<P = {}, S = {}, SS = {}> extends React.C
protected init?(): void;
constructor(props: P, context?: any) {
- super(props, context);
+ super(props);
this.plugin = context;
if (this.init) this.init();
}
@@ -41,7 +41,7 @@ export abstract class PluginUIComponent<P = {}, S = {}, SS = {}> extends React.C
export abstract class PurePluginUIComponent<P = {}, S = {}, SS = {}> extends React.PureComponent<P, S, SS> {
static contextType = PluginReactContext;
- readonly plugin: PluginContext;
+ readonly plugin: PluginUIContext;
private subs: Subscription[] | undefined = void 0;
diff --git a/src/mol-plugin-ui/context.ts b/src/mol-plugin-ui/context.ts
new file mode 100644
index 000000000..a0f14e9a0
--- /dev/null
+++ b/src/mol-plugin-ui/context.ts
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+
+import { PluginContext } from '../mol-plugin/context';
+import { PluginUISpec } from './spec';
+import { StateTransformParameters } from './state/common';
+
+export class PluginUIContext extends PluginContext {
+ readonly customParamEditors = new Map<string, StateTransformParameters.Class>();
+
+ private initDataActions() {
+ for (const a of this.spec.actions) {
+ this.state.data.actions.add(a.action);
+ }
+ }
+
+ private initCustomParamEditors() {
+ if (!this.spec.customParamEditors) return;
+
+ for (const [t, e] of this.spec.customParamEditors) {
+ this.customParamEditors.set(t.id, e);
+ }
+ }
+
+ dispose(options?: { doNotForceWebGLContextLoss?: boolean }) {
+ super.dispose(options);
+ this.layout.dispose();
+ }
+
+ constructor(public spec: PluginUISpec) {
+ super(spec);
+
+ this.initDataActions();
+ this.initCustomParamEditors();
+ }
+}
\ No newline at end of file
diff --git a/src/mol-plugin-ui/controls/parameters.tsx b/src/mol-plugin-ui/controls/parameters.tsx
index 0fef07e0b..fb414d4d1 100644
--- a/src/mol-plugin-ui/controls/parameters.tsx
+++ b/src/mol-plugin-ui/controls/parameters.tsx
@@ -7,7 +7,6 @@
import * as React from 'react';
import { Mat4, Vec2, Vec3 } from '../../mol-math/linear-algebra';
-import { PluginContext } from '../../mol-plugin/context';
import { Color } from '../../mol-util/color';
import { ColorListName, ColorListOptions, ColorListOptionsScale, ColorListOptionsSet, getColorListFromName } from '../../mol-util/color/lists';
import { Legend as LegendData } from '../../mol-util/legend';
@@ -26,6 +25,7 @@ import { LineGraphComponent } from './line-graph/line-graph-component';
import { Slider, Slider2 } from './slider';
import { Asset } from '../../mol-util/assets';
import { ColorListEntry } from '../../mol-util/color/color';
+import { PluginUIContext } from '../context';
export type ParameterControlsCategoryFilter = string | null | (string | null)[]
@@ -104,7 +104,7 @@ export class ParameterControls<P extends PD.Params> extends React.PureComponent<
}
}
-export class ParameterMappingControl<S, T> extends PluginUIComponent<{ mapping: ParamMapping<S, T, PluginContext> }> {
+export class ParameterMappingControl<S, T> extends PluginUIComponent<{ mapping: ParamMapping<S, T, PluginUIContext> }> {
setSettings = (p: { param: PD.Base<any>, name: string, value: any }, old: any) => {
const values = { ...old, [p.name]: p.value };
const t = this.props.mapping.update(values, this.plugin);
diff --git a/src/mol-plugin/index.ts b/src/mol-plugin-ui/index.ts
similarity index 63%
rename from src/mol-plugin/index.ts
rename to src/mol-plugin-ui/index.ts
index 7d715f393..665d76d86 100644
--- a/src/mol-plugin/index.ts
+++ b/src/mol-plugin-ui/index.ts
@@ -7,20 +7,20 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
-import { Plugin } from '../mol-plugin-ui/plugin';
-import { PluginContext } from './context';
-import { DefaultPluginSpec, PluginSpec } from './spec';
+import { Plugin } from './plugin';
+import { PluginUIContext } from './context';
+import { DefaultPluginUISpec, PluginUISpec } from './spec';
-export function createPlugin(target: HTMLElement, spec?: PluginSpec): PluginContext {
- const ctx = new PluginContext(spec || DefaultPluginSpec());
+export function createPlugin(target: HTMLElement, spec?: PluginUISpec): PluginUIContext {
+ const ctx = new PluginUIContext(spec || DefaultPluginUISpec());
ctx.init();
ReactDOM.render(React.createElement(Plugin, { plugin: ctx }), target);
return ctx;
}
/** Returns the instance of the plugin after all behaviors have been initialized */
-export async function createPluginAsync(target: HTMLElement, spec?: PluginSpec) {
- const ctx = new PluginContext(spec || DefaultPluginSpec());
+export async function createPluginAsync(target: HTMLElement, spec?: PluginUISpec) {
+ const ctx = new PluginUIContext(spec || DefaultPluginUISpec());
const init = ctx.init();
ReactDOM.render(React.createElement(Plugin, { plugin: ctx }), target);
await init;
diff --git a/src/mol-plugin-ui/plugin.tsx b/src/mol-plugin-ui/plugin.tsx
index 8f3061f35..bcef3bc44 100644
--- a/src/mol-plugin-ui/plugin.tsx
+++ b/src/mol-plugin-ui/plugin.tsx
@@ -7,7 +7,6 @@
import { List } from 'immutable';
import * as React from 'react';
-import { PluginContext } from '../mol-plugin/context';
import { formatTime } from '../mol-util';
import { LogEntry } from '../mol-util/log-entry';
import { PluginReactContext, PluginUIComponent } from './base';
@@ -18,8 +17,9 @@ import { BackgroundTaskProgress, OverlayTaskProgress } from './task';
import { Toasts } from './toast';
import { Viewport, ViewportControls } from './viewport';
import { PluginCommands } from '../mol-plugin/commands';
+import { PluginUIContext } from './context';
-export class Plugin extends React.Component<{ plugin: PluginContext }, {}> {
+export class Plugin extends React.Component<{ plugin: PluginUIContext }, {}> {
region(kind: 'left' | 'right' | 'bottom' | 'main', element: JSX.Element) {
return <div className={`msp-layout-region msp-layout-${kind}`}>
<div className='msp-layout-static'>
@@ -35,7 +35,7 @@ export class Plugin extends React.Component<{ plugin: PluginContext }, {}> {
}
}
-export class PluginContextContainer extends React.Component<{ plugin: PluginContext }> {
+export class PluginContextContainer extends React.Component<{ plugin: PluginUIContext }> {
render() {
return <PluginReactContext.Provider value={this.props.plugin}>
<div className='msp-plugin'>
@@ -62,7 +62,7 @@ class Layout extends PluginUIComponent {
get layoutVisibilityClassName() {
const layout = this.plugin.layout.state;
- const controls = (this.plugin.spec.layout && this.plugin.spec.layout.controls) || {};
+ const controls = this.plugin.spec.components?.controls ?? {};
const classList: string[] = [];
if (controls.top === 'none' || !layout.showControls || layout.regionState.top === 'hidden') {
@@ -127,7 +127,7 @@ class Layout extends PluginUIComponent {
render() {
const layout = this.plugin.layout.state;
- const controls = this.plugin.spec.layout?.controls || {};
+ const controls = this.plugin.spec.components?.controls || {};
const viewport = this.plugin.spec.components?.viewport?.view || DefaultViewport;
return <div className='msp-plugin' onDrop={this.onDrop} onDragOver={this.onDragOver}>
@@ -149,7 +149,6 @@ export class ControlsWrapper extends PluginUIComponent {
render() {
const StructureTools = this.plugin.spec.components?.structureTools || DefaultStructureTools;
return <div className='msp-scrollable-container'>
- {/* <CurrentObject /> */}
<StructureTools />
</div>;
}
diff --git a/src/mol-plugin-ui/spec.ts b/src/mol-plugin-ui/spec.ts
new file mode 100644
index 000000000..c0c8812d8
--- /dev/null
+++ b/src/mol-plugin-ui/spec.ts
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2018-2021 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>
+ */
+
+import { StateActions } from '../mol-plugin-state/actions';
+import { AssignColorVolume } from '../mol-plugin-state/actions/volume';
+import { StateTransforms } from '../mol-plugin-state/transforms';
+import { StateTransformParameters } from '../mol-plugin-ui/state/common';
+import { DefaultPluginSpec, PluginSpec } from '../mol-plugin/spec';
+import { StateAction, StateTransformer } from '../mol-state';
+import { BoxifyVolumeStreaming, CreateVolumeStreamingBehavior, InitVolumeStreaming } from '../mol-plugin/behavior/dynamic/volume-streaming/transformers';
+
+export { PluginUISpec };
+
+interface PluginUISpec extends PluginSpec {
+ actions: PluginUISpec.Action[],
+ customParamEditors?: [StateAction | StateTransformer, StateTransformParameters.Class][],
+ components?: {
+ controls?: PluginUISpec.LayoutControls
+ remoteState?: 'none' | 'default',
+ structureTools?: React.ComponentClass,
+ viewport?: {
+ view?: React.ComponentClass,
+ controls?: React.ComponentClass
+ },
+ hideTaskOverlay?: boolean
+ },
+}
+
+namespace PluginUISpec {
+ export interface Action {
+ action: StateAction | StateTransformer,
+ customControl?: StateTransformParameters.Class,
+ autoUpdate?: boolean
+ }
+
+ export function Action(action: StateAction | StateTransformer, params?: { customControl?: StateTransformParameters.Class, autoUpdate?: boolean }): Action {
+ return { action, customControl: params && params.customControl, autoUpdate: params && params.autoUpdate };
+ }
+
+ export interface LayoutControls {
+ top?: React.ComponentClass | 'none',
+ left?: React.ComponentClass | 'none',
+ right?: React.ComponentClass | 'none',
+ bottom?: React.ComponentClass | 'none'
+ }
+}
+
+export const DefaultPluginUISpec = (): PluginUISpec => ({
+ ...DefaultPluginSpec(),
+ actions: [
+ PluginUISpec.Action(StateActions.Structure.DownloadStructure),
+ PluginUISpec.Action(StateActions.Structure.AddTrajectory),
+ PluginUISpec.Action(StateActions.Volume.DownloadDensity),
+ PluginUISpec.Action(StateActions.DataFormat.DownloadFile),
+ PluginUISpec.Action(StateActions.DataFormat.OpenFiles),
+ PluginUISpec.Action(StateActions.Structure.EnableModelCustomProps),
+ PluginUISpec.Action(StateActions.Structure.EnableStructureCustomProps),
+
+ // Volume streaming
+ PluginUISpec.Action(InitVolumeStreaming),
+ PluginUISpec.Action(BoxifyVolumeStreaming),
+ PluginUISpec.Action(CreateVolumeStreamingBehavior),
+
+ PluginUISpec.Action(StateTransforms.Data.Download),
+ PluginUISpec.Action(StateTransforms.Data.ParseCif),
+ PluginUISpec.Action(StateTransforms.Data.ParseCcp4),
+ PluginUISpec.Action(StateTransforms.Data.ParseDsn6),
+
+ PluginUISpec.Action(StateTransforms.Model.TrajectoryFromMmCif),
+ PluginUISpec.Action(StateTransforms.Model.TrajectoryFromCifCore),
+ PluginUISpec.Action(StateTransforms.Model.TrajectoryFromPDB),
+ PluginUISpec.Action(StateTransforms.Model.TransformStructureConformation),
+ PluginUISpec.Action(StateTransforms.Model.StructureFromModel),
+ PluginUISpec.Action(StateTransforms.Model.StructureFromTrajectory),
+ PluginUISpec.Action(StateTransforms.Model.ModelFromTrajectory),
+ PluginUISpec.Action(StateTransforms.Model.StructureSelectionFromScript),
+ PluginUISpec.Action(StateTransforms.Representation.StructureRepresentation3D),
+ PluginUISpec.Action(StateTransforms.Representation.StructureSelectionsDistance3D),
+ PluginUISpec.Action(StateTransforms.Representation.StructureSelectionsAngle3D),
+ PluginUISpec.Action(StateTransforms.Representation.StructureSelectionsDihedral3D),
+ PluginUISpec.Action(StateTransforms.Representation.StructureSelectionsLabel3D),
+ PluginUISpec.Action(StateTransforms.Representation.StructureSelectionsOrientation3D),
+ PluginUISpec.Action(StateTransforms.Representation.ModelUnitcell3D),
+ PluginUISpec.Action(StateTransforms.Representation.ExplodeStructureRepresentation3D),
+ PluginUISpec.Action(StateTransforms.Representation.UnwindStructureAssemblyRepresentation3D),
+ PluginUISpec.Action(StateTransforms.Representation.OverpaintStructureRepresentation3DFromScript),
+ PluginUISpec.Action(StateTransforms.Representation.TransparencyStructureRepresentation3DFromScript),
+
+ PluginUISpec.Action(AssignColorVolume),
+ PluginUISpec.Action(StateTransforms.Volume.VolumeFromCcp4),
+ PluginUISpec.Action(StateTransforms.Volume.VolumeFromDsn6),
+ PluginUISpec.Action(StateTransforms.Volume.VolumeFromCube),
+ PluginUISpec.Action(StateTransforms.Volume.VolumeFromDx),
+ PluginUISpec.Action(StateTransforms.Representation.VolumeRepresentation3D),
+ ]
+});
\ No newline at end of file
diff --git a/src/mol-plugin-ui/viewport/simple-settings.tsx b/src/mol-plugin-ui/viewport/simple-settings.tsx
index cf72e5002..d74806412 100644
--- a/src/mol-plugin-ui/viewport/simple-settings.tsx
+++ b/src/mol-plugin-ui/viewport/simple-settings.tsx
@@ -9,13 +9,13 @@ import { produce } from 'immer';
import * as React from 'react';
import { Canvas3DParams, Canvas3DProps } from '../../mol-canvas3d/canvas3d';
import { PluginCommands } from '../../mol-plugin/commands';
-import { PluginContext } from '../../mol-plugin/context';
import { StateTransform } from '../../mol-state';
import { Color } from '../../mol-util/color';
import { ParamDefinition as PD } from '../../mol-util/param-definition';
import { ParamMapping } from '../../mol-util/param-mapping';
import { Mutable } from '../../mol-util/type-helpers';
import { PluginUIComponent } from '../base';
+import { PluginUIContext } from '../context';
import { ParameterMappingControl } from '../controls/parameters';
import { ViewportHelpContent } from './help';
@@ -71,9 +71,9 @@ const SimpleSettingsParams = {
type SimpleSettingsParams = typeof SimpleSettingsParams
const SimpleSettingsMapping = ParamMapping({
- params: (ctx: PluginContext) => {
+ params: (ctx: PluginUIContext) => {
const params = PD.clone(SimpleSettingsParams);
- const controls = ctx.spec.layout?.controls;
+ const controls = ctx.spec.components?.controls;
if (controls) {
const options: [LayoutOptions, string][] = [];
if (controls.top !== 'none') options.push(['sequence', LayoutOptions.sequence]);
@@ -83,8 +83,8 @@ const SimpleSettingsMapping = ParamMapping({
}
return params;
},
- target(ctx: PluginContext) {
- const c = ctx.spec.layout?.controls;
+ target(ctx: PluginUIContext) {
+ const c = ctx.spec.components?.controls;
const r = ctx.layout.state.regionState;
const layout: SimpleSettingsParams['layout']['defaultValue'] = [];
if (r.top !== 'hidden' && (!c || c.top !== 'none')) layout.push('sequence');
diff --git a/src/mol-plugin/context.ts b/src/mol-plugin/context.ts
index a5e7e623a..30364ed39 100644
--- a/src/mol-plugin/context.ts
+++ b/src/mol-plugin/context.ts
@@ -8,44 +8,51 @@
import produce, { setAutoFreeze } from 'immer';
import { List } from 'immutable';
import { merge, Subscription } from 'rxjs';
+import { filter, take } from 'rxjs/operators';
import { Canvas3D, Canvas3DContext, DefaultCanvas3DParams } from '../mol-canvas3d/canvas3d';
+import { resizeCanvas } from '../mol-canvas3d/util';
+import { Vec2 } from '../mol-math/linear-algebra';
import { CustomProperty } from '../mol-model-props/common/custom-property';
import { Model, Structure } from '../mol-model/structure';
import { DataBuilder } from '../mol-plugin-state/builder/data';
import { StructureBuilder } from '../mol-plugin-state/builder/structure';
import { DataFormatRegistry } from '../mol-plugin-state/formats/registry';
import { StructureSelectionQueryRegistry } from '../mol-plugin-state/helpers/structure-selection-query';
+import { PluginAnimationManager } from '../mol-plugin-state/manager/animation';
import { CameraManager } from '../mol-plugin-state/manager/camera';
import { InteractivityManager } from '../mol-plugin-state/manager/interactivity';
import { LociLabel, LociLabelManager } from '../mol-plugin-state/manager/loci-label';
+import { PluginStateSnapshotManager } from '../mol-plugin-state/manager/snapshots';
import { StructureComponentManager } from '../mol-plugin-state/manager/structure/component';
import { StructureFocusManager } from '../mol-plugin-state/manager/structure/focus';
import { StructureHierarchyManager } from '../mol-plugin-state/manager/structure/hierarchy';
import { StructureHierarchyRef } from '../mol-plugin-state/manager/structure/hierarchy-state';
import { StructureMeasurementManager } from '../mol-plugin-state/manager/structure/measurement';
import { StructureSelectionManager } from '../mol-plugin-state/manager/structure/selection';
-import { PluginUIComponent } from '../mol-plugin-ui/base';
-import { StateTransformParameters } from '../mol-plugin-ui/state/common';
+import { VolumeHierarchyManager } from '../mol-plugin-state/manager/volume/hierarchy';
+import { LeftPanelTabName, PluginLayout } from './layout';
import { Representation } from '../mol-repr/representation';
import { StructureRepresentationRegistry } from '../mol-repr/structure/registry';
import { VolumeRepresentationRegistry } from '../mol-repr/volume/registry';
import { StateTransform } from '../mol-state';
-import { Task, RuntimeContext } from '../mol-task';
+import { RuntimeContext, Task } from '../mol-task';
import { ColorTheme } from '../mol-theme/color';
import { SizeTheme } from '../mol-theme/size';
import { ThemeRegistryContext } from '../mol-theme/theme';
+import { AssetManager } from '../mol-util/assets';
import { Color } from '../mol-util/color';
import { ajaxGet } from '../mol-util/data-source';
import { isDebugMode, isProductionMode } from '../mol-util/debug';
import { ModifiersKeys } from '../mol-util/input/input-observer';
import { LogEntry } from '../mol-util/log-entry';
+import { objectForEach } from '../mol-util/object';
import { RxEventHelper } from '../mol-util/rx-event-helper';
+import { PluginAnimationLoop } from './animation-loop';
import { BuiltInPluginBehaviors } from './behavior';
import { PluginBehavior } from './behavior/behavior';
import { PluginCommandManager } from './command';
import { PluginCommands } from './commands';
import { PluginConfig, PluginConfigManager } from './config';
-import { LeftPanelTabName, PluginLayout } from './layout';
import { PluginSpec } from './spec';
import { PluginState } from './state';
import { SubstructureParentHelper } from './util/substructure-parent-helper';
@@ -53,15 +60,6 @@ import { TaskManager } from './util/task-manager';
import { PluginToastManager } from './util/toast';
import { ViewportScreenshotHelper } from './util/viewport-screenshot';
import { PLUGIN_VERSION, PLUGIN_VERSION_DATE } from './version';
-import { AssetManager } from '../mol-util/assets';
-import { PluginStateSnapshotManager } from '../mol-plugin-state/manager/snapshots';
-import { PluginAnimationManager } from '../mol-plugin-state/manager/animation';
-import { objectForEach } from '../mol-util/object';
-import { VolumeHierarchyManager } from '../mol-plugin-state/manager/volume/hierarchy';
-import { filter, take } from 'rxjs/operators';
-import { Vec2 } from '../mol-math/linear-algebra';
-import { PluginAnimationLoop } from './animation-loop';
-import { resizeCanvas } from '../mol-canvas3d/util';
export class PluginContext {
runTask = <T>(task: Task<T>, params?: { useOverlay?: boolean }) => this.managers.task.run(task, params);
@@ -71,7 +69,7 @@ export class PluginContext {
return object;
}
- private subs: Subscription[] = [];
+ protected subs: Subscription[] = [];
private disposed = false;
private ev = RxEventHelper.create();
@@ -109,8 +107,8 @@ export class PluginContext {
readonly canvas3dContext: Canvas3DContext | undefined;
readonly canvas3d: Canvas3D | undefined;
- readonly animationLoop = new PluginAnimationLoop(this);
readonly layout = new PluginLayout(this);
+ readonly animationLoop = new PluginAnimationLoop(this);
readonly representation = {
structure: {
@@ -176,9 +174,8 @@ export class PluginContext {
readonly customModelProperties = new CustomProperty.Registry<Model>();
readonly customStructureProperties = new CustomProperty.Registry<Structure>();
- readonly customParamEditors = new Map<string, StateTransformParameters.Class>();
- readonly customStructureControls = new Map<string, { new(): PluginUIComponent<any, any, any> }>();
+ readonly customStructureControls = new Map<string, { new(): any /* contructible react components */ }>();
readonly genericRepresentationControls = new Map<string, (selection: StructureHierarchyManager['selection']) => [StructureHierarchyRef[], string]>();
/**
@@ -200,7 +197,7 @@ export class PluginContext {
(this.canvas3dContext as Canvas3DContext) = Canvas3DContext.fromCanvas(canvas, { antialias, preserveDrawingBuffer, pixelScale, pickScale, enableWboit });
(this.canvas3d as Canvas3D) = Canvas3D.create(this.canvas3dContext!);
this.canvas3dInit.next(true);
- let props = this.spec.components?.viewport?.canvas3d;
+ let props = this.spec.canvas3d;
const backgroundColor = Color(0xFCFBF9);
if (!props) {
@@ -294,7 +291,6 @@ export class PluginContext {
this.ev.dispose();
this.state.dispose();
this.managers.task.dispose();
- this.layout.dispose();
this.helpers.substructureParent.dispose();
objectForEach(this.managers, m => (m as any)?.dispose?.());
@@ -385,12 +381,6 @@ export class PluginContext {
}
}
- private initDataActions() {
- for (const a of this.spec.actions) {
- this.state.data.actions.add(a.action);
- }
- }
-
private initAnimations() {
if (!this.spec.animations) return;
for (const anim of this.spec.animations) {
@@ -398,14 +388,6 @@ export class PluginContext {
}
}
- private initCustomParamEditors() {
- if (!this.spec.customParamEditors) return;
-
- for (const [t, e] of this.spec.customParamEditors) {
- this.customParamEditors.set(t.id, e);
- }
- }
-
async init() {
this.subs.push(this.events.log.subscribe(e => this.log.entries = this.log.entries.push(e)));
@@ -417,9 +399,7 @@ export class PluginContext {
(this.managers.lociLabels as LociLabelManager) = new LociLabelManager(this);
(this.builders.structure as StructureBuilder) = new StructureBuilder(this);
- this.initDataActions();
this.initAnimations();
- this.initCustomParamEditors();
await this.initBehaviors();
diff --git a/src/mol-plugin/layout.ts b/src/mol-plugin/layout.ts
index a20be613e..228201d29 100644
--- a/src/mol-plugin/layout.ts
+++ b/src/mol-plugin/layout.ts
@@ -1,5 +1,5 @@
/**
- * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2021 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>
@@ -7,8 +7,8 @@
import { ParamDefinition as PD } from '../mol-util/param-definition';
import { StatefulPluginComponent } from '../mol-plugin-state/component';
-import { PluginContext } from './context';
import { PluginCommands } from './commands';
+import { PluginContext } from './context';
const regionStateOptions = [
['full', 'Full'],
diff --git a/src/mol-plugin/spec.ts b/src/mol-plugin/spec.ts
index b160f43ad..1d3af5b05 100644
--- a/src/mol-plugin/spec.ts
+++ b/src/mol-plugin/spec.ts
@@ -1,65 +1,37 @@
/**
- * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2021 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>
*/
-import { StateTransformer, StateAction } from '../mol-state';
-import { StateTransformParameters } from '../mol-plugin-ui/state/common';
-import { PluginLayoutStateProps } from './layout';
-import { PluginStateAnimation } from '../mol-plugin-state/animation/model';
-import { PluginConfigItem } from './config';
import { PartialCanvas3DProps } from '../mol-canvas3d/canvas3d';
-import { DataFormatProvider } from '../mol-plugin-state/formats/provider';
-import { StateActions } from '../mol-plugin-state/actions';
-import { StateTransforms } from '../mol-plugin-state/transforms';
-import { VolumeStreamingCustomControls } from '../mol-plugin-ui/custom/volume';
-import { PluginBehaviors } from './behavior';
-import { StructureFocusRepresentation } from './behavior/dynamic/selection/structure-focus-representation';
-import { BoxifyVolumeStreaming, CreateVolumeStreamingBehavior, InitVolumeStreaming } from './behavior/dynamic/volume-streaming/transformers';
-import { AssignColorVolume } from '../mol-plugin-state/actions/volume';
-import { AnimateModelIndex } from '../mol-plugin-state/animation/built-in/model-index';
import { AnimateAssemblyUnwind } from '../mol-plugin-state/animation/built-in/assembly-unwind';
import { AnimateCameraSpin } from '../mol-plugin-state/animation/built-in/camera-spin';
+import { AnimateModelIndex } from '../mol-plugin-state/animation/built-in/model-index';
import { AnimateStateSnapshots } from '../mol-plugin-state/animation/built-in/state-snapshots';
+import { PluginStateAnimation } from '../mol-plugin-state/animation/model';
+import { DataFormatProvider } from '../mol-plugin-state/formats/provider';
+import { StateTransformer } from '../mol-state';
+import { PluginBehaviors } from './behavior';
+import { StructureFocusRepresentation } from './behavior/dynamic/selection/structure-focus-representation';
+import { PluginConfigItem } from './config';
+import { PluginLayoutStateProps } from './layout';
export { PluginSpec };
interface PluginSpec {
- actions: PluginSpec.Action[],
behaviors: PluginSpec.Behavior[],
animations?: PluginStateAnimation[],
- customParamEditors?: [StateAction | StateTransformer, StateTransformParameters.Class][],
- customFormats?: [string, DataFormatProvider][]
+ customFormats?: [string, DataFormatProvider][],
+ canvas3d?: PartialCanvas3DProps,
layout?: {
initial?: Partial<PluginLayoutStateProps>,
- controls?: PluginSpec.LayoutControls
- },
- components?: {
- remoteState?: 'none' | 'default',
- structureTools?: React.ComponentClass,
- viewport?: {
- view?: React.ComponentClass,
- controls?: React.ComponentClass,
- canvas3d?: PartialCanvas3DProps
- },
- hideTaskOverlay?: boolean
},
config?: [PluginConfigItem, unknown][]
}
namespace PluginSpec {
- export interface Action {
- action: StateAction | StateTransformer,
- customControl?: StateTransformParameters.Class,
- autoUpdate?: boolean
- }
-
- export function Action(action: StateAction | StateTransformer, params?: { customControl?: StateTransformParameters.Class, autoUpdate?: boolean }): Action {
- return { action, customControl: params && params.customControl, autoUpdate: params && params.autoUpdate };
- }
-
export interface Behavior {
transformer: StateTransformer,
defaultParams?: any
@@ -68,62 +40,9 @@ namespace PluginSpec {
export function Behavior<T extends StateTransformer>(transformer: T, defaultParams: Partial<StateTransformer.Params<T>> = {}): Behavior {
return { transformer, defaultParams };
}
-
- export interface LayoutControls {
- top?: React.ComponentClass | 'none',
- left?: React.ComponentClass | 'none',
- right?: React.ComponentClass | 'none',
- bottom?: React.ComponentClass | 'none'
- }
}
export const DefaultPluginSpec = (): PluginSpec => ({
- actions: [
- PluginSpec.Action(StateActions.Structure.DownloadStructure),
- PluginSpec.Action(StateActions.Structure.AddTrajectory),
- PluginSpec.Action(StateActions.Volume.DownloadDensity),
- PluginSpec.Action(StateActions.DataFormat.DownloadFile),
- PluginSpec.Action(StateActions.DataFormat.OpenFiles),
- PluginSpec.Action(StateActions.Structure.EnableModelCustomProps),
- PluginSpec.Action(StateActions.Structure.EnableStructureCustomProps),
-
- // Volume streaming
- PluginSpec.Action(InitVolumeStreaming),
- PluginSpec.Action(BoxifyVolumeStreaming),
- PluginSpec.Action(CreateVolumeStreamingBehavior),
-
- PluginSpec.Action(StateTransforms.Data.Download),
- PluginSpec.Action(StateTransforms.Data.ParseCif),
- PluginSpec.Action(StateTransforms.Data.ParseCcp4),
- PluginSpec.Action(StateTransforms.Data.ParseDsn6),
-
- PluginSpec.Action(StateTransforms.Model.TrajectoryFromMmCif),
- PluginSpec.Action(StateTransforms.Model.TrajectoryFromCifCore),
- PluginSpec.Action(StateTransforms.Model.TrajectoryFromPDB),
- PluginSpec.Action(StateTransforms.Model.TransformStructureConformation),
- PluginSpec.Action(StateTransforms.Model.StructureFromModel),
- PluginSpec.Action(StateTransforms.Model.StructureFromTrajectory),
- PluginSpec.Action(StateTransforms.Model.ModelFromTrajectory),
- PluginSpec.Action(StateTransforms.Model.StructureSelectionFromScript),
- PluginSpec.Action(StateTransforms.Representation.StructureRepresentation3D),
- PluginSpec.Action(StateTransforms.Representation.StructureSelectionsDistance3D),
- PluginSpec.Action(StateTransforms.Representation.StructureSelectionsAngle3D),
- PluginSpec.Action(StateTransforms.Representation.StructureSelectionsDihedral3D),
- PluginSpec.Action(StateTransforms.Representation.StructureSelectionsLabel3D),
- PluginSpec.Action(StateTransforms.Representation.StructureSelectionsOrientation3D),
- PluginSpec.Action(StateTransforms.Representation.ModelUnitcell3D),
- PluginSpec.Action(StateTransforms.Representation.ExplodeStructureRepresentation3D),
- PluginSpec.Action(StateTransforms.Representation.UnwindStructureAssemblyRepresentation3D),
- PluginSpec.Action(StateTransforms.Representation.OverpaintStructureRepresentation3DFromScript),
- PluginSpec.Action(StateTransforms.Representation.TransparencyStructureRepresentation3DFromScript),
-
- PluginSpec.Action(AssignColorVolume),
- PluginSpec.Action(StateTransforms.Volume.VolumeFromCcp4),
- PluginSpec.Action(StateTransforms.Volume.VolumeFromDsn6),
- PluginSpec.Action(StateTransforms.Volume.VolumeFromCube),
- PluginSpec.Action(StateTransforms.Volume.VolumeFromDx),
- PluginSpec.Action(StateTransforms.Representation.VolumeRepresentation3D),
- ],
behaviors: [
PluginSpec.Behavior(PluginBehaviors.Representation.HighlightLoci),
PluginSpec.Behavior(PluginBehaviors.Representation.SelectLoci),
@@ -139,9 +58,6 @@ export const DefaultPluginSpec = (): PluginSpec => ({
PluginSpec.Behavior(PluginBehaviors.CustomProps.ValenceModel),
PluginSpec.Behavior(PluginBehaviors.CustomProps.CrossLinkRestraint),
],
- customParamEditors: [
- [CreateVolumeStreamingBehavior, VolumeStreamingCustomControls]
- ],
animations: [
AnimateModelIndex,
AnimateCameraSpin,
diff --git a/src/mol-plugin/util/toast.ts b/src/mol-plugin/util/toast.ts
index 5062eb4b8..2a22e9390 100644
--- a/src/mol-plugin/util/toast.ts
+++ b/src/mol-plugin/util/toast.ts
@@ -14,9 +14,9 @@ import { PluginCommands } from '../commands';
export interface PluginToast {
title: string,
/**
- * The message can be either a string, html string, or an arbitrary React component.
+ * The message can be either a string, html string, or an arbitrary React (Function) component.
*/
- message: string | React.ComponentClass,
+ message: string | Function,
/**
* Only one message with a given key can be shown.
*/
@@ -103,7 +103,7 @@ export namespace PluginToastManager {
serialNumber: number,
key?: string,
title: string,
- message: string | React.ComponentClass,
+ message: string | Function,
hide: () => void,
timeout?: number
}
--
GitLab