molstar 3.0.0 → 3.0.1

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

@@ -1,367 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AddComponentControls = exports.StructureComponentControls = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var structure_representation_params_1 = require("../../mol-plugin-state/helpers/structure-representation-params");
-var component_1 = require("../../mol-plugin-state/manager/structure/component");
-var hierarchy_1 = require("../../mol-plugin-state/manager/structure/hierarchy");
-var commands_1 = require("../../mol-plugin/commands");
-var mol_state_1 = require("../../mol-state");
-var param_definition_1 = require("../../mol-util/param-definition");
-var base_1 = require("../base");
-var action_menu_1 = require("../controls/action-menu");
-var common_1 = require("../controls/common");
-var icons_1 = require("../controls/icons");
-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);
-    function StructureComponentControls() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    StructureComponentControls.prototype.defaultState = function () {
-        return {
-            header: 'Components',
-            isCollapsed: false,
-            isDisabled: false,
-            brand: { accent: 'blue', svg: icons_1.CubeOutlineSvg }
-        };
-    };
-    StructureComponentControls.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function (c) { return _this.setState({
-            description: hierarchy_1.StructureHierarchyManager.getSelectedStructuresDescription(_this.plugin)
-        }); });
-    };
-    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 StructureComponentControls;
-}(base_1.CollapsableControls));
-exports.StructureComponentControls = StructureComponentControls;
-var ComponentEditorControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ComponentEditorControls, _super);
-    function ComponentEditorControls() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            isEmpty: true,
-            isBusy: false,
-            canUndo: false
-        };
-        _this.togglePreset = _this.toggleAction('preset');
-        _this.toggleAdd = _this.toggleAction('add');
-        _this.toggleOptions = _this.toggleAction('options');
-        _this.hideAction = function () { return _this.setState({ action: void 0 }); };
-        _this.applyPreset = function (item) {
-            _this.hideAction();
-            if (!item)
-                return;
-            var mng = _this.plugin.managers.structure;
-            var structures = mng.hierarchy.selection.structures;
-            if (item.value === null)
-                mng.component.clear(structures);
-            else
-                mng.component.applyPreset(structures, item.value);
-        };
-        _this.undo = function () {
-            var task = _this.plugin.state.data.undo();
-            if (task)
-                _this.plugin.runTask(task);
-        };
-        return _this;
-    }
-    Object.defineProperty(ComponentEditorControls.prototype, "isDisabled", {
-        get: function () {
-            return this.state.isBusy || this.state.isEmpty;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ComponentEditorControls.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function (c) { return _this.setState({
-            action: _this.state.action !== 'options' || c.structures.length === 0 ? void 0 : 'options',
-            isEmpty: c.structures.length === 0
-        }); });
-        this.subscribe(this.plugin.behaviors.state.isBusy, function (v) {
-            _this.setState({ isBusy: v, action: _this.state.action !== 'options' ? void 0 : 'options' });
-        });
-        this.subscribe(this.plugin.state.data.events.historyUpdated, function (_a) {
-            var state = _a.state;
-            _this.setState({ canUndo: state.canUndo });
-        });
-    };
-    ComponentEditorControls.prototype.toggleAction = function (action) {
-        var _this = this;
-        return function () { return _this.setState({ action: _this.state.action === action ? void 0 : action }); };
-    };
-    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);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ComponentEditorControls.prototype, "presetActions", {
-        get: function () {
-            var pivot = this.plugin.managers.structure.component.pivotStructure;
-            var providers = this.plugin.builders.structure.representation.getPresets(pivot === null || pivot === void 0 ? void 0 : pivot.cell.obj);
-            return action_menu_1.ActionMenu.createItems(providers, { label: function (p) { return p.display.name; }, category: function (p) { return p.display.group; }, description: function (p) { return p.display.description; } });
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ComponentEditorControls.prototype.render = function () {
-        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 ComponentEditorControls;
-}(base_1.PurePluginUIComponent));
-var AddComponentControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(AddComponentControls, _super);
-    function AddComponentControls() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = _this.createState();
-        _this.apply = function () {
-            var structures = _this.props.forSelection ? _this.currentStructures : _this.selectedStructures;
-            _this.props.onApply();
-            _this.plugin.managers.structure.component.add(_this.state.values, structures);
-        };
-        _this.paramsChanged = function (values) { return _this.setState({ values: values }); };
-        return _this;
-    }
-    AddComponentControls.prototype.createState = function () {
-        var params = component_1.StructureComponentManager.getAddParams(this.plugin);
-        return { params: params, values: param_definition_1.ParamDefinition.getDefaultValues(params) };
-    };
-    Object.defineProperty(AddComponentControls.prototype, "selectedStructures", {
-        get: function () {
-            return this.plugin.managers.structure.component.currentStructures;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(AddComponentControls.prototype, "currentStructures", {
-        get: function () {
-            return this.plugin.managers.structure.hierarchy.current.structures;
-        },
-        enumerable: false,
-        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 AddComponentControls;
-}(base_1.PurePluginUIComponent));
-exports.AddComponentControls = AddComponentControls;
-var ComponentOptionsControls = /** @class */ (function (_super) {
-    (0, 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); };
-        return _this;
-    }
-    ComponentOptionsControls.prototype.componentDidMount = function () {
-        var _this = this;
-        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 ComponentOptionsControls;
-}(base_1.PurePluginUIComponent));
-var ComponentListControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ComponentListControls, _super);
-    function ComponentListControls() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ComponentListControls.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function () {
-            _this.forceUpdate();
-        });
-    };
-    ComponentListControls.prototype.render = function () {
-        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 ComponentListControls;
-}(base_1.PurePluginUIComponent));
-var StructureComponentGroup = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StructureComponentGroup, _super);
-    function StructureComponentGroup() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = { action: void 0 };
-        _this.toggleVisible = function (e) {
-            e.preventDefault();
-            e.currentTarget.blur();
-            _this.plugin.managers.structure.component.toggleVisibility(_this.props.group);
-        };
-        _this.selectAction = function (item) {
-            if (!item)
-                return;
-            _this.setState({ action: void 0 });
-            (item === null || item === void 0 ? void 0 : item.value)();
-        };
-        _this.remove = function () { return _this.plugin.managers.structure.hierarchy.remove(_this.props.group, true); };
-        _this.toggleAction = function () { return _this.setState({ action: _this.state.action === 'action' ? void 0 : 'action' }); };
-        _this.toggleLabel = function () { return _this.setState({ action: _this.state.action === 'label' ? void 0 : 'label' }); };
-        _this.highlight = function (e) {
-            e.preventDefault();
-            if (!_this.props.group[0].cell.parent)
-                return;
-            commands_1.PluginCommands.Interactivity.Object.Highlight(_this.plugin, { state: _this.props.group[0].cell.parent, ref: _this.props.group.map(function (c) { return c.cell.transform.ref; }) });
-        };
-        _this.clearHighlight = function (e) {
-            e.preventDefault();
-            commands_1.PluginCommands.Interactivity.ClearHighlights(_this.plugin);
-        };
-        _this.focus = function () {
-            var allHidden = true;
-            for (var _i = 0, _a = _this.props.group; _i < _a.length; _i++) {
-                var c = _a[_i];
-                if (!c.cell.state.isHidden) {
-                    allHidden = false;
-                    break;
-                }
-            }
-            if (allHidden) {
-                _this.plugin.managers.structure.hierarchy.toggleVisibility(_this.props.group, 'show');
-            }
-            _this.plugin.managers.camera.focusSpheres(_this.props.group, function (e) {
-                var _a;
-                if (e.cell.state.isHidden)
-                    return;
-                return (_a = e.cell.obj) === null || _a === void 0 ? void 0 : _a.data.boundary.sphere;
-            });
-        };
-        _this.updateLabel = function (v) {
-            _this.plugin.managers.structure.component.updateLabel(_this.pivot, v);
-        };
-        return _this;
-    }
-    Object.defineProperty(StructureComponentGroup.prototype, "pivot", {
-        get: function () {
-            return this.props.group[0];
-        },
-        enumerable: false,
-        configurable: true
-    });
-    StructureComponentGroup.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.state.events.cell.stateUpdated, function (e) {
-            if (mol_state_1.State.ObjectEvent.isCell(e, _this.pivot.cell))
-                _this.forceUpdate();
-        });
-    };
-    Object.defineProperty(StructureComponentGroup.prototype, "colorByActions", {
-        get: function () {
-            var _this = this;
-            var _a, _b;
-            var mng = this.plugin.managers.structure.component;
-            var repr = this.pivot.representations[0];
-            var name = (_a = repr.cell.transform.params) === null || _a === void 0 ? void 0 : _a.colorTheme.name;
-            var themes = (0, structure_representation_params_1.getStructureThemeTypes)(this.plugin, (_b = this.pivot.cell.obj) === null || _b === void 0 ? void 0 : _b.data);
-            return action_menu_1.ActionMenu.createItemsFromSelectOptions(themes, {
-                value: function (o) { return function () { return mng.updateRepresentationsTheme(_this.props.group, { color: o[0] }); }; },
-                selected: function (o) { return o[0] === name; }
-            });
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(StructureComponentGroup.prototype, "actions", {
-        get: function () {
-            var _this = this;
-            var mng = this.plugin.managers.structure.component;
-            var ret = [
-                (0, 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)([
-                    action_menu_1.ActionMenu.Header('Set Coloring', { isIndependent: true })
-                ], this.colorByActions, true));
-            }
-            if (mng.canBeModified(this.props.group[0])) {
-                ret.push([
-                    action_menu_1.ActionMenu.Header('Modify by Selection'),
-                    action_menu_1.ActionMenu.Item('Include', function () { return mng.modifyByCurrentSelection(_this.props.group, 'union'); }, { icon: icons_1.UnionSvg }),
-                    action_menu_1.ActionMenu.Item('Subtract', function () { return mng.modifyByCurrentSelection(_this.props.group, 'subtract'); }, { icon: icons_1.SubtractSvg }),
-                    action_menu_1.ActionMenu.Item('Intersect', function () { return mng.modifyByCurrentSelection(_this.props.group, 'intersect'); }, { icon: icons_1.IntersectSvg })
-                ]);
-            }
-            ret.push(action_menu_1.ActionMenu.Item('Select This', function () { return mng.selectThis(_this.props.group); }, { icon: icons_1.SetSvg }));
-            if (mng.canBeModified(this.props.group[0])) {
-                ret.push(action_menu_1.ActionMenu.Item('Edit Label', this.toggleLabel));
-            }
-            return ret;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(StructureComponentGroup.prototype, "reprLabel", {
-        get: function () {
-            var _a;
-            // TODO: handle generic reprs.
-            var pivot = this.pivot;
-            if (pivot.representations.length === 0)
-                return 'No repr.';
-            if (pivot.representations.length === 1)
-                return (_a = pivot.representations[0].cell.obj) === null || _a === void 0 ? void 0 : _a.label;
-            return "".concat(pivot.representations.length, " reprs");
-        },
-        enumerable: false,
-        configurable: true
-    });
-    StructureComponentGroup.prototype.render = function () {
-        var _this = this;
-        var _a;
-        var component = this.pivot;
-        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 StructureComponentGroup;
-}(base_1.PurePluginUIComponent));
-var StructureRepresentationEntry = /** @class */ (function (_super) {
-    (0, 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); };
-        _this.toggleVisible = function (e) {
-            e.preventDefault();
-            e.currentTarget.blur();
-            _this.plugin.managers.structure.component.toggleVisibility(_this.props.group, _this.props.representation);
-        };
-        _this.update = function (params) { return _this.plugin.managers.structure.component.updateRepresentations(_this.props.group, _this.props.representation, params); };
-        return _this;
-    }
-    StructureRepresentationEntry.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.state.events.cell.stateUpdated, function (e) {
-            if (mol_state_1.State.ObjectEvent.isCell(e, _this.props.representation.cell))
-                _this.forceUpdate();
-        });
-    };
-    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: {
-                        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: {
-                        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));
-//# sourceMappingURL=components.js.map

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

@@ -1,233 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-var int_1 = require("../../mol-data/int");
-var structure_1 = require("../../mol-model/structure");
-var representation_1 = require("../../mol-plugin/behavior/dynamic/representation");
-var label_1 = require("../../mol-theme/label");
-var binding_1 = require("../../mol-util/binding");
-var memoize_1 = require("../../mol-util/memoize");
-var base_1 = require("../base");
-var action_menu_1 = require("../controls/action-menu");
-var common_1 = require("../controls/common");
-var icons_1 = require("../controls/icons");
-function addSymmetryGroupEntries(entries, location, unitSymmetryGroup, granularity) {
-    var idx = int_1.SortedArray.indexOf(location.unit.elements, location.element);
-    var base = structure_1.StructureElement.Loci(location.structure, [
-        { unit: location.unit, indices: int_1.OrderedSet.ofSingleton(idx) }
-    ]);
-    var extended = granularity === 'residue'
-        ? structure_1.StructureElement.Loci.extendToWholeResidues(base)
-        : structure_1.StructureElement.Loci.extendToWholeChains(base);
-    var name = structure_1.StructureProperties.entity.pdbx_description(location).join(', ');
-    for (var _i = 0, _a = unitSymmetryGroup.units; _i < _a.length; _i++) {
-        var u = _a[_i];
-        var loci = structure_1.StructureElement.Loci(extended.structure, [
-            { unit: u, indices: extended.elements[0].indices }
-        ]);
-        var label = (0, label_1.lociLabel)(loci, { reverse: true, hidePrefix: true, htmlStyling: false, granularity: granularity });
-        if (!label)
-            label = (0, label_1.lociLabel)(loci, { hidePrefix: false, htmlStyling: false });
-        if (unitSymmetryGroup.units.length > 1) {
-            label += " | ".concat(loci.elements[0].unit.conformation.operator.name);
-        }
-        var item = { label: label, category: name, loci: loci };
-        if (entries.has(name))
-            entries.get(name).push(item);
-        else
-            entries.set(name, [item]);
-    }
-}
-function getFocusEntries(structure) {
-    var entityEntries = new Map();
-    var l = structure_1.StructureElement.Location.create(structure);
-    for (var _i = 0, _a = structure.unitSymmetryGroups; _i < _a.length; _i++) {
-        var ug = _a[_i];
-        if (!structure_1.Unit.isAtomic(ug.units[0]))
-            continue;
-        l.unit = ug.units[0];
-        l.element = ug.elements[0];
-        var isMultiChain = structure_1.Unit.Traits.is(l.unit.traits, 1 /* MultiChain */);
-        var entityType = structure_1.StructureProperties.entity.type(l);
-        var isNonPolymer = entityType === 'non-polymer';
-        var isBranched = entityType === 'branched';
-        var isBirdMolecule = !!structure_1.StructureProperties.entity.prd_id(l);
-        if (isBirdMolecule) {
-            addSymmetryGroupEntries(entityEntries, l, ug, 'chain');
-        }
-        else if (isNonPolymer && !isMultiChain) {
-            addSymmetryGroupEntries(entityEntries, l, ug, 'residue');
-        }
-        else if (isBranched || (isNonPolymer && isMultiChain)) {
-            var u = l.unit;
-            var residueIndex = u.model.atomicHierarchy.residueAtomSegments.index;
-            var prev = -1;
-            for (var i = 0, il = u.elements.length; i < il; ++i) {
-                var eI = u.elements[i];
-                var rI = residueIndex[eI];
-                if (rI !== prev) {
-                    l.element = eI;
-                    addSymmetryGroupEntries(entityEntries, l, ug, 'residue');
-                    prev = rI;
-                }
-            }
-        }
-    }
-    var entries = [];
-    entityEntries.forEach(function (e, name) {
-        if (e.length === 1) {
-            entries.push({ label: "".concat(name, ": ").concat(e[0].label), loci: e[0].loci });
-        }
-        else if (e.length < 2000) {
-            entries.push.apply(entries, e);
-        }
-    });
-    return entries;
-}
-var StructureFocusControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StructureFocusControls, _super);
-    function StructureFocusControls() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = { isBusy: false, showAction: false };
-        _this.getSelectionItems = (0, memoize_1.memoizeLatest)(function (structures) {
-            var _a;
-            var presetItems = [];
-            for (var _i = 0, structures_1 = structures; _i < structures_1.length; _i++) {
-                var s = structures_1[_i];
-                var d = (_a = s.cell.obj) === null || _a === void 0 ? void 0 : _a.data;
-                if (d) {
-                    var entries = getFocusEntries(d);
-                    if (entries.length > 0) {
-                        presetItems.push((0, 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; },
-                            category: function (f) { return f.category; },
-                            description: function (f) { return f.label; }
-                        }), true));
-                    }
-                }
-            }
-            return presetItems;
-        });
-        _this.selectAction = function (item, e) {
-            if (!item || !_this.state.showAction) {
-                _this.setState({ showAction: false });
-                return;
-            }
-            var f = item.value;
-            if (e === null || e === void 0 ? void 0 : e.shiftKey) {
-                _this.plugin.managers.structure.focus.addFromLoci(f.loci);
-            }
-            else {
-                _this.plugin.managers.structure.focus.set(f);
-            }
-            _this.focusCamera();
-        };
-        _this.toggleAction = function () { return _this.setState({ showAction: !_this.state.showAction }); };
-        _this.focusCamera = function () {
-            var current = _this.plugin.managers.structure.focus.current;
-            if (current)
-                _this.plugin.managers.camera.focusLoci(current.loci);
-        };
-        _this.clear = function () {
-            _this.plugin.managers.structure.focus.clear();
-            _this.plugin.managers.camera.reset();
-        };
-        _this.highlightCurrent = function () {
-            var current = _this.plugin.managers.structure.focus.current;
-            if (current)
-                _this.plugin.managers.interactivity.lociHighlights.highlightOnly({ loci: current.loci }, false);
-        };
-        _this.clearHighlights = function () {
-            _this.plugin.managers.interactivity.lociHighlights.clearHighlights();
-        };
-        return _this;
-    }
-    StructureFocusControls.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.managers.structure.focus.behaviors.current, function (c) {
-            // clear the memo cache
-            _this.getSelectionItems([]);
-            _this.forceUpdate();
-        });
-        this.subscribe(this.plugin.managers.structure.focus.events.historyUpdated, function (c) {
-            _this.forceUpdate();
-        });
-        this.subscribe(this.plugin.behaviors.state.isBusy, function (v) {
-            _this.setState({ isBusy: v, showAction: false });
-        });
-    };
-    Object.defineProperty(StructureFocusControls.prototype, "isDisabled", {
-        get: function () {
-            return this.state.isBusy || this.actionItems.length === 0;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(StructureFocusControls.prototype, "actionItems", {
-        get: function () {
-            var historyItems = [];
-            var history = this.plugin.managers.structure.focus.history;
-            if (history.length > 0) {
-                historyItems.push((0, 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; },
-                    description: function (f) {
-                        return f.category && f.label !== f.category
-                            ? "".concat(f.category, " | ").concat(f.label)
-                            : f.label;
-                    }
-                }), true));
-            }
-            var presetItems = this.getSelectionItems(this.plugin.managers.structure.hierarchy.selection.structures);
-            if (presetItems.length === 1) {
-                var item = presetItems[0];
-                var header = item[0];
-                header.initiallyExpanded = true;
-            }
-            var items = [];
-            if (presetItems.length > 0)
-                items.push.apply(items, presetItems);
-            if (historyItems.length > 0)
-                items.push.apply(items, historyItems);
-            return items;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    StructureFocusControls.prototype.getToggleBindingLabel = function () {
-        var _a;
-        var t = this.plugin.state.behaviors.transforms.get(representation_1.FocusLoci.id);
-        if (!t)
-            return '';
-        var binding = (_a = t.params) === null || _a === void 0 ? void 0 : _a.bindings.clickFocus;
-        if (!binding || binding_1.Binding.isEmpty(binding))
-            return '';
-        return binding_1.Binding.formatTriggers(binding);
-    };
-    StructureFocusControls.prototype.render = function () {
-        var current = this.plugin.managers.structure.focus.current;
-        var label = (current === null || current === void 0 ? void 0 : current.label) || 'Nothing Focused';
-        var title = 'Click to Center Camera';
-        if (!current) {
-            title = 'Select focus using the menu';
-            var binding = this.getToggleBindingLabel();
-            if (binding) {
-                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 StructureFocusControls;
-}(base_1.PluginUIComponent));
-exports.StructureFocusControls = StructureFocusControls;
-//# sourceMappingURL=focus.js.map