molstar 3.0.1 → 3.0.2

package/lib/commonjs/mol-plugin-ui/controls/parameters.js

@@ -0,0 +1,1334 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScriptControl = exports.ConvertedControl = exports.ConditionedControl = exports.ObjectListControl = exports.MappedControl = exports.GroupControl = exports.MultiSelectControl = exports.FileListControl = exports.FileControl = exports.UrlControl = exports.Mat4Control = exports.Vec3Control = exports.OffsetColorListControl = exports.ColorListControl = exports.ColorControl = exports.BoundedIntervalControl = exports.IntervalControl = exports.ValueRefControl = exports.SelectControl = exports.PureSelectControl = exports.TextControl = exports.NumberRangeControl = exports.NumberInputControl = exports.LineGraphControl = exports.BoolControl = exports.SimpleParam = exports.ParamHelp = exports.ParameterMappingControl = exports.ParameterControls = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Copyright (c) 2018-2021 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 React = (0, tslib_1.__importStar)(require("react"));
+var linear_algebra_1 = require("../../mol-math/linear-algebra");
+var assets_1 = require("../../mol-util/assets");
+var color_1 = require("../../mol-util/color");
+var lists_1 = require("../../mol-util/color/lists");
+var memoize_1 = require("../../mol-util/memoize");
+var number_1 = require("../../mol-util/number");
+var param_definition_1 = require("../../mol-util/param-definition");
+var string_1 = require("../../mol-util/string");
+var base_1 = require("../base");
+var action_menu_1 = require("./action-menu");
+var color_2 = require("./color");
+var common_1 = require("./common");
+var icons_1 = require("./icons");
+var legend_1 = require("./legend");
+var line_graph_component_1 = require("./line-graph/line-graph-component");
+var slider_1 = require("./slider");
+var ParameterControls = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ParameterControls, _super);
+    function ParameterControls() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onChange = function (params) {
+            var _a;
+            var _b, _c;
+            (_c = (_b = _this.props).onChange) === null || _c === void 0 ? void 0 : _c.call(_b, params, _this.props.values);
+            if (_this.props.onChangeValues) {
+                var values = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.props.values), (_a = {}, _a[params.name] = params.value, _a));
+                _this.props.onChangeValues(values, _this.props.values);
+            }
+        };
+        _this.paramGroups = (0, memoize_1.memoizeLatest)(function (params) { return classifyParams(params); });
+        return _this;
+    }
+    ParameterControls.prototype.renderGroup = function (group) {
+        var _a;
+        if (group.length === 0)
+            return null;
+        var values = this.props.values;
+        var ctrls = null;
+        var category = void 0;
+        for (var _i = 0, group_1 = group; _i < group_1.length; _i++) {
+            var _b = group_1[_i], key = _b[0], p = _b[1], Control = _b[2];
+            if ((_a = p.hideIf) === null || _a === void 0 ? void 0 : _a.call(p, values))
+                continue;
+            if (!ctrls)
+                ctrls = [];
+            category = p.category;
+            ctrls.push((0, jsx_runtime_1.jsx)(Control, { param: p, onChange: this.onChange, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled, name: key, value: values[key] }, key));
+        }
+        if (!ctrls)
+            return null;
+        if (category) {
+            return [(0, jsx_runtime_1.jsx)(common_1.ExpandGroup, (0, tslib_1.__assign)({ header: category }, { children: ctrls }), category)];
+        }
+        return ctrls;
+    };
+    ParameterControls.prototype.renderPart = function (groups) {
+        var parts = null;
+        for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
+            var g = groups_1[_i];
+            var ctrls = this.renderGroup(g);
+            if (!ctrls)
+                continue;
+            if (!parts)
+                parts = [];
+            for (var _a = 0, ctrls_1 = ctrls; _a < ctrls_1.length; _a++) {
+                var c = ctrls_1[_a];
+                parts.push(c);
+            }
+        }
+        return parts;
+    };
+    ParameterControls.prototype.render = function () {
+        var groups = this.paramGroups(this.props.params);
+        var essentials = this.renderPart(groups.essentials);
+        var advanced = this.renderPart(groups.advanced);
+        if (essentials && advanced) {
+            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [essentials, (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, (0, tslib_1.__assign)({ header: 'Advanced Options' }, { children: advanced }), void 0)] }, void 0);
+        }
+        else if (essentials) {
+            return essentials;
+        }
+        else {
+            return advanced;
+        }
+    };
+    return ParameterControls;
+}(React.PureComponent));
+exports.ParameterControls = ParameterControls;
+var ParameterMappingControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ParameterMappingControl, _super);
+    function ParameterMappingControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.setSettings = function (p, old) {
+            var _a;
+            var values = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, old), (_a = {}, _a[p.name] = p.value, _a));
+            var t = _this.props.mapping.update(values, _this.plugin);
+            _this.props.mapping.apply(t, _this.plugin);
+        };
+        return _this;
+    }
+    ParameterMappingControl.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
+    };
+    ParameterMappingControl.prototype.render = function () {
+        var t = this.props.mapping.getTarget(this.plugin);
+        var values = this.props.mapping.getValues(t, this.plugin);
+        var params = this.props.mapping.params(this.plugin);
+        return (0, jsx_runtime_1.jsx)(ParameterControls, { params: params, values: values, onChange: this.setSettings }, void 0);
+    };
+    return ParameterMappingControl;
+}(base_1.PluginUIComponent));
+exports.ParameterMappingControl = ParameterMappingControl;
+function classifyParams(params) {
+    function addParam(k, p, group) {
+        var ctrl = controlFor(p);
+        if (!ctrl)
+            return;
+        if (!p.category)
+            group.params[0].push([k, p, ctrl]);
+        else {
+            if (!group.map)
+                group.map = new Map();
+            var c = group.map.get(p.category);
+            if (!c) {
+                c = [];
+                group.map.set(p.category, c);
+                group.params.push(c);
+            }
+            c.push([k, p, ctrl]);
+        }
+    }
+    function sortGroups(x, y) {
+        var a = x[0], b = y[0];
+        if (!a || !a[1].category)
+            return -1;
+        if (!b || !b[1].category)
+            return 1;
+        return a[1].category < b[1].category ? -1 : 1;
+    }
+    var keys = Object.keys(params);
+    var essentials = { params: [[]], map: void 0 };
+    var advanced = { params: [[]], map: void 0 };
+    for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+        var k = keys_1[_i];
+        var p = params[k];
+        if (p.isHidden)
+            continue;
+        if (p.isEssential)
+            addParam(k, p, essentials);
+        else
+            addParam(k, p, advanced);
+    }
+    essentials.params.sort(sortGroups);
+    advanced.params.sort(sortGroups);
+    return { essentials: essentials.params, advanced: advanced.params };
+}
+function controlFor(param) {
+    switch (param.type) {
+        case 'value': return void 0;
+        case 'boolean': return BoolControl;
+        case 'number': return typeof param.min !== 'undefined' && typeof param.max !== 'undefined'
+            ? NumberRangeControl : NumberInputControl;
+        case 'converted': return ConvertedControl;
+        case 'conditioned': return ConditionedControl;
+        case 'multi-select': return MultiSelectControl;
+        case 'color': return color_2.CombinedColorControl;
+        case 'color-list': return param.offsets ? OffsetColorListControl : ColorListControl;
+        case 'vec3': return Vec3Control;
+        case 'mat4': return Mat4Control;
+        case 'url': return UrlControl;
+        case 'file': return FileControl;
+        case 'file-list': return FileListControl;
+        case 'select': return SelectControl;
+        case 'value-ref': return ValueRefControl;
+        case 'data-ref': return void 0;
+        case 'text': return TextControl;
+        case 'interval': return typeof param.min !== 'undefined' && typeof param.max !== 'undefined'
+            ? BoundedIntervalControl : IntervalControl;
+        case 'group': return GroupControl;
+        case 'mapped': return MappedControl;
+        case 'line-graph': return LineGraphControl;
+        case 'script': return ScriptControl;
+        case 'object-list': return ObjectListControl;
+        default:
+            var _ = param;
+            console.warn("".concat(_, " has no associated UI component"));
+            return void 0;
+    }
+}
+var ParamHelp = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ParamHelp, _super);
+    function ParamHelp() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ParamHelp.prototype.render = function () {
+        var _a = this.props, legend = _a.legend, description = _a.description;
+        var Legend = legend && (0, legend_1.legendFor)(legend);
+        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-help-text' }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-help-description' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.HelpOutlineSvg, inline: true }, void 0), description] }), void 0), Legend && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-help-legend' }, { children: (0, jsx_runtime_1.jsx)(Legend, { legend: legend }, void 0) }), void 0)] }, void 0) }), void 0);
+    };
+    return ParamHelp;
+}(React.PureComponent));
+exports.ParamHelp = ParamHelp;
+function renderSimple(options) {
+    var props = options.props, state = options.state, control = options.control, toggleHelp = options.toggleHelp, addOn = options.addOn;
+    var _className = [];
+    if (props.param.shortLabel)
+        _className.push('msp-control-label-short');
+    if (props.param.twoColumns)
+        _className.push('msp-control-col-2');
+    var className = _className.join(' ');
+    var label = props.param.label || (0, string_1.camelCaseToWords)(props.name);
+    var help = props.param.help
+        ? props.param.help(props.value)
+        : { description: props.param.description, legend: props.param.legend };
+    var hasHelp = help.description || help.legend;
+    var desc = label + (hasHelp ? '. Click for help.' : '');
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.ControlRow, { className: className, title: desc, label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, hasHelp &&
+                            (0, jsx_runtime_1.jsx)("button", (0, tslib_1.__assign)({ className: 'msp-help msp-btn-link msp-btn-icon msp-control-group-expander', onClick: toggleHelp, title: desc || "".concat(state.showHelp ? 'Hide' : 'Show', " help"), style: { background: 'transparent', textAlign: 'left', padding: '0' } }, { children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.HelpOutlineSvg }, void 0) }), void 0)] }, void 0), control: control }, void 0), hasHelp && state.showHelp && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(ParamHelp, { legend: help.legend, description: help.description }, void 0) }), void 0), addOn] }, void 0);
+}
+var SimpleParam = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(SimpleParam, _super);
+    function SimpleParam() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { showHelp: false };
+        _this.toggleHelp = function () { return _this.setState({ showHelp: !_this.state.showHelp }); };
+        return _this;
+    }
+    SimpleParam.prototype.update = function (value) {
+        this.props.onChange({ param: this.props.param, name: this.props.name, value: value });
+    };
+    SimpleParam.prototype.renderAddOn = function () { return null; };
+    SimpleParam.prototype.render = function () {
+        return renderSimple({
+            props: this.props,
+            state: this.state,
+            control: this.renderControl(),
+            toggleHelp: this.toggleHelp,
+            addOn: this.renderAddOn()
+        });
+    };
+    return SimpleParam;
+}(React.PureComponent));
+exports.SimpleParam = SimpleParam;
+var BoolControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(BoolControl, _super);
+    function BoolControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onClick = function (e) { _this.update(!_this.props.value); e.currentTarget.blur(); };
+        return _this;
+    }
+    BoolControl.prototype.renderControl = function () {
+        return (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ onClick: this.onClick, disabled: this.props.isDisabled }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.props.value ? icons_1.CheckSvg : icons_1.ClearSvg }, void 0), this.props.value ? 'On' : 'Off'] }), void 0);
+    };
+    return BoolControl;
+}(SimpleParam));
+exports.BoolControl = BoolControl;
+var LineGraphControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(LineGraphControl, _super);
+    function LineGraphControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            isExpanded: false,
+            isOverPoint: false,
+            message: "".concat(_this.props.param.defaultValue.length, " points"),
+        };
+        _this.onHover = function (point) {
+            _this.setState({ isOverPoint: !_this.state.isOverPoint });
+            if (point) {
+                _this.setState({ message: "(".concat(point[0].toFixed(2), ", ").concat(point[1].toFixed(2), ")") });
+                return;
+            }
+            _this.setState({ message: "".concat(_this.props.value.length, " points") });
+        };
+        _this.onDrag = function (point) {
+            _this.setState({ message: "(".concat(point[0].toFixed(2), ", ").concat(point[1].toFixed(2), ")") });
+        };
+        _this.onChange = function (value) {
+            _this.props.onChange({ name: _this.props.name, param: _this.props.param, value: value });
+        };
+        _this.toggleExpanded = function (e) {
+            _this.setState({ isExpanded: !_this.state.isExpanded });
+            e.currentTarget.blur();
+        };
+        return _this;
+    }
+    LineGraphControl.prototype.render = function () {
+        var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.ControlRow, { label: label, control: (0, jsx_runtime_1.jsx)("button", (0, tslib_1.__assign)({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: "".concat(this.state.message) }), void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset', style: { display: this.state.isExpanded ? 'block' : 'none' } }, { children: (0, jsx_runtime_1.jsx)(line_graph_component_1.LineGraphComponent, { data: this.props.param.defaultValue, onChange: this.onChange, onHover: this.onHover, onDrag: this.onDrag }, void 0) }), void 0)] }, void 0);
+    };
+    return LineGraphControl;
+}(React.PureComponent));
+exports.LineGraphControl = LineGraphControl;
+var NumberInputControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(NumberInputControl, _super);
+    function NumberInputControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { value: '0' };
+        _this.update = function (value) {
+            var p = (0, number_1.getPrecision)(_this.props.param.step || 0.01);
+            value = parseFloat(value.toFixed(p));
+            _this.props.onChange({ param: _this.props.param, name: _this.props.name, value: value });
+        };
+        return _this;
+    }
+    NumberInputControl.prototype.render = function () {
+        var placeholder = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        var p = (0, number_1.getPrecision)(this.props.param.step || 0.01);
+        return (0, jsx_runtime_1.jsx)(common_1.ControlRow, { title: this.props.param.description, label: label, control: (0, jsx_runtime_1.jsx)(common_1.TextInput, { numeric: true, value: parseFloat(this.props.value.toFixed(p)), onEnter: this.props.onEnter, placeholder: placeholder, isDisabled: this.props.isDisabled, onChange: this.update }, void 0) }, void 0);
+    };
+    return NumberInputControl;
+}(React.PureComponent));
+exports.NumberInputControl = NumberInputControl;
+var NumberRangeControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(NumberRangeControl, _super);
+    function NumberRangeControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onChange = function (v) { _this.update(v); };
+        return _this;
+    }
+    NumberRangeControl.prototype.renderControl = function () {
+        var value = typeof this.props.value === 'undefined' ? this.props.param.defaultValue : this.props.value;
+        return (0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, min: this.props.param.min, max: this.props.param.max, step: this.props.param.step, onChange: this.onChange, onChangeImmediate: this.props.param.immediateUpdate ? this.onChange : void 0, disabled: this.props.isDisabled, onEnter: this.props.onEnter }, void 0);
+    };
+    return NumberRangeControl;
+}(SimpleParam));
+exports.NumberRangeControl = NumberRangeControl;
+var TextControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(TextControl, _super);
+    function TextControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onChange = function (e) {
+            var value = e.target.value;
+            if (value !== _this.props.value) {
+                _this.update(value);
+            }
+        };
+        _this.onKeyPress = function (e) {
+            if ((e.keyCode === 13 || e.charCode === 13 || e.key === 'Enter')) {
+                if (_this.props.onEnter)
+                    _this.props.onEnter();
+            }
+            e.stopPropagation();
+        };
+        return _this;
+    }
+    TextControl.prototype.renderControl = function () {
+        var placeholder = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        return (0, jsx_runtime_1.jsx)("input", { type: 'text', value: this.props.value || '', placeholder: placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter ? this.onKeyPress : void 0, disabled: this.props.isDisabled }, void 0);
+    };
+    return TextControl;
+}(SimpleParam));
+exports.TextControl = TextControl;
+var PureSelectControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(PureSelectControl, _super);
+    function PureSelectControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onChange = function (e) {
+            if (typeof _this.props.param.defaultValue === 'number') {
+                _this.update(parseInt(e.target.value, 10));
+            }
+            else {
+                _this.update(e.target.value);
+            }
+        };
+        return _this;
+    }
+    PureSelectControl.prototype.update = function (value) {
+        this.props.onChange({ param: this.props.param, name: this.props.name, value: value });
+    };
+    PureSelectControl.prototype.render = function () {
+        var _this = this;
+        var isInvalid = this.props.value !== void 0 && !this.props.param.options.some(function (e) { return e[0] === _this.props.value; });
+        return (0, jsx_runtime_1.jsxs)("select", (0, tslib_1.__assign)({ className: 'msp-form-control', title: this.props.title, value: this.props.value !== void 0 ? this.props.value : this.props.param.defaultValue, onChange: this.onChange, disabled: this.props.isDisabled }, { children: [isInvalid && (0, jsx_runtime_1.jsx)("option", (0, tslib_1.__assign)({ value: this.props.value }, { children: "[Invalid] ".concat(this.props.value) }), this.props.value), this.props.param.options.map(function (_a) {
+                    var value = _a[0], label = _a[1];
+                    return (0, jsx_runtime_1.jsx)("option", (0, tslib_1.__assign)({ value: value }, { children: label }), value);
+                })] }), void 0);
+    };
+    return PureSelectControl;
+}(React.PureComponent));
+exports.PureSelectControl = PureSelectControl;
+var SelectControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(SelectControl, _super);
+    function SelectControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { showHelp: false, showOptions: false };
+        _this.onSelect = function (item) {
+            if (!item || item.value === _this.props.value) {
+                _this.setState({ showOptions: false });
+            }
+            else {
+                _this.setState({ showOptions: false }, function () {
+                    _this.props.onChange({ param: _this.props.param, name: _this.props.name, value: item.value });
+                });
+            }
+        };
+        _this.toggle = function () { return _this.setState({ showOptions: !_this.state.showOptions }); };
+        _this.cycle = function () {
+            var options = _this.props.param.options;
+            var current = options.findIndex(function (o) { return o[0] === _this.props.value; });
+            var next = current === options.length - 1 ? 0 : current + 1;
+            _this.props.onChange({ param: _this.props.param, name: _this.props.name, value: options[next][0] });
+        };
+        _this.items = (0, memoize_1.memoizeLatest)(function (param) { return action_menu_1.ActionMenu.createItemsFromSelectOptions(param.options); });
+        _this.toggleHelp = function () { return _this.setState({ showHelp: !_this.state.showHelp }); };
+        return _this;
+    }
+    SelectControl.prototype.renderControl = function () {
+        var _a;
+        var items = this.items(this.props.param);
+        var current = this.props.value !== undefined ? action_menu_1.ActionMenu.findItem(items, this.props.value) : void 0;
+        var label = current
+            ? current.label
+            : typeof this.props.value === 'undefined'
+                ? "".concat(((_a = action_menu_1.ActionMenu.getFirstItem(items)) === null || _a === void 0 ? void 0 : _a.label) || '', " [Default]")
+                : "[Invalid] ".concat(this.props.value);
+        var toggle = this.props.param.cycle ? this.cycle : this.toggle;
+        var textAlign = this.props.param.cycle ? 'center' : 'left';
+        var icon = this.props.param.cycle
+            ? (this.props.value === 'on' ? icons_1.CheckSvg
+                : this.props.value === 'off' ? icons_1.ClearSvg : void 0)
+            : void 0;
+        return (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { disabled: this.props.isDisabled, style: { textAlign: textAlign, overflow: 'hidden', textOverflow: 'ellipsis' }, label: label, title: label, icon: icon, toggle: toggle, isSelected: this.state.showOptions }, void 0);
+    };
+    SelectControl.prototype.renderAddOn = function () {
+        if (!this.state.showOptions)
+            return null;
+        var items = this.items(this.props.param);
+        var current = action_menu_1.ActionMenu.findItem(items, this.props.value);
+        return (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: items, current: current, onSelect: this.onSelect }, void 0);
+    };
+    SelectControl.prototype.render = function () {
+        return renderSimple({
+            props: this.props,
+            state: this.state,
+            control: this.renderControl(),
+            toggleHelp: this.toggleHelp,
+            addOn: this.renderAddOn()
+        });
+    };
+    return SelectControl;
+}(React.PureComponent));
+exports.SelectControl = SelectControl;
+var ValueRefControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ValueRefControl, _super);
+    function ValueRefControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { showHelp: false, showOptions: false };
+        _this.onSelect = function (item) {
+            if (!item || item.value === _this.props.value) {
+                _this.setState({ showOptions: false });
+            }
+            else {
+                _this.setState({ showOptions: false }, function () {
+                    _this.props.onChange({ param: _this.props.param, name: _this.props.name, value: { ref: item.value } });
+                });
+            }
+        };
+        _this.toggle = function () { return _this.setState({ showOptions: !_this.state.showOptions }); };
+        _this.items = (0, memoize_1.memoizeLatest)(function (param) { return action_menu_1.ActionMenu.createItemsFromSelectOptions(param.getOptions()); });
+        _this.toggleHelp = function () { return _this.setState({ showHelp: !_this.state.showHelp }); };
+        return _this;
+    }
+    ValueRefControl.prototype.renderControl = function () {
+        var _a;
+        var items = this.items(this.props.param);
+        var current = this.props.value.ref ? action_menu_1.ActionMenu.findItem(items, this.props.value.ref) : void 0;
+        var label = current
+            ? current.label
+            : "[Ref] ".concat((_a = this.props.value.ref) !== null && _a !== void 0 ? _a : '');
+        return (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { disabled: this.props.isDisabled, style: { textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis' }, label: label, title: label, toggle: this.toggle, isSelected: this.state.showOptions }, void 0);
+    };
+    ValueRefControl.prototype.renderAddOn = function () {
+        if (!this.state.showOptions)
+            return null;
+        var items = this.items(this.props.param);
+        var current = action_menu_1.ActionMenu.findItem(items, this.props.value.ref);
+        return (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: items, current: current, onSelect: this.onSelect }, void 0);
+    };
+    ValueRefControl.prototype.render = function () {
+        return renderSimple({
+            props: this.props,
+            state: this.state,
+            control: this.renderControl(),
+            toggleHelp: this.toggleHelp,
+            addOn: this.renderAddOn()
+        });
+    };
+    return ValueRefControl;
+}(React.PureComponent));
+exports.ValueRefControl = ValueRefControl;
+var IntervalControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(IntervalControl, _super);
+    function IntervalControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { isExpanded: false };
+        _this.components = {
+            0: param_definition_1.ParamDefinition.Numeric(0, { step: _this.props.param.step }, { label: 'Min' }),
+            1: param_definition_1.ParamDefinition.Numeric(0, { step: _this.props.param.step }, { label: 'Max' })
+        };
+        _this.componentChange = function (_a) {
+            var name = _a.name, value = _a.value;
+            var v = (0, tslib_1.__spreadArray)([], _this.props.value, true);
+            v[+name] = value;
+            _this.change(v);
+        };
+        _this.toggleExpanded = function (e) {
+            _this.setState({ isExpanded: !_this.state.isExpanded });
+            e.currentTarget.blur();
+        };
+        return _this;
+    }
+    IntervalControl.prototype.change = function (value) {
+        this.props.onChange({ name: this.props.name, param: this.props.param, value: value });
+    };
+    IntervalControl.prototype.render = function () {
+        var v = this.props.value;
+        var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        var p = (0, number_1.getPrecision)(this.props.param.step || 0.01);
+        var value = "[".concat(v[0].toFixed(p), ", ").concat(v[1].toFixed(p), "]");
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.ControlRow, { label: label, control: (0, jsx_runtime_1.jsx)("button", (0, tslib_1.__assign)({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: value }), void 0) }, void 0), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(ParameterControls, { params: this.components, values: v, onChange: this.componentChange, onEnter: this.props.onEnter }, void 0) }), void 0)] }, void 0);
+    };
+    return IntervalControl;
+}(React.PureComponent));
+exports.IntervalControl = IntervalControl;
+var BoundedIntervalControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(BoundedIntervalControl, _super);
+    function BoundedIntervalControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onChange = function (v) { _this.update(v); };
+        return _this;
+    }
+    BoundedIntervalControl.prototype.renderControl = function () {
+        return (0, jsx_runtime_1.jsx)(slider_1.Slider2, { value: this.props.value, min: this.props.param.min, max: this.props.param.max, step: this.props.param.step, onChange: this.onChange, disabled: this.props.isDisabled, onEnter: this.props.onEnter }, void 0);
+    };
+    return BoundedIntervalControl;
+}(SimpleParam));
+exports.BoundedIntervalControl = BoundedIntervalControl;
+var ColorControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ColorControl, _super);
+    function ColorControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onChange = function (e) {
+            _this.update((0, color_1.Color)(parseInt(e.target.value)));
+        };
+        return _this;
+    }
+    ColorControl.prototype.stripStyle = function () {
+        return {
+            background: color_1.Color.toStyle(this.props.value),
+            position: 'absolute',
+            bottom: '0',
+            height: '4px',
+            right: '0',
+            left: '0'
+        };
+    };
+    ColorControl.prototype.renderControl = function () {
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { position: 'relative' } }, { children: [(0, jsx_runtime_1.jsxs)("select", (0, tslib_1.__assign)({ value: this.props.value, onChange: this.onChange }, { children: [(0, color_2.ColorValueOption)(this.props.value), (0, color_2.ColorOptions)()] }), void 0), (0, jsx_runtime_1.jsx)("div", { style: this.stripStyle() }, void 0)] }), void 0);
+    };
+    return ColorControl;
+}(SimpleParam));
+exports.ColorControl = ColorControl;
+function colorEntryToStyle(e, includeOffset) {
+    if (includeOffset === void 0) { includeOffset = false; }
+    if (Array.isArray(e)) {
+        if (includeOffset)
+            return "".concat(color_1.Color.toStyle(e[0]), " ").concat((100 * e[1]).toFixed(2), "%");
+        return color_1.Color.toStyle(e[0]);
+    }
+    return color_1.Color.toStyle(e);
+}
+var colorGradientInterpolated = (0, memoize_1.memoize1)(function (colors) {
+    var styles = colors.map(function (c) { return colorEntryToStyle(c, true); });
+    return "linear-gradient(to right, ".concat(styles.join(', '), ")");
+});
+var colorGradientBanded = (0, memoize_1.memoize1)(function (colors) {
+    var n = colors.length;
+    var styles = ["".concat(colorEntryToStyle(colors[0]), " ").concat(100 * (1 / n), "%")];
+    // TODO: does this need to support offsets?
+    for (var i = 1, il = n - 1; i < il; ++i) {
+        styles.push("".concat(colorEntryToStyle(colors[i]), " ").concat(100 * (i / n), "%"), "".concat(colorEntryToStyle(colors[i]), " ").concat(100 * ((i + 1) / n), "%"));
+    }
+    styles.push("".concat(colorEntryToStyle(colors[n - 1]), " ").concat(100 * ((n - 1) / n), "%"));
+    return "linear-gradient(to right, ".concat(styles.join(', '), ")");
+});
+function colorStripStyle(list, right) {
+    if (right === void 0) { right = '0'; }
+    return {
+        background: colorGradient(list.colors, list.kind === 'set'),
+        position: 'absolute',
+        bottom: '0',
+        height: '4px',
+        right: right,
+        left: '0'
+    };
+}
+function colorGradient(colors, banded) {
+    return banded ? colorGradientBanded(colors) : colorGradientInterpolated(colors);
+}
+function createColorListHelpers() {
+    var addOn = function (l) {
+        var preset = (0, lists_1.getColorListFromName)(l[0]);
+        return (0, jsx_runtime_1.jsx)("div", { style: colorStripStyle({ kind: preset.type !== 'qualitative' ? 'interpolate' : 'set', colors: preset.list }) }, void 0);
+    };
+    return {
+        ColorPresets: {
+            all: action_menu_1.ActionMenu.createItemsFromSelectOptions(lists_1.ColorListOptions, { addOn: addOn }),
+            scale: action_menu_1.ActionMenu.createItemsFromSelectOptions(lists_1.ColorListOptionsScale, { addOn: addOn }),
+            set: action_menu_1.ActionMenu.createItemsFromSelectOptions(lists_1.ColorListOptionsSet, { addOn: addOn })
+        },
+        ColorsParam: param_definition_1.ParamDefinition.ObjectList({ color: param_definition_1.ParamDefinition.Color(0x0) }, function (_a) {
+            var color = _a.color;
+            return color_1.Color.toHexString(color).toUpperCase();
+        }),
+        OffsetColorsParam: param_definition_1.ParamDefinition.ObjectList({ color: param_definition_1.ParamDefinition.Color(0x0), offset: param_definition_1.ParamDefinition.Numeric(0, { min: 0, max: 1, step: 0.01 }) }, function (_a) {
+            var color = _a.color, offset = _a.offset;
+            return "".concat(color_1.Color.toHexString(color).toUpperCase(), " [").concat(offset.toFixed(2), "]");
+        }),
+        IsInterpolatedParam: param_definition_1.ParamDefinition.Boolean(false, { label: 'Interpolated' })
+    };
+}
+var _colorListHelpers;
+function ColorListHelpers() {
+    if (_colorListHelpers)
+        return _colorListHelpers;
+    _colorListHelpers = createColorListHelpers();
+    return _colorListHelpers;
+}
+var ColorListControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ColorListControl, _super);
+    function ColorListControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { showHelp: false, show: void 0 };
+        _this.toggleEdit = function () { return _this.setState({ show: _this.state.show === 'edit' ? void 0 : 'edit' }); };
+        _this.togglePresets = function () { return _this.setState({ show: _this.state.show === 'presets' ? void 0 : 'presets' }); };
+        _this.selectPreset = function (item) {
+            if (!item)
+                return;
+            _this.setState({ show: void 0 });
+            var preset = (0, lists_1.getColorListFromName)(item.value);
+            _this.update({ kind: preset.type !== 'qualitative' ? 'interpolate' : 'set', colors: preset.list });
+        };
+        _this.colorsChanged = function (_a) {
+            var value = _a.value;
+            _this.update({
+                kind: _this.props.value.kind,
+                colors: value.map(function (c) { return c.color; })
+            });
+        };
+        _this.isInterpolatedChanged = function (_a) {
+            var value = _a.value;
+            _this.update({ kind: value ? 'interpolate' : 'set', colors: _this.props.value.colors });
+        };
+        _this.toggleHelp = function () { return _this.setState({ showHelp: !_this.state.showHelp }); };
+        return _this;
+    }
+    ColorListControl.prototype.update = function (value) {
+        this.props.onChange({ param: this.props.param, name: this.props.name, value: value });
+    };
+    ColorListControl.prototype.renderControl = function () {
+        var value = this.props.value;
+        // TODO: fix the button right offset
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ onClick: this.toggleEdit, style: { position: 'relative', paddingRight: '33px' } }, { children: [value.colors.length === 1 ? '1 color' : "".concat(value.colors.length, " colors"), (0, jsx_runtime_1.jsx)("div", { style: colorStripStyle(value, '33px') }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.BookmarksOutlinedSvg, onClick: this.togglePresets, toggleState: this.state.show === 'presets', title: 'Color Presets', style: { padding: 0, position: 'absolute', right: 0, top: 0, width: '32px' } }, void 0)] }, void 0);
+    };
+    ColorListControl.prototype.renderColors = function () {
+        if (!this.state.show)
+            return null;
+        var _a = ColorListHelpers(), ColorPresets = _a.ColorPresets, ColorsParam = _a.ColorsParam, IsInterpolatedParam = _a.IsInterpolatedParam;
+        var preset = ColorPresets[this.props.param.presetKind];
+        if (this.state.show === 'presets')
+            return (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: preset, onSelect: this.selectPreset }, void 0);
+        var values = this.props.value.colors.map(function (color) { return ({ color: color }); });
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: [(0, jsx_runtime_1.jsx)(ObjectListControl, { name: 'colors', param: ColorsParam, value: values, onChange: this.colorsChanged, isDisabled: this.props.isDisabled, onEnter: this.props.onEnter }, void 0), (0, jsx_runtime_1.jsx)(BoolControl, { name: 'isInterpolated', param: IsInterpolatedParam, value: this.props.value.kind === 'interpolate', onChange: this.isInterpolatedChanged, isDisabled: this.props.isDisabled, onEnter: this.props.onEnter }, void 0)] }), void 0);
+    };
+    ColorListControl.prototype.render = function () {
+        return renderSimple({
+            props: this.props,
+            state: this.state,
+            control: this.renderControl(),
+            toggleHelp: this.toggleHelp,
+            addOn: this.renderColors()
+        });
+    };
+    return ColorListControl;
+}(React.PureComponent));
+exports.ColorListControl = ColorListControl;
+var OffsetColorListControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(OffsetColorListControl, _super);
+    function OffsetColorListControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { showHelp: false, show: void 0 };
+        _this.toggleEdit = function () { return _this.setState({ show: _this.state.show === 'edit' ? void 0 : 'edit' }); };
+        _this.togglePresets = function () { return _this.setState({ show: _this.state.show === 'presets' ? void 0 : 'presets' }); };
+        _this.selectPreset = function (item) {
+            if (!item)
+                return;
+            _this.setState({ show: void 0 });
+            var preset = (0, lists_1.getColorListFromName)(item.value);
+            _this.update({ kind: preset.type !== 'qualitative' ? 'interpolate' : 'set', colors: preset.list });
+        };
+        _this.colorsChanged = function (_a) {
+            var value = _a.value;
+            var colors = value.map(function (c) { return [c.color, c.offset]; });
+            colors.sort(function (a, b) { return a[1] - b[1]; });
+            _this.update({ kind: _this.props.value.kind, colors: colors });
+        };
+        _this.isInterpolatedChanged = function (_a) {
+            var value = _a.value;
+            _this.update({ kind: value ? 'interpolate' : 'set', colors: _this.props.value.colors });
+        };
+        _this.toggleHelp = function () { return _this.setState({ showHelp: !_this.state.showHelp }); };
+        return _this;
+    }
+    OffsetColorListControl.prototype.update = function (value) {
+        this.props.onChange({ param: this.props.param, name: this.props.name, value: value });
+    };
+    OffsetColorListControl.prototype.renderControl = function () {
+        var value = this.props.value;
+        // TODO: fix the button right offset
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ onClick: this.toggleEdit, style: { position: 'relative', paddingRight: '33px' } }, { children: [value.colors.length === 1 ? '1 color' : "".concat(value.colors.length, " colors"), (0, jsx_runtime_1.jsx)("div", { style: colorStripStyle(value, '33px') }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.BookmarksOutlinedSvg, onClick: this.togglePresets, toggleState: this.state.show === 'presets', title: 'Color Presets', style: { padding: 0, position: 'absolute', right: 0, top: 0, width: '32px' } }, void 0)] }, void 0);
+    };
+    OffsetColorListControl.prototype.renderColors = function () {
+        if (!this.state.show)
+            return null;
+        var _a = ColorListHelpers(), ColorPresets = _a.ColorPresets, OffsetColorsParam = _a.OffsetColorsParam, IsInterpolatedParam = _a.IsInterpolatedParam;
+        var preset = ColorPresets[this.props.param.presetKind];
+        if (this.state.show === 'presets')
+            return (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: preset, onSelect: this.selectPreset }, void 0);
+        var colors = this.props.value.colors;
+        var values = colors.map(function (color, i) {
+            if (Array.isArray(color))
+                return { color: color[0], offset: color[1] };
+            return { color: color, offset: i / colors.length };
+        });
+        values.sort(function (a, b) { return a.offset - b.offset; });
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: [(0, jsx_runtime_1.jsx)(ObjectListControl, { name: 'colors', param: OffsetColorsParam, value: values, onChange: this.colorsChanged, isDisabled: this.props.isDisabled, onEnter: this.props.onEnter }, void 0), (0, jsx_runtime_1.jsx)(BoolControl, { name: 'isInterpolated', param: IsInterpolatedParam, value: this.props.value.kind === 'interpolate', onChange: this.isInterpolatedChanged, isDisabled: this.props.isDisabled, onEnter: this.props.onEnter }, void 0)] }), void 0);
+    };
+    OffsetColorListControl.prototype.render = function () {
+        return renderSimple({
+            props: this.props,
+            state: this.state,
+            control: this.renderControl(),
+            toggleHelp: this.toggleHelp,
+            addOn: this.renderColors()
+        });
+    };
+    return OffsetColorListControl;
+}(React.PureComponent));
+exports.OffsetColorListControl = OffsetColorListControl;
+var Vec3Control = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(Vec3Control, _super);
+    function Vec3Control() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { isExpanded: false };
+        _this.components = {
+            0: param_definition_1.ParamDefinition.Numeric(0, { step: _this.props.param.step }, { label: (_this.props.param.fieldLabels && _this.props.param.fieldLabels.x) || 'X' }),
+            1: param_definition_1.ParamDefinition.Numeric(0, { step: _this.props.param.step }, { label: (_this.props.param.fieldLabels && _this.props.param.fieldLabels.y) || 'Y' }),
+            2: param_definition_1.ParamDefinition.Numeric(0, { step: _this.props.param.step }, { label: (_this.props.param.fieldLabels && _this.props.param.fieldLabels.z) || 'Z' })
+        };
+        _this.componentChange = function (_a) {
+            var name = _a.name, value = _a.value;
+            var v = linear_algebra_1.Vec3.copy(linear_algebra_1.Vec3.zero(), _this.props.value);
+            v[+name] = value;
+            _this.change(v);
+        };
+        _this.toggleExpanded = function (e) {
+            _this.setState({ isExpanded: !_this.state.isExpanded });
+            e.currentTarget.blur();
+        };
+        return _this;
+    }
+    Vec3Control.prototype.change = function (value) {
+        this.props.onChange({ name: this.props.name, param: this.props.param, value: value });
+    };
+    Vec3Control.prototype.render = function () {
+        var v = this.props.value;
+        var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        var p = (0, number_1.getPrecision)(this.props.param.step || 0.01);
+        var value = "[".concat(v[0].toFixed(p), ", ").concat(v[1].toFixed(p), ", ").concat(v[2].toFixed(p), "]");
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.ControlRow, { label: label, control: (0, jsx_runtime_1.jsx)("button", (0, tslib_1.__assign)({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: value }), void 0) }, void 0), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(ParameterControls, { params: this.components, values: v, onChange: this.componentChange, onEnter: this.props.onEnter }, void 0) }), void 0)] }, void 0);
+    };
+    return Vec3Control;
+}(React.PureComponent));
+exports.Vec3Control = Vec3Control;
+var Mat4Control = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(Mat4Control, _super);
+    function Mat4Control() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { isExpanded: false };
+        _this.components = {
+            json: param_definition_1.ParamDefinition.Text(JSON.stringify((0, linear_algebra_1.Mat4)()), { description: 'JSON array with 4x4 matrix in a column major (j * 4 + i indexing) format' })
+        };
+        _this.componentChange = function (_a) {
+            var name = _a.name, value = _a.value;
+            var v = linear_algebra_1.Mat4.copy((0, linear_algebra_1.Mat4)(), _this.props.value);
+            if (name === 'json') {
+                linear_algebra_1.Mat4.copy(v, JSON.parse(value));
+            }
+            else {
+                v[+name] = value;
+            }
+            _this.change(v);
+        };
+        _this.toggleExpanded = function (e) {
+            _this.setState({ isExpanded: !_this.state.isExpanded });
+            e.currentTarget.blur();
+        };
+        return _this;
+    }
+    Mat4Control.prototype.change = function (value) {
+        this.props.onChange({ name: this.props.name, param: this.props.param, value: value });
+    };
+    Mat4Control.prototype.changeValue = function (idx) {
+        var _this = this;
+        return function (v) {
+            var m = linear_algebra_1.Mat4.copy((0, linear_algebra_1.Mat4)(), _this.props.value);
+            m[idx] = v;
+            _this.change(m);
+        };
+    };
+    Object.defineProperty(Mat4Control.prototype, "grid", {
+        get: function () {
+            var v = this.props.value;
+            var rows = [];
+            for (var i = 0; i < 4; i++) {
+                var row = [];
+                for (var j = 0; j < 4; j++) {
+                    row.push((0, jsx_runtime_1.jsx)(common_1.TextInput, { numeric: true, delayMs: 50, value: linear_algebra_1.Mat4.getValue(v, i, j), onChange: this.changeValue(4 * j + i), className: 'msp-form-control', blurOnEnter: true, isDisabled: this.props.isDisabled }, j));
+                }
+                rows.push((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: row }), i));
+            }
+            return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-parameter-matrix' }, { children: rows }), void 0);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Mat4Control.prototype.render = function () {
+        var v = {
+            json: JSON.stringify(this.props.value)
+        };
+        var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.ControlRow, { label: label, control: (0, jsx_runtime_1.jsx)("button", (0, tslib_1.__assign)({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: '4\u00D74 Matrix' }), void 0) }, void 0), this.state.isExpanded && (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: [this.grid, (0, jsx_runtime_1.jsx)(ParameterControls, { params: this.components, values: v, onChange: this.componentChange, onEnter: this.props.onEnter }, void 0)] }), void 0)] }, void 0);
+    };
+    return Mat4Control;
+}(React.PureComponent));
+exports.Mat4Control = Mat4Control;
+var UrlControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(UrlControl, _super);
+    function UrlControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onChange = function (e) {
+            var value = e.target.value;
+            if (value !== assets_1.Asset.getUrl(_this.props.value || '')) {
+                _this.update(assets_1.Asset.Url(value));
+            }
+        };
+        _this.onKeyPress = function (e) {
+            if ((e.keyCode === 13 || e.charCode === 13 || e.key === 'Enter')) {
+                if (_this.props.onEnter)
+                    _this.props.onEnter();
+            }
+            e.stopPropagation();
+        };
+        return _this;
+    }
+    UrlControl.prototype.renderControl = function () {
+        var placeholder = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        return (0, jsx_runtime_1.jsx)("input", { type: 'text', value: assets_1.Asset.getUrl(this.props.value || ''), placeholder: placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter ? this.onKeyPress : void 0, disabled: this.props.isDisabled }, void 0);
+    };
+    return UrlControl;
+}(SimpleParam));
+exports.UrlControl = UrlControl;
+var FileControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(FileControl, _super);
+    function FileControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { showHelp: false };
+        _this.onChangeFile = function (e) {
+            _this.change(e.target.files[0]);
+        };
+        _this.toggleHelp = function () { return _this.setState({ showHelp: !_this.state.showHelp }); };
+        return _this;
+    }
+    FileControl.prototype.change = function (value) {
+        this.props.onChange({ name: this.props.name, param: this.props.param, value: assets_1.Asset.File(value) });
+    };
+    FileControl.prototype.renderControl = function () {
+        var value = this.props.value;
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file', style: { marginTop: '1px' } }, { children: [value ? value.name : 'Select a file...', " ", (0, jsx_runtime_1.jsx)("input", { disabled: this.props.isDisabled, onChange: this.onChangeFile, type: 'file', multiple: false, accept: this.props.param.accept }, void 0)] }), void 0);
+    };
+    FileControl.prototype.render = function () {
+        if (this.props.param.label) {
+            return renderSimple({
+                props: this.props,
+                state: this.state,
+                control: this.renderControl(),
+                toggleHelp: this.toggleHelp,
+                addOn: null
+            });
+        }
+        else {
+            return this.renderControl();
+        }
+    };
+    return FileControl;
+}(React.PureComponent));
+exports.FileControl = FileControl;
+var FileListControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(FileListControl, _super);
+    function FileListControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { showHelp: false };
+        _this.onChangeFileList = function (e) {
+            _this.change(e.target.files);
+        };
+        _this.toggleHelp = function () { return _this.setState({ showHelp: !_this.state.showHelp }); };
+        return _this;
+    }
+    FileListControl.prototype.change = function (value) {
+        var files = [];
+        if (value) {
+            for (var i = 0, il = value.length; i < il; ++i) {
+                files.push(assets_1.Asset.File(value[i]));
+            }
+        }
+        this.props.onChange({ name: this.props.name, param: this.props.param, value: files });
+    };
+    FileListControl.prototype.renderControl = function () {
+        var value = this.props.value;
+        var names = [];
+        if (value) {
+            for (var _i = 0, value_1 = value; _i < value_1.length; _i++) {
+                var file = value_1[_i];
+                names.push(file.name);
+            }
+        }
+        var label = names.length === 0
+            ? 'Select files...' : names.length === 1
+            ? names[0] : "".concat(names.length, " files selected");
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file', style: { marginTop: '1px' } }, { children: [label, " ", (0, jsx_runtime_1.jsx)("input", { disabled: this.props.isDisabled, onChange: this.onChangeFileList, type: 'file', multiple: true, accept: this.props.param.accept }, void 0)] }), void 0);
+    };
+    FileListControl.prototype.render = function () {
+        if (this.props.param.label) {
+            return renderSimple({
+                props: this.props,
+                state: this.state,
+                control: this.renderControl(),
+                toggleHelp: this.toggleHelp,
+                addOn: null
+            });
+        }
+        else {
+            return this.renderControl();
+        }
+    };
+    return FileListControl;
+}(React.PureComponent));
+exports.FileListControl = FileListControl;
+var MultiSelectControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(MultiSelectControl, _super);
+    function MultiSelectControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { isExpanded: false };
+        _this.toggleExpanded = function (e) {
+            _this.setState({ isExpanded: !_this.state.isExpanded });
+            e.currentTarget.blur();
+        };
+        return _this;
+    }
+    MultiSelectControl.prototype.change = function (value) {
+        this.props.onChange({ name: this.props.name, param: this.props.param, value: value });
+    };
+    MultiSelectControl.prototype.toggle = function (key) {
+        var _this = this;
+        return function (e) {
+            if (_this.props.value.indexOf(key) < 0)
+                _this.change(_this.props.value.concat(key));
+            else
+                _this.change(_this.props.value.filter(function (v) { return v !== key; }));
+            e.currentTarget.blur();
+        };
+    };
+    MultiSelectControl.prototype.render = function () {
+        var _this = this;
+        var current = this.props.value;
+        var emptyLabel = this.props.param.emptyValue;
+        var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.ControlRow, { label: label, control: (0, jsx_runtime_1.jsx)("button", (0, tslib_1.__assign)({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: current.length === 0 && emptyLabel ? emptyLabel : "".concat(current.length, " of ").concat(this.props.param.options.length) }), void 0) }, void 0), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: this.props.param.options.map(function (_a) {
+                        var value = _a[0], label = _a[1];
+                        var sel = current.indexOf(value) >= 0;
+                        return (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: _this.toggle(value), disabled: _this.props.isDisabled, style: { marginTop: '1px' } }, { children: (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ style: { float: sel ? 'left' : 'right' } }, { children: sel ? "\u2713 ".concat(label) : "".concat(label, " \u2717") }), void 0) }), value);
+                    }) }), void 0)] }, void 0);
+    };
+    return MultiSelectControl;
+}(React.PureComponent));
+exports.MultiSelectControl = MultiSelectControl;
+var GroupControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(GroupControl, _super);
+    function GroupControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { isExpanded: !!_this.props.param.isExpanded, showPresets: false, showHelp: false };
+        _this.onChangeParam = function (e) {
+            var _a;
+            _this.change((0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.props.value), (_a = {}, _a[e.name] = e.value, _a)));
+        };
+        _this.toggleExpanded = function () { return _this.setState({ isExpanded: !_this.state.isExpanded }); };
+        _this.toggleShowPresets = function () { return _this.setState({ showPresets: !_this.state.showPresets }); };
+        _this.presetItems = (0, memoize_1.memoizeLatest)(function (param) { var _a; return action_menu_1.ActionMenu.createItemsFromSelectOptions((_a = param.presets) !== null && _a !== void 0 ? _a : []); });
+        _this.onSelectPreset = function (item) {
+            _this.setState({ showPresets: false });
+            _this.change(item === null || item === void 0 ? void 0 : item.value);
+        };
+        return _this;
+    }
+    GroupControl.prototype.change = function (value) {
+        this.props.onChange({ name: this.props.name, param: this.props.param, value: value });
+    };
+    GroupControl.prototype.pivotedPresets = function () {
+        if (!this.props.param.presets)
+            return null;
+        var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-wrapper' }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleShowPresets }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BookmarksOutlinedSvg }, void 0), label, " Presets"] }), void 0) }), void 0), this.state.showPresets && (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.presetItems(this.props.param), onSelect: this.onSelectPreset }, void 0)] }), void 0);
+    };
+    GroupControl.prototype.presets = function () {
+        if (!this.props.param.presets)
+            return null;
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-presets-wrapper' }, { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleShowPresets }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BookmarksOutlinedSvg }, void 0), "Presets"] }), void 0) }), void 0) }), void 0), this.state.showPresets && (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.presetItems(this.props.param), onSelect: this.onSelectPreset }, void 0)] }, void 0);
+    };
+    GroupControl.prototype.pivoted = function () {
+        var key = this.props.param.pivot;
+        var params = this.props.param.params;
+        var pivot = params[key];
+        var Control = controlFor(pivot);
+        var ctrl = (0, jsx_runtime_1.jsx)(Control, { name: key, param: pivot, value: this.props.value[key], onChange: this.onChangeParam, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled }, void 0);
+        if (!this.state.isExpanded) {
+            return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-mapped-parameter-group' }, { children: [ctrl, (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, onClick: this.toggleExpanded, toggleState: this.state.isExpanded, title: "More Options" }, void 0)] }), void 0);
+        }
+        var filtered = Object.create(null);
+        for (var _i = 0, _a = Object.keys(params); _i < _a.length; _i++) {
+            var k = _a[_i];
+            if (k !== key)
+                filtered[k] = params[k];
+        }
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-mapped-parameter-group' }, { children: [ctrl, (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, onClick: this.toggleExpanded, toggleState: this.state.isExpanded, title: "More Options" }, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: [this.pivotedPresets(), (0, jsx_runtime_1.jsx)(ParameterControls, { params: filtered, onEnter: this.props.onEnter, values: this.props.value, onChange: this.onChangeParam, isDisabled: this.props.isDisabled }, void 0)] }), void 0)] }), void 0);
+    };
+    GroupControl.prototype.render = function () {
+        var params = this.props.param.params;
+        // Do not show if there are no params.
+        if (Object.keys(params).length === 0)
+            return null;
+        if (this.props.param.pivot)
+            return this.pivoted();
+        var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        var controls = (0, jsx_runtime_1.jsx)(ParameterControls, { params: params, onChange: this.onChangeParam, values: this.props.value, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled }, void 0);
+        if (this.props.inMapped) {
+            return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: controls }), void 0);
+        }
+        if (this.props.param.isFlat) {
+            return controls;
+        }
+        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-wrapper', style: { position: 'relative' } }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header' }, { children: (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleExpanded }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.ArrowDropDownSvg : icons_1.ArrowRightSvg }, void 0), label] }), void 0) }), void 0), this.presets(), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: controls }), void 0)] }), void 0);
+    };
+    return GroupControl;
+}(React.PureComponent));
+exports.GroupControl = GroupControl;
+var MappedControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(MappedControl, _super);
+    function MappedControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { isExpanded: false };
+        // TODO: this could lead to a rare bug where the component is reused with different mapped control.
+        // I think there are currently no cases where this could happen in the UI, but still need to watch out..
+        _this.valuesCache = {};
+        _this.onChangeName = function (e) {
+            _this.change({ name: e.value, params: _this.getValues(e.value) });
+        };
+        _this.onChangeParam = function (e) {
+            _this.setValues(_this.props.value.name, e.value);
+            _this.change({ name: _this.props.value.name, params: e.value });
+        };
+        _this.toggleExpanded = function () { return _this.setState({ isExpanded: !_this.state.isExpanded }); };
+        return _this;
+    }
+    MappedControl.prototype.setValues = function (name, values) {
+        this.valuesCache[name] = values;
+    };
+    MappedControl.prototype.getValues = function (name) {
+        if (name in this.valuesCache) {
+            return this.valuesCache[name];
+        }
+        else {
+            return this.props.param.map(name).defaultValue;
+        }
+    };
+    MappedControl.prototype.change = function (value) {
+        this.props.onChange({ name: this.props.name, param: this.props.param, value: value });
+    };
+    MappedControl.prototype.areParamsEmpty = function (params) {
+        for (var _i = 0, _a = Object.keys(params); _i < _a.length; _i++) {
+            var k = _a[_i];
+            if (!params[k].isHidden)
+                return false;
+        }
+        return true;
+    };
+    MappedControl.prototype.render = function () {
+        var _this = this;
+        var value = this.props.value || this.props.param.defaultValue;
+        var param = this.props.param.map(value.name);
+        var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        var Mapped = controlFor(param);
+        var help = this.props.param.help;
+        var select = help
+            ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.props.param.select), { help: function (name) { return help({ name: name, params: _this.getValues(name) }); } }) : this.props.param.select;
+        var Select = (0, jsx_runtime_1.jsx)(SelectControl, { param: select, isDisabled: this.props.isDisabled, onChange: this.onChangeName, onEnter: this.props.onEnter, name: label, value: value.name }, void 0);
+        if (!Mapped) {
+            return Select;
+        }
+        if (param.type === 'group' && !param.isFlat) {
+            if (!this.areParamsEmpty(param.params)) {
+                return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-mapped-parameter-group' }, { children: [Select, (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, onClick: this.toggleExpanded, toggleState: this.state.isExpanded, title: "".concat(label, " Properties") }, void 0), this.state.isExpanded && (0, jsx_runtime_1.jsx)(GroupControl, { inMapped: true, param: param, value: value.params, name: value.name, onChange: this.onChangeParam, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled }, void 0)] }), void 0);
+            }
+            return Select;
+        }
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Select, (0, jsx_runtime_1.jsx)(Mapped, { param: param, value: value.params, name: value.name, onChange: this.onChangeParam, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled }, void 0)] }, void 0);
+    };
+    return MappedControl;
+}(React.PureComponent));
+exports.MappedControl = MappedControl;
+var ObjectListEditor = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ObjectListEditor, _super);
+    function ObjectListEditor() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { current: _this.props.value };
+        _this.onChangeParam = function (e) {
+            var _a;
+            _this.setState({ current: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.state.current), (_a = {}, _a[e.name] = e.value, _a)) });
+        };
+        _this.apply = function () {
+            _this.props.apply(_this.state.current);
+        };
+        return _this;
+    }
+    ObjectListEditor.prototype.componentDidUpdate = function (prevProps) {
+        if (this.props.params !== prevProps.params || this.props.value !== prevProps.value) {
+            this.setState({ current: this.props.value });
+        }
+    };
+    ObjectListEditor.prototype.render = function () {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ParameterControls, { params: this.props.params, onChange: this.onChangeParam, values: this.state.current, onEnter: this.apply, isDisabled: this.props.isDisabled }, void 0), (0, jsx_runtime_1.jsx)("button", (0, tslib_1.__assign)({ className: "msp-btn msp-btn-block msp-form-control msp-control-top-offset", onClick: this.apply, disabled: this.props.isDisabled }, { children: this.props.isUpdate ? 'Update' : 'Add' }), void 0)] }, void 0);
+    };
+    return ObjectListEditor;
+}(React.PureComponent));
+var ObjectListItem = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ObjectListItem, _super);
+    function ObjectListItem() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { isExpanded: false };
+        _this.update = function (v) {
+            // this.setState({ isExpanded: false }); // TODO auto update? mark changed state?
+            _this.props.actions.update(v, _this.props.index);
+        };
+        _this.moveUp = function () {
+            _this.props.actions.move(_this.props.index, -1);
+        };
+        _this.moveDown = function () {
+            _this.props.actions.move(_this.props.index, 1);
+        };
+        _this.remove = function () {
+            _this.setState({ isExpanded: false });
+            _this.props.actions.remove(_this.props.index);
+        };
+        _this.toggleExpanded = function (e) {
+            _this.setState({ isExpanded: !_this.state.isExpanded });
+            e.currentTarget.blur();
+        };
+        return _this;
+    }
+    ObjectListItem.prototype.render = function () {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-param-object-list-item' }, { children: [(0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: 'msp-btn msp-btn-block msp-form-control', onClick: this.toggleExpanded }, { children: [(0, jsx_runtime_1.jsx)("span", { children: "".concat(this.props.index + 1, ": ") }, void 0), this.props.param.getLabel(this.props.value)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowDownwardSvg, title: 'Move Up', onClick: this.moveUp, small: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowUpwardSvg, title: 'Move Down', onClick: this.moveDown, small: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, title: 'Remove', onClick: this.remove, small: true }, void 0)] }, void 0)] }), void 0), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(ObjectListEditor, { params: this.props.param.element, apply: this.update, value: this.props.value, isUpdate: true, isDisabled: this.props.isDisabled }, void 0) }), void 0)] }, void 0);
+    };
+    return ObjectListItem;
+}(React.PureComponent));
+var ObjectListControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ObjectListControl, _super);
+    function ObjectListControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { isExpanded: false };
+        _this.add = function (v) {
+            _this.change((0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], _this.props.value, true), [v], false));
+        };
+        _this.actions = {
+            update: function (v, i) {
+                var value = _this.props.value.slice(0);
+                value[i] = v;
+                _this.change(value);
+            },
+            move: function (i, dir) {
+                var xs = _this.props.value;
+                if (xs.length === 1)
+                    return;
+                var j = (i + dir) % xs.length;
+                if (j < 0)
+                    j += xs.length;
+                xs = xs.slice(0);
+                var t = xs[i];
+                xs[i] = xs[j];
+                xs[j] = t;
+                _this.change(xs);
+            },
+            remove: function (i) {
+                var xs = _this.props.value;
+                var update = [];
+                for (var j = 0; j < xs.length; j++) {
+                    if (i !== j)
+                        update.push(xs[j]);
+                }
+                _this.change(update);
+            }
+        };
+        _this.toggleExpanded = function (e) {
+            _this.setState({ isExpanded: !_this.state.isExpanded });
+            e.currentTarget.blur();
+        };
+        return _this;
+    }
+    ObjectListControl.prototype.change = function (value) {
+        this.props.onChange({ name: this.props.name, param: this.props.param, value: value });
+    };
+    ObjectListControl.prototype.render = function () {
+        var _this = this;
+        var v = this.props.value;
+        var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        var value = "".concat(v.length, " item").concat(v.length !== 1 ? 's' : '');
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.ControlRow, { label: label, control: (0, jsx_runtime_1.jsx)("button", (0, tslib_1.__assign)({ onClick: this.toggleExpanded, disabled: this.props.isDisabled }, { children: value }), void 0) }, void 0), this.state.isExpanded && (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: [this.props.value.map(function (v, i) { return (0, jsx_runtime_1.jsx)(ObjectListItem, { param: _this.props.param, value: v, index: i, actions: _this.actions, isDisabled: _this.props.isDisabled }, i); }), (0, jsx_runtime_1.jsx)(common_1.ControlGroup, (0, tslib_1.__assign)({ header: 'New Item' }, { children: (0, jsx_runtime_1.jsx)(ObjectListEditor, { params: this.props.param.element, apply: this.add, value: this.props.param.ctor(), isDisabled: this.props.isDisabled }, void 0) }), void 0)] }), void 0)] }, void 0);
+    };
+    return ObjectListControl;
+}(React.PureComponent));
+exports.ObjectListControl = ObjectListControl;
+var ConditionedControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ConditionedControl, _super);
+    function ConditionedControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onChangeCondition = function (e) {
+            _this.change(_this.props.param.conditionedValue(_this.props.value, e.value));
+        };
+        _this.onChangeParam = function (e) {
+            _this.change(e.value);
+        };
+        return _this;
+    }
+    ConditionedControl.prototype.change = function (value) {
+        this.props.onChange({ name: this.props.name, param: this.props.param, value: value });
+    };
+    ConditionedControl.prototype.render = function () {
+        var value = this.props.value;
+        var condition = this.props.param.conditionForValue(value);
+        var param = this.props.param.conditionParams[condition];
+        var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        var Conditioned = controlFor(param);
+        var select = (0, jsx_runtime_1.jsx)(SelectControl, { param: this.props.param.select, isDisabled: this.props.isDisabled, onChange: this.onChangeCondition, onEnter: this.props.onEnter, name: "".concat(label, " Kind"), value: condition }, void 0);
+        if (!Conditioned) {
+            return select;
+        }
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [select, (0, jsx_runtime_1.jsx)(Conditioned, { param: param, value: value, name: label, onChange: this.onChangeParam, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled }, void 0)] }, void 0);
+    };
+    return ConditionedControl;
+}(React.PureComponent));
+exports.ConditionedControl = ConditionedControl;
+var ConvertedControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ConvertedControl, _super);
+    function ConvertedControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onChange = function (e) {
+            _this.props.onChange({
+                name: _this.props.name,
+                param: _this.props.param,
+                value: _this.props.param.toValue(e.value)
+            });
+        };
+        return _this;
+    }
+    ConvertedControl.prototype.render = function () {
+        var value = this.props.param.fromValue(this.props.value);
+        var Converted = controlFor(this.props.param.converted);
+        if (!Converted)
+            return null;
+        return (0, jsx_runtime_1.jsx)(Converted, { param: this.props.param.converted, value: value, name: this.props.name, onChange: this.onChange, onEnter: this.props.onEnter, isDisabled: this.props.isDisabled }, void 0);
+    };
+    return ConvertedControl;
+}(React.PureComponent));
+exports.ConvertedControl = ConvertedControl;
+var ScriptControl = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ScriptControl, _super);
+    function ScriptControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.onChange = function (e) {
+            var value = e.target.value;
+            if (value !== _this.props.value.expression) {
+                _this.update({ language: _this.props.value.language, expression: value });
+            }
+        };
+        _this.onKeyPress = function (e) {
+            if ((e.keyCode === 13 || e.charCode === 13 || e.key === 'Enter')) {
+                if (_this.props.onEnter)
+                    _this.props.onEnter();
+            }
+            e.stopPropagation();
+        };
+        return _this;
+    }
+    ScriptControl.prototype.renderControl = function () {
+        // TODO: improve!
+        var placeholder = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
+        return (0, jsx_runtime_1.jsx)("input", { type: 'text', value: this.props.value.expression || '', placeholder: placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter ? this.onKeyPress : void 0, disabled: this.props.isDisabled }, void 0);
+    };
+    return ScriptControl;
+}(SimpleParam));
+exports.ScriptControl = ScriptControl;
+//# sourceMappingURL=parameters.js.map