@versatiles/svelte 0.2.0 → 0.3.0

package/dist/utils/draw/bbox.js

@@ -0,0 +1,198 @@
+import { AbstractDrawer } from './abstract.js';
+import { getFillStyle, getLineStyle } from './style.js';
+const maplibregl = await import('maplibre-gl');
+const { LngLatBounds } = maplibregl;
+// prettier-ignore
+export const DragPointMap = new Map([
+    ['n', { cursor: 'ns-resize', flipH: 'n', flipV: 's' }],
+    ['ne', { cursor: 'nesw-resize', flipH: 'n', 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' }],
+    ['sw', { cursor: 'nesw-resize', flipH: 'se', flipV: 'nw' }],
+    ['w', { cursor: 'ew-resize', flipH: 'e', flipV: 'w' }],
+    ['nw', { cursor: 'nwse-resize', flipH: 'ne', flipV: 'sw' }],
+    [false, { cursor: 'default', flipH: false, flipV: false }],
+]);
+const worldBBox = [-180, -85, 180, 85];
+export class BBoxDrawer extends AbstractDrawer {
+    source;
+    dragPoint = false;
+    isDragging = false;
+    map;
+    canvas;
+    fillStyle;
+    lineStyle;
+    inverted;
+    bbox;
+    constructor(map, options) {
+        super();
+        this.bbox = options?.bbox ?? worldBBox;
+        this.fillStyle = getFillStyle(options);
+        this.lineStyle = getLineStyle(options);
+        this.inverted = options?.inverted ?? true;
+        this.map = map;
+        const sourceId = 'bbox_' + Math.random().toString(36).slice(2);
+        if (this.source)
+            throw new Error('BBoxDrawer already added to map');
+        map.addSource(sourceId, { type: 'geojson', data: this.getAsFeatureCollection() });
+        map.addLayer({
+            id: 'bbox-line_' + Math.random().toString(36).slice(2),
+            type: 'line',
+            source: sourceId,
+            filter: ['==', '$type', 'LineString'],
+            ...this.lineStyle
+        });
+        map.addLayer({
+            id: 'bbox-fill_' + Math.random().toString(36).slice(2),
+            type: 'fill',
+            source: sourceId,
+            filter: ['==', '$type', 'Polygon'],
+            ...this.fillStyle
+        });
+        this.source = map.getSource(sourceId);
+        this.canvas = map.getCanvasContainer();
+        map.on('mousemove', (e) => {
+            if (e.originalEvent.buttons % 2 === 0)
+                return this.checkDragPointAt(e.point);
+            if (!this.isDragging)
+                return;
+            if (!this.dragPoint)
+                return this.checkDragPointAt(e.point);
+            this.doDrag(e.lngLat);
+            this.redraw();
+            e.preventDefault();
+        });
+        map.on('mousedown', (e) => {
+            if (this.isDragging)
+                return;
+            if (e.originalEvent.buttons % 2) {
+                this.checkDragPointAt(e.point);
+                if (this.dragPoint)
+                    this.isDragging = true;
+                if (this.isDragging)
+                    e.preventDefault();
+            }
+        });
+        map.on('mouseup', () => {
+            this.isDragging = false;
+            this.updateDragPoint(false);
+        });
+    }
+    updateDragPoint(dragPoint) {
+        if (this.dragPoint === dragPoint)
+            return;
+        this.dragPoint = dragPoint;
+        this.canvas.style.cursor = this.getCursor(dragPoint);
+    }
+    getAsFeatureCollection() {
+        const ring = getRing(this.bbox);
+        return {
+            type: 'FeatureCollection',
+            features: [
+                this.inverted ? polygon(getRing(worldBBox), ring) : polygon(ring),
+                linestring(ring)
+            ]
+        };
+        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]);
+            // prettier-ignore
+            return [[x0, y0], [x1, y0], [x1, y1], [x0, y1], [x0, y0]];
+        }
+        function polygon(...coordinates) {
+            return { type: 'Feature', geometry: { type: 'Polygon', coordinates }, properties: {} };
+        }
+        function linestring(coordinates) {
+            return { type: 'Feature', geometry: { type: 'LineString', coordinates }, properties: {} };
+        }
+    }
+    setGeometry(bbox) {
+        this.bbox = bbox.slice(0, 4);
+        this.redraw();
+    }
+    getBounds() {
+        return new LngLatBounds(this.bbox);
+    }
+    redraw() {
+        this.source?.setData(this.getAsFeatureCollection());
+    }
+    getAsPixel() {
+        const p0 = this.map.project([this.bbox[0], this.bbox[1]]);
+        const p1 = this.map.project([this.bbox[2], this.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)];
+    }
+    checkDragPointAt(point) {
+        const maxDistance = 5;
+        const { x, y } = point;
+        const [x0, y0, x1, y1] = this.getAsPixel();
+        // Don't think outside the box
+        if (x < x0 - maxDistance)
+            return this.updateDragPoint(false);
+        if (x > x1 + maxDistance)
+            return this.updateDragPoint(false);
+        if (y < y0 - maxDistance)
+            return this.updateDragPoint(false);
+        if (y > y1 + maxDistance)
+            return this.updateDragPoint(false);
+        let dragX = (Math.abs(x0 - x) < maxDistance ? 1 : 0) + (Math.abs(x1 - x) < maxDistance ? 2 : 0);
+        let dragY = (Math.abs(y0 - y) < maxDistance ? 1 : 0) + (Math.abs(y1 - y) < maxDistance ? 2 : 0);
+        if (dragX === 3)
+            dragX = Math.abs(x0 - x) < Math.abs(x1 - x) ? 1 : 2;
+        if (dragY === 3)
+            dragY = Math.abs(y0 - y) < Math.abs(y1 - y) ? 1 : 2;
+        const directions = [false, 'w', 'e', 'n', 'nw', 'ne', 's', 'sw', 'se'];
+        this.updateDragPoint(directions[dragX + dragY * 3]);
+    }
+    getCursor(drag) {
+        return DragPointMap.get(drag)?.cursor ?? 'default';
+    }
+    doDrag(lngLat) {
+        const x = Math.round(lngLat.lng * 1e3) / 1e3;
+        const y = Math.round(lngLat.lat * 1e3) / 1e3;
+        // prettier-ignore
+        switch (this.dragPoint) {
+            case 'n':
+                this.bbox[3] = y;
+                break;
+            case 'ne':
+                this.bbox[2] = x;
+                this.bbox[3] = y;
+                break;
+            case 'e':
+                this.bbox[2] = x;
+                break;
+            case 'se':
+                this.bbox[2] = x;
+                this.bbox[1] = y;
+                break;
+            case 's':
+                this.bbox[1] = y;
+                break;
+            case 'sw':
+                this.bbox[0] = x;
+                this.bbox[1] = y;
+                break;
+            case 'w':
+                this.bbox[0] = x;
+                break;
+            case 'nw':
+                this.bbox[0] = x;
+                this.bbox[3] = y;
+                break;
+            default: return;
+        }
+        if (this.bbox[2] < this.bbox[0]) {
+            // flip horizontal
+            this.bbox = [this.bbox[2], this.bbox[1], this.bbox[0], this.bbox[3]];
+            this.updateDragPoint(DragPointMap.get(this.dragPoint)?.flipH ?? false);
+        }
+        if (this.bbox[3] < this.bbox[1]) {
+            // flip vertical
+            this.bbox = [this.bbox[0], this.bbox[3], this.bbox[2], this.bbox[1]];
+            this.updateDragPoint(DragPointMap.get(this.dragPoint)?.flipV ?? false);
+        }
+    }
+}

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

@@ -0,0 +1,24 @@
+import type geojson from 'geojson';
+import type { SymbolStyle } from './style.js';
+import { AbstractDrawer } from './abstract.js';
+export type Point = [number, number];
+export declare class MarkerDrawer extends AbstractDrawer<geojson.BBox> {
+    private source?;
+    private isDragging;
+    private dragPoint;
+    private map;
+    private canvas;
+    private symbolStyle;
+    private point;
+    constructor(map: maplibregl.Map, options?: {
+        point?: Point;
+    } & SymbolStyle);
+    private updateDragPoint;
+    private getAsFeatureCollection;
+    setGeometry(point: geojson.Position): void;
+    getBounds(): maplibregl.LngLatBounds;
+    private redraw;
+    private getAsPixel;
+    private checkDragPointAt;
+    private doDrag;
+}

package/dist/utils/draw/marker.js

@@ -0,0 +1,97 @@
+import { AbstractDrawer } from './abstract.js';
+import { getSymbolStyle } from './style.js';
+const maplibregl = await import('maplibre-gl');
+const { LngLatBounds } = maplibregl;
+export class MarkerDrawer extends AbstractDrawer {
+    source;
+    isDragging = false;
+    dragPoint = false;
+    map;
+    canvas;
+    symbolStyle;
+    point;
+    constructor(map, options) {
+        super();
+        this.point = options?.point ?? [0, 0];
+        this.symbolStyle = getSymbolStyle(options);
+        this.map = map;
+        const sourceId = 'marker_' + Math.random().toString(36).slice(2);
+        if (this.source)
+            throw new Error('BBoxDrawer already added to map');
+        map.addSource(sourceId, { type: 'geojson', data: this.getAsFeatureCollection() });
+        map.addLayer({
+            id: 'marker_' + Math.random().toString(36).slice(2),
+            type: 'symbol',
+            source: sourceId,
+            filter: ['==', '$type', 'Point'],
+            ...this.symbolStyle
+        });
+        this.source = map.getSource(sourceId);
+        this.canvas = map.getCanvasContainer();
+        map.on('mousemove', (e) => {
+            if (e.originalEvent.buttons % 2 === 0)
+                return this.checkDragPointAt(e.point);
+            if (!this.isDragging)
+                return;
+            if (!this.dragPoint)
+                return this.checkDragPointAt(e.point);
+            this.doDrag(e.lngLat);
+            this.redraw();
+            e.preventDefault();
+        });
+        map.on('mousedown', (e) => {
+            if (this.isDragging)
+                return;
+            if (e.originalEvent.buttons % 2) {
+                this.checkDragPointAt(e.point);
+                if (this.dragPoint)
+                    this.isDragging = true;
+                if (this.isDragging)
+                    e.preventDefault();
+            }
+        });
+        map.on('mouseup', () => {
+            this.isDragging = false;
+            this.updateDragPoint(false);
+        });
+    }
+    updateDragPoint(dragPoint) {
+        if (this.dragPoint === dragPoint)
+            return;
+        this.dragPoint = dragPoint;
+        this.canvas.style.cursor = dragPoint ? 'move' : 'default';
+    }
+    getAsFeatureCollection() {
+        return {
+            type: 'FeatureCollection',
+            features: [getPoint(this.point)]
+        };
+        function getPoint(coordinates) {
+            return { type: 'Feature', geometry: { type: 'Point', coordinates }, properties: {} };
+        }
+    }
+    setGeometry(point) {
+        this.point = [point[0], point[1]];
+        this.redraw();
+    }
+    getBounds() {
+        return new LngLatBounds(this.point, this.point);
+    }
+    redraw() {
+        this.source?.setData(this.getAsFeatureCollection());
+    }
+    getAsPixel() {
+        const p = this.map.project([this.point[0], this.point[1]]);
+        return [p.x, p.y];
+    }
+    checkDragPointAt(point) {
+        const maxDistance = 5;
+        const { x, y } = point;
+        const [x0, y0] = this.getAsPixel();
+        const distance = Math.sqrt(Math.pow(x - x0, 2) + Math.pow(y - y0, 2));
+        this.updateDragPoint(distance < maxDistance);
+    }
+    doDrag(lngLat) {
+        this.point = [Math.round(lngLat.lng * 1e5) / 1e5, Math.round(lngLat.lat * 1e5) / 1e5];
+    }
+}

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

@@ -0,0 +1,19 @@
+import type { FillLayerSpecification, LineLayerSpecification, SymbolLayerSpecification } from 'maplibre-gl';
+export type AbstractLayerStyle<T extends FillLayerSpecification | LineLayerSpecification | SymbolLayerSpecification> = {
+    paint: {} & T['paint'];
+    layout: {} & T['layout'];
+};
+export interface FillStyle {
+    color?: string;
+    fillColor?: string;
+}
+export declare function getFillStyle(style?: FillStyle): AbstractLayerStyle<FillLayerSpecification>;
+export interface LineStyle {
+    color?: string;
+    lineColor?: string;
+}
+export declare function getLineStyle(style?: LineStyle): AbstractLayerStyle<LineLayerSpecification>;
+export interface SymbolStyle {
+    color?: string;
+}
+export declare function getSymbolStyle(style?: SymbolStyle): AbstractLayerStyle<SymbolLayerSpecification>;

package/dist/utils/draw/style.js

@@ -0,0 +1,40 @@
+import { Color } from '@versatiles/style';
+export function getFillStyle(style) {
+    const result = {
+        layout: {},
+        paint: {}
+    };
+    if (style) {
+        if (style.fillColor) {
+            result.paint['fill-color'] = Color.parse(style.fillColor).asString();
+        }
+        else if (style.color) {
+            result.paint['fill-color'] = Color.parse(style.color).fade(0.8).asString();
+        }
+    }
+    return result;
+}
+export function getLineStyle(style) {
+    const result = {
+        layout: { 'line-cap': 'round', 'line-join': 'round' },
+        paint: {}
+    };
+    if (style) {
+        const color = style.lineColor ?? style.color;
+        if (color)
+            result.paint['line-color'] = Color.parse(color).asString();
+    }
+    return result;
+}
+export function getSymbolStyle(style) {
+    const result = {
+        layout: {},
+        paint: {}
+    };
+    result.paint['icon-color'] = Color.parse(style?.color ?? '#a00').asString();
+    result.paint['icon-halo-color'] = Color.parse('#fff').asString();
+    result.paint['icon-halo-width'] = 0.5;
+    result.paint['icon-halo-blur'] = 0;
+    result.layout['icon-image'] = 'basics:icon-embassy';
+    return result;
+}

package/dist/utils/location.d.ts

@@ -1,3 +1,4 @@
 import type { Language } from '@versatiles/style';
-export declare function getCountry(): string;
+export declare function getCountryName(): string | null;
+export declare function getCountryCode(): string | null;
 export declare function getLanguage(): Language;

package/dist/utils/location.js

@@ -1,22 +1,32 @@
 import { timezone2countrycode } from './zones.js';
-export function getCountry() {
+export function getCountryName() {
+    try {
+        const countryCode = getCountryCode();
+        if (!countryCode)
+            return null;
+        const region = new Intl.DisplayNames(['en-GB'], { type: 'region' });
+        const country = region.of(countryCode);
+        return country || null;
+    }
+    catch {
+        return null;
+    }
+}
+export function getCountryCode() {
     try {
         const options = Intl.DateTimeFormat().resolvedOptions();
         let countryCode = timezone2countrycode(options.timeZone);
         if (!countryCode)
             countryCode = navigator.language.split('-')[1];
-        const region = new Intl.DisplayNames(['en-GB'], { type: 'region' });
-        const country = region.of(countryCode);
-        return country || '';
+        return countryCode || null;
     }
-    catch (error) {
-        console.error('Could not determine country from timezone:', error);
-        return ''; // Fallback if no country can be determined
+    catch {
+        return null;
     }
 }
 export function getLanguage() {
     try {
-        const language = Intl.DateTimeFormat().resolvedOptions().locale.split('-')[0];
+        const language = Intl.DateTimeFormat().resolvedOptions().locale.split('-')[0].toLowerCase();
         switch (language) {
             case 'en':
             case 'de':
@@ -24,8 +34,7 @@ export function getLanguage() {
         }
         return null;
     }
-    catch (error) {
-        console.error('Could not determine country from timezone:', error);
+    catch {
         return null; // Fallback if no country can be determined
     }
 }

package/dist/utils/sprite_library.d.ts

@@ -0,0 +1,19 @@
+interface SpriteEntry {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    pixelRatio: number;
+    sdf: boolean;
+    id: string;
+    name: string;
+    group: string;
+}
+export declare class SpriteLibrary {
+    private spriteList;
+    private pixelRatio;
+    constructor(pixelRatio?: number);
+    getSpriteList(): Promise<SpriteEntry[]>;
+    private loadSpriteList;
+}
+export default SpriteLibrary;

package/dist/utils/sprite_library.js

@@ -0,0 +1,30 @@
+export class SpriteLibrary {
+    spriteList = [];
+    pixelRatio;
+    constructor(pixelRatio = 2) {
+        this.pixelRatio = pixelRatio;
+    }
+    async getSpriteList() {
+        await this.loadSpriteList();
+        return this.spriteList;
+    }
+    async loadSpriteList() {
+        if (this.spriteList.length)
+            return;
+        const spriteGroupList = (await fetch('https://tiles.versatiles.org/assets/sprites/index.json').then((r) => r.json()));
+        await Promise.all(spriteGroupList.map(async (group) => {
+            const spriteGroup = (await fetch(`https://tiles.versatiles.org/assets/sprites/${group}/sprites@${this.pixelRatio}x.json`).then((r) => r.json()));
+            Object.entries(spriteGroup).forEach(([name, entry]) => {
+                this.spriteList.push({
+                    ...entry,
+                    pixelRatio: entry.pixelRatio ?? 1,
+                    sdf: entry.sdf ?? false,
+                    id: `${group}/${name}`,
+                    group,
+                    name
+                });
+            });
+        }));
+    }
+}
+export default SpriteLibrary;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@versatiles/svelte",
-  "version": "0.2.0",
+  "version": "0.3.0",
+  "license": "MIT",
   "scripts": {
-    "build": "vite build && npm run package",
+    "build": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && vite build && npm run package",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check": "npm run lint && npm run build && npm run test",
     "dev": "vite dev",
     "format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
+    "lint": "prettier --check . && eslint --color .",
     "package": "svelte-kit sync && svelte-package && publint",
     "prepack": "npm run package",
     "prepublishOnly": "npm run package",
@@ -16,7 +17,8 @@
     "release": "npm run build && npx vrt release-npm",
     "test:integration": "playwright test",
     "test:unit": "vitest run",
-    "test": "npm run test:integration && npm run test:unit",
+    "test:coverage": "vitest run --coverage",
+    "test": "npm run test:unit && npm run test:integration",
     "upgrade": "npm-check-updates -u && rm -f package-lock.json; rm -rf node_modules; npm update --save && npm install"
   },
   "exports": {
@@ -37,27 +39,27 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
-    "@sveltejs/adapter-auto": "^4.0.0",
+    "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.16.1",
     "@sveltejs/package": "^2.3.9",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@turf/turf": "^7.2.0",
     "@types/eslint": "^9.6.1",
     "@types/node": "^22.10.10",
-    "@types/split2": "^4.2.3",
     "@versatiles/release-tool": "^1.2.6",
+    "@vitest/coverage-v8": "^3.0.4",
     "cookie": "^1.0.2",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-svelte": "^2.46.1",
     "geojson": "^0.5.0",
     "globals": "^15.14.0",
+    "happy-dom": "^16.7.3",
     "npm-check-updates": "^17.1.14",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
     "publint": "^0.3.2",
-    "split2": "^4.2.0",
-    "svelte": "^5.19.2",
+    "svelte": "^5.19.3",
     "svelte-check": "^4.1.4",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
@@ -69,7 +71,7 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@versatiles/style": "^5.2.5",
+    "@versatiles/style": "^5.2.9",
     "maplibre-gl": "^5.0.1"
   }
 }

package/dist/components/BBoxMap/README.md

@@ -1,70 +0,0 @@
-# BBox Map
-
-This SvelteKit component generates an interactive world map with a search field that allows users to easily search for geographic bounding boxes (BBoxes) for various regions, including continents, countries, and cities. The selected bounding box can also be manipulated by dragging the edges.
-
-## Improving Bounding Boxes
-
-Bounding boxes for different regions (continents, countries, cities, etc.) are stored in the `bboxes.json` file. This file is generated by the helper script `helpers/merge_bboxes.ts`, which processes the `*.jsonl` files in the `data` directory.
-
-### Editing Bounding Boxes
-
-To edit or add new bounding boxes:
-
-1. **Modify or Add a JSONL File**: Edit existing JSONL files in the `data` directory or create new ones with the required bounding box data.
-2. **Run the `merge_bboxes.ts` Script**: After making changes, run the `merge_bboxes.ts` script to update the `bboxes.json` file.
-
-### Helper Script: `merge_bboxes.ts`
-
-This script consolidates bounding box data from multiple JSONL files in the `data` directory, checks for duplicate labels, and outputs a single, sorted JSON file (`bboxes.json`). The bounding box coordinates are also rounded to an appropriate precision based on their size.
-
-#### Usage
-
-Simply run the script:
-
-```bash
-./helpers/merge_bboxes.ts
-```
-
-#### Output
-
-The script writes the processed data to `bboxes.json` in the parent directory. The entries in this file are sorted by population and formatted as:
-
-```json
-["Label", lngMin, latMin, lngWidth, latHeight]
-```
-
-### Helper Script: `geojson2bboxes.ts`
-
-This script processes GeoJSON or GeoJSONL files to extract bounding boxes for each geographic feature, generate labels, and either extract or estimate the population for each feature. The results are saved in JSONL format, which can be used by the `merge_bboxes.ts` script.
-
-#### Usage
-
-```bash
-./helpers/geojson2bboxes.ts <FILENAME> <LABEL_TEMPLATE> [POPULATION_KEY]
-```
-
-- `<FILENAME>`: The name of the input GeoJSON or GeoJSONL file. The file can be optionally compressed with `.br` (Brotli) or `.gz` (Gzip).
-- `<LABEL_TEMPLATE>`: A template string used to generate labels for each feature. Placeholders in the form `{propertyName}` will be replaced by the corresponding property value from each feature.
-- `[POPULATION_KEY]`: (Optional) The key in the feature's properties that contains the population value. If not provided, the script will estimate the population.
-
-#### Example
-
-```bash
-./helpers/geojson2bboxes.ts africa.geojson "{country}, {city}"
-```
-
-This command processes the `africa.geojson` file, generating labels in the format `"country, city"` and estimating the population for each region.
-
-#### Output
-
-The script outputs a `.jsonl` file with entries formatted as follows:
-
-```json
-{
-  "label": "Country - City",
-  "population": 123456,
-  "bbox": [minLng, minLat, maxLng, maxLat]
-}
-```
-
-Place this `.jsonl` file in the `data` directory to include it in the `bboxes.json` file when running `merge_bboxes.ts`.