@versatiles/svelte 0.2.0 → 1.0.0

package/README.md

@@ -1,5 +1,12 @@
+[![NPM Version](https://img.shields.io/npm/v/%40versatiles%2Fsvelte)](https://www.npmjs.com/package/@versatiles/svelte)
+[![NPM Downloads](https://img.shields.io/npm/dy/%40versatiles%2Fsvelte)](https://www.npmjs.com/package/@versatiles/svelte)
+[![Code Coverage](https://codecov.io/gh/versatiles-org/node-versatiles-svelte/branch/main/graph/badge.svg?token=DaJDN0E3Ae)](https://codecov.io/gh/versatiles-org/node-versatiles-svelte)
+[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/versatiles-org/node-versatiles-svelte/ci.yml)](https://github.com/versatiles-org/node-versatiles-svelte/actions/workflows/ci.yml)
+
 # Svelte Components for VersaTiles
 
+Play with them: https://versatiles.org/node-versatiles-svelte/
+
 ## Install
 
 ```bash
@@ -16,12 +23,22 @@ npm i @versatiles/svelte
 	</tr>
 	<tr>
 		<th>BasicMap</th>
-		<td><img src="https://github.com/versatiles-org/node-versatiles-svelte/releases/latest/download/basic-map-light.png"></td>
-		<td><img src="https://github.com/versatiles-org/node-versatiles-svelte/releases/latest/download/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="https://github.com/versatiles-org/node-versatiles-svelte/releases/latest/download/bbox-map-light.png"></td>
-		<td><img src="https://github.com/versatiles-org/node-versatiles-svelte/releases/latest/download/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 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.d.ts

@@ -1,15 +1,4 @@
-import type { GeoJSON } from 'geojson';
-import type { LngLat, Point } from 'maplibre-gl';
-export type BBox = [number, number, number, number];
-export type BBoxDrag = '0_' | '1_' | '_0' | '_1' | '00' | '01' | '10' | '11' | false;
-export declare function getBBoxDrag(point: Point, bboxPixel: BBox): BBoxDrag;
-export declare function dragBBox(bbox: BBox, drag: BBoxDrag, lngLat: LngLat): {
-    bbox: BBox;
-    drag: BBoxDrag;
-};
-export declare function getCursor(drag: BBoxDrag): string | false;
-export declare function getBBoxGeometry(bbox: BBox): GeoJSON;
 export declare function loadBBoxes(): Promise<{
     key: string;
-    value: BBox;
+    value: [number, number, number, number];
 }[]>;

package/dist/components/BBoxMap/BBoxMap.js

@@ -1,204 +1,5 @@
-export function getBBoxDrag(point, bboxPixel) {
-    const maxDistance = 5;
-    const { x, y } = point;
-    const [x0, y0, x1, y1] = bboxPixel;
-    // Don't think outside the box
-    if (x < x0 - maxDistance)
-        return false;
-    if (x > x1 + maxDistance)
-        return false;
-    if (y < y0 - maxDistance)
-        return false;
-    if (y > y1 + maxDistance)
-        return false;
-    const drag = [
-        Math.abs(x0 - x) < maxDistance,
-        Math.abs(y0 - y) < maxDistance,
-        Math.abs(x1 - x) < maxDistance,
-        Math.abs(y1 - y) < maxDistance
-    ];
-    if (drag[0] && drag[2]) {
-        if (Math.abs(x0 - x) < Math.abs(x1 - x)) {
-            drag[2] = false;
-        }
-        else {
-            drag[0] = false;
-        }
-    }
-    if (drag[1] && drag[3]) {
-        if (Math.abs(y0 - y) < Math.abs(y1 - y)) {
-            drag[3] = false;
-        }
-        else {
-            drag[1] = false;
-        }
-    }
-    if (drag[0]) {
-        if (drag[1])
-            return '01';
-        if (drag[3])
-            return '00';
-        return '0_';
-    }
-    else if (drag[1]) {
-        if (drag[2])
-            return '11';
-        return '_1';
-    }
-    else if (drag[2]) {
-        if (drag[3])
-            return '10';
-        return '1_';
-    }
-    else if (drag[3]) {
-        return '_0';
-    }
-    else
-        return false;
-}
-export function dragBBox(bbox, drag, lngLat) {
-    const x = Math.round(lngLat.lng * 1e3) / 1e3;
-    const y = Math.round(lngLat.lat * 1e3) / 1e3;
-    switch (drag) {
-        case '_0':
-            bbox[1] = y;
-            break;
-        case '_1':
-            bbox[3] = y;
-            break;
-        case '0_':
-            bbox[0] = x;
-            break;
-        case '00':
-            bbox[0] = x;
-            bbox[1] = y;
-            break;
-        case '01':
-            bbox[0] = x;
-            bbox[3] = y;
-            break;
-        case '1_':
-            bbox[2] = x;
-            break;
-        case '10':
-            bbox[2] = x;
-            bbox[1] = y;
-            break;
-        case '11':
-            bbox[2] = x;
-            bbox[3] = y;
-            break;
-    }
-    if (bbox[2] < bbox[0]) {
-        // flip horizontal
-        const t = bbox[0];
-        bbox[0] = bbox[2];
-        bbox[2] = t;
-        switch (drag) {
-            case '0_':
-                drag = '1_';
-                break;
-            case '00':
-                drag = '10';
-                break;
-            case '01':
-                drag = '11';
-                break;
-            case '1_':
-                drag = '0_';
-                break;
-            case '10':
-                drag = '00';
-                break;
-            case '11':
-                drag = '01';
-                break;
-        }
-    }
-    if (bbox[3] < bbox[1]) {
-        // flip vertical
-        const t = bbox[1];
-        bbox[1] = bbox[3];
-        bbox[3] = t;
-        switch (drag) {
-            case '_0':
-                drag = '_1';
-                break;
-            case '_1':
-                drag = '_0';
-                break;
-            case '00':
-                drag = '01';
-                break;
-            case '01':
-                drag = '00';
-                break;
-            case '10':
-                drag = '11';
-                break;
-            case '11':
-                drag = '10';
-                break;
-        }
-    }
-    return { drag, bbox };
-}
-export function getCursor(drag) {
-    switch (drag) {
-        case '_0':
-            return 'ns-resize';
-        case '_1':
-            return 'ns-resize';
-        case '0_':
-            return 'ew-resize';
-        case '00':
-            return 'nesw-resize';
-        case '01':
-            return 'nwse-resize';
-        case '1_':
-            return 'ew-resize';
-        case '10':
-            return 'nwse-resize';
-        case '11':
-            return 'nesw-resize';
-    }
-    return false;
-}
-export function getBBoxGeometry(bbox) {
-    return {
-        type: 'FeatureCollection',
-        features: [polygon(getRing([-180, -86, 180, 86]), getRing(bbox)), linestring(getRing(bbox))]
-    };
-    function polygon(...coordinates) {
-        return {
-            type: 'Feature',
-            geometry: { type: 'Polygon', coordinates },
-            properties: {}
-        };
-    }
-    function linestring(coordinates) {
-        return {
-            type: 'Feature',
-            geometry: { type: 'LineString', coordinates },
-            properties: {}
-        };
-    }
-    function getRing(bbox) {
-        const x0 = Math.min(bbox[0], bbox[2]);
-        const x1 = Math.max(bbox[0], bbox[2]);
-        const y0 = Math.min(bbox[1], bbox[3]);
-        const y1 = Math.max(bbox[1], bbox[3]);
-        return [
-            [x0, y0],
-            [x1, y0],
-            [x1, y1],
-            [x0, y1],
-            [x0, y0]
-        ];
-    }
-}
 export async function loadBBoxes() {
-    const data = await import('./bboxes.json');
+    const data = await import('../../components/BBoxMap/bboxes.json');
     const bboxes = data.default.map((e) => {
         const key = e[0];
         const value = e.slice(1, 5);

package/dist/components/BBoxMap/BBoxMap.svelte

@@ -1,128 +1,44 @@
 <!-- BBoxMap.svelte -->
-<script lang="ts">
-	import type { CameraOptions, Point, Map as MaplibreMapType, GeoJSONSource } from 'maplibre-gl';
-	import type { BBox, BBoxDrag } from './BBoxMap.js';
-	import { onMount } from 'svelte';
-	import 'maplibre-gl/dist/maplibre-gl.css';
-	import { dragBBox, getBBoxDrag, loadBBoxes, getBBoxGeometry, getCursor } from './BBoxMap.js';
-	import AutoComplete from '../AutoComplete.svelte';
-	import { getCountry } from '../../utils/location.js';
-	import BasicMap from '../BasicMap/BasicMap.svelte';
-	import { isDarkMode } from '../../utils/style.js';
-
-	let bboxes: { key: string; value: BBox }[] | undefined = undefined;
-	let mapContainer: HTMLDivElement;
-	let autoComplete: AutoComplete<BBox> | undefined = undefined;
-	const worldBBox: BBox = [-180, -85, 180, 85];
-	const startTime = Date.now();
-	export let selectedBBox: BBox = worldBBox;
-	let map: MaplibreMapType; // Declare map instance at the top level
-
-	onMount(async () => {
-		bboxes = await loadBBoxes();
-		start();
-	});
-
-	function handleMapReady(event: CustomEvent) {
-		map = event.detail.map;
-		map.setPadding({ top: 31 + 5, right: 5, bottom: 5, left: 5 });
-
-		const canvas = map.getCanvasContainer();
-		const bboxColor = isDarkMode(mapContainer) ? '#FFFFFF' : '#000000';
-
-		map.on('load', () => {
-			map.addSource('bbox', { type: 'geojson', data: getBBoxGeometry(selectedBBox) });
-			map.addLayer({
-				id: 'bbox-line',
-				type: 'line',
-				source: 'bbox',
-				filter: ['==', '$type', 'LineString'],
-				layout: { 'line-cap': 'round', 'line-join': 'round' },
-				paint: { 'line-color': bboxColor, 'line-width': 0.5 }
-			});
-			map.addLayer({
-				id: 'bbox-fill',
-				type: 'fill',
-				source: 'bbox',
-				filter: ['==', '$type', 'Polygon'],
-				paint: { 'fill-color': bboxColor, 'fill-opacity': 0.2 }
-			});
-		});
-
-		function getDrag(point: Point): BBoxDrag {
-			const { x: x0, y: y1 } = map.project([selectedBBox[0], selectedBBox[1]]);
-			const { x: x1, y: y0 } = map.project([selectedBBox[2], selectedBBox[3]]);
-			return getBBoxDrag(point, [x0, y0, x1, y1]);
-		}
-
-		let lastDrag: BBoxDrag = false;
-		let dragging = false;
-		map.on('mousemove', (e) => {
-			if (dragging) {
-				if (e.originalEvent.buttons % 2) {
-					const { drag, bbox } = dragBBox(selectedBBox, lastDrag, e.lngLat);
-					lastDrag = drag;
-					selectedBBox = bbox;
-					redrawBBox();
-					e.preventDefault();
-				} else {
-					dragging = false;
-				}
-			} else {
-				const drag = getDrag(e.point);
-				if (drag !== lastDrag) {
-					lastDrag = drag;
-					canvas.style.cursor = getCursor(drag) || 'grab';
-				}
-			}
-		});
-
-		map.on('mousedown', (e) => {
-			if (e.originalEvent.buttons % 2) {
-				const drag = getDrag(e.point);
-				lastDrag = drag;
-				if (drag) {
-					dragging = true;
-					e.preventDefault();
-				}
-			}
-		});
-
-		map.on('mouseup', () => (dragging = false));
-
-		start();
-	}
-
-	function start() {
-		if (!bboxes) return;
-		if (!map) return;
-		if (!autoComplete) return;
-		autoComplete.setInputText(getCountry()); // Initial search text
-	}
-
-	function redrawBBox() {
-		const bboxSource = map.getSource('bbox') as GeoJSONSource;
-		bboxSource.setData(getBBoxGeometry(selectedBBox));
-	}
-
-	function flyTo(bbox: BBox) {
-		selectedBBox = bbox ?? worldBBox;
-		if (map) {
-			if (map.getSource('bbox')) redrawBBox();
-
-			const transform = map.cameraForBounds(selectedBBox) 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 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>
 
 <div class="container">
@@ -131,12 +47,12 @@
 			<AutoComplete
 				items={bboxes}
 				placeholder="Find country, region or city …"
-				on:change={(e) => flyTo(e.detail)}
-				bind:this={autoComplete}
+				change={setBBox}
+				initialInputText={getCountryName() ?? ''}
 			/>
 		</div>
 	{/if}
-	<BasicMap {map} bind:container={mapContainer} on:mapReady={handleMapReady}></BasicMap>
+	<BasicMap {onMapInit}></BasicMap>
 </div>
 
 <style>