@versatiles/svelte 2.1.0 → 2.1.1

package/dist/components/BBoxMap/BBoxMap.svelte

@@ -4,32 +4,41 @@
 	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.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;
 
+	$effect(() => setBBox(selectedBBox));
+
 	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));
+		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 flyToBBox(bbox: BBox) {
+	function setBBox(bbox?: BBox) {
 		if (!map || !bbox) return;
 
-		bboxDrawer.setGeometry(bbox);
+		if (!selectedBBox || !isSameBBox(selectedBBox, bbox)) {
+			selectedBBox = bbox;
+		}
+
+		if (!bboxDrawer) return;
+
+		if (!isSameBBox(bboxDrawer.getBBox(), bbox)) {
+			bboxDrawer.setBBox(bbox);
+		}
 
 		const transform = map.cameraForBounds(bboxDrawer.getBounds()) as CameraOptions;
 		if (transform == null) return;
@@ -37,7 +46,7 @@
 		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 });
@@ -66,12 +75,12 @@
 			<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>

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

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

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

@@ -9,6 +9,7 @@ export declare const DragPointMap: Map<DragPoint, {
 }>;
 export type BBox = [number, number, number, number];
 export declare class BBoxDrawer {
+    #private;
     private sourceId;
     private dragPoint;
     private isDragging;
@@ -19,7 +20,8 @@ export declare class BBoxDrawer {
     constructor(map: maplibregl.Map, bbox: BBox, color: string, inverted?: boolean);
     private updateDragPoint;
     private getAsFeatureCollection;
-    setGeometry(bbox: geojson.BBox): void;
+    setBBox(bbox: geojson.BBox): void;
+    getBBox(): BBox;
     getBounds(): maplibregl.LngLatBounds;
     private redraw;
     private getAsPixel;
@@ -27,3 +29,4 @@ export declare class BBoxDrawer {
     private getCursor;
     private doDrag;
 }
+export declare function isSameBBox(a: geojson.BBox, b: geojson.BBox): boolean;

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

@@ -1,6 +1,5 @@
-import { get, writable } from 'svelte/store';
+import { writable } from 'svelte/store';
 import maplibregl from 'maplibre-gl';
-import { getMapStyle } from '../../../utils/map_style.js';
 // prettier-ignore
 export const DragPointMap = new Map([
     ['n', { cursor: 'ns-resize', flipH: 'n', flipV: 's' }],
@@ -21,16 +20,14 @@ export class BBoxDrawer {
     map;
     canvas;
     inverted;
-    bbox;
+    bbox = writable(worldBBox);
+    #bbox = [0, 0, 0, 0];
     constructor(map, bbox, color, inverted) {
-        this.bbox = writable(bbox);
         this.inverted = inverted ?? 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)
@@ -74,6 +70,7 @@ export class BBoxDrawer {
             this.isDragging = false;
             this.updateDragPoint(false);
         });
+        this.setBBox(bbox);
     }
     updateDragPoint(dragPoint) {
         if (this.dragPoint === dragPoint)
@@ -82,7 +79,7 @@ export class BBoxDrawer {
         this.canvas.style.cursor = this.getCursor(dragPoint);
     }
     getAsFeatureCollection() {
-        const ring = getRing(get(this.bbox));
+        const ring = getRing(this.getBBox());
         return {
             type: 'FeatureCollection',
             features: [this.inverted ? polygon(getRing(worldBBox), ring) : polygon(ring), linestring(ring)]
@@ -102,12 +99,19 @@ export class BBoxDrawer {
             return { type: 'Feature', geometry: { type: 'LineString', coordinates }, properties: {} };
         }
     }
-    setGeometry(bbox) {
-        this.bbox.set(bbox.slice(0, 4));
+    setBBox(bbox) {
+        const newBbox = bbox.slice(0, 4);
+        if (this.#bbox && isSameBBox(this.#bbox, newBbox))
+            return;
+        this.#bbox = bbox.slice(0, 4);
         this.redraw();
+        this.bbox.set(this.#bbox);
+    }
+    getBBox() {
+        return this.#bbox;
     }
     getBounds() {
-        return new maplibregl.LngLatBounds(get(this.bbox));
+        return new maplibregl.LngLatBounds(this.getBBox());
     }
     redraw() {
         const source = this.map.getSource(this.sourceId);
@@ -118,7 +122,7 @@ export class BBoxDrawer {
         }
     }
     getAsPixel() {
-        const bbox = get(this.bbox);
+        const bbox = this.getBBox();
         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 +153,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 +199,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/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.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.js';

package/package.json

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