diff --git a/websites/bitview/packages/solidjs-signals/wrapper.js b/websites/bitview/packages/solidjs-signals/wrapper.js index 353fbd720..930756de1 100644 --- a/websites/bitview/packages/solidjs-signals/wrapper.js +++ b/websites/bitview/packages/solidjs-signals/wrapper.js @@ -97,9 +97,30 @@ const signals = { }-${paramKey}`, ); + /** @type { ((this: Window, ev: PopStateEvent) => any) | undefined} */ + let popstateCallback; + let serialized = /** @type {string | null} */ (null); if (options.save.serializeParam !== false) { serialized = new URLSearchParams(window.location.search).get(paramKey); + + // popstateCallback = + // /** @type {(this: Window, ev: PopStateEvent) => any} */ ( + // (_) => { + // serialized = new URLSearchParams(window.location.search).get( + // paramKey, + // ); + // set(() => + // serialized ? save.deserialize(serialized) : initialValue, + // ); + // } + // ); + // if (!popstateCallback) throw "Unreachable"; + // window.addEventListener("popstate", popstateCallback); + // signals.onCleanup(() => { + // if (popstateCallback) + // window.removeEventListener("popstate", popstateCallback); + // }); } if (serialized === null) { try { diff --git a/websites/bitview/scripts/main.js b/websites/bitview/scripts/main.js index 639413a7a..012df21fc 100644 --- a/websites/bitview/scripts/main.js +++ b/websites/bitview/scripts/main.js @@ -2205,15 +2205,29 @@ function main() { vecIdToIndexes, }); - // window.addEventListener("popstate", (_) => { - // const urlSelected = utils.url.pathnameToSelectedId(); - // const option = options.list.find( - // (option) => urlSelected === option.id, - // ); - // if (option) { - // options.selected.set(option); - // } - // }); + window.addEventListener("popstate", (event) => { + const path = window.document.location.pathname + .split("/") + .filter((v) => v); + let folder = options.tree; + + while (path.length) { + const id = path.shift(); + const res = folder.find((v) => id === utils.stringToId(v.name)); + if (!res) throw "Option not found"; + if (path.length >= 1) { + if (!("tree" in res)) { + throw "Unreachable"; + } + folder = res.tree; + } else { + if ("tree" in res) { + throw "Unreachable"; + } + options.selected.set(res); + } + } + }); function initSelected() { let firstRun = true; @@ -2239,14 +2253,6 @@ function main() { let firstTimeLoadingExplorer = true; signals.createEffect(options.selected, (option) => { - if (previousElement) { - previousElement.hidden = true; - utils.url.resetParams(option); - utils.url.pushHistory(option.path); - } else { - utils.url.replaceHistory({ pathname: option.path }); - } - /** @type {HTMLElement} */ let element; @@ -2364,7 +2370,15 @@ function main() { } } - element.hidden = false; + if (element !== previousElement) { + if (previousElement) previousElement.hidden = true; + element.hidden = false; + } + + if (!previousElement) { + utils.url.replaceHistory({ pathname: option.path }); + } + previousElement = element; }); } diff --git a/websites/bitview/scripts/options.js b/websites/bitview/scripts/options.js index f1e241d2a..6d99b6fdb 100644 --- a/websites/bitview/scripts/options.js +++ b/websites/bitview/scripts/options.js @@ -104,6 +104,8 @@ * * @typedef {ExplorerOption | ChartOption | TableOption | SimulationOption | UrlOption} Option * + * @typedef {(AnyPartialOption | PartialOptionsGroup)[]} PartialOptionsTree + * * @typedef {Object} PartialOptionsGroup * @property {string} name * @property {PartialOptionsTree} tree @@ -112,8 +114,6 @@ * @property {string} name * @property {OptionsTree} tree * - * @typedef {(AnyPartialOption | PartialOptionsGroup)[]} PartialOptionsTree - * * @typedef {(Option | OptionsGroup)[]} OptionsTree * */ @@ -4154,9 +4154,14 @@ export function initOptions({ }) { const LS_SELECTED_KEY = `selected_id`; - const urlPath_ = window.document.location.pathname.substring(1).split("/"); + const urlPath_ = window.document.location.pathname + .split("/") + .filter((v) => v); const urlPath = urlPath_.length ? urlPath_ : undefined; - const savedPath = utils.storage.read(LS_SELECTED_KEY)?.split("/"); + const savedPath = utils.storage + .read(LS_SELECTED_KEY) + ?.split("/") + .filter((v) => v); /** @type {Signal