@versatiles/svelte 2.0.0 → 2.1.0

package/dist/components/BBoxMap/BBoxMap.svelte

@@ -15,19 +15,15 @@
 	let bboxes: { key: string; value: BBox }[] | undefined = $state();
 	let mapContainer: HTMLElement;
 
-	async function onMapLoad(_map: MaplibreMapType) {
+	async function onMapInit(_map: MaplibreMapType) {
 		map = _map;
 		mapContainer = map.getContainer();
-		map.setPadding({ top: 31 + 5, right: 5, bottom: 5, left: 5 });
-		bboxDrawer = new BBoxDrawer(
-			map!,
-			[-180, -86, 180, 86],
-			isDarkMode(mapContainer) ? '#FFFFFF' : '#000000'
-		);
+		map.setPadding({ top: 42, right: 10, bottom: 15, left: 10 });
+		bboxDrawer = new BBoxDrawer(map!, [-180, -85, 180, 85], isDarkMode(mapContainer) ? '#FFFFFF' : '#000000');
 		bboxes = await loadBBoxes();
-		bboxDrawer.bbox.subscribe((bbox) => {
-			selectedBBox = bbox;
-		});
+		// If an initial bbox is already provided by the parent, display it instead of guessing the user's country
+		if (selectedBBox) flyToBBox(selectedBBox);
+		bboxDrawer.bbox.subscribe((bbox) => (selectedBBox = bbox));
 	}
 
 	function flyToBBox(bbox: BBox) {
@@ -47,6 +43,21 @@
 			map.flyTo({ ...transform, essential: true, speed: 5 });
 		}
 	}
+
+	function getInitialInputText() {
+		// When an initial bbox is supplied, we skip the country pre‑fill
+		if (selectedBBox) {
+			const area = (selectedBBox[2] - selectedBBox[0]) * (selectedBBox[3] - selectedBBox[1]);
+			if (area < 60000) return '';
+		}
+		let query = getCountryName() ?? '';
+		switch (query) {
+			case 'France':
+				query = 'France, métropolitaine';
+				break;
+		}
+		return query;
+	}
 </script>
 
 <div class="container">
@@ -56,11 +67,11 @@
 				items={bboxes}
 				placeholder="Find country, region or city …"
 				change={(bbox) => flyToBBox(bbox)}
-				initialInputText={getCountryName() ?? ''}
+				initialInputText={getInitialInputText()}
 			/>
 		</div>
 	{/if}
-	<BasicMap {onMapLoad}></BasicMap>
+	<BasicMap {onMapInit} emptyStyle={true}></BasicMap>
 </div>
 
 <style>

package/dist/components/BBoxMap/lib/bbox.d.ts

@@ -9,7 +9,7 @@ export declare const DragPointMap: Map<DragPoint, {
 }>;
 export type BBox = [number, number, number, number];
 export declare class BBoxDrawer {
-    private source?;
+    private sourceId;
     private dragPoint;
     private isDragging;
     private map;

package/dist/components/BBoxMap/lib/bbox.js

@@ -1,6 +1,6 @@
 import { get, writable } from 'svelte/store';
 import maplibregl from 'maplibre-gl';
-const { LngLatBounds } = maplibregl;
+import { getMapStyle } from '../../../utils/map_style.js';
 // prettier-ignore
 export const DragPointMap = new Map([
     ['n', { cursor: 'ns-resize', flipH: 'n', flipV: 's' }],
@@ -15,7 +15,7 @@ export const DragPointMap = new Map([
 ]);
 const worldBBox = [-180, -85, 180, 85];
 export class BBoxDrawer {
-    source;
+    sourceId;
     dragPoint = false;
     isDragging = false;
     map;
@@ -26,27 +26,27 @@ export class BBoxDrawer {
         this.bbox = writable(bbox);
         this.inverted = inverted ?? true;
         this.map = map;
-        const sourceId = 'bbox_' + Math.random().toString(36).slice(2);
-        if (this.source)
-            throw new Error('BBoxDrawer already added to map');
-        map.addSource(sourceId, { type: 'geojson', data: this.getAsFeatureCollection() });
-        map.addLayer({
+        this.sourceId = 'bbox_' + Math.random().toString(36).slice(2);
+        const style = getMapStyle();
+        style.transition = { duration: 0, delay: 0 };
+        style.sources[this.sourceId] = { type: 'geojson', data: this.getAsFeatureCollection() };
+        style.layers.push({
             id: 'bbox-line_' + Math.random().toString(36).slice(2),
             type: 'line',
-            source: sourceId,
+            source: this.sourceId,
             filter: ['==', '$type', 'LineString'],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: { 'line-color': color }
         });
-        map.addLayer({
+        style.layers.push({
             id: 'bbox-fill_' + Math.random().toString(36).slice(2),
             type: 'fill',
-            source: sourceId,
+            source: this.sourceId,
             filter: ['==', '$type', 'Polygon'],
             layout: {},
             paint: { 'fill-color': color, 'fill-opacity': 0.2 }
         });
-        this.source = map.getSource(sourceId);
+        map.setStyle(style);
         this.canvas = map.getCanvasContainer();
         map.on('mousemove', (e) => {
             if (e.originalEvent.buttons % 2 === 0)
@@ -85,10 +85,7 @@ export class BBoxDrawer {
         const ring = getRing(get(this.bbox));
         return {
             type: 'FeatureCollection',
-            features: [
-                this.inverted ? polygon(getRing(worldBBox), ring) : polygon(ring),
-                linestring(ring)
-            ]
+            features: [this.inverted ? polygon(getRing(worldBBox), ring) : polygon(ring), linestring(ring)]
         };
         function getRing(bbox) {
             const x0 = Math.min(bbox[0], bbox[2]);
@@ -110,10 +107,15 @@ export class BBoxDrawer {
         this.redraw();
     }
     getBounds() {
-        return new LngLatBounds(get(this.bbox));
+        return new maplibregl.LngLatBounds(get(this.bbox));
     }
     redraw() {
-        this.source?.setData(this.getAsFeatureCollection());
+        const source = this.map.getSource(this.sourceId);
+        if (!source)
+            return;
+        if (source instanceof maplibregl.GeoJSONSource) {
+            source.setData(this.getAsFeatureCollection());
+        }
     }
     getAsPixel() {
         const bbox = get(this.bbox);

package/dist/components/BasicMap/BasicMap.svelte

@@ -10,18 +10,21 @@
 		styleOptions = { transitionDuration: 0 },
 		mapOptions = {},
 		map = $bindable(),
+		emptyStyle = false,
 		onMapInit,
 		onMapLoad
 	}: {
 		style?: string;
-		styleOptions?: Parameters<typeof getMapStyle>[1];
+		styleOptions?: Parameters<typeof getMapStyle>[0];
 		mapOptions?: Partial<MapOptions>;
 		map?: maplibre.Map;
+		emptyStyle?: boolean;
 		onMapInit?: (map: maplibre.Map, maplibre: typeof import('maplibre-gl')) => void;
 		onMapLoad?: (map: maplibre.Map, maplibre: typeof import('maplibre-gl')) => void;
 	} = $props();
 
 	let container: HTMLDivElement;
+	let triggeredMapReady = false;
 
 	$effect(() => {
 		if (container) init();
@@ -30,14 +33,18 @@
 	async function init(): Promise<void> {
 		if (map) return;
 
-		if (!container) throw Error();
+		if (styleOptions.darkMode == null) styleOptions.darkMode = isDarkMode(container);
 
-		const darkMode = isDarkMode(container);
-		container.style.setProperty('--bg-color', darkMode ? '#000' : '#fff');
-		container.style.setProperty('--fg-color', darkMode ? '#fff' : '#000');
+		container.style.setProperty('--bg-color', styleOptions.darkMode ? '#000' : '#fff');
+		container.style.setProperty('--fg-color', styleOptions.darkMode ? '#fff' : '#000');
+
+		let style = undefined;
+
+		if (!emptyStyle) {
+			style = getMapStyle(styleOptions);
+			style.transition = { duration: 0, delay: 0 };
+		}
 
-		const style = getMapStyle(darkMode, styleOptions);
-		style.transition = { duration: 0, delay: 0 };
 		map = new maplibre.Map({
 			container,
 			style,
@@ -50,9 +57,15 @@
 
 		if (onMapInit) onMapInit(map, maplibre);
 
-		map.on('load', () => {
+		map.on('idle', checkMapReady);
+
+		function checkMapReady() {
+			if (triggeredMapReady) return;
+			if (!map!.loaded()) return;
+			triggeredMapReady = true;
 			if (onMapLoad) onMapLoad(map!, maplibre);
-		});
+			setTimeout(() => console.log('map_ready'), 100);
+		}
 	}
 </script>
 

package/dist/components/BasicMap/BasicMap.svelte.d.ts

@@ -4,9 +4,10 @@ import maplibre from 'maplibre-gl';
 import type { MapOptions } from 'maplibre-gl';
 type $$ComponentProps = {
     style?: string;
-    styleOptions?: Parameters<typeof getMapStyle>[1];
+    styleOptions?: Parameters<typeof getMapStyle>[0];
     mapOptions?: Partial<MapOptions>;
     map?: maplibre.Map;
+    emptyStyle?: boolean;
     onMapInit?: (map: maplibre.Map, maplibre: typeof import('maplibre-gl')) => void;
     onMapLoad?: (map: maplibre.Map, maplibre: typeof import('maplibre-gl')) => void;
 };

package/dist/components/MapEditor/MapEditor.svelte

@@ -1,31 +1,50 @@
 <script lang="ts">
 	import type { Map as MaplibreMapType } from 'maplibre-gl';
 	import BasicMap from '../BasicMap/BasicMap.svelte';
-	import { onMount } from 'svelte';
 	import Sidebar from './components/Sidebar.svelte';
-	import type { GeometryManager } from './lib/geometry_manager.js';
+	import { getCountryBoundingBox } from '../../utils/location.js';
+	import { GeometryManager } from './lib/geometry_manager.js';
+	import { GeometryManagerInteractive } from './lib/geometry_manager_interactive.js';
+	import { StateReader } from './lib/state/reader.js';
 
 	let showSidebar = $state(false);
+	let geometryManager: GeometryManager | GeometryManagerInteractive | undefined = $state();
 
-	onMount(() => {
-		const inIframe = window.self !== window.top;
-		if (!inIframe) showSidebar = true;
-	});
+	function onMapInit(map: MaplibreMapType, maplibre: typeof import('maplibre-gl')) {
+		showSidebar = window.self === window.top;
 
-	let map: MaplibreMapType | undefined = $state();
-	let geometryManager: GeometryManager | undefined = $state();
+		const padding = 10;
+		map.setPadding({
+			top: padding,
+			right: padding + (showSidebar ? 250 : 0),
+			bottom: padding,
+			left: padding
+		});
 
-	function onMapInit(_map: MaplibreMapType, maplibre: typeof import('maplibre-gl')) {
-		map = _map;
 		map.addControl(new maplibre.AttributionControl({ compact: true }), 'bottom-left');
 
-		map.on('load', async () => {
-			const { GeometryManager } = await import('./lib/geometry_manager.js');
-			geometryManager = new GeometryManager(map!);
-			const hash = location.hash.slice(1);
-			if (hash) geometryManager.state.setHash(hash);
-			addEventListener('hashchange', () => geometryManager!.state.setHash(location.hash.slice(1)));
-		});
+		if (showSidebar) {
+			geometryManager = new GeometryManagerInteractive(map);
+		} else {
+			geometryManager = new GeometryManager(map);
+		}
+
+		let hash = location.hash.slice(1);
+		if (!hash) hash = window.frameElement?.getAttribute('data') ?? '';
+		if (hash) {
+			readHash(hash);
+		} else {
+			const bbox = getCountryBoundingBox();
+			if (bbox) map.fitBounds(bbox, { animate: false });
+		}
+
+		addEventListener('hashchange', () => readHash(location.hash.slice(1)));
+
+		function readHash(hash: string) {
+			if (!geometryManager) return;
+			const stateReader = StateReader.fromBase64(hash);
+			geometryManager.loadState(stateReader.readRoot());
+		}
 	}
 </script>
 
@@ -33,12 +52,13 @@
 	<div class="container">
 		<BasicMap
 			{onMapInit}
-			styleOptions={{ disableDarkMode: true }}
+			emptyStyle={true}
 			mapOptions={{ attributionControl: false }}
+			styleOptions={{ darkMode: false }}
 		></BasicMap>
 	</div>
-	{#if showSidebar && geometryManager}
-		<Sidebar {geometryManager} width={200} />
+	{#if showSidebar && geometryManager && geometryManager.isInteractive()}
+		<Sidebar {geometryManager} />
 
 		<style>
 			.page .container {
@@ -52,6 +72,16 @@
 </div>
 
 <style>
+	.page {
+		--color-blue: #158;
+		--color-green: #1a1;
+		--color-bg: #fff;
+		--color-text: #000;
+		--btn-gap: 5px;
+		--gap: 10px;
+		--border-radius: 1em;
+	}
+
 	.page,
 	.container {
 		width: 100%;
@@ -59,6 +89,7 @@
 		position: relative;
 		min-height: 6em;
 	}
+
 	:global(.maplibregl-ctrl-attrib) {
 		display: flex;
 		align-items: center;

package/dist/components/MapEditor/components/Dialog.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { EventHandler } from '../lib/utils/event_handler.js';
+
+	let {
+		children = $bindable(),
+		size,
+		onopen,
+		onclose
+	}: {
+		children?: Snippet;
+		size?: 'big' | 'fullscreen' | 'small';
+		onopen?: () => void;
+		onclose?: () => void;
+	} = $props();
+
+	let dialog: HTMLDialogElement | null = null;
+	export const eventHandler = new EventHandler();
+
+	export function getNode(): HTMLDialogElement {
+		return dialog!;
+	}
+
+	export function open() {
+		dialog?.showModal();
+		if (onopen) onopen();
+		eventHandler.emit('open');
+	}
+
+	export function close() {
+		dialog?.close();
+		if (onclose) onclose();
+		eventHandler.emit('close');
+	}
+
+	export function isOpen(): boolean {
+		return dialog?.open ?? false;
+	}
+</script>
+
+<dialog bind:this={dialog} class={size}>
+	<button onclick={close}>&#x2715;</button>
+	{@render children?.()}
+</dialog>
+
+<style>
+	dialog {
+		max-width: 100vw;
+		max-height: 100vh;
+		min-width: 300px;
+		min-height: 100px;
+		width: 80vw;
+		height: 80vh;
+
+		background-color: rgba(255, 255, 255, 0.8);
+		backdrop-filter: blur(10px);
+		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
+		z-index: 10000;
+		border: 0.5px solid rgba(0, 0, 0, 0.3);
+		border-radius: 10px;
+		box-sizing: border-box;
+		padding: 20px;
+
+		&.fullscreen {
+			width: calc(100vw - 20px);
+			height: calc(100vh - 20px);
+		}
+
+		&.small {
+			width: fit-content;
+			height: fit-content;
+		}
+	}
+
+	dialog::backdrop {
+		backdrop-filter: blur(2px) brightness(0.9);
+	}
+
+	button {
+		position: absolute;
+		top: 5px;
+		right: 5px;
+		font-size: 20px;
+		cursor: pointer;
+		background: none;
+		border: none;
+		width: 25px;
+		height: 25px;
+		text-align: center;
+		padding: 0;
+	}
+</style>

package/dist/components/MapEditor/components/Dialog.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import { EventHandler } from '../lib/utils/event_handler.js';
+type $$ComponentProps = {
+    children?: Snippet;
+    size?: 'big' | 'fullscreen' | 'small';
+    onopen?: () => void;
+    onclose?: () => void;
+};
+declare const Dialog: import("svelte").Component<$$ComponentProps, {
+    eventHandler: EventHandler;
+    getNode: () => HTMLDialogElement;
+    open: () => void;
+    close: () => void;
+    isOpen: () => boolean;
+}, "children">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/MapEditor/components/DialogFile.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import Dialog from './Dialog.svelte';
+	import { EventHandler } from '../lib/utils/event_handler.js';
+
+	type Mode = 'download' | 'new' | null;
+	let mode: Mode = $state(null);
+	let dialog: Dialog | null = null;
+	let input: HTMLInputElement | null = $state(null);
+	let eventHandler = new EventHandler();
+
+	async function openDialog(newMode: Mode) {
+		if (!dialog) return;
+		mode = newMode;
+
+		dialog.eventHandler.clear();
+		eventHandler.clear();
+
+		dialog.open();
+		await tick();
+		dialog.getNode()?.querySelector<HTMLButtonElement>('button[data-focus]')?.focus();
+		return;
+	}
+
+	async function closeDialog() {
+		dialog?.close();
+		dialog?.eventHandler.clear();
+		eventHandler.clear();
+		mode = null;
+		return tick();
+	}
+
+	export async function askDownloadFilename(initialFilename: string): Promise<string | null> {
+		if (!dialog) return null;
+		await openDialog('download');
+		initInput(initialFilename);
+		const { response, value } = await getResponse(true);
+		return (response && value?.trim()) || null;
+	}
+
+	export async function askCreateNew(): Promise<boolean> {
+		if (!dialog) return false;
+		await openDialog('new');
+		const { response } = await getResponse(false);
+		return response;
+	}
+
+	async function getResponse(defaultValue: boolean): Promise<{ response: boolean; value: string | null }> {
+		const response = await new Promise<boolean>((resolve) => {
+			if (!dialog) return resolve(false);
+			dialog!.eventHandler.on('close', () => resolve(false));
+			eventHandler.on('A', () => resolve(!defaultValue));
+			eventHandler.on('B', () => resolve(defaultValue));
+		});
+		const value = input?.value ?? null;
+		await closeDialog();
+		return { response, value };
+	}
+
+	function emitA() {
+		eventHandler.emit('A');
+	}
+
+	function emitB() {
+		eventHandler.emit('B');
+	}
+
+	function initInput(value: string) {
+		if (!input) return;
+		input.value = value;
+		input.addEventListener('keypress', (e) => {
+			if (e.key === 'Enter') eventHandler.emit('B');
+		});
+	}
+</script>
+
+<Dialog bind:this={dialog} size="small">
+	{#if mode == 'download'}
+		<h2>Download File</h2>
+		<label>
+			File name:
+			<input type="text" bind:this={input} spellcheck="false" />
+		</label>
+		<div class="grid2">
+			<button class="btn" onclick={emitA}>Cancel</button>
+			<button class="btn" onclick={emitB} data-focus>Download</button>
+		</div>
+	{/if}
+	{#if mode == 'new'}
+		<h2>New Map</h2>
+		<p>Do you want to create a new map?</p>
+		<div class="grid2">
+			<button class="btn" onclick={emitA}>OK</button>
+			<button class="btn" onclick={emitB} data-focus>Cancel</button>
+		</div>
+	{/if}
+</Dialog>
+
+<style>
+	h2 {
+		text-align: center;
+		margin-top: 0;
+	}
+	.grid2 {
+		margin: 0;
+	}
+	label,
+	p {
+		display: block;
+		margin-bottom: 10px;
+	}
+</style>

package/dist/components/MapEditor/components/DialogFile.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const DialogFile: import("svelte").Component<Record<string, never>, {
+    askDownloadFilename: (initialFilename: string) => Promise<string | null>;
+    askCreateNew: () => Promise<boolean>;
+}, "">;
+type DialogFile = ReturnType<typeof DialogFile>;
+export default DialogFile;