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")