mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-10-04 14:25:08 +00:00
fix(web): the style editor takes over its own blocks -- and gets to at all
Two defects, both found by rendering the real partial in a browser rather than by reading the code. It was losing a race to its own fields. The hand-off guard asked "do any fallback controls differ from their server-rendered defaults?" as a proxy for "is someone editing this?". But the fallback holds this block's own font fields, and the font-selector widget populates them on the same 50ms timer -- so a plain page load, with nobody touching anything, raced into "dirty" and the editor removed itself, leaving the 701-line accordion form it exists to replace. Measured: seven customization.*.font selects dirty ~60ms after injection, clean again by 400ms. The question is whether a *person* typed, and event.isTrusted answers exactly that; the listeners now go on synchronously, because the edit worth protecting can happen before initWidget runs. It took over too much. Taking over removed the whole fallback section, but a customization block can hold more than styling -- football keeps favorite_result_colors there -- so that removed the only UI those fields had, and the editor also rendered them as an element, giving every row an "enabled" and three colour columns. Core now marks the blocks it recognises as styling (the compact declaration already did; hand-written adoption did not), the widget renders only those, and the template drops only the children the widget reports owning. Verified on football's real schema: 28 rows across four mode tabs, columns Element/Font/Size/Colour/X/Y, favorite_result_colors still editable with its ten inputs, no duplicated field names, no console errors. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -146,10 +146,20 @@
|
||||
function elementKeys(schema) {
|
||||
var props = (schema && schema.properties) || {};
|
||||
var order = schema['x-propertyOrder'] || Object.keys(props);
|
||||
return order.filter(function (k) {
|
||||
var shaped = order.filter(function (k) {
|
||||
return k !== 'layout' && k !== 'modes'
|
||||
&& own(props, k) && ownObj(props, k).properties;
|
||||
});
|
||||
// Core marks the blocks it recognises as styling. Prefer that: a
|
||||
// customization block can also hold a feature of its own -- football
|
||||
// keeps favorite_result_colors there -- and treating one as an element
|
||||
// gives every row that feature's fields as extra columns.
|
||||
var managed = shaped.filter(function (k) {
|
||||
return ownObj(props, k)['x-style-managed'] === true;
|
||||
});
|
||||
// Nothing marked means the schema never went through expansion, so
|
||||
// fall back to the shape test rather than rendering an empty table.
|
||||
return managed.length ? managed : shaped;
|
||||
}
|
||||
|
||||
function titleOf(schema, key) {
|
||||
@@ -555,6 +565,20 @@
|
||||
var root = el('div', { class: 'style-editor' });
|
||||
container.appendChild(root);
|
||||
|
||||
// Published synchronously, because the host reads it the moment
|
||||
// this returns while the panels below wait on the font catalog.
|
||||
// layout and modes count as ours: their fields appear as columns
|
||||
// in these rows, so leaving them to the generic renderer would
|
||||
// post every offset twice from two different controls.
|
||||
var owned = elementKeys(schema);
|
||||
if (ownObj(schema.properties || {}, 'layout').properties) {
|
||||
owned = owned.concat(['layout']);
|
||||
}
|
||||
if (ownObj(schema.properties || {}, 'modes').properties) {
|
||||
owned = owned.concat(['modes']);
|
||||
}
|
||||
container.dataset.ownedKeys = owned.join(',');
|
||||
|
||||
loadFonts().then(function (fonts) {
|
||||
var modeProps = ownObj(schema.properties || {}, 'modes').properties || {};
|
||||
var modes = Object.keys(modeProps);
|
||||
|
||||
Reference in New Issue
Block a user