Panel = { function init(descriptors) { var div = html`

`; var reservedKeys = []; var factories = {}; for (var k in div) reservedKeys.push(k); const safeName = (x)=>reservedKeys.indexOf(x) < 0 ? x : "_"+x; function normalize(desc, index) { var defdesc = { type: 'number', min: 0, max: 1, step: 0.001, label: null, name: 'par' + index, value: 0.5 }; desc = Object.assign({}, defdesc, desc); if (!desc.label) desc.label = desc.name; if (desc.type == 'boolean' && typeof (desc.value) != 'boolean') desc.value = false; if (desc.value == 'boolean') desc.type = 'boolean'; return desc; } div.appendChild(PanelCss); var rvalue = div.rvalue = {} var elements = div.elements = {}; div.aggregate = function(parNames) { var t = {}; for (var i = 0; i < arguments.length; i++) { var name = arguments[i]; t[name] = factories[name]; } return aggregateIterator(t); } function append(i) { let desc = normalize(descriptors[i],i) let parname = desc.name; let safeParname = safeName(parname); var el = html`

`; div.appendChild(el); el.appendChild(html`

${desc.label}

`); let v = html`

`; el.appendChild(v); div.rvalue[parname] = desc.value; let itfact = factories[parname] = iteratorFactory(desc.name); let getval, control; if (desc.type == 'boolean' || typeof (desc.value) == 'boolean') { var initCheck = desc.value ? "checked" : ""; control = html``; getval = ()=>control.checked; } else if (desc.type == 'number') { control = html``; getval = ()=>control.value; } v.append(control); div.elements[parname] = control; itfact.set(getval()); control.addEventListener("input", function() { itfact.set(getval()); rvalue[parname] = getval(); }); Object.defineProperty(div, safeParname, { get: () => itfact.make(), set: () => { } }); } for (let i = 0; i < descriptors.length; i++) append(i); Object.defineProperty(div, "value", { get: ()=>aggregateIterator(factories), set: () => { } }); var t = {}; //div.value = () => aggregateIterator(div.gvalues); return div; } return init; }