@versatiles/svelte 2.1.7 → 2.2.0

package/dist/components/BBoxMap/AutoComplete.svelte

@@ -34,19 +34,6 @@
 	// Escape special characters in search string for use in regex
 	const regExpEscape = (s: string) => s.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
 
-	$effect(() => {
-		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) {
@@ -59,7 +46,7 @@
 	}
 
 	function onFocus() {
-		inputElement.setSelectionRange(0, 1000);
+		inputElement.setSelectionRange(0, inputElement.value.length);
 	}
 
 	// Filter results based on search query
@@ -118,7 +105,7 @@
 	});
 </script>
 
-<svelte:window on:click={() => close()} />
+<svelte:window onclick={() => close()} />
 
 <div class="autocomplete" bind:this={autocompleteElement}>
 	<input
@@ -135,7 +122,7 @@
 		aria-autocomplete="list"
 		aria-controls="autocomplete-results"
 	/>
-	<div class="autocomplete-results" class:hide-results={!isOpen}>
+	<div class="autocomplete-results" class:hide-results={!isOpen} id="autocomplete-results" role="listbox">
 		{#each results as result, i (result.key)}
 			<button
 				onclick={() => close(i)}

package/dist/components/BBoxMap/BBoxMap.svelte

@@ -4,11 +4,19 @@
 	import { getCountryName } from '../../utils/location.js';
 	import BasicMap from '../BasicMap/BasicMap.svelte';
 	import { isDarkMode } from '../../utils/map_style.js';
+	import { onDestroy } from 'svelte';
 	import { loadBBoxes } from './BBoxMap.js';
 	import { BBoxDrawer, isSameBBox, type BBox } from './lib/bbox_drawer.js';
 
-	let { selectedBBox = $bindable() }: { selectedBBox?: BBox } = $props();
+	let {
+		selectedBBox = $bindable(),
+		onMapLoad
+	}: {
+		selectedBBox?: BBox;
+		onMapLoad?: (map: MaplibreMapType, maplibre: typeof import('maplibre-gl')) => void;
+	} = $props();
 
+	const bboxPadding = 20;
 	const startTime = Date.now();
 	let bboxDrawer: BBoxDrawer | undefined;
 	let map: MaplibreMapType | undefined = $state();
@@ -50,9 +58,8 @@
 		if (!bboxDrawer || !map || !selectedBBox) return;
 		if (disableZoomTimeout) return;
 
-		const transform = map.cameraForBounds(selectedBBox) as CameraOptions;
+		const transform = map.cameraForBounds(selectedBBox, { padding: bboxPadding }) as CameraOptions;
 		if (transform == null) return;
-		transform.zoom = transform.zoom ?? 0 - 0.5;
 		transform.bearing = 0;
 		transform.pitch = 0;
 
@@ -82,20 +89,44 @@
 		if (disableZoomTimeout) clearTimeout(disableZoomTimeout);
 		disableZoomTimeout = setTimeout(() => (disableZoomTimeout = undefined), 100);
 	}
+
+	function selectVisibleArea() {
+		if (!map) return;
+		const pad = map.getPadding();
+		const { clientWidth: w, clientHeight: h } = map.getContainer();
+		const nw = map.unproject([(pad.left ?? 0) + bboxPadding, (pad.top ?? 0) + bboxPadding]);
+		const se = map.unproject([w - (pad.right ?? 0) - bboxPadding, h - (pad.bottom ?? 0) - bboxPadding]);
+		const round = (v: number) => Math.round(v * 1e3) / 1e3;
+		selectedBBox = [round(nw.lng), round(se.lat), round(se.lng), round(nw.lat)];
+	}
+
+	onDestroy(() => {
+		bboxDrawer?.destroy();
+	});
 </script>
 
 <div class="container">
 	{#if bboxes}
-		<div class="input">
-			<AutoComplete
-				items={bboxes}
-				placeholder="Find country, region or city …"
-				change={(bbox) => (selectedBBox = bbox)}
-				initialInputText={getInitialInputText()}
-			/>
+		<div class="toolbar">
+			<div class="input">
+				<AutoComplete
+					items={bboxes}
+					placeholder="Find country, region or city …"
+					change={(bbox) => (selectedBBox = bbox)}
+					initialInputText={getInitialInputText()}
+				/>
+			</div>
+			<button class="select-visible" onclick={selectVisibleArea} title="Use visible area as bounding box">
+				<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+					<path d="M3 8V5a2 2 0 0 1 2-2h3" />
+					<path d="M21 8V5a2 2 0 0 0-2-2h-3" />
+					<path d="M3 16v3a2 2 0 0 0 2 2h3" />
+					<path d="M21 16v3a2 2 0 0 1-2 2h-3" />
+				</svg>
+			</button>
 		</div>
 	{/if}
-	<BasicMap {onMapInit}></BasicMap>
+	<BasicMap {onMapInit} {onMapLoad}></BasicMap>
 </div>
 
 <style>
@@ -107,11 +138,34 @@
 		top: 0;
 		min-height: 6em;
 	}
-	.input {
+	.toolbar {
 		position: absolute;
 		top: 0.5em;
 		left: 0.5em;
 		right: 0.5em;
 		z-index: 10;
+		display: flex;
+		gap: 0.3em;
+		align-items: flex-start;
+	}
+	.input {
+		flex: 1;
+		min-width: 0;
+	}
+	.select-visible {
+		flex-shrink: 0;
+		padding: 0.25em;
+		border: none;
+		border-radius: 0.5em;
+		background: color-mix(in srgb, var(--bg-color) 80%, transparent);
+		color: var(--fg-color);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 0;
+	}
+	.select-visible:hover {
+		background: color-mix(in srgb, var(--bg-color) 95%, transparent);
 	}
 </style>

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

@@ -1,6 +1,8 @@
+import type { Map as MaplibreMapType } from 'maplibre-gl';
 import { type BBox } from './lib/bbox_drawer.js';
 type $$ComponentProps = {
     selectedBBox?: BBox;
+    onMapLoad?: (map: MaplibreMapType, maplibre: typeof import('maplibre-gl')) => void;
 };
 declare const BBoxMap: import("svelte").Component<$$ComponentProps, {}, "selectedBBox">;
 type BBoxMap = ReturnType<typeof BBoxMap>;

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

@@ -14,10 +14,15 @@ export declare class BBoxDrawer extends EventHandler<{
 }> {
     #private;
     private sourceId;
+    private lineLayerId;
+    private fillLayerId;
     private dragPoint;
     private isDragging;
     private map;
     private canvas;
+    private handleMouseMove;
+    private handleMouseDown;
+    private handleMouseUp;
     private insideOut;
     constructor(map: maplibregl.Map, initialBBox: BBox, color: string, insideOut?: boolean);
     private updateDragPoint;
@@ -28,6 +33,7 @@ export declare class BBoxDrawer extends EventHandler<{
     private getAsPixel;
     private checkDragPointAt;
     private getCursor;
+    destroy(): void;
     private doDrag;
 }
 export declare function isSameBBox(a: geojson.BBox, b: geojson.BBox): boolean;

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

@@ -2,7 +2,7 @@ import { EventHandler } from '../../../utils/event_handler.js';
 // prettier-ignore
 export const DragPointMap = new Map([
     ['n', { cursor: 'ns-resize', flipH: 'n', flipV: 's' }],
-    ['ne', { cursor: 'nesw-resize', flipH: 'n', flipV: 'se' }],
+    ['ne', { cursor: 'nesw-resize', flipH: 'nw', flipV: 'se' }],
     ['e', { cursor: 'ew-resize', flipH: 'w', flipV: 'e' }],
     ['se', { cursor: 'nwse-resize', flipH: 'sw', flipV: 'ne' }],
     ['s', { cursor: 'ns-resize', flipH: 's', flipV: 'n' }],
@@ -14,10 +14,15 @@ export const DragPointMap = new Map([
 const worldBBox = [-180, -85, 180, 85];
 export class BBoxDrawer extends EventHandler {
     sourceId;
+    lineLayerId;
+    fillLayerId;
     dragPoint = false;
     isDragging = false;
     map;
     canvas;
+    handleMouseMove;
+    handleMouseDown;
+    handleMouseUp;
     insideOut;
     #bbox;
     constructor(map, initialBBox, color, insideOut) {
@@ -25,10 +30,13 @@ export class BBoxDrawer extends EventHandler {
         this.#bbox = [...initialBBox];
         this.insideOut = insideOut ?? true;
         this.map = map;
-        this.sourceId = 'bbox_' + Math.random().toString(36).slice(2);
+        const uid = Math.random().toString(36).slice(2);
+        this.sourceId = 'bbox_' + uid;
+        this.lineLayerId = 'bbox-line_' + uid;
+        this.fillLayerId = 'bbox-fill_' + uid;
         map.addSource(this.sourceId, { type: 'geojson', data: this.getAsFeatureCollection() });
         map.addLayer({
-            id: 'bbox-line_' + Math.random().toString(36).slice(2),
+            id: this.lineLayerId,
             type: 'line',
             source: this.sourceId,
             filter: ['==', '$type', 'LineString'],
@@ -36,7 +44,7 @@ export class BBoxDrawer extends EventHandler {
             paint: { 'line-color': color }
         });
         map.addLayer({
-            id: 'bbox-fill_' + Math.random().toString(36).slice(2),
+            id: this.fillLayerId,
             type: 'fill',
             source: this.sourceId,
             filter: ['==', '$type', 'Polygon'],
@@ -44,7 +52,7 @@ export class BBoxDrawer extends EventHandler {
             paint: { 'fill-color': color, 'fill-opacity': 0.2 }
         });
         this.canvas = map.getCanvasContainer();
-        map.on('mousemove', (e) => {
+        this.handleMouseMove = (e) => {
             if (e.originalEvent.buttons % 2 === 0)
                 return this.checkDragPointAt(e.point);
             if (!this.isDragging)
@@ -55,8 +63,8 @@ export class BBoxDrawer extends EventHandler {
             this.redraw();
             e.preventDefault();
             this.emit('drag', [...this.#bbox]);
-        });
-        map.on('mousedown', (e) => {
+        };
+        this.handleMouseDown = (e) => {
             if (this.isDragging)
                 return;
             if (e.originalEvent.buttons % 2) {
@@ -66,12 +74,17 @@ export class BBoxDrawer extends EventHandler {
                 if (this.isDragging)
                     e.preventDefault();
             }
-        });
-        map.on('mouseup', () => {
+        };
+        this.handleMouseUp = () => {
+            if (!this.isDragging)
+                return;
             this.isDragging = false;
             this.updateDragPoint(false);
             this.emit('dragEnd', [...this.#bbox]);
-        });
+        };
+        map.on('mousemove', this.handleMouseMove);
+        map.on('mousedown', this.handleMouseDown);
+        map.on('mouseup', this.handleMouseUp);
     }
     updateDragPoint(dragPoint) {
         if (this.dragPoint === dragPoint)
@@ -146,6 +159,19 @@ export class BBoxDrawer extends EventHandler {
     getCursor(drag) {
         return DragPointMap.get(drag)?.cursor ?? 'default';
     }
+    destroy() {
+        this.map.off('mousemove', this.handleMouseMove);
+        this.map.off('mousedown', this.handleMouseDown);
+        this.map.off('mouseup', this.handleMouseUp);
+        if (this.map.getLayer(this.lineLayerId))
+            this.map.removeLayer(this.lineLayerId);
+        if (this.map.getLayer(this.fillLayerId))
+            this.map.removeLayer(this.fillLayerId);
+        if (this.map.getSource(this.sourceId))
+            this.map.removeSource(this.sourceId);
+        this.canvas.style.cursor = '';
+        this.clear();
+    }
     doDrag(lngLat) {
         this.#bbox = ((bbox) => {
             const x = Math.round(lngLat.lng * 1e3) / 1e3;

package/dist/components/BasicMap/BasicMap.svelte

@@ -64,7 +64,6 @@
 			if (!map!.loaded()) return;
 			triggeredMapReady = true;
 			if (onMapLoad) onMapLoad(map!, maplibre);
-			setTimeout(() => console.log('map_ready'), 100);
 		}
 	}
 </script>

package/dist/components/LocatorMap/LocatorMap.svelte

@@ -3,6 +3,12 @@
 	import BasicMap from '../BasicMap/BasicMap.svelte';
 	let map: MaplibreMapType;
 
+	let {
+		onMapLoad
+	}: {
+		onMapLoad?: (map: MaplibreMapType, maplibre: typeof import('maplibre-gl')) => void;
+	} = $props();
+
 	function onMapInit(_map: MaplibreMapType) {
 		map = _map;
 		map.on('load', async () => {
@@ -66,7 +72,7 @@
 </script>
 
 <div class="container">
-	<BasicMap {onMapInit}></BasicMap>
+	<BasicMap {onMapInit} {onMapLoad}></BasicMap>
 </div>
 
 <style>

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

@@ -1,18 +1,7 @@
-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 LocatorMap: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type LocatorMap = InstanceType<typeof LocatorMap>;
+import type { Map as MaplibreMapType } from 'maplibre-gl';
+type $$ComponentProps = {
+    onMapLoad?: (map: MaplibreMapType, maplibre: typeof import('maplibre-gl')) => void;
+};
+declare const LocatorMap: import("svelte").Component<$$ComponentProps, {}, "">;
+type LocatorMap = ReturnType<typeof LocatorMap>;
 export default LocatorMap;

package/dist/components/MapEditor/MapEditor.svelte

@@ -7,6 +7,12 @@
 	import { GeometryManagerInteractive } from './lib/geometry_manager_interactive.js';
 	import { StateReader } from './lib/state/reader.js';
 
+	let {
+		onMapLoad
+	}: {
+		onMapLoad?: (map: MaplibreMapType, maplibre: typeof import('maplibre-gl')) => void;
+	} = $props();
+
 	let showSidebar = $state(false);
 	let geometryManager: GeometryManager | GeometryManagerInteractive | undefined = $state();
 
@@ -52,6 +58,7 @@
 	<div class="container">
 		<BasicMap
 			{onMapInit}
+			{onMapLoad}
 			emptyStyle={true}
 			mapOptions={{ attributionControl: false }}
 			styleOptions={{ darkMode: false }}

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

@@ -1,3 +1,7 @@
-declare const MapEditor: import("svelte").Component<Record<string, never>, {}, "">;
+import type { Map as MaplibreMapType } from 'maplibre-gl';
+type $$ComponentProps = {
+    onMapLoad?: (map: MaplibreMapType, maplibre: typeof import('maplibre-gl')) => void;
+};
+declare const MapEditor: import("svelte").Component<$$ComponentProps, {}, "">;
 type MapEditor = ReturnType<typeof MapEditor>;
 export default MapEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versatiles/svelte",
-  "version": "2.1.7",
+  "version": "2.2.0",
   "license": "MIT",
   "scripts": {
     "build": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && vite build && npm run package",
@@ -42,42 +42,42 @@
     "svelte": "^5.45.8"
   },
   "devDependencies": {
-    "@playwright/test": "^1.57.0",
+    "@playwright/test": "^1.58.1",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.50.0",
+    "@sveltejs/kit": "^2.50.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "@turf/turf": "^7.3.2",
+    "@turf/turf": "^7.3.3",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^25.0.9",
-    "@versatiles/release-tool": "^2.5.0",
-    "@vitest/coverage-v8": "^4.0.17",
+    "@types/node": "^25.2.1",
+    "@versatiles/release-tool": "^2.7.0",
+    "@vitest/coverage-v8": "^4.0.18",
     "cookie": "^1.1.1",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.14.0",
     "geojson": "^0.5.0",
-    "globals": "^17.0.0",
-    "happy-dom": "^20.3.4",
+    "globals": "^17.3.0",
+    "happy-dom": "^20.5.0",
     "husky": "^9.1.7",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
-    "publint": "^0.3.16",
-    "sass-embedded": "^1.97.2",
-    "svelte": "^5.47.1",
-    "svelte-check": "^4.3.5",
+    "publint": "^0.3.17",
+    "sass-embedded": "^1.97.3",
+    "svelte": "^5.49.2",
+    "svelte-check": "^4.3.6",
     "svelte-preprocess": "^6.0.3",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.1",
+    "typescript-eslint": "^8.54.0",
     "vite": "^7.3.1",
-    "vitest": "^4.0.17"
+    "vitest": "^4.0.18"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
     "@versatiles/style": "^5.8.4",
-    "maplibre-gl": "^5.16.0"
+    "maplibre-gl": "^5.17.0"
   }
 }