@3dbionotes/pdbe-molstar
Version:
Molstar implementation for PDBe
68 lines • 8.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PDBeViewportControlsVolume = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var config_1 = require("Molstar/mol-plugin/config");
var common_1 = require("Molstar/mol-plugin-ui/controls/common");
var selection_1 = require("Molstar/mol-plugin-ui/structure/selection");
var screenshot_1 = require("Molstar/mol-plugin-ui/viewport/screenshot");
var simple_settings_1 = require("Molstar/mol-plugin-ui/viewport/simple-settings");
var viewport_1 = require("Molstar/mol-plugin-ui/viewport");
var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
var pdbe_volume_1 = require("./pdbe-volume");
var PDBeViewportControlsVolume = /** @class */ (function (_super) {
tslib_1.__extends(PDBeViewportControlsVolume, _super);
function PDBeViewportControlsVolume(props, context) {
var _this = _super.call(this, props, context) || this;
_this.toggleVolumeExpanded = function () {
_this.setState(function (prevState) {
return { isVolumeExpanded: !prevState.isVolumeExpanded };
});
};
_this.state = tslib_1.__assign(tslib_1.__assign({}, _this.state), { isVolumeExpanded: false, isVolumeVisible: false });
return _this;
}
PDBeViewportControlsVolume.prototype.isBlack = function (customeState) {
if (customeState && customeState.initParams && customeState.initParams.bgColor) {
var color = customeState.initParams.bgColor;
if (color.r === 0 && color.g === 0 && color.b === 0)
return true;
}
return false;
};
PDBeViewportControlsVolume.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.managers.volume.hierarchy.behaviors.selection, function (sel) {
_this.setState(function () { return ({
isVolumeVisible: sel.hierarchy.volumes.length > 0
}); });
});
};
PDBeViewportControlsVolume.prototype.render = function () {
var _a = this.state, isVolumeVisible = _a.isVolumeVisible, isVolumeExpanded = _a.isVolumeExpanded;
var customeState = this.plugin.customState;
var showPDBeLink = false;
if (customeState && customeState.initParams && customeState.initParams.moleculeId && customeState.initParams.pdbeLink)
showPDBeLink = true;
if (customeState && customeState.initParams && customeState.initParams.superposition)
showPDBeLink = false;
var bgColor = this.isBlack(customeState) ? '#fff' : '#555';
var pdbeLink = {
parentStyle: { width: 'auto' },
containerStyle: { position: 'absolute', right: '10px', top: '10px' },
style: { display: 'inline-block', fontSize: '14px', color: bgColor, borderBottom: 'none', cursor: 'pointer', textDecoration: 'none' },
pdbeImg: {
src: 'https://www.ebi.ac.uk/pdbe/entry/static/images/logos/PDBe/logo_T_64.png',
alt: 'PDBe logo',
style: { height: '12px', width: '12px', border: 0, position: 'absolute', margin: '4px 0 0 -13px' }
}
};
var vwpBtnsTopMargin = { marginTop: '22px' };
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showPDBeLink && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: pdbeLink.containerStyle }, { children: (0, jsx_runtime_1.jsxs)("a", tslib_1.__assign({ className: 'msp-pdbe-link', style: pdbeLink.style, target: "_blank", href: "https://pdbe.org/".concat(customeState.initParams.moleculeId) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: pdbeLink.pdbeImg.src, alt: pdbeLink.pdbeImg.alt, style: pdbeLink.pdbeImg.style }), customeState.initParams.moleculeId] })) })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-viewport-controls', onMouseMove: this.onMouseMove, style: showPDBeLink ? vwpBtnsTopMargin : void 0 }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-viewport-controls-buttons' }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "msp-pdbe-control-reset-camera" }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), this.icon(icons_1.AutorenewSvg, this.resetCamera, 'Reset Camera')] })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "msp-pdbe-control-snapshot" }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), this.icon(icons_1.CameraOutlinedSvg, this.toggleScreenshotExpanded, 'Screenshot / State Snapshot', this.state.isScreenshotExpanded)] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "msp-pdbe-control-toggle-controls-panel" }, { children: this.icon(icons_1.BuildOutlinedSvg, this.toggleControls, 'Toggle Controls Panel', this.plugin.layout.state.showControls) })), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowExpand) && ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "msp-pdbe-control-toggle-expanded-viewport" }, { children: this.icon(icons_1.FullscreenSvg, this.toggleExpanded, 'Toggle Expanded Viewport', this.plugin.layout.state.isExpanded) }))), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "msp-pdbe-control-settings" }, { children: this.icon(icons_1.TuneSvg, this.toggleSettingsExpanded, 'Settings / Controls Info', this.state.isSettingsExpanded) }))] }), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowSelectionMode) && (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "msp-pdbe-control-toggle-selection-mode" }, { children: (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, {}) }))] }), isVolumeVisible &&
(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "msp-pdbe-control-volume" }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), this.icon(icons_1.BlurOnSvg, this.toggleVolumeExpanded, 'Volume', isVolumeExpanded)] }))] })), this.state.isScreenshotExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-viewport-controls-panel' }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, tslib_1.__assign({ header: 'Screenshot / State', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleScreenshotExpanded, topRightIcon: icons_1.CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: (0, jsx_runtime_1.jsx)(screenshot_1.DownloadScreenshotControls, { close: this.toggleScreenshotExpanded }) })) })), this.state.isSettingsExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-viewport-controls-panel' }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, tslib_1.__assign({ header: 'Settings / Controls Info', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleSettingsExpanded, topRightIcon: icons_1.CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: (0, jsx_runtime_1.jsx)(simple_settings_1.SimpleSettingsControl, {}) })) })), isVolumeExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-viewport-controls-panel' }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, tslib_1.__assign({ header: 'Volume', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleVolumeExpanded, topRightIcon: icons_1.CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: (0, jsx_runtime_1.jsx)(pdbe_volume_1.VolumeSourceCustomControls, {}) })) }))] }))] });
};
return PDBeViewportControlsVolume;
}(viewport_1.ViewportControls));
exports.PDBeViewportControlsVolume = PDBeViewportControlsVolume;
//# sourceMappingURL=pdbe-viewport-controls-volume.js.map