molstar
Version:
A comprehensive macromolecular library.
202 lines • 12.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TransformControlBase = exports.StateTransformParameters = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var base_1 = require("../base");
var parameters_1 = require("../controls/parameters");
var param_definition_1 = require("../../mol-util/param-definition");
var rxjs_1 = require("rxjs");
var icons_1 = require("../controls/icons");
var common_1 = require("../controls/common");
var StateTransformParameters = /** @class */ (function (_super) {
(0, tslib_1.__extends)(StateTransformParameters, _super);
function StateTransformParameters() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.onChange = function (_a) {
var _b;
var name = _a.name, value = _a.value;
var params = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.props.params), (_b = {}, _b[name] = value, _b));
_this.props.events.onChange(params, _this.areInitial(params), _this.validate(params));
};
return _this;
}
StateTransformParameters.prototype.validate = function (params) {
// TODO
return void 0;
};
StateTransformParameters.prototype.areInitial = function (params) {
return param_definition_1.ParamDefinition.areEqual(this.props.info.params, params, this.props.info.initialValues);
};
StateTransformParameters.prototype.render = function () {
return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.props.info.params, values: this.props.params, onChange: this.onChange, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled }, void 0);
};
return StateTransformParameters;
}(base_1.PurePluginUIComponent));
exports.StateTransformParameters = StateTransformParameters;
(function (StateTransformParameters) {
function areParamsEmpty(params) {
var keys = Object.keys(params);
for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
var k = keys_1[_i];
if (!params[k].isHidden)
return false;
}
return true;
}
function infoFromAction(plugin, state, action, nodeRef) {
var source = state.cells.get(nodeRef).obj;
var params = action.definition.params ? action.definition.params(source, plugin) : {};
var initialValues = param_definition_1.ParamDefinition.getDefaultValues(params);
return {
initialValues: initialValues,
params: params,
isEmpty: areParamsEmpty(params)
};
}
StateTransformParameters.infoFromAction = infoFromAction;
function infoFromTransform(plugin, state, transform) {
var cell = state.cells.get(transform.ref);
// const source: StateObjectCell | undefined = (cell.sourceRef && state.cells.get(cell.sourceRef)!) || void 0;
// const create = transform.transformer.definition.params;
// const params = create ? create((source && source.obj) as any, plugin) : { };
var params = (cell.params && cell.params.definition) || {};
var initialValues = (cell.params && cell.params.values) || {};
return {
initialValues: initialValues,
params: params,
isEmpty: areParamsEmpty(params)
};
}
StateTransformParameters.infoFromTransform = infoFromTransform;
})(StateTransformParameters || (StateTransformParameters = {}));
exports.StateTransformParameters = StateTransformParameters;
var TransformControlBase = /** @class */ (function (_super) {
(0, tslib_1.__extends)(TransformControlBase, _super);
function TransformControlBase() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.busy = new rxjs_1.Subject();
_this.onEnter = function () {
if (_this.state.error)
return;
_this.apply();
};
_this.autoApplyHandle = void 0;
_this.events = {
onEnter: _this.onEnter,
onChange: function (params, isInitial, errors) {
_this.clearAutoApply();
_this.setState({ params: params, isInitial: isInitial, error: errors && errors[0] }, function () {
if (!isInitial && !_this.state.error && _this.canAutoApply(params)) {
_this.clearAutoApply();
_this.autoApplyHandle = setTimeout(_this.apply, 50);
}
});
}
};
_this.apply = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var _a;
var _b, _c;
return (0, tslib_1.__generator)(this, function (_d) {
switch (_d.label) {
case 0:
this.clearAutoApply();
this.setState({ busy: true });
_d.label = 1;
case 1:
_d.trys.push([1, 3, 4, 5]);
return [4 /*yield*/, this.applyAction()];
case 2:
_d.sent();
return [3 /*break*/, 5];
case 3:
_a = _d.sent();
return [3 /*break*/, 5];
case 4:
(_c = (_b = this.props).onApply) === null || _c === void 0 ? void 0 : _c.call(_b);
this.busy.next(false);
return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
}); };
_this.refresh = function () {
_this.setState({ params: _this.getInfo().initialValues, isInitial: true, error: void 0 });
};
_this.setDefault = function () {
var info = _this.getInfo();
var params = param_definition_1.ParamDefinition.getDefaultValues(info.params);
_this.setState({ params: params, isInitial: param_definition_1.ParamDefinition.areEqual(info.params, params, info.initialValues), error: void 0 });
};
_this.toggleExpanded = function () {
_this.setState({ isCollapsed: !_this.state.isCollapsed });
};
return _this;
}
TransformControlBase.prototype.clearAutoApply = function () {
if (this.autoApplyHandle !== void 0) {
clearTimeout(this.autoApplyHandle);
this.autoApplyHandle = void 0;
}
};
TransformControlBase.prototype.componentDidMount = function () {
var _this = this;
this.subscribe(this.plugin.behaviors.state.isBusy, function (b) {
if (_this.state.busy !== b)
_this.busy.next(b);
});
this.subscribe(this.busy, function (busy) {
if (_this.state.busy !== busy)
_this.setState({ busy: busy });
});
};
TransformControlBase.prototype.renderApply = function () {
var canApply = this.canApply();
if (this.props.autoHideApply && (!canApply || this.canAutoApply(this.state.params)))
return null;
return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-transform-apply-wrap' }, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.RefreshSvg, className: 'msp-transform-default-params', onClick: this.setDefault, disabled: this.state.busy, title: 'Set default params' }, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "msp-transform-apply-wider" }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: canApply ? icons_1.CheckSvg : void 0, className: "msp-btn-commit msp-btn-commit-" + (canApply ? 'on' : 'off'), onClick: this.apply, disabled: !canApply }, { children: this.props.applyLabel || this.applyText() }), void 0) }), void 0)] }), void 0);
};
TransformControlBase.prototype.renderDefault = function () {
var info = this.getInfo();
var isEmpty = info.isEmpty && this.isUpdate();
var display = this.getHeader();
var tId = this.getTransformerId();
var ParamEditor = this.plugin.customParamEditors.has(tId)
? this.plugin.customParamEditors.get(tId)
: StateTransformParameters;
var wrapClass = this.state.isCollapsed
? 'msp-transform-wrapper msp-transform-wrapper-collapsed'
: 'msp-transform-wrapper';
var params = null;
if (!isEmpty && !this.state.isCollapsed) {
var _a = this.getSourceAndTarget(), a = _a.a, b = _a.b, bCell = _a.bCell;
var applyControl = this.renderApply();
params = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ParamEditor, { info: info, a: a, b: b, bCell: bCell, events: this.events, params: this.state.params, isDisabled: this.state.busy }, void 0), applyControl] }, void 0);
}
var ctrl = (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: wrapClass, style: { marginBottom: this.props.noMargin ? 0 : void 0 } }, { children: [display !== 'none' && !this.props.wrapInExpander && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-transform-header' }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.toggleExpanded, title: display.description }, { children: [!isEmpty && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg }, void 0), display.name] }), void 0) }), void 0), params] }), void 0);
if (isEmpty || !this.props.wrapInExpander)
return ctrl;
return (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, (0, tslib_1.__assign)({ header: this.isUpdate() ? "Update " + (display === 'none' ? '' : display.name) : "Apply " + (display === 'none' ? '' : display.name), headerLeftMargin: this.props.expanderHeaderLeftMargin }, { children: ctrl }), void 0);
};
TransformControlBase.prototype.renderSimple = function () {
var _a, _b, _c;
var info = this.getInfo();
var canApply = this.canApply();
var apply = (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)({ icon: (_a = this.props.simpleApply) === null || _a === void 0 ? void 0 : _a.icon, title: (_b = this.props.simpleApply) === null || _b === void 0 ? void 0 : _b.title, disabled: this.state.busy || !canApply, onClick: this.apply, className: 'msp-btn-apply-simple' }, { children: (_c = this.props.simpleApply) === null || _c === void 0 ? void 0 : _c.header }), void 0), !info.isEmpty && (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleExpanded, isSelected: !this.state.isCollapsed, disabled: this.state.busy, style: { flex: '0 0 40px', padding: 0 } }, void 0)] }), void 0);
if (this.state.isCollapsed)
return apply;
var tId = this.getTransformerId();
var ParamEditor = this.plugin.customParamEditors.has(tId)
? this.plugin.customParamEditors.get(tId)
: StateTransformParameters;
var _d = this.getSourceAndTarget(), a = _d.a, b = _d.b, bCell = _d.bCell;
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [apply, (0, jsx_runtime_1.jsx)(ParamEditor, { info: info, a: a, b: b, bCell: bCell, events: this.events, params: this.state.params, isDisabled: this.state.busy }, void 0)] }, void 0);
};
TransformControlBase.prototype.render = function () {
// console.log('rendering', ((this.props as any)?.transform?.transformer || (this.props as any)?.action)?.definition.display.name, +new Date)
return this.props.simpleApply ? this.renderSimple() : this.renderDefault();
};
return TransformControlBase;
}(base_1.PurePluginUIComponent));
exports.TransformControlBase = TransformControlBase;
//# sourceMappingURL=common.js.map