Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring: move some loading logic into svelte element

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-01-23 13:03:12 +01:00
parent 8354da0fe1
commit 06c096b21a
5 changed files with 84 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

9
scripts/generateLayouts.ts
View file

@ -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("<svg") || icon.startsWith("<?xml")) {
// This is an svg. Lets create the needed pngs and do some checkes!
@ -582,7 +583,7 @@ class GenerateLayouts extends Script {
const filename = "index_" + theme.id + ".ts"
const imports = [
`import layout from "./public/assets/generated/themes/${theme.id}.json"`,
`import theme from "./public/assets/generated/themes/${theme.id}.json"`,
`import { ThemeMetaTagging } from "./src/assets/generated/metatagging/${theme.id}"`,
]
for (const layerName of Constants.added_by_default) {
@ -595,10 +596,10 @@ class GenerateLayouts extends Script {
const addLayers = []
for (const layerName of Constants.added_by_default) {
addLayers.push(` layout.layers.push(<any> ${layerName})`)
addLayers.push(` theme.layers.push(<any> ${layerName})`)
}
let codeTemplate = this.codeTemplate.replace(
const codeTemplate = this.codeTemplate.replace(
" // LAYOUT.ADD_LAYERS",
addLayers.join("\n")
)

64
src/UI/SingleThemeGui.svelte Normal file
View file

@ -0,0 +1,64 @@
<script lang="ts">/**
* Wrapper around 'ThemeViewGui', which is responsible for some boiler plate things, such as:
*
* - Checking for WebGL support
* - Loading the available layers
* - ...
*/
import ThemeViewGUI from "./ThemeViewGUI.svelte"
import Constants from "../Models/Constants.js"
import { Utils } from "../Utils.js"
import { UIEventSource } from "../Logic/UIEventSource"
import { WithSearchState } from "../Models/ThemeViewState/WithSearchState"
import { ThemeConfigJson } from "../Models/ThemeConfig/Json/ThemeConfigJson"
import ThemeConfig from "../Models/ThemeConfig/ThemeConfig"
function webgl_support() {
try {
const canvas = document.createElement("canvas")
if (
!!window.WebGLRenderingContext &&
(canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
) {
return true
}
} catch (e) {
return false
}
}
async function getAvailableLayers(): Promise<Set<string>> {
if (!Constants.SummaryServer) {
return new Set<string>()
}
try {
const host = new URL(Constants.SummaryServer).host
const status: { layers: string[] } = await Promise.any([
Utils.downloadJson<{ layers }>("https://" + host + "/summary/status.json"),
Utils.waitFor(2500, { layers: [] })
])
return new Set<string>(status.layers)
} catch (e) {
console.error("Could not get MVT available layers due to", e)
return new Set<string>()
}
}
export let theme: ThemeConfig
let webgl_supported = webgl_support()
let availableLayers = UIEventSource.FromPromise(getAvailableLayers())
const state = new WithSearchState(theme, availableLayers)
</script>
{#if !webgl_supported}
<div class="alert w-full h-full justify-center items-center m-8">WebGL is not supported or not enabled. This is
essential
for MapComplete to function, please enable this.
</div>
{:else}
<ThemeViewGUI {state} />
{/if}

9
src/Utils.ts
View file

@ -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<void> {
public static async waitFor(timeMillis: number): Promise<void>;
public static async waitFor<T>(timeMillis: number, t: T): Promise<T>;
public static async waitFor<T = void>(timeMillis: number, t: T): Promise<T> {
return new Promise((resolve) => {
window.setTimeout(resolve, timeMillis)
window.setTimeout(() => {
resolve(t)
}, timeMillis)
})
}

51
src/index.ts
View file

@ -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<Set<string>> {
if (!Constants.SummaryServer) {
return new Set<string>()
}
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<string>(status.layers)
} catch (e) {
console.error("Could not get MVT available layers due to", e)
return new Set<string>()
}
}
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) => {

53
src/index_theme.ts.template
View file

@ -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<Set<string>> {
if(!Constants.SummaryServer){
return new Set<string>()
}
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<string>(status.layers)
} catch (e) {
console.error("Could not get MVT available layers due to", e)
return new Set<string>()
}
}
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(<any> 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()