molstar 3.3.1 → 3.4.0

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

@@ -8,7 +8,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  */
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var react_1 = require("react");
 var object_1 = require("../../mol-util/object");
 var use_behavior_1 = require("../hooks/use-behavior");
@@ -74,8 +74,8 @@ var _ScreenshotPreview = function (props) {
         if (canvasRef.current) {
             drawPreview(helper, canvasRef.current, props.customBackground, props.borderColor, props.borderWidth);
         }
-    }, (0, tslib_1.__spreadArray)([], Object.values(props), true));
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { position: 'relative', width: '100%', height: '100%' } }, { children: [(0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, onContextMenu: function (e) { e.preventDefault(); e.stopPropagation(); }, style: { display: 'block', width: '100%', height: '100%' } }, void 0), (0, jsx_runtime_1.jsx)(ViewportFrame, { plugin: plugin, canvas: currentCanvas, color: cropFrameColor }, void 0)] }), void 0) }, void 0);
+    }, tslib_1.__spreadArray([], Object.values(props), true));
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { position: 'relative', width: '100%', height: '100%' } }, { children: [(0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, onContextMenu: function (e) { e.preventDefault(); e.stopPropagation(); }, style: { display: 'block', width: '100%', height: '100%' } }), (0, jsx_runtime_1.jsx)(ViewportFrame, { plugin: plugin, canvas: currentCanvas, color: cropFrameColor })] })) });
 };
 exports.ScreenshotPreview = React.memo(_ScreenshotPreview, function (prev, next) { return (0, object_1.shallowEqual)(prev, next); });
 function drawPreview(helper, target, customBackground, borderColor, borderWidth) {
@@ -220,7 +220,7 @@ function ViewportFrame(_a) {
     function finish() {
         var cropFrame = cropFrameRef.current;
         if (cropParams.auto) {
-            helper === null || helper === void 0 ? void 0 : helper.behaviors.cropParams.next((0, tslib_1.__assign)((0, tslib_1.__assign)({}, cropParams), { auto: false }));
+            helper === null || helper === void 0 ? void 0 : helper.behaviors.cropParams.next(tslib_1.__assign(tslib_1.__assign({}, cropParams), { auto: false }));
         }
         helper === null || helper === void 0 ? void 0 : helper.behaviors.relativeCrop.next({
             x: (cropFrame.x - frame.x) / frame.width,
@@ -240,7 +240,7 @@ function ViewportFrame(_a) {
     var d = 4;
     var border = "3px solid ".concat(color);
     var transparent = 'transparent';
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-drag": 'move', style: { position: 'absolute', left: cropFrame.x, top: cropFrame.y, width: cropFrame.width, height: cropFrame.height, border: border, cursor: 'move' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'left', style: { position: 'absolute', left: cropFrame.x - d, top: cropFrame.y + d, width: 4 * d, height: cropFrame.height - d, background: transparent, cursor: 'w-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'right', style: { position: 'absolute', left: rectCrop.r - 2 * d, top: cropFrame.y, width: 4 * d, height: cropFrame.height - d, background: transparent, cursor: 'w-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'top', style: { position: 'absolute', left: cropFrame.x - d, top: cropFrame.y - d, width: cropFrame.width + 2 * d, height: 4 * d, background: transparent, cursor: 'n-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'bottom', style: { position: 'absolute', left: cropFrame.x - d, top: rectCrop.b - 2 * d, width: cropFrame.width + 2 * d, height: 4 * d, background: transparent, cursor: 'n-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'top, left', style: { position: 'absolute', left: rectCrop.l - d, top: rectCrop.t - d, width: 4 * d, height: 4 * d, background: transparent, cursor: 'nw-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'bottom, right', style: { position: 'absolute', left: rectCrop.r - 2 * d, top: rectCrop.b - 2 * d, width: 4 * d, height: 4 * d, background: transparent, cursor: 'nw-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'top, right', style: { position: 'absolute', left: rectCrop.r - 2 * d, top: rectCrop.t - d, width: 4 * d, height: 4 * d, background: transparent, cursor: 'ne-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }, void 0), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'bottom, left', style: { position: 'absolute', left: rectCrop.l - d, top: rectCrop.b - 2 * d, width: 4 * d, height: 4 * d, background: transparent, cursor: 'ne-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }, void 0)] }, void 0);
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-drag": 'move', style: { position: 'absolute', left: cropFrame.x, top: cropFrame.y, width: cropFrame.width, height: cropFrame.height, border: border, cursor: 'move' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'left', style: { position: 'absolute', left: cropFrame.x - d, top: cropFrame.y + d, width: 4 * d, height: cropFrame.height - d, background: transparent, cursor: 'w-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'right', style: { position: 'absolute', left: rectCrop.r - 2 * d, top: cropFrame.y, width: 4 * d, height: cropFrame.height - d, background: transparent, cursor: 'w-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'top', style: { position: 'absolute', left: cropFrame.x - d, top: cropFrame.y - d, width: cropFrame.width + 2 * d, height: 4 * d, background: transparent, cursor: 'n-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'bottom', style: { position: 'absolute', left: cropFrame.x - d, top: rectCrop.b - 2 * d, width: cropFrame.width + 2 * d, height: 4 * d, background: transparent, cursor: 'n-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'top, left', style: { position: 'absolute', left: rectCrop.l - d, top: rectCrop.t - d, width: 4 * d, height: 4 * d, background: transparent, cursor: 'nw-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'bottom, right', style: { position: 'absolute', left: rectCrop.r - 2 * d, top: rectCrop.b - 2 * d, width: 4 * d, height: 4 * d, background: transparent, cursor: 'nw-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'top, right', style: { position: 'absolute', left: rectCrop.r - 2 * d, top: rectCrop.t - d, width: 4 * d, height: 4 * d, background: transparent, cursor: 'ne-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu }), (0, jsx_runtime_1.jsx)("div", { "data-drag": 'bottom, left', style: { position: 'absolute', left: rectCrop.l - d, top: rectCrop.b - 2 * d, width: 4 * d, height: 4 * d, background: transparent, cursor: 'ne-resize' }, onMouseDown: onStart, onTouchStart: onTouchStart, draggable: false, onContextMenu: contextMenu })] });
 }
 function toRect(viewport) {
     return { l: viewport.x, t: viewport.y, r: viewport.x + viewport.width - 1, b: viewport.y + viewport.height - 1 };

package/lib/commonjs/mol-plugin-ui/controls/slider.js

@@ -9,11 +9,11 @@ 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 common_1 = require("./common");
 var mol_util_1 = require("../../mol-util");
 var Slider = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Slider, _super);
+    tslib_1.__extends(Slider, _super);
     function Slider() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { isChanging: false, current: 0 };
@@ -55,13 +55,13 @@ var Slider = /** @class */ (function (_super) {
         var step = this.props.step;
         if (step === void 0)
             step = 1;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-slider' }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SliderBase, { min: this.props.min, max: this.props.max, step: step, value: this.state.current, disabled: this.props.disabled, onBeforeChange: this.begin, onChange: this.updateCurrent, onAfterChange: this.end }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(common_1.TextInput, { numeric: true, delayMs: 50, value: this.state.current, blurOnEnter: true, onBlur: this.onManualBlur, isDisabled: this.props.disabled, onChange: this.updateManually }, void 0) }, void 0)] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-slider' }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SliderBase, { min: this.props.min, max: this.props.max, step: step, value: this.state.current, disabled: this.props.disabled, onBeforeChange: this.begin, onChange: this.updateCurrent, onAfterChange: this.end }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(common_1.TextInput, { numeric: true, delayMs: 50, value: this.state.current, blurOnEnter: true, onBlur: this.onManualBlur, isDisabled: this.props.disabled, onChange: this.updateManually }) })] }));
     };
     return Slider;
 }(React.Component));
 exports.Slider = Slider;
 var Slider2 = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Slider2, _super);
+    tslib_1.__extends(Slider2, _super);
     function Slider2() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { isChanging: false, current: [0, 1] };
@@ -110,7 +110,7 @@ var Slider2 = /** @class */ (function (_super) {
         var step = this.props.step;
         if (step === void 0)
             step = 1;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-slider2' }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(common_1.TextInput, { numeric: true, delayMs: 50, value: this.state.current[0], onEnter: this.props.onEnter, blurOnEnter: true, isDisabled: this.props.disabled, onChange: this.updateMin }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SliderBase, { min: this.props.min, max: this.props.max, step: step, value: this.state.current, disabled: this.props.disabled, onBeforeChange: this.begin, onChange: this.updateCurrent, onAfterChange: this.end, range: true, allowCross: true }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(common_1.TextInput, { numeric: true, delayMs: 50, value: this.state.current[1], onEnter: this.props.onEnter, blurOnEnter: true, isDisabled: this.props.disabled, onChange: this.updateMax }, void 0) }, void 0)] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-slider2' }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(common_1.TextInput, { numeric: true, delayMs: 50, value: this.state.current[0], onEnter: this.props.onEnter, blurOnEnter: true, isDisabled: this.props.disabled, onChange: this.updateMin }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SliderBase, { min: this.props.min, max: this.props.max, step: step, value: this.state.current, disabled: this.props.disabled, onBeforeChange: this.begin, onChange: this.updateCurrent, onAfterChange: this.end, range: true, allowCross: true }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(common_1.TextInput, { numeric: true, delayMs: 50, value: this.state.current[1], onEnter: this.props.onEnter, blurOnEnter: true, isDisabled: this.props.disabled, onChange: this.updateMax }) })] }));
     };
     return Slider2;
 }(React.Component));
@@ -183,20 +183,20 @@ function pauseEvent(e) {
     e.preventDefault();
 }
 var Handle = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Handle, _super);
+    tslib_1.__extends(Handle, _super);
     function Handle() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Handle.prototype.render = function () {
         var _a = this.props, className = _a.className, tipFormatter = _a.tipFormatter, vertical = _a.vertical, offset = _a.offset, value = _a.value, index = _a.index;
         var style = vertical ? { bottom: "".concat(offset, "%") } : { left: "".concat(offset, "%") };
-        return ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, title: tipFormatter(value, index) }, void 0));
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, title: tipFormatter(value, index) }));
     };
     return Handle;
 }(React.Component));
 exports.Handle = Handle;
 var SliderBase = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(SliderBase, _super);
+    tslib_1.__extends(SliderBase, _super);
     function SliderBase(props) {
         var _this = _super.call(this, props) || this;
         _this.sliderElement = React.createRef();
@@ -311,7 +311,7 @@ var SliderBase = /** @class */ (function (_super) {
         else if (state.handle !== undefined) {
             this.setState({ handle: state.handle });
         }
-        var data = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.state), state);
+        var data = tslib_1.__assign(tslib_1.__assign({}, this.state), state);
         var changedValue = props.range ? data.bounds : data.bounds[1];
         props.onChange(changedValue);
     };
@@ -330,7 +330,7 @@ var SliderBase = /** @class */ (function (_super) {
         var oldValue = state.bounds[state.handle];
         if (value === oldValue)
             return;
-        var nextBounds = (0, tslib_1.__spreadArray)([], state.bounds, true);
+        var nextBounds = tslib_1.__spreadArray([], state.bounds, true);
         nextBounds[state.handle] = value;
         var nextHandle = state.handle;
         if (!!props.pushable) {
@@ -381,7 +381,7 @@ var SliderBase = /** @class */ (function (_super) {
         var oldValue = state.bounds[valueNeedChanging];
         if (value === oldValue)
             return;
-        var nextBounds = (0, tslib_1.__spreadArray)([], state.bounds, true);
+        var nextBounds = tslib_1.__spreadArray([], state.bounds, true);
         nextBounds[valueNeedChanging] = value;
         this.onChange({ bounds: nextBounds });
     };
@@ -393,7 +393,7 @@ var SliderBase = /** @class */ (function (_super) {
         var _a = this.props, marks = _a.marks, step = _a.step, min = _a.min, max = _a.max;
         var cache = this._getPointsCache;
         if (!cache || cache.marks !== marks || cache.step !== step) {
-            var pointsObject = (0, tslib_1.__assign)({}, marks);
+            var pointsObject = tslib_1.__assign({}, marks);
             if (step !== null) {
                 for (var point = min; point <= max; point += step) {
                     pointsObject[point] = point;
@@ -533,7 +533,7 @@ var SliderBase = /** @class */ (function (_super) {
     };
     SliderBase.prototype.trimAlignValue = function (v, props) {
         var _a = (this.state || {}), handle = _a.handle, bounds = _a.bounds;
-        var _b = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.props), (props || {})), marks = _b.marks, step = _b.step, min = _b.min, max = _b.max, allowCross = _b.allowCross;
+        var _b = tslib_1.__assign(tslib_1.__assign({}, this.props), (props || {})), marks = _b.marks, step = _b.step, min = _b.min, max = _b.max, allowCross = _b.allowCross;
         var val = v;
         if (val <= min) {
             val = min;
@@ -587,7 +587,7 @@ var SliderBase = /** @class */ (function (_super) {
             for (var i = 0; i < bounds.length; i++)
                 this.handleElements.push(React.createRef());
         }
-        var handles = bounds.map(function (v, i) { return React.cloneElement(customHandle, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, commonHandleProps), { className: handlesClassNames[i], value: v, offset: offsets[i], dragging: handle === i, index: i, key: i, ref: _this.handleElements[i] })); });
+        var handles = bounds.map(function (v, i) { return React.cloneElement(customHandle, tslib_1.__assign(tslib_1.__assign({}, commonHandleProps), { className: handlesClassNames[i], value: v, offset: offsets[i], dragging: handle === i, index: i, key: i, ref: _this.handleElements[i] })); });
         if (!range) {
             handles.shift();
         }
@@ -598,7 +598,7 @@ var SliderBase = /** @class */ (function (_super) {
             _a["".concat(prefixCls, "-vertical")] = this.props.vertical,
             _a[className] = !!className,
             _a));
-        return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ ref: this.sliderElement, className: sliderClassName, onTouchStart: disabled ? mol_util_1.noop : this.onTouchStart, onMouseDown: disabled ? mol_util_1.noop : this.onMouseDown }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "".concat(prefixCls, "-rail") }, void 0), handles] }), void 0));
+        return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ ref: this.sliderElement, className: sliderClassName, onTouchStart: disabled ? mol_util_1.noop : this.onTouchStart, onMouseDown: disabled ? mol_util_1.noop : this.onMouseDown }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "".concat(prefixCls, "-rail") }), handles] })));
     };
     SliderBase.defaultProps = {
         prefixCls: 'msp-slider-base',
@@ -607,7 +607,7 @@ var SliderBase = /** @class */ (function (_super) {
         max: 100,
         step: 1,
         marks: {},
-        handle: (0, jsx_runtime_1.jsx)(Handle, { className: '', vertical: false, offset: 0, tipFormatter: function (v) { return v; }, value: 0, index: 0 }, void 0),
+        handle: (0, jsx_runtime_1.jsx)(Handle, { className: '', vertical: false, offset: 0, tipFormatter: function (v) { return v; }, value: 0, index: 0 }),
         onBeforeChange: mol_util_1.noop,
         onChange: mol_util_1.noop,
         onAfterChange: mol_util_1.noop,

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

@@ -19,7 +19,7 @@ var config_1 = require("../mol-plugin/config");
 var superposition_1 = require("./structure/superposition");
 var quick_styles_1 = require("./structure/quick-styles");
 var TrajectoryViewportControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(TrajectoryViewportControls, _super);
+    tslib_1.__extends(TrajectoryViewportControls, _super);
     function TrajectoryViewportControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { show: false, label: '' };
@@ -79,13 +79,13 @@ var TrajectoryViewportControls = /** @class */ (function (_super) {
         var isAnimating = this.plugin.behaviors.state.isAnimating.value;
         if (!this.state.show || (isAnimating && !this.state.label))
             return null;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-traj-controls' }, { children: [!isAnimating && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.SkipPreviousSvg, title: 'First Model', onClick: this.reset, disabled: isAnimating }, void 0), !isAnimating && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.NavigateBeforeSvg, title: 'Previous Model', onClick: this.prev, disabled: isAnimating }, void 0), !isAnimating && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.NavigateNextSvg, title: 'Next Model', onClick: this.next, disabled: isAnimating }, void 0), !!this.state.label && (0, jsx_runtime_1.jsx)("span", { children: this.state.label }, void 0)] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-traj-controls' }, { children: [!isAnimating && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.SkipPreviousSvg, title: 'First Model', onClick: this.reset, disabled: isAnimating }), !isAnimating && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.NavigateBeforeSvg, title: 'Previous Model', onClick: this.prev, disabled: isAnimating }), !isAnimating && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.NavigateNextSvg, title: 'Next Model', onClick: this.next, disabled: isAnimating }), !!this.state.label && (0, jsx_runtime_1.jsx)("span", { children: this.state.label })] }));
     };
     return TrajectoryViewportControls;
 }(base_1.PluginUIComponent));
 exports.TrajectoryViewportControls = TrajectoryViewportControls;
 var StateSnapshotViewportControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StateSnapshotViewportControls, _super);
+    tslib_1.__extends(StateSnapshotViewportControls, _super);
     function StateSnapshotViewportControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { isBusy: false, show: true };
@@ -155,8 +155,8 @@ var StateSnapshotViewportControls = /** @class */ (function (_super) {
         window.removeEventListener('keyup', this.keyUp, false);
     };
     StateSnapshotViewportControls.prototype.update = function (id) {
-        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:
                         this.setState({ isBusy: true });
@@ -177,13 +177,13 @@ var StateSnapshotViewportControls = /** @class */ (function (_super) {
         }
         var current = snapshots.state.current;
         var isPlaying = snapshots.state.isPlaying;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-state-snapshot-viewport-controls' }, { children: [(0, jsx_runtime_1.jsxs)("select", (0, tslib_1.__assign)({ className: 'msp-form-control', value: current || 'none', onChange: this.change, disabled: this.state.isBusy || isPlaying }, { children: [!current && (0, jsx_runtime_1.jsx)("option", { value: 'none' }, 'none'), snapshots.state.entries.valueSeq().map(function (e, i) { return (0, jsx_runtime_1.jsxs)("option", (0, tslib_1.__assign)({ value: e.snapshot.id }, { children: ["[".concat(i + 1, "/").concat(count, "]"), " ", e.name || new Date(e.timestamp).toLocaleString()] }), e.snapshot.id); })] }), void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: isPlaying ? icons_1.StopSvg : icons_1.PlayArrowSvg, title: isPlaying ? 'Pause' : 'Cycle States', onClick: this.togglePlay, disabled: isPlaying ? false : this.state.isBusy }, void 0), !isPlaying && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.NavigateBeforeSvg, title: 'Previous State', onClick: this.prev, disabled: this.state.isBusy || isPlaying }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.NavigateNextSvg, title: 'Next State', onClick: this.next, disabled: this.state.isBusy || isPlaying }, void 0)] }, void 0)] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-state-snapshot-viewport-controls' }, { children: [(0, jsx_runtime_1.jsxs)("select", tslib_1.__assign({ className: 'msp-form-control', value: current || 'none', onChange: this.change, disabled: this.state.isBusy || isPlaying }, { children: [!current && (0, jsx_runtime_1.jsx)("option", { value: 'none' }, 'none'), snapshots.state.entries.valueSeq().map(function (e, i) { return (0, jsx_runtime_1.jsxs)("option", tslib_1.__assign({ value: e.snapshot.id }, { children: ["[".concat(i + 1, "/").concat(count, "]"), " ", e.name || new Date(e.timestamp).toLocaleString()] }), e.snapshot.id); })] })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: isPlaying ? icons_1.StopSvg : icons_1.PlayArrowSvg, title: isPlaying ? 'Pause' : 'Cycle States', onClick: this.togglePlay, disabled: isPlaying ? false : this.state.isBusy }), !isPlaying && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.NavigateBeforeSvg, title: 'Previous State', onClick: this.prev, disabled: this.state.isBusy || isPlaying }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.NavigateNextSvg, title: 'Next State', onClick: this.next, disabled: this.state.isBusy || isPlaying })] })] }));
     };
     return StateSnapshotViewportControls;
 }(base_1.PluginUIComponent));
 exports.StateSnapshotViewportControls = StateSnapshotViewportControls;
 var AnimationViewportControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(AnimationViewportControls, _super);
+    tslib_1.__extends(AnimationViewportControls, _super);
     function AnimationViewportControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { isEmpty: true, isExpanded: false, isBusy: false, isAnimating: false, isPlaying: false };
@@ -220,13 +220,13 @@ var AnimationViewportControls = /** @class */ (function (_super) {
         if (isPlaying || this.state.isEmpty || this.plugin.managers.animation.isEmpty || !this.plugin.config.get(config_1.PluginConfig.Viewport.ShowAnimation))
             return null;
         var isAnimating = this.state.isAnimating;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-animation-viewport-controls' }, { children: [(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)(common_1.IconButton, { svg: isAnimating || isPlaying ? icons_1.StopSvg : icons_1.SubscriptionsOutlinedSvg, transparent: true, title: isAnimating ? 'Stop' : 'Select Animation', onClick: isAnimating || isPlaying ? this.stop : this.toggleExpanded, toggleState: this.state.isExpanded, disabled: isAnimating || isPlaying ? false : this.state.isBusy || this.state.isPlaying || this.state.isEmpty }, void 0)] }, void 0), (this.state.isExpanded && !this.state.isBusy) && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-animation-viewport-controls-select' }, { children: (0, jsx_runtime_1.jsx)(animation_1.AnimationControls, { onStart: this.toggleExpanded }, void 0) }), void 0)] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-animation-viewport-controls' }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: isAnimating || isPlaying ? icons_1.StopSvg : icons_1.SubscriptionsOutlinedSvg, transparent: true, title: isAnimating ? 'Stop' : 'Select Animation', onClick: isAnimating || isPlaying ? this.stop : this.toggleExpanded, toggleState: this.state.isExpanded, disabled: isAnimating || isPlaying ? false : this.state.isBusy || this.state.isPlaying || this.state.isEmpty })] }), (this.state.isExpanded && !this.state.isBusy) && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-animation-viewport-controls-select' }, { children: (0, jsx_runtime_1.jsx)(animation_1.AnimationControls, { onStart: this.toggleExpanded }) }))] }));
     };
     return AnimationViewportControls;
 }(base_1.PluginUIComponent));
 exports.AnimationViewportControls = AnimationViewportControls;
 var SelectionViewportControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(SelectionViewportControls, _super);
+    tslib_1.__extends(SelectionViewportControls, _super);
     function SelectionViewportControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.onMouseMove = function (e) {
@@ -243,13 +243,13 @@ var SelectionViewportControls = /** @class */ (function (_super) {
     SelectionViewportControls.prototype.render = function () {
         if (!this.plugin.selectionMode)
             return null;
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-selection-viewport-controls', onMouseMove: this.onMouseMove }, { children: (0, jsx_runtime_1.jsx)(selection_1.StructureSelectionActionsControls, {}, void 0) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-selection-viewport-controls', onMouseMove: this.onMouseMove }, { children: (0, jsx_runtime_1.jsx)(selection_1.StructureSelectionActionsControls, {}) }));
     };
     return SelectionViewportControls;
 }(base_1.PluginUIComponent));
 exports.SelectionViewportControls = SelectionViewportControls;
 var LociLabels = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(LociLabels, _super);
+    tslib_1.__extends(LociLabels, _super);
     function LociLabels() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { labels: [] };
@@ -263,13 +263,13 @@ var LociLabels = /** @class */ (function (_super) {
         if (this.state.labels.length === 0) {
             return null;
         }
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-highlight-info' }, { children: this.state.labels.map(function (e, i) { return (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: e } }, '' + i); }) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-highlight-info' }, { children: this.state.labels.map(function (e, i) { return (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: e } }, '' + i); }) }));
     };
     return LociLabels;
 }(base_1.PluginUIComponent));
 exports.LociLabels = LociLabels;
 var CustomStructureControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(CustomStructureControls, _super);
+    tslib_1.__extends(CustomStructureControls, _super);
     function CustomStructureControls() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -283,18 +283,18 @@ var CustomStructureControls = /** @class */ (function (_super) {
         this.plugin.customStructureControls.forEach(function (Controls, key) {
             controls.push((0, jsx_runtime_1.jsx)(Controls, { initiallyCollapsed: _this.props.initiallyCollapsed }, key));
         });
-        return controls.length > 0 ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: controls }, void 0) : null;
+        return controls.length > 0 ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: controls }) : null;
     };
     return CustomStructureControls;
 }(base_1.PluginUIComponent));
 exports.CustomStructureControls = CustomStructureControls;
 var DefaultStructureTools = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(DefaultStructureTools, _super);
+    tslib_1.__extends(DefaultStructureTools, _super);
     function DefaultStructureTools() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DefaultStructureTools.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-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }, void 0), "Structure Tools"] }), void 0), (0, jsx_runtime_1.jsx)(source_1.StructureSourceControls, {}, void 0), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}, void 0), (0, jsx_runtime_1.jsx)(superposition_1.StructureSuperpositionControls, {}, void 0), (0, jsx_runtime_1.jsx)(quick_styles_1.StructureQuickStylesControls, {}, void 0), (0, jsx_runtime_1.jsx)(components_1.StructureComponentControls, {}, void 0), this.plugin.config.get(config_1.PluginConfig.VolumeStreaming.Enabled) && (0, jsx_runtime_1.jsx)(volume_1.VolumeStreamingControls, {}, void 0), (0, jsx_runtime_1.jsx)(volume_1.VolumeSourceControls, {}, void 0), (0, jsx_runtime_1.jsx)(CustomStructureControls, {}, 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-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }), "Structure Tools"] })), (0, jsx_runtime_1.jsx)(source_1.StructureSourceControls, {}), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}), (0, jsx_runtime_1.jsx)(superposition_1.StructureSuperpositionControls, {}), (0, jsx_runtime_1.jsx)(quick_styles_1.StructureQuickStylesControls, {}), (0, jsx_runtime_1.jsx)(components_1.StructureComponentControls, {}), this.plugin.config.get(config_1.PluginConfig.VolumeStreaming.Enabled) && (0, jsx_runtime_1.jsx)(volume_1.VolumeStreamingControls, {}), (0, jsx_runtime_1.jsx)(volume_1.VolumeSourceControls, {}), (0, jsx_runtime_1.jsx)(CustomStructureControls, {})] });
     };
     return DefaultStructureTools;
 }(base_1.PluginUIComponent));

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

@@ -33,7 +33,7 @@ var Bounds = new Map([
     ['fo-fc(-ve)', [-5, -1]],
 ]);
 var Channel = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Channel, _super);
+    tslib_1.__extends(Channel, _super);
     function Channel() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.ref = mol_state_1.StateSelection.findTagInSubtree(_this.plugin.state.data.tree, _this.props.bCell.transform.ref, _this.props.name);
@@ -86,38 +86,38 @@ var Channel = /** @class */ (function (_super) {
         var step = (0, number_1.toPrecision)(isRelative ? Math.round(((vMax - vMin) / sigma)) / 100 : sigma / 100, 2);
         var ctrlMin = isRelative ? relMin : vMin;
         var ctrlMax = isRelative ? relMax : vMax;
-        return (0, jsx_runtime_1.jsx)(common_1.ExpandableControlRow, { label: props.label + (props.isRelative ? ' \u03C3' : ''), colorStripe: channel.color, pivot: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-volume-channel-inline-controls' }, { children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, min: ctrlMin, max: ctrlMax, step: step, onChange: function (v) { return props.changeIso(props.name, v, isRelative); }, disabled: props.params.isDisabled, onEnter: props.params.events.onEnter }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.getVisible() ? icons_1.VisibilityOutlinedSvg : icons_1.VisibilityOffOutlinedSvg, onClick: this.toggleVisible, toggleState: false, disabled: props.params.isDisabled }, void 0)] }), void 0), controls: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { onChange: function (_a) {
+        return (0, jsx_runtime_1.jsx)(common_1.ExpandableControlRow, { label: props.label + (props.isRelative ? ' \u03C3' : ''), colorStripe: channel.color, pivot: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-volume-channel-inline-controls' }, { children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, min: ctrlMin, max: ctrlMax, step: step, onChange: function (v) { return props.changeIso(props.name, v, isRelative); }, disabled: props.params.isDisabled, onEnter: props.params.events.onEnter }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.getVisible() ? icons_1.VisibilityOutlinedSvg : icons_1.VisibilityOffOutlinedSvg, onClick: this.toggleVisible, toggleState: false, disabled: props.params.isDisabled })] })), controls: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { onChange: function (_a) {
                     var name = _a.name, value = _a.value;
                     return props.changeParams(props.name, name, value);
-                }, params: ChannelParams, values: channel, onEnter: props.params.events.onEnter, isDisabled: props.params.isDisabled }, void 0) }, void 0);
+                }, params: ChannelParams, values: channel, onEnter: props.params.events.onEnter, isDisabled: props.params.isDisabled }) });
     };
     return Channel;
 }(base_1.PluginUIComponent));
 var VolumeStreamingCustomControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(VolumeStreamingCustomControls, _super);
+    tslib_1.__extends(VolumeStreamingCustomControls, _super);
     function VolumeStreamingCustomControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.changeIso = function (name, value, isRelative) {
             var _a;
             var old = _this.props.params;
-            _this.newParams((0, tslib_1.__assign)((0, tslib_1.__assign)({}, old), { entry: {
+            _this.newParams(tslib_1.__assign(tslib_1.__assign({}, old), { entry: {
                     name: old.entry.name,
-                    params: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params), { channels: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params.channels), (_a = {}, _a[name] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params.channels[name]), { isoValue: isRelative ? volume_1.Volume.IsoValue.relative(value) : volume_1.Volume.IsoValue.absolute(value) }), _a)) })
+                    params: tslib_1.__assign(tslib_1.__assign({}, old.entry.params), { channels: tslib_1.__assign(tslib_1.__assign({}, old.entry.params.channels), (_a = {}, _a[name] = tslib_1.__assign(tslib_1.__assign({}, old.entry.params.channels[name]), { isoValue: isRelative ? volume_1.Volume.IsoValue.relative(value) : volume_1.Volume.IsoValue.absolute(value) }), _a)) })
                 } }));
         };
         _this.changeParams = function (name, param, value) {
             var _a, _b;
             var old = _this.props.params;
-            _this.newParams((0, tslib_1.__assign)((0, tslib_1.__assign)({}, old), { entry: {
+            _this.newParams(tslib_1.__assign(tslib_1.__assign({}, old), { entry: {
                     name: old.entry.name,
-                    params: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params), { channels: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params.channels), (_a = {}, _a[name] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params.channels[name]), (_b = {}, _b[param] = value, _b)), _a)) })
+                    params: tslib_1.__assign(tslib_1.__assign({}, old.entry.params), { channels: tslib_1.__assign(tslib_1.__assign({}, old.entry.params.channels), (_a = {}, _a[name] = tslib_1.__assign(tslib_1.__assign({}, old.entry.params.channels[name]), (_b = {}, _b[param] = value, _b)), _a)) })
                 } }));
         };
         _this.changeOption = function (_a) {
             var name = _a.name, value = _a.value;
             var old = _this.props.params;
             if (name === 'entry') {
-                _this.newParams((0, tslib_1.__assign)((0, tslib_1.__assign)({}, old), { entry: {
+                _this.newParams(tslib_1.__assign(tslib_1.__assign({}, old), { entry: {
                         name: value,
                         params: old.entry.params,
                     } }));
@@ -134,7 +134,7 @@ var VolumeStreamingCustomControls = /** @class */ (function (_super) {
                         .entry.map(old.entry.name)
                         .params
                         .view.map(value.name).defaultValue;
-                var viewParams = (0, tslib_1.__assign)({}, oldView);
+                var viewParams = tslib_1.__assign({}, oldView);
                 if (value.name === 'selection-box') {
                     viewParams.radius = value.params.radius;
                 }
@@ -147,9 +147,9 @@ var VolumeStreamingCustomControls = /** @class */ (function (_super) {
                     viewParams.selectionDetailLevel = value.params.selectionDetailLevel;
                 }
                 viewParams.isUnbounded = !!value.params.isUnbounded;
-                _this.newParams((0, tslib_1.__assign)((0, tslib_1.__assign)({}, old), { entry: {
+                _this.newParams(tslib_1.__assign(tslib_1.__assign({}, old), { entry: {
                         name: old.entry.name,
-                        params: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old.entry.params), { view: {
+                        params: tslib_1.__assign(tslib_1.__assign({}, old.entry.params), { view: {
                                 name: value.name,
                                 params: viewParams
                             }, detailLevel: value.params.detailLevel, channels: isEM
@@ -171,7 +171,7 @@ var VolumeStreamingCustomControls = /** @class */ (function (_super) {
         this.props.events.onChange(params, this.areInitial(params));
     };
     VolumeStreamingCustomControls.prototype.convert = function (channel, stats, isRelative) {
-        return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, channel), { isoValue: isRelative
+        return tslib_1.__assign(tslib_1.__assign({}, channel), { isoValue: isRelative
                 ? volume_1.Volume.IsoValue.toRelative(channel.isoValue, stats)
                 : volume_1.Volume.IsoValue.toAbsolute(channel.isoValue, stats) });
     };
@@ -220,7 +220,7 @@ var VolumeStreamingCustomControls = /** @class */ (function (_super) {
                 'auto': param_definition_1.ParamDefinition.Group({
                     radius: param_definition_1.ParamDefinition.Numeric(5, { min: 0, max: 50, step: 0.5 }, { description: 'Radius in \u212B within which the volume is shown.' }),
                     detailLevel: detailLevel,
-                    selectionDetailLevel: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, detailLevel), { label: 'Selection Detail' }),
+                    selectionDetailLevel: tslib_1.__assign(tslib_1.__assign({}, detailLevel), { label: 'Selection Detail' }),
                     isRelative: isRelativeParam,
                     isUnbounded: isUnboundedParam,
                 }, { description: 'Box around focused element.' }),
@@ -243,9 +243,9 @@ var VolumeStreamingCustomControls = /** @class */ (function (_super) {
             }
         };
         if (isOff) {
-            return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { onChange: this.changeOption, params: OptionsParams, values: options, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled }, void 0);
+            return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { onChange: this.changeOption, params: OptionsParams, values: options, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled });
         }
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isEM && (0, jsx_runtime_1.jsx)(Channel, { label: '2Fo-Fc', name: '2fo-fc', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[0], isUnbounded: isUnbounded }, void 0), !isEM && (0, jsx_runtime_1.jsx)(Channel, { label: 'Fo-Fc(+ve)', name: 'fo-fc(+ve)', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[1], isUnbounded: isUnbounded }, void 0), !isEM && (0, jsx_runtime_1.jsx)(Channel, { label: 'Fo-Fc(-ve)', name: 'fo-fc(-ve)', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[1], isUnbounded: isUnbounded }, void 0), isEM && (0, jsx_runtime_1.jsx)(Channel, { label: 'EM', name: 'em', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[0], isUnbounded: isUnbounded }, void 0), (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { onChange: this.changeOption, params: OptionsParams, values: options, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled }, void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isEM && (0, jsx_runtime_1.jsx)(Channel, { label: '2Fo-Fc', name: '2fo-fc', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[0], isUnbounded: isUnbounded }), !isEM && (0, jsx_runtime_1.jsx)(Channel, { label: 'Fo-Fc(+ve)', name: 'fo-fc(+ve)', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[1], isUnbounded: isUnbounded }), !isEM && (0, jsx_runtime_1.jsx)(Channel, { label: 'Fo-Fc(-ve)', name: 'fo-fc(-ve)', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[1], isUnbounded: isUnbounded }), isEM && (0, jsx_runtime_1.jsx)(Channel, { label: 'EM', name: 'em', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[0], isUnbounded: isUnbounded }), (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { onChange: this.changeOption, params: OptionsParams, values: options, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled })] });
     };
     return VolumeStreamingCustomControls;
 }(base_1.PluginUIComponent));

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

@@ -8,15 +8,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createPluginUI = void 0;
 var tslib_1 = require("tslib");
-var React = (0, tslib_1.__importStar)(require("react"));
-var ReactDOM = (0, tslib_1.__importStar)(require("react-dom"));
+var React = tslib_1.__importStar(require("react"));
+var ReactDOM = tslib_1.__importStar(require("react-dom"));
 var plugin_1 = require("./plugin");
 var context_1 = require("./context");
 var spec_1 = require("./spec");
 function createPluginUI(target, spec, options) {
-    return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+    return tslib_1.__awaiter(this, void 0, void 0, function () {
         var ctx;
-        return (0, tslib_1.__generator)(this, function (_a) {
+        return tslib_1.__generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     ctx = new context_1.PluginUIContext(spec || (0, spec_1.DefaultPluginUISpec)());

package/lib/commonjs/mol-plugin-ui/left-panel.d.ts

@@ -1,11 +1,18 @@
 /**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 /// <reference types="react" />
 import { LeftPanelTabName } from '../mol-plugin/layout';
 import { PluginUIComponent } from './base';
+export declare class CustomImportControls extends PluginUIComponent<{
+    initiallyCollapsed?: boolean;
+}> {
+    componentDidMount(): void;
+    render(): JSX.Element | null;
+}
 export declare class LeftPanelControls extends PluginUIComponent<{}, {
     tab: LeftPanelTabName;
 }> {