molstar
Version:
A comprehensive macromolecular library.
83 lines • 7.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Viewport = exports.Logo = exports.ViewportControls = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var commands_1 = require("../mol-plugin/commands");
var config_1 = require("../mol-plugin/config");
var base_1 = require("./base");
var common_1 = require("./controls/common");
var icons_1 = require("./controls/icons");
var selection_1 = require("./structure/selection");
var canvas_1 = require("./viewport/canvas");
var screenshot_1 = require("./viewport/screenshot");
var simple_settings_1 = require("./viewport/simple-settings");
var ViewportControls = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ViewportControls, _super);
function ViewportControls() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.allCollapsedState = {
isSettingsExpanded: false,
isScreenshotExpanded: false
};
_this.state = (0, tslib_1.__assign)({}, _this.allCollapsedState);
_this.resetCamera = function () {
commands_1.PluginCommands.Camera.Reset(_this.plugin, {});
};
_this.toggleSettingsExpanded = _this.toggle('isSettingsExpanded');
_this.toggleScreenshotExpanded = _this.toggle('isScreenshotExpanded');
_this.toggleControls = function () {
commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { showControls: !_this.plugin.layout.state.showControls } });
};
_this.toggleExpanded = function () {
commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { isExpanded: !_this.plugin.layout.state.isExpanded } });
};
_this.setSettings = function (p) {
var _a;
commands_1.PluginCommands.Canvas3D.SetSettings(_this.plugin, { settings: (_a = {}, _a[p.name] = p.value, _a) });
};
_this.setLayout = function (p) {
var _a;
commands_1.PluginCommands.Layout.Update(_this.plugin, { state: (_a = {}, _a[p.name] = p.value, _a) });
};
_this.screenshot = function () {
var _a;
(_a = _this.plugin.helpers.viewportScreenshot) === null || _a === void 0 ? void 0 : _a.download();
};
_this.onMouseMove = function (e) {
// ignore mouse moves when no button is held
if (e.buttons === 0)
e.stopPropagation();
};
return _this;
}
ViewportControls.prototype.toggle = function (panel) {
var _this = this;
return function (e) {
var _a;
_this.setState((0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.allCollapsedState), (_a = {}, _a[panel] = !_this.state[panel], _a)));
e === null || e === void 0 ? void 0 : e.currentTarget.blur();
};
};
ViewportControls.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
this.subscribe(this.plugin.layout.events.updated, function () { return _this.forceUpdate(); });
};
ViewportControls.prototype.icon = function (icon, onClick, title, isOn) {
if (isOn === void 0) { isOn = true; }
return (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icon, toggleState: isOn, onClick: onClick, title: title, style: { background: 'transparent' } }, void 0);
};
ViewportControls.prototype.render = function () {
return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-viewport-controls', onMouseMove: this.onMouseMove }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-viewport-controls-buttons' }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }, void 0), this.icon(icons_1.AutorenewSvg, this.resetCamera, 'Reset Camera')] }, void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }, void 0), this.icon(icons_1.CameraOutlinedSvg, this.toggleScreenshotExpanded, 'Screenshot / State Snapshot', this.state.isScreenshotExpanded)] }, void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }, void 0), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowControls) && this.icon(icons_1.BuildOutlinedSvg, this.toggleControls, 'Toggle Controls Panel', this.plugin.layout.state.showControls), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowExpand) && this.icon(icons_1.FullscreenSvg, this.toggleExpanded, 'Toggle Expanded Viewport', this.plugin.layout.state.isExpanded), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowSettings) && this.icon(icons_1.TuneSvg, this.toggleSettingsExpanded, 'Settings / Controls Info', this.state.isSettingsExpanded)] }, void 0), 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' }, void 0), (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, {}, void 0)] }, void 0)] }), void 0), this.state.isScreenshotExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-viewport-controls-panel' }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, (0, 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 }, void 0) }), void 0) }), void 0), this.state.isSettingsExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-viewport-controls-panel' }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, (0, 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, {}, void 0) }), void 0) }), void 0)] }), void 0);
};
return ViewportControls;
}(base_1.PluginUIComponent));
exports.ViewportControls = ViewportControls;
var Logo = function () {
return (0, jsx_runtime_1.jsx)("a", { className: 'msp-logo', href: 'https://molstar.org', target: '_blank' }, void 0);
};
exports.Logo = Logo;
var Viewport = function () { return (0, jsx_runtime_1.jsx)(canvas_1.ViewportCanvas, { logo: exports.Logo }, void 0); };
exports.Viewport = Viewport;
//# sourceMappingURL=viewport.js.map