api for adding overlays from extensions

website/src/lib/components/map/layer-control/extension-api.ts

@@ -0,0 +1,167 @@
+import { map, type MapboxGLMap } from '$lib/components/map/map';
+import { settings } from '$lib/logic/settings';
+import { get } from 'svelte/store';
+import { isSelected, remove, removeByPrefix, toggle } from './utils';
+import { overlays, overlayTree } from '$lib/assets/layers';
+import { browser } from '$app/environment';
+
+const { currentOverlays, previousOverlays, selectedOverlayTree } = settings;
+
+export type CustomOverlay = {
+    id: string;
+    name: string;
+    tileUrls: string[];
+    maxZoom?: number;
+};
+
+export class ExtensionAPI {
+    private _map: MapboxGLMap;
+    private _overlays: Map<string, CustomOverlay> = new Map();
+
+    constructor(map: MapboxGLMap) {
+        this._map = map;
+        if (browser && !window.hasOwnProperty('gpxstudio')) {
+            Object.defineProperty(window, 'gpxstudio', {
+                value: this,
+            });
+            addEventListener('beforeunload', () => {
+                this.destroy();
+            });
+        }
+    }
+
+    async ensureLoaded(): Promise<void> {
+        return new Promise((resolve) => {
+            this._map.onLoad(() => {
+                resolve();
+            });
+        });
+    }
+
+    addOrUpdateOverlay(overlay: CustomOverlay) {
+        if (!overlay.id || !overlay.tileUrls || overlay.tileUrls.length === 0) {
+            throw new Error('Overlay must have an id and at least one tile URL.');
+        }
+        overlay.id = this.getOverlayId(overlay.id);
+
+        this._overlays.set(overlay.id, overlay);
+
+        overlays[overlay.id] = {
+            version: 8,
+            sources: {
+                [overlay.id]: {
+                    type: 'raster',
+                    tiles: overlay.tileUrls,
+                    tileSize: overlay.tileUrls.some((url) => url.includes('512')) ? 512 : 256,
+                    maxzoom: overlay.maxZoom ?? 22,
+                },
+            },
+            layers: [
+                {
+                    id: overlay.id,
+                    type: 'raster',
+                    source: overlay.id,
+                },
+            ],
+        };
+
+        overlayTree.overlays.world[overlay.id] = true;
+
+        selectedOverlayTree.update((selected) => {
+            selected.overlays.world[overlay.id] = true;
+            return selected;
+        });
+
+        const current = get(currentOverlays);
+        if (current && isSelected(current, overlay.id)) {
+            try {
+                get(this._map)?.removeImport(overlay.id);
+            } catch (e) {
+                // No reliable way to check if the map is ready to remove sources and layers
+            }
+        }
+
+        currentOverlays.update((current) => {
+            current.overlays.world[overlay.id] = true;
+            return current;
+        });
+    }
+
+    removeOverlaysWithPrefix(prefix: string) {
+        prefix = this.getOverlayId(prefix);
+
+        currentOverlays.update((overlays) => {
+            removeByPrefix(overlays, prefix);
+            return overlays;
+        });
+        previousOverlays.update((overlays) => {
+            removeByPrefix(overlays, prefix);
+            return overlays;
+        });
+        selectedOverlayTree.update((overlays) => {
+            removeByPrefix(overlays, prefix);
+            return overlays;
+        });
+        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];
+            }
+        });
+    }
+
+    toggleOverlay(id: string) {
+        id = this.getOverlayId(id);
+
+        currentOverlays.update((overlays) => {
+            toggle(overlays, id);
+            return overlays;
+        });
+        if (!isSelected(get(selectedOverlayTree), id)) {
+            selectedOverlayTree.update((overlays) => {
+                toggle(overlays, id);
+                return overlays;
+            });
+        }
+    }
+
+    isLayerFromExtension(id: string): boolean {
+        return this._overlays.has(id);
+    }
+
+    getLayerName(id: string): string {
+        const overlay = this._overlays.get(id);
+        return overlay ? overlay.name : '';
+    }
+
+    private getOverlayId(id: string): string {
+        return `extension-${id}`;
+    }
+
+    private destroy() {
+        currentOverlays.update((overlays) => {
+            this._overlays.forEach((_, id) => {
+                remove(overlays, id);
+            });
+            return overlays;
+        });
+        previousOverlays.update((overlays) => {
+            this._overlays.forEach((_, id) => {
+                remove(overlays, id);
+            });
+            return overlays;
+        });
+        selectedOverlayTree.update((overlays) => {
+            this._overlays.forEach((_, id) => {
+                remove(overlays, id);
+            });
+            return overlays;
+        });
+    }
+}
+
+export const extensionAPI = new ExtensionAPI(map);