molstar
Version:
A comprehensive macromolecular library.
228 lines • 12.9 kB
JavaScript
/**
* Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author David Sehnal <david.sehnal@gmail.com>
*/
import { __assign, __awaiter, __generator } from "tslib";
import { BehaviorSubject } from 'rxjs';
import { debounceTime, skip } from 'rxjs/operators';
import { CreateOrbitalDensityVolume, CreateOrbitalRepresentation3D, CreateOrbitalVolume, StaticBasisAndOrbitals } from '../../extensions/alpha-orbitals/transforms';
import { canComputeGrid3dOnGPU } from '../../mol-gl/compute/grid3d';
import { createPluginAsync } from '../../mol-plugin-ui';
import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
import { PluginCommands } from '../../mol-plugin/commands';
import { PluginConfig } from '../../mol-plugin/config';
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 './index.html';
require('mol-plugin-ui/skin/light.scss');
var AlphaOrbitalsExample = /** @class */ (function () {
function AlphaOrbitalsExample() {
this.params = new BehaviorSubject({});
this.state = new BehaviorSubject({ show: { name: 'orbital', params: { index: 32 } }, isoValue: 1, gpuSurface: false });
this.selectors = void 0;
this.basis = void 0;
this.currentParams = __assign({}, this.state.value);
}
AlphaOrbitalsExample.prototype.init = function (target) {
var _a;
return __awaiter(this, void 0, void 0, function () {
var defaultSpec, _b;
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
defaultSpec = DefaultPluginUISpec();
_b = this;
return [4 /*yield*/, createPluginAsync(typeof target === 'string' ? document.getElementById(target) : target, __assign(__assign({}, defaultSpec), { layout: {
initial: {
isExpanded: false,
showControls: false
},
}, components: {
controls: { left: 'none', right: 'none', top: 'none', bottom: 'none' },
}, canvas3d: {
camera: {
helper: { axes: { name: 'off', params: {} } }
}
}, config: [
[PluginConfig.Viewport.ShowExpand, false],
[PluginConfig.Viewport.ShowControls, false],
[PluginConfig.Viewport.ShowSelectionMode, false],
[PluginConfig.Viewport.ShowAnimation, false],
] }))];
case 1:
_b.plugin = _c.sent();
this.plugin.managers.interactivity.setProps({ granularity: 'element' });
if (!canComputeGrid3dOnGPU((_a = this.plugin.canvas3d) === null || _a === void 0 ? void 0 : _a.webgl)) {
PluginCommands.Toast.Show(this.plugin, {
title: 'Error',
message: "Browser/device does not support required WebGL extension (OES_texture_float)."
});
return [2 /*return*/];
}
this.load(__assign({ moleculeSdf: DemoMoleculeSDF }, DemoOrbitals));
mountControls(this, document.getElementById('controls'));
return [2 /*return*/];
}
});
});
};
AlphaOrbitalsExample.prototype.clearVolume = function () {
if (!this.selectors)
return;
var v = this.selectors.volume;
this.selectors = void 0;
return this.plugin.build().delete(v).commit();
};
AlphaOrbitalsExample.prototype.syncVolume = function () {
var _a, _b;
return __awaiter(this, void 0, void 0, function () {
var state, update, volume, positive, negative, index_1, volume, positive;
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
if (!((_a = this.basis) === null || _a === void 0 ? void 0 : _a.isOk))
return [2 /*return*/];
state = this.state.value;
if (!(state.show.name !== ((_b = this.selectors) === null || _b === void 0 ? void 0 : _b.type))) return [3 /*break*/, 2];
return [4 /*yield*/, this.clearVolume()];
case 1:
_c.sent();
_c.label = 2;
case 2:
update = this.plugin.build();
if (state.show.name === 'orbital') {
if (!this.selectors) {
volume = update
.to(this.basis)
.apply(CreateOrbitalVolume, { index: state.show.params.index });
positive = volume.apply(CreateOrbitalRepresentation3D, this.volumeParams('positive', ColorNames.blue)).selector;
negative = volume.apply(CreateOrbitalRepresentation3D, this.volumeParams('negative', ColorNames.red)).selector;
this.selectors = { type: 'orbital', volume: volume.selector, positive: positive, negative: negative };
}
else {
index_1 = state.show.params.index;
update.to(this.selectors.volume).update(CreateOrbitalVolume, function () { return ({ index: index_1 }); });
}
}
else {
if (!this.selectors) {
volume = update
.to(this.basis)
.apply(CreateOrbitalDensityVolume);
positive = volume.apply(CreateOrbitalRepresentation3D, this.volumeParams('positive', ColorNames.blue)).selector;
this.selectors = { type: 'density', volume: volume.selector, positive: positive };
}
}
return [4 /*yield*/, update.commit()];
case 3:
_c.sent();
if (!(this.currentParams.gpuSurface !== this.state.value.gpuSurface)) return [3 /*break*/, 5];
return [4 /*yield*/, this.setIsovalue()];
case 4:
_c.sent();
_c.label = 5;
case 5:
this.currentParams = this.state.value;
return [2 /*return*/];
}
});
});
};
AlphaOrbitalsExample.prototype.setIsovalue = function () {
var _a;
if (!this.selectors)
return;
this.currentParams = this.state.value;
var update = this.plugin.build();
update.to(this.selectors.positive).update(this.volumeParams('positive', ColorNames.blue));
if (((_a = this.selectors) === null || _a === void 0 ? void 0 : _a.type) === 'orbital') {
update.to(this.selectors.negative).update(this.volumeParams('negative', ColorNames.red));
}
return update.commit();
};
AlphaOrbitalsExample.prototype.volumeParams = function (kind, color) {
return {
alpha: 0.85,
color: color,
directVolume: this.state.value.gpuSurface,
kind: kind,
relativeIsovalue: this.state.value.isoValue,
pickable: false,
xrayShaded: true,
tryUseGpu: false
};
};
AlphaOrbitalsExample.prototype.load = function (input) {
return __awaiter(this, void 0, void 0, function () {
var data, trajectory, model, structure, all, _a;
var _this = this;
return __generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, this.plugin.clear()];
case 1:
_b.sent();
return [4 /*yield*/, this.plugin.builders.data.rawData({ data: input.moleculeSdf }, { state: { isGhost: true } })];
case 2:
data = _b.sent();
return [4 /*yield*/, this.plugin.builders.structure.parseTrajectory(data, 'mol')];
case 3:
trajectory = _b.sent();
return [4 /*yield*/, this.plugin.builders.structure.createModel(trajectory)];
case 4:
model = _b.sent();
return [4 /*yield*/, this.plugin.builders.structure.createStructure(model)];
case 5:
structure = _b.sent();
return [4 /*yield*/, this.plugin.builders.structure.tryCreateComponentStatic(structure, 'all')];
case 6:
all = _b.sent();
if (!all) return [3 /*break*/, 8];
return [4 /*yield*/, this.plugin.builders.structure.representation.addRepresentation(all, { type: 'ball-and-stick', color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } } })];
case 7:
_b.sent();
_b.label = 8;
case 8:
_a = this;
return [4 /*yield*/, this.plugin.build().toRoot()
.apply(StaticBasisAndOrbitals, { basis: input.basis, order: input.order, orbitals: input.orbitals })
.commit()];
case 9:
_a.basis = _b.sent();
return [4 /*yield*/, this.syncVolume()];
case 10:
_b.sent();
this.params.next({
show: ParamDefinition.MappedStatic('orbital', {
'orbital': ParamDefinition.Group({
index: ParamDefinition.Numeric(32, { min: 0, max: input.orbitals.length - 1 }, { immediateUpdate: true, isEssential: true }),
}),
'density': ParamDefinition.EmptyGroup()
}, { cycle: true }),
isoValue: ParamDefinition.Numeric(this.currentParams.isoValue, { min: 0.5, max: 3, step: 0.1 }, { immediateUpdate: true, isEssential: false }),
gpuSurface: ParamDefinition.Boolean(this.currentParams.gpuSurface, { isHidden: true })
});
this.state.pipe(skip(1), debounceTime(1000 / 24)).subscribe(function (params) { return __awaiter(_this, void 0, void 0, function () {
return __generator(this, function (_a) {
if (params.show.name !== this.currentParams.show.name
|| (params.show.name === 'orbital' && this.currentParams.show.name === 'orbital' && params.show.params.index !== this.currentParams.show.params.index)) {
this.syncVolume();
}
else if (params.isoValue !== this.currentParams.isoValue || params.gpuSurface !== this.currentParams.gpuSurface) {
this.setIsovalue();
}
return [2 /*return*/];
});
}); });
return [2 /*return*/];
}
});
});
};
return AlphaOrbitalsExample;
}());
export { AlphaOrbitalsExample };
window.AlphaOrbitalsExample = new AlphaOrbitalsExample();
//# sourceMappingURL=index.js.map