@versatiles/svelte 0.2.0 → 0.3.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,17 @@ 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 src="./screenshots/basic-map-light.png"></td>
+		<td><img 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 src="./screenshots/bbox-map-light.png"></td>
+		<td><img src="./screenshots/bbox-map-dark.png"></td>
+	</tr>
+	<tr>
+		<th>LocatorMap</th>
+		<td><img src="./screenshots/locator-map-light.png"></td>
+		<td><img src="./screenshots/locator-map-dark.png"></td>
 	</tr>
 </table>

package/dist/components/AutoComplete.svelte

@@ -1,6 +1,6 @@
 <!-- AutoComplete.svelte -->
 <script lang="ts" generics="T">
-	import { isDarkMode } from '../utils/style.js';
+	import { isDarkMode } from '../utils/map_style.js';
 	/* eslint svelte/no-at-html-tags: off */
 
 	import { createEventDispatcher, onMount } from 'svelte';
@@ -11,7 +11,7 @@
 
 	// Component properties
 	export let placeholder: string = '';
-	export let minChar: number = 0;
+	export let minChar: number = 3;
 	export let maxItems: number = 10;
 
 	// Reactive variables
@@ -32,14 +32,13 @@
 		if (r.length > 0) {
 			const { key, value } = r[0];
 			inputText = key;
-			setTimeout(() => dispatch('change', JSON.parse(JSON.stringify(value))), 0);
+			dispatch('change', JSON.parse(JSON.stringify(value)));
 		} else {
 			inputText = '';
 		}
 	}
 
 	export function setInputText(text: string) {
-		console.log(text);
 		inputText = text;
 		results = filterResults();
 		close(0);
@@ -97,7 +96,7 @@
 	// Close the autocomplete and select an item
 	function close(index = -1) {
 		isOpen = false;
-		if (index > -1 && results[index]) {
+		if (index >= 0 && results[index]) {
 			const { key, value } = results[index];
 			inputText = key;
 			dispatch('change', JSON.parse(JSON.stringify(value)));

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,116 +1,39 @@
 <!-- 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 type { CameraOptions, Map as MaplibreMapType } from 'maplibre-gl';
 	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 { getCountryName } from '../../utils/location.js';
 	import BasicMap from '../BasicMap/BasicMap.svelte';
-	import { isDarkMode } from '../../utils/style.js';
+	import { isDarkMode } from '../../utils/map_style.js';
+	import type { BBox } from 'geojson';
+	import { loadBBoxes } from './BBoxMap.js';
+	import { BBoxDrawer } from '../../utils/draw/bbox.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 bbox: BBoxDrawer;
 	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 }
+		map.on('load', async () => {
+			bbox = new BBoxDrawer(map, {
+				color: isDarkMode(mapContainer) ? '#FFFFFF' : '#000000'
 			});
+			bboxes = await loadBBoxes();
 		});
-
-		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();
+	function flyTo(newBBox: BBox) {
+		if (bbox) {
+			bbox.setGeometry(newBBox);
 
-			const transform = map.cameraForBounds(selectedBBox) as CameraOptions;
+			const transform = map.cameraForBounds(bbox.getBounds()) as CameraOptions;
 			if (transform == null) return;
 			transform.zoom = transform.zoom ?? 0 - 0.5;
 			transform.bearing = 0;
@@ -123,6 +46,10 @@
 			}
 		}
 	}
+
+	$: if (autoComplete) {
+		autoComplete?.setInputText(getCountryName() ?? '');
+	}
 </script>
 
 <div class="container">

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

@@ -1,10 +1,9 @@
-import type { BBox } from './BBoxMap.js';
 import 'maplibre-gl/dist/maplibre-gl.css';
 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: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -13,9 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const BBoxMap: $$__sveltets_2_IsomorphicComponent<{
-    selectedBBox?: BBox;
-}, {
+declare const BBoxMap: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 type BBoxMap = InstanceType<typeof BBoxMap>;

package/dist/components/BasicMap/BasicMap.svelte

@@ -3,7 +3,7 @@
 	import type { Map as MaplibreMapType, MapOptions } from 'maplibre-gl';
 	import { onMount, createEventDispatcher } from 'svelte';
 	import 'maplibre-gl/dist/maplibre-gl.css';
-	import { getMapStyle, isDarkMode } from '../../utils/style.js';
+	import { getMapStyle, isDarkMode } from '../../utils/map_style.js';
 	import type { StyleBuilderOptions } from '@versatiles/style';
 
 	// Props

package/dist/components/LocatorMap/LocatorMap.svelte

@@ -0,0 +1,34 @@
+<!-- LocatorMap.svelte -->
+<script lang="ts">
+	import type { Map as MaplibreMapType } from 'maplibre-gl';
+	import 'maplibre-gl/dist/maplibre-gl.css';
+	import BasicMap from '../BasicMap/BasicMap.svelte';
+	//import SpriteLibrary from '../../utils/sprite_library.js';
+	import { MarkerDrawer } from '../../utils/draw/marker.js';
+
+	let mapContainer: HTMLDivElement;
+	let map: MaplibreMapType;
+	//let spriteLibrary = new SpriteLibrary();
+	let markers = [];
+
+	function handleMapReady(event: CustomEvent) {
+		map = event.detail.map;
+		map.on('load', async () => {
+			//const list = await spriteLibrary.getSpriteList();
+			markers.push(new MarkerDrawer(map, { point: [25, 22] }));
+		});
+	}
+</script>
+
+<div class="container">
+	<BasicMap {map} bind:container={mapContainer} on:mapReady={handleMapReady}></BasicMap>
+</div>
+
+<style>
+	.container {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		min-height: 6em;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import 'maplibre-gl/dist/maplibre-gl.css';
+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>;
+export default LocatorMap;

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/utils/draw/abstract.d.ts

@@ -0,0 +1,5 @@
+import type { LngLatBounds } from 'maplibre-gl';
+export declare abstract class AbstractDrawer<Geometry> {
+    abstract setGeometry(geometry: Geometry): void;
+    abstract getBounds(): LngLatBounds;
+}

package/dist/utils/draw/abstract.js

@@ -0,0 +1,2 @@
+export class AbstractDrawer {
+}

package/dist/utils/draw/bbox.d.ts

@@ -0,0 +1,35 @@
+import type geojson from 'geojson';
+import type { FillStyle, LineStyle } from './style.js';
+import { AbstractDrawer } from './abstract.js';
+type DragPoint = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' | false;
+export declare const DragPointMap: Map<DragPoint, {
+    cursor: string;
+    flipH: DragPoint;
+    flipV: DragPoint;
+}>;
+export type BBox = [number, number, number, number];
+export declare class BBoxDrawer extends AbstractDrawer<geojson.BBox> {
+    private source?;
+    private dragPoint;
+    private isDragging;
+    private map;
+    private canvas;
+    private fillStyle;
+    private lineStyle;
+    private inverted;
+    private bbox;
+    constructor(map: maplibregl.Map, options?: {
+        bbox?: BBox;
+        inverted?: boolean;
+    } & LineStyle & FillStyle);
+    private updateDragPoint;
+    private getAsFeatureCollection;
+    setGeometry(bbox: geojson.BBox): void;
+    getBounds(): maplibregl.LngLatBounds;
+    private redraw;
+    private getAsPixel;
+    private checkDragPointAt;
+    private getCursor;
+    private doDrag;
+}
+export {};