@versatiles/svelte 0.1.2 → 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 { LanguageSuffix } from '@versatiles/style/dist/style_builder/types.js';
-export declare function getCountry(): string;
-export declare function getLanguage(): LanguageSuffix;
+import type { Language } from '@versatiles/style';
+export declare function getCountryName(): string | null;
+export declare function getCountryCode(): string | null;
+export declare function getLanguage(): Language;

package/dist/utils/location.js

@@ -1,31 +1,40 @@
 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':
                 return language;
         }
-        return undefined;
+        return null;
     }
-    catch (error) {
-        console.error('Could not determine country from timezone:', error);
-        return undefined; // Fallback if no country can be determined
+    catch {
+        return null; // Fallback if no country can be determined
     }
 }

package/dist/utils/map_style.d.ts

@@ -0,0 +1,3 @@
+import { type StyleBuilderOptions } from '@versatiles/style';
+export declare function getMapStyle(darkMode: boolean, styleOptions?: StyleBuilderOptions): import("maplibre-gl").StyleSpecification;
+export declare function isDarkMode(element: HTMLElement): boolean;

package/dist/utils/{style.js → map_style.js}

@@ -3,7 +3,7 @@ import { getLanguage } from './location.js';
 export function getMapStyle(darkMode, styleOptions = {}) {
     return styles.colorful({
         baseUrl: 'https://tiles.versatiles.org',
-        languageSuffix: getLanguage(),
+        language: getLanguage(),
         recolor: {
             invertBrightness: darkMode,
             gamma: darkMode ? 0.5 : 1

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.1.2",
+  "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": {
@@ -36,40 +38,40 @@
     "svelte": "^5.0.3"
   },
   "devDependencies": {
-    "@playwright/test": "^1.48.1",
-    "@sveltejs/adapter-auto": "^3.2.5",
-    "@sveltejs/kit": "^2.7.2",
-    "@sveltejs/package": "^2.3.5",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@turf/turf": "^7.1.0",
+    "@playwright/test": "^1.50.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.7.7",
-    "@types/split2": "^4.2.3",
+    "@types/node": "^22.10.10",
     "@versatiles/release-tool": "^1.2.6",
-    "cookie": "^1.0.1",
-    "eslint": "^9.13.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.45.1",
+    "@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.11.0",
-    "npm-check-updates": "^17.1.4",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.7",
-    "publint": "^0.2.11",
-    "split2": "^4.2.0",
-    "svelte": "^5.0.3",
-    "svelte-check": "^4.0.5",
-    "tsx": "^4.19.1",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.10.0",
-    "vite": "^5.4.9",
-    "vitest": "^2.1.3"
+    "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",
+    "svelte": "^5.19.3",
+    "svelte-check": "^4.1.4",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.21.0",
+    "vite": "^6.0.11",
+    "vitest": "^3.0.4"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@versatiles/style": "^4.4.1",
-    "maplibre-gl": "^4.7.1"
+    "@versatiles/style": "^5.2.9",
+    "maplibre-gl": "^5.0.1"
   }
 }