molstar 3.3.1 → 3.6.0

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(); } })] }));
 }

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

@@ -20,7 +20,7 @@ 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);
+    tslib_1.__extends(SimpleSettingsControl, _super);
     function SimpleSettingsControl() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -36,7 +36,7 @@ var SimpleSettingsControl = /** @class */ (function (_super) {
     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 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterMappingControl, { mapping: SimpleSettingsMapping }), (0, jsx_runtime_1.jsx)(help_1.ViewportHelpContent, {})] });
     };
     return SimpleSettingsControl;
 }(base_1.PluginUIComponent));
@@ -58,7 +58,7 @@ var SimpleSettingsParams = {
         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' }),
+    clipping: param_definition_1.ParamDefinition.Group(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)({
@@ -108,7 +108,7 @@ var SimpleSettingsMapping = (0, param_mapping_1.ParamMapping)({
                 outline: canvas.postprocessing.outline,
                 fog: canvas.cameraFog,
             },
-            clipping: (0, tslib_1.__assign)({}, canvas.cameraClipping)
+            clipping: tslib_1.__assign({}, canvas.cameraClipping)
         };
     },
     update: function (s, props) {
@@ -127,9 +127,9 @@ var SimpleSettingsMapping = (0, param_mapping_1.ParamMapping)({
         props.layout = s.layout;
     },
     apply: function (props, ctx) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
             var hideLeft, state;
-            return (0, tslib_1.__generator)(this, function (_a) {
+            return 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:

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

@@ -13,14 +13,14 @@ 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);
+    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.state = tslib_1.__assign({}, _this.allCollapsedState);
         _this.resetCamera = function () {
             commands_1.PluginCommands.Camera.Reset(_this.plugin, {});
         };
@@ -55,7 +55,7 @@ var ViewportControls = /** @class */ (function (_super) {
         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)));
+            _this.setState(tslib_1.__assign(tslib_1.__assign({}, _this.allCollapsedState), (_a = {}, _a[panel] = !_this.state[panel], _a)));
             e === null || e === void 0 ? void 0 : e.currentTarget.blur();
         };
     };
@@ -66,17 +66,17 @@ var ViewportControls = /** @class */ (function (_super) {
     };
     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);
+        return (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icon, toggleState: isOn, onClick: onClick, title: title, style: { background: 'transparent' } });
     };
     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 (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-viewport-controls', onMouseMove: this.onMouseMove }, { children: [(0, jsx_runtime_1.jsxs)("div", 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' }), this.icon(icons_1.AutorenewSvg, this.resetCamera, 'Reset Camera')] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), this.icon(icons_1.CameraOutlinedSvg, this.toggleScreenshotExpanded, 'Screenshot / State Snapshot', this.state.isScreenshotExpanded)] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), 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)] }), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowSelectionMode) && (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, {})] })] })), this.state.isScreenshotExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-viewport-controls-panel' }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, tslib_1.__assign({ header: 'Screenshot / State', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleScreenshotExpanded, topRightIcon: icons_1.CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: (0, jsx_runtime_1.jsx)(screenshot_1.DownloadScreenshotControls, { close: this.toggleScreenshotExpanded }) })) })), this.state.isSettingsExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-viewport-controls-panel' }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, tslib_1.__assign({ header: 'Settings / Controls Info', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleSettingsExpanded, topRightIcon: icons_1.CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: (0, jsx_runtime_1.jsx)(simple_settings_1.SimpleSettingsControl, {}) })) }))] }));
     };
     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);
+    return (0, jsx_runtime_1.jsx)("a", { className: 'msp-logo', href: 'https://molstar.org', target: '_blank' });
 };
 exports.Logo = Logo;
-var Viewport = function () { return (0, jsx_runtime_1.jsx)(canvas_1.ViewportCanvas, { logo: exports.Logo }, void 0); };
+var Viewport = function () { return (0, jsx_runtime_1.jsx)(canvas_1.ViewportCanvas, { logo: exports.Logo }); };
 exports.Viewport = Viewport;

package/lib/commonjs/mol-repr/representation.js

@@ -242,9 +242,9 @@ var Representation;
                 var qualityProps = (0, util_1.getQualityProps)(Object.assign({}, currentProps, props), currentData);
                 Object.assign(currentProps, props, qualityProps);
                 var visuals = currentProps.visuals;
-                return mol_task_1.Task.create("Creating or updating '".concat(label, "' representation"), function (runtime) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+                return mol_task_1.Task.create("Creating or updating '".concat(label, "' representation"), function (runtime) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
                     var i, il;
-                    return (0, tslib_1.__generator)(this, function (_a) {
+                    return tslib_1.__generator(this, function (_a) {
                         switch (_a.label) {
                             case 0:
                                 i = 0, il = reprList.length;
@@ -331,8 +331,8 @@ var Representation;
                 if (props === void 0) { props = {}; }
                 var qualityProps = (0, util_1.getQualityProps)(Object.assign({}, currentProps, props));
                 Object.assign(currentProps, props, qualityProps);
-                return mol_task_1.Task.create("Updating '".concat(label, "' representation"), function (runtime) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
-                    return (0, tslib_1.__generator)(this, function (_a) {
+                return mol_task_1.Task.create("Updating '".concat(label, "' representation"), function (runtime) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                    return tslib_1.__generator(this, function (_a) {
                         // TODO
                         geometryState.add(0, renderObject.id);
                         geometryState.snapshot();

package/lib/commonjs/mol-repr/shape/loci/angle.d.ts

@@ -58,6 +58,7 @@ export declare const AngleParams: {
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    allowTransparentBackfaces: PD.BooleanParam;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     lineSizeAttenuation: PD.BooleanParam;

package/lib/commonjs/mol-repr/shape/loci/angle.js

@@ -31,17 +31,17 @@ var SharedParams = {
     color: param_definition_1.ParamDefinition.Color(names_1.ColorNames.lightgreen),
     arcScale: param_definition_1.ParamDefinition.Numeric(0.7, { min: 0.01, max: 1, step: 0.01 })
 };
-var LinesParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, lines_1.Lines.Params), SharedParams), { lineSizeAttenuation: param_definition_1.ParamDefinition.Boolean(true), linesSize: param_definition_1.ParamDefinition.Numeric(0.04, { min: 0.01, max: 5, step: 0.01 }), dashLength: param_definition_1.ParamDefinition.Numeric(0.04, { min: 0.01, max: 0.2, step: 0.01 }) });
-var VectorsParams = (0, tslib_1.__assign)({}, LinesParams);
-var ArcParams = (0, tslib_1.__assign)({}, LinesParams);
-var SectorParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), SharedParams), { ignoreLight: param_definition_1.ParamDefinition.Boolean(true), sectorOpacity: param_definition_1.ParamDefinition.Numeric(0.75, { min: 0, max: 1, step: 0.01 }) });
+var LinesParams = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, lines_1.Lines.Params), SharedParams), { lineSizeAttenuation: param_definition_1.ParamDefinition.Boolean(true), linesSize: param_definition_1.ParamDefinition.Numeric(0.04, { min: 0.01, max: 5, step: 0.01 }), dashLength: param_definition_1.ParamDefinition.Numeric(0.04, { min: 0.01, max: 0.2, step: 0.01 }) });
+var VectorsParams = tslib_1.__assign({}, LinesParams);
+var ArcParams = tslib_1.__assign({}, LinesParams);
+var SectorParams = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, mesh_1.Mesh.Params), SharedParams), { ignoreLight: param_definition_1.ParamDefinition.Boolean(true), sectorOpacity: param_definition_1.ParamDefinition.Numeric(0.75, { min: 0, max: 1, step: 0.01 }) });
 var AngleVisuals = {
-    'vectors': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getVectorsShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
-    'arc': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getArcShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
-    'sector': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getSectorShape, mesh_1.Mesh.Utils, { modifyProps: function (p) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, p), { alpha: p.sectorOpacity })); }, modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { markerActions: marker_action_1.MarkerActions.Highlighting })); } }); },
-    'text': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getTextShape, text_1.Text.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { markerActions: marker_action_1.MarkerAction.None })); } }); },
+    'vectors': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getVectorsShape, lines_1.Lines.Utils, { modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { pickable: false })); } }); },
+    'arc': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getArcShape, lines_1.Lines.Utils, { modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { pickable: false })); } }); },
+    'sector': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getSectorShape, mesh_1.Mesh.Utils, { modifyProps: function (p) { return (tslib_1.__assign(tslib_1.__assign({}, p), { alpha: p.sectorOpacity })); }, modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { markerActions: marker_action_1.MarkerActions.Highlighting })); } }); },
+    'text': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getTextShape, text_1.Text.Utils, { modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { markerActions: marker_action_1.MarkerAction.None })); } }); },
 };
-exports.AngleParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, VectorsParams), ArcParams), SectorParams), common_1.LociLabelTextParams), { visuals: param_definition_1.ParamDefinition.MultiSelect(['vectors', 'sector', 'text'], param_definition_1.ParamDefinition.objectToOptions(AngleVisuals)) });
+exports.AngleParams = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, VectorsParams), ArcParams), SectorParams), common_1.LociLabelTextParams), { visuals: param_definition_1.ParamDefinition.MultiSelect(['vectors', 'sector', 'text'], param_definition_1.ParamDefinition.objectToOptions(AngleVisuals)) });
 //
 function getAngleState() {
     return {

package/lib/commonjs/mol-repr/shape/loci/common.js

@@ -16,4 +16,4 @@ exports.MeasurementRepresentationCommonTextParams = {
     textColor: param_definition_1.ParamDefinition.Color(names_1.ColorNames.black, { isEssential: true }),
     textSize: param_definition_1.ParamDefinition.Numeric(0.5, { min: 0.1, max: 10, step: 0.1 }, { isEssential: true }),
 };
-exports.LociLabelTextParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, text_1.Text.Params), exports.MeasurementRepresentationCommonTextParams), { borderWidth: param_definition_1.ParamDefinition.Numeric(0.2, { min: 0, max: 0.5, step: 0.01 }) });
+exports.LociLabelTextParams = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, text_1.Text.Params), exports.MeasurementRepresentationCommonTextParams), { borderWidth: param_definition_1.ParamDefinition.Numeric(0.2, { min: 0, max: 0.5, step: 0.01 }) });

package/lib/commonjs/mol-repr/shape/loci/dihedral.d.ts

@@ -58,6 +58,7 @@ export declare const DihedralParams: {
     flipSided: PD.BooleanParam;
     flatShaded: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    allowTransparentBackfaces: PD.BooleanParam;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     lineSizeAttenuation: PD.BooleanParam;

package/lib/commonjs/mol-repr/shape/loci/dihedral.js

@@ -31,22 +31,22 @@ var SharedParams = {
     color: param_definition_1.ParamDefinition.Color(names_1.ColorNames.lightgreen),
     arcScale: param_definition_1.ParamDefinition.Numeric(0.7, { min: 0.01, max: 1, step: 0.01 })
 };
-var LinesParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, lines_1.Lines.Params), SharedParams), { lineSizeAttenuation: param_definition_1.ParamDefinition.Boolean(true), linesSize: param_definition_1.ParamDefinition.Numeric(0.04, { min: 0.01, max: 5, step: 0.01 }), dashLength: param_definition_1.ParamDefinition.Numeric(0.04, { min: 0.01, max: 0.2, step: 0.01 }) });
-var VectorsParams = (0, tslib_1.__assign)({}, LinesParams);
-var ExtendersParams = (0, tslib_1.__assign)({}, LinesParams);
-var ArmsParams = (0, tslib_1.__assign)({}, LinesParams);
-var ArcParams = (0, tslib_1.__assign)({}, LinesParams);
-var SectorParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), SharedParams), { ignoreLight: param_definition_1.ParamDefinition.Boolean(true), sectorOpacity: param_definition_1.ParamDefinition.Numeric(0.75, { min: 0, max: 1, step: 0.01 }) });
+var LinesParams = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, lines_1.Lines.Params), SharedParams), { lineSizeAttenuation: param_definition_1.ParamDefinition.Boolean(true), linesSize: param_definition_1.ParamDefinition.Numeric(0.04, { min: 0.01, max: 5, step: 0.01 }), dashLength: param_definition_1.ParamDefinition.Numeric(0.04, { min: 0.01, max: 0.2, step: 0.01 }) });
+var VectorsParams = tslib_1.__assign({}, LinesParams);
+var ExtendersParams = tslib_1.__assign({}, LinesParams);
+var ArmsParams = tslib_1.__assign({}, LinesParams);
+var ArcParams = tslib_1.__assign({}, LinesParams);
+var SectorParams = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, mesh_1.Mesh.Params), SharedParams), { ignoreLight: param_definition_1.ParamDefinition.Boolean(true), sectorOpacity: param_definition_1.ParamDefinition.Numeric(0.75, { min: 0, max: 1, step: 0.01 }) });
 var DihedralVisuals = {
-    'vectors': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getVectorsShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
-    'extenders': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getExtendersShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
-    'connector': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getConnectorShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
-    'arms': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getArmsShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
-    'arc': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getArcShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
-    'sector': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getSectorShape, mesh_1.Mesh.Utils, { modifyProps: function (p) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, p), { alpha: p.sectorOpacity })); }, modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { markerActions: marker_action_1.MarkerActions.Highlighting })); } }); },
-    'text': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getTextShape, text_1.Text.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { markerActions: marker_action_1.MarkerAction.None })); } }); },
+    'vectors': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getVectorsShape, lines_1.Lines.Utils, { modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { pickable: false })); } }); },
+    'extenders': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getExtendersShape, lines_1.Lines.Utils, { modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { pickable: false })); } }); },
+    'connector': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getConnectorShape, lines_1.Lines.Utils, { modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { pickable: false })); } }); },
+    'arms': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getArmsShape, lines_1.Lines.Utils, { modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { pickable: false })); } }); },
+    'arc': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getArcShape, lines_1.Lines.Utils, { modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { pickable: false })); } }); },
+    'sector': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getSectorShape, mesh_1.Mesh.Utils, { modifyProps: function (p) { return (tslib_1.__assign(tslib_1.__assign({}, p), { alpha: p.sectorOpacity })); }, modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { markerActions: marker_action_1.MarkerActions.Highlighting })); } }); },
+    'text': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getTextShape, text_1.Text.Utils, { modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { markerActions: marker_action_1.MarkerAction.None })); } }); },
 };
-exports.DihedralParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, VectorsParams), ExtendersParams), ArmsParams), ArcParams), SectorParams), common_1.LociLabelTextParams), { visuals: param_definition_1.ParamDefinition.MultiSelect(['extenders', 'arms', 'sector', 'text'], param_definition_1.ParamDefinition.objectToOptions(DihedralVisuals)) });
+exports.DihedralParams = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, VectorsParams), ExtendersParams), ArmsParams), ArcParams), SectorParams), common_1.LociLabelTextParams), { visuals: param_definition_1.ParamDefinition.MultiSelect(['extenders', 'arms', 'sector', 'text'], param_definition_1.ParamDefinition.objectToOptions(DihedralVisuals)) });
 //
 function getDihedralState() {
     return {

package/lib/commonjs/mol-repr/shape/loci/distance.js

@@ -25,13 +25,13 @@ var geometry_1 = require("../../../mol-math/geometry");
 var SharedParams = {
     unitLabel: param_definition_1.ParamDefinition.Text('\u212B', { isEssential: true })
 };
-var LineParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, lines_1.Lines.Params), SharedParams), { lineSizeAttenuation: param_definition_1.ParamDefinition.Boolean(true), linesColor: param_definition_1.ParamDefinition.Color(names_1.ColorNames.lightgreen, { isEssential: true }), linesSize: param_definition_1.ParamDefinition.Numeric(0.075, { min: 0.01, max: 5, step: 0.01 }), dashLength: param_definition_1.ParamDefinition.Numeric(0.2, { min: 0.01, max: 0.2, step: 0.01 }) });
-var TextParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, common_1.LociLabelTextParams), SharedParams);
+var LineParams = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, lines_1.Lines.Params), SharedParams), { lineSizeAttenuation: param_definition_1.ParamDefinition.Boolean(true), linesColor: param_definition_1.ParamDefinition.Color(names_1.ColorNames.lightgreen, { isEssential: true }), linesSize: param_definition_1.ParamDefinition.Numeric(0.075, { min: 0.01, max: 5, step: 0.01 }), dashLength: param_definition_1.ParamDefinition.Numeric(0.2, { min: 0.01, max: 0.2, step: 0.01 }) });
+var TextParams = tslib_1.__assign(tslib_1.__assign({}, common_1.LociLabelTextParams), SharedParams);
 var DistanceVisuals = {
-    'lines': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getLinesShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { markerActions: marker_action_1.MarkerActions.Highlighting })); } }); },
-    'text': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getTextShape, text_1.Text.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { markerActions: marker_action_1.MarkerAction.None })); } }); },
+    'lines': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getLinesShape, lines_1.Lines.Utils, { modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { markerActions: marker_action_1.MarkerActions.Highlighting })); } }); },
+    'text': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getTextShape, text_1.Text.Utils, { modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { markerActions: marker_action_1.MarkerAction.None })); } }); },
 };
-exports.DistanceParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, LineParams), TextParams), { visuals: param_definition_1.ParamDefinition.MultiSelect(['lines', 'text'], param_definition_1.ParamDefinition.objectToOptions(DistanceVisuals)) });
+exports.DistanceParams = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, LineParams), TextParams), { visuals: param_definition_1.ParamDefinition.MultiSelect(['lines', 'text'], param_definition_1.ParamDefinition.objectToOptions(DistanceVisuals)) });
 //
 function getDistanceState() {
     return {

package/lib/commonjs/mol-repr/shape/loci/label.js

@@ -17,11 +17,11 @@ var text_builder_1 = require("../../../mol-geo/geometry/text/text-builder");
 var geometry_1 = require("../../../mol-math/geometry");
 var label_1 = require("../../../mol-theme/label");
 var common_1 = require("./common");
-var TextParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, common_1.LociLabelTextParams), { offsetZ: param_definition_1.ParamDefinition.Numeric(2, { min: 0, max: 10, step: 0.1 }) });
+var TextParams = tslib_1.__assign(tslib_1.__assign({}, common_1.LociLabelTextParams), { offsetZ: param_definition_1.ParamDefinition.Numeric(2, { min: 0, max: 10, step: 0.1 }) });
 var LabelVisuals = {
-    'text': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getTextShape, text_1.Text.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
+    'text': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getTextShape, text_1.Text.Utils, { modifyState: function (s) { return (tslib_1.__assign(tslib_1.__assign({}, s), { pickable: false })); } }); },
 };
-exports.LabelParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, TextParams), { scaleByRadius: param_definition_1.ParamDefinition.Boolean(true), visuals: param_definition_1.ParamDefinition.MultiSelect(['text'], param_definition_1.ParamDefinition.objectToOptions(LabelVisuals)) });
+exports.LabelParams = tslib_1.__assign(tslib_1.__assign({}, TextParams), { scaleByRadius: param_definition_1.ParamDefinition.Boolean(true), visuals: param_definition_1.ParamDefinition.MultiSelect(['text'], param_definition_1.ParamDefinition.objectToOptions(LabelVisuals)) });
 //
 var tmpSphere = (0, geometry_1.Sphere3D)();
 function label(info, condensed) {

package/lib/commonjs/mol-repr/shape/loci/orientation.d.ts

@@ -19,6 +19,7 @@ export declare const OrientationParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    allowTransparentBackfaces: PD.BooleanParam;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;

package/lib/commonjs/mol-repr/shape/loci/orientation.js

@@ -27,15 +27,15 @@ var SharedParams = {
     scaleFactor: param_definition_1.ParamDefinition.Numeric(1, { min: 0.1, max: 10, step: 0.1 }),
     radiusScale: param_definition_1.ParamDefinition.Numeric(2, { min: 0.1, max: 10, step: 0.1 })
 };
-var AxesParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), SharedParams);
-var BoxParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), SharedParams);
-var EllipsoidParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), SharedParams);
+var AxesParams = tslib_1.__assign(tslib_1.__assign({}, mesh_1.Mesh.Params), SharedParams);
+var BoxParams = tslib_1.__assign(tslib_1.__assign({}, mesh_1.Mesh.Params), SharedParams);
+var EllipsoidParams = tslib_1.__assign(tslib_1.__assign({}, mesh_1.Mesh.Params), SharedParams);
 var OrientationVisuals = {
     'axes': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getAxesShape, mesh_1.Mesh.Utils); },
     'box': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getBoxShape, mesh_1.Mesh.Utils); },
     'ellipsoid': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getEllipsoidShape, mesh_1.Mesh.Utils); },
 };
-exports.OrientationParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, AxesParams), BoxParams), EllipsoidParams), { visuals: param_definition_1.ParamDefinition.MultiSelect(['box'], param_definition_1.ParamDefinition.objectToOptions(OrientationVisuals)) });
+exports.OrientationParams = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, AxesParams), BoxParams), EllipsoidParams), { visuals: param_definition_1.ParamDefinition.MultiSelect(['box'], param_definition_1.ParamDefinition.objectToOptions(OrientationVisuals)) });
 //
 function getAxesName(locis) {
     var label = (0, label_1.structureElementLociLabelMany)(locis, { countsOnly: true });

package/lib/commonjs/mol-repr/shape/loci/plane.d.ts

@@ -18,6 +18,7 @@ export declare const PlaneParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    allowTransparentBackfaces: PD.BooleanParam;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;

package/lib/commonjs/mol-repr/shape/loci/plane.js

@@ -20,11 +20,11 @@ var marker_action_1 = require("../../../mol-util/marker-action");
 var plane_1 = require("../../../mol-geo/primitive/plane");
 var structure_1 = require("../../../mol-model/structure");
 var geometry_1 = require("../../../mol-math/geometry");
-var _PlaneParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), { color: param_definition_1.ParamDefinition.Color(names_1.ColorNames.orange), scaleFactor: param_definition_1.ParamDefinition.Numeric(1, { min: 0.1, max: 10, step: 0.1 }) });
+var _PlaneParams = tslib_1.__assign(tslib_1.__assign({}, mesh_1.Mesh.Params), { color: param_definition_1.ParamDefinition.Color(names_1.ColorNames.orange), scaleFactor: param_definition_1.ParamDefinition.Numeric(1, { min: 0.1, max: 10, step: 0.1 }) });
 var PlaneVisuals = {
     'plane': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getPlaneShape, mesh_1.Mesh.Utils); },
 };
-exports.PlaneParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _PlaneParams), { visuals: param_definition_1.ParamDefinition.MultiSelect(['plane'], param_definition_1.ParamDefinition.objectToOptions(PlaneVisuals)) });
+exports.PlaneParams = tslib_1.__assign(tslib_1.__assign({}, _PlaneParams), { visuals: param_definition_1.ParamDefinition.MultiSelect(['plane'], param_definition_1.ParamDefinition.objectToOptions(PlaneVisuals)) });
 //
 function getPlaneName(locis) {
     var label = (0, label_1.structureElementLociLabelMany)(locis, { countsOnly: true });

package/lib/commonjs/mol-repr/shape/model/unitcell.d.ts

@@ -21,6 +21,7 @@ export declare const UnitcellParams: {
     flatShaded: PD.BooleanParam;
     ignoreLight: PD.BooleanParam;
     xrayShaded: PD.BooleanParam;
+    allowTransparentBackfaces: PD.BooleanParam;
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;

package/lib/commonjs/mol-repr/shape/model/unitcell.js

@@ -31,11 +31,11 @@ var CellAttachment = {
     corner: 'Corner',
     center: 'Center'
 };
-var CellParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), { cellColor: param_definition_1.ParamDefinition.Color(names_1.ColorNames.orange), cellScale: param_definition_1.ParamDefinition.Numeric(2, { min: 0.1, max: 5, step: 0.1 }), ref: param_definition_1.ParamDefinition.Select('model', param_definition_1.ParamDefinition.objectToOptions(CellRef), { isEssential: true }), attachment: param_definition_1.ParamDefinition.Select('corner', param_definition_1.ParamDefinition.objectToOptions(CellAttachment), { isEssential: true }) });
+var CellParams = tslib_1.__assign(tslib_1.__assign({}, mesh_1.Mesh.Params), { cellColor: param_definition_1.ParamDefinition.Color(names_1.ColorNames.orange), cellScale: param_definition_1.ParamDefinition.Numeric(2, { min: 0.1, max: 5, step: 0.1 }), ref: param_definition_1.ParamDefinition.Select('model', param_definition_1.ParamDefinition.objectToOptions(CellRef), { isEssential: true }), attachment: param_definition_1.ParamDefinition.Select('corner', param_definition_1.ParamDefinition.objectToOptions(CellAttachment), { isEssential: true }) });
 var UnitcellVisuals = {
     'mesh': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getUnitcellShape, mesh_1.Mesh.Utils); },
 };
-exports.UnitcellParams = (0, tslib_1.__assign)({}, CellParams);
+exports.UnitcellParams = tslib_1.__assign({}, CellParams);
 function getUnitcellMesh(data, props, mesh) {
     var state = mesh_builder_1.MeshBuilder.createState(256, 128, mesh);
     var fromFractional = data.symmetry.spacegroup.cell.fromFractional;