molstar 3.3.0 → 3.5.0

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

@@ -83,7 +83,7 @@ var ParameterControls = /** @class */ (function (_super) {
         var essentials = this.renderPart(groups.essentials);
         var advanced = this.renderPart(groups.advanced);
         if (essentials && advanced) {
-            return _jsxs(_Fragment, { children: [essentials, _jsx(ExpandGroup, __assign({ header: 'Advanced Options' }, { children: advanced }), void 0)] }, void 0);
+            return _jsxs(_Fragment, { children: [essentials, _jsx(ExpandGroup, __assign({ header: 'Advanced Options' }, { children: advanced }))] });
         }
         else if (essentials) {
             return essentials;
@@ -115,7 +115,7 @@ var ParameterMappingControl = /** @class */ (function (_super) {
         var t = this.props.mapping.getTarget(this.plugin);
         var values = this.props.mapping.getValues(t, this.plugin);
         var params = this.props.mapping.params(this.plugin);
-        return _jsx(ParameterControls, { params: params, values: values, onChange: this.setSettings }, void 0);
+        return _jsx(ParameterControls, { params: params, values: values, onChange: this.setSettings });
     };
     return ParameterMappingControl;
 }(PluginUIComponent));
@@ -205,7 +205,7 @@ var ParamHelp = /** @class */ (function (_super) {
     ParamHelp.prototype.render = function () {
         var _a = this.props, legend = _a.legend, description = _a.description;
         var Legend = legend && legendFor(legend);
-        return _jsx("div", __assign({ className: 'msp-help-text' }, { children: _jsxs("div", { children: [_jsxs("div", __assign({ className: 'msp-help-description' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, inline: true }, void 0), description] }), void 0), Legend && _jsx("div", __assign({ className: 'msp-help-legend' }, { children: _jsx(Legend, { legend: legend }, void 0) }), void 0)] }, void 0) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-help-text' }, { children: _jsxs("div", { children: [_jsxs("div", __assign({ className: 'msp-help-description' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, inline: true }), description] })), Legend && _jsx("div", __assign({ className: 'msp-help-legend' }, { children: _jsx(Legend, { legend: legend }) }))] }) }));
     };
     return ParamHelp;
 }(React.PureComponent));
@@ -225,7 +225,7 @@ function renderSimple(options) {
     var hasHelp = help.description || help.legend;
     var desc = label + (hasHelp ? '. Click for help.' : '');
     return _jsxs(_Fragment, { children: [_jsx(ControlRow, { className: className, title: desc, label: _jsxs(_Fragment, { children: [label, hasHelp &&
-                            _jsx("button", __assign({ className: 'msp-help msp-btn-link msp-btn-icon msp-control-group-expander', onClick: toggleHelp, title: desc || "".concat(state.showHelp ? 'Hide' : 'Show', " help"), style: { background: 'transparent', textAlign: 'left', padding: '0' } }, { children: _jsx(Icon, { svg: HelpOutlineSvg }, void 0) }), void 0)] }, void 0), control: control }, void 0), hasHelp && state.showHelp && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ParamHelp, { legend: help.legend, description: help.description }, void 0) }), void 0), addOn] }, void 0);
+                            _jsx("button", __assign({ className: 'msp-help msp-btn-link msp-btn-icon msp-control-group-expander', onClick: toggleHelp, title: desc || "".concat(state.showHelp ? 'Hide' : 'Show', " help"), style: { background: 'transparent', textAlign: 'left', padding: '0' } }, { children: _jsx(Icon, { svg: HelpOutlineSvg }) }))] }), control: control }), hasHelp && state.showHelp && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ParamHelp, { legend: help.legend, description: help.description }) })), addOn] });
 }
 var SimpleParam = /** @class */ (function (_super) {
     __extends(SimpleParam, _super);
@@ -259,7 +259,7 @@ var BoolControl = /** @class */ (function (_super) {
         return _this;
     }
     BoolControl.prototype.renderControl = function () {
-        return _jsxs("button", __assign({ onClick: this.onClick, disabled: this.props.isDisabled }, { children: [_jsx(Icon, { svg: this.props.value ? CheckSvg : ClearSvg }, void 0), this.props.value ? 'On' : 'Off'] }), void 0);
+        return _jsxs("button", __assign({ onClick: this.onClick, disabled: this.props.isDisabled }, { children: [_jsx(Icon, { svg: this.props.value ? CheckSvg : ClearSvg }), this.props.value ? 'On' : 'Off'] }));
     };
     return BoolControl;
 }(SimpleParam));
@@ -295,7 +295,7 @@ var LineGraphControl = /** @class */ (function (_super) {
     }
     LineGraphControl.prototype.render = function () {
         var label = this.props.param.label || camelCaseToWords(this.props.name);
-        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: "".concat(this.state.message) }), void 0) }, void 0), _jsx("div", __assign({ className: 'msp-control-offset', style: { display: this.state.isExpanded ? 'block' : 'none' } }, { children: _jsx(LineGraphComponent, { data: this.props.param.defaultValue, onChange: this.onChange, onHover: this.onHover, onDrag: this.onDrag }, void 0) }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: "".concat(this.state.message) })) }), _jsx("div", __assign({ className: 'msp-control-offset', style: { display: this.state.isExpanded ? 'block' : 'none' } }, { children: _jsx(LineGraphComponent, { data: this.props.param.defaultValue, onChange: this.onChange, onHover: this.onHover, onDrag: this.onDrag }) }))] });
     };
     return LineGraphControl;
 }(React.PureComponent));
@@ -316,7 +316,7 @@ var NumberInputControl = /** @class */ (function (_super) {
         var placeholder = this.props.param.label || camelCaseToWords(this.props.name);
         var label = this.props.param.label || camelCaseToWords(this.props.name);
         var p = getPrecision(this.props.param.step || 0.01);
-        return _jsx(ControlRow, { title: this.props.param.description, label: label, control: _jsx(TextInput, { numeric: true, value: parseFloat(this.props.value.toFixed(p)), onEnter: this.props.onEnter, placeholder: placeholder, isDisabled: this.props.isDisabled, onChange: this.update }, void 0) }, void 0);
+        return _jsx(ControlRow, { title: this.props.param.description, label: label, control: _jsx(TextInput, { numeric: true, value: parseFloat(this.props.value.toFixed(p)), onEnter: this.props.onEnter, placeholder: placeholder, isDisabled: this.props.isDisabled, onChange: this.update }) });
     };
     return NumberInputControl;
 }(React.PureComponent));
@@ -330,7 +330,7 @@ var NumberRangeControl = /** @class */ (function (_super) {
     }
     NumberRangeControl.prototype.renderControl = function () {
         var value = typeof this.props.value === 'undefined' ? this.props.param.defaultValue : this.props.value;
-        return _jsx(Slider, { value: value, min: this.props.param.min, max: this.props.param.max, step: this.props.param.step, onChange: this.onChange, onChangeImmediate: this.props.param.immediateUpdate ? this.onChange : void 0, disabled: this.props.isDisabled, onEnter: this.props.onEnter }, void 0);
+        return _jsx(Slider, { value: value, min: this.props.param.min, max: this.props.param.max, step: this.props.param.step, onChange: this.onChange, onChangeImmediate: this.props.param.immediateUpdate ? this.onChange : void 0, disabled: this.props.isDisabled, onEnter: this.props.onEnter });
     };
     return NumberRangeControl;
 }(SimpleParam));
@@ -356,7 +356,7 @@ var TextControl = /** @class */ (function (_super) {
     }
     TextControl.prototype.renderControl = function () {
         var placeholder = this.props.param.label || camelCaseToWords(this.props.name);
-        return _jsx("input", { type: 'text', value: this.props.value || '', placeholder: placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter ? this.onKeyPress : void 0, disabled: this.props.isDisabled }, void 0);
+        return _jsx("input", { type: 'text', value: this.props.value || '', placeholder: placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter ? this.onKeyPress : void 0, disabled: this.props.isDisabled });
     };
     return TextControl;
 }(SimpleParam));
@@ -384,7 +384,7 @@ var PureSelectControl = /** @class */ (function (_super) {
         return _jsxs("select", __assign({ className: 'msp-form-control', title: this.props.title, value: this.props.value !== void 0 ? this.props.value : this.props.param.defaultValue, onChange: this.onChange, disabled: this.props.isDisabled }, { children: [isInvalid && _jsx("option", __assign({ value: this.props.value }, { children: "[Invalid] ".concat(this.props.value) }), this.props.value), this.props.param.options.map(function (_a) {
                     var value = _a[0], label = _a[1];
                     return _jsx("option", __assign({ value: value }, { children: label }), value);
-                })] }), void 0);
+                })] }));
     };
     return PureSelectControl;
 }(React.PureComponent));
@@ -430,14 +430,14 @@ var SelectControl = /** @class */ (function (_super) {
             ? (this.props.value === 'on' ? CheckSvg
                 : this.props.value === 'off' ? ClearSvg : void 0)
             : void 0;
-        return _jsx(ToggleButton, { disabled: this.props.isDisabled, style: { textAlign: textAlign, overflow: 'hidden', textOverflow: 'ellipsis' }, label: label, title: label, icon: icon, toggle: toggle, isSelected: this.state.showOptions }, void 0);
+        return _jsx(ToggleButton, { disabled: this.props.isDisabled, style: { textAlign: textAlign, overflow: 'hidden', textOverflow: 'ellipsis' }, label: label, title: label, icon: icon, toggle: toggle, isSelected: this.state.showOptions });
     };
     SelectControl.prototype.renderAddOn = function () {
         if (!this.state.showOptions)
             return null;
         var items = this.items(this.props.param);
         var current = ActionMenu.findItem(items, this.props.value);
-        return _jsx(ActionMenu, { items: items, current: current, onSelect: this.onSelect }, void 0);
+        return _jsx(ActionMenu, { items: items, current: current, onSelect: this.onSelect });
     };
     SelectControl.prototype.render = function () {
         return renderSimple({
@@ -478,14 +478,14 @@ var ValueRefControl = /** @class */ (function (_super) {
         var label = current
             ? current.label
             : "[Ref] ".concat((_a = this.props.value.ref) !== null && _a !== void 0 ? _a : '');
-        return _jsx(ToggleButton, { disabled: this.props.isDisabled, style: { textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis' }, label: label, title: label, toggle: this.toggle, isSelected: this.state.showOptions }, void 0);
+        return _jsx(ToggleButton, { disabled: this.props.isDisabled, style: { textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis' }, label: label, title: label, toggle: this.toggle, isSelected: this.state.showOptions });
     };
     ValueRefControl.prototype.renderAddOn = function () {
         if (!this.state.showOptions)
             return null;
         var items = this.items(this.props.param);
         var current = ActionMenu.findItem(items, this.props.value.ref);
-        return _jsx(ActionMenu, { items: items, current: current, onSelect: this.onSelect }, void 0);
+        return _jsx(ActionMenu, { items: items, current: current, onSelect: this.onSelect });
     };
     ValueRefControl.prototype.render = function () {
         return renderSimple({
@@ -528,7 +528,7 @@ var IntervalControl = /** @class */ (function (_super) {
         var label = this.props.param.label || camelCaseToWords(this.props.name);
         var p = getPrecision(this.props.param.step || 0.01);
         var value = "[".concat(v[0].toFixed(p), ", ").concat(v[1].toFixed(p), "]");
-        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: value }), void 0) }, void 0), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ParameterControls, { params: this.components, values: v, onChange: this.componentChange, onEnter: this.props.onEnter }, void 0) }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: value })) }), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ParameterControls, { params: this.components, values: v, onChange: this.componentChange, onEnter: this.props.onEnter }) }))] });
     };
     return IntervalControl;
 }(React.PureComponent));
@@ -541,7 +541,7 @@ var BoundedIntervalControl = /** @class */ (function (_super) {
         return _this;
     }
     BoundedIntervalControl.prototype.renderControl = function () {
-        return _jsx(Slider2, { value: this.props.value, min: this.props.param.min, max: this.props.param.max, step: this.props.param.step, onChange: this.onChange, disabled: this.props.isDisabled, onEnter: this.props.onEnter }, void 0);
+        return _jsx(Slider2, { value: this.props.value, min: this.props.param.min, max: this.props.param.max, step: this.props.param.step, onChange: this.onChange, disabled: this.props.isDisabled, onEnter: this.props.onEnter });
     };
     return BoundedIntervalControl;
 }(SimpleParam));
@@ -566,7 +566,7 @@ var ColorControl = /** @class */ (function (_super) {
         };
     };
     ColorControl.prototype.renderControl = function () {
-        return _jsxs("div", __assign({ style: { position: 'relative' } }, { children: [_jsxs("select", __assign({ value: this.props.value, onChange: this.onChange }, { children: [ColorValueOption(this.props.value), ColorOptions()] }), void 0), _jsx("div", { style: this.stripStyle() }, void 0)] }), void 0);
+        return _jsxs("div", __assign({ style: { position: 'relative' } }, { children: [_jsxs("select", __assign({ value: this.props.value, onChange: this.onChange }, { children: [ColorValueOption(this.props.value), ColorOptions()] })), _jsx("div", { style: this.stripStyle() })] }));
     };
     return ColorControl;
 }(SimpleParam));
@@ -611,7 +611,7 @@ function colorGradient(colors, banded) {
 function createColorListHelpers() {
     var addOn = function (l) {
         var preset = getColorListFromName(l[0]);
-        return _jsx("div", { style: colorStripStyle({ kind: preset.type !== 'qualitative' ? 'interpolate' : 'set', colors: preset.list }) }, void 0);
+        return _jsx("div", { style: colorStripStyle({ kind: preset.type !== 'qualitative' ? 'interpolate' : 'set', colors: preset.list }) });
     };
     return {
         ColorPresets: {
@@ -671,7 +671,7 @@ var ColorListControl = /** @class */ (function (_super) {
     ColorListControl.prototype.renderControl = function () {
         var value = this.props.value;
         // TODO: fix the button right offset
-        return _jsxs(_Fragment, { children: [_jsxs("button", __assign({ onClick: this.toggleEdit, style: { position: 'relative', paddingRight: '33px' } }, { children: [value.colors.length === 1 ? '1 color' : "".concat(value.colors.length, " colors"), _jsx("div", { style: colorStripStyle(value, '33px') }, void 0)] }), void 0), _jsx(IconButton, { svg: BookmarksOutlinedSvg, onClick: this.togglePresets, toggleState: this.state.show === 'presets', title: 'Color Presets', style: { padding: 0, position: 'absolute', right: 0, top: 0, width: '32px' } }, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("button", __assign({ onClick: this.toggleEdit, style: { position: 'relative', paddingRight: '33px' } }, { children: [value.colors.length === 1 ? '1 color' : "".concat(value.colors.length, " colors"), _jsx("div", { style: colorStripStyle(value, '33px') })] })), _jsx(IconButton, { svg: BookmarksOutlinedSvg, onClick: this.togglePresets, toggleState: this.state.show === 'presets', title: 'Color Presets', style: { padding: 0, position: 'absolute', right: 0, top: 0, width: '32px' } })] });
     };
     ColorListControl.prototype.renderColors = function () {
         if (!this.state.show)
@@ -679,9 +679,9 @@ var ColorListControl = /** @class */ (function (_super) {
         var _a = ColorListHelpers(), ColorPresets = _a.ColorPresets, ColorsParam = _a.ColorsParam, IsInterpolatedParam = _a.IsInterpolatedParam;
         var preset = ColorPresets[this.props.param.presetKind];
         if (this.state.show === 'presets')
-            return _jsx(ActionMenu, { items: preset, onSelect: this.selectPreset }, void 0);
+            return _jsx(ActionMenu, { items: preset, onSelect: this.selectPreset });
         var values = this.props.value.colors.map(function (color) { return ({ color: color }); });
-        return _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [_jsx(ObjectListControl, { name: 'colors', param: ColorsParam, value: values, onChange: this.colorsChanged, isDisabled: this.props.isDisabled, onEnter: this.props.onEnter }, void 0), _jsx(BoolControl, { name: 'isInterpolated', param: IsInterpolatedParam, value: this.props.value.kind === 'interpolate', onChange: this.isInterpolatedChanged, isDisabled: this.props.isDisabled, onEnter: this.props.onEnter }, void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [_jsx(ObjectListControl, { name: 'colors', param: ColorsParam, value: values, onChange: this.colorsChanged, isDisabled: this.props.isDisabled, onEnter: this.props.onEnter }), _jsx(BoolControl, { name: 'isInterpolated', param: IsInterpolatedParam, value: this.props.value.kind === 'interpolate', onChange: this.isInterpolatedChanged, isDisabled: this.props.isDisabled, onEnter: this.props.onEnter })] }));
     };
     ColorListControl.prototype.render = function () {
         return renderSimple({
@@ -728,7 +728,7 @@ var OffsetColorListControl = /** @class */ (function (_super) {
     OffsetColorListControl.prototype.renderControl = function () {
         var value = this.props.value;
         // TODO: fix the button right offset
-        return _jsxs(_Fragment, { children: [_jsxs("button", __assign({ onClick: this.toggleEdit, style: { position: 'relative', paddingRight: '33px' } }, { children: [value.colors.length === 1 ? '1 color' : "".concat(value.colors.length, " colors"), _jsx("div", { style: colorStripStyle(value, '33px') }, void 0)] }), void 0), _jsx(IconButton, { svg: BookmarksOutlinedSvg, onClick: this.togglePresets, toggleState: this.state.show === 'presets', title: 'Color Presets', style: { padding: 0, position: 'absolute', right: 0, top: 0, width: '32px' } }, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("button", __assign({ onClick: this.toggleEdit, style: { position: 'relative', paddingRight: '33px' } }, { children: [value.colors.length === 1 ? '1 color' : "".concat(value.colors.length, " colors"), _jsx("div", { style: colorStripStyle(value, '33px') })] })), _jsx(IconButton, { svg: BookmarksOutlinedSvg, onClick: this.togglePresets, toggleState: this.state.show === 'presets', title: 'Color Presets', style: { padding: 0, position: 'absolute', right: 0, top: 0, width: '32px' } })] });
     };
     OffsetColorListControl.prototype.renderColors = function () {
         if (!this.state.show)
@@ -736,7 +736,7 @@ var OffsetColorListControl = /** @class */ (function (_super) {
         var _a = ColorListHelpers(), ColorPresets = _a.ColorPresets, OffsetColorsParam = _a.OffsetColorsParam, IsInterpolatedParam = _a.IsInterpolatedParam;
         var preset = ColorPresets[this.props.param.presetKind];
         if (this.state.show === 'presets')
-            return _jsx(ActionMenu, { items: preset, onSelect: this.selectPreset }, void 0);
+            return _jsx(ActionMenu, { items: preset, onSelect: this.selectPreset });
         var colors = this.props.value.colors;
         var values = colors.map(function (color, i) {
             if (Array.isArray(color))
@@ -744,7 +744,7 @@ var OffsetColorListControl = /** @class */ (function (_super) {
             return { color: color, offset: i / colors.length };
         });
         values.sort(function (a, b) { return a.offset - b.offset; });
-        return _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [_jsx(ObjectListControl, { name: 'colors', param: OffsetColorsParam, value: values, onChange: this.colorsChanged, isDisabled: this.props.isDisabled, onEnter: this.props.onEnter }, void 0), _jsx(BoolControl, { name: 'isInterpolated', param: IsInterpolatedParam, value: this.props.value.kind === 'interpolate', onChange: this.isInterpolatedChanged, isDisabled: this.props.isDisabled, onEnter: this.props.onEnter }, void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [_jsx(ObjectListControl, { name: 'colors', param: OffsetColorsParam, value: values, onChange: this.colorsChanged, isDisabled: this.props.isDisabled, onEnter: this.props.onEnter }), _jsx(BoolControl, { name: 'isInterpolated', param: IsInterpolatedParam, value: this.props.value.kind === 'interpolate', onChange: this.isInterpolatedChanged, isDisabled: this.props.isDisabled, onEnter: this.props.onEnter })] }));
     };
     OffsetColorListControl.prototype.render = function () {
         return renderSimple({
@@ -788,7 +788,7 @@ var Vec3Control = /** @class */ (function (_super) {
         var label = this.props.param.label || camelCaseToWords(this.props.name);
         var p = getPrecision(this.props.param.step || 0.01);
         var value = "[".concat(v[0].toFixed(p), ", ").concat(v[1].toFixed(p), ", ").concat(v[2].toFixed(p), "]");
-        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: value }), void 0) }, void 0), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ParameterControls, { params: this.components, values: v, onChange: this.componentChange, onEnter: this.props.onEnter }, void 0) }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: value })) }), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ParameterControls, { params: this.components, values: v, onChange: this.componentChange, onEnter: this.props.onEnter }) }))] });
     };
     return Vec3Control;
 }(React.PureComponent));
@@ -840,7 +840,7 @@ var Mat4Control = /** @class */ (function (_super) {
                 }
                 rows.push(_jsx("div", __assign({ className: 'msp-flex-row' }, { children: row }), i));
             }
-            return _jsx("div", __assign({ className: 'msp-parameter-matrix' }, { children: rows }), void 0);
+            return _jsx("div", __assign({ className: 'msp-parameter-matrix' }, { children: rows }));
         },
         enumerable: false,
         configurable: true
@@ -850,7 +850,7 @@ var Mat4Control = /** @class */ (function (_super) {
             json: JSON.stringify(this.props.value)
         };
         var label = this.props.param.label || camelCaseToWords(this.props.name);
-        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: '4\u00D74 Matrix' }), void 0) }, void 0), this.state.isExpanded && _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [this.grid, _jsx(ParameterControls, { params: this.components, values: v, onChange: this.componentChange, onEnter: this.props.onEnter }, void 0)] }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: '4\u00D74 Matrix' })) }), this.state.isExpanded && _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [this.grid, _jsx(ParameterControls, { params: this.components, values: v, onChange: this.componentChange, onEnter: this.props.onEnter })] }))] });
     };
     return Mat4Control;
 }(React.PureComponent));
@@ -876,7 +876,7 @@ var UrlControl = /** @class */ (function (_super) {
     }
     UrlControl.prototype.renderControl = function () {
         var placeholder = this.props.param.label || camelCaseToWords(this.props.name);
-        return _jsx("input", { type: 'text', value: Asset.getUrl(this.props.value || ''), placeholder: placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter ? this.onKeyPress : void 0, disabled: this.props.isDisabled }, void 0);
+        return _jsx("input", { type: 'text', value: Asset.getUrl(this.props.value || ''), placeholder: placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter ? this.onKeyPress : void 0, disabled: this.props.isDisabled });
     };
     return UrlControl;
 }(SimpleParam));
@@ -897,7 +897,7 @@ var FileControl = /** @class */ (function (_super) {
     };
     FileControl.prototype.renderControl = function () {
         var value = this.props.value;
-        return _jsxs("div", __assign({ className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file', style: { marginTop: '1px' } }, { children: [value ? value.name : 'Select a file...', " ", _jsx("input", { disabled: this.props.isDisabled, onChange: this.onChangeFile, type: 'file', multiple: false, accept: this.props.param.accept }, void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file', style: { marginTop: '1px' } }, { children: [value ? value.name : 'Select a file...', " ", _jsx("input", { disabled: this.props.isDisabled, onChange: this.onChangeFile, type: 'file', multiple: false, accept: this.props.param.accept })] }));
     };
     FileControl.prototype.render = function () {
         if (this.props.param.label) {
@@ -948,7 +948,7 @@ var FileListControl = /** @class */ (function (_super) {
         var label = names.length === 0
             ? 'Select files...' : names.length === 1
             ? names[0] : "".concat(names.length, " files selected");
-        return _jsxs("div", __assign({ className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file', style: { marginTop: '1px' } }, { children: [label, " ", _jsx("input", { disabled: this.props.isDisabled, onChange: this.onChangeFileList, type: 'file', multiple: true, accept: this.props.param.accept }, void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file', style: { marginTop: '1px' } }, { children: [label, " ", _jsx("input", { disabled: this.props.isDisabled, onChange: this.onChangeFileList, type: 'file', multiple: true, accept: this.props.param.accept })] }));
     };
     FileListControl.prototype.render = function () {
         if (this.props.param.label) {
@@ -996,11 +996,11 @@ var MultiSelectControl = /** @class */ (function (_super) {
         var current = this.props.value;
         var emptyLabel = this.props.param.emptyValue;
         var label = this.props.param.label || camelCaseToWords(this.props.name);
-        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: current.length === 0 && emptyLabel ? emptyLabel : "".concat(current.length, " of ").concat(this.props.param.options.length) }), void 0) }, void 0), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: this.props.param.options.map(function (_a) {
+        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: current.length === 0 && emptyLabel ? emptyLabel : "".concat(current.length, " of ").concat(this.props.param.options.length) })) }), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: this.props.param.options.map(function (_a) {
                         var value = _a[0], label = _a[1];
                         var sel = current.indexOf(value) >= 0;
-                        return _jsx(Button, __assign({ onClick: _this.toggle(value), disabled: _this.props.isDisabled, style: { marginTop: '1px' } }, { children: _jsx("span", __assign({ style: { float: sel ? 'left' : 'right' } }, { children: sel ? "\u2713 ".concat(label) : "".concat(label, " \u2717") }), void 0) }), value);
-                    }) }), void 0)] }, void 0);
+                        return _jsx(Button, __assign({ onClick: _this.toggle(value), disabled: _this.props.isDisabled, style: { marginTop: '1px' } }, { children: _jsx("span", __assign({ style: { float: sel ? 'left' : 'right' } }, { children: sel ? "\u2713 ".concat(label) : "".concat(label, " \u2717") })) }), value);
+                    }) }))] });
     };
     return MultiSelectControl;
 }(React.PureComponent));
@@ -1030,21 +1030,21 @@ var GroupControl = /** @class */ (function (_super) {
         if (!this.props.param.presets)
             return null;
         var label = this.props.param.label || camelCaseToWords(this.props.name);
-        return _jsxs("div", __assign({ className: 'msp-control-group-wrapper' }, { children: [_jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsxs("button", __assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleShowPresets }, { children: [_jsx(Icon, { svg: BookmarksOutlinedSvg }, void 0), label, " Presets"] }), void 0) }), void 0), this.state.showPresets && _jsx(ActionMenu, { items: this.presetItems(this.props.param), onSelect: this.onSelectPreset }, void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-control-group-wrapper' }, { children: [_jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsxs("button", __assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleShowPresets }, { children: [_jsx(Icon, { svg: BookmarksOutlinedSvg }), label, " Presets"] })) })), this.state.showPresets && _jsx(ActionMenu, { items: this.presetItems(this.props.param), onSelect: this.onSelectPreset })] }));
     };
     GroupControl.prototype.presets = function () {
         if (!this.props.param.presets)
             return null;
-        return _jsxs(_Fragment, { children: [_jsx("div", __assign({ className: 'msp-control-group-presets-wrapper' }, { children: _jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsxs("button", __assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleShowPresets }, { children: [_jsx(Icon, { svg: BookmarksOutlinedSvg }, void 0), "Presets"] }), void 0) }), void 0) }), void 0), this.state.showPresets && _jsx(ActionMenu, { items: this.presetItems(this.props.param), onSelect: this.onSelectPreset }, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx("div", __assign({ className: 'msp-control-group-presets-wrapper' }, { children: _jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsxs("button", __assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleShowPresets }, { children: [_jsx(Icon, { svg: BookmarksOutlinedSvg }), "Presets"] })) })) })), this.state.showPresets && _jsx(ActionMenu, { items: this.presetItems(this.props.param), onSelect: this.onSelectPreset })] });
     };
     GroupControl.prototype.pivoted = function () {
         var key = this.props.param.pivot;
         var params = this.props.param.params;
         var pivot = params[key];
         var Control = controlFor(pivot);
-        var ctrl = _jsx(Control, { name: key, param: pivot, value: this.props.value[key], onChange: this.onChangeParam, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled }, void 0);
+        var ctrl = _jsx(Control, { name: key, param: pivot, value: this.props.value[key], onChange: this.onChangeParam, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled });
         if (!this.state.isExpanded) {
-            return _jsxs("div", __assign({ className: 'msp-mapped-parameter-group' }, { children: [ctrl, _jsx(IconButton, { svg: MoreHorizSvg, onClick: this.toggleExpanded, toggleState: this.state.isExpanded, title: "More Options" }, void 0)] }), void 0);
+            return _jsxs("div", __assign({ className: 'msp-mapped-parameter-group' }, { children: [ctrl, _jsx(IconButton, { svg: MoreHorizSvg, onClick: this.toggleExpanded, toggleState: this.state.isExpanded, title: "More Options" })] }));
         }
         var filtered = Object.create(null);
         for (var _i = 0, _a = Object.keys(params); _i < _a.length; _i++) {
@@ -1052,7 +1052,7 @@ var GroupControl = /** @class */ (function (_super) {
             if (k !== key)
                 filtered[k] = params[k];
         }
-        return _jsxs("div", __assign({ className: 'msp-mapped-parameter-group' }, { children: [ctrl, _jsx(IconButton, { svg: MoreHorizSvg, onClick: this.toggleExpanded, toggleState: this.state.isExpanded, title: "More Options" }, void 0), _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [this.pivotedPresets(), _jsx(ParameterControls, { params: filtered, onEnter: this.props.onEnter, values: this.props.value, onChange: this.onChangeParam, isDisabled: this.props.isDisabled }, void 0)] }), void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-mapped-parameter-group' }, { children: [ctrl, _jsx(IconButton, { svg: MoreHorizSvg, onClick: this.toggleExpanded, toggleState: this.state.isExpanded, title: "More Options" }), _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [this.pivotedPresets(), _jsx(ParameterControls, { params: filtered, onEnter: this.props.onEnter, values: this.props.value, onChange: this.onChangeParam, isDisabled: this.props.isDisabled })] }))] }));
     };
     GroupControl.prototype.render = function () {
         var params = this.props.param.params;
@@ -1062,14 +1062,14 @@ var GroupControl = /** @class */ (function (_super) {
         if (this.props.param.pivot)
             return this.pivoted();
         var label = this.props.param.label || camelCaseToWords(this.props.name);
-        var controls = _jsx(ParameterControls, { params: params, onChange: this.onChangeParam, values: this.props.value, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled }, void 0);
+        var controls = _jsx(ParameterControls, { params: params, onChange: this.onChangeParam, values: this.props.value, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled });
         if (this.props.inMapped) {
-            return _jsx("div", __assign({ className: 'msp-control-offset' }, { children: controls }), void 0);
+            return _jsx("div", __assign({ className: 'msp-control-offset' }, { children: controls }));
         }
         if (this.props.param.isFlat) {
             return controls;
         }
-        return _jsxs("div", __assign({ className: 'msp-control-group-wrapper', style: { position: 'relative' } }, { children: [_jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsxs("button", __assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleExpanded }, { children: [_jsx(Icon, { svg: this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg }, void 0), label] }), void 0) }), void 0), this.presets(), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: controls }), void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-control-group-wrapper', style: { position: 'relative' } }, { children: [_jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsxs("button", __assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleExpanded }, { children: [_jsx(Icon, { svg: this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg }), label] })) })), this.presets(), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: controls }))] }));
     };
     return GroupControl;
 }(React.PureComponent));
@@ -1123,17 +1123,17 @@ var MappedControl = /** @class */ (function (_super) {
         var help = this.props.param.help;
         var select = help
             ? __assign(__assign({}, this.props.param.select), { help: function (name) { return help({ name: name, params: _this.getValues(name) }); } }) : this.props.param.select;
-        var Select = _jsx(SelectControl, { param: select, isDisabled: this.props.isDisabled, onChange: this.onChangeName, onEnter: this.props.onEnter, name: label, value: value.name }, void 0);
+        var Select = _jsx(SelectControl, { param: select, isDisabled: this.props.isDisabled, onChange: this.onChangeName, onEnter: this.props.onEnter, name: label, value: value.name });
         if (!Mapped) {
             return Select;
         }
         if (param.type === 'group' && !param.isFlat) {
             if (!this.areParamsEmpty(param.params)) {
-                return _jsxs("div", __assign({ className: 'msp-mapped-parameter-group' }, { children: [Select, _jsx(IconButton, { svg: MoreHorizSvg, onClick: this.toggleExpanded, toggleState: this.state.isExpanded, title: "".concat(label, " Properties") }, void 0), this.state.isExpanded && _jsx(GroupControl, { inMapped: true, param: param, value: value.params, name: value.name, onChange: this.onChangeParam, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled }, void 0)] }), void 0);
+                return _jsxs("div", __assign({ className: 'msp-mapped-parameter-group' }, { children: [Select, _jsx(IconButton, { svg: MoreHorizSvg, onClick: this.toggleExpanded, toggleState: this.state.isExpanded, title: "".concat(label, " Properties") }), this.state.isExpanded && _jsx(GroupControl, { inMapped: true, param: param, value: value.params, name: value.name, onChange: this.onChangeParam, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled })] }));
             }
             return Select;
         }
-        return _jsxs(_Fragment, { children: [Select, _jsx(Mapped, { param: param, value: value.params, name: value.name, onChange: this.onChangeParam, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled }, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [Select, _jsx(Mapped, { param: param, value: value.params, name: value.name, onChange: this.onChangeParam, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled })] });
     };
     return MappedControl;
 }(React.PureComponent));
@@ -1158,7 +1158,7 @@ var ObjectListEditor = /** @class */ (function (_super) {
         }
     };
     ObjectListEditor.prototype.render = function () {
-        return _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: this.props.params, onChange: this.onChangeParam, values: this.state.current, onEnter: this.apply, isDisabled: this.props.isDisabled }, void 0), _jsx("button", __assign({ className: "msp-btn msp-btn-block msp-form-control msp-control-top-offset", onClick: this.apply, disabled: this.props.isDisabled }, { children: this.props.isUpdate ? 'Update' : 'Add' }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: this.props.params, onChange: this.onChangeParam, values: this.state.current, onEnter: this.apply, isDisabled: this.props.isDisabled }), _jsx("button", __assign({ className: "msp-btn msp-btn-block msp-form-control msp-control-top-offset", onClick: this.apply, disabled: this.props.isDisabled }, { children: this.props.isUpdate ? 'Update' : 'Add' }))] });
     };
     return ObjectListEditor;
 }(React.PureComponent));
@@ -1188,7 +1188,7 @@ var ObjectListItem = /** @class */ (function (_super) {
         return _this;
     }
     ObjectListItem.prototype.render = function () {
-        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-param-object-list-item' }, { children: [_jsxs("button", __assign({ className: 'msp-btn msp-btn-block msp-form-control', onClick: this.toggleExpanded }, { children: [_jsx("span", { children: "".concat(this.props.index + 1, ": ") }, void 0), this.props.param.getLabel(this.props.value)] }), void 0), _jsxs("div", { children: [_jsx(IconButton, { svg: ArrowDownwardSvg, title: 'Move Up', onClick: this.moveUp, small: true }, void 0), _jsx(IconButton, { svg: ArrowUpwardSvg, title: 'Move Down', onClick: this.moveDown, small: true }, void 0), _jsx(IconButton, { svg: DeleteOutlinedSvg, title: 'Remove', onClick: this.remove, small: true }, void 0)] }, void 0)] }), void 0), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ObjectListEditor, { params: this.props.param.element, apply: this.update, value: this.props.value, isUpdate: true, isDisabled: this.props.isDisabled }, void 0) }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-param-object-list-item' }, { children: [_jsxs("button", __assign({ className: 'msp-btn msp-btn-block msp-form-control', onClick: this.toggleExpanded }, { children: [_jsx("span", { children: "".concat(this.props.index + 1, ": ") }), this.props.param.getLabel(this.props.value)] })), _jsxs("div", { children: [_jsx(IconButton, { svg: ArrowDownwardSvg, title: 'Move Up', onClick: this.moveUp, small: true }), _jsx(IconButton, { svg: ArrowUpwardSvg, title: 'Move Down', onClick: this.moveDown, small: true }), _jsx(IconButton, { svg: DeleteOutlinedSvg, title: 'Remove', onClick: this.remove, small: true })] })] })), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ObjectListEditor, { params: this.props.param.element, apply: this.update, value: this.props.value, isUpdate: true, isDisabled: this.props.isDisabled }) }))] });
     };
     return ObjectListItem;
 }(React.PureComponent));
@@ -1243,7 +1243,7 @@ var ObjectListControl = /** @class */ (function (_super) {
         var v = this.props.value;
         var label = this.props.param.label || camelCaseToWords(this.props.name);
         var value = "".concat(v.length, " item").concat(v.length !== 1 ? 's' : '');
-        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: value }), void 0) }, void 0), this.state.isExpanded && _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [this.props.value.map(function (v, i) { return _jsx(ObjectListItem, { param: _this.props.param, value: v, index: i, actions: _this.actions, isDisabled: _this.props.isDisabled }, i); }), _jsx(ControlGroup, __assign({ header: 'New Item' }, { children: _jsx(ObjectListEditor, { params: this.props.param.element, apply: this.add, value: this.props.param.ctor(), isDisabled: this.props.isDisabled }, void 0) }), void 0)] }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { label: label, control: _jsx("button", __assign({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: value })) }), this.state.isExpanded && _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [this.props.value.map(function (v, i) { return _jsx(ObjectListItem, { param: _this.props.param, value: v, index: i, actions: _this.actions, isDisabled: _this.props.isDisabled }, i); }), _jsx(ControlGroup, __assign({ header: 'New Item' }, { children: _jsx(ObjectListEditor, { params: this.props.param.element, apply: this.add, value: this.props.param.ctor(), isDisabled: this.props.isDisabled }) }))] }))] });
     };
     return ObjectListControl;
 }(React.PureComponent));
@@ -1269,11 +1269,11 @@ var ConditionedControl = /** @class */ (function (_super) {
         var param = this.props.param.conditionParams[condition];
         var label = this.props.param.label || camelCaseToWords(this.props.name);
         var Conditioned = controlFor(param);
-        var select = _jsx(SelectControl, { param: this.props.param.select, isDisabled: this.props.isDisabled, onChange: this.onChangeCondition, onEnter: this.props.onEnter, name: "".concat(label, " Kind"), value: condition }, void 0);
+        var select = _jsx(SelectControl, { param: this.props.param.select, isDisabled: this.props.isDisabled, onChange: this.onChangeCondition, onEnter: this.props.onEnter, name: "".concat(label, " Kind"), value: condition });
         if (!Conditioned) {
             return select;
         }
-        return _jsxs(_Fragment, { children: [select, _jsx(Conditioned, { param: param, value: value, name: label, onChange: this.onChangeParam, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled }, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [select, _jsx(Conditioned, { param: param, value: value, name: label, onChange: this.onChangeParam, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled })] });
     };
     return ConditionedControl;
 }(React.PureComponent));
@@ -1296,7 +1296,7 @@ var ConvertedControl = /** @class */ (function (_super) {
         var Converted = controlFor(this.props.param.converted);
         if (!Converted)
             return null;
-        return _jsx(Converted, { param: this.props.param.converted, value: value, name: this.props.name, onChange: this.onChange, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled }, void 0);
+        return _jsx(Converted, { param: this.props.param.converted, value: value, name: this.props.name, onChange: this.onChange, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled });
     };
     return ConvertedControl;
 }(React.PureComponent));
@@ -1323,7 +1323,7 @@ var ScriptControl = /** @class */ (function (_super) {
     ScriptControl.prototype.renderControl = function () {
         // TODO: improve!
         var placeholder = this.props.param.label || camelCaseToWords(this.props.name);
-        return _jsx("input", { type: 'text', value: this.props.value.expression || '', placeholder: placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter ? this.onKeyPress : void 0, disabled: this.props.isDisabled }, void 0);
+        return _jsx("input", { type: 'text', value: this.props.value.expression || '', placeholder: placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter ? this.onKeyPress : void 0, disabled: this.props.isDisabled });
     };
     return ScriptControl;
 }(SimpleParam));

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

@@ -72,7 +72,7 @@ var _ScreenshotPreview = function (props) {
             drawPreview(helper, canvasRef.current, props.customBackground, props.borderColor, props.borderWidth);
         }
     }, __spreadArray([], Object.values(props), true));
-    return _jsx(_Fragment, { children: _jsxs("div", __assign({ style: { position: 'relative', width: '100%', height: '100%' } }, { children: [_jsx("canvas", { ref: canvasRef, onContextMenu: function (e) { e.preventDefault(); e.stopPropagation(); }, style: { display: 'block', width: '100%', height: '100%' } }, void 0), _jsx(ViewportFrame, { plugin: plugin, canvas: currentCanvas, color: cropFrameColor }, void 0)] }), void 0) }, void 0);
+    return _jsx(_Fragment, { children: _jsxs("div", __assign({ style: { position: 'relative', width: '100%', height: '100%' } }, { children: [_jsx("canvas", { ref: canvasRef, onContextMenu: function (e) { e.preventDefault(); e.stopPropagation(); }, style: { display: 'block', width: '100%', height: '100%' } }), _jsx(ViewportFrame, { plugin: plugin, canvas: currentCanvas, color: cropFrameColor })] })) });
 };
 export var ScreenshotPreview = React.memo(_ScreenshotPreview, function (prev, next) { return shallowEqual(prev, next); });
 function drawPreview(helper, target, customBackground, borderColor, borderWidth) {
@@ -237,7 +237,7 @@ function ViewportFrame(_a) {
     var d = 4;
     var border = "3px solid ".concat(color);
     var transparent = 'transparent';
-    return _jsxs(_Fragment, { children: [_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), _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), _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), _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), _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), _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), _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), _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), _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 _jsxs(_Fragment, { children: [_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 }), _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 }), _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 }), _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 }), _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 }), _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 }), _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 }), _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 }), _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/mol-plugin-ui/controls/slider.js

@@ -52,7 +52,7 @@ var Slider = /** @class */ (function (_super) {
         var step = this.props.step;
         if (step === void 0)
             step = 1;
-        return _jsxs("div", __assign({ className: 'msp-slider' }, { children: [_jsx("div", { children: _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), _jsx("div", { children: _jsx(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 _jsxs("div", __assign({ className: 'msp-slider' }, { children: [_jsx("div", { children: _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 }) }), _jsx("div", { children: _jsx(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));
@@ -107,7 +107,7 @@ var Slider2 = /** @class */ (function (_super) {
         var step = this.props.step;
         if (step === void 0)
             step = 1;
-        return _jsxs("div", __assign({ className: 'msp-slider2' }, { children: [_jsx("div", { children: _jsx(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), _jsx("div", { children: _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), _jsx("div", { children: _jsx(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 _jsxs("div", __assign({ className: 'msp-slider2' }, { children: [_jsx("div", { children: _jsx(TextInput, { numeric: true, delayMs: 50, value: this.state.current[0], onEnter: this.props.onEnter, blurOnEnter: true, isDisabled: this.props.disabled, onChange: this.updateMin }) }), _jsx("div", { children: _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 }) }), _jsx("div", { children: _jsx(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));
@@ -187,7 +187,7 @@ var Handle = /** @class */ (function (_super) {
     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 (_jsx("div", { className: className, style: style, title: tipFormatter(value, index) }, void 0));
+        return (_jsx("div", { className: className, style: style, title: tipFormatter(value, index) }));
     };
     return Handle;
 }(React.Component));
@@ -595,7 +595,7 @@ var SliderBase = /** @class */ (function (_super) {
             _a["".concat(prefixCls, "-vertical")] = this.props.vertical,
             _a[className] = !!className,
             _a));
-        return (_jsxs("div", __assign({ ref: this.sliderElement, className: sliderClassName, onTouchStart: disabled ? noop : this.onTouchStart, onMouseDown: disabled ? noop : this.onMouseDown }, { children: [_jsx("div", { className: "".concat(prefixCls, "-rail") }, void 0), handles] }), void 0));
+        return (_jsxs("div", __assign({ ref: this.sliderElement, className: sliderClassName, onTouchStart: disabled ? noop : this.onTouchStart, onMouseDown: disabled ? noop : this.onMouseDown }, { children: [_jsx("div", { className: "".concat(prefixCls, "-rail") }), handles] })));
     };
     SliderBase.defaultProps = {
         prefixCls: 'msp-slider-base',
@@ -604,7 +604,7 @@ var SliderBase = /** @class */ (function (_super) {
         max: 100,
         step: 1,
         marks: {},
-        handle: _jsx(Handle, { className: '', vertical: false, offset: 0, tipFormatter: function (v) { return v; }, value: 0, index: 0 }, void 0),
+        handle: _jsx(Handle, { className: '', vertical: false, offset: 0, tipFormatter: function (v) { return v; }, value: 0, index: 0 }),
         onBeforeChange: noop,
         onChange: noop,
         onAfterChange: noop,

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

@@ -76,7 +76,7 @@ var TrajectoryViewportControls = /** @class */ (function (_super) {
         var isAnimating = this.plugin.behaviors.state.isAnimating.value;
         if (!this.state.show || (isAnimating && !this.state.label))
             return null;
-        return _jsxs("div", __assign({ className: 'msp-traj-controls' }, { children: [!isAnimating && _jsx(IconButton, { svg: SkipPreviousSvg, title: 'First Model', onClick: this.reset, disabled: isAnimating }, void 0), !isAnimating && _jsx(IconButton, { svg: NavigateBeforeSvg, title: 'Previous Model', onClick: this.prev, disabled: isAnimating }, void 0), !isAnimating && _jsx(IconButton, { svg: NavigateNextSvg, title: 'Next Model', onClick: this.next, disabled: isAnimating }, void 0), !!this.state.label && _jsx("span", { children: this.state.label }, void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-traj-controls' }, { children: [!isAnimating && _jsx(IconButton, { svg: SkipPreviousSvg, title: 'First Model', onClick: this.reset, disabled: isAnimating }), !isAnimating && _jsx(IconButton, { svg: NavigateBeforeSvg, title: 'Previous Model', onClick: this.prev, disabled: isAnimating }), !isAnimating && _jsx(IconButton, { svg: NavigateNextSvg, title: 'Next Model', onClick: this.next, disabled: isAnimating }), !!this.state.label && _jsx("span", { children: this.state.label })] }));
     };
     return TrajectoryViewportControls;
 }(PluginUIComponent));
@@ -174,7 +174,7 @@ var StateSnapshotViewportControls = /** @class */ (function (_super) {
         }
         var current = snapshots.state.current;
         var isPlaying = snapshots.state.isPlaying;
-        return _jsxs("div", __assign({ className: 'msp-state-snapshot-viewport-controls' }, { children: [_jsxs("select", __assign({ className: 'msp-form-control', value: current || 'none', onChange: this.change, disabled: this.state.isBusy || isPlaying }, { children: [!current && _jsx("option", { value: 'none' }, 'none'), snapshots.state.entries.valueSeq().map(function (e, i) { return _jsxs("option", __assign({ value: e.snapshot.id }, { children: ["[".concat(i + 1, "/").concat(count, "]"), " ", e.name || new Date(e.timestamp).toLocaleString()] }), e.snapshot.id); })] }), void 0), _jsx(IconButton, { svg: isPlaying ? StopSvg : PlayArrowSvg, title: isPlaying ? 'Pause' : 'Cycle States', onClick: this.togglePlay, disabled: isPlaying ? false : this.state.isBusy }, void 0), !isPlaying && _jsxs(_Fragment, { children: [_jsx(IconButton, { svg: NavigateBeforeSvg, title: 'Previous State', onClick: this.prev, disabled: this.state.isBusy || isPlaying }, void 0), _jsx(IconButton, { svg: NavigateNextSvg, title: 'Next State', onClick: this.next, disabled: this.state.isBusy || isPlaying }, void 0)] }, void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-state-snapshot-viewport-controls' }, { children: [_jsxs("select", __assign({ className: 'msp-form-control', value: current || 'none', onChange: this.change, disabled: this.state.isBusy || isPlaying }, { children: [!current && _jsx("option", { value: 'none' }, 'none'), snapshots.state.entries.valueSeq().map(function (e, i) { return _jsxs("option", __assign({ value: e.snapshot.id }, { children: ["[".concat(i + 1, "/").concat(count, "]"), " ", e.name || new Date(e.timestamp).toLocaleString()] }), e.snapshot.id); })] })), _jsx(IconButton, { svg: isPlaying ? StopSvg : PlayArrowSvg, title: isPlaying ? 'Pause' : 'Cycle States', onClick: this.togglePlay, disabled: isPlaying ? false : this.state.isBusy }), !isPlaying && _jsxs(_Fragment, { children: [_jsx(IconButton, { svg: NavigateBeforeSvg, title: 'Previous State', onClick: this.prev, disabled: this.state.isBusy || isPlaying }), _jsx(IconButton, { svg: NavigateNextSvg, title: 'Next State', onClick: this.next, disabled: this.state.isBusy || isPlaying })] })] }));
     };
     return StateSnapshotViewportControls;
 }(PluginUIComponent));
@@ -217,7 +217,7 @@ var AnimationViewportControls = /** @class */ (function (_super) {
         if (isPlaying || this.state.isEmpty || this.plugin.managers.animation.isEmpty || !this.plugin.config.get(PluginConfig.Viewport.ShowAnimation))
             return null;
         var isAnimating = this.state.isAnimating;
-        return _jsxs("div", __assign({ className: 'msp-animation-viewport-controls' }, { children: [_jsxs("div", { children: [_jsx("div", { className: 'msp-semi-transparent-background' }, void 0), _jsx(IconButton, { svg: isAnimating || isPlaying ? StopSvg : 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) && _jsx("div", __assign({ className: 'msp-animation-viewport-controls-select' }, { children: _jsx(AnimationControls, { onStart: this.toggleExpanded }, void 0) }), void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-animation-viewport-controls' }, { children: [_jsxs("div", { children: [_jsx("div", { className: 'msp-semi-transparent-background' }), _jsx(IconButton, { svg: isAnimating || isPlaying ? StopSvg : 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) && _jsx("div", __assign({ className: 'msp-animation-viewport-controls-select' }, { children: _jsx(AnimationControls, { onStart: this.toggleExpanded }) }))] }));
     };
     return AnimationViewportControls;
 }(PluginUIComponent));
@@ -240,7 +240,7 @@ var SelectionViewportControls = /** @class */ (function (_super) {
     SelectionViewportControls.prototype.render = function () {
         if (!this.plugin.selectionMode)
             return null;
-        return _jsx("div", __assign({ className: 'msp-selection-viewport-controls', onMouseMove: this.onMouseMove }, { children: _jsx(StructureSelectionActionsControls, {}, void 0) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-selection-viewport-controls', onMouseMove: this.onMouseMove }, { children: _jsx(StructureSelectionActionsControls, {}) }));
     };
     return SelectionViewportControls;
 }(PluginUIComponent));
@@ -260,7 +260,7 @@ var LociLabels = /** @class */ (function (_super) {
         if (this.state.labels.length === 0) {
             return null;
         }
-        return _jsx("div", __assign({ className: 'msp-highlight-info' }, { children: this.state.labels.map(function (e, i) { return _jsx("div", { dangerouslySetInnerHTML: { __html: e } }, '' + i); }) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-highlight-info' }, { children: this.state.labels.map(function (e, i) { return _jsx("div", { dangerouslySetInnerHTML: { __html: e } }, '' + i); }) }));
     };
     return LociLabels;
 }(PluginUIComponent));
@@ -280,7 +280,7 @@ var CustomStructureControls = /** @class */ (function (_super) {
         this.plugin.customStructureControls.forEach(function (Controls, key) {
             controls.push(_jsx(Controls, { initiallyCollapsed: _this.props.initiallyCollapsed }, key));
         });
-        return controls.length > 0 ? _jsx(_Fragment, { children: controls }, void 0) : null;
+        return controls.length > 0 ? _jsx(_Fragment, { children: controls }) : null;
     };
     return CustomStructureControls;
 }(PluginUIComponent));
@@ -291,7 +291,7 @@ var DefaultStructureTools = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DefaultStructureTools.prototype.render = function () {
-        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-section-header' }, { children: [_jsx(Icon, { svg: BuildSvg }, void 0), "Structure Tools"] }), void 0), _jsx(StructureSourceControls, {}, void 0), _jsx(StructureMeasurementsControls, {}, void 0), _jsx(StructureSuperpositionControls, {}, void 0), _jsx(StructureQuickStylesControls, {}, void 0), _jsx(StructureComponentControls, {}, void 0), this.plugin.config.get(PluginConfig.VolumeStreaming.Enabled) && _jsx(VolumeStreamingControls, {}, void 0), _jsx(VolumeSourceControls, {}, void 0), _jsx(CustomStructureControls, {}, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-section-header' }, { children: [_jsx(Icon, { svg: BuildSvg }), "Structure Tools"] })), _jsx(StructureSourceControls, {}), _jsx(StructureMeasurementsControls, {}), _jsx(StructureSuperpositionControls, {}), _jsx(StructureQuickStylesControls, {}), _jsx(StructureComponentControls, {}), this.plugin.config.get(PluginConfig.VolumeStreaming.Enabled) && _jsx(VolumeStreamingControls, {}), _jsx(VolumeSourceControls, {}), _jsx(CustomStructureControls, {})] });
     };
     return DefaultStructureTools;
 }(PluginUIComponent));