molstar
Version:
A comprehensive macromolecular library.
100 lines • 7.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorValueOption = exports.ColorOptions = exports.CombinedColorControl = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
/**
* Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author David Sehnal <david.sehnal@gmail.com>
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
var color_1 = require("../../mol-util/color");
var string_1 = require("../../mol-util/string");
var React = (0, tslib_1.__importStar)(require("react"));
var common_1 = require("./common");
var swatches_1 = require("../../mol-util/color/swatches");
var CombinedColorControl = /** @class */ (function (_super) {
(0, tslib_1.__extends)(CombinedColorControl, _super);
function CombinedColorControl() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isExpanded: !!_this.props.param.isExpanded,
lightness: 0
};
_this.toggleExpanded = function (e) {
_this.setState({ isExpanded: !_this.state.isExpanded });
e.currentTarget.blur();
};
_this.onClickSwatch = function (e) {
var value = (0, color_1.Color)(+(e.currentTarget.getAttribute('data-color') || '0'));
if (value !== _this.props.value) {
if (!_this.props.param.isExpanded)
_this.setState({ isExpanded: false });
_this.update(value);
}
};
_this.onR = function (v) {
var _a = color_1.Color.toRgb(_this.props.value), g = _a[1], b = _a[2];
var value = color_1.Color.fromRgb(v, g, b);
if (value !== _this.props.value)
_this.update(value);
};
_this.onG = function (v) {
var _a = color_1.Color.toRgb(_this.props.value), r = _a[0], b = _a[2];
var value = color_1.Color.fromRgb(r, v, b);
if (value !== _this.props.value)
_this.update(value);
};
_this.onB = function (v) {
var _a = color_1.Color.toRgb(_this.props.value), r = _a[0], g = _a[1];
var value = color_1.Color.fromRgb(r, g, v);
if (value !== _this.props.value)
_this.update(value);
};
_this.onLighten = function () {
_this.update(color_1.Color.lighten(_this.props.value, 0.1));
};
_this.onDarken = function () {
_this.update(color_1.Color.darken(_this.props.value, 0.1));
};
return _this;
}
CombinedColorControl.prototype.update = function (value) {
this.props.onChange({ param: this.props.param, name: this.props.name, value: value });
};
CombinedColorControl.prototype.swatch = function () {
var _this = this;
return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-combined-color-swatch' }, { children: swatches_1.DefaultColorSwatch.map(function (c) { return (0, jsx_runtime_1.jsx)(common_1.Button, { inline: true, "data-color": c[1], onClick: _this.onClickSwatch, style: { background: color_1.Color.toStyle(c[1]) } }, c[1]); }) }), void 0);
};
CombinedColorControl.prototype.render = function () {
var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
var _a = color_1.Color.toRgb(this.props.value), r = _a[0], g = _a[1], b = _a[2];
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.ControlRow, { title: this.props.param.description, label: label, control: (0, jsx_runtime_1.jsx)(common_1.Button, { onClick: this.toggleExpanded, inline: true, className: 'msp-combined-color-button', style: { background: color_1.Color.toStyle(this.props.value) } }, void 0) }, void 0), this.state.isExpanded && (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: [this.swatch(), (0, jsx_runtime_1.jsx)(common_1.ControlRow, { label: 'RGB', className: 'msp-control-label-short', control: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { display: 'flex', textAlignLast: 'center', left: '80px' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.TextInput, { onChange: this.onR, numeric: true, value: r, delayMs: 250, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.TextInput, { onChange: this.onG, numeric: true, value: g, delayMs: 250, style: { order: 2, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.TextInput, { onChange: this.onB, numeric: true, value: b, delayMs: 250, style: { order: 3, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true }, void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { display: 'flex', textAlignLast: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.onLighten, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control' }, { children: "Lighten" }), void 0), (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.onDarken, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control' }, { children: "Darken" }), void 0)] }), void 0)] }), void 0)] }, void 0);
};
return CombinedColorControl;
}(React.PureComponent));
exports.CombinedColorControl = CombinedColorControl;
var _colors = void 0;
function ColorOptions() {
if (_colors)
return _colors;
_colors = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: swatches_1.DefaultColorSwatch.map(function (v) {
return (0, jsx_runtime_1.jsx)("option", (0, tslib_1.__assign)({ value: v[1], style: { background: "" + color_1.Color.toStyle(v[1]) } }, { children: (0, string_1.stringToWords)(v[0]) }), v[1]);
}) }, void 0);
return _colors;
}
exports.ColorOptions = ColorOptions;
var DefaultColorSwatchMap = (function () {
var map = new Map();
for (var _i = 0, DefaultColorSwatch_1 = swatches_1.DefaultColorSwatch; _i < DefaultColorSwatch_1.length; _i++) {
var v = DefaultColorSwatch_1[_i];
map.set(v[1], v[0]);
}
return map;
})();
function ColorValueOption(color) {
return !DefaultColorSwatchMap.has(color) ? (0, jsx_runtime_1.jsx)("option", (0, tslib_1.__assign)({ value: color, style: { background: "" + color_1.Color.toStyle(color) } }, { children: color_1.Color.toRgbString(color) }), color_1.Color.toHexString(color)) : null;
}
exports.ColorValueOption = ColorValueOption;
//# sourceMappingURL=color.js.map