molstar 3.3.1 → 3.4.0

package/lib/commonjs/mol-plugin-ui/structure/superposition.js

@@ -26,7 +26,7 @@ var superposition_sifts_mapping_1 = require("../../mol-model/structure/structure
 var commands_1 = require("../../mol-plugin/commands");
 var sifts_mapping_1 = require("../../mol-model-props/sequence/sifts-mapping");
 var StructureSuperpositionControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StructureSuperpositionControls, _super);
+    tslib_1.__extends(StructureSuperpositionControls, _super);
     function StructureSuperpositionControls() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -45,7 +45,7 @@ var StructureSuperpositionControls = /** @class */ (function (_super) {
         });
     };
     StructureSuperpositionControls.prototype.renderControls = function () {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(SuperpositionControls, {}, void 0) }, void 0);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(SuperpositionControls, {}) });
     };
     return StructureSuperpositionControls;
 }(base_1.CollapsableControls));
@@ -59,7 +59,7 @@ var SuperpositionTag = 'SuperpositionTransform';
 ;
 ;
 var SuperpositionControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(SuperpositionControls, _super);
+    tslib_1.__extends(SuperpositionControls, _super);
     function SuperpositionControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {
@@ -68,10 +68,10 @@ var SuperpositionControls = /** @class */ (function (_super) {
             action: undefined,
             options: DefaultStructureSuperpositionOptions
         };
-        _this.superposeChains = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+        _this.superposeChains = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
             var query, entries, locis, transforms, eA, i, il, eB, _a, bTransform, rmsd, labelA, labelB;
             var _this = this;
-            return (0, tslib_1.__generator)(this, function (_b) {
+            return tslib_1.__generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
                         query = (this.state.options.traceOnly ? structure_selection_query_1.StructureSelectionQueries.trace : structure_selection_query_1.StructureSelectionQueries.polymer).query;
@@ -110,10 +110,10 @@ var SuperpositionControls = /** @class */ (function (_super) {
                 }
             });
         }); };
-        _this.superposeAtoms = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+        _this.superposeAtoms = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
             var entries, atomLocis, transforms, eA, i, il, eB, _a, bTransform, rmsd, labelA, labelB, count;
             var _this = this;
-            return (0, tslib_1.__generator)(this, function (_b) {
+            return tslib_1.__generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
                         entries = this.atomEntries;
@@ -148,9 +148,9 @@ var SuperpositionControls = /** @class */ (function (_super) {
                 }
             });
         }); };
-        _this.superposeDb = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+        _this.superposeDb = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
             var input, traceOnly, structures, _a, entries, failedPairs, zeroOverlapPairs, rmsd, _i, entries_1, xform, formatPairs;
-            return (0, tslib_1.__generator)(this, function (_b) {
+            return tslib_1.__generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
                         input = this.plugin.managers.structure.hierarchy.behaviors.selection.value.structures;
@@ -226,9 +226,9 @@ var SuperpositionControls = /** @class */ (function (_super) {
         configurable: true
     });
     SuperpositionControls.prototype.transform = function (s, matrix) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
             var r, o, params, b;
-            return (0, tslib_1.__generator)(this, function (_a) {
+            return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         r = mol_state_1.StateObjectRef.resolveAndCheck(this.plugin.state.data, s);
@@ -254,8 +254,8 @@ var SuperpositionControls = /** @class */ (function (_super) {
         });
     };
     SuperpositionControls.prototype.cameraReset = function () {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
-            return (0, tslib_1.__generator)(this, function (_a) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, new Promise(function (res) { return requestAnimationFrame(res); })];
                     case 1:
@@ -277,16 +277,16 @@ var SuperpositionControls = /** @class */ (function (_super) {
     };
     SuperpositionControls.prototype.lociEntry = function (e, idx) {
         var _this = this;
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' }, onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: e.label } }, void 0) }), void 0) }), idx);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' }, onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: e.label } }) })) }), idx);
     };
     SuperpositionControls.prototype.historyEntry = function (e, idx) {
         var _this = this;
         var history = this.plugin.managers.structure.selection.additionsHistory;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' }, onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: [idx, ". ", (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: e.label } }, void 0)] }), void 0), history.length > 1 && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowUpwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'up'); }, flex: '20px', title: 'Move up' }, void 0), history.length > 1 && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowDownwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'down'); }, flex: '20px', title: 'Move down' }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.plugin.managers.structure.selection.modifyHistory(e, 'remove'); }, flex: true, title: 'Remove' }, void 0)] }), e.id);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__assign({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' }, onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: [idx, ". ", (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: e.label } })] })), history.length > 1 && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowUpwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'up'); }, flex: '20px', title: 'Move up' }), history.length > 1 && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowDownwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'down'); }, flex: '20px', title: 'Move down' }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.plugin.managers.structure.selection.modifyHistory(e, 'remove'); }, flex: true, title: 'Remove' })] }), e.id);
     };
     SuperpositionControls.prototype.atomsLociEntry = function (e, idx) {
         var _this = this;
-        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-no-overflow', title: e.label }, { children: e.label }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: e.atoms.map(function (h, i) { return _this.historyEntry(h, i); }) }), void 0)] }, idx);
+        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-no-overflow', title: e.label }, { children: e.label })) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: e.atoms.map(function (h, i) { return _this.historyEntry(h, i); }) }))] }, idx);
     };
     Object.defineProperty(SuperpositionControls.prototype, "chainEntries", {
         get: function () {
@@ -349,18 +349,18 @@ var SuperpositionControls = /** @class */ (function (_super) {
     SuperpositionControls.prototype.addByChains = function () {
         var _this = this;
         var entries = this.chainEntries;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [entries.length > 0 && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: entries.map(function (e, i) { return _this.lociEntry(e, i); }) }), void 0), entries.length < 2 && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset msp-help-text' }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-help-description' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.HelpOutlineSvg, inline: true }, void 0), "Add 2 or more selections (toggle ", (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, { inline: true }, void 0), " mode) from separate structures. Selections must be limited to single polymer chains or residues therein."] }), void 0) }), void 0), entries.length > 1 && (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ title: 'Superpose structures by selected chains.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.superposeChains, style: { marginTop: '1px' } }, { children: "Superpose" }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [entries.length > 0 && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: entries.map(function (e, i) { return _this.lociEntry(e, i); }) })), entries.length < 2 && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset msp-help-text' }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-help-description' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.HelpOutlineSvg, inline: true }), "Add 2 or more selections (toggle ", (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, { inline: true }), " mode) from separate structures. Selections must be limited to single polymer chains or residues therein."] })) })), entries.length > 1 && (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ title: 'Superpose structures by selected chains.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.superposeChains, style: { marginTop: '1px' } }, { children: "Superpose" }))] });
     };
     SuperpositionControls.prototype.addByAtoms = function () {
         var _this = this;
         var entries = this.atomEntries;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [entries.length > 0 && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: entries.map(function (e, i) { return _this.atomsLociEntry(e, i); }) }), void 0), entries.length < 2 && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset msp-help-text' }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-help-description' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.HelpOutlineSvg, inline: true }, void 0), "Add 1 or more selections (toggle ", (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, { inline: true }, void 0), " mode) from separate structures. Selections must be limited to single atoms."] }), void 0) }), void 0), entries.length > 1 && (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ title: 'Superpose structures by selected atoms.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.superposeAtoms, style: { marginTop: '1px' } }, { children: "Superpose" }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [entries.length > 0 && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: entries.map(function (e, i) { return _this.atomsLociEntry(e, i); }) })), entries.length < 2 && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset msp-help-text' }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-help-description' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.HelpOutlineSvg, inline: true }), "Add 1 or more selections (toggle ", (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, { inline: true }), " mode) from separate structures. Selections must be limited to single atoms."] })) })), entries.length > 1 && (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ title: 'Superpose structures by selected atoms.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.superposeAtoms, style: { marginTop: '1px' } }, { children: "Superpose" }))] });
     };
     SuperpositionControls.prototype.superposeByDbMapping = function () {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: icons_1.SuperposeChainsSvg, title: 'Superpose structures using intersection of residues from SIFTS UNIPROT mapping.', className: 'msp-btn msp-btn-block', onClick: this.superposeDb, style: { marginTop: '1px' }, disabled: this.state.isBusy }, { children: "Uniprot" }), void 0) }, void 0);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.SuperposeChainsSvg, title: 'Superpose structures using intersection of residues from SIFTS UNIPROT mapping.', className: 'msp-btn msp-btn-block', onClick: this.superposeDb, style: { marginTop: '1px' }, disabled: this.state.isBusy }, { children: "Uniprot" })) });
     };
     SuperpositionControls.prototype.render = function () {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.SuperposeChainsSvg, label: 'Chains', toggle: this.toggleByChains, isSelected: this.state.action === 'byChains', disabled: this.state.isBusy }, void 0), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.SuperposeAtomsSvg, label: 'Atoms', toggle: this.toggleByAtoms, isSelected: this.state.action === 'byAtoms', disabled: this.state.isBusy }, void 0), this.state.canUseDb && this.superposeByDbMapping(), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } }, void 0)] }), void 0), this.state.action === 'byChains' && this.addByChains(), this.state.action === 'byAtoms' && this.addByAtoms(), this.state.action === 'options' && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: exports.StructureSuperpositionParams, values: this.state.options, onChangeValues: this.setOptions, isDisabled: this.state.isBusy }, void 0) }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.SuperposeChainsSvg, label: 'Chains', toggle: this.toggleByChains, isSelected: this.state.action === 'byChains', disabled: this.state.isBusy }), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.SuperposeAtomsSvg, label: 'Atoms', toggle: this.toggleByAtoms, isSelected: this.state.action === 'byAtoms', disabled: this.state.isBusy }), this.state.canUseDb && this.superposeByDbMapping(), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } })] })), this.state.action === 'byChains' && this.addByChains(), this.state.action === 'byAtoms' && this.addByAtoms(), this.state.action === 'options' && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: exports.StructureSuperpositionParams, values: this.state.options, onChangeValues: this.setOptions, isDisabled: this.state.isBusy }) }))] });
     };
     return SuperpositionControls;
 }(base_1.PurePluginUIComponent));

package/lib/commonjs/mol-plugin-ui/structure/volume.js

@@ -20,7 +20,7 @@ var icons_1 = require("../controls/icons");
 var transforms_1 = require("../../mol-plugin-state/transforms");
 var volume_representation_params_1 = require("../../mol-plugin-state/helpers/volume-representation-params");
 var VolumeStreamingControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(VolumeStreamingControls, _super);
+    tslib_1.__extends(VolumeStreamingControls, _super);
     function VolumeStreamingControls() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -79,7 +79,7 @@ var VolumeStreamingControls = /** @class */ (function (_super) {
             : rootCell && ((_b = rootCell.obj) === null || _b === void 0 ? void 0 : _b.data.entries.length) === 0
                 ? { header: 'Error Enabling', icon: icons_1.ErrorSvg, title: 'No Entry for Streaming Found' }
                 : { header: 'Enable', icon: icons_1.CheckSvg, title: 'Enable' };
-        return (0, jsx_runtime_1.jsx)(apply_action_1.ApplyActionControl, { state: pivot.cell.parent, action: transformers_1.InitVolumeStreaming, initiallyCollapsed: true, nodeRef: pivot.cell.transform.ref, simpleApply: simpleApply }, void 0);
+        return (0, jsx_runtime_1.jsx)(apply_action_1.ApplyActionControl, { state: pivot.cell.parent, action: transformers_1.InitVolumeStreaming, initiallyCollapsed: true, nodeRef: pivot.cell.transform.ref, simpleApply: simpleApply });
     };
     VolumeStreamingControls.prototype.renderParams = function () {
         var _a, _b, _c, _d, _e;
@@ -87,7 +87,7 @@ var VolumeStreamingControls = /** @class */ (function (_super) {
         if (!pivot.cell.parent)
             return null;
         var bindings = ((_b = (_a = pivot.volumeStreaming) === null || _a === void 0 ? void 0 : _a.cell.transform.params) === null || _b === void 0 ? void 0 : _b.entry.params.view.name) === 'selection-box' && ((_e = (_d = (_c = this.plugin.state.behaviors.cells.get(representation_1.FocusLoci.id)) === null || _c === void 0 ? void 0 : _c.params) === null || _d === void 0 ? void 0 : _d.values) === null || _e === void 0 ? void 0 : _e.bindings);
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: pivot.cell.parent, transform: pivot.volumeStreaming.cell.transform, customHeader: 'none', noMargin: true }, void 0), bindings && (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, (0, tslib_1.__assign)({ header: 'Controls Help' }, { children: (0, jsx_runtime_1.jsx)(help_1.BindingsHelp, { bindings: bindings }, void 0) }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: pivot.cell.parent, transform: pivot.volumeStreaming.cell.transform, customHeader: 'none', noMargin: true }), bindings && (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, tslib_1.__assign({ header: 'Controls Help' }, { children: (0, jsx_runtime_1.jsx)(help_1.BindingsHelp, { bindings: bindings }) }))] });
     };
     VolumeStreamingControls.prototype.renderControls = function () {
         var pivot = this.pivot;
@@ -101,7 +101,7 @@ var VolumeStreamingControls = /** @class */ (function (_super) {
 }(base_1.CollapsableControls));
 exports.VolumeStreamingControls = VolumeStreamingControls;
 var VolumeSourceControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(VolumeSourceControls, _super);
+    tslib_1.__extends(VolumeSourceControls, _super);
     function VolumeSourceControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.item = function (ref) {
@@ -178,7 +178,7 @@ var VolumeSourceControls = /** @class */ (function (_super) {
         get: function () {
             var mng = this.plugin.managers.volume.hierarchy;
             var current = mng.selection;
-            var ret = (0, tslib_1.__spreadArray)([], hierarchy_2.VolumeHierarchyManager.getRepresentationTypes(this.plugin, current)
+            var ret = tslib_1.__spreadArray([], hierarchy_2.VolumeHierarchyManager.getRepresentationTypes(this.plugin, current)
                 .map(function (t) { return action_menu_1.ActionMenu.Item(t[1], function () { return mng.addRepresentation(current, t[0]); }); }), true);
             return ret;
         },
@@ -207,10 +207,10 @@ var VolumeSourceControls = /** @class */ (function (_super) {
         configurable: true
     });
     VolumeSourceControls.prototype.lazyLoad = function (cell) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
             var _a, url, isBinary, format, entryId, isovalues, plugin_1;
             var _this = this;
-            return (0, tslib_1.__generator)(this, function (_b) {
+            return tslib_1.__generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
                         _a = cell.obj.data, url = _a.url, isBinary = _a.isBinary, format = _a.format, entryId = _a.entryId, isovalues = _a.isovalues;
@@ -219,10 +219,10 @@ var VolumeSourceControls = /** @class */ (function (_super) {
                     case 1:
                         _b.trys.push([1, , 3, 4]);
                         plugin_1 = this.plugin;
-                        return [4 /*yield*/, plugin_1.dataTransaction(function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+                        return [4 /*yield*/, plugin_1.dataTransaction(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
                                 var data, parsed, firstVolume, repr, _i, isovalues_1, iso;
                                 var _a, _b, _c, _d;
-                                return (0, tslib_1.__generator)(this, function (_e) {
+                                return tslib_1.__generator(this, function (_e) {
                                     switch (_e.label) {
                                         case 0: return [4 /*yield*/, plugin_1.builders.data.download({ url: url, isBinary: isBinary }, { state: { isGhost: true } })];
                                         case 1:
@@ -270,13 +270,13 @@ var VolumeSourceControls = /** @class */ (function (_super) {
         var disabled = this.state.isBusy || this.isEmpty;
         var label = this.label;
         var selected = this.plugin.managers.volume.hierarchy.selection;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row', style: { marginTop: '1px' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, flex: true, onClick: this.toggleHierarchy, disabled: disabled, title: label }, { children: label }), void 0), !this.isEmpty && selected && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.AddSvg, onClick: this.toggleAddRepr, title: 'Apply a structure presets to the current hierarchy.', toggleState: this.state.show === 'add-repr', disabled: disabled }, void 0)] }), void 0), this.state.show === 'hierarchy' && (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.hierarchyItems, onSelect: this.selectCurrent }, void 0), this.state.show === 'add-repr' && (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.addActions, onSelect: this.selectAdd }, void 0), selected && selected.representations.length > 0 && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginTop: '6px' } }, { children: selected.representations.map(function (r) { return (0, jsx_runtime_1.jsx)(VolumeRepresentationControls, { representation: r }, r.cell.transform.ref); }) }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row', style: { marginTop: '1px' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ noOverflow: true, flex: true, onClick: this.toggleHierarchy, disabled: disabled, title: label }, { children: label })), !this.isEmpty && selected && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.AddSvg, onClick: this.toggleAddRepr, title: 'Apply a structure presets to the current hierarchy.', toggleState: this.state.show === 'add-repr', disabled: disabled })] })), this.state.show === 'hierarchy' && (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.hierarchyItems, onSelect: this.selectCurrent }), this.state.show === 'add-repr' && (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.addActions, onSelect: this.selectAdd }), selected && selected.representations.length > 0 && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginTop: '6px' } }, { children: selected.representations.map(function (r) { return (0, jsx_runtime_1.jsx)(VolumeRepresentationControls, { representation: r }, r.cell.transform.ref); }) }))] });
     };
     return VolumeSourceControls;
 }(base_1.CollapsableControls));
 exports.VolumeSourceControls = VolumeSourceControls;
 var VolumeRepresentationControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(VolumeRepresentationControls, _super);
+    tslib_1.__extends(VolumeRepresentationControls, _super);
     function VolumeRepresentationControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { action: void 0 };
@@ -317,7 +317,7 @@ var VolumeRepresentationControls = /** @class */ (function (_super) {
     VolumeRepresentationControls.prototype.render = function () {
         var _a, _b, _c;
         var repr = this.props.representation.cell;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, className: 'msp-control-button-label', title: "".concat((_a = repr.obj) === null || _a === void 0 ? void 0 : _a.label, ". Click to focus."), onClick: this.focus, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: { textAlign: 'left' } }, { children: [(_b = repr.obj) === null || _b === void 0 ? void 0 : _b.label, (0, jsx_runtime_1.jsx)("small", (0, tslib_1.__assign)({ className: 'msp-25-lower-contrast-text', style: { float: 'right' } }, { children: (_c = repr.obj) === null || _c === void 0 ? void 0 : _c.description }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: repr.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: "".concat(repr.state.isHidden ? 'Show' : 'Hide', " component"), small: true, className: 'msp-form-control', flex: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, title: 'Remove', small: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, onClick: this.toggleUpdate, title: 'Actions', toggleState: this.state.action === 'update' }, void 0)] }), void 0), this.state.action === 'update' && !!repr.parent && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '6px' }, className: 'msp-accent-offset' }, { children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', noMargin: true }, void 0) }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__assign({ noOverflow: true, className: 'msp-control-button-label', title: "".concat((_a = repr.obj) === null || _a === void 0 ? void 0 : _a.label, ". Click to focus."), onClick: this.focus, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: { textAlign: 'left' } }, { children: [(_b = repr.obj) === null || _b === void 0 ? void 0 : _b.label, (0, jsx_runtime_1.jsx)("small", tslib_1.__assign({ className: 'msp-25-lower-contrast-text', style: { float: 'right' } }, { children: (_c = repr.obj) === null || _c === void 0 ? void 0 : _c.description }))] })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: repr.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: "".concat(repr.state.isHidden ? 'Show' : 'Hide', " component"), small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, title: 'Remove', small: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, onClick: this.toggleUpdate, title: 'Actions', toggleState: this.state.action === 'update' })] })), this.state.action === 'update' && !!repr.parent && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '6px' }, className: 'msp-accent-offset' }, { children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', noMargin: true }) }))] });
     };
     return VolumeRepresentationControls;
 }(base_1.PurePluginUIComponent));

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

@@ -14,7 +14,7 @@ var operators_1 = require("rxjs/operators");
 var common_1 = require("./controls/common");
 var icons_1 = require("./controls/icons");
 var BackgroundTaskProgress = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(BackgroundTaskProgress, _super);
+    tslib_1.__extends(BackgroundTaskProgress, _super);
     function BackgroundTaskProgress() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { tracked: (0, immutable_1.OrderedMap)() };
@@ -33,13 +33,13 @@ var BackgroundTaskProgress = /** @class */ (function (_super) {
         });
     };
     BackgroundTaskProgress.prototype.render = function () {
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-background-tasks' }, { children: this.state.tracked.valueSeq().map(function (e) { return (0, jsx_runtime_1.jsx)(ProgressEntry, { event: e }, e.id); }) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-background-tasks' }, { children: this.state.tracked.valueSeq().map(function (e) { return (0, jsx_runtime_1.jsx)(ProgressEntry, { event: e }, e.id); }) }));
     };
     return BackgroundTaskProgress;
 }(base_1.PluginUIComponent));
 exports.BackgroundTaskProgress = BackgroundTaskProgress;
 var ProgressEntry = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ProgressEntry, _super);
+    tslib_1.__extends(ProgressEntry, _super);
     function ProgressEntry() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.abort = function () {
@@ -52,11 +52,11 @@ var ProgressEntry = /** @class */ (function (_super) {
         var subtaskCount = countSubtasks(this.props.event.progress.root) - 1;
         var pr = root.progress.isIndeterminate
             ? void 0
-            : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["[", root.progress.current, "/", root.progress.max, "]"] }, void 0);
+            : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["[", root.progress.current, "/", root.progress.max, "]"] });
         var subtasks = subtaskCount > 0
-            ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["[", subtaskCount, " subtask(s)]"] }, void 0)
+            ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["[", subtaskCount, " subtask(s)]"] })
             : void 0;
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-task-state' }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [root.progress.canAbort && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CancelSvg, onClick: this.abort, title: 'Abort' }, void 0), (0, jsx_runtime_1.jsxs)("div", { children: [root.progress.message, " ", pr, " ", subtasks] }, void 0)] }, void 0) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-task-state' }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [root.progress.canAbort && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CancelSvg, onClick: this.abort, title: 'Abort' }), (0, jsx_runtime_1.jsxs)("div", { children: [root.progress.message, " ", pr, " ", subtasks] })] }) }));
     };
     return ProgressEntry;
 }(base_1.PluginUIComponent));
@@ -71,7 +71,7 @@ function countSubtasks(progress) {
     return sum;
 }
 var OverlayTaskProgress = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(OverlayTaskProgress, _super);
+    tslib_1.__extends(OverlayTaskProgress, _super);
     function OverlayTaskProgress() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { tracked: (0, immutable_1.OrderedMap)() };
@@ -90,7 +90,7 @@ var OverlayTaskProgress = /** @class */ (function (_super) {
     OverlayTaskProgress.prototype.render = function () {
         if (this.state.tracked.size === 0)
             return null;
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-overlay-tasks' }, { children: this.state.tracked.valueSeq().map(function (e) { return (0, jsx_runtime_1.jsx)(ProgressEntry, { event: e }, e.id); }) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-overlay-tasks' }, { children: this.state.tracked.valueSeq().map(function (e) { return (0, jsx_runtime_1.jsx)(ProgressEntry, { event: e }, e.id); }) }));
     };
     return OverlayTaskProgress;
 }(base_1.PluginUIComponent));

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

@@ -14,7 +14,7 @@ var base_1 = require("./base");
 var common_1 = require("./controls/common");
 var icons_1 = require("./controls/icons");
 var ToastEntry = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ToastEntry, _super);
+    tslib_1.__extends(ToastEntry, _super);
     function ToastEntry() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.hide = function () {
@@ -27,14 +27,14 @@ var ToastEntry = /** @class */ (function (_super) {
         var _this = this;
         var entry = this.props.entry;
         var message = typeof entry.message === 'string'
-            ? (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: entry.message } }, void 0)
-            : (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(entry.message, {}, void 0) }, void 0);
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-toast-entry' }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-toast-title', onClick: function () { return _this.hide(); } }, { children: entry.title }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-toast-message' }, { children: message }), void 0), (0, jsx_runtime_1.jsx)("div", { className: 'msp-toast-clear' }, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-toast-hide' }, { children: (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CancelSvg, onClick: this.hide, title: 'Hide', className: 'msp-no-hover-outline' }, void 0) }), void 0)] }), void 0);
+            ? (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: entry.message } })
+            : (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(entry.message, {}) });
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-toast-entry' }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-toast-title', onClick: function () { return _this.hide(); } }, { children: entry.title })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-toast-message' }, { children: message })), (0, jsx_runtime_1.jsx)("div", { className: 'msp-toast-clear' }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-toast-hide' }, { children: (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CancelSvg, onClick: this.hide, title: 'Hide', className: 'msp-no-hover-outline' }) }))] }));
     };
     return ToastEntry;
 }(base_1.PluginUIComponent));
 var Toasts = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Toasts, _super);
+    tslib_1.__extends(Toasts, _super);
     function Toasts() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -49,7 +49,7 @@ var Toasts = /** @class */ (function (_super) {
         var entries = [];
         state.entries.forEach(function (t, k) { return entries.push(t); });
         entries.sort(function (x, y) { return x.serialNumber - y.serialNumber; });
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-toast-container' }, { children: entries.map(function (e) { return (0, jsx_runtime_1.jsx)(ToastEntry, { entry: e }, e.serialNumber); }) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-toast-container' }, { children: entries.map(function (e) { return (0, jsx_runtime_1.jsx)(ToastEntry, { entry: e }, e.serialNumber); }) }));
     };
     return Toasts;
 }(base_1.PluginUIComponent));

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

@@ -9,10 +9,10 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  * @author David Sehnal <david.sehnal@gmail.com>
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var base_1 = require("../base");
 var ViewportCanvas = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ViewportCanvas, _super);
+    tslib_1.__extends(ViewportCanvas, _super);
     function ViewportCanvas() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.container = React.createRef();
@@ -42,15 +42,15 @@ var ViewportCanvas = /** @class */ (function (_super) {
     ViewportCanvas.prototype.renderMissing = function () {
         if (this.props.noWebGl) {
             var C = this.props.noWebGl;
-            return (0, jsx_runtime_1.jsx)(C, {}, void 0);
+            return (0, jsx_runtime_1.jsx)(C, {});
         }
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-no-webgl' }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("b", { children: "WebGL does not seem to be available." }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("p", { children: "This can be caused by an outdated browser, graphics card driver issue, or bad weather. Sometimes, just restarting the browser helps." }, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["For a list of supported browsers, refer to ", (0, jsx_runtime_1.jsx)("a", (0, tslib_1.__assign)({ href: 'http://caniuse.com/#feat=webgl', target: '_blank' }, { children: "http://caniuse.com/#feat=webgl" }), void 0), "."] }, void 0)] }, void 0) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-no-webgl' }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("b", { children: "WebGL does not seem to be available." }) }), (0, jsx_runtime_1.jsx)("p", { children: "This can be caused by an outdated browser, graphics card driver issue, or bad weather. Sometimes, just restarting the browser helps." }), (0, jsx_runtime_1.jsxs)("p", { children: ["For a list of supported browsers, refer to ", (0, jsx_runtime_1.jsx)("a", tslib_1.__assign({ href: 'http://caniuse.com/#feat=webgl', target: '_blank' }, { children: "http://caniuse.com/#feat=webgl" })), "."] })] }) }));
     };
     ViewportCanvas.prototype.render = function () {
         if (this.state.noWebGl)
             return this.renderMissing();
         var Logo = this.props.logo;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: this.props.parentClassName || 'msp-viewport', style: this.props.parentStyle }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: this.props.hostClassName || 'msp-viewport-host3d', style: this.props.hostStyle, ref: this.container }, { children: (0, jsx_runtime_1.jsx)("canvas", { ref: this.canvas }, void 0) }), void 0), (this.state.showLogo && Logo) && (0, jsx_runtime_1.jsx)(Logo, {}, void 0)] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: this.props.parentClassName || 'msp-viewport', style: this.props.parentStyle }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: this.props.hostClassName || 'msp-viewport-host3d', style: this.props.hostStyle, ref: this.container }, { children: (0, jsx_runtime_1.jsx)("canvas", { ref: this.canvas }) })), (this.state.showLogo && Logo) && (0, jsx_runtime_1.jsx)(Logo, {})] }));
     };
     return ViewportCanvas;
 }(base_1.PluginUIComponent));

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

@@ -8,7 +8,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var binding_1 = require("../../mol-util/binding");
 var base_1 = require("../base");
 var mol_state_1 = require("../../mol-state");
@@ -20,7 +20,7 @@ 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);
+    tslib_1.__extends(BindingsHelp, _super);
     function BindingsHelp() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -29,29 +29,29 @@ var BindingsHelp = /** @class */ (function (_super) {
         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)
+                    ? (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { marginBottom: '6px' } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: binding.action }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: binding_1.Binding.format(binding, name) } })] }), name)
                     : null;
-            }) }, void 0);
+            }) });
     };
     BindingsHelp.prototype.render = function () {
-        return (0, jsx_runtime_1.jsx)(HelpText, { children: this.getBindingComponents() }, void 0);
+        return (0, jsx_runtime_1.jsx)(HelpText, { children: this.getBindingComponents() });
     };
     return BindingsHelp;
 }(React.PureComponent));
 exports.BindingsHelp = BindingsHelp;
 var HelpText = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(HelpText, _super);
+    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 (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-help-text' }, { children: (0, jsx_runtime_1.jsx)("div", { children: this.props.children }) }));
     };
     return HelpText;
 }(React.PureComponent));
 exports.HelpText = HelpText;
 var HelpGroup = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(HelpGroup, _super);
+    tslib_1.__extends(HelpGroup, _super);
     function HelpGroup() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {
@@ -62,16 +62,16 @@ var HelpGroup = /** @class */ (function (_super) {
         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 (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-control-group-wrapper' }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, 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 }), this.props.header] })) })), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset', style: { display: this.state.isExpanded ? 'block' : 'none' } }, { children: this.props.children }))] }));
     };
     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);
+    return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-simple-help-section' }, { children: props.header }));
 }
 var ViewportHelpContent = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ViewportHelpContent, _super);
+    tslib_1.__extends(ViewportHelpContent, _super);
     function ViewportHelpContent() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -86,13 +86,13 @@ var ViewportHelpContent = /** @class */ (function (_super) {
             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 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(!this.props.selectOnly && this.plugin.canvas3d) && (0, jsx_runtime_1.jsx)(HelpGroup, tslib_1.__assign({ header: 'Moving in 3D' }, { children: (0, jsx_runtime_1.jsx)(BindingsHelp, { bindings: this.plugin.canvas3d.props.trackball.bindings }) }), 'trackball'), (0, jsx_runtime_1.jsx)(HelpGroup, tslib_1.__assign({ header: 'Mouse Controls' }, { children: (0, jsx_runtime_1.jsx)(BindingsHelp, { bindings: interactionBindings }) }), 'interactions')] });
     };
     return ViewportHelpContent;
 }(base_1.PluginUIComponent));
 exports.ViewportHelpContent = ViewportHelpContent;
 var HelpContent = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(HelpContent, _super);
+    tslib_1.__extends(HelpContent, _super);
     function HelpContent() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -115,7 +115,7 @@ var HelpContent = /** @class */ (function (_super) {
         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 (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(HelpSection, { header: 'Interface Controls' }), (0, jsx_runtime_1.jsxs)(HelpGroup, 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." }), (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." })] })), (0, jsx_runtime_1.jsx)(HelpGroup, 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", 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" }), ")"] }), (0, jsx_runtime_1.jsxs)("li", { children: ["using the ", (0, jsx_runtime_1.jsx)("i", { children: "Add" }), ", ", (0, jsx_runtime_1.jsx)("i", { children: "Remove" }), " and ", (0, jsx_runtime_1.jsx)("i", { children: "Only" }), " dropdown buttons in the ", (0, jsx_runtime_1.jsx)("i", { children: "Manage Selection" }), " panel which allow modifing the current selection by predefined sets"] })] }))] }) })), (0, jsx_runtime_1.jsx)(HelpGroup, 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" }), " 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" }), ") and, second, choose a color from the color dropdown botton in the ", (0, jsx_runtime_1.jsx)("i", { children: "Selection" }), " row of the ", (0, jsx_runtime_1.jsx)("i", { children: "Change Representation" }), " 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."] }) })), (0, jsx_runtime_1.jsx)(HelpGroup, 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" }), " panel offers a collection of predefined styles which can be applied using the ", (0, jsx_runtime_1.jsx)("i", { children: "Preset" }), " 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" }), ") and, second, choose a representation to hide or show from the ", (0, jsx_runtime_1.jsx)("i", { children: "Show" }), " and ", (0, jsx_runtime_1.jsx)("i", { children: "Hide" }), " dropdown bottons in the ", (0, jsx_runtime_1.jsx)("i", { children: "Selection" }), " row of the ", (0, jsx_runtime_1.jsx)("i", { children: "Change Representation" }), " panel. The ", (0, jsx_runtime_1.jsx)("i", { children: "Everything" }), " row applies the action to the whole structure instead of the current selection."] }) })), (0, jsx_runtime_1.jsx)(HelpGroup, 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, "."] }) })), (0, jsx_runtime_1.jsx)(HelpSection, { header: 'How-to Guides' }), (0, jsx_runtime_1.jsx)(HelpGroup, 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 }), " icon in the viewport to bring up the screenshot controls."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["To adjust the size of the image, use the ", (0, jsx_runtime_1.jsx)("i", { children: "Resolution" }), " dropdown."] })] }) })), (0, jsx_runtime_1.jsx)(HelpSection, { header: 'Mouse Controls' }), (0, jsx_runtime_1.jsx)(ViewportHelpContent, {})] });
     };
     return HelpContent;
 }(base_1.PluginUIComponent));

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

@@ -12,7 +12,7 @@ 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);
+    tslib_1.__extends(DownloadScreenshotControls, _super);
     function DownloadScreenshotControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {
@@ -24,10 +24,10 @@ var DownloadScreenshotControls = /** @class */ (function (_super) {
             (_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 () {
+        _this.copy = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
             var _a;
             var _b;
-            return (0, tslib_1.__generator)(this, function (_c) {
+            return tslib_1.__generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
                         _c.trys.push([0, 2, , 3]);
@@ -47,10 +47,10 @@ var DownloadScreenshotControls = /** @class */ (function (_super) {
                 }
             });
         }); };
-        _this.copyImg = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+        _this.copyImg = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
             var src;
             var _a;
-            return (0, tslib_1.__generator)(this, function (_b) {
+            return 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:
@@ -80,7 +80,7 @@ var DownloadScreenshotControls = /** @class */ (function (_super) {
         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 (0, jsx_runtime_1.jsxs)("div", { children: [this.state.showPreview && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-image-preview' }, { children: [(0, jsx_runtime_1.jsx)(screenshot_1.ScreenshotPreview, { plugin: this.plugin }), (0, jsx_runtime_1.jsx)(CropControls, { plugin: this.plugin })] })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [!this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.CopySvg, onClick: hasClipboardApi ? this.copy : this.copyImg, disabled: this.state.isDisabled }, { children: "Copy" })), this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: function () { return _this.setState({ imageData: void 0 }); }, disabled: this.state.isDisabled }, { children: "Clear" })), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.GetAppSvg, onClick: this.download, disabled: this.state.isDisabled }, { children: "Download" }))] })), this.state.imageData && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-row msp-copy-image-wrapper' }, { children: [(0, jsx_runtime_1.jsx)("div", { children: "Right click below + Copy Image" }), (0, jsx_runtime_1.jsx)("img", { src: this.state.imageData, style: { width: '100%', height: 32, display: 'block' } })] })), (0, jsx_runtime_1.jsx)(ScreenshotParams, { plugin: this.plugin, isDisabled: this.state.isDisabled }), (0, jsx_runtime_1.jsxs)(common_1.ExpandGroup, tslib_1.__assign({ header: 'State' }, { children: [(0, jsx_runtime_1.jsx)(snapshots_1.StateExportImportControls, { onAction: this.props.close }), (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, tslib_1.__assign({ header: 'Save Options', initiallyExpanded: false, noOffset: true }, { children: (0, jsx_runtime_1.jsx)(snapshots_1.LocalStateSnapshotParams, {}) }))] }))] });
     };
     return DownloadScreenshotControls;
 }(base_1.PluginUIComponent));
@@ -89,7 +89,7 @@ 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);
+    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 });
 }
 function CropControls(_a) {
     var plugin = _a.plugin;
@@ -98,5 +98,5 @@ function CropControls(_a) {
     (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);
+    return (0, jsx_runtime_1.jsxs)("div", 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') }), !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(); } }), !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(); } })] }));
 }