From 110f23bdf147aed33ba9c01c2f04b7ba5939dc72 Mon Sep 17 00:00:00 2001
From: vcoppe <vcoppe@hexaly.com>
Date: Wed, 12 Nov 2025 12:47:26 +0100
Subject: [PATCH] update extension api

---
 .../layer-control/LayerControlSettings.svelte | 12 +--
 .../map/layer-control/LayerTreeNode.svelte    |  5 +-
 .../map/layer-control/extension-api.ts        | 73 ++++++++++---------
 .../lib/components/map/layer-control/utils.ts |  2 +-
 .../routes/[[language]]/app/+layout.svelte    | 13 ++++
 5 files changed, 63 insertions(+), 42 deletions(-)
 create mode 100644 website/src/routes/[[language]]/app/+layout.svelte

diff --git a/website/src/lib/components/map/layer-control/LayerControlSettings.svelte b/website/src/lib/components/map/layer-control/LayerControlSettings.svelte
index b6f3dbd70..8cbb5bbec 100644
--- a/website/src/lib/components/map/layer-control/LayerControlSettings.svelte
+++ b/website/src/lib/components/map/layer-control/LayerControlSettings.svelte
@@ -20,7 +20,7 @@
     import CustomLayers from './CustomLayers.svelte';
     import { settings } from '$lib/logic/settings';
     import { untrack } from 'svelte';
-    import { extensionAPI } from './extension-api';
+    import { extensionAPI } from '$lib/components/map/layer-control/extension-api';
 
     const {
         selectedBasemapTree,
@@ -33,6 +33,8 @@
         opacities,
     } = settings;
 
+    const { isLayerFromExtension, getLayerName } = extensionAPI;
+
     let { open = $bindable() }: { open: boolean } = $props();
 
     let accordionValue: string | undefined = $state(undefined);
@@ -161,8 +163,8 @@
                                     <Select.Trigger class="h-8 mr-1 w-full">
                                         {#if selectedOverlay}
                                             {#if isSelected($selectedOverlayTree, selectedOverlay)}
-                                                {#if extensionAPI.isLayerFromExtension(selectedOverlay)}
-                                                    {extensionAPI.getLayerName(selectedOverlay)}
+                                                {#if $isLayerFromExtension(selectedOverlay)}
+                                                    {$getLayerName(selectedOverlay)}
                                                 {:else}
                                                     {i18n._(`layers.label.${selectedOverlay}`)}
                                                 {/if}
@@ -175,8 +177,8 @@
                                         {#each Object.keys(overlays) as id}
                                             {#if isSelected($selectedOverlayTree, id)}
                                                 <Select.Item value={id}>
-                                                    {#if extensionAPI.isLayerFromExtension(id)}
-                                                        {extensionAPI.getLayerName(id)}
+                                                    {#if $isLayerFromExtension(id)}
+                                                        {$getLayerName(id)}
                                                     {:else}
                                                         {i18n._(`layers.label.${id}`)}
                                                     {/if}
diff --git a/website/src/lib/components/map/layer-control/LayerTreeNode.svelte b/website/src/lib/components/map/layer-control/LayerTreeNode.svelte
index 9a77ce8fc..d31cf6393 100644
--- a/website/src/lib/components/map/layer-control/LayerTreeNode.svelte
+++ b/website/src/lib/components/map/layer-control/LayerTreeNode.svelte
@@ -26,6 +26,7 @@
     } = $props();
 
     const { customLayers } = settings;
+    const { isLayerFromExtension, getLayerName } = extensionAPI;
 
     $effect.pre(() => {
         if (checked !== undefined) {
@@ -73,8 +74,8 @@
                     <Label for="{name}-{id}" class="flex flex-row items-center gap-1">
                         {#if $customLayers.hasOwnProperty(id)}
                             {$customLayers[id].name}
-                        {:else if extensionAPI.isLayerFromExtension(id)}
-                            {extensionAPI.getLayerName(id)}
+                        {:else if $isLayerFromExtension(id)}
+                            {$getLayerName(id)}
                         {:else}
                             {i18n._(`layers.label.${id}`)}
                         {/if}
diff --git a/website/src/lib/components/map/layer-control/extension-api.ts b/website/src/lib/components/map/layer-control/extension-api.ts
index 75b6d0140..21c00b1ce 100644
--- a/website/src/lib/components/map/layer-control/extension-api.ts
+++ b/website/src/lib/components/map/layer-control/extension-api.ts
@@ -1,9 +1,9 @@
-import { map, type MapboxGLMap } from '$lib/components/map/map';
 import { settings } from '$lib/logic/settings';
-import { get } from 'svelte/store';
+import { derived, get, writable, type Writable } from 'svelte/store';
 import { isSelected, remove, removeByPrefix, toggle } from './utils';
 import { overlays, overlayTree } from '$lib/assets/layers';
 import { browser } from '$app/environment';
+import { map } from '$lib/components/map/map';
 
 const { currentOverlays, previousOverlays, selectedOverlayTree } = settings;
 
@@ -15,11 +15,9 @@ export type CustomOverlay = {
 };
 
 export class ExtensionAPI {
-    private _map: MapboxGLMap;
-    private _overlays: Map<string, CustomOverlay> = new Map();
+    private _overlays: Writable<Map<string, CustomOverlay>> = writable(new Map());
 
-    constructor(map: MapboxGLMap) {
-        this._map = map;
+    init() {
         if (browser && !window.hasOwnProperty('gpxstudio')) {
             Object.defineProperty(window, 'gpxstudio', {
                 value: this,
@@ -30,9 +28,9 @@ export class ExtensionAPI {
         }
     }
 
-    async ensureLoaded(): Promise<void> {
+    ensureLoaded(): Promise<void> {
         return new Promise((resolve) => {
-            this._map.onLoad(() => {
+            map.onLoad(() => {
                 resolve();
             });
         });
@@ -44,7 +42,10 @@ export class ExtensionAPI {
         }
         overlay.id = this.getOverlayId(overlay.id);
 
-        this._overlays.set(overlay.id, overlay);
+        this._overlays.update(($overlays) => {
+            $overlays.set(overlay.id, overlay);
+            return $overlays;
+        });
 
         overlays[overlay.id] = {
             version: 8,
@@ -75,7 +76,7 @@ export class ExtensionAPI {
         const current = get(currentOverlays);
         if (current && isSelected(current, overlay.id)) {
             try {
-                get(this._map)?.removeImport(overlay.id);
+                get(map)?.removeImport(overlay.id);
             } catch (e) {
                 // No reliable way to check if the map is ready to remove sources and layers
             }
@@ -90,27 +91,31 @@ export class ExtensionAPI {
     removeOverlaysWithPrefix(prefix: string) {
         prefix = this.getOverlayId(prefix);
 
-        currentOverlays.update((overlays) => {
-            removeByPrefix(overlays, prefix);
-            return overlays;
+        currentOverlays.update((current) => {
+            removeByPrefix(current, prefix);
+            return current;
         });
-        previousOverlays.update((overlays) => {
-            removeByPrefix(overlays, prefix);
-            return overlays;
+        previousOverlays.update((previous) => {
+            removeByPrefix(previous, prefix);
+            return previous;
         });
-        selectedOverlayTree.update((overlays) => {
-            removeByPrefix(overlays, prefix);
-            return overlays;
+        selectedOverlayTree.update((overlayTree) => {
+            removeByPrefix(overlayTree, prefix);
+            return overlayTree;
         });
         Object.keys(overlays).forEach((id) => {
             if (id.startsWith(prefix)) {
                 delete overlays[id];
             }
         });
-        Object.keys(overlayTree.overlays.world).forEach((id) => {
-            if (id.startsWith(prefix)) {
-                delete overlayTree.overlays.world[id];
-            }
+        removeByPrefix(overlayTree, prefix);
+        this._overlays.update(($overlays) => {
+            $overlays.forEach((_, id) => {
+                if (id.startsWith(prefix)) {
+                    $overlays.delete(id);
+                }
+            });
+            return $overlays;
         });
     }
 
@@ -129,34 +134,34 @@ export class ExtensionAPI {
         }
     }
 
-    isLayerFromExtension(id: string): boolean {
-        return this._overlays.has(id);
-    }
+    isLayerFromExtension = derived(this._overlays, ($overlays) => {
+        return (id: string) => $overlays.has(id);
+    });
 
-    getLayerName(id: string): string {
-        const overlay = this._overlays.get(id);
-        return overlay ? overlay.name : '';
-    }
+    getLayerName = derived(this._overlays, ($overlays) => {
+        return (id: string) => $overlays.get(id)?.name || '';
+    });
 
     private getOverlayId(id: string): string {
         return `extension-${id}`;
     }
 
     private destroy() {
+        const ids = Array.from(get(this._overlays).keys());
         currentOverlays.update((overlays) => {
-            this._overlays.forEach((_, id) => {
+            ids.forEach((id) => {
                 remove(overlays, id);
             });
             return overlays;
         });
         previousOverlays.update((overlays) => {
-            this._overlays.forEach((_, id) => {
+            ids.forEach((id) => {
                 remove(overlays, id);
             });
             return overlays;
         });
         selectedOverlayTree.update((overlays) => {
-            this._overlays.forEach((_, id) => {
+            ids.forEach((id) => {
                 remove(overlays, id);
             });
             return overlays;
@@ -164,4 +169,4 @@ export class ExtensionAPI {
     }
 }
 
-export const extensionAPI = new ExtensionAPI(map);
+export const extensionAPI = new ExtensionAPI();
diff --git a/website/src/lib/components/map/layer-control/utils.ts b/website/src/lib/components/map/layer-control/utils.ts
index dbb7f14c0..75909f643 100644
--- a/website/src/lib/components/map/layer-control/utils.ts
+++ b/website/src/lib/components/map/layer-control/utils.ts
@@ -71,7 +71,7 @@ export function removeByPrefix(node: LayerTreeType, prefix: string) {
         if (key.startsWith(prefix)) {
             delete node[key];
         } else if (typeof node[key] !== 'boolean') {
-            remove(node[key], prefix);
+            removeByPrefix(node[key], prefix);
         }
     });
     return node;
diff --git a/website/src/routes/[[language]]/app/+layout.svelte b/website/src/routes/[[language]]/app/+layout.svelte
new file mode 100644
index 000000000..1a881678c
--- /dev/null
+++ b/website/src/routes/[[language]]/app/+layout.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { browser } from '$app/environment';
+    import { extensionAPI } from '$lib/components/map/layer-control/extension-api';
+    import type { Snippet } from 'svelte';
+
+    let { children }: { children: Snippet } = $props();
+
+    if (browser) {
+        extensionAPI.init();
+    }
+</script>
+
+{@render children()}