molstar 3.3.1 → 3.6.0

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

@@ -17,7 +17,7 @@ var parameters_1 = require("../controls/parameters");
 var update_transform_1 = require("../state/update-transform");
 var generic_1 = require("./generic");
 var StructureComponentControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StructureComponentControls, _super);
+    tslib_1.__extends(StructureComponentControls, _super);
     function StructureComponentControls() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -36,13 +36,13 @@ var StructureComponentControls = /** @class */ (function (_super) {
         }); });
     };
     StructureComponentControls.prototype.renderControls = function () {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ComponentEditorControls, {}, void 0), (0, jsx_runtime_1.jsx)(ComponentListControls, {}, void 0), (0, jsx_runtime_1.jsx)(generic_1.GenericEntryListControls, {}, void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ComponentEditorControls, {}), (0, jsx_runtime_1.jsx)(ComponentListControls, {}), (0, jsx_runtime_1.jsx)(generic_1.GenericEntryListControls, {})] });
     };
     return StructureComponentControls;
 }(base_1.CollapsableControls));
 exports.StructureComponentControls = StructureComponentControls;
 var ComponentEditorControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ComponentEditorControls, _super);
+    tslib_1.__extends(ComponentEditorControls, _super);
     function ComponentEditorControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {
@@ -99,7 +99,7 @@ var ComponentEditorControls = /** @class */ (function (_super) {
     };
     Object.defineProperty(ComponentEditorControls.prototype, "presetControls", {
         get: function () {
-            return (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.presetActions, onSelect: this.applyPreset }, void 0);
+            return (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.presetActions, onSelect: this.applyPreset });
         },
         enumerable: false,
         configurable: true
@@ -117,12 +117,12 @@ var ComponentEditorControls = /** @class */ (function (_super) {
         var undoTitle = this.state.canUndo
             ? "Undo ".concat(this.plugin.state.data.latestUndoLabel)
             : 'Some mistakes of the past can be undone.';
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.BookmarksOutlinedSvg, label: 'Preset', title: 'Apply a representation preset for the current structure(s).', toggle: this.togglePreset, isSelected: this.state.action === 'preset', disabled: this.isDisabled }, void 0), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.AddSvg, label: 'Add', title: 'Add a new representation component for a selection.', toggle: this.toggleAdd, isSelected: this.state.action === 'add', disabled: this.isDisabled }, void 0), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options that are applied to all applicable representations.', style: { flex: '0 0 40px', padding: 0 }, toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.isDisabled }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.RestoreSvg, className: 'msp-flex-item', flex: '40px', onClick: this.undo, disabled: !this.state.canUndo || this.isDisabled, title: undoTitle }, void 0)] }), void 0), this.state.action === 'preset' && this.presetControls, this.state.action === 'add' && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(AddComponentControls, { onApply: this.hideAction }, void 0) }), void 0), this.state.action === 'options' && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(ComponentOptionsControls, { isDisabled: this.isDisabled }, void 0) }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.BookmarksOutlinedSvg, label: 'Preset', title: 'Apply a representation preset for the current structure(s).', toggle: this.togglePreset, isSelected: this.state.action === 'preset', disabled: this.isDisabled }), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.AddSvg, label: 'Add', title: 'Add a new representation component for a selection.', toggle: this.toggleAdd, isSelected: this.state.action === 'add', disabled: this.isDisabled }), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options that are applied to all applicable representations.', style: { flex: '0 0 40px', padding: 0 }, toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.isDisabled }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.RestoreSvg, className: 'msp-flex-item', flex: '40px', onClick: this.undo, disabled: !this.state.canUndo || this.isDisabled, title: undoTitle })] })), this.state.action === 'preset' && this.presetControls, this.state.action === 'add' && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(AddComponentControls, { onApply: this.hideAction }) })), this.state.action === 'options' && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(ComponentOptionsControls, { isDisabled: this.isDisabled }) }))] });
     };
     return ComponentEditorControls;
 }(base_1.PurePluginUIComponent));
 var AddComponentControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(AddComponentControls, _super);
+    tslib_1.__extends(AddComponentControls, _super);
     function AddComponentControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = _this.createState();
@@ -153,13 +153,13 @@ var AddComponentControls = /** @class */ (function (_super) {
         configurable: true
     });
     AddComponentControls.prototype.render = function () {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.params, values: this.state.values, onChangeValues: this.paramsChanged }, void 0), (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: icons_1.AddSvg, title: 'Use Selection and optional Representation to create a new Component.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.apply, style: { marginTop: '1px' } }, { children: "Create Component" }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.params, values: this.state.values, onChangeValues: this.paramsChanged }), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.AddSvg, title: 'Use Selection and optional Representation to create a new Component.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.apply, style: { marginTop: '1px' } }, { children: "Create Component" }))] });
     };
     return AddComponentControls;
 }(base_1.PurePluginUIComponent));
 exports.AddComponentControls = AddComponentControls;
 var ComponentOptionsControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ComponentOptionsControls, _super);
+    tslib_1.__extends(ComponentOptionsControls, _super);
     function ComponentOptionsControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.update = function (options) { return _this.plugin.managers.structure.component.setOptions(options); };
@@ -170,12 +170,12 @@ var ComponentOptionsControls = /** @class */ (function (_super) {
         this.subscribe(this.plugin.managers.structure.component.events.optionsUpdated, function () { return _this.forceUpdate(); });
     };
     ComponentOptionsControls.prototype.render = function () {
-        return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: component_1.StructureComponentManager.OptionsParams, values: this.plugin.managers.structure.component.state.options, onChangeValues: this.update, isDisabled: this.props.isDisabled }, void 0);
+        return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: component_1.StructureComponentManager.OptionsParams, values: this.plugin.managers.structure.component.state.options, onChangeValues: this.update, isDisabled: this.props.isDisabled });
     };
     return ComponentOptionsControls;
 }(base_1.PurePluginUIComponent));
 var ComponentListControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ComponentListControls, _super);
+    tslib_1.__extends(ComponentListControls, _super);
     function ComponentListControls() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -189,12 +189,12 @@ var ComponentListControls = /** @class */ (function (_super) {
         var componentGroups = this.plugin.managers.structure.hierarchy.currentComponentGroups;
         if (componentGroups.length === 0)
             return null;
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginTop: '6px' } }, { children: componentGroups.map(function (g) { return (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g }, g[0].cell.transform.ref); }) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginTop: '6px' } }, { children: componentGroups.map(function (g) { return (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g }, g[0].cell.transform.ref); }) }));
     };
     return ComponentListControls;
 }(base_1.PurePluginUIComponent));
 var StructureComponentGroup = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StructureComponentGroup, _super);
+    tslib_1.__extends(StructureComponentGroup, _super);
     function StructureComponentGroup() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { action: void 0 };
@@ -281,13 +281,13 @@ var StructureComponentGroup = /** @class */ (function (_super) {
             var _this = this;
             var mng = this.plugin.managers.structure.component;
             var ret = [
-                (0, tslib_1.__spreadArray)([
+                tslib_1.__spreadArray([
                     action_menu_1.ActionMenu.Header('Add Representation')
                 ], component_1.StructureComponentManager.getRepresentationTypes(this.plugin, this.props.group[0])
                     .map(function (t) { return action_menu_1.ActionMenu.Item(t[1], function () { return mng.addRepresentation(_this.props.group, t[0]); }); }), true)
             ];
             if (this.pivot.representations.length > 0) {
-                ret.push((0, tslib_1.__spreadArray)([
+                ret.push(tslib_1.__spreadArray([
                     action_menu_1.ActionMenu.Header('Set Coloring', { isIndependent: true })
                 ], this.colorByActions, true));
             }
@@ -329,12 +329,12 @@ var StructureComponentGroup = /** @class */ (function (_super) {
         var cell = component.cell;
         var label = (_a = cell.obj) === null || _a === void 0 ? void 0 : _a.label;
         var reprLabel = this.reprLabel;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, className: 'msp-control-button-label', title: "".concat(label, ". Click to focus."), onClick: this.focus, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: { textAlign: 'left' } }, { children: [label, (0, jsx_runtime_1.jsx)("small", (0, tslib_1.__assign)({ className: 'msp-25-lower-contrast-text', style: { float: 'right' } }, { children: reprLabel }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: "".concat(cell.state.isHidden ? 'Show' : 'Hide', " component"), small: true, className: 'msp-form-control', flex: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, toggleState: false, onClick: this.remove, title: 'Remove', small: true, className: 'msp-form-control', flex: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, onClick: this.toggleAction, title: 'Actions', toggleState: this.state.action === 'action', className: 'msp-form-control', flex: true }, void 0)] }), void 0), this.state.action === 'label' && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset', style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlRow, { label: 'Label', control: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { display: 'flex', textAlignLast: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.TextInput, { onChange: this.updateLabel, value: label, style: { flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', blurOnEnter: true, blurOnEscape: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CheckSvg, onClick: this.toggleLabel, className: 'msp-form-control msp-control-button-label', flex: true }, void 0)] }), void 0) }, void 0) }), void 0), this.state.action === 'action' && (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-accent-offset' }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.actions, onSelect: this.selectAction, noOffset: true }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '6px' } }, { children: component.representations.map(function (r) { return (0, jsx_runtime_1.jsx)(StructureRepresentationEntry, { group: _this.props.group, representation: r }, r.cell.transform.ref); }) }), void 0)] }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__assign({ noOverflow: true, className: 'msp-control-button-label', title: "".concat(label, ". Click to focus."), onClick: this.focus, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: { textAlign: 'left' } }, { children: [label, (0, jsx_runtime_1.jsx)("small", tslib_1.__assign({ className: 'msp-25-lower-contrast-text', style: { float: 'right' } }, { children: reprLabel }))] })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: "".concat(cell.state.isHidden ? 'Show' : 'Hide', " component"), small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, toggleState: false, onClick: this.remove, title: 'Remove', small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, onClick: this.toggleAction, title: 'Actions', toggleState: this.state.action === 'action', className: 'msp-form-control', flex: true })] })), this.state.action === 'label' && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset', style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlRow, { label: 'Label', control: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { display: 'flex', textAlignLast: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.TextInput, { onChange: this.updateLabel, value: label, style: { flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', blurOnEnter: true, blurOnEscape: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CheckSvg, onClick: this.toggleLabel, className: 'msp-form-control msp-control-button-label', flex: true })] })) }) })), this.state.action === 'action' && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-accent-offset' }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.actions, onSelect: this.selectAction, noOffset: true }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '6px' } }, { children: component.representations.map(function (r) { return (0, jsx_runtime_1.jsx)(StructureRepresentationEntry, { group: _this.props.group, representation: r }, r.cell.transform.ref); }) }))] }))] });
     };
     return StructureComponentGroup;
 }(base_1.PurePluginUIComponent));
 var StructureRepresentationEntry = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StructureRepresentationEntry, _super);
+    tslib_1.__extends(StructureRepresentationEntry, _super);
     function StructureRepresentationEntry() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.remove = function () { return _this.plugin.managers.structure.component.removeRepresentations(_this.props.group, _this.props.representation); };
@@ -356,11 +356,11 @@ var StructureRepresentationEntry = /** @class */ (function (_super) {
     StructureRepresentationEntry.prototype.render = function () {
         var _a;
         var repr = this.props.representation.cell;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-representation-entry' }, { children: [repr.parent && (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, (0, tslib_1.__assign)({ header: "".concat(((_a = repr.obj) === null || _a === void 0 ? void 0 : _a.label) || '', " Representation"), noOffset: true }, { children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', customUpdate: this.update, noMargin: true }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, title: 'Remove', small: true, className: 'msp-default-bg', toggleState: false, style: {
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-representation-entry' }, { children: [repr.parent && (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, tslib_1.__assign({ header: "".concat(((_a = repr.obj) === null || _a === void 0 ? void 0 : _a.label) || '', " Representation"), noOffset: true }, { children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', customUpdate: this.update, noMargin: true }) })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, title: 'Remove', small: true, className: 'msp-default-bg', toggleState: false, style: {
                         position: 'absolute', top: 0, right: '32px', lineHeight: '24px', height: '24px', textAlign: 'right', width: '44px', paddingRight: '6px', background: 'none'
-                    } }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.props.representation.cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: 'Toggle Visibility', small: true, className: 'msp-default-bg', style: {
+                    } }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.props.representation.cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: 'Toggle Visibility', small: true, className: 'msp-default-bg', style: {
                         position: 'absolute', top: 0, right: 0, lineHeight: '24px', height: '24px', textAlign: 'right', width: '32px', paddingRight: '6px', background: 'none'
-                    } }, void 0)] }), void 0);
+                    } })] }));
     };
     return StructureRepresentationEntry;
 }(base_1.PurePluginUIComponent));

package/lib/commonjs/mol-plugin-ui/structure/focus.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */

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

@@ -4,7 +4,7 @@ exports.StructureFocusControls = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -92,7 +92,7 @@ function getFocusEntries(structure) {
     return entries;
 }
 var StructureFocusControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StructureFocusControls, _super);
+    tslib_1.__extends(StructureFocusControls, _super);
     function StructureFocusControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { isBusy: false, showAction: false };
@@ -105,7 +105,7 @@ var StructureFocusControls = /** @class */ (function (_super) {
                 if (d) {
                     var entries = getFocusEntries(d);
                     if (entries.length > 0) {
-                        presetItems.push((0, tslib_1.__spreadArray)([
+                        presetItems.push(tslib_1.__spreadArray([
                             action_menu_1.ActionMenu.Header(d.label, { description: d.label })
                         ], action_menu_1.ActionMenu.createItems(entries, {
                             label: function (f) { return f.label; },
@@ -167,7 +167,7 @@ var StructureFocusControls = /** @class */ (function (_super) {
     };
     Object.defineProperty(StructureFocusControls.prototype, "isDisabled", {
         get: function () {
-            return this.state.isBusy || this.actionItems.length === 0;
+            return this.state.isBusy || this.plugin.managers.structure.hierarchy.selection.structures.length === 0;
         },
         enumerable: false,
         configurable: true
@@ -177,7 +177,7 @@ var StructureFocusControls = /** @class */ (function (_super) {
             var historyItems = [];
             var history = this.plugin.managers.structure.focus.history;
             if (history.length > 0) {
-                historyItems.push((0, tslib_1.__spreadArray)([
+                historyItems.push(tslib_1.__spreadArray([
                     action_menu_1.ActionMenu.Header('History', { description: 'Previously focused on items.' })
                 ], action_menu_1.ActionMenu.createItems(history, {
                     label: function (f) { return f.label; },
@@ -225,7 +225,7 @@ var StructureFocusControls = /** @class */ (function (_super) {
                 title += "\nor use '".concat(binding, "' on element");
             }
         }
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, onClick: this.focusCamera, title: title, onMouseEnter: this.highlightCurrent, onMouseLeave: this.clearHighlights, disabled: this.isDisabled || !current, style: { textAlignLast: current ? 'left' : void 0 } }, { children: label }), void 0), current && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CancelOutlinedSvg, onClick: this.clear, title: 'Clear', className: 'msp-form-control', flex: true, disabled: this.isDisabled }, void 0), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.CenterFocusStrongSvg, title: 'Select a focus target to center on an show its surroundings. Hold shift to focus on multiple targets.', toggle: this.toggleAction, isSelected: this.state.showAction, disabled: this.isDisabled, style: { flex: '0 0 40px', padding: 0 } }, void 0)] }), void 0), this.state.showAction && (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.actionItems, onSelect: this.selectAction }, void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ noOverflow: true, onClick: this.focusCamera, title: title, onMouseEnter: this.highlightCurrent, onMouseLeave: this.clearHighlights, disabled: this.isDisabled || !current, style: { textAlignLast: current ? 'left' : void 0 } }, { children: label })), current && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CancelOutlinedSvg, onClick: this.clear, title: 'Clear', className: 'msp-form-control', flex: true, disabled: this.isDisabled }), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.CenterFocusStrongSvg, title: 'Select a focus target to center on an show its surroundings. Hold shift to focus on multiple targets.', toggle: this.toggleAction, isSelected: this.state.showAction, disabled: this.isDisabled, style: { flex: '0 0 40px', padding: 0 } })] })), this.state.showAction && (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.actionItems, onSelect: this.selectAction })] });
     };
     return StructureFocusControls;
 }(base_1.PluginUIComponent));

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

@@ -10,7 +10,7 @@ var common_1 = require("../controls/common");
 var update_transform_1 = require("../state/update-transform");
 var icons_1 = require("../controls/icons");
 var GenericEntryListControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(GenericEntryListControls, _super);
+    tslib_1.__extends(GenericEntryListControls, _super);
     function GenericEntryListControls() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -40,7 +40,7 @@ var GenericEntryListControls = /** @class */ (function (_super) {
             }
             if (refs.length === 0)
                 return null;
-            return (0, jsx_runtime_1.jsx)(GenericEntry, { refs: refs, labelMultiple: 'Unit Cells' }, void 0);
+            return (0, jsx_runtime_1.jsx)(GenericEntry, { refs: refs, labelMultiple: 'Unit Cells' });
         },
         enumerable: false,
         configurable: true
@@ -52,7 +52,7 @@ var GenericEntryListControls = /** @class */ (function (_super) {
             this.plugin.genericRepresentationControls.forEach(function (provider, key) {
                 var _a = provider(_this.plugin.managers.structure.hierarchy.selection), refs = _a[0], labelMultiple = _a[1];
                 if (refs.length > 0) {
-                    controls.push((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(GenericEntry, { refs: refs, labelMultiple: labelMultiple }, void 0) }, key));
+                    controls.push((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(GenericEntry, { refs: refs, labelMultiple: labelMultiple }) }, key));
                 }
             });
             return controls.length > 0 ? controls : null;
@@ -61,13 +61,13 @@ var GenericEntryListControls = /** @class */ (function (_super) {
         configurable: true
     });
     GenericEntryListControls.prototype.render = function () {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { marginTop: '6px' } }, { children: [this.unitcell, this.customControls] }), void 0) }, void 0);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { marginTop: '6px' } }, { children: [this.unitcell, this.customControls] })) });
     };
     return GenericEntryListControls;
 }(base_1.PurePluginUIComponent));
 exports.GenericEntryListControls = GenericEntryListControls;
 var GenericEntry = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(GenericEntry, _super);
+    tslib_1.__extends(GenericEntry, _super);
     function GenericEntry() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { showOptions: false };
@@ -147,7 +147,7 @@ var GenericEntry = /** @class */ (function (_super) {
         else {
             label = "".concat(refs.length, " ").concat(labelMultiple || 'Objects');
         }
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: 'msp-form-control msp-control-button-label', title: "".concat(label, ". Click to focus."), onClick: this.focus, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: { textAlign: 'left' } }, { children: [label, " ", (0, jsx_runtime_1.jsx)("small", { children: description }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: pivot.cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, className: 'msp-form-control', onClick: this.toggleVisibility, title: "".concat(pivot.cell.state.isHidden ? 'Show' : 'Hide'), small: true, flex: true }, void 0), refs.length === 1 && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, className: 'msp-form-control', onClick: this.toggleOptions, title: 'Options', toggleState: this.state.showOptions, flex: true }, void 0)] }), void 0), (refs.length === 1 && this.state.showOptions && pivot.cell.parent) && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: pivot.cell.parent, transform: pivot.cell.transform, customHeader: 'none', autoHideApply: true }, void 0) }), void 0) }, void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsxs)("button", tslib_1.__assign({ className: 'msp-form-control msp-control-button-label', title: "".concat(label, ". Click to focus."), onClick: this.focus, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: { textAlign: 'left' } }, { children: [label, " ", (0, jsx_runtime_1.jsx)("small", { children: description })] })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: pivot.cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, className: 'msp-form-control', onClick: this.toggleVisibility, title: "".concat(pivot.cell.state.isHidden ? 'Show' : 'Hide'), small: true, flex: true }), refs.length === 1 && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, className: 'msp-form-control', onClick: this.toggleOptions, title: 'Options', toggleState: this.state.showOptions, flex: true })] })), (refs.length === 1 && this.state.showOptions && pivot.cell.parent) && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: pivot.cell.parent, transform: pivot.cell.transform, customHeader: 'none', autoHideApply: true }) })) })] });
     };
     return GenericEntry;
 }(base_1.PurePluginUIComponent));

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

@@ -16,7 +16,7 @@ var update_transform_1 = require("../state/update-transform");
 var selection_1 = require("./selection");
 // TODO details, options (e.g. change text for labels)
 var StructureMeasurementsControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StructureMeasurementsControls, _super);
+    tslib_1.__extends(StructureMeasurementsControls, _super);
     function StructureMeasurementsControls() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -28,13 +28,13 @@ var StructureMeasurementsControls = /** @class */ (function (_super) {
         };
     };
     StructureMeasurementsControls.prototype.renderControls = function () {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MeasurementControls, {}, void 0), (0, jsx_runtime_1.jsx)(MeasurementList, {}, void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MeasurementControls, {}), (0, jsx_runtime_1.jsx)(MeasurementList, {})] });
     };
     return StructureMeasurementsControls;
 }(base_1.CollapsableControls));
 exports.StructureMeasurementsControls = StructureMeasurementsControls;
 var MeasurementList = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(MeasurementList, _super);
+    tslib_1.__extends(MeasurementList, _super);
     function MeasurementList() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -51,17 +51,17 @@ var MeasurementList = /** @class */ (function (_super) {
             if (cell.obj)
                 group.push((0, jsx_runtime_1.jsx)(MeasurementEntry, { cell: cell }, cell.obj.id));
         }
-        return group.length ? (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, (0, tslib_1.__assign)({ header: header, initiallyExpanded: true }, { children: group }), void 0) : null;
+        return group.length ? (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, tslib_1.__assign({ header: header, initiallyExpanded: true }, { children: group })) : null;
     };
     MeasurementList.prototype.render = function () {
         var measurements = this.plugin.managers.structure.measurement.state;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { marginTop: '6px' } }, { children: [this.renderGroup(measurements.labels, 'Labels'), this.renderGroup(measurements.distances, 'Distances'), this.renderGroup(measurements.angles, 'Angles'), this.renderGroup(measurements.dihedrals, 'Dihedrals'), this.renderGroup(measurements.orientations, 'Orientations'), this.renderGroup(measurements.planes, 'Planes')] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { marginTop: '6px' } }, { children: [this.renderGroup(measurements.labels, 'Labels'), this.renderGroup(measurements.distances, 'Distances'), this.renderGroup(measurements.angles, 'Angles'), this.renderGroup(measurements.dihedrals, 'Dihedrals'), this.renderGroup(measurements.orientations, 'Orientations'), this.renderGroup(measurements.planes, 'Planes')] }));
     };
     return MeasurementList;
 }(base_1.PurePluginUIComponent));
 exports.MeasurementList = MeasurementList;
 var MeasurementControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(MeasurementControls, _super);
+    tslib_1.__extends(MeasurementControls, _super);
     function MeasurementControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { isBusy: false, action: void 0 };
@@ -172,7 +172,7 @@ var MeasurementControls = /** @class */ (function (_super) {
     MeasurementControls.prototype.historyEntry = function (e, idx) {
         var _this = this;
         var history = this.plugin.managers.structure.selection.additionsHistory;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row', onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: [(0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' } }, { children: [idx, ". ", (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: e.label } }, void 0)] }), void 0), history.length > 1 && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowUpwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'up'); }, flex: '20px', title: 'Move up' }, void 0), history.length > 1 && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowDownwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'down'); }, flex: '20px', title: 'Move down' }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.plugin.managers.structure.selection.modifyHistory(e, 'remove'); }, flex: true, title: 'Remove' }, void 0)] }), e.id);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row', onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: [(0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__assign({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' } }, { children: [idx, ". ", (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: e.label } })] })), history.length > 1 && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowUpwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'up'); }, flex: '20px', title: 'Move up' }), history.length > 1 && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowDownwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'down'); }, flex: '20px', title: 'Move down' }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.plugin.managers.structure.selection.modifyHistory(e, 'remove'); }, flex: true, title: 'Remove' })] }), e.id);
     };
     MeasurementControls.prototype.add = function () {
         var history = this.plugin.managers.structure.selection.additionsHistory;
@@ -180,16 +180,16 @@ var MeasurementControls = /** @class */ (function (_super) {
         for (var i = 0, _i = Math.min(history.length, 4); i < _i; i++) {
             entries.push(this.historyEntry(history[i], i + 1));
         }
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.actions, onSelect: this.selectAction }, void 0), entries.length > 0 && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: entries }), void 0), entries.length === 0 && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset msp-help-text' }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-help-description' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.HelpOutlineSvg, inline: true }, void 0), "Add one or more selections (toggle ", (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, { inline: true }, void 0), " mode)"] }), void 0) }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.actions, onSelect: this.selectAction }), entries.length > 0 && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: entries })), entries.length === 0 && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset msp-help-text' }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-help-description' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.HelpOutlineSvg, inline: true }), "Add one or more selections (toggle ", (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, { inline: true }), " mode)"] })) }))] });
     };
     MeasurementControls.prototype.render = function () {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.AddSvg, label: 'Add', toggle: this.toggleAdd, isSelected: this.state.action === 'add', disabled: this.state.isBusy, className: 'msp-btn-apply-simple' }, void 0), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } }, void 0)] }), void 0), this.state.action === 'add' && this.add(), this.state.action === 'options' && (0, jsx_runtime_1.jsx)(MeasurementsOptions, {}, void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.AddSvg, label: 'Add', toggle: this.toggleAdd, isSelected: this.state.action === 'add', disabled: this.state.isBusy, className: 'msp-btn-apply-simple' }), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } })] })), this.state.action === 'add' && this.add(), this.state.action === 'options' && (0, jsx_runtime_1.jsx)(MeasurementsOptions, {})] });
     };
     return MeasurementControls;
 }(base_1.PurePluginUIComponent));
 exports.MeasurementControls = MeasurementControls;
 var MeasurementsOptions = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(MeasurementsOptions, _super);
+    tslib_1.__extends(MeasurementsOptions, _super);
     function MeasurementsOptions() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { isDisabled: false };
@@ -209,12 +209,12 @@ var MeasurementsOptions = /** @class */ (function (_super) {
     };
     MeasurementsOptions.prototype.render = function () {
         var measurements = this.plugin.managers.structure.measurement.state;
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: measurement_1.StructureMeasurementParams, values: measurements.options, onChangeValues: this.changed, isDisabled: this.state.isDisabled }, void 0) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: measurement_1.StructureMeasurementParams, values: measurements.options, onChangeValues: this.changed, isDisabled: this.state.isDisabled }) }));
     };
     return MeasurementsOptions;
 }(base_1.PurePluginUIComponent));
 var MeasurementEntry = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(MeasurementEntry, _super);
+    tslib_1.__extends(MeasurementEntry, _super);
     function MeasurementEntry() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { showUpdate: false };
@@ -327,7 +327,7 @@ var MeasurementEntry = /** @class */ (function (_super) {
         var obj = cell.obj;
         if (!obj)
             return null;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row', onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight }, { children: [(0, jsx_runtime_1.jsx)("button", (0, tslib_1.__assign)({ className: 'msp-form-control msp-control-button-label msp-no-overflow', title: 'Click to focus. Hover to highlight.', onClick: this.focus, style: { width: 'auto', textAlign: 'left' } }, { children: (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: this.label } }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, small: true, className: 'msp-form-control', onClick: this.toggleVisibility, flex: true, title: cell.state.isHidden ? 'Show' : 'Hide' }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, small: true, className: 'msp-form-control', onClick: this.delete, flex: true, title: 'Delete', toggleState: false }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, className: 'msp-form-control', onClick: this.toggleUpdate, flex: true, title: 'Actions', toggleState: this.state.showUpdate }, void 0)] }), obj.id), this.state.showUpdate && cell.parent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-accent-offset' }, { children: [(0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.actions, onSelect: this.selectAction, noOffset: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, (0, tslib_1.__assign)({ header: 'Options', noOffset: true }, { children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: cell.parent, transform: cell.transform, customHeader: 'none', autoHideApply: true }, void 0) }), void 0)] }), void 0) }, void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row', onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight }, { children: [(0, jsx_runtime_1.jsx)("button", tslib_1.__assign({ className: 'msp-form-control msp-control-button-label msp-no-overflow', title: 'Click to focus. Hover to highlight.', onClick: this.focus, style: { width: 'auto', textAlign: 'left' } }, { children: (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: this.label } }) })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, small: true, className: 'msp-form-control', onClick: this.toggleVisibility, flex: true, title: cell.state.isHidden ? 'Show' : 'Hide' }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, small: true, className: 'msp-form-control', onClick: this.delete, flex: true, title: 'Delete', toggleState: false }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, className: 'msp-form-control', onClick: this.toggleUpdate, flex: true, title: 'Actions', toggleState: this.state.showUpdate })] }), obj.id), this.state.showUpdate && cell.parent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-accent-offset' }, { children: [(0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.actions, onSelect: this.selectAction, noOffset: true }), (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, tslib_1.__assign({ header: 'Options', noOffset: true }, { children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: cell.parent, transform: cell.transform, customHeader: 'none', autoHideApply: true }) }))] })) })] });
     };
     return MeasurementEntry;
 }(base_1.PurePluginUIComponent));

package/lib/commonjs/mol-plugin-ui/structure/quick-styles.js

@@ -18,7 +18,7 @@ var postprocessing_1 = require("../../mol-canvas3d/passes/postprocessing");
 var config_1 = require("../../mol-plugin/config");
 var component_1 = require("../../mol-plugin-state/manager/structure/component");
 var StructureQuickStylesControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StructureQuickStylesControls, _super);
+    tslib_1.__extends(StructureQuickStylesControls, _super);
     function StructureQuickStylesControls() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -30,20 +30,20 @@ var StructureQuickStylesControls = /** @class */ (function (_super) {
         };
     };
     StructureQuickStylesControls.prototype.renderControls = function () {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(QuickStyles, {}, void 0) }, void 0);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(QuickStyles, {}) });
     };
     return StructureQuickStylesControls;
 }(base_1.CollapsableControls));
 exports.StructureQuickStylesControls = StructureQuickStylesControls;
 var QuickStyles = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(QuickStyles, _super);
+    tslib_1.__extends(QuickStyles, _super);
     function QuickStyles() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     QuickStyles.prototype.default = function () {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
             var structures, preset, provider, p;
-            return (0, tslib_1.__generator)(this, function (_a) {
+            return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         structures = this.plugin.managers.structure.hierarchy.selection.structures;
@@ -65,9 +65,9 @@ var QuickStyles = /** @class */ (function (_super) {
         });
     };
     QuickStyles.prototype.illustrative = function () {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
             var structures;
-            return (0, tslib_1.__generator)(this, function (_a) {
+            return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         structures = this.plugin.managers.structure.hierarchy.selection.structures;
@@ -94,10 +94,10 @@ var QuickStyles = /** @class */ (function (_super) {
         });
     };
     QuickStyles.prototype.stylized = function () {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
             var pp;
-            return (0, tslib_1.__generator)(this, function (_a) {
-                this.plugin.managers.structure.component.setOptions((0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.plugin.managers.structure.component.state.options), { ignoreLight: true }));
+            return tslib_1.__generator(this, function (_a) {
+                this.plugin.managers.structure.component.setOptions(tslib_1.__assign(tslib_1.__assign({}, this.plugin.managers.structure.component.state.options), { ignoreLight: true }));
                 if (this.plugin.canvas3d) {
                     pp = this.plugin.canvas3d.props.postprocessing;
                     this.plugin.canvas3d.setProps({
@@ -123,7 +123,7 @@ var QuickStyles = /** @class */ (function (_super) {
     };
     QuickStyles.prototype.render = function () {
         var _this = this;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, title: 'Applies default representation preset. Set outline and occlusion effects to defaults.', onClick: function () { return _this.default(); }, style: { width: 'auto' } }, { children: "Default" }), void 0), (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, title: 'Applies no representation preset. Enables outline and occlusion effects. Enables ignore-light representation parameter.', onClick: function () { return _this.stylized(); }, style: { width: 'auto' } }, { children: "Stylized" }), void 0), (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, title: 'Applies illustrative representation preset. Enables outline and occlusion effects. Enables ignore-light parameter.', onClick: function () { return _this.illustrative(); }, style: { width: 'auto' } }, { children: "Illustrative" }), void 0)] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ noOverflow: true, title: 'Applies default representation preset. Set outline and occlusion effects to defaults.', onClick: function () { return _this.default(); }, style: { width: 'auto' } }, { children: "Default" })), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ noOverflow: true, title: 'Applies no representation preset. Enables outline and occlusion effects. Enables ignore-light representation parameter.', onClick: function () { return _this.stylized(); }, style: { width: 'auto' } }, { children: "Stylized" })), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ noOverflow: true, title: 'Applies illustrative representation preset. Enables outline and occlusion effects. Enables ignore-light parameter.', onClick: function () { return _this.illustrative(); }, style: { width: 'auto' } }, { children: "Illustrative" }))] }));
     };
     return QuickStyles;
 }(base_1.PurePluginUIComponent));