Skip to content
Snippets Groups Projects
Commit 24143d70 authored by Alexander Rose's avatar Alexander Rose
Browse files

build docking-viewer as app 

 not as example (so it has umd)
parent 22ead527
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/examples/docking-viewer/index.html → src/apps/docking-viewer/index.html
+ 2
− 15
View file @ 24143d70
...@@ -17,22 +17,9 @@ ...@@ -17,22 +17,9 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="text/javascript" src="./index.js"></script> <script type="text/javascript" src="./molstar.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var viewer = new DockingViewer('app', { var viewer = new DockingViewer('app', [0x33DD22, 0x1133EE], true);
layoutIsExpanded: false,
layoutShowControls: false,
layoutShowRemoteState: false,
layoutShowSequence: true,
layoutShowLog: false,
layoutShowLeftPanel: true,
viewportShowExpand: true,
viewportShowControls: false,
viewportShowSettings: false,
viewportShowSelectionMode: false,
viewportShowAnimation: false,
});
function getParam(name, regex) { function getParam(name, regex) {
var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i'); var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
......
src/examples/docking-viewer/index.ts → src/apps/docking-viewer/index.ts
+ 48
− 100
View file @ 24143d70
...@@ -11,12 +11,8 @@ import './index.html'; ...@@ -11,12 +11,8 @@ import './index.html';
import { PluginContext } from '../../mol-plugin/context'; import { PluginContext } from '../../mol-plugin/context';
import { PluginCommands } from '../../mol-plugin/commands'; import { PluginCommands } from '../../mol-plugin/commands';
import { PluginSpec } from '../../mol-plugin/spec'; import { PluginSpec } from '../../mol-plugin/spec';
import { DownloadStructure, PdbDownloadProvider } from '../../mol-plugin-state/actions/structure';
import { PluginConfig } from '../../mol-plugin/config'; import { PluginConfig } from '../../mol-plugin/config';
import { Asset } from '../../mol-util/assets';
import { ObjectKeys } from '../../mol-util/type-helpers'; 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 { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory'; import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory';
import { Structure } from '../../mol-model/structure'; import { Structure } from '../../mol-model/structure';
...@@ -24,9 +20,10 @@ import { PluginStateTransform, PluginStateObject as PSO } from '../../mol-plugin ...@@ -24,9 +20,10 @@ import { PluginStateTransform, PluginStateObject as PSO } from '../../mol-plugin
import { ParamDefinition as PD } from '../../mol-util/param-definition'; import { ParamDefinition as PD } from '../../mol-util/param-definition';
import { Task } from '../../mol-task'; import { Task } from '../../mol-task';
import { StateObject } from '../../mol-state'; import { StateObject } from '../../mol-state';
import { ViewportComponent, StructurePreset } from './viewport'; import { ViewportComponent, StructurePreset, ShowButtons } from './viewport';
import { PluginBehaviors } from '../../mol-plugin/behavior'; import { PluginBehaviors } from '../../mol-plugin/behavior';
import { ColorNames } from '../../mol-util/color/names'; import { ColorNames } from '../../mol-util/color/names';
import { Color } from '../../mol-util/color';
require('mol-plugin-ui/skin/light.scss'); require('mol-plugin-ui/skin/light.scss');
...@@ -53,13 +50,25 @@ const DefaultViewerOptions = { ...@@ -53,13 +50,25 @@ const DefaultViewerOptions = {
pdbProvider: PluginConfig.Download.DefaultPdbProvider.defaultValue, pdbProvider: PluginConfig.Download.DefaultPdbProvider.defaultValue,
emdbProvider: PluginConfig.Download.DefaultEmdbProvider.defaultValue, emdbProvider: PluginConfig.Download.DefaultEmdbProvider.defaultValue,
}; };
type ViewerOptions = typeof DefaultViewerOptions;
class Viewer { class Viewer {
plugin: PluginContext plugin: PluginContext
constructor(elementOrId: string | HTMLElement, options: Partial<ViewerOptions> = {}) { constructor(elementOrId: string | HTMLElement, colors = [Color(0x992211), Color(0xDDDDDD)], showButtons = true) {
const o = { ...DefaultViewerOptions, ...options }; const o = { ...DefaultViewerOptions, ...{
layoutIsExpanded: false,
layoutShowControls: false,
layoutShowRemoteState: false,
layoutShowSequence: true,
layoutShowLog: false,
layoutShowLeftPanel: true,
viewportShowExpand: true,
viewportShowControls: false,
viewportShowSettings: false,
viewportShowSelectionMode: false,
viewportShowAnimation: false,
} };
const spec: PluginSpec = { const spec: PluginSpec = {
actions: [...DefaultPluginSpec.actions], actions: [...DefaultPluginSpec.actions],
...@@ -104,7 +113,8 @@ class Viewer { ...@@ -104,7 +113,8 @@ class Viewer {
[PluginConfig.State.CurrentServer, o.pluginStateServer], [PluginConfig.State.CurrentServer, o.pluginStateServer],
[PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer], [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
[PluginConfig.Download.DefaultPdbProvider, o.pdbProvider], [PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],
[PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider] [PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider],
[ShowButtons, showButtons]
] ]
}; };
...@@ -114,6 +124,15 @@ class Viewer { ...@@ -114,6 +124,15 @@ class Viewer {
if (!element) throw new Error(`Could not get element with id '${elementOrId}'`); if (!element) throw new Error(`Could not get element with id '${elementOrId}'`);
this.plugin = createPlugin(element, spec); this.plugin = createPlugin(element, spec);
(this.plugin.customState as any) = {
colorPalette: {
name: 'colors',
params: { list: { colors } }
}
};
this.plugin.behaviors.canvas3d.initialized.subscribe(v => {
if (v) {
PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: {
renderer: { renderer: {
...this.plugin.canvas3d!.props.renderer, ...this.plugin.canvas3d!.props.renderer,
...@@ -125,29 +144,7 @@ class Viewer { ...@@ -125,29 +144,7 @@ class Viewer {
} }
} }); } });
} }
});
setRemoteSnapshot(id: string) {
const url = `${this.plugin.config.get(PluginConfig.State.CurrentServer)}/get/${id}`;
return PluginCommands.State.Snapshots.Fetch(this.plugin, { url });
}
loadSnapshotFromUrl(url: string, type: PluginState.SnapshotType) {
return PluginCommands.State.Snapshots.OpenUrl(this.plugin, { url, type });
}
loadStructureFromUrl(url: string, format: BuiltInTrajectoryFormat = 'mmcif', isBinary = false) {
const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
source: {
name: 'url',
params: {
url: Asset.Url(url),
format: format as any,
isBinary,
options: params.source.params.options,
}
}
}));
} }
async loadStructuresFromUrlsAndMerge(sources: { url: string, format: BuiltInTrajectoryFormat, isBinary?: boolean }[]) { async loadStructuresFromUrlsAndMerge(sources: { url: string, format: BuiltInTrajectoryFormat, isBinary?: boolean }[]) {
...@@ -162,69 +159,19 @@ class Viewer { ...@@ -162,69 +159,19 @@ class Viewer {
structures.push({ ref: structureProperties?.ref || structure.ref }); structures.push({ ref: structureProperties?.ref || structure.ref });
} }
// remove current structuresfrom hierarchy as they will be merged
// TODO only works with using loadStructuresFromUrlsAndMerge once
// need some more API metho to work with the hierarchy
this.plugin.managers.structure.hierarchy.updateCurrent(this.plugin.managers.structure.hierarchy.current.structures, 'remove');
const dependsOn = structures.map(({ ref }) => ref); const dependsOn = structures.map(({ ref }) => ref);
const data = this.plugin.state.data.build().toRoot().apply(MergeStructures, { structures }, { dependsOn }); const data = this.plugin.state.data.build().toRoot().apply(MergeStructures, { structures }, { dependsOn });
const structure = await data.commit(); const structure = await data.commit();
const structureProperties = await this.plugin.builders.structure.insertStructureProperties(structure); const structureProperties = await this.plugin.builders.structure.insertStructureProperties(structure);
this.plugin.behaviors.canvas3d.initialized.subscribe(async v => {
await this.plugin.builders.structure.representation.applyPreset(structureProperties || structure, StructurePreset); await this.plugin.builders.structure.representation.applyPreset(structureProperties || structure, StructurePreset);
} });
async loadStructureFromData(data: string | number[], format: BuiltInTrajectoryFormat, options?: { dataLabel?: string }) {
const _data = await this.plugin.builders.data.rawData({ data, label: options?.dataLabel });
const trajectory = await this.plugin.builders.structure.parseTrajectory(_data, format);
await this.plugin.builders.structure.hierarchy.applyPreset(trajectory, 'default');
}
loadPdb(pdb: string) {
const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
const provider = this.plugin.config.get(PluginConfig.Download.DefaultPdbProvider)!;
return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
source: {
name: 'pdb' as const,
params: {
provider: {
id: pdb,
server: {
name: provider,
params: PdbDownloadProvider[provider].defaultValue as any
}
},
options: params.source.params.options,
}
}
}));
}
loadPdbDev(pdbDev: string) {
const params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj!, this.plugin);
return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
source: {
name: 'pdb-dev' as const,
params: {
provider: {
id: pdbDev,
encoding: 'bcif',
},
options: params.source.params.options,
}
}
}));
}
loadEmdb(emdb: string) {
const provider = this.plugin.config.get(PluginConfig.Download.DefaultEmdbProvider)!;
return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadDensity, {
source: {
name: 'pdb-emd-ds' as const,
params: {
provider: {
id: emdb,
server: provider,
},
detail: 3,
}
}
}));
} }
} }
...@@ -261,3 +208,4 @@ const MergeStructures = PluginStateTransform.BuiltIn({ ...@@ -261,3 +208,4 @@ const MergeStructures = PluginStateTransform.BuiltIn({
}); });
(window as any).DockingViewer = Viewer; (window as any).DockingViewer = Viewer;
export { Viewer as DockingViewer };
\ No newline at end of file
src/examples/docking-viewer/viewport.tsx → src/apps/docking-viewer/viewport.tsx
+ 67
− 46
View file @ 24143d70
...@@ -17,10 +17,11 @@ import { StructureSelectionQueries, StructureSelectionQuery } from '../../mol-pl ...@@ -17,10 +17,11 @@ import { StructureSelectionQueries, StructureSelectionQuery } from '../../mol-pl
import { MolScriptBuilder as MS } from '../../mol-script/language/builder'; import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
import { InteractionsRepresentationProvider } from '../../mol-model-props/computed/representations/interactions'; import { InteractionsRepresentationProvider } from '../../mol-model-props/computed/representations/interactions';
import { InteractionTypeColorThemeProvider } from '../../mol-model-props/computed/themes/interaction-type'; import { InteractionTypeColorThemeProvider } from '../../mol-model-props/computed/themes/interaction-type';
import { compile } from '../../mol-script/runtime/query/compiler';
import { StructureSelection, QueryContext, Structure } from '../../mol-model/structure';
import { PluginCommands } from '../../mol-plugin/commands'; import { PluginCommands } from '../../mol-plugin/commands';
import { PluginContext } from '../../mol-plugin/context'; import { PluginContext } from '../../mol-plugin/context';
import { StructureRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
import { Color } from '../../mol-util/color';
import { PluginConfig } from '../../mol-plugin/config';
function shinyStyle(plugin: PluginContext) { function shinyStyle(plugin: PluginContext) {
return PluginCommands.Canvas3D.SetSettings(plugin, { settings: { return PluginCommands.Canvas3D.SetSettings(plugin, { settings: {
...@@ -76,6 +77,8 @@ const PresetParams = { ...@@ -76,6 +77,8 @@ const PresetParams = {
...StructureRepresentationPresetProvider.CommonParams, ...StructureRepresentationPresetProvider.CommonParams,
}; };
export const StructurePreset = StructureRepresentationPresetProvider({ export const StructurePreset = StructureRepresentationPresetProvider({
id: 'preset-structure', id: 'preset-structure',
display: { name: 'Structure' }, display: { name: 'Structure' },
...@@ -89,10 +92,10 @@ export const StructurePreset = StructureRepresentationPresetProvider({ ...@@ -89,10 +92,10 @@ export const StructurePreset = StructureRepresentationPresetProvider({
polymer: await presetStaticComponent(plugin, structureCell, 'polymer'), polymer: await presetStaticComponent(plugin, structureCell, 'polymer'),
}; };
const { update, builder, typeParams, color } = StructureRepresentationPresetProvider.reprBuilder(plugin, params); const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
const representations = { const representations = {
ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, sizeFactor: 0.26 }, color }, { tag: 'ligand' }), ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, sizeFactor: 0.35 }, color: 'element-symbol', colorParams: { carbonByChainId: { name: 'off', params: {} } } }, { tag: 'ligand' }),
polymer: builder.buildRepresentation(update, components.polymer, { type: 'cartoon', typeParams: { ...typeParams }, color }, { tag: 'polymer' }), polymer: builder.buildRepresentation(update, components.polymer, { type: 'cartoon', typeParams: { ...typeParams }, color: 'chain-id', colorParams: { palette: (plugin.customState as any).colorPalette } }, { tag: 'polymer' }),
}; };
await update.commit({ revertOnError: true }); await update.commit({ revertOnError: true });
...@@ -112,12 +115,14 @@ export const IllustrativePreset = StructureRepresentationPresetProvider({ ...@@ -112,12 +115,14 @@ export const IllustrativePreset = StructureRepresentationPresetProvider({
if (!structureCell) return {}; if (!structureCell) return {};
const components = { const components = {
all: await presetStaticComponent(plugin, structureCell, 'all') ligand: await presetStaticComponent(plugin, structureCell, 'ligand'),
polymer: await presetStaticComponent(plugin, structureCell, 'polymer'),
}; };
const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params); const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
const representations = { const representations = {
all: builder.buildRepresentation(update, components.all, { type: 'spacefill', typeParams: { ...typeParams }, color: 'illustrative' }, { tag: 'all' }), ligand: builder.buildRepresentation(update, components.ligand, { type: 'spacefill', typeParams: { ...typeParams }, color: 'element-symbol', colorParams: { carbonByChainId: { name: 'off', params: {} } } }, { tag: 'ligand' }),
polymer: builder.buildRepresentation(update, components.polymer, { type: 'spacefill', typeParams: { ...typeParams }, color: 'illustrative', colorParams: { palette: (plugin.customState as any).colorPalette } }, { tag: 'polymer' }),
}; };
await update.commit({ revertOnError: true }); await update.commit({ revertOnError: true });
...@@ -128,6 +133,34 @@ export const IllustrativePreset = StructureRepresentationPresetProvider({ ...@@ -128,6 +133,34 @@ export const IllustrativePreset = StructureRepresentationPresetProvider({
} }
}); });
const SurfacePreset = StructureRepresentationPresetProvider({
id: 'preset-surface',
display: { name: 'Surface' },
params: () => PresetParams,
async apply(ref, params, plugin) {
const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);
const structure = structureCell?.obj?.data;
if (!structureCell || !structure) return {};
const components = {
ligand: await presetStaticComponent(plugin, structureCell, 'ligand'),
polymer: await presetStaticComponent(plugin, structureCell, 'polymer'),
};
const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
const representations = {
ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, sizeFactor: 0.26 }, color: 'element-symbol', colorParams: { carbonByChainId: { name: 'off', params: {} } } }, { tag: 'ligand' }),
polymer: builder.buildRepresentation(update, components.polymer, { type: 'molecular-surface', typeParams: { ...typeParams, quality: 'custom', resolution: 0.5, doubleSided: true }, color: 'partial-charge' }, { tag: 'polymer' }),
};
await update.commit({ revertOnError: true });
await shinyStyle(plugin);
plugin.managers.interactivity.setProps({ granularity: 'residue' });
return { components, representations };
}
});
const PocketPreset = StructureRepresentationPresetProvider({ const PocketPreset = StructureRepresentationPresetProvider({
id: 'preset-pocket', id: 'preset-pocket',
display: { name: 'Pocket' }, display: { name: 'Pocket' },
...@@ -144,7 +177,7 @@ const PocketPreset = StructureRepresentationPresetProvider({ ...@@ -144,7 +177,7 @@ const PocketPreset = StructureRepresentationPresetProvider({
const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params); const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
const representations = { const representations = {
ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, sizeFactor: 0.26 }, color: 'partial-charge' }, { tag: 'ligand' }), ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, sizeFactor: 0.26 }, color: 'element-symbol', colorParams: { carbonByChainId: { name: 'off', params: {} } } }, { tag: 'ligand' }),
surroundings: builder.buildRepresentation(update, components.surroundings, { type: 'molecular-surface', typeParams: { ...typeParams, includeParent: true, quality: 'custom', resolution: 0.2, doubleSided: true }, color: 'partial-charge' }, { tag: 'surroundings' }), surroundings: builder.buildRepresentation(update, components.surroundings, { type: 'molecular-surface', typeParams: { ...typeParams, includeParent: true, quality: 'custom', resolution: 0.2, doubleSided: true }, color: 'partial-charge' }, { tag: 'surroundings' }),
}; };
...@@ -152,11 +185,6 @@ const PocketPreset = StructureRepresentationPresetProvider({ ...@@ -152,11 +185,6 @@ const PocketPreset = StructureRepresentationPresetProvider({
await shinyStyle(plugin); await shinyStyle(plugin);
plugin.managers.interactivity.setProps({ granularity: 'element' }); plugin.managers.interactivity.setProps({ granularity: 'element' });
const compiled = compile<StructureSelection>(StructureSelectionQueries.ligand.expression);
const result = compiled(new QueryContext(structure));
const selection = StructureSelection.unionStructure(result);
plugin.managers.camera.focusLoci(Structure.toStructureElementLoci(selection));
return { components, representations }; return { components, representations };
} }
}); });
...@@ -172,56 +200,46 @@ const InteractionsPreset = StructureRepresentationPresetProvider({ ...@@ -172,56 +200,46 @@ const InteractionsPreset = StructureRepresentationPresetProvider({
const components = { const components = {
ligand: await presetStaticComponent(plugin, structureCell, 'ligand'), ligand: await presetStaticComponent(plugin, structureCell, 'ligand'),
selection: await plugin.builders.structure.tryCreateComponentFromSelection(structureCell, ligandPlusSurroundings, `selection`) surroundings: await plugin.builders.structure.tryCreateComponentFromSelection(structureCell, ligandSurroundings, `surroundings`),
interactions: await plugin.builders.structure.tryCreateComponentFromSelection(structureCell, ligandPlusSurroundings, `interactions`)
}; };
const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params); const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);
const representations = { const representations = {
ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, sizeFactor: 0.26 }, color: 'partial-charge' }, { tag: 'ligand' }), ligand: builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick', typeParams: { ...typeParams, sizeFactor: 0.3 }, color: 'element-symbol', colorParams: { carbonByChainId: { name: 'off', params: {} } } }, { tag: 'ligand' }),
ballAndStick: builder.buildRepresentation(update, components.selection, { type: 'ball-and-stick', typeParams: { ...typeParams, sizeFactor: 0.1, sizeAspectRatio: 1 }, color: 'partial-charge' }, { tag: 'ball-and-stick' }), ballAndStick: builder.buildRepresentation(update, components.surroundings, { type: 'ball-and-stick', typeParams: { ...typeParams, sizeFactor: 0.1, sizeAspectRatio: 1 }, color: 'element-symbol', colorParams: { carbonByChainId: { name: 'off', params: {} } } }, { tag: 'ball-and-stick' }),
interactions: builder.buildRepresentation(update, components.selection, { type: InteractionsRepresentationProvider, typeParams: { ...typeParams }, color: InteractionTypeColorThemeProvider }, { tag: 'interactions' }), interactions: builder.buildRepresentation(update, components.interactions, { type: InteractionsRepresentationProvider, typeParams: { ...typeParams }, color: InteractionTypeColorThemeProvider }, { tag: 'interactions' }),
label: builder.buildRepresentation(update, components.surroundings, { type: 'label', typeParams: { ...typeParams, background: false, borderWidth: 0.1 }, color: 'uniform', colorParams: { value: Color(0x000000) } }, { tag: 'label' }),
}; };
await update.commit({ revertOnError: true }); await update.commit({ revertOnError: true });
await shinyStyle(plugin); await shinyStyle(plugin);
plugin.managers.interactivity.setProps({ granularity: 'element' }); plugin.managers.interactivity.setProps({ granularity: 'element' });
const compiled = compile<StructureSelection>(StructureSelectionQueries.ligand.expression);
const result = compiled(new QueryContext(structure));
const selection = StructureSelection.unionStructure(result);
plugin.managers.camera.focusLoci(Structure.toStructureElementLoci(selection));
return { components, representations }; return { components, representations };
} }
}); });
export const ShowButtons = PluginConfig.item('showButtons', true);
export class ViewportComponent extends PluginUIComponent { export class ViewportComponent extends PluginUIComponent {
structurePreset = () => { async _set(structures: readonly StructureRef[], preset: StructureRepresentationPresetProvider) {
this.plugin.managers.structure.component.applyPreset( await this.plugin.managers.structure.component.clear(structures);
this.plugin.managers.structure.hierarchy.selection.structures, await this.plugin.managers.structure.component.applyPreset(structures, preset);
StructurePreset
);
} }
illustrativePreset = () => { set = async (preset: StructureRepresentationPresetProvider) => {
this.plugin.managers.structure.component.applyPreset( await this._set(this.plugin.managers.structure.hierarchy.selection.structures, preset);
this.plugin.managers.structure.hierarchy.selection.structures,
IllustrativePreset
);
} }
pocketPreset = () => { structurePreset = () => this.set(StructurePreset);
this.plugin.managers.structure.component.applyPreset( illustrativePreset = () => this.set(IllustrativePreset);
this.plugin.managers.structure.hierarchy.selection.structures, surfacePreset = () => this.set(SurfacePreset);
PocketPreset pocketPreset = () => this.set(PocketPreset);
); interactionsPreset = () => this.set(InteractionsPreset);
}
interactionsPreset = () => { get showButtons () {
this.plugin.managers.structure.component.applyPreset( return this.plugin.config.get(ShowButtons);
this.plugin.managers.structure.hierarchy.selection.structures,
InteractionsPreset
);
} }
render() { render() {
...@@ -229,7 +247,7 @@ export class ViewportComponent extends PluginUIComponent { ...@@ -229,7 +247,7 @@ export class ViewportComponent extends PluginUIComponent {
return <> return <>
<Viewport /> <Viewport />
<div className='msp-viewport-top-left-controls'> {this.showButtons && <div className='msp-viewport-top-left-controls'>
<div style={{ marginBottom: '4px' }}> <div style={{ marginBottom: '4px' }}>
<Button onClick={this.structurePreset} >Structure</Button> <Button onClick={this.structurePreset} >Structure</Button>
</div> </div>
...@@ -237,12 +255,15 @@ export class ViewportComponent extends PluginUIComponent { ...@@ -237,12 +255,15 @@ export class ViewportComponent extends PluginUIComponent {
<Button onClick={this.illustrativePreset}>Illustrative</Button> <Button onClick={this.illustrativePreset}>Illustrative</Button>
</div> </div>
<div style={{ marginBottom: '4px' }}> <div style={{ marginBottom: '4px' }}>
<Button onClick={this.pocketPreset}>Pocket</Button> <Button onClick={this.surfacePreset}>Surface</Button>
</div> </div>
{/* <div style={{ marginBottom: '4px' }}>
<Button onClick={this.pocketPreset}>Pocket</Button>
</div> */}
<div style={{ marginBottom: '4px' }}> <div style={{ marginBottom: '4px' }}>
<Button onClick={this.interactionsPreset}>Interactions</Button> <Button onClick={this.interactionsPreset}>Interactions</Button>
</div> </div>
</div> </div>}
<VPControls /> <VPControls />
<BackgroundTaskProgress /> <BackgroundTaskProgress />
<div className='msp-highlight-toast-wrapper'> <div className='msp-highlight-toast-wrapper'>
......
webpack.config.js
+ 2
− 1
View file @ 24143d70
const { createApp, createExample, createBrowserTest } = require('./webpack.config.common.js'); const { createApp, createExample, createBrowserTest } = require('./webpack.config.common.js');
const examples = ['proteopedia-wrapper', 'basic-wrapper', 'lighting', 'docking-viewer']; const examples = ['proteopedia-wrapper', 'basic-wrapper', 'lighting'];
const tests = [ const tests = [
'font-atlas', 'font-atlas',
'marching-cubes', 'marching-cubes',
...@@ -10,6 +10,7 @@ const tests = [ ...@@ -10,6 +10,7 @@ const tests = [
module.exports = [ module.exports = [
createApp('viewer', 'molstar'), createApp('viewer', 'molstar'),
createApp('docking-viewer', 'molstar'),
...examples.map(createExample), ...examples.map(createExample),
...tests.map(createBrowserTest) ...tests.map(createBrowserTest)
] ]
\ No newline at end of file
webpack.config.production.js
+ 1
− 0
View file @ 24143d70
...@@ -4,5 +4,6 @@ const examples = ['proteopedia-wrapper', 'basic-wrapper', 'lighting']; ...@@ -4,5 +4,6 @@ const examples = ['proteopedia-wrapper', 'basic-wrapper', 'lighting'];
module.exports = [ module.exports = [
createApp('viewer', 'molstar'), createApp('viewer', 'molstar'),
createApp('docking-viewer', 'molstar'),
...examples.map(createExample) ...examples.map(createExample)
] ]
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment