molstar 3.0.0 → 3.0.1

package/lib/commonjs/mol-plugin-ui/viewport/help.js

@@ -1,123 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HelpContent = exports.ViewportHelpContent = exports.HelpGroup = exports.HelpText = exports.BindingsHelp = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-var React = (0, tslib_1.__importStar)(require("react"));
-var binding_1 = require("../../mol-util/binding");
-var base_1 = require("../base");
-var mol_state_1 = require("../../mol-state");
-var representation_1 = require("../../mol-plugin/behavior/dynamic/representation");
-var representation_2 = require("../../mol-plugin/behavior/dynamic/representation");
-var icons_1 = require("../controls/icons");
-var common_1 = require("../controls/common");
-function getBindingsList(bindings) {
-    return Object.keys(bindings).map(function (k) { return [k, bindings[k]]; });
-}
-var BindingsHelp = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(BindingsHelp, _super);
-    function BindingsHelp() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    BindingsHelp.prototype.getBindingComponents = function () {
-        var bindingsList = getBindingsList(this.props.bindings);
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: bindingsList.map(function (value) {
-                var name = value[0], binding = value[1];
-                return !binding_1.Binding.isEmpty(binding)
-                    ? (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { marginBottom: '6px' } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: binding.action }, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: binding_1.Binding.format(binding, name) } }, void 0)] }), name)
-                    : null;
-            }) }, void 0);
-    };
-    BindingsHelp.prototype.render = function () {
-        return (0, jsx_runtime_1.jsx)(HelpText, { children: this.getBindingComponents() }, void 0);
-    };
-    return BindingsHelp;
-}(React.PureComponent));
-exports.BindingsHelp = BindingsHelp;
-var HelpText = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(HelpText, _super);
-    function HelpText() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    HelpText.prototype.render = function () {
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-help-text' }, { children: (0, jsx_runtime_1.jsx)("div", { children: this.props.children }, void 0) }), void 0);
-    };
-    return HelpText;
-}(React.PureComponent));
-exports.HelpText = HelpText;
-var HelpGroup = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(HelpGroup, _super);
-    function HelpGroup() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            header: _this.props.header,
-            isExpanded: !!_this.props.initiallyExpanded
-        };
-        _this.toggleExpanded = function () { return _this.setState({ isExpanded: !_this.state.isExpanded }); };
-        return _this;
-    }
-    HelpGroup.prototype.render = function () {
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-wrapper' }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.toggleExpanded }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.ArrowDropDownSvg : icons_1.ArrowRightSvg }, void 0), this.props.header] }), void 0) }), void 0), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset', style: { display: this.state.isExpanded ? 'block' : 'none' } }, { children: this.props.children }), void 0)] }), void 0);
-    };
-    return HelpGroup;
-}(React.PureComponent));
-exports.HelpGroup = HelpGroup;
-function HelpSection(props) {
-    return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-simple-help-section' }, { children: props.header }), void 0);
-}
-var ViewportHelpContent = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ViewportHelpContent, _super);
-    function ViewportHelpContent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ViewportHelpContent.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
-    };
-    ViewportHelpContent.prototype.render = function () {
-        var interactionBindings = {};
-        this.plugin.spec.behaviors.forEach(function (b) {
-            var bindings = b.defaultParams.bindings;
-            if (bindings)
-                Object.assign(interactionBindings, bindings);
-        });
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(!this.props.selectOnly && this.plugin.canvas3d) && (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Moving in 3D' }, { children: (0, jsx_runtime_1.jsx)(BindingsHelp, { bindings: this.plugin.canvas3d.props.trackball.bindings }, void 0) }), 'trackball'), (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Mouse Controls' }, { children: (0, jsx_runtime_1.jsx)(BindingsHelp, { bindings: interactionBindings }, void 0) }), 'interactions')] }, void 0);
-    };
-    return ViewportHelpContent;
-}(base_1.PluginUIComponent));
-exports.ViewportHelpContent = ViewportHelpContent;
-var HelpContent = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(HelpContent, _super);
-    function HelpContent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    HelpContent.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
-    };
-    HelpContent.prototype.formatTriggers = function (binding) {
-        return binding.triggers.map(function (t) { return binding_1.Binding.Trigger.format(t); }).join(' or ');
-    };
-    HelpContent.prototype.getTriggerFor = function (transformer, name) {
-        var state = this.plugin.state.behaviors;
-        var selections = state.select(mol_state_1.StateSelection.Generators.ofTransformer(transformer));
-        var params = selections.length === 1 ? selections[0].params : undefined;
-        var bindings = params ? params.values.bindings : {};
-        var binding = name in bindings ? bindings[name] : binding_1.Binding.Empty;
-        return this.formatTriggers(binding);
-    };
-    HelpContent.prototype.render = function () {
-        var selectToggleTriggers = this.getTriggerFor(representation_1.SelectLoci, 'clickSelectToggle');
-        var focusTriggers = this.getTriggerFor(representation_2.FocusLoci, 'clickFocus');
-        // TODO: interactive help, for example for density
-        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(HelpSection, { header: 'Interface Controls' }, void 0), (0, jsx_runtime_1.jsxs)(HelpGroup, (0, tslib_1.__assign)({ header: 'Inline Help' }, { children: [(0, jsx_runtime_1.jsx)(HelpText, { children: "Many user interface elements show a little questionmark icon when hovered over. Clicking the icon toggles the display of an inline help text." }, void 0), (0, jsx_runtime_1.jsx)(HelpText, { children: "Tooltips may provide additional information on a user interface element and are shown when hovering over it with the mouse." }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Selections' }, { children: (0, jsx_runtime_1.jsxs)(HelpText, { children: ["The viewer allows changing colors and representations for selections of atoms, residues or chains. Selections can be created by", (0, jsx_runtime_1.jsxs)("ul", (0, tslib_1.__assign)({ style: { paddingLeft: '20px' } }, { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["picking elements on the 3D canvas or the sequence view using the mouse, e.g. toggle selection using ", selectToggleTriggers, " (for more see help section on ", (0, jsx_runtime_1.jsx)("i", { children: "Mouse Controls" }, void 0), ")"] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: ["using the ", (0, jsx_runtime_1.jsx)("i", { children: "Add" }, void 0), ", ", (0, jsx_runtime_1.jsx)("i", { children: "Remove" }, void 0), " and ", (0, jsx_runtime_1.jsx)("i", { children: "Only" }, void 0), " dropdown buttons in the ", (0, jsx_runtime_1.jsx)("i", { children: "Manage Selection" }, void 0), " panel which allow modifing the current selection by predefined sets"] }, void 0)] }), void 0)] }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Coloring' }, { children: (0, jsx_runtime_1.jsxs)(HelpText, { children: ["There are two ways to color structures. Every representation (e.g. cartoon or spacefill) has a color theme which can be changed using the dropdown for each representation in the ", (0, jsx_runtime_1.jsx)("i", { children: "Structure Settings" }, void 0), " panel. Additionally any selection atoms, residues or chains can by given a custom color. For that, first select the parts of the structure to be colored (see help section on ", (0, jsx_runtime_1.jsx)("i", { children: "Selections" }, void 0), ") and, second, choose a color from the color dropdown botton in the ", (0, jsx_runtime_1.jsx)("i", { children: "Selection" }, void 0), " row of the ", (0, jsx_runtime_1.jsx)("i", { children: "Change Representation" }, void 0), " panel. The theme color can be seen as a base color that is overpainted by the custom color. Custom colors can be removed for a selection with the 'Clear' option in the color dropdown."] }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Representations' }, { children: (0, jsx_runtime_1.jsxs)(HelpText, { children: ["Structures can be shown with many different representations (e.g. cartoon or spacefill). The ", (0, jsx_runtime_1.jsx)("i", { children: "Change Representation" }, void 0), " panel offers a collection of predefined styles which can be applied using the ", (0, jsx_runtime_1.jsx)("i", { children: "Preset" }, void 0), " dropdown button. Additionally any selection atoms, residues or chains can by shown with a custom representation. For that, first select the parts of the structure to be mofified (see help section on ", (0, jsx_runtime_1.jsx)("i", { children: "Selections" }, void 0), ") and, second, choose a representation to hide or show from the ", (0, jsx_runtime_1.jsx)("i", { children: "Show" }, void 0), " and ", (0, jsx_runtime_1.jsx)("i", { children: "Hide" }, void 0), " dropdown bottons in the ", (0, jsx_runtime_1.jsx)("i", { children: "Selection" }, void 0), " row of the ", (0, jsx_runtime_1.jsx)("i", { children: "Change Representation" }, void 0), " panel. The ", (0, jsx_runtime_1.jsx)("i", { children: "Everything" }, void 0), " row applies the action to the whole structure instead of the current selection."] }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Surroundings' }, { children: (0, jsx_runtime_1.jsxs)(HelpText, { children: ["To show the surroundings of a residue or ligand, click it in the 3D scene or in the sequence widget using ", focusTriggers, "."] }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(HelpSection, { header: 'How-to Guides' }, void 0), (0, jsx_runtime_1.jsx)(HelpGroup, (0, tslib_1.__assign)({ header: 'Create an Image' }, { children: (0, jsx_runtime_1.jsxs)(HelpText, { children: [(0, jsx_runtime_1.jsxs)("p", { children: ["Use the ", (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.CameraSvg }, void 0), " icon in the viewport to bring up the screenshot controls."] }, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["To adjust the size of the image, use the ", (0, jsx_runtime_1.jsx)("i", { children: "Resolution" }, void 0), " dropdown."] }, void 0)] }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(HelpSection, { header: 'Mouse Controls' }, void 0), (0, jsx_runtime_1.jsx)(ViewportHelpContent, {}, void 0)] }, void 0);
-    };
-    return HelpContent;
-}(base_1.PluginUIComponent));
-exports.HelpContent = HelpContent;
-//# sourceMappingURL=help.js.map

package/lib/commonjs/mol-plugin-ui/viewport/screenshot.js

@@ -1,103 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DownloadScreenshotControls = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var commands_1 = require("../../mol-plugin/commands");
-var base_1 = require("../base");
-var common_1 = require("../controls/common");
-var icons_1 = require("../controls/icons");
-var parameters_1 = require("../controls/parameters");
-var screenshot_1 = require("../controls/screenshot");
-var use_behavior_1 = require("../hooks/use-behavior");
-var snapshots_1 = require("../state/snapshots");
-var DownloadScreenshotControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(DownloadScreenshotControls, _super);
-    function DownloadScreenshotControls() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            showPreview: true,
-            isDisabled: false
-        };
-        _this.download = function () {
-            var _a;
-            (_a = _this.plugin.helpers.viewportScreenshot) === null || _a === void 0 ? void 0 : _a.download();
-            _this.props.close();
-        };
-        _this.copy = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
-            var _a;
-            var _b;
-            return (0, tslib_1.__generator)(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        _c.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, ((_b = this.plugin.helpers.viewportScreenshot) === null || _b === void 0 ? void 0 : _b.copyToClipboard())];
-                    case 1:
-                        _c.sent();
-                        commands_1.PluginCommands.Toast.Show(this.plugin, {
-                            message: 'Copied to clipboard.',
-                            title: 'Screenshot',
-                            timeoutMs: 1500
-                        });
-                        return [3 /*break*/, 3];
-                    case 2:
-                        _a = _c.sent();
-                        return [2 /*return*/, this.copyImg()];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); };
-        _this.copyImg = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
-            var src;
-            var _a;
-            return (0, tslib_1.__generator)(this, function (_b) {
-                switch (_b.label) {
-                    case 0: return [4 /*yield*/, ((_a = this.plugin.helpers.viewportScreenshot) === null || _a === void 0 ? void 0 : _a.getImageDataUri())];
-                    case 1:
-                        src = _b.sent();
-                        this.setState({ imageData: src });
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-        _this.open = function (e) {
-            if (!e.target.files || !e.target.files[0])
-                return;
-            commands_1.PluginCommands.State.Snapshots.OpenFile(_this.plugin, { file: e.target.files[0] });
-        };
-        return _this;
-    }
-    DownloadScreenshotControls.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.state.data.behaviors.isUpdating, function (v) {
-            _this.setState({ isDisabled: v });
-        });
-    };
-    DownloadScreenshotControls.prototype.componentWillUnmount = function () {
-        this.setState({ imageData: void 0 });
-    };
-    DownloadScreenshotControls.prototype.render = function () {
-        var _this = this;
-        var _a;
-        var hasClipboardApi = !!((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.write);
-        return (0, jsx_runtime_1.jsxs)("div", { children: [this.state.showPreview && (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-image-preview' }, { children: [(0, jsx_runtime_1.jsx)(screenshot_1.ScreenshotPreview, { plugin: this.plugin }, void 0), (0, jsx_runtime_1.jsx)(CropControls, { plugin: this.plugin }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [!this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: icons_1.CopySvg, onClick: hasClipboardApi ? this.copy : this.copyImg, disabled: this.state.isDisabled }, { children: "Copy" }), void 0), this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: function () { return _this.setState({ imageData: void 0 }); }, disabled: this.state.isDisabled }, { children: "Clear" }), void 0), (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: icons_1.GetAppSvg, onClick: this.download, disabled: this.state.isDisabled }, { children: "Download" }), void 0)] }), void 0), this.state.imageData && (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-row msp-copy-image-wrapper' }, { children: [(0, jsx_runtime_1.jsx)("div", { children: "Right click below + Copy Image" }, void 0), (0, jsx_runtime_1.jsx)("img", { src: this.state.imageData, style: { width: '100%', height: 32, display: 'block' } }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(ScreenshotParams, { plugin: this.plugin, isDisabled: this.state.isDisabled }, void 0), (0, jsx_runtime_1.jsxs)(common_1.ExpandGroup, (0, tslib_1.__assign)({ header: 'State' }, { children: [(0, jsx_runtime_1.jsx)(snapshots_1.StateExportImportControls, { onAction: this.props.close }, void 0), (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, (0, tslib_1.__assign)({ header: 'Save Options', initiallyExpanded: false, noOffset: true }, { children: (0, jsx_runtime_1.jsx)(snapshots_1.LocalStateSnapshotParams, {}, void 0) }), void 0)] }), void 0)] }, void 0);
-    };
-    return DownloadScreenshotControls;
-}(base_1.PluginUIComponent));
-exports.DownloadScreenshotControls = DownloadScreenshotControls;
-function ScreenshotParams(_a) {
-    var plugin = _a.plugin, isDisabled = _a.isDisabled;
-    var helper = plugin.helpers.viewportScreenshot;
-    var values = (0, use_behavior_1.useBehavior)(helper.behaviors.values);
-    return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: helper.params, values: values, onChangeValues: function (v) { return helper.behaviors.values.next(v); }, isDisabled: isDisabled }, void 0);
-}
-function CropControls(_a) {
-    var plugin = _a.plugin;
-    var helper = plugin.helpers.viewportScreenshot;
-    var cropParams = (0, use_behavior_1.useBehavior)(helper === null || helper === void 0 ? void 0 : helper.behaviors.cropParams);
-    (0, use_behavior_1.useBehavior)(helper === null || helper === void 0 ? void 0 : helper.behaviors.relativeCrop);
-    if (!helper)
-        return null;
-    return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { width: '100%', height: '24px', marginTop: '8px' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.CropOrginalSvg, title: 'Auto-crop', inline: true, isSelected: cropParams.auto, style: { background: 'transparent', float: 'left', width: 'auto', height: '24px', lineHeight: '24px' }, toggle: function () { return helper.toggleAutocrop(); }, label: 'Auto-crop ' + (cropParams.auto ? 'On' : 'Off') }, void 0), !cropParams.auto && (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CropSvg, title: 'Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: function () { return helper.autocrop(); } }, void 0), !cropParams.auto && !helper.isFullFrame && (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CropFreeSvg, title: 'Reset Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: function () { return helper.resetCrop(); } }, void 0)] }), void 0);
-}
-//# sourceMappingURL=screenshot.js.map

package/lib/commonjs/mol-plugin-ui/viewport/simple-settings.js

@@ -1,155 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SimpleSettingsControl = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- * @author David Sehnal <david.sehnal@gmail.com>
- */
-var immer_1 = require("immer");
-var canvas3d_1 = require("../../mol-canvas3d/canvas3d");
-var commands_1 = require("../../mol-plugin/commands");
-var mol_state_1 = require("../../mol-state");
-var color_1 = require("../../mol-util/color");
-var param_definition_1 = require("../../mol-util/param-definition");
-var param_mapping_1 = require("../../mol-util/param-mapping");
-var base_1 = require("../base");
-var parameters_1 = require("../controls/parameters");
-var help_1 = require("./help");
-var SimpleSettingsControl = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(SimpleSettingsControl, _super);
-    function SimpleSettingsControl() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SimpleSettingsControl.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
-        this.subscribe(this.plugin.canvas3d.camera.stateChanged, function (state) {
-            if (state.radiusMax !== undefined || state.radius !== undefined) {
-                _this.forceUpdate();
-            }
-        });
-    };
-    SimpleSettingsControl.prototype.render = function () {
-        if (!this.plugin.canvas3d)
-            return null;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterMappingControl, { mapping: SimpleSettingsMapping }, void 0), (0, jsx_runtime_1.jsx)(help_1.ViewportHelpContent, {}, void 0)] }, void 0);
-    };
-    return SimpleSettingsControl;
-}(base_1.PluginUIComponent));
-exports.SimpleSettingsControl = SimpleSettingsControl;
-var LayoutOptions = {
-    'sequence': 'Sequence',
-    'log': 'Log',
-    'left': 'Left Panel'
-};
-var SimpleSettingsParams = {
-    animate: canvas3d_1.Canvas3DParams.trackball.params.animate,
-    camera: canvas3d_1.Canvas3DParams.camera,
-    background: param_definition_1.ParamDefinition.Group({
-        color: param_definition_1.ParamDefinition.Color((0, color_1.Color)(0xFCFBF9), { label: 'Background', description: 'Custom background color' }),
-        transparent: param_definition_1.ParamDefinition.Boolean(false)
-    }, { pivot: 'color' }),
-    lighting: param_definition_1.ParamDefinition.Group({
-        occlusion: canvas3d_1.Canvas3DParams.postprocessing.params.occlusion,
-        outline: canvas3d_1.Canvas3DParams.postprocessing.params.outline,
-        fog: canvas3d_1.Canvas3DParams.cameraFog,
-    }, { isFlat: true }),
-    clipping: param_definition_1.ParamDefinition.Group((0, tslib_1.__assign)({}, canvas3d_1.Canvas3DParams.cameraClipping.params), { pivot: 'radius' }),
-    layout: param_definition_1.ParamDefinition.MultiSelect([], param_definition_1.ParamDefinition.objectToOptions(LayoutOptions)),
-};
-var SimpleSettingsMapping = (0, param_mapping_1.ParamMapping)({
-    params: function (ctx) {
-        var _a;
-        var params = param_definition_1.ParamDefinition.clone(SimpleSettingsParams);
-        var controls = (_a = ctx.spec.components) === null || _a === void 0 ? void 0 : _a.controls;
-        if (controls) {
-            var options = [];
-            if (controls.top !== 'none')
-                options.push(['sequence', LayoutOptions.sequence]);
-            if (controls.bottom !== 'none')
-                options.push(['log', LayoutOptions.log]);
-            if (controls.left !== 'none')
-                options.push(['left', LayoutOptions.left]);
-            params.layout.options = options;
-        }
-        return params;
-    },
-    target: function (ctx) {
-        var _a, _b;
-        var c = (_a = ctx.spec.components) === null || _a === void 0 ? void 0 : _a.controls;
-        var r = ctx.layout.state.regionState;
-        var layout = [];
-        if (r.top !== 'hidden' && (!c || c.top !== 'none'))
-            layout.push('sequence');
-        if (r.bottom !== 'hidden' && (!c || c.bottom !== 'none'))
-            layout.push('log');
-        if (r.left !== 'hidden' && (!c || c.left !== 'none'))
-            layout.push('left');
-        return { canvas: (_b = ctx.canvas3d) === null || _b === void 0 ? void 0 : _b.props, layout: layout };
-    }
-})({
-    values: function (props, ctx) {
-        var canvas = props.canvas;
-        var renderer = canvas.renderer;
-        return {
-            layout: props.layout,
-            animate: canvas.trackball.animate,
-            camera: canvas.camera,
-            background: {
-                color: renderer.backgroundColor,
-                transparent: canvas.transparentBackground
-            },
-            lighting: {
-                occlusion: canvas.postprocessing.occlusion,
-                outline: canvas.postprocessing.outline,
-                fog: canvas.cameraFog,
-            },
-            clipping: (0, tslib_1.__assign)({}, canvas.cameraClipping)
-        };
-    },
-    update: function (s, props) {
-        var canvas = props.canvas;
-        canvas.trackball.animate = s.animate;
-        canvas.camera = s.camera;
-        canvas.transparentBackground = s.background.transparent;
-        canvas.renderer.backgroundColor = s.background.color;
-        canvas.postprocessing.occlusion = s.lighting.occlusion;
-        canvas.postprocessing.outline = s.lighting.outline;
-        canvas.cameraFog = s.lighting.fog;
-        canvas.cameraClipping = {
-            radius: s.clipping.radius,
-            far: s.clipping.far,
-        };
-        props.layout = s.layout;
-    },
-    apply: function (props, ctx) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
-            var hideLeft, state;
-            return (0, tslib_1.__generator)(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, commands_1.PluginCommands.Canvas3D.SetSettings(ctx, { settings: props.canvas })];
-                    case 1:
-                        _a.sent();
-                        hideLeft = props.layout.indexOf('left') < 0;
-                        state = (0, immer_1.produce)(ctx.layout.state, function (s) {
-                            s.regionState.top = props.layout.indexOf('sequence') >= 0 ? 'full' : 'hidden';
-                            s.regionState.bottom = props.layout.indexOf('log') >= 0 ? 'full' : 'hidden';
-                            s.regionState.left = hideLeft ? 'hidden' : ctx.behaviors.layout.leftPanelTabName.value === 'none' ? 'collapsed' : 'full';
-                        });
-                        return [4 /*yield*/, commands_1.PluginCommands.Layout.Update(ctx, { state: state })];
-                    case 2:
-                        _a.sent();
-                        if (hideLeft) {
-                            commands_1.PluginCommands.State.SetCurrentObject(ctx, { state: ctx.state.data, ref: mol_state_1.StateTransform.RootRef });
-                        }
-                        return [2 /*return*/];
-                }
-            });
-        });
-    }
-});
-//# sourceMappingURL=simple-settings.js.map

package/lib/commonjs/mol-plugin-ui/viewport.js

@@ -1,83 +0,0 @@
-"use strict";
-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