molstar
Version:
A comprehensive macromolecular library.
190 lines • 12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Log = exports.DefaultViewport = exports.ControlsWrapper = exports.PluginContextContainer = exports.Plugin = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var React = (0, tslib_1.__importStar)(require("react"));
var mol_util_1 = require("../mol-util");
var base_1 = require("./base");
var controls_1 = require("./controls");
var left_panel_1 = require("./left-panel");
var sequence_1 = require("./sequence");
var task_1 = require("./task");
var toast_1 = require("./toast");
var viewport_1 = require("./viewport");
var commands_1 = require("../mol-plugin/commands");
var Plugin = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Plugin, _super);
function Plugin() {
return _super !== null && _super.apply(this, arguments) || this;
}
Plugin.prototype.region = function (kind, element) {
return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "msp-layout-region msp-layout-" + kind }, { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-layout-static' }, { children: element }), void 0) }), void 0);
};
Plugin.prototype.render = function () {
return (0, jsx_runtime_1.jsx)(base_1.PluginReactContext.Provider, (0, tslib_1.__assign)({ value: this.props.plugin }, { children: (0, jsx_runtime_1.jsx)(Layout, {}, void 0) }), void 0);
};
return Plugin;
}(React.Component));
exports.Plugin = Plugin;
var PluginContextContainer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(PluginContextContainer, _super);
function PluginContextContainer() {
return _super !== null && _super.apply(this, arguments) || this;
}
PluginContextContainer.prototype.render = function () {
return (0, jsx_runtime_1.jsx)(base_1.PluginReactContext.Provider, (0, tslib_1.__assign)({ value: this.props.plugin }, { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-plugin' }, { children: this.props.children }), void 0) }), void 0);
};
return PluginContextContainer;
}(React.Component));
exports.PluginContextContainer = PluginContextContainer;
var Layout = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Layout, _super);
function Layout() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.onDrop = function (ev) {
ev.preventDefault();
var file;
if (ev.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
for (var i = 0; i < ev.dataTransfer.items.length; i++) {
if (ev.dataTransfer.items[i].kind !== 'file')
continue;
file = ev.dataTransfer.items[i].getAsFile();
break;
}
}
else {
file = ev.dataTransfer.files[0];
}
if (!file)
return;
var fn = (file === null || file === void 0 ? void 0 : file.name.toLowerCase()) || '';
if (fn.endsWith('molx') || fn.endsWith('molj')) {
commands_1.PluginCommands.State.Snapshots.OpenFile(_this.plugin, { file: file });
}
};
_this.onDragOver = function (ev) {
ev.preventDefault();
};
return _this;
}
Layout.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.layout.events.updated, function () { return _this.forceUpdate(); });
};
Layout.prototype.region = function (kind, Element) {
return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "msp-layout-region msp-layout-" + kind }, { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-layout-static' }, { children: Element ? (0, jsx_runtime_1.jsx)(Element, {}, void 0) : null }), void 0) }), void 0);
};
Object.defineProperty(Layout.prototype, "layoutVisibilityClassName", {
get: function () {
var _a, _b;
var layout = this.plugin.layout.state;
var controls = (_b = (_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.controls) !== null && _b !== void 0 ? _b : {};
var classList = [];
if (controls.top === 'none' || !layout.showControls || layout.regionState.top === 'hidden') {
classList.push('msp-layout-hide-top');
}
if (controls.left === 'none' || !layout.showControls || layout.regionState.left === 'hidden') {
classList.push('msp-layout-hide-left');
}
else if (layout.regionState.left === 'collapsed') {
classList.push('msp-layout-collapse-left');
}
if (controls.right === 'none' || !layout.showControls || layout.regionState.right === 'hidden') {
classList.push('msp-layout-hide-right');
}
if (controls.bottom === 'none' || !layout.showControls || layout.regionState.bottom === 'hidden') {
classList.push('msp-layout-hide-bottom');
}
return classList.join(' ');
},
enumerable: false,
configurable: true
});
Object.defineProperty(Layout.prototype, "layoutClassName", {
get: function () {
var layout = this.plugin.layout.state;
var classList = ['msp-plugin-content'];
if (layout.isExpanded) {
classList.push('msp-layout-expanded');
}
else {
classList.push('msp-layout-standard', "msp-layout-standard-" + layout.controlsDisplay);
}
return classList.join(' ');
},
enumerable: false,
configurable: true
});
Layout.prototype.render = function () {
var _a, _b, _c, _d;
var layout = this.plugin.layout.state;
var controls = ((_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.controls) || {};
var viewport = ((_c = (_b = this.plugin.spec.components) === null || _b === void 0 ? void 0 : _b.viewport) === null || _c === void 0 ? void 0 : _c.view) || DefaultViewport;
return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-plugin', onDrop: this.onDrop, onDragOver: this.onDragOver }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: this.layoutClassName }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: this.layoutVisibilityClassName }, { children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || sequence_1.SequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || left_panel_1.LeftPanelControls), layout.showControls && controls.right !== 'none' && this.region('right', controls.right || ControlsWrapper), layout.showControls && controls.bottom !== 'none' && this.region('bottom', controls.bottom || Log)] }), void 0), !((_d = this.plugin.spec.components) === null || _d === void 0 ? void 0 : _d.hideTaskOverlay) && (0, jsx_runtime_1.jsx)(task_1.OverlayTaskProgress, {}, void 0)] }), void 0) }), void 0);
};
return Layout;
}(base_1.PluginUIComponent));
var ControlsWrapper = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ControlsWrapper, _super);
function ControlsWrapper() {
return _super !== null && _super.apply(this, arguments) || this;
}
ControlsWrapper.prototype.render = function () {
var _a;
var StructureTools = ((_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.structureTools) || controls_1.DefaultStructureTools;
return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-scrollable-container' }, { children: (0, jsx_runtime_1.jsx)(StructureTools, {}, void 0) }), void 0);
};
return ControlsWrapper;
}(base_1.PluginUIComponent));
exports.ControlsWrapper = ControlsWrapper;
var DefaultViewport = /** @class */ (function (_super) {
(0, tslib_1.__extends)(DefaultViewport, _super);
function DefaultViewport() {
return _super !== null && _super.apply(this, arguments) || this;
}
DefaultViewport.prototype.render = function () {
var _a, _b;
var VPControls = ((_b = (_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.viewport) === null || _b === void 0 ? void 0 : _b.controls) || viewport_1.ViewportControls;
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(viewport_1.Viewport, {}, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-viewport-top-left-controls' }, { children: [(0, jsx_runtime_1.jsx)(controls_1.AnimationViewportControls, {}, void 0), (0, jsx_runtime_1.jsx)(controls_1.TrajectoryViewportControls, {}, void 0), (0, jsx_runtime_1.jsx)(controls_1.StateSnapshotViewportControls, {}, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(controls_1.SelectionViewportControls, {}, void 0), (0, jsx_runtime_1.jsx)(VPControls, {}, void 0), (0, jsx_runtime_1.jsx)(task_1.BackgroundTaskProgress, {}, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-highlight-toast-wrapper' }, { children: [(0, jsx_runtime_1.jsx)(controls_1.LociLabels, {}, void 0), (0, jsx_runtime_1.jsx)(toast_1.Toasts, {}, void 0)] }), void 0)] }, void 0);
};
return DefaultViewport;
}(base_1.PluginUIComponent));
exports.DefaultViewport = DefaultViewport;
var Log = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Log, _super);
function Log() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.wrapper = React.createRef();
_this.state = { entries: _this.plugin.log.entries };
return _this;
}
Log.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.events.log, function () { return _this.setState({ entries: _this.plugin.log.entries }); });
};
Log.prototype.componentDidUpdate = function () {
this.scrollToBottom();
};
Log.prototype.scrollToBottom = function () {
var log = this.wrapper.current;
if (log)
log.scrollTop = log.scrollHeight - log.clientHeight - 1;
};
Log.prototype.render = function () {
// TODO: ability to show full log
// showing more entries dramatically slows animations.
var maxEntries = 10;
var xs = this.state.entries, l = xs.size;
var entries = [];
for (var i = Math.max(0, l - maxEntries), o = 0; i < l; i++) {
var e = xs.get(i);
entries.push((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-log-entry-badge msp-log-entry-' + e.type }, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-log-timestamp' }, { children: (0, mol_util_1.formatTime)(e.timestamp) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-log-entry' }, { children: e.message }), void 0)] }, o++));
}
return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ ref: this.wrapper, className: 'msp-log', style: { position: 'absolute', top: '0', right: '0', bottom: '0', left: '0', overflowY: 'auto' } }, { children: (0, jsx_runtime_1.jsx)("ul", (0, tslib_1.__assign)({ className: 'msp-list-unstyled' }, { children: entries }), void 0) }), void 0);
};
return Log;
}(base_1.PluginUIComponent));
exports.Log = Log;
//# sourceMappingURL=plugin.js.map