Mercurial > code > home > repos > light9

comparison web/TiledHome.ts @ 2405:69ca2b2fc133

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
overcomplicated attempt at persisting the pane layout in the rdf graph this was hard because we have to somehow wait for the graph to load before config'ing the panes
author drewp@bigasterisk.com
date Fri, 17 May 2024 16:58:26 -0700
parents 1d3594ffd14b
children 6697a68800d2
comparison
equal deleted inserted replaced
2402:1d3594ffd14b 2405:69ca2b2fc133
5 import * as React from "react"; 5 import * as React from "react";
6 import { createRoot } from "react-dom/client"; 6 import { createRoot } from "react-dom/client";
7 import { getTopGraph } from "./RdfdbSyncedGraph"; 7 import { getTopGraph } from "./RdfdbSyncedGraph";
8 import { SyncedGraph } from "./SyncedGraph"; 8 import { SyncedGraph } from "./SyncedGraph";
9 import { Patch } from "./patch"; 9 import { Patch } from "./patch";
10 import { SimpleLayout, fullLayout, persistedLayout, simpleLayout } from "./tiledLayoutPersistence";
10 import { NamedNode } from "n3"; 11 import { NamedNode } from "n3";
11 export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph"; 12 export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph";
12 export { Light9CollectorUi } from "./collector/Light9CollectorUi"; 13 export { Light9CollectorUi } from "./collector/Light9CollectorUi";
13 export { Light9FadeUi } from "./fade/Light9FadeUi"; 14 export { Light9FadeUi } from "./fade/Light9FadeUi";
14 export { Light9DeviceSettings } from "./live/Light9DeviceSettings"; 15 export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
19 const config: FlexLayout.IJsonModel = { 20 const config: FlexLayout.IJsonModel = {
20 global: { 21 global: {
21 tabEnableRename: false, 22 tabEnableRename: false,
22 }, 23 },
23 borders: [], 24 borders: [],
24 layout: { 25 layout: fullLayout(persistedLayout) as FlexLayout.IJsonRowNode,
25 type: "row",
26 weight: 100,
27 children: [
28 {
29 type: "tabset",
30 weight: 50,
31 children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
32 },
33 {
34 type: "tabset",
35 weight: 50,
36 children: [{ type: "tab", name: "collector", component: "light9-collector-ui" }],
37 },
38 ],
39 },
40 }; 26 };
41 27
42 // see https://github.com/lit/lit/tree/main/packages/labs/react 28 // see https://github.com/lit/lit/tree/main/packages/labs/react
43 29
44 class Main extends React.Component { 30 class Main extends React.Component {
71 } 57 }
72 constructor() { 58 constructor() {
73 super(); 59 super();
74 getTopGraph().then((g) => { 60 getTopGraph().then((g) => {
75 this.graph = g; 61 this.graph = g;
62 runHandlerAfterGraphLoads(this.graph, this.homeLayout.bind(this), "homeLayout");
76 }); 63 });
77 } 64 }
65 homeLayout(patch?: Patch) {
66 const U = this.graph.U();
67 const s = U(":homeLayout");
68 const p = U(":config");
69 let cfg;
70
71 try {
72 cfg = this.graph.stringValue(s, p);
73 } catch (e) {
74 const ctx = new NamedNode(showRoot + "/homeLayout");
75 log(`no config in graph- adding one to `, ctx);
76 cfg = JSON.stringify(persistedLayout);
77 this.graph.patchObject(s, p, this.graph.Literal(cfg), ctx);
78 }
79 const fl = fullLayout(JSON.parse(cfg) as SimpleLayout);
80 log("got config", fl);
81 }
82 }
83
84 function runHandlerAfterGraphLoads(graph: SyncedGraph, handler: HandlerFunc, label: string) {
85 let patchesSeen = 0;
86 const wrapHandler = (patch?: Patch) => {
87 patchesSeen += 1;
88 if (patchesSeen == 2) {
89 handler(patch);
90 } else {
91 graph.objects(null, null);
92 }
93 };
94
95 graph.runHandler(wrapHandler, label);
78 } 96 }
79 97
80 const root = createRoot(document.getElementById("container")!); 98 const root = createRoot(document.getElementById("container")!);
81 root.render(React.createElement(Main)); 99 root.render(React.createElement(Main));