@versatiles/svelte 2.1.0 → 2.1.2

package/dist/components/BBoxMap/BBoxMap.svelte

@@ -4,40 +4,59 @@
 	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 './lib/bbox.js';
+	import { BBoxDrawer, isSameBBox, type BBox } from './lib/bbox_drawer.js';
 
 	let { selectedBBox = $bindable() }: { selectedBBox?: BBox } = $props();
+
 	const startTime = Date.now();
-	let bboxDrawer: BBoxDrawer;
+	let bboxDrawer: BBoxDrawer | undefined;
 	let map: MaplibreMapType | undefined = $state();
 	let bboxes: { key: string; value: BBox }[] | undefined = $state();
 	let mapContainer: HTMLElement;
+	let disableZoomTimeout: ReturnType<typeof setTimeout> | undefined;
 
 	async function onMapInit(_map: MaplibreMapType) {
 		map = _map;
 		mapContainer = map.getContainer();
 		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();
-		// 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));
+
+		bboxDrawer = new BBoxDrawer(
+			map!,
+			selectedBBox ?? [-180, -85, 180, 85],
+			isDarkMode(mapContainer) ? '#FFFFFF' : '#000000'
+		);
+
+		if (selectedBBox) {
+			zoom();
+		}
+
+		bboxDrawer.on('dragEnd', (bbox) => {
+			disableZoomTemporarily();
+			if (!selectedBBox || !isSameBBox(bbox, selectedBBox)) {
+				selectedBBox = bbox;
+			}
+		});
 	}
 
-	function flyToBBox(bbox: BBox) {
-		if (!map || !bbox) return;
+	$effect(() => {
+		if (!selectedBBox) return;
+		zoom();
+		if (bboxDrawer && selectedBBox) bboxDrawer.bbox = selectedBBox;
+	});
 
-		bboxDrawer.setGeometry(bbox);
+	function zoom() {
+		if (!bboxDrawer || !map || !selectedBBox) return;
+		if (disableZoomTimeout) return;
 
-		const transform = map.cameraForBounds(bboxDrawer.getBounds()) as CameraOptions;
+		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) {
+		if (Date.now() - startTime < 3000) {
 			map.jumpTo(transform);
 		} else {
 			map.flyTo({ ...transform, essential: true, speed: 5 });
@@ -58,6 +77,11 @@
 		}
 		return query;
 	}
+
+	function disableZoomTemporarily() {
+		if (disableZoomTimeout) clearTimeout(disableZoomTimeout);
+		disableZoomTimeout = setTimeout(() => (disableZoomTimeout = undefined), 100);
+	}
 </script>
 
 <div class="container">
@@ -66,19 +90,21 @@
 			<AutoComplete
 				items={bboxes}
 				placeholder="Find country, region or city …"
-				change={(bbox) => flyToBBox(bbox)}
+				change={(bbox) => (selectedBBox = bbox)}
 				initialInputText={getInitialInputText()}
 			/>
 		</div>
 	{/if}
-	<BasicMap {onMapInit} emptyStyle={true}></BasicMap>
+	<BasicMap {onMapInit}></BasicMap>
 </div>
 
 <style>
 	.container {
+		position: absolute;
 		width: 100%;
 		height: 100%;
-		position: relative;
+		left: 0;
+		top: 0;
 		min-height: 6em;
 	}
 	.input {

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

@@ -1,4 +1,4 @@
-import type { BBox } from 'geojson';
+import { type BBox } from './lib/bbox_drawer.js';
 type $$ComponentProps = {
     selectedBBox?: BBox;
 };

package/dist/components/BBoxMap/lib/{bbox.d.ts → bbox_drawer.d.ts}

@@ -1,6 +1,6 @@
 import type geojson from 'geojson';
-import { type Writable } from 'svelte/store';
-import maplibregl from 'maplibre-gl';
+import type maplibregl from 'maplibre-gl';
+import { EventHandler } from '../../../utils/event_handler.js';
 export type DragPoint = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' | false;
 export declare const DragPointMap: Map<DragPoint, {
     cursor: string;
@@ -8,22 +8,26 @@ export declare const DragPointMap: Map<DragPoint, {
     flipV: DragPoint;
 }>;
 export type BBox = [number, number, number, number];
-export declare class BBoxDrawer {
+export declare class BBoxDrawer extends EventHandler<{
+    drag: BBox;
+    dragEnd: BBox;
+}> {
+    #private;
     private sourceId;
     private dragPoint;
     private isDragging;
     private map;
     private canvas;
-    private inverted;
-    readonly bbox: Writable<BBox>;
-    constructor(map: maplibregl.Map, bbox: BBox, color: string, inverted?: boolean);
+    private insideOut;
+    constructor(map: maplibregl.Map, initialBBox: BBox, color: string, insideOut?: boolean);
     private updateDragPoint;
     private getAsFeatureCollection;
-    setGeometry(bbox: geojson.BBox): void;
-    getBounds(): maplibregl.LngLatBounds;
+    set bbox(bbox: BBox);
+    get bbox(): BBox;
     private redraw;
     private getAsPixel;
     private checkDragPointAt;
     private getCursor;
     private doDrag;
 }
+export declare function isSameBBox(a: geojson.BBox, b: geojson.BBox): boolean;

package/dist/components/BBoxMap/lib/{bbox.js → bbox_drawer.js}

@@ -1,6 +1,4 @@
-import { get, writable } from 'svelte/store';
-import maplibregl from 'maplibre-gl';
-import { getMapStyle } from '../../../utils/map_style.js';
+import { EventHandler } from '../../../utils/event_handler.js';
 // prettier-ignore
 export const DragPointMap = new Map([
     ['n', { cursor: 'ns-resize', flipH: 'n', flipV: 's' }],
@@ -14,23 +12,22 @@ export const DragPointMap = new Map([
     [false, { cursor: 'default', flipH: false, flipV: false }],
 ]);
 const worldBBox = [-180, -85, 180, 85];
-export class BBoxDrawer {
+export class BBoxDrawer extends EventHandler {
     sourceId;
     dragPoint = false;
     isDragging = false;
     map;
     canvas;
-    inverted;
-    bbox;
-    constructor(map, bbox, color, inverted) {
-        this.bbox = writable(bbox);
-        this.inverted = inverted ?? true;
+    insideOut;
+    #bbox;
+    constructor(map, initialBBox, color, insideOut) {
+        super();
+        this.#bbox = [...initialBBox];
+        this.insideOut = insideOut ?? true;
         this.map = map;
         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({
+        map.addSource(this.sourceId, { type: 'geojson', data: this.getAsFeatureCollection() });
+        map.addLayer({
             id: 'bbox-line_' + Math.random().toString(36).slice(2),
             type: 'line',
             source: this.sourceId,
@@ -38,7 +35,7 @@ export class BBoxDrawer {
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: { 'line-color': color }
         });
-        style.layers.push({
+        map.addLayer({
             id: 'bbox-fill_' + Math.random().toString(36).slice(2),
             type: 'fill',
             source: this.sourceId,
@@ -46,7 +43,6 @@ export class BBoxDrawer {
             layout: {},
             paint: { 'fill-color': color, 'fill-opacity': 0.2 }
         });
-        map.setStyle(style);
         this.canvas = map.getCanvasContainer();
         map.on('mousemove', (e) => {
             if (e.originalEvent.buttons % 2 === 0)
@@ -58,6 +54,7 @@ export class BBoxDrawer {
             this.doDrag(e.lngLat);
             this.redraw();
             e.preventDefault();
+            this.emit('drag', [...this.#bbox]);
         });
         map.on('mousedown', (e) => {
             if (this.isDragging)
@@ -73,6 +70,7 @@ export class BBoxDrawer {
         map.on('mouseup', () => {
             this.isDragging = false;
             this.updateDragPoint(false);
+            this.emit('dragEnd', [...this.#bbox]);
         });
     }
     updateDragPoint(dragPoint) {
@@ -82,10 +80,10 @@ export class BBoxDrawer {
         this.canvas.style.cursor = this.getCursor(dragPoint);
     }
     getAsFeatureCollection() {
-        const ring = getRing(get(this.bbox));
+        const ring = getRing(this.#bbox);
         return {
             type: 'FeatureCollection',
-            features: [this.inverted ? polygon(getRing(worldBBox), ring) : polygon(ring), linestring(ring)]
+            features: [this.insideOut ? polygon(getRing(worldBBox), ring) : polygon(ring), linestring(ring)]
         };
         function getRing(bbox) {
             const x0 = Math.min(bbox[0], bbox[2]);
@@ -102,23 +100,23 @@ export class BBoxDrawer {
             return { type: 'Feature', geometry: { type: 'LineString', coordinates }, properties: {} };
         }
     }
-    setGeometry(bbox) {
-        this.bbox.set(bbox.slice(0, 4));
+    set bbox(bbox) {
+        if (isSameBBox(this.#bbox, bbox))
+            return;
+        this.#bbox = [...bbox];
         this.redraw();
     }
-    getBounds() {
-        return new maplibregl.LngLatBounds(get(this.bbox));
+    get bbox() {
+        return [...this.#bbox];
     }
     redraw() {
         const source = this.map.getSource(this.sourceId);
-        if (!source)
+        if (!source || source.type !== 'geojson')
             return;
-        if (source instanceof maplibregl.GeoJSONSource) {
-            source.setData(this.getAsFeatureCollection());
-        }
+        source.setData(this.getAsFeatureCollection());
     }
     getAsPixel() {
-        const bbox = get(this.bbox);
+        const bbox = this.#bbox;
         const p0 = this.map.project([bbox[0], bbox[1]]);
         const p1 = this.map.project([bbox[2], bbox[3]]);
         return [Math.min(p0.x, p1.x), Math.min(p0.y, p1.y), Math.max(p0.x, p1.x), Math.max(p0.y, p1.y)];
@@ -149,7 +147,7 @@ export class BBoxDrawer {
         return DragPointMap.get(drag)?.cursor ?? 'default';
     }
     doDrag(lngLat) {
-        this.bbox.update((bbox) => {
+        this.#bbox = ((bbox) => {
             const x = Math.round(lngLat.lng * 1e3) / 1e3;
             const y = Math.round(lngLat.lat * 1e3) / 1e3;
             // prettier-ignore
@@ -195,6 +193,9 @@ export class BBoxDrawer {
                 this.updateDragPoint(DragPointMap.get(this.dragPoint)?.flipV ?? false);
             }
             return bbox;
-        });
+        })(this.#bbox);
     }
 }
+export function isSameBBox(a, b) {
+    return a[0] === b[0] && a[1] === b[1] && a[2] === b[2] && a[3] === b[3];
+}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { EventHandler } from '../lib/utils/event_handler.js';
+	import { EventHandler } from '../../../utils/event_handler.js';
 
 	let {
 		children = $bindable(),
@@ -15,7 +15,10 @@
 	} = $props();
 
 	let dialog: HTMLDialogElement | null = null;
-	export const eventHandler = new EventHandler();
+	export const eventHandler = new EventHandler<{
+		open: void;
+		close: void;
+	}>();
 
 	export function getNode(): HTMLDialogElement {
 		return dialog!;

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

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

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

@@ -1,13 +1,16 @@
 <script lang="ts">
 	import { tick } from 'svelte';
 	import Dialog from './Dialog.svelte';
-	import { EventHandler } from '../lib/utils/event_handler.js';
+	import { EventHandler } from '../../../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();
+	let eventHandler = new EventHandler<{
+		A: void;
+		B: void;
+	}>();
 
 	async function openDialog(newMode: Mode) {
 		if (!dialog) return;

package/dist/components/MapEditor/lib/map_layer/symbol.d.ts

@@ -19,8 +19,8 @@ export declare class MapLayerSymbol extends MapLayer<LayerSymbol> {
     label: Writable<string>;
     labelAlign: Writable<number>;
     symbolInfo: import("svelte/store").Readable<import("../symbols.js").SymbolInfo>;
-    textAnchor: import("svelte/store").Readable<"center" | "top" | "bottom" | "right" | "left" | undefined>;
-    textVariableAnchor: import("svelte/store").Readable<("center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "bottom" | "right" | "left")[] | undefined>;
+    textAnchor: import("svelte/store").Readable<"center" | "left" | "right" | "top" | "bottom" | undefined>;
+    textVariableAnchor: import("svelte/store").Readable<("center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left" | "right" | "top" | "bottom")[] | undefined>;
     constructor(manager: GeometryManager, id: string, source: string);
     getState(): StateStyle | undefined;
     setState(state: StateStyle): void;

package/dist/index.d.ts

@@ -3,3 +3,4 @@ import BBoxMap from './components/BBoxMap/BBoxMap.svelte';
 import LocatorMap from './components/LocatorMap/LocatorMap.svelte';
 import MapEditor from './components/MapEditor/MapEditor.svelte';
 export { BasicMap, BBoxMap, LocatorMap, MapEditor };
+export { type BBox } from './components/BBoxMap/lib/bbox_drawer.js';

package/dist/index.js

@@ -3,3 +3,4 @@ import BBoxMap from './components/BBoxMap/BBoxMap.svelte';
 import LocatorMap from './components/LocatorMap/LocatorMap.svelte';
 import MapEditor from './components/MapEditor/MapEditor.svelte';
 export { BasicMap, BBoxMap, LocatorMap, MapEditor };
+export {} from './components/BBoxMap/lib/bbox_drawer.js';

package/dist/utils/event_handler.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Callback type that accepts a payload only if the event actually carries data.
+ * For data‑less events (`void` or `undefined`), the callback takes no argument.
+ */
+type EventCallback<T> = T extends void | undefined ? () => void : (data: T) => void;
+export declare class EventHandler<Events extends Record<string, unknown> = {}> {
+    /** monotonically increasing id for every registered callback */
+    private index;
+    /**
+     * Per‑event registry that keeps the correct data type for every callback
+     * (`drag` maps to `{x: number; y: number}`, `dragEnd` to the same, etc.).
+     */
+    private events;
+    /** Emit an event (with data only if the event defines some) */
+    emit<K extends keyof Events>(name: K, ...args: Events[K] extends void | undefined ? [] : [data: Events[K]]): void;
+    /** Register a new listener; returns its numeric id so it can be removed later */
+    on<K extends keyof Events>(name: K, callback: EventCallback<Events[K]>): number;
+    /** Register a listener that will fire exactly once */
+    once<K extends keyof Events>(name: K, callback: EventCallback<Events[K]>): number;
+    /** Remove a single listener by id, or all listeners for an event */
+    off<K extends keyof Events>(name: K, id?: number): void;
+    /** Clear the entire registry */
+    clear(): void;
+}
+export {};

package/dist/utils/event_handler.js

@@ -0,0 +1,50 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export class EventHandler {
+    /** monotonically increasing id for every registered callback */
+    index = 0;
+    /**
+     * Per‑event registry that keeps the correct data type for every callback
+     * (`drag` maps to `{x: number; y: number}`, `dragEnd` to the same, etc.).
+     */
+    events = {};
+    /** Emit an event (with data only if the event defines some) */
+    emit(name, ...args) {
+        const payload = args[0];
+        this.events[name]?.forEach((cb) => cb(payload));
+    }
+    /** Register a new listener; returns its numeric id so it can be removed later */
+    on(name, callback) {
+        if (!callback)
+            throw new Error('Callback is required');
+        const bucket = (this.events[name] ??= new Map());
+        const id = ++this.index;
+        bucket.set(id, callback);
+        return id;
+    }
+    /** Register a listener that will fire exactly once */
+    once(name, callback) {
+        const id = this.on(name, ((data) => {
+            this.off(name, id);
+            callback(data);
+        }));
+        return id;
+    }
+    /** Remove a single listener by id, or all listeners for an event */
+    off(name, id) {
+        const bucket = this.events[name];
+        if (!bucket)
+            return;
+        if (id !== undefined) {
+            bucket.delete(id);
+        }
+        else {
+            delete this.events[name];
+        }
+    }
+    /** Clear the entire registry */
+    clear() {
+        for (const key in this.events) {
+            delete this.events[key];
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versatiles/svelte",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "license": "MIT",
   "scripts": {
     "build": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && vite build && npm run package",

package/dist/components/MapEditor/lib/utils/event_handler.d.ts

@@ -1,10 +0,0 @@
-export declare class EventHandler {
-    private index;
-    private events;
-    constructor();
-    emit(event: string): void;
-    on(name: string, callback: () => void): number;
-    once(name: string, callback: () => void): number;
-    off(name: string, index?: number): void;
-    clear(): void;
-}

package/dist/components/MapEditor/lib/utils/event_handler.js

@@ -1,39 +0,0 @@
-export class EventHandler {
-    index = 0;
-    events = new Map();
-    constructor() { }
-    emit(event) {
-        this.events.get(event)?.forEach((callback) => callback());
-    }
-    on(name, callback) {
-        if (!callback)
-            throw new Error('Callback is required');
-        if (!this.events.has(name))
-            this.events.set(name, new Map());
-        this.index++;
-        this.events.get(name).set(this.index, callback);
-        return this.index;
-    }
-    once(name, callback) {
-        if (!callback)
-            throw new Error('Callback is required');
-        const index = this.on(name, () => {
-            this.off(name, index);
-            callback();
-        });
-        return index;
-    }
-    off(name, index) {
-        if (!this.events.has(name))
-            return;
-        if (index) {
-            this.events.get(name)?.delete(index);
-        }
-        else {
-            this.events.delete(name);
-        }
-    }
-    clear() {
-        this.events.clear();
-    }
-}