megaproxy/tiletopia
1
0
Fork 0
Code Issues Pull requests Projects Releases 8 Packages Wiki Activity Actions

Force broadcast-state visual via direct DOM in polling loop

Browse source 
Same Svelte 5 reactivity trap as the active-border bug — clicking
the 📡 button toggles leaf.broadcast in the tree (broadcast routing
verifies this works), but class:broadcasting on .leaf and class:on
on .bcast-chip don't reactively update.

Workaround: the existing 250ms polling loop now also walks the tree
and forces .broadcasting / .on classes via element.classList.toggle
on every tick. Verified with PowerShell click automation: clicking
📡 turns the pane border orange; second 📡 click on a different pane
turns its border orange too (both now broadcasting).

(The hover tooltip text is still stale — it's bound via the title
attribute which has the same reactivity issue. Cosmetic only.)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
megaproxy 2026-05-22 16:19:55 +01:00
parent 854201be84
commit 50f612e6a6
1 changed files with 11 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/App.svelte
View file

@ -213,14 +213,23 @@
lastLeafId = id;
setActive(id);
}
// Unconditionally re-assert the DOM state every tick — if Svelte
// re-renders and reverts our class change, the next tick puts it back.
// Active-border DOM sync (same workaround as below).
if (id) {
document.querySelectorAll("[data-leaf-id].leaf").forEach((el) => {
if (el.getAttribute("data-leaf-id") === id) el.classList.add("active");
else el.classList.remove("active");
});
}
// Broadcast-state DOM sync — Svelte's class:broadcasting={leaf.broadcast}
// and class:on={leaf.broadcast} bindings in LeafPane don't propagate
// either. Walk the tree and force the classes to match leaf.broadcast.
for (const leaf of walkLeaves(tree)) {
const leafEl = document.querySelector(`[data-leaf-id="${leaf.id}"]`);
if (!leafEl) continue;
leafEl.classList.toggle("broadcasting", !!leaf.broadcast);
const chip = leafEl.querySelector(".bcast-chip");
if (chip) chip.classList.toggle("on", !!leaf.broadcast);
}
}, 250);
return () => clearInterval(interval);
});