tzzr/hst-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix graph sidebar state closure issue

Browse Source 
Event handlers now read fresh state from State.get() instead of
using captured values from when bindSidebarEvents was called.
This ensures the sidebar updates correctly with each render.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
ARCHITECT
2026-01-17 22:15:06 +00:00
parent 964b7820f7
commit 4f3a7e7949
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@@ -1367,10 +1367,9 @@ const GraphView = {
},
bindSidebarEvents(sidebar) {
const { graphFilters, graphSettings } = State.get();
sidebar.querySelectorAll("[data-category]").forEach(cb => {
cb.onchange = () => {
const { graphFilters } = State.get();
const cats = new Set(graphFilters.categories);
cb.checked ? cats.add(cb.dataset.category) : cats.delete(cb.dataset.category);
State.set({ graphFilters: { ...graphFilters, categories: cats } });
@@ -1380,6 +1379,7 @@ const GraphView = {
sidebar.querySelectorAll("[data-edge]").forEach(cb => {
cb.onchange = () => {
const { graphFilters } = State.get();
const edges = new Set(graphFilters.edgeTypes);
cb.checked ? edges.add(cb.dataset.edge) : edges.delete(cb.dataset.edge);
State.set({ graphFilters: { ...graphFilters, edgeTypes: edges } });
@@ -1387,16 +1387,16 @@ const GraphView = {
};
});
sidebar.querySelector("#gs-images").onchange = (e) => { State.set({ graphSettings: { ...graphSettings, showImages: e.target.checked } }); Events.emit('render'); };
sidebar.querySelector("#gs-labels").onchange = (e) => { State.set({ graphSettings: { ...graphSettings, showLabels: e.target.checked } }); Events.emit('render'); };
sidebar.querySelector("#gs-images").onchange = (e) => { const { graphSettings } = State.get(); State.set({ graphSettings: { ...graphSettings, showImages: e.target.checked } }); Events.emit('render'); };
sidebar.querySelector("#gs-labels").onchange = (e) => { const { graphSettings } = State.get(); State.set({ graphSettings: { ...graphSettings, showLabels: e.target.checked } }); Events.emit('render'); };
const sizeSlider = sidebar.querySelector("#gs-size");
sizeSlider.oninput = (e) => { sidebar.querySelector("#gs-size-val").textContent = e.target.value + "px"; };
sizeSlider.onchange = (e) => { State.set({ graphSettings: { ...graphSettings, nodeSize: parseInt(e.target.value) } }); Events.emit('render'); };
sizeSlider.onchange = (e) => { const { graphSettings } = State.get(); State.set({ graphSettings: { ...graphSettings, nodeSize: parseInt(e.target.value) } }); Events.emit('render'); };
const distSlider = sidebar.querySelector("#gs-dist");
distSlider.oninput = (e) => { sidebar.querySelector("#gs-dist-val").textContent = e.target.value + "px"; };
distSlider.onchange = (e) => { State.set({ graphSettings: { ...graphSettings, linkDist: parseInt(e.target.value) } }); Events.emit('render'); };
distSlider.onchange = (e) => { const { graphSettings } = State.get(); State.set({ graphSettings: { ...graphSettings, linkDist: parseInt(e.target.value) } }); Events.emit('render'); };
},
renderControls(container) {