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

`; var reservedKeys = []; var factories = {}; var rvalue = div.rvalue = {} var elements = {}; for (var k in div) reservedKeys.push(k); 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); function aggregate(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; var el = html`

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

${desc.label}

`); let v = html`

`; el.appendChild(v); 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); elements[parname] = control; itfact.set(getval()); control.addEventListener("input", function() { div.dispatchEvent(new CustomEvent("input")); console.log('dispatch'); itfact.set(getval()); rvalue[parname] = getval(); }); // Object.defineProperty(div, parname, { // get: () => itfact.make(), // set: () => { } // }); } for (let i = 0; i < descriptors.length; i++) append(i); function postProcess(obj) { obj.aggregate = aggregate; obj.rvalue = rvalue; obj.elements = elements; return obj; } Object.defineProperty(div, "value", { get: ()=>aggregateIterator(factories, postProcess), set: () => { } }); var t = {}; //div.value = () => aggregateIterator(div.gvalues); return div; } return init; }