@versatiles/svelte 1.0.0 → 1.0.2

package/dist/components/BBoxMap/AutoComplete.svelte

@@ -1,93 +1,120 @@
 <!-- AutoComplete.svelte -->
-<script lang="ts" generics="T">import { isDarkMode } from '../../utils/map_style.js';
-/* eslint svelte/no-at-html-tags: off */
-let { change, initialInputText, inputText = $bindable(''), items = [], maxItems = 10, minChar = 3, placeholder = '' } = $props();
-import { onMount } from 'svelte';
-let inputElement; // Reference to DOM element
-let autocompleteElement; // Reference to DOM element
-let isOpen = $state(false);
-let results = $state([]);
-let selectedIndex = $state(0);
-// Escape special characters in search string for use in regex
-const regExpEscape = (s) => s.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
-if (inputText.length >= minChar) {
-    const r = filterResults();
-    if (r.length > 0) {
-        const { key, value } = r[0];
-        inputText = key;
-        change(JSON.parse(JSON.stringify(value)));
-    }
-    else {
-        inputText = '';
-    }
-}
-// Handle input change
-function onChange() {
-    if (inputText.length >= minChar) {
-        results = filterResults();
-        selectedIndex = 0;
-        isOpen = true;
-    }
-    else {
-        isOpen = false;
-    }
-}
-function onFocus() {
-    inputElement.setSelectionRange(0, 1000);
-}
-// Filter results based on search query
-function filterResults() {
-    const searchText = inputText.trim();
-    const searchTextUpper = searchText.toUpperCase();
-    const searchReg = RegExp(regExpEscape(searchText), 'i');
-    return items
-        .filter((item) => item.key.toUpperCase().includes(searchTextUpper))
-        .slice(0, maxItems)
-        .map((item) => ({
-        ...item,
-        _label: item.key.replace(searchReg, '<span>$&</span>')
-    }));
-}
-// Handle keyboard navigation
-function onKeyDown(event) {
-    switch (event.key) {
-        case 'ArrowDown':
-            if (selectedIndex < results.length - 1)
-                selectedIndex += 1;
-            break;
-        case 'ArrowUp':
-            if (selectedIndex > 0)
-                selectedIndex -= 1;
-            break;
-        case 'Enter':
-            event.preventDefault();
-            close(selectedIndex);
-            break;
-        case 'Escape':
-            event.preventDefault();
-            close();
-            break;
-    }
-}
-// Close the autocomplete and select an item
-function close(index = -1) {
-    isOpen = false;
-    if (index >= 0 && results[index]) {
-        const { key, value } = results[index];
-        inputText = key;
-        change(JSON.parse(JSON.stringify(value)));
-    }
-}
-onMount(() => {
-    const darkMode = isDarkMode(autocompleteElement);
-    autocompleteElement.style.setProperty('--bg-color', darkMode ? '#000' : '#fff');
-    autocompleteElement.style.setProperty('--fg-color', darkMode ? '#fff' : '#000');
-    if (initialInputText) {
-        inputText = initialInputText;
-        results = filterResults();
-        close(0);
-    }
-});
+<script lang="ts" generics="T">
+	import { isDarkMode } from '../../utils/map_style.js';
+	/* eslint svelte/no-at-html-tags: off */
+
+	let {
+		change,
+		initialInputText,
+		inputText = $bindable(''),
+		items = [],
+		maxItems = 10,
+		minChar = 3,
+		placeholder = ''
+	}: {
+		change: (value: T) => void;
+		initialInputText?: string;
+		inputText?: string;
+		items?: Item[];
+		maxItems?: number;
+		minChar?: number;
+		placeholder?: string;
+	} = $props();
+
+	import { onMount } from 'svelte';
+
+	type Item = { key: string; value: T };
+	type ResultItem = Item & { _label: string };
+
+	let inputElement: HTMLInputElement; // Reference to DOM element
+	let autocompleteElement: HTMLDivElement; // Reference to DOM element
+	let isOpen = $state(false);
+	let results: ResultItem[] = $state([]);
+	let selectedIndex = $state(0);
+
+	// Escape special characters in search string for use in regex
+	const regExpEscape = (s: string) => s.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
+
+	if (inputText.length >= minChar) {
+		const r = filterResults();
+		if (r.length > 0) {
+			const { key, value } = r[0];
+			inputText = key;
+			change(JSON.parse(JSON.stringify(value)));
+		} else {
+			inputText = '';
+		}
+	}
+
+	// Handle input change
+	function onChange() {
+		if (inputText.length >= minChar) {
+			results = filterResults();
+			selectedIndex = 0;
+			isOpen = true;
+		} else {
+			isOpen = false;
+		}
+	}
+
+	function onFocus() {
+		inputElement.setSelectionRange(0, 1000);
+	}
+
+	// Filter results based on search query
+	function filterResults(): ResultItem[] {
+		const searchText = inputText.trim();
+		const searchTextUpper = searchText.toUpperCase();
+		const searchReg = RegExp(regExpEscape(searchText), 'i');
+		return items
+			.filter((item) => item.key.toUpperCase().includes(searchTextUpper))
+			.slice(0, maxItems)
+			.map((item) => ({
+				...item,
+				_label: item.key.replace(searchReg, '<span>$&</span>')
+			}));
+	}
+
+	// Handle keyboard navigation
+	function onKeyDown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowDown':
+				if (selectedIndex < results.length - 1) selectedIndex += 1;
+				break;
+			case 'ArrowUp':
+				if (selectedIndex > 0) selectedIndex -= 1;
+				break;
+			case 'Enter':
+				event.preventDefault();
+				close(selectedIndex);
+				break;
+			case 'Escape':
+				event.preventDefault();
+				close();
+				break;
+		}
+	}
+
+	// Close the autocomplete and select an item
+	function close(index = -1) {
+		isOpen = false;
+		if (index >= 0 && results[index]) {
+			const { key, value } = results[index];
+			inputText = key;
+			change(JSON.parse(JSON.stringify(value)));
+		}
+	}
+
+	onMount(() => {
+		const darkMode = isDarkMode(autocompleteElement);
+		autocompleteElement.style.setProperty('--bg-color', darkMode ? '#000' : '#fff');
+		autocompleteElement.style.setProperty('--fg-color', darkMode ? '#fff' : '#000');
+		if (initialInputText) {
+			inputText = initialInputText;
+			results = filterResults();
+			close(0);
+		}
+	});
 </script>
 
 <svelte:window on:click={() => close()} />

package/dist/components/BBoxMap/BBoxMap.svelte

@@ -1,44 +1,54 @@
 <!-- BBoxMap.svelte -->
-<script lang="ts">import 'maplibre-gl/dist/maplibre-gl.css';
-import AutoComplete from './AutoComplete.svelte';
-import { getCountryName } from '../../utils/location.js';
-import BasicMap from '../BasicMap/BasicMap.svelte';
-import { isDarkMode } from '../../utils/map_style.js';
-import { loadBBoxes } from './BBoxMap.js';
-import { BBoxDrawer } from '../../utils/draw/bbox.js';
-let { selectedBBox = $bindable() } = $props();
-const startTime = Date.now();
-let bbox;
-let map = $state();
-let bboxes = $state();
-let mapContainer;
-function onMapInit(_map) {
-    map = _map;
-    mapContainer = map.getContainer();
-    map.setPadding({ top: 31 + 5, right: 5, bottom: 5, left: 5 });
-    map.on('load', async () => {
-        bbox = new BBoxDrawer(map, [-180, -86, 180, 86], isDarkMode(mapContainer) ? '#FFFFFF' : '#000000');
-        bboxes = await loadBBoxes();
-    });
-}
-function setBBox(newBBox) {
-    selectedBBox = newBBox;
-    if (bbox && map) {
-        bbox.setGeometry(newBBox);
-        const transform = map.cameraForBounds(bbox.getBounds());
-        if (transform == null)
-            return;
-        transform.zoom = transform.zoom ?? 0 - 0.5;
-        transform.bearing = 0;
-        transform.pitch = 0;
-        if (Date.now() - startTime < 1000) {
-            map.jumpTo(transform);
-        }
-        else {
-            map.flyTo({ ...transform, essential: true, speed: 5 });
-        }
-    }
-}
+<script lang="ts">
+	import type { CameraOptions, Map as MaplibreMapType } from 'maplibre-gl';
+	import 'maplibre-gl/dist/maplibre-gl.css';
+	import AutoComplete from './AutoComplete.svelte';
+	import { getCountryName } from '../../utils/location.js';
+	import BasicMap from '../BasicMap/BasicMap.svelte';
+	import { isDarkMode } from '../../utils/map_style.js';
+	import type { BBox } from 'geojson';
+	import { loadBBoxes } from './BBoxMap.js';
+	import { BBoxDrawer } from '../../utils/draw/bbox.js';
+
+	let { selectedBBox = $bindable() }: { selectedBBox?: BBox } = $props();
+	const startTime = Date.now();
+	let bboxDrawer: BBoxDrawer;
+	let map: MaplibreMapType | undefined = $state();
+	let bboxes: { key: string; value: BBox }[] | undefined = $state();
+	let mapContainer: HTMLElement;
+
+	async function onMapLoad(_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'
+		);
+		bboxes = await loadBBoxes();
+		bboxDrawer.bbox.subscribe((bbox) => {
+			selectedBBox = bbox;
+		});
+	}
+
+	function flyToBBox(bbox: BBox) {
+		if (!map || !bbox) return;
+
+		bboxDrawer.setGeometry(bbox);
+
+		const transform = map.cameraForBounds(bboxDrawer.getBounds()) as CameraOptions;
+		if (transform == null) return;
+		transform.zoom = transform.zoom ?? 0 - 0.5;
+		transform.bearing = 0;
+		transform.pitch = 0;
+
+		if (Date.now() - startTime < 1000) {
+			map.jumpTo(transform);
+		} else {
+			map.flyTo({ ...transform, essential: true, speed: 5 });
+		}
+	}
 </script>
 
 <div class="container">
@@ -47,12 +57,12 @@ function setBBox(newBBox) {
 			<AutoComplete
 				items={bboxes}
 				placeholder="Find country, region or city …"
-				change={setBBox}
+				change={(bbox) => flyToBBox(bbox)}
 				initialInputText={getCountryName() ?? ''}
 			/>
 		</div>
 	{/if}
-	<BasicMap {onMapInit}></BasicMap>
+	<BasicMap {onMapLoad}></BasicMap>
 </div>
 
 <style>

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

@@ -1,6 +1,8 @@
 import 'maplibre-gl/dist/maplibre-gl.css';
-declare const BBoxMap: import("svelte").Component<{
-    selectedBBox?: any;
-}, {}, "selectedBBox">;
+import type { BBox } from 'geojson';
+type $$ComponentProps = {
+    selectedBBox?: BBox;
+};
+declare const BBoxMap: import("svelte").Component<$$ComponentProps, {}, "selectedBBox">;
 type BBoxMap = ReturnType<typeof BBoxMap>;
 export default BBoxMap;

package/dist/components/BasicMap/BasicMap.svelte

@@ -1,43 +1,68 @@
 <!-- BasicMap.svelte -->
-<script lang="ts">import 'maplibre-gl/dist/maplibre-gl.css';
-import { getMapStyle, isDarkMode } from '../../utils/map_style.js';
-// Props
-let { style = 'position:absolute; left:0px; top:0px; width:100%; height:100%;', styleOptions = { transitionDuration: 0 }, mapOptions = {}, map = $bindable(), onMapInit, onMapLoad } = $props();
-let container;
-$effect(() => {
-    if (container)
-        init();
-});
-async function init() {
-    if (map)
-        return;
-    let MaplibreMap = (await import('maplibre-gl')).Map;
-    if (!container)
-        throw Error();
-    const darkMode = isDarkMode(container);
-    container.style.setProperty('--bg-color', darkMode ? '#000' : '#fff');
-    container.style.setProperty('--fg-color', darkMode ? '#fff' : '#000');
-    map = new MaplibreMap({
-        container,
-        style: getMapStyle(darkMode, styleOptions),
-        renderWorldCopies: false,
-        dragRotate: false,
-        attributionControl: { compact: false },
-        fadeDuration: 0,
-        ...mapOptions
-    });
-    if (onMapInit)
-        onMapInit(map);
-    map.on('load', () => {
-        if (onMapLoad)
-            onMapLoad(map);
-    });
-}
+<script lang="ts">
+	import type { Map as MaplibreMapType, MapOptions } from 'maplibre-gl';
+	import 'maplibre-gl/dist/maplibre-gl.css';
+	import { getMapStyle, isDarkMode } from '../../utils/map_style.js';
+	import { Map as MaplibreMap } from 'maplibre-gl';
+
+	// Props
+	let {
+		style = 'position:absolute; left:0px; top:0px; width:100%; height:100%;',
+		styleOptions = { transitionDuration: 0 },
+		mapOptions = {},
+		map = $bindable(),
+		onMapInit,
+		onMapLoad
+	}: {
+		style?: string;
+		styleOptions?: Parameters<typeof getMapStyle>[1];
+		mapOptions?: Partial<MapOptions>;
+		map?: MaplibreMapType;
+		onMapInit?: (map: MaplibreMapType) => void;
+		onMapLoad?: (map: MaplibreMapType) => void;
+	} = $props();
+
+	let container: HTMLDivElement;
+
+	$effect(() => {
+		if (container) init();
+	});
+
+	async function init(): Promise<void> {
+		if (map) return;
+
+		if (!container) throw Error();
+
+		const darkMode = isDarkMode(container);
+		container.style.setProperty('--bg-color', darkMode ? '#000' : '#fff');
+		container.style.setProperty('--fg-color', darkMode ? '#fff' : '#000');
+
+		const style = getMapStyle(darkMode, styleOptions);
+		style.transition = { duration: 0, delay: 0 };
+		map = new MaplibreMap({
+			container,
+			style,
+			renderWorldCopies: false,
+			dragRotate: false,
+			attributionControl: { compact: false },
+			fadeDuration: 0,
+			...mapOptions
+		});
+
+		if (onMapInit) onMapInit(map);
+
+		map.on('load', () => {
+			if (onMapLoad) onMapLoad(map!);
+		});
+	}
 </script>
 
 <div class="map" {style} bind:this={container}></div>
 
 <style>
+	.map :global(canvas) {
+		outline: none !important;
+	}
 	.map :global(.maplibregl-ctrl-attrib) {
 		background-color: color-mix(in srgb, var(--bg-color) 50%, transparent) !important;
 		color: var(--fg-color) !important;

package/dist/components/LocatorMap/LocatorMap.svelte

@@ -1,64 +1,71 @@
 <!-- LocatorMap.svelte -->
-<script lang="ts">import 'maplibre-gl/dist/maplibre-gl.css';
-import BasicMap from '../BasicMap/BasicMap.svelte';
-let map;
-function onMapInit(_map) {
-    map = _map;
-    map.on('load', async () => {
-        let coordinates = [0, 0];
-        const initialHash = parseHash();
-        if (initialHash) {
-            console.log('initialHash', initialHash);
-            coordinates = [initialHash[1], initialHash[2]];
-            map.setZoom(initialHash[0]);
-            map.setCenter(coordinates);
-        }
-        else {
-            map.on('move', () => {
-                const { lng, lat } = map.getCenter();
-                source.setData({
-                    type: 'Feature',
-                    geometry: { type: 'Point', coordinates: [lng, lat] },
-                    properties: {}
-                });
-            });
-            map.on('moveend', () => updateHash());
-        }
-        map.addSource('marker', {
-            type: 'geojson',
-            data: { type: 'Feature', geometry: { type: 'Point', coordinates }, properties: {} }
-        });
-        const source = map.getSource('marker');
-        map.addLayer({
-            id: 'marker',
-            source: 'marker',
-            type: 'symbol',
-            layout: {
-                'icon-image': 'basics:icon-embassy',
-                'icon-size': 1,
-                'icon-overlap': 'always'
-            },
-            paint: {
-                'icon-color': '#FF0000',
-                'icon-halo-color': '#FFFFFF',
-                'icon-halo-width': 1,
-                'icon-halo-blur': 0
-            }
-        });
-        function parseHash() {
-            const hash = window.location.hash
-                .replace(/[^0-9/.]+/g, '')
-                .split('/')
-                .map(parseFloat);
-            return hash.length === 3 ? hash : undefined;
-        }
-        function updateHash() {
-            const center = map.getCenter();
-            const zoom = map.getZoom();
-            window.location.hash = `#${zoom.toFixed(2)}/${center.lng.toFixed(6)}/${center.lat.toFixed(6)}`;
-        }
-    });
-}
+<script lang="ts">
+	import type { Map as MaplibreMapType, GeoJSONSource } from 'maplibre-gl';
+	import 'maplibre-gl/dist/maplibre-gl.css';
+	import BasicMap from '../BasicMap/BasicMap.svelte';
+	let map: MaplibreMapType;
+
+	function onMapInit(_map: MaplibreMapType) {
+		map = _map;
+		map.on('load', async () => {
+			let coordinates: [number, number] = [0, 0];
+			const initialHash = parseHash();
+			if (initialHash) {
+				console.log('initialHash', initialHash);
+				coordinates = [initialHash[1], initialHash[2]];
+				map.setZoom(initialHash[0]);
+				map.setCenter(coordinates);
+			} else {
+				map.on('move', () => {
+					const { lng, lat } = map.getCenter();
+					source.setData({
+						type: 'Feature',
+						geometry: { type: 'Point', coordinates: [lng, lat] },
+						properties: {}
+					});
+				});
+				map.on('moveend', () => updateHash());
+			}
+
+			map.addSource('marker', {
+				type: 'geojson',
+				data: { type: 'Feature', geometry: { type: 'Point', coordinates }, properties: {} }
+			});
+
+			const source = map.getSource('marker') as GeoJSONSource;
+
+			map.addLayer({
+				id: 'marker',
+				source: 'marker',
+				type: 'symbol',
+				layout: {
+					'icon-image': 'basics:icon-embassy',
+					'icon-size': 1,
+					'icon-overlap': 'always'
+				},
+				paint: {
+					'icon-color': '#FF0000',
+					'icon-halo-color': '#FFFFFF',
+					'icon-halo-width': 1,
+					'icon-halo-blur': 0
+				}
+			});
+
+			function parseHash(): [number, number, number] | undefined {
+				const hash = window.location.hash
+					.replace(/[^0-9/.]+/g, '')
+					.split('/')
+					.map(parseFloat);
+				return hash.length === 3 ? (hash as [number, number, number]) : undefined;
+			}
+
+			function updateHash() {
+				const center = map.getCenter();
+				const zoom = map.getZoom();
+				window.location.hash = `#${zoom.toFixed(2)}/${center.lng.toFixed(6)}/${center.lat.toFixed(6)}`;
+			}
+		});
+	}
 </script>
 
 <div class="container">