@versatiles/svelte 2.1.1 → 2.1.2

package/dist/components/BBoxMap/BBoxMap.svelte

@@ -5,42 +5,52 @@
 	import BasicMap from '../BasicMap/BasicMap.svelte';
 	import { isDarkMode } from '../../utils/map_style.js';
 	import { loadBBoxes } from './BBoxMap.js';
-	import { BBoxDrawer, isSameBBox, type BBox } 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 | undefined;
 	let map: MaplibreMapType | undefined = $state();
 	let bboxes: { key: string; value: BBox }[] | undefined = $state();
 	let mapContainer: HTMLElement;
-
-	$effect(() => setBBox(selectedBBox));
+	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 });
 		bboxes = await loadBBoxes();
-		const bbox = selectedBBox || [-180, -85, 180, 85];
-		bboxDrawer = new BBoxDrawer(map!, bbox, isDarkMode(mapContainer) ? '#FFFFFF' : '#000000');
-		bboxDrawer.bbox.subscribe(setBBox);
-		if (selectedBBox) setBBox(selectedBBox);
-	}
 
-	function setBBox(bbox?: BBox) {
-		if (!map || !bbox) return;
+		bboxDrawer = new BBoxDrawer(
+			map!,
+			selectedBBox ?? [-180, -85, 180, 85],
+			isDarkMode(mapContainer) ? '#FFFFFF' : '#000000'
+		);
 
-		if (!selectedBBox || !isSameBBox(selectedBBox, bbox)) {
-			selectedBBox = bbox;
+		if (selectedBBox) {
+			zoom();
 		}
 
-		if (!bboxDrawer) return;
+		bboxDrawer.on('dragEnd', (bbox) => {
+			disableZoomTemporarily();
+			if (!selectedBBox || !isSameBBox(bbox, selectedBBox)) {
+				selectedBBox = bbox;
+			}
+		});
+	}
+
+	$effect(() => {
+		if (!selectedBBox) return;
+		zoom();
+		if (bboxDrawer && selectedBBox) bboxDrawer.bbox = selectedBBox;
+	});
 
-		if (!isSameBBox(bboxDrawer.getBBox(), bbox)) {
-			bboxDrawer.setBBox(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;
@@ -67,6 +77,11 @@
 		}
 		return query;
 	}
+
+	function disableZoomTemporarily() {
+		if (disableZoomTimeout) clearTimeout(disableZoomTimeout);
+		disableZoomTimeout = setTimeout(() => (disableZoomTimeout = undefined), 100);
+	}
 </script>
 
 <div class="container">
@@ -85,9 +100,11 @@
 
 <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 './lib/bbox.js';
+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,21 +8,22 @@ 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;
-    setBBox(bbox: geojson.BBox): void;
-    getBBox(): BBox;
-    getBounds(): maplibregl.LngLatBounds;
+    set bbox(bbox: BBox);
+    get bbox(): BBox;
     private redraw;
     private getAsPixel;
     private checkDragPointAt;

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

@@ -1,5 +1,4 @@
-import { writable } from 'svelte/store';
-import maplibregl from 'maplibre-gl';
+import { EventHandler } from '../../../utils/event_handler.js';
 // prettier-ignore
 export const DragPointMap = new Map([
     ['n', { cursor: 'ns-resize', flipH: 'n', flipV: 's' }],
@@ -13,17 +12,18 @@ 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 = writable(worldBBox);
-    #bbox = [0, 0, 0, 0];
-    constructor(map, bbox, color, inverted) {
-        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);
         map.addSource(this.sourceId, { type: 'geojson', data: this.getAsFeatureCollection() });
@@ -54,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)
@@ -69,8 +70,8 @@ export class BBoxDrawer {
         map.on('mouseup', () => {
             this.isDragging = false;
             this.updateDragPoint(false);
+            this.emit('dragEnd', [...this.#bbox]);
         });
-        this.setBBox(bbox);
     }
     updateDragPoint(dragPoint) {
         if (this.dragPoint === dragPoint)
@@ -79,10 +80,10 @@ export class BBoxDrawer {
         this.canvas.style.cursor = this.getCursor(dragPoint);
     }
     getAsFeatureCollection() {
-        const ring = getRing(this.getBBox());
+        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]);
@@ -99,30 +100,23 @@ export class BBoxDrawer {
             return { type: 'Feature', geometry: { type: 'LineString', coordinates }, properties: {} };
         }
     }
-    setBBox(bbox) {
-        const newBbox = bbox.slice(0, 4);
-        if (this.#bbox && isSameBBox(this.#bbox, newBbox))
+    set bbox(bbox) {
+        if (isSameBBox(this.#bbox, bbox))
             return;
-        this.#bbox = bbox.slice(0, 4);
+        this.#bbox = [...bbox];
         this.redraw();
-        this.bbox.set(this.#bbox);
     }
-    getBBox() {
-        return this.#bbox;
-    }
-    getBounds() {
-        return new maplibregl.LngLatBounds(this.getBBox());
+    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 = this.getBBox();
+        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)];

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/index.d.ts

@@ -3,4 +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.js';
+export { type BBox } from './components/BBoxMap/lib/bbox_drawer.js';

package/dist/index.js

@@ -3,4 +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.js';
+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.1",
+  "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();
-    }
-}