molstar 3.3.1 → 3.6.0

package/lib/mol-plugin-state/transforms/model.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-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>
@@ -39,9 +39,20 @@ import { parseXyz } from '../../mol-io/reader/xyz/parser';
 import { trajectoryFromXyz } from '../../mol-model-formats/structure/xyz';
 import { parseSdf } from '../../mol-io/reader/sdf/parser';
 import { trajectoryFromSdf } from '../../mol-model-formats/structure/sdf';
+import { assertUnreachable } from '../../mol-util/type-helpers';
+import { parseTrr } from '../../mol-io/reader/trr/parser';
+import { coordinatesFromTrr } from '../../mol-model-formats/structure/trr';
+import { parseNctraj } from '../../mol-io/reader/nctraj/parser';
+import { coordinatesFromNctraj } from '../../mol-model-formats/structure/nctraj';
+import { topologyFromPrmtop } from '../../mol-model-formats/structure/prmtop';
+import { topologyFromTop } from '../../mol-model-formats/structure/top';
 export { CoordinatesFromDcd };
 export { CoordinatesFromXtc };
+export { CoordinatesFromTrr };
+export { CoordinatesFromNctraj };
 export { TopologyFromPsf };
+export { TopologyFromPrmtop };
+export { TopologyFromTop };
 export { TrajectoryFromModelAndCoordinates };
 export { TrajectoryFromBlob };
 export { TrajectoryFromMmCif };
@@ -120,9 +131,63 @@ var CoordinatesFromXtc = PluginStateTransform.BuiltIn({
         }); });
     }
 });
+var CoordinatesFromTrr = PluginStateTransform.BuiltIn({
+    name: 'coordinates-from-trr',
+    display: { name: 'Parse TRR', description: 'Parse TRR binary data.' },
+    from: [SO.Data.Binary],
+    to: SO.Molecule.Coordinates
+})({
+    apply: function (_a) {
+        var _this = this;
+        var a = _a.a;
+        return Task.create('Parse TRR', function (ctx) { return __awaiter(_this, void 0, void 0, function () {
+            var parsed, coordinates;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, parseTrr(a.data).runInContext(ctx)];
+                    case 1:
+                        parsed = _a.sent();
+                        if (parsed.isError)
+                            throw new Error(parsed.message);
+                        return [4 /*yield*/, coordinatesFromTrr(parsed.result).runInContext(ctx)];
+                    case 2:
+                        coordinates = _a.sent();
+                        return [2 /*return*/, new SO.Molecule.Coordinates(coordinates, { label: a.label, description: 'Coordinates' })];
+                }
+            });
+        }); });
+    }
+});
+var CoordinatesFromNctraj = PluginStateTransform.BuiltIn({
+    name: 'coordinates-from-nctraj',
+    display: { name: 'Parse NCTRAJ', description: 'Parse NCTRAJ binary data.' },
+    from: [SO.Data.Binary],
+    to: SO.Molecule.Coordinates
+})({
+    apply: function (_a) {
+        var _this = this;
+        var a = _a.a;
+        return Task.create('Parse NCTRAJ', function (ctx) { return __awaiter(_this, void 0, void 0, function () {
+            var parsed, coordinates;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, parseNctraj(a.data).runInContext(ctx)];
+                    case 1:
+                        parsed = _a.sent();
+                        if (parsed.isError)
+                            throw new Error(parsed.message);
+                        return [4 /*yield*/, coordinatesFromNctraj(parsed.result).runInContext(ctx)];
+                    case 2:
+                        coordinates = _a.sent();
+                        return [2 /*return*/, new SO.Molecule.Coordinates(coordinates, { label: a.label, description: 'Coordinates' })];
+                }
+            });
+        }); });
+    }
+});
 var TopologyFromPsf = PluginStateTransform.BuiltIn({
     name: 'topology-from-psf',
-    display: { name: 'PSF Topology', description: 'Parse PSF string data.' },
+    display: { name: 'PSF Topology', description: 'Create topology from PSF.' },
     from: [SO.Format.Psf],
     to: SO.Molecule.Topology
 })({
@@ -142,6 +207,50 @@ var TopologyFromPsf = PluginStateTransform.BuiltIn({
         }); });
     }
 });
+var TopologyFromPrmtop = PluginStateTransform.BuiltIn({
+    name: 'topology-from-prmtop',
+    display: { name: 'PRMTOP Topology', description: 'Create topology from PRMTOP.' },
+    from: [SO.Format.Prmtop],
+    to: SO.Molecule.Topology
+})({
+    apply: function (_a) {
+        var _this = this;
+        var a = _a.a;
+        return Task.create('Create Topology', function (ctx) { return __awaiter(_this, void 0, void 0, function () {
+            var topology;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, topologyFromPrmtop(a.data).runInContext(ctx)];
+                    case 1:
+                        topology = _a.sent();
+                        return [2 /*return*/, new SO.Molecule.Topology(topology, { label: topology.label || a.label, description: 'Topology' })];
+                }
+            });
+        }); });
+    }
+});
+var TopologyFromTop = PluginStateTransform.BuiltIn({
+    name: 'topology-from-top',
+    display: { name: 'TOP Topology', description: 'Create topology from TOP.' },
+    from: [SO.Format.Top],
+    to: SO.Molecule.Topology
+})({
+    apply: function (_a) {
+        var _this = this;
+        var a = _a.a;
+        return Task.create('Create Topology', function (ctx) { return __awaiter(_this, void 0, void 0, function () {
+            var topology;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, topologyFromTop(a.data).runInContext(ctx)];
+                    case 1:
+                        topology = _a.sent();
+                        return [2 /*return*/, new SO.Molecule.Topology(topology, { label: topology.label || a.label, description: 'Topology' })];
+                }
+            });
+        }); });
+    }
+});
 function getTrajectory(ctx, obj, coordinates) {
     return __awaiter(this, void 0, void 0, function () {
         var topology, model;
@@ -1033,7 +1142,7 @@ var StructureComplexElement = PluginStateTransform.BuiltIn({
                 query = Queries.internal.spheres();
                 label = 'Coarse Spheres';
                 break;
-            default: throw new Error("".concat(params.type, " is a not valid complex element."));
+            default: assertUnreachable(params.type);
         }
         var result = query(new QueryContext(a.data));
         var s = Sel.unionStructure(result);

package/lib/mol-plugin-state/transforms/representation.d.ts

@@ -150,6 +150,7 @@ declare const ModelUnitcell3D: StateTransformer<SO.Molecule.Model, SO.Shape.Repr
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean;
+    allowTransparentBackfaces: boolean;
     bumpFrequency: number;
     bumpAmplitude: number;
     alpha: number;
@@ -172,6 +173,7 @@ declare const StructureBoundingBox3D: StateTransformer<SO.Molecule.Structure, SO
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean;
+    allowTransparentBackfaces: boolean;
     bumpFrequency: number;
     bumpAmplitude: number;
     alpha: number;
@@ -276,6 +278,7 @@ declare const StructureSelectionsAngle3D: StateTransformer<SO.Molecule.Structure
     flipSided: boolean;
     flatShaded: boolean;
     xrayShaded: boolean;
+    allowTransparentBackfaces: boolean;
     bumpFrequency: number;
     bumpAmplitude: number;
     lineSizeAttenuation: boolean;
@@ -327,6 +330,7 @@ declare const StructureSelectionsDihedral3D: StateTransformer<SO.Molecule.Struct
     flipSided: boolean;
     flatShaded: boolean;
     xrayShaded: boolean;
+    allowTransparentBackfaces: boolean;
     bumpFrequency: number;
     bumpAmplitude: number;
     lineSizeAttenuation: boolean;
@@ -384,6 +388,7 @@ declare const StructureSelectionsOrientation3D: StateTransformer<SO.Molecule.Str
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean;
+    allowTransparentBackfaces: boolean;
     bumpFrequency: number;
     bumpAmplitude: number;
     alpha: number;
@@ -409,6 +414,7 @@ declare const StructureSelectionsPlane3D: StateTransformer<SO.Molecule.Structure
     flatShaded: boolean;
     ignoreLight: boolean;
     xrayShaded: boolean;
+    allowTransparentBackfaces: boolean;
     bumpFrequency: number;
     bumpAmplitude: number;
     alpha: number;

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

@@ -93,7 +93,7 @@ var CollapsableControls = /** @class */ (function (_super) {
         var wrapClass = this.state.isCollapsed
             ? 'msp-transform-wrapper msp-transform-wrapper-collapsed'
             : 'msp-transform-wrapper';
-        return _jsxs("div", __assign({ className: wrapClass }, { children: [_jsx("div", __assign({ className: 'msp-transform-header' }, { children: _jsxs(Button, __assign({ icon: this.state.brand ? void 0 : this.state.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg, noOverflow: true, onClick: this.toggleCollapsed, className: this.state.brand ? "msp-transform-header-brand msp-transform-header-brand-".concat(this.state.brand.accent) : void 0, title: "Click to ".concat(this.state.isCollapsed ? 'expand' : 'collapse') }, { children: [_jsx(Icon, { svg: (_a = this.state.brand) === null || _a === void 0 ? void 0 : _a.svg, inline: true }, void 0), this.state.header, _jsx("small", __assign({ style: { margin: '0 6px' } }, { children: this.state.isCollapsed ? '' : this.state.description }), void 0)] }), void 0) }), void 0), !this.state.isCollapsed && this.renderControls()] }), void 0);
+        return _jsxs("div", __assign({ className: wrapClass }, { children: [_jsx("div", __assign({ className: 'msp-transform-header' }, { children: _jsxs(Button, __assign({ icon: this.state.brand ? void 0 : this.state.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg, noOverflow: true, onClick: this.toggleCollapsed, className: this.state.brand ? "msp-transform-header-brand msp-transform-header-brand-".concat(this.state.brand.accent) : void 0, title: "Click to ".concat(this.state.isCollapsed ? 'expand' : 'collapse') }, { children: [_jsx(Icon, { svg: (_a = this.state.brand) === null || _a === void 0 ? void 0 : _a.svg, inline: true }), this.state.header, _jsx("small", __assign({ style: { margin: '0 6px' } }, { children: this.state.isCollapsed ? '' : this.state.description }))] })) })), !this.state.isCollapsed && this.renderControls()] }));
     };
     return CollapsableControls;
 }(PluginUIComponent));

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

@@ -18,8 +18,8 @@ var ActionMenu = /** @class */ (function (_super) {
     }
     ActionMenu.prototype.render = function () {
         var cmd = this.props;
-        var section = _jsx(Section, { items: cmd.items, onSelect: cmd.onSelect, current: cmd.current, multiselect: this.props.multiselect, noOffset: this.props.noOffset, noAccent: this.props.noAccent }, void 0);
-        return _jsxs("div", __assign({ className: "msp-action-menu-options".concat(cmd.header ? '' : ' msp-action-menu-options-no-header') }, { children: [cmd.header && _jsx(ControlGroup, __assign({ header: cmd.header, title: cmd.title, initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.hide, topRightIcon: CloseSvg }, { children: section }), void 0), !cmd.header && section] }), void 0);
+        var section = _jsx(Section, { items: cmd.items, onSelect: cmd.onSelect, current: cmd.current, multiselect: this.props.multiselect, noOffset: this.props.noOffset, noAccent: this.props.noAccent });
+        return _jsxs("div", __assign({ className: "msp-action-menu-options".concat(cmd.header ? '' : ' msp-action-menu-options-no-header') }, { children: [cmd.header && _jsx(ControlGroup, __assign({ header: cmd.header, title: cmd.title, initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.hide, topRightIcon: CloseSvg }, { children: section })), !cmd.header && section] }));
     };
     return ActionMenu;
 }(React.PureComponent));
@@ -182,7 +182,7 @@ var Section = /** @class */ (function (_super) {
     Object.defineProperty(Section.prototype, "multiselectHeader", {
         get: function () {
             var _a = this.state, header = _a.header, hasCurrent = _a.hasCurrent;
-            return _jsxs("div", __assign({ className: 'msp-flex-row msp-control-group-header' }, { children: [_jsx(Button, __assign({ icon: this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg, flex: true, noOverflow: true, onClick: this.toggleExpanded, title: "Click to ".concat(this.state.isExpanded ? 'collapse' : 'expand', ".").concat((header === null || header === void 0 ? void 0 : header.description) ? " ".concat(header === null || header === void 0 ? void 0 : header.description) : '') }, { children: hasCurrent ? _jsx("b", { children: header === null || header === void 0 ? void 0 : header.label }, void 0) : header === null || header === void 0 ? void 0 : header.label }), void 0), _jsx(Button, __assign({ icon: CheckSvg, flex: true, onClick: this.selectAll, style: { flex: '0 0 50px', textAlign: 'right' } }, { children: "All" }), void 0), _jsx(Button, __assign({ icon: CloseSvg, flex: true, onClick: this.selectNone, style: { flex: '0 0 50px', textAlign: 'right' } }, { children: "None" }), void 0)] }), void 0);
+            return _jsxs("div", __assign({ className: 'msp-flex-row msp-control-group-header' }, { children: [_jsx(Button, __assign({ icon: this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg, flex: true, noOverflow: true, onClick: this.toggleExpanded, title: "Click to ".concat(this.state.isExpanded ? 'collapse' : 'expand', ".").concat((header === null || header === void 0 ? void 0 : header.description) ? " ".concat(header === null || header === void 0 ? void 0 : header.description) : '') }, { children: hasCurrent ? _jsx("b", { children: header === null || header === void 0 ? void 0 : header.label }) : header === null || header === void 0 ? void 0 : header.label })), _jsx(Button, __assign({ icon: CheckSvg, flex: true, onClick: this.selectAll, style: { flex: '0 0 50px', textAlign: 'right' } }, { children: "All" })), _jsx(Button, __assign({ icon: CloseSvg, flex: true, onClick: this.selectNone, style: { flex: '0 0 50px', textAlign: 'right' } }, { children: "None" }))] }));
         },
         enumerable: false,
         configurable: true
@@ -190,7 +190,7 @@ var Section = /** @class */ (function (_super) {
     Object.defineProperty(Section.prototype, "basicHeader", {
         get: function () {
             var _a = this.state, header = _a.header, hasCurrent = _a.hasCurrent;
-            return _jsx("div", __assign({ className: 'msp-control-group-header', style: { marginTop: '1px' } }, { children: _jsx(Button, __assign({ noOverflow: true, icon: this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg, onClick: this.toggleExpanded, title: "Click to ".concat(this.state.isExpanded ? 'collapse' : 'expand', ". ").concat((header === null || header === void 0 ? void 0 : header.description) ? header === null || header === void 0 ? void 0 : header.description : '') }, { children: hasCurrent ? _jsx("b", { children: header === null || header === void 0 ? void 0 : header.label }, void 0) : header === null || header === void 0 ? void 0 : header.label }), void 0) }), void 0);
+            return _jsx("div", __assign({ className: 'msp-control-group-header', style: { marginTop: '1px' } }, { children: _jsx(Button, __assign({ noOverflow: true, icon: this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg, onClick: this.toggleExpanded, title: "Click to ".concat(this.state.isExpanded ? 'collapse' : 'expand', ". ").concat((header === null || header === void 0 ? void 0 : header.description) ? header === null || header === void 0 ? void 0 : header.description : '') }, { children: hasCurrent ? _jsx("b", { children: header === null || header === void 0 ? void 0 : header.label }) : header === null || header === void 0 ? void 0 : header.label })) }));
         },
         enumerable: false,
         configurable: true
@@ -201,7 +201,7 @@ var Section = /** @class */ (function (_super) {
         if (isHeader(items))
             return null;
         if (isItem(items))
-            return _jsx(Action, { item: items, onSelect: onSelect, current: current, multiselect: this.props.multiselect }, void 0);
+            return _jsx(Action, { item: items, onSelect: onSelect, current: current, multiselect: this.props.multiselect });
         var header = this.state.header;
         return _jsxs(_Fragment, { children: [header && (this.props.multiselect && this.state.isExpanded ? this.multiselectHeader : this.basicHeader), _jsx("div", __assign({ className: this.props.noOffset ? void 0 : this.props.noAccent ? 'msp-control-offset' : 'msp-accent-offset' }, { children: (!header || this.state.isExpanded) && items.map(function (x, i) {
                         if (isHeader(x))
@@ -209,7 +209,7 @@ var Section = /** @class */ (function (_super) {
                         if (isItem(x))
                             return _jsx(Action, { item: x, onSelect: onSelect, current: current, multiselect: _this.props.multiselect }, i);
                         return _jsx(Section, { items: x, onSelect: onSelect, current: current, multiselect: _this.props.multiselect, noAccent: true }, i);
-                    }) }), void 0)] }, void 0);
+                    }) }))] });
     };
     return Section;
 }(React.PureComponent));
@@ -217,7 +217,7 @@ var Action = function (_a) {
     var item = _a.item, onSelect = _a.onSelect, current = _a.current, multiselect = _a.multiselect;
     var isCurrent = current === item;
     var style = item.addOn ? { position: 'relative' } : void 0;
-    return _jsxs(Button, __assign({ icon: item.icon, noOverflow: true, className: 'msp-action-menu-button', onClick: function (e) { return onSelect(multiselect ? [item] : item, e); }, disabled: item.disabled, style: style, title: item.description }, { children: [isCurrent || item.selected ? _jsx("b", { children: item.label }, void 0) : item.label, item.addOn] }), void 0);
+    return _jsxs(Button, __assign({ icon: item.icon, noOverflow: true, className: 'msp-action-menu-button', onClick: function (e) { return onSelect(multiselect ? [item] : item, e); }, disabled: item.disabled, style: style, title: item.description }, { children: [isCurrent || item.selected ? _jsx("b", { children: item.label }) : item.label, item.addOn] }));
 };
 function isItems(x) {
     return !!x && Array.isArray(x);

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

@@ -62,12 +62,12 @@ var CombinedColorControl = /** @class */ (function (_super) {
     };
     CombinedColorControl.prototype.swatch = function () {
         var _this = this;
-        return _jsx("div", __assign({ className: 'msp-combined-color-swatch' }, { children: DefaultColorSwatch.map(function (c) { return _jsx(Button, { inline: true, "data-color": c[1], onClick: _this.onClickSwatch, style: { background: Color.toStyle(c[1]) } }, c[1]); }) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-combined-color-swatch' }, { children: DefaultColorSwatch.map(function (c) { return _jsx(Button, { inline: true, "data-color": c[1], onClick: _this.onClickSwatch, style: { background: Color.toStyle(c[1]) } }, c[1]); }) }));
     };
     CombinedColorControl.prototype.render = function () {
         var label = this.props.param.label || camelCaseToWords(this.props.name);
         var _a = Color.toRgb(this.props.value), r = _a[0], g = _a[1], b = _a[2];
-        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { title: this.props.param.description, label: label, control: _jsx(Button, { onClick: this.toggleExpanded, inline: true, className: 'msp-combined-color-button', style: { background: Color.toStyle(this.props.value) } }, void 0) }, void 0), this.state.isExpanded && _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [this.swatch(), _jsx(ControlRow, { label: 'RGB', className: 'msp-control-label-short', control: _jsxs("div", __assign({ style: { display: 'flex', textAlignLast: 'center', left: '80px' } }, { children: [_jsx(TextInput, { onChange: this.onR, numeric: true, value: r, delayMs: 250, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true }, void 0), _jsx(TextInput, { onChange: this.onG, numeric: true, value: g, delayMs: 250, style: { order: 2, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true }, void 0), _jsx(TextInput, { onChange: this.onB, numeric: true, value: b, delayMs: 250, style: { order: 3, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true }, void 0)] }), void 0) }, void 0), _jsxs("div", __assign({ style: { display: 'flex', textAlignLast: 'center' } }, { children: [_jsx(Button, __assign({ onClick: this.onLighten, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control' }, { children: "Lighten" }), void 0), _jsx(Button, __assign({ onClick: this.onDarken, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control' }, { children: "Darken" }), void 0)] }), void 0)] }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(ControlRow, { title: this.props.param.description, label: label, control: _jsx(Button, { onClick: this.toggleExpanded, inline: true, className: 'msp-combined-color-button', style: { background: Color.toStyle(this.props.value) } }) }), this.state.isExpanded && _jsxs("div", __assign({ className: 'msp-control-offset' }, { children: [this.swatch(), _jsx(ControlRow, { label: 'RGB', className: 'msp-control-label-short', control: _jsxs("div", __assign({ style: { display: 'flex', textAlignLast: 'center', left: '80px' } }, { children: [_jsx(TextInput, { onChange: this.onR, numeric: true, value: r, delayMs: 250, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true }), _jsx(TextInput, { onChange: this.onG, numeric: true, value: g, delayMs: 250, style: { order: 2, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true }), _jsx(TextInput, { onChange: this.onB, numeric: true, value: b, delayMs: 250, style: { order: 3, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true })] })) }), _jsxs("div", __assign({ style: { display: 'flex', textAlignLast: 'center' } }, { children: [_jsx(Button, __assign({ onClick: this.onLighten, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control' }, { children: "Lighten" })), _jsx(Button, __assign({ onClick: this.onDarken, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control' }, { children: "Darken" }))] }))] }))] });
     };
     return CombinedColorControl;
 }(React.PureComponent));
@@ -78,7 +78,7 @@ export function ColorOptions() {
         return _colors;
     _colors = _jsx(_Fragment, { children: DefaultColorSwatch.map(function (v) {
             return _jsx("option", __assign({ value: v[1], style: { background: "".concat(Color.toStyle(v[1])) } }, { children: stringToWords(v[0]) }), v[1]);
-        }) }, void 0);
+        }) });
     return _colors;
 }
 var DefaultColorSwatchMap = (function () {

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

@@ -28,7 +28,7 @@ var ControlGroup = /** @class */ (function (_super) {
         if (this.props.childrenClassName)
             groupClassName += ' ' + this.props.childrenClassName;
         // TODO: customize header style (bg color, togle button etc)
-        return _jsxs("div", __assign({ className: 'msp-control-group-wrapper', style: { position: 'relative', marginTop: this.props.noTopMargin ? 0 : void 0 } }, { children: [_jsx("div", __assign({ className: 'msp-control-group-header', style: { marginLeft: this.props.headerLeftMargin }, title: this.props.title }, { children: _jsxs(Button, __assign({ onClick: this.headerClicked }, { children: [!this.props.hideExpander && _jsx(Icon, { svg: this.state.isExpanded ? ArrowRightSvg : ArrowDropDownSvg }, void 0), this.props.topRightIcon && _jsx(Icon, { svg: this.props.topRightIcon, style: { position: 'absolute', right: '2px', top: 0 } }, void 0), _jsx("b", { children: this.props.header }, void 0)] }), void 0) }), void 0), this.state.isExpanded && _jsx("div", __assign({ className: groupClassName, style: { display: this.state.isExpanded ? 'block' : 'none', maxHeight: this.props.maxHeight, overflow: 'hidden', overflowY: 'auto' } }, { children: this.props.children }), void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-control-group-wrapper', style: { position: 'relative', marginTop: this.props.noTopMargin ? 0 : void 0 } }, { children: [_jsx("div", __assign({ className: 'msp-control-group-header', style: { marginLeft: this.props.headerLeftMargin }, title: this.props.title }, { children: _jsxs(Button, __assign({ onClick: this.headerClicked }, { children: [!this.props.hideExpander && _jsx(Icon, { svg: this.state.isExpanded ? ArrowRightSvg : ArrowDropDownSvg }), this.props.topRightIcon && _jsx(Icon, { svg: this.props.topRightIcon, style: { position: 'absolute', right: '2px', top: 0 } }), _jsx("b", { children: this.props.header })] })) })), this.state.isExpanded && _jsx("div", __assign({ className: groupClassName, style: { display: this.state.isExpanded ? 'block' : 'none', maxHeight: this.props.maxHeight, overflow: 'hidden', overflowY: 'auto' } }, { children: this.props.children }))] }));
     };
     return ControlGroup;
 }(React.Component));
@@ -123,7 +123,7 @@ var TextInput = /** @class */ (function (_super) {
         return { originalValue: value, value: value };
     };
     TextInput.prototype.render = function () {
-        return _jsx("input", { type: 'text', className: this.props.className, style: this.props.style, ref: this.input, onBlur: this.onBlur, value: this.state.value, placeholder: this.props.placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter || this.props.blurOnEnter || this.props.blurOnEscape ? this.onKeyPress : void 0, onKeyDown: this.props.blurOnEscape ? this.onKeyUp : void 0, disabled: !!this.props.isDisabled }, void 0);
+        return _jsx("input", { type: 'text', className: this.props.className, style: this.props.style, ref: this.input, onBlur: this.onBlur, value: this.state.value, placeholder: this.props.placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter || this.props.blurOnEnter || this.props.blurOnEscape ? this.onKeyPress : void 0, onKeyDown: this.props.blurOnEscape ? this.onKeyUp : void 0, disabled: !!this.props.isDisabled });
     };
     return TextInput;
 }(React.PureComponent));
@@ -139,13 +139,13 @@ var ExpandableControlRow = /** @class */ (function (_super) {
     ExpandableControlRow.prototype.render = function () {
         var _a = this.props, label = _a.label, pivot = _a.pivot, controls = _a.controls;
         // TODO: fix the inline CSS
-        return _jsxs(_Fragment, { children: [_jsx(ControlRow, __assign({ label: _jsxs(_Fragment, { children: [label, _jsx("button", __assign({ className: 'msp-btn-link msp-btn-icon msp-control-group-expander', onClick: this.toggleExpanded, title: "".concat(this.state.isExpanded ? 'Less' : 'More', " options"), style: { background: 'transparent', textAlign: 'left', padding: '0' } }, { children: _jsx(Icon, { svg: this.state.isExpanded ? RemoveSvg : AddSvg, style: { display: 'inline-block' } }, void 0) }), void 0)] }, void 0), control: pivot }, { children: this.props.colorStripe && _jsx("div", { className: 'msp-expandable-group-color-stripe', style: { backgroundColor: Color.toStyle(this.props.colorStripe) } }, void 0) }), void 0), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: controls }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(ControlRow, __assign({ label: _jsxs(_Fragment, { children: [label, _jsx("button", __assign({ className: 'msp-btn-link msp-btn-icon msp-control-group-expander', onClick: this.toggleExpanded, title: "".concat(this.state.isExpanded ? 'Less' : 'More', " options"), style: { background: 'transparent', textAlign: 'left', padding: '0' } }, { children: _jsx(Icon, { svg: this.state.isExpanded ? RemoveSvg : AddSvg, style: { display: 'inline-block' } }) }))] }), control: pivot }, { children: this.props.colorStripe && _jsx("div", { className: 'msp-expandable-group-color-stripe', style: { backgroundColor: Color.toStyle(this.props.colorStripe) } }) })), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: controls }))] });
     };
     return ExpandableControlRow;
 }(React.Component));
 export { ExpandableControlRow };
 export function SectionHeader(props) {
-    return _jsxs("div", __assign({ className: "msp-section-header".concat(props.accent ? ' msp-transform-header-brand-' + props.accent : '') }, { children: [props.icon && _jsx(Icon, { svg: props.icon }, void 0), props.title, " ", _jsx("small", { children: props.desc }, void 0)] }), void 0);
+    return _jsxs("div", __assign({ className: "msp-section-header".concat(props.accent ? ' msp-transform-header-brand-' + props.accent : '') }, { children: [props.icon && _jsx(Icon, { svg: props.icon }), props.title, " ", _jsx("small", { children: props.desc })] }));
 }
 export function Button(props) {
     var className = 'msp-btn';
@@ -176,7 +176,7 @@ export function Button(props) {
         else
             style = props.style;
     }
-    return _jsxs("button", __assign({ onClick: props.onClick, title: props.title, disabled: props.disabled, style: style, className: className, "data-id": props['data-id'], "data-color": props['data-color'], onContextMenu: props.onContextMenu, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave }, { children: [props.icon && _jsx(Icon, { svg: props.icon }, void 0), props.children] }), void 0);
+    return _jsxs("button", __assign({ onClick: props.onClick, title: props.title, disabled: props.disabled, style: style, className: className, "data-id": props['data-id'], "data-color": props['data-color'], onContextMenu: props.onContextMenu, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave }, { children: [props.icon && _jsx(Icon, { svg: props.icon }), props.children] }));
 }
 export function IconButton(props) {
     var className = "msp-btn msp-btn-icon".concat(props.small ? '-small' : '').concat(props.className ? ' ' + props.className : '');
@@ -201,7 +201,7 @@ export function IconButton(props) {
         else
             style = props.style;
     }
-    return _jsxs("button", __assign({ className: className, onClick: props.onClick, title: props.title, disabled: props.disabled, "data-id": props['data-id'], style: style }, { children: [props.svg && _jsx(Icon, { svg: props.svg }, void 0), props.extraContent] }), void 0);
+    return _jsxs("button", __assign({ className: className, onClick: props.onClick, title: props.title, disabled: props.disabled, "data-id": props['data-id'], style: style }, { children: [props.svg && _jsx(Icon, { svg: props.svg }), props.extraContent] }));
 }
 var ToggleButton = /** @class */ (function (_super) {
     __extends(ToggleButton, _super);
@@ -217,7 +217,7 @@ var ToggleButton = /** @class */ (function (_super) {
         var props = this.props;
         var label = props.label;
         var className = props.isSelected ? "".concat(props.className || '', " msp-control-current") : props.className;
-        return _jsx(Button, __assign({ icon: this.props.icon, onClick: this.onClick, title: this.props.title, inline: this.props.inline, disabled: props.disabled, style: props.style, className: className }, { children: label && this.props.isSelected ? _jsx("b", { children: label }, void 0) : label }), void 0);
+        return _jsx(Button, __assign({ icon: this.props.icon, onClick: this.onClick, title: this.props.title, inline: this.props.inline, disabled: props.disabled, style: props.style, className: className }, { children: label && this.props.isSelected ? _jsx("b", { children: label }) : label }));
     };
     return ToggleButton;
 }(React.PureComponent));
@@ -231,10 +231,10 @@ var ExpandGroup = /** @class */ (function (_super) {
         return _this;
     }
     ExpandGroup.prototype.render = function () {
-        return _jsxs(_Fragment, { children: [_jsx("div", __assign({ className: 'msp-control-group-header', style: { marginTop: this.props.marginTop !== void 0 ? this.props.marginTop : '1px', marginLeft: this.props.headerLeftMargin } }, { children: _jsxs("button", __assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleExpanded, style: this.props.headerStyle }, { children: [_jsx(Icon, { svg: this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg }, void 0), this.props.header] }), void 0) }), void 0), this.state.isExpanded &&
+        return _jsxs(_Fragment, { children: [_jsx("div", __assign({ className: 'msp-control-group-header', style: { marginTop: this.props.marginTop !== void 0 ? this.props.marginTop : '1px', marginLeft: this.props.headerLeftMargin } }, { children: _jsxs("button", __assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleExpanded, style: this.props.headerStyle }, { children: [_jsx(Icon, { svg: this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg }), this.props.header] })) })), this.state.isExpanded &&
                     (this.props.noOffset
                         ? this.props.children
-                        : _jsx("div", __assign({ className: this.props.accent ? 'msp-accent-offset' : 'msp-control-offset' }, { children: this.props.children }), void 0))] }, void 0);
+                        : _jsx("div", __assign({ className: this.props.accent ? 'msp-accent-offset' : 'msp-control-offset' }, { children: this.props.children })))] });
     };
     return ExpandGroup;
 }(React.PureComponent));
@@ -243,5 +243,5 @@ export function ControlRow(props) {
     var className = 'msp-control-row';
     if (props.className)
         className += ' ' + props.className;
-    return _jsxs("div", __assign({ className: className }, { children: [_jsx("span", __assign({ className: 'msp-control-row-label', title: props.title }, { children: props.label }), void 0), _jsx("div", __assign({ className: 'msp-control-row-ctrl' }, { children: props.control }), void 0), props.children] }), void 0);
+    return _jsxs("div", __assign({ className: className }, { children: [_jsx("span", __assign({ className: 'msp-control-row-label', title: props.title }, { children: props.label })), _jsx("div", __assign({ className: 'msp-control-row-ctrl' }, { children: props.control })), props.children] }));
 }