refactoring: fix basic flow to add a new point

Models/MenuState.ts

@@ -0,0 +1,64 @@
+import LayerConfig from "./ThemeConfig/LayerConfig"
+import { UIEventSource } from "../Logic/UIEventSource"
+
+/**
+ * Indicates if a menu is open, and if so, which tab is selected;
+ * Some tabs allow to highlight an element.
+ *
+ * Some convenience methods are provided for this as well
+ */
+export class MenuState {
+    private static readonly _themeviewTabs = ["intro", "filters"] as const
+    public readonly themeIsOpened = new UIEventSource(true)
+    public readonly themeViewTabIndex: UIEventSource<number>
+    public readonly themeViewTab: UIEventSource<typeof MenuState._themeviewTabs[number]>
+
+    private static readonly _menuviewTabs = ["about", "settings", "community", "privacy"] as const
+    public readonly menuIsOpened = new UIEventSource(false)
+    public readonly menuViewTabIndex: UIEventSource<number>
+    public readonly menuViewTab: UIEventSource<typeof MenuState._menuviewTabs[number]>
+
+    public readonly highlightedLayerInFilters: UIEventSource<string> = new UIEventSource<string>(
+        undefined
+    )
+    constructor() {
+        this.themeViewTabIndex = new UIEventSource(0)
+        this.themeViewTab = this.themeViewTabIndex.sync(
+            (i) => MenuState._themeviewTabs[i],
+            [],
+            (str) => MenuState._themeviewTabs.indexOf(<any>str)
+        )
+
+        this.menuViewTabIndex = new UIEventSource(1)
+        this.menuViewTab = this.menuViewTabIndex.sync(
+            (i) => MenuState._menuviewTabs[i],
+            [],
+            (str) => MenuState._menuviewTabs.indexOf(<any>str)
+        )
+        this.themeIsOpened.addCallbackAndRun((isOpen) => {
+            if (!isOpen) {
+                this.highlightedLayerInFilters.setData(undefined)
+            }
+        })
+        this.themeViewTab.addCallbackAndRun((tab) => {
+            if (tab !== "filters") {
+                this.highlightedLayerInFilters.setData(undefined)
+            }
+        })
+    }
+    public openFilterView(highlightLayer?: LayerConfig | string) {
+        this.themeIsOpened.setData(true)
+        this.themeViewTab.setData("filters")
+        if (highlightLayer) {
+            if (typeof highlightLayer !== "string") {
+                highlightLayer = highlightLayer.id
+            }
+            this.highlightedLayerInFilters.setData(highlightLayer)
+        }
+    }
+
+    public closeAll() {
+        this.menuIsOpened.setData(false)
+        this.themeIsOpened.setData(false)
+    }
+}