From 06c096b21a5c570936d9926debd942c6fc1fc164 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Thu, 23 Jan 2025 13:03:12 +0100 Subject: [PATCH] Refactoring: move some loading logic into svelte element --- scripts/generateLayouts.ts | 9 ++--- src/UI/SingleThemeGui.svelte | 64 ++++++++++++++++++++++++++++++++++++ src/Utils.ts | 9 +++-- src/index.ts | 51 +++------------------------- src/index_theme.ts.template | 53 +++-------------------------- 5 files changed, 84 insertions(+), 102 deletions(-) create mode 100644 src/UI/SingleThemeGui.svelte diff --git a/scripts/generateLayouts.ts b/scripts/generateLayouts.ts index 7080b9c91c..fec306d941 100644 --- a/scripts/generateLayouts.ts +++ b/scripts/generateLayouts.ts @@ -22,6 +22,7 @@ import { QuestionableTagRenderingConfigJson } from "../src/Models/ThemeConfig/Js import Script from "./Script" import crypto from "crypto" import { RasterLayerProperties } from "../src/Models/RasterLayerProperties" + const sharp = require("sharp") class GenerateLayouts extends Script { @@ -172,7 +173,7 @@ class GenerateLayouts extends Script { const icons = [] const whiteIcons: string[] = [] - let icon = layout.icon + const icon = layout.icon if (icon.endsWith(".svg") || icon.startsWith(" ${layerName})`) + addLayers.push(` theme.layers.push( ${layerName})`) } - let codeTemplate = this.codeTemplate.replace( + const codeTemplate = this.codeTemplate.replace( " // LAYOUT.ADD_LAYERS", addLayers.join("\n") ) diff --git a/src/UI/SingleThemeGui.svelte b/src/UI/SingleThemeGui.svelte new file mode 100644 index 0000000000..fd09b6d2a5 --- /dev/null +++ b/src/UI/SingleThemeGui.svelte @@ -0,0 +1,64 @@ + + +{#if !webgl_supported} +
WebGL is not supported or not enabled. This is + essential + for MapComplete to function, please enable this. +
+{:else} + +{/if} diff --git a/src/Utils.ts b/src/Utils.ts index b12217d925..1f0981d7e4 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -1125,9 +1125,14 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be element.click() } - public static async waitFor(timeMillis: number): Promise { + public static async waitFor(timeMillis: number): Promise; + public static async waitFor(timeMillis: number, t: T): Promise; + + public static async waitFor(timeMillis: number, t: T): Promise { return new Promise((resolve) => { - window.setTimeout(resolve, timeMillis) + window.setTimeout(() => { + resolve(t) + }, timeMillis) }) } diff --git a/src/index.ts b/src/index.ts index 8bcc582b9d..2150cdd0ec 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,65 +1,22 @@ import DetermineTheme from "./Logic/DetermineTheme" import SvelteUIElement from "./UI/Base/SvelteUIElement" -import ThemeViewGUI from "./UI/ThemeViewGUI.svelte" import { FixedUiElement } from "./UI/Base/FixedUiElement" import Combine from "./UI/Base/Combine" import { SubtleButton } from "./UI/Base/SubtleButton" import { Utils } from "./Utils" -import Constants from "./Models/Constants" import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray" -import { WithSearchState } from "./Models/ThemeViewState/WithSearchState" -import { UIEventSource } from "./Logic/UIEventSource" +import SingleThemeGui from "./UI/SingleThemeGui.svelte" -function webgl_support() { - try { - const canvas = document.createElement("canvas") - return ( - !!window.WebGLRenderingContext && - (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")) - ) - } catch (e) { - return false - } -} - -async function timeout(timeMS: number): Promise<{ layers: string[] }> { - await Utils.waitFor(timeMS) - return { layers: [] } -} - -async function getAvailableLayers(): Promise> { - if (!Constants.SummaryServer) { - return new Set() - } - try { - const host = new URL(Constants.SummaryServer).host - const status: { layers: string[] } = await Promise.any([ - Utils.downloadJson<{ layers }>("https://" + host + "/summary/status.json"), - timeout(2500), - ]) - return new Set(status.layers) - } catch (e) { - console.error("Could not get MVT available layers due to", e) - return new Set() - } -} async function main() { try { - if (!webgl_support()) { - throw "WebGL is not supported or not enabled. This is essential for MapComplete to function, please enable this." - } - const availableLayers = UIEventSource.FromPromise(getAvailableLayers()) + const theme = await DetermineTheme.getTheme() - availableLayers.addCallbackAndRunD(availableLayers => { - console.log("The available layers on server are", Array.from(availableLayers)) - }) - const state = new WithSearchState(theme, availableLayers) const target = document.getElementById("maindiv") const childs = Array.from(target.children) - new ThemeViewGUI({ + new SingleThemeGui({ target, - props: { state }, + props: { theme } }) childs.forEach((ch) => target.removeChild(ch)) Array.from(document.getElementsByClassName("delete-on-load")).forEach((el) => { diff --git a/src/index_theme.ts.template b/src/index_theme.ts.template index d7ef5f1dae..fb984ec556 100644 --- a/src/index_theme.ts.template +++ b/src/index_theme.ts.template @@ -1,65 +1,20 @@ -import ThemeViewState from "./src/Models/ThemeViewState" -import ThemeViewGUI from "./src/UI/ThemeViewGUI.svelte" -import ThemeConfig from "./src/Models/ThemeConfig/ThemeConfig"; -import MetaTagging from "./src/Logic/MetaTagging"; -import { FixedUiElement } from "./src/UI/Base/FixedUiElement"; -import { Utils } from "./src/Utils" -import Constants from "./src/Models/Constants" +import MetaTagging from "./src/Logic/MetaTagging" +import SingleThemeGui from "./UI/SingleThemeGui.svelte" -function webgl_support() { - try { - var canvas = document.createElement("canvas") - return ( - !!window.WebGLRenderingContext && - (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")) - ) - } catch (e) { - return false - } -} - -async function timeout(timeMS: number): Promise<{ layers: string[] }> { - await Utils.waitFor(timeMS) - return { layers: [] } -} - - -async function getAvailableLayers(): Promise> { - if(!Constants.SummaryServer){ - return new Set() - } - try { - const host = new URL(Constants.SummaryServer).host - const status = await Promise.any([ - Utils.downloadJson("https://" + host + "/summary/status.json"), - timeout(0) - ]) - return new Set(status.layers) - } catch (e) { - console.error("Could not get MVT available layers due to", e) - return new Set() - } -} async function main() { - if (!webgl_support()) { - new FixedUiElement("WebGL is not supported or not enabled. This is essential for MapComplete to function, please enable this.").SetClass("block alert").AttachTo("maindiv") - }else{ - const availableLayers = await getAvailableLayers() MetaTagging.setThemeMetatagging(new ThemeMetaTagging()) // LAYOUT.ADD_LAYERS // LAYOUT.ADD_CONFIG - const state = new WithSearchState(new ThemeConfig( layout), availableLayers) const target = document.getElementById("maindiv") const childs = Array.from(target.children) - new ThemeViewGUI({ + new SingleThemeGui({ target, - props: { state }, + props: { theme }, }) childs.forEach(ch => target.removeChild(ch)) Array.from(document.getElementsByClassName("delete-on-load")).forEach(el => { el.parentElement.removeChild(el) }) - } } main()