molstar 3.0.0 → 3.0.1

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

@@ -1,1334 +0,0 @@
-"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