molstar
Version:
A comprehensive macromolecular library.
367 lines • 25.4 kB
JavaScript
"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 " + 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 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: 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: (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: (((_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