@versatiles/svelte 0.3.0 → 1.0.1

package/README.md

@@ -23,17 +23,22 @@ npm i @versatiles/svelte
 	</tr>
 	<tr>
 		<th>BasicMap</th>
-		<td><img src="./screenshots/basic-map-light.png"></td>
-		<td><img src="./screenshots/basic-map-dark.png"></td>
+		<td><img width="512" src="./screenshots/basic-map-light.png"></td>
+		<td><img width="512" src="./screenshots/basic-map-dark.png"></td>
 	</tr>
 	<tr>
 		<th>BBoxMap</th>
-		<td><img src="./screenshots/bbox-map-light.png"></td>
-		<td><img src="./screenshots/bbox-map-dark.png"></td>
+		<td><img width="512" src="./screenshots/bbox-map-light.png"></td>
+		<td><img width="512" src="./screenshots/bbox-map-dark.png"></td>
 	</tr>
 	<tr>
 		<th>LocatorMap</th>
-		<td><img src="./screenshots/locator-map-light.png"></td>
-		<td><img src="./screenshots/locator-map-dark.png"></td>
+		<td><img width="512" src="./screenshots/locator-map-light.png"></td>
+		<td><img width="512" src="./screenshots/locator-map-dark.png"></td>
+	</tr>
+	<tr>
+		<th>MapEditor</th>
+		<td><img width="512" src="./screenshots/map-editor-light.png"></td>
+		<td><img width="512" src="./screenshots/map-editor-dark.png"></td>
 	</tr>
 </table>

package/dist/components/BBoxMap/AutoComplete.svelte

@@ -0,0 +1,176 @@
+<!-- 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>
+
+<svelte:window on:click={() => close()} />
+
+<div class="autocomplete" bind:this={autocompleteElement}>
+	<input
+		type="text"
+		bind:value={inputText}
+		{placeholder}
+		autocomplete="off"
+		oninput={onChange}
+		onkeydown={onKeyDown}
+		onfocusin={onFocus}
+		onclick={(e) => e.stopPropagation()}
+		bind:this={inputElement}
+		aria-activedescendant={isOpen ? `result-${selectedIndex}` : undefined}
+		aria-autocomplete="list"
+		aria-controls="autocomplete-results"
+	/>
+	<div class="autocomplete-results" class:hide-results={!isOpen}>
+		{#each results as result, i}
+			<button
+				onclick={() => close(i)}
+				class={i === selectedIndex ? ' is-active' : ''}
+				role="option"
+				aria-selected={i === selectedIndex}
+			>
+				{@html result._label}
+			</button>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.autocomplete {
+		position: relative;
+		border-radius: 0.5em;
+		background: color-mix(in srgb, var(--bg-color) 80%, transparent);
+		box-sizing: border-box;
+		line-height: normal;
+	}
+
+	input {
+		width: 100%;
+		display: block;
+		box-sizing: border-box;
+		padding: 0.3em 0.6em;
+		border: none;
+		background: none;
+		color: var(--fg-color);
+	}
+
+	.autocomplete-results {
+		padding: 0;
+		margin: 0;
+		background: none;
+		width: 100%;
+		display: block;
+		border-radius: 0 0 0.5em 0.5em;
+	}
+
+	.autocomplete-results.hide-results {
+		display: none;
+	}
+
+	button {
+		padding: 0.2rem 0.5rem;
+		cursor: pointer;
+		border: none;
+		display: block;
+		background: transparent;
+		font-weight: normal;
+		color: color-mix(in srgb, var(--fg-color) 50%, transparent);
+		width: 100%;
+		text-align: left;
+	}
+
+	button > :global(span) {
+		color: var(--fg-color);
+	}
+
+	button.is-active,
+	button:hover {
+		background-color: color-mix(in srgb, var(--fg-color) 15%, transparent);
+	}
+</style>

package/dist/components/{AutoComplete.svelte.d.ts → BBoxMap/AutoComplete.svelte.d.ts}

@@ -1,32 +1,26 @@
 declare class __sveltets_Render<T> {
     props(): {
-        placeholder?: string;
-        minChar?: number;
-        maxItems?: number;
-        items: {
+        change: (value: T) => void;
+        initialInputText?: string;
+        inputText?: string;
+        items?: {
             key: string;
             value: T;
-        }[];
-        setInputText?: ((text: string) => void) | undefined;
-    };
-    events(): {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+        }[] | undefined;
+        maxItems?: number;
+        minChar?: number;
+        placeholder?: string;
     };
+    events(): {};
     slots(): {};
-    bindings(): string;
-    exports(): {
-        setInputText: (text: string) => void;
-    };
+    bindings(): "inputText";
+    exports(): {};
 }
 interface $$IsomorphicComponent {
     new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
     } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<T>['events']>;
-    }): ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const AutoComplete: $$IsomorphicComponent;

package/dist/components/BBoxMap/BBoxMap.svelte

@@ -1,55 +1,44 @@
 <!-- BBoxMap.svelte -->
-<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 bboxes: { key: string; value: BBox }[] | undefined = undefined;
-	let mapContainer: HTMLDivElement;
-	let autoComplete: AutoComplete<BBox> | undefined = undefined;
-	const startTime = Date.now();
-	let bbox: BBoxDrawer;
-	let map: MaplibreMapType; // Declare map instance at the top level
-
-	function handleMapReady(event: CustomEvent) {
-		map = event.detail.map;
-		map.setPadding({ top: 31 + 5, right: 5, bottom: 5, left: 5 });
-
-		map.on('load', async () => {
-			bbox = new BBoxDrawer(map, {
-				color: isDarkMode(mapContainer) ? '#FFFFFF' : '#000000'
-			});
-			bboxes = await loadBBoxes();
-		});
-	}
-
-	function flyTo(newBBox: BBox) {
-		if (bbox) {
-			bbox.setGeometry(newBBox);
-
-			const transform = map.cameraForBounds(bbox.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 });
-			}
-		}
-	}
-
-	$: if (autoComplete) {
-		autoComplete?.setInputText(getCountryName() ?? '');
-	}
+<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 bboxDrawer;
+let map = $state();
+let bboxes = $state();
+let mapContainer;
+async function onMapLoad(_map) {
+    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) {
+    if (!map || !bbox)
+        return;
+    bboxDrawer.setGeometry(bbox);
+    const transform = map.cameraForBounds(bboxDrawer.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>
 
 <div class="container">
@@ -58,12 +47,12 @@
 			<AutoComplete
 				items={bboxes}
 				placeholder="Find country, region or city …"
-				on:change={(e) => flyTo(e.detail)}
-				bind:this={autoComplete}
+				change={(bbox) => flyToBBox(bbox)}
+				initialInputText={getCountryName() ?? ''}
 			/>
 		</div>
 	{/if}
-	<BasicMap {map} bind:container={mapContainer} on:mapReady={handleMapReady}></BasicMap>
+	<BasicMap {onMapLoad}></BasicMap>
 </div>
 
 <style>

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

@@ -1,19 +1,8 @@
 import 'maplibre-gl/dist/maplibre-gl.css';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const BBoxMap: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BBoxMap = InstanceType<typeof BBoxMap>;
+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,41 +1,38 @@
 <!-- BasicMap.svelte -->
-<script lang="ts">
-	import type { Map as MaplibreMapType, MapOptions } from 'maplibre-gl';
-	import { onMount, createEventDispatcher } from 'svelte';
-	import 'maplibre-gl/dist/maplibre-gl.css';
-	import { getMapStyle, isDarkMode } from '../../utils/map_style.js';
-	import type { StyleBuilderOptions } from '@versatiles/style';
-
-	// Props
-	export let style: string = 'position:absolute; left:0px; top:0px; width:100%; height:100%;';
-	export let container: HTMLDivElement | undefined = undefined;
-	export let map: MaplibreMapType | undefined = undefined;
-	export let styleOptions: StyleBuilderOptions = {};
-	export let mapOptions: Partial<MapOptions> = {};
-
-	// Create the event dispatcher
-	const dispatch = createEventDispatcher();
-
-	onMount(async (): Promise<void> => {
-		let MaplibreMap: typeof MaplibreMapType = (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 },
-			...mapOptions
-		});
-
-		dispatch('mapReady', { map });
-	});
+<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>
 
 <div class="map" {style} bind:this={container}></div>

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

@@ -1,29 +1,14 @@
 import type { Map as MaplibreMapType, MapOptions } from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import type { StyleBuilderOptions } from '@versatiles/style';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const BasicMap: $$__sveltets_2_IsomorphicComponent<{
+import { getMapStyle } from '../../utils/map_style.js';
+type $$ComponentProps = {
     style?: string;
-    container?: HTMLDivElement | undefined;
-    map?: MaplibreMapType | undefined;
-    styleOptions?: StyleBuilderOptions;
+    styleOptions?: Parameters<typeof getMapStyle>[1];
     mapOptions?: Partial<MapOptions>;
-}, {
-    mapReady: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BasicMap = InstanceType<typeof BasicMap>;
+    map?: MaplibreMapType;
+    onMapInit?: (map: MaplibreMapType) => void;
+    onMapLoad?: (map: MaplibreMapType) => void;
+};
+declare const BasicMap: import("svelte").Component<$$ComponentProps, {}, "map">;
+type BasicMap = ReturnType<typeof BasicMap>;
 export default BasicMap;

package/dist/components/LocatorMap/LocatorMap.svelte

@@ -1,27 +1,68 @@
 <!-- LocatorMap.svelte -->
-<script lang="ts">
-	import type { Map as MaplibreMapType } from 'maplibre-gl';
-	import 'maplibre-gl/dist/maplibre-gl.css';
-	import BasicMap from '../BasicMap/BasicMap.svelte';
-	//import SpriteLibrary from '../../utils/sprite_library.js';
-	import { MarkerDrawer } from '../../utils/draw/marker.js';
-
-	let mapContainer: HTMLDivElement;
-	let map: MaplibreMapType;
-	//let spriteLibrary = new SpriteLibrary();
-	let markers = [];
-
-	function handleMapReady(event: CustomEvent) {
-		map = event.detail.map;
-		map.on('load', async () => {
-			//const list = await spriteLibrary.getSpriteList();
-			markers.push(new MarkerDrawer(map, { point: [25, 22] }));
-		});
-	}
+<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>
 
 <div class="container">
-	<BasicMap {map} bind:container={mapContainer} on:mapReady={handleMapReady}></BasicMap>
+	<BasicMap {onMapInit}></BasicMap>
 </div>
 
 <style>

package/dist/components/MapEditor/Editor.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import {} from './editor.scss';
+import EditorMarker from './EditorMarker.svelte';
+import EditorLine from './EditorLine.svelte';
+import { LineElement } from './lib/element_line.js';
+import { MarkerElement } from './lib/element_marker.js';
+const { element } = $props();
+let name = $state(element.name);
+$effect(() => {
+    name = element.name;
+});
+$effect(() => {
+    //element.name = name;
+});
+</script>
+
+{#if element}
+	<label for="input-name">Name</label>
+	<input id="input-name" type="text" bind:value={name} />
+	{#if element instanceof MarkerElement}
+		<EditorMarker {element} />
+	{/if}
+	{#if element instanceof LineElement}
+		<EditorLine {element} />
+	{/if}
+{/if}

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

@@ -0,0 +1,7 @@
+import type { AbstractElement } from './lib/element_abstract.js';
+type $$ComponentProps = {
+    element: AbstractElement;
+};
+declare const Editor: import("svelte").Component<$$ComponentProps, {}, "">;
+type Editor = ReturnType<typeof Editor>;
+export default Editor;

package/dist/components/MapEditor/EditorLine.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">import {} from './editor.scss';
+import { get } from 'svelte/store';
+import { dashArrays } from './lib/element_line.js';
+const dashedList = Array.from(dashArrays.keys()).sort();
+let { element } = $props();
+let color = $state(get(element.color));
+let width = $state(get(element.width));
+let dashed = $state(get(element.dashed));
+$effect(() => element.color.set(color));
+$effect(() => element.width.set(width));
+$effect(() => element.dashed.set(dashed));
+</script>
+
+<div class="row">
+	<label for="dashed-input">Dashed</label>
+	<select id="dashed-input" bind:value={dashed}>
+		{#each dashedList as d}
+			<option value={d}>{d}</option>
+		{/each}
+	</select>
+
+	<label for="color-input">Color</label>
+	<input id="color-input" type="color" bind:value={color} />
+
+	<label for="width-input">Width</label>
+	<input id="width-input" type="range" min="0.5" max="5" step="0.5" bind:value={width} />
+</div>