molstar
Version:
A comprehensive macromolecular library.
156 lines • 11.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LeftPanelControls = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var canvas3d_1 = require("../mol-canvas3d/canvas3d");
var commands_1 = require("../mol-plugin/commands");
var mol_state_1 = require("../mol-state");
var base_1 = require("./base");
var common_1 = require("./controls/common");
var parameters_1 = require("./controls/parameters");
var actions_1 = require("./state/actions");
var snapshots_1 = require("./state/snapshots");
var tree_1 = require("./state/tree");
var help_1 = require("./viewport/help");
var icons_1 = require("./controls/icons");
var LeftPanelControls = /** @class */ (function (_super) {
(0, tslib_1.__extends)(LeftPanelControls, _super);
function LeftPanelControls() {
var _a;
var _this = _super.apply(this, arguments) || this;
_this.state = { tab: _this.plugin.behaviors.layout.leftPanelTabName.value };
_this.set = function (tab) {
if (_this.state.tab === tab) {
_this.setState({ tab: 'none' }, function () { return _this.plugin.behaviors.layout.leftPanelTabName.next('none'); });
commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
return;
}
_this.setState({ tab: tab }, function () { return _this.plugin.behaviors.layout.leftPanelTabName.next(tab); });
if (_this.plugin.layout.state.regionState.left !== 'full') {
commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.plugin.layout.state.regionState), { left: 'full' }) } });
}
};
_this.tabs = {
'none': (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
'root': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.HomeOutlinedSvg, title: 'Home' }, void 0), (0, jsx_runtime_1.jsx)(actions_1.StateObjectActions, { state: _this.plugin.state.data, nodeRef: mol_state_1.StateTransform.RootRef, hideHeader: true, initiallyCollapsed: true, alwaysExpandFirst: true }, void 0), ((_a = _this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.remoteState) !== 'none' && (0, jsx_runtime_1.jsx)(snapshots_1.RemoteStateSnapshots, { listOnly: true }, void 0)] }, void 0),
'data': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.AccountTreeOutlinedSvg, title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RemoveAllButton, {}, void 0), " State Tree"] }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(tree_1.StateTree, { state: _this.plugin.state.data }, void 0)] }, void 0),
'states': (0, jsx_runtime_1.jsx)(snapshots_1.StateSnapshots, {}, void 0),
'settings': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.TuneSvg, title: 'Plugin Settings' }, void 0), (0, jsx_runtime_1.jsx)(FullSettings, {}, void 0)] }, void 0),
'help': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.HelpOutlineSvg, title: 'Help' }, void 0), (0, jsx_runtime_1.jsx)(help_1.HelpContent, {}, void 0)] }, void 0)
};
return _this;
}
LeftPanelControls.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, function (tab) {
if (_this.state.tab !== tab)
_this.setState({ tab: tab });
if (tab === 'none' && _this.plugin.layout.state.regionState.left !== 'collapsed') {
commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
}
});
this.subscribe(this.plugin.state.data.events.changed, function (_a) {
var state = _a.state;
if (_this.state.tab !== 'data')
return;
if (state.cells.size === 1)
_this.set('root');
});
};
LeftPanelControls.prototype.render = function () {
var _this = this;
var tab = this.state.tab;
return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-left-panel-controls' }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-left-panel-controls-buttons' }, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.HomeOutlinedSvg, toggleState: tab === 'root', transparent: true, onClick: function () { return _this.set('root'); }, title: 'Home' }, void 0), (0, jsx_runtime_1.jsx)(DataIcon, { set: this.set }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.SaveOutlinedSvg, toggleState: tab === 'states', transparent: true, onClick: function () { return _this.set('states'); }, title: 'Plugin State' }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.HelpOutlineSvg, toggleState: tab === 'help', transparent: true, onClick: function () { return _this.set('help'); }, title: 'Help' }, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-left-panel-controls-buttons-bottom' }, { children: (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.TuneSvg, toggleState: tab === 'settings', transparent: true, onClick: function () { return _this.set('settings'); }, title: 'Settings' }, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-scrollable-container' }, { children: this.tabs[tab] }), void 0)] }), void 0);
};
return LeftPanelControls;
}(base_1.PluginUIComponent));
exports.LeftPanelControls = LeftPanelControls;
var DataIcon = /** @class */ (function (_super) {
(0, tslib_1.__extends)(DataIcon, _super);
function DataIcon() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = { changed: false };
return _this;
}
Object.defineProperty(DataIcon.prototype, "tab", {
get: function () {
return this.plugin.behaviors.layout.leftPanelTabName.value;
},
enumerable: false,
configurable: true
});
DataIcon.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, function (tab) {
if (_this.tab === 'data')
_this.setState({ changed: false });
else
_this.forceUpdate();
});
this.subscribe(this.plugin.state.data.events.changed, function (state) {
if (_this.tab !== 'data')
_this.setState({ changed: true });
});
};
DataIcon.prototype.render = function () {
var _this = this;
return (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.AccountTreeOutlinedSvg, toggleState: this.tab === 'data', transparent: true, onClick: function () { return _this.props.set('data'); }, title: 'State Tree', style: { position: 'relative' }, extraContent: this.state.changed ? (0, jsx_runtime_1.jsx)("div", { className: 'msp-left-panel-controls-button-data-dirty' }, void 0) : void 0 }, void 0);
};
return DataIcon;
}(base_1.PluginUIComponent));
var FullSettings = /** @class */ (function (_super) {
(0, tslib_1.__extends)(FullSettings, _super);
function FullSettings() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.setSettings = function (p) {
var _a;
commands_1.PluginCommands.Canvas3D.SetSettings(_this.plugin, { settings: (_a = {}, _a[p.name] = p.value, _a) });
};
return _this;
}
FullSettings.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
this.subscribe(this.plugin.layout.events.updated, function () { return _this.forceUpdate(); });
this.subscribe(this.plugin.canvas3d.camera.stateChanged, function (state) {
if (state.radiusMax !== undefined || state.radius !== undefined) {
_this.forceUpdate();
}
});
};
FullSettings.prototype.render = function () {
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.plugin.canvas3d && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: 'Viewport' }, void 0), (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: canvas3d_1.Canvas3DParams, values: this.plugin.canvas3d.props, onChange: this.setSettings }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: 'Behavior' }, void 0), (0, jsx_runtime_1.jsx)(tree_1.StateTree, { state: this.plugin.state.behaviors }, void 0)] }, void 0);
};
return FullSettings;
}(base_1.PluginUIComponent));
var RemoveAllButton = /** @class */ (function (_super) {
(0, tslib_1.__extends)(RemoveAllButton, _super);
function RemoveAllButton() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.remove = function (e) {
e.preventDefault();
commands_1.PluginCommands.State.RemoveObject(_this.plugin, { state: _this.plugin.state.data, ref: mol_state_1.StateTransform.RootRef });
};
return _this;
}
RemoveAllButton.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.state.events.cell.created, function (e) {
if (e.cell.transform.parent === mol_state_1.StateTransform.RootRef)
_this.forceUpdate();
});
this.subscribe(this.plugin.state.events.cell.removed, function (e) {
if (e.parent === mol_state_1.StateTransform.RootRef)
_this.forceUpdate();
});
};
RemoveAllButton.prototype.render = function () {
var count = this.plugin.state.data.tree.children.get(mol_state_1.StateTransform.RootRef).size;
if (count === 0)
return null;
return (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, title: 'Remove All', style: { display: 'inline-block' }, small: true, className: 'msp-no-hover-outline', transparent: true }, void 0);
};
return RemoveAllButton;
}(base_1.PluginUIComponent));
//# sourceMappingURL=left-panel.js.map