Mercurial > code > home > repos > light9
changeset 2403:d8950f9b46be
store panels layout in localStorage
author | drewp@bigasterisk.com |
---|---|
date | Fri, 17 May 2024 17:34:45 -0700 |
parents | 1d3594ffd14b |
children | 9cbc93f80b05 |
files | web/TiledHome.ts |
diffstat | 1 files changed, 47 insertions(+), 4 deletions(-) [+] |
line wrap: on
line diff
--- a/web/TiledHome.ts Fri May 17 16:56:32 2024 -0700 +++ b/web/TiledHome.ts Fri May 17 17:34:45 2024 -0700 @@ -12,8 +12,6 @@ export { Light9CollectorUi } from "./collector/Light9CollectorUi"; export { Light9FadeUi } from "./fade/Light9FadeUi"; export { Light9DeviceSettings } from "./live/Light9DeviceSettings"; -import { showRoot } from "./show_specific"; -import { HandlerFunc } from "./AutoDependencies"; const log = debug("home"); const config: FlexLayout.IJsonModel = { @@ -41,11 +39,51 @@ // see https://github.com/lit/lit/tree/main/packages/labs/react +// Store flexlayout panels in per-browser localstorage. +class PersistentLayout { + key = "light9.home.layout"; + defaultLayout: FlexLayout.IJsonRowNode = { + type: "row", + children: [ + { + type: "tabset", + weight: 50, + children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }], + }, + { + type: "tabset", + weight: 50, + children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }], + }, + ], + }; + getOrDefault(): FlexLayout.IJsonRowNode { + let savedLayout = localStorage.getItem(this.key); + if (savedLayout === null) { + return this.defaultLayout; + } + return JSON.parse(savedLayout); + } + + save(layout: FlexLayout.IJsonRowNode) { + localStorage.setItem(this.key, JSON.stringify(layout)); + } +} + class Main extends React.Component { - state: { model: FlexLayout.Model }; + state: { model: FlexLayout.Model; persistence: PersistentLayout }; constructor(props: any) { super(props); - this.state = { model: FlexLayout.Model.fromJson(config) }; + const persistence = new PersistentLayout(); + const config = { + global: { + tabEnableRename: false, + }, + borders: [], + layout: persistence.getOrDefault(), + }; + + this.state = { model: FlexLayout.Model.fromJson(config), persistence: persistence }; } factory = (node: any) => { @@ -57,9 +95,14 @@ return React.createElement(FlexLayout.Layout, { model: this.state.model, realtimeResize: true, + onModelChange: this.onModelChange.bind(this), factory: this.factory, }); } + + onModelChange() { + this.state.persistence.save(this.state.model.toJson().layout); + } } @customElement("light9-home-status")