@versatiles/svelte 2.0.0 → 2.1.0

package/dist/components/MapEditor/lib/state/writer.js

@@ -50,14 +50,16 @@ export class StateWriter {
         for (let i = 0; i < length; i++)
             cb(array[i]);
     }
-    writePoint(point, level = 14) {
-        const scale = Math.pow(2, level + 2);
-        this.writeInteger(Math.round(point[0] * scale), level + 11);
-        this.writeInteger(Math.round(point[1] * scale), level + 10);
-    }
-    writePoints(points, level = 14) {
+    writePoint(point, resolutionInMeters = 1) {
+        if (!resolutionInMeters || resolutionInMeters < 1)
+            resolutionInMeters = 1;
+        const scale = Math.round(1e5 / resolutionInMeters);
+        this.writeVarint(Math.round(point[0] * scale), true);
+        this.writeVarint(Math.round(point[1] * scale), true);
+    }
+    writePoints(points, resolutionInMeters = 1) {
         this.writeVarint(points.length);
-        const scale = Math.pow(2, level + 2);
+        const scale = Math.round(1e5 / resolutionInMeters);
         let x = 0;
         let y = 0;
         points.forEach((point) => {
@@ -72,15 +74,8 @@ export class StateWriter {
     writeRoot(root) {
         // Write the version
         this.writeInteger(0, 3);
-        if (root.map) {
-            this.writeBit(true);
-            this.writeMap(root.map);
-        }
-        else {
-            this.writeBit(false);
-        }
-        // metadata is not used yet
-        this.writeBit(false);
+        this.writeMap(root.map);
+        this.writeMetadata(root.meta);
         root.elements.forEach((element) => {
             switch (element.type) {
                 case 'marker':
@@ -95,12 +90,35 @@ export class StateWriter {
                     this.writeInteger(3, 3);
                     this.writeElementPolygon(element);
                     break;
+                case 'circle':
+                    this.writeInteger(4, 3);
+                    this.writeElementCircle(element);
+                    break;
             }
         });
     }
     writeMap(map) {
-        this.writeInteger(Math.round(map.zoom * 32), 10);
-        this.writePoint(map.center, Math.ceil(map.zoom));
+        if (!map) {
+            return this.writeBit(false);
+        }
+        this.writeBit(true);
+        const value = Math.round(Math.log2(map.radius) * 40);
+        const radius = Math.pow(2, value / 40);
+        this.writeInteger(value, 10);
+        // effective resolution of coordinates is 1000 times the visible radius
+        this.writePoint(map.center, radius / 1e3);
+        this.writeBit(false); // additional map data not supported yet
+    }
+    writeMetadata(metadata) {
+        if (!metadata || Object.keys(metadata).length === 0) {
+            return this.writeBit(false);
+        }
+        this.writeBit(true);
+        //if (metadata.heading) {
+        //	this.writeInteger(1, 6);
+        //	this.writeString(metadata.heading);
+        //}
+        this.writeInteger(0, 6);
     }
     writeElementMarker(element) {
         this.writePoint(element.point);
@@ -111,6 +129,7 @@ export class StateWriter {
         else {
             this.writeBit(false);
         }
+        this.writeBit(false); // tooltip not supported yet
         return element;
     }
     writeElementLine(element) {
@@ -122,6 +141,7 @@ export class StateWriter {
         else {
             this.writeBit(false);
         }
+        this.writeBit(false); // tooltip not supported yet
         return element;
     }
     writeElementPolygon(element) {
@@ -140,6 +160,26 @@ export class StateWriter {
         else {
             this.writeBit(false);
         }
+        this.writeBit(false); // tooltip not supported yet
+    }
+    writeElementCircle(element) {
+        this.writePoint(element.point);
+        this.writeVarint(Math.round(element.radius));
+        if (element.style) {
+            this.writeBit(true);
+            this.writeStyle(element.style);
+        }
+        else {
+            this.writeBit(false);
+        }
+        if (element.strokeStyle) {
+            this.writeBit(true);
+            this.writeStyle(element.strokeStyle);
+        }
+        else {
+            this.writeBit(false);
+        }
+        this.writeBit(false); // tooltip not supported yet
     }
     writeStyle(style) {
         if (style.halo != null) {
@@ -184,7 +224,7 @@ export class StateWriter {
         this.writeInteger(0, 4);
     }
     writeColor(color) {
-        const rgb = Color.parse(color).toRGB();
+        const rgb = Color.parse(color).asRGB();
         this.writeInteger(rgb.r, 8);
         this.writeInteger(rgb.g, 8);
         this.writeInteger(rgb.b, 8);

package/dist/components/MapEditor/lib/symbols.d.ts

@@ -11,6 +11,6 @@ export declare class SymbolLibrary {
     private map;
     constructor(map: maplibregl.Map);
     getSymbol(index: number): SymbolInfo;
-    drawSymbol(canvas: HTMLCanvasElement, index: number, halo?: boolean): void;
+    drawSymbol(canvas: HTMLCanvasElement, index: number, halo?: number): void;
     asList(): SymbolInfo[];
 }

package/dist/components/MapEditor/lib/symbols.js

@@ -84,8 +84,7 @@ const entries = [
     [82, 'shield', 'basics:icon-historic', [0, -10]],
     [83, 'shoes', 'basics:icon-shoes', [-5, 0]],
     [84, 'shop', 'basics:icon-shop'],
-    [85, 'shop', 'basics:icon-shop'],
-    [86, 'shrine', 'basics:icon-shrine'],
+    [85, 'shrine', 'basics:icon-shrine'],
     [87, 'sports', 'basics:icon-sports'],
     [88, 'stadium', 'basics:icon-stadium'],
     [89, 'stationery', 'basics:icon-stationery'],
@@ -126,46 +125,66 @@ export class SymbolLibrary {
     getSymbol(index) {
         return symbols.get(index) ?? defaultSymbol;
     }
-    drawSymbol(canvas, index, halo = false) {
+    drawSymbol(canvas, index, halo = 0) {
         const symbol = this.getSymbol(index);
         if (!symbol.image)
             return;
-        const { sdf, data: imageData0 } = this.map.getImage(symbol.image);
-        const { data: data0, width: width0, height: height0 } = imageData0;
-        const { width: width1, height: height1 } = canvas;
-        const data1 = new Uint8ClampedArray(width1 * height1 * 4);
-        for (let y1 = 0; y1 < height1; y1++) {
-            const y0 = Math.floor((y1 / height1) * height0);
-            for (let x1 = 0; x1 < width1; x1++) {
-                const x0 = Math.floor((x1 / width1) * width0);
-                const i0 = (y0 * width0 + x0) * 4;
-                const i1 = (y1 * width1 + x1) * 4;
+        const { sdf, data: imageDataSrc } = this.map.getImage(symbol.image);
+        const { data: dataSrc, width: widthSrc, height: heightSrc } = imageDataSrc;
+        const { width: widthDst, height: heightDst } = canvas;
+        const scale = Math.min(widthDst / widthSrc, heightDst / heightSrc);
+        const x0 = (widthDst - widthSrc * scale) / 2;
+        const y0 = (heightDst - heightSrc * scale) / 2;
+        const border = halo;
+        const dataDst = new Uint8ClampedArray(widthDst * heightDst * 4);
+        for (let yi = 0; yi < heightDst; yi++) {
+            for (let xi = 0; xi < widthDst; xi++) {
+                const x = (xi - x0) / scale;
+                const y = (yi - y0) / scale;
+                const i = (yi * widthDst + xi) * 4;
                 if (sdf) {
-                    const v = (data0[i0 + 3] - 191) * 16;
-                    let a, b;
+                    const v = (interpolate(x, y, 3) - 191) * 8 * scale;
+                    let alpha, color;
                     if (halo) {
-                        b = Math.min(255, Math.max(0, 255 - v));
-                        a = Math.min(255, Math.max(0, 256 * 6 + v));
+                        color = Math.min(255, Math.max(0, 127.5 - v));
+                        alpha = Math.min(255, Math.max(0, 256 * border + v));
                     }
                     else {
-                        b = 0;
-                        a = Math.min(255, Math.max(0, v));
+                        color = 0;
+                        alpha = Math.min(255, Math.max(0, v));
                     }
-                    data1[i1] = b;
-                    data1[i1 + 1] = b;
-                    data1[i1 + 2] = b;
-                    data1[i1 + 3] = a;
+                    dataDst[i] = color;
+                    dataDst[i + 1] = color;
+                    dataDst[i + 2] = color;
+                    dataDst[i + 3] = alpha;
                 }
                 else {
-                    data1[i1] = data0[i0];
-                    data1[i1 + 1] = data0[i0 + 1];
-                    data1[i1 + 2] = data0[i0 + 2];
-                    data1[i1 + 3] = data0[i0 + 3];
+                    dataDst[i] = interpolate(x, y, 0);
+                    dataDst[i + 1] = interpolate(x, y, 1);
+                    dataDst[i + 2] = interpolate(x, y, 2);
+                    dataDst[i + 3] = interpolate(x, y, 3);
                 }
             }
         }
         const ctx = canvas.getContext('2d');
-        ctx.putImageData(new ImageData(data1, width1, height1), 0, 0);
+        ctx.putImageData(new ImageData(dataDst, widthDst, heightDst), 0, 0);
+        function interpolate(x, y, c) {
+            if (x < 0 || y < 0 || x >= widthSrc - 1 || y >= heightSrc - 1)
+                return 0;
+            const x0 = Math.floor(x);
+            const y0 = Math.floor(y);
+            const x1 = Math.ceil(x);
+            const y1 = Math.ceil(y);
+            const xa = (x - x0) / Math.max(1, x1 - x0);
+            const ya = (y - y0) / Math.max(1, y1 - y0);
+            const v00 = dataSrc[(y0 * widthSrc + x0) * 4 + c];
+            const v01 = dataSrc[(y0 * widthSrc + x1) * 4 + c];
+            const v10 = dataSrc[(y1 * widthSrc + x0) * 4 + c];
+            const v11 = dataSrc[(y1 * widthSrc + x1) * 4 + c];
+            const v0 = v00 * (1 - xa) + v01 * xa;
+            const v1 = v10 * (1 - xa) + v11 * xa;
+            return v0 * (1 - ya) + v1 * ya;
+        }
     }
     asList() {
         return Array.from(symbols.values());

package/dist/components/MapEditor/lib/utils/event_handler.d.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,39 @@
+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();
+    }
+}

package/dist/components/MapEditor/lib/utils/geometry.d.ts

@@ -0,0 +1,12 @@
+import type { GeoPath, GeoPoint } from './types.js';
+export declare const EARTH_RADIUS = 6371008.8;
+export declare function getMiddlePoint(p0: GeoPoint, p1: GeoPoint): GeoPoint;
+export declare function lat2mercator(lat: number): number;
+export declare function mercator2lat(y: number): number;
+export declare function distance(point1: GeoPoint, point2: GeoPoint): number;
+export declare function degreesToRadians(degrees: number): number;
+export declare function radiansToDegrees(radians: number): number;
+export declare function circle(center: GeoPoint, radius: number, steps: number): GeoPath;
+type SimpleGeometry = GeoJSON.Point | GeoJSON.LineString | GeoJSON.Polygon;
+export declare function flatten(features: GeoJSON.Feature[]): GeoJSON.Feature<SimpleGeometry>[];
+export {};

package/dist/components/MapEditor/lib/utils/geometry.js

@@ -0,0 +1,87 @@
+export const EARTH_RADIUS = 6371008.8; // Radius of the Earth in meters
+export function getMiddlePoint(p0, p1) {
+    const y0 = lat2mercator(p0[1]);
+    const y1 = lat2mercator(p1[1]);
+    return [(p0[0] + p1[0]) / 2, mercator2lat((y0 + y1) / 2)];
+}
+export function lat2mercator(lat) {
+    return Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI) / 360));
+}
+export function mercator2lat(y) {
+    return ((2 * Math.atan(Math.exp(y)) - Math.PI / 2) * 180) / Math.PI;
+}
+export function distance(point1, point2) {
+    const lat1 = degreesToRadians(point1[1]);
+    const lat2 = degreesToRadians(point2[1]);
+    const deltaLat = degreesToRadians(point2[1] - point1[1]);
+    const deltaLng = degreesToRadians(point2[0] - point1[0]);
+    const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
+        Math.cos(lat1) * Math.cos(lat2) * Math.sin(deltaLng / 2) * Math.sin(deltaLng / 2);
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    return EARTH_RADIUS * c; // Distance in meters
+}
+export function degreesToRadians(degrees) {
+    return ((degrees % 360) * Math.PI) / 180;
+}
+export function radiansToDegrees(radians) {
+    return ((radians / Math.PI) % 2) * 180;
+}
+export function circle(center, radius, steps) {
+    const radians = radius / EARTH_RADIUS;
+    const lng1 = degreesToRadians(center[0]);
+    const lat1 = degreesToRadians(center[1]);
+    const result = [];
+    for (let i = 0; i < steps; i++) {
+        const bearingRad = degreesToRadians((i * 360) / steps);
+        const lat2 = Math.asin(Math.sin(lat1) * Math.cos(radians) + Math.cos(lat1) * Math.sin(radians) * Math.cos(bearingRad));
+        const lng2 = lng1 +
+            Math.atan2(Math.sin(bearingRad) * Math.sin(radians) * Math.cos(lat1), Math.cos(radians) - Math.sin(lat1) * Math.sin(lat2));
+        result.push([radiansToDegrees(lng2), radiansToDegrees(lat2)]);
+    }
+    return result;
+}
+export function flatten(features) {
+    return features.flatMap((feature) => {
+        if (feature.type !== 'Feature') {
+            throw new Error(`Expected Feature, got ${feature.type}`);
+        }
+        return flattenGeometry(feature.geometry, feature.properties);
+    });
+    function flattenGeometry(geometry, properties) {
+        switch (geometry.type) {
+            case 'Point':
+            case 'LineString':
+            case 'Polygon':
+                return [
+                    {
+                        type: 'Feature',
+                        properties,
+                        geometry
+                    }
+                ];
+            case 'GeometryCollection':
+                return geometry.geometries.flatMap((g) => flattenGeometry(g, properties));
+            case 'MultiPoint':
+                return geometry.coordinates.map((coordinates) => ({
+                    type: 'Feature',
+                    properties,
+                    geometry: { type: 'Point', coordinates }
+                }));
+            case 'MultiLineString':
+                return geometry.coordinates.map((coordinates) => ({
+                    type: 'Feature',
+                    properties,
+                    geometry: { type: 'LineString', coordinates }
+                }));
+            case 'MultiPolygon':
+                return geometry.coordinates.map((coordinates) => ({
+                    type: 'Feature',
+                    properties,
+                    geometry: { type: 'Polygon', coordinates }
+                }));
+            default:
+                // @ts-expect-error error on unknown geometry type
+                throw new Error(`Unknown geometry type "${geometry?.type}"`);
+        }
+    }
+}

package/dist/components/MapEditor/lib/utils/types.d.ts

@@ -0,0 +1,2 @@
+export type GeoPoint = [number, number];
+export type GeoPath = GeoPoint[];

package/dist/components/MapEditor/lib/utils/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/MapEditor/style/button.scss

@@ -0,0 +1,115 @@
+button.btn,
+fieldset.btn {
+	font-size: 0.8rem;
+}
+
+button.btn,
+fieldset.btn > div > label {
+	background-color: var(--color-blue);
+	opacity: 0.7;
+	border-radius: var(--border-radius);
+	border: none;
+	color: var(--color-bg);
+	cursor: pointer;
+	display: inline-block;
+	font-weight: 600;
+	position: relative;
+	padding: 0;
+	transition: opacity 0.1s ease-in-out;
+	padding-block: 0.6em;
+	padding-inline: 1.2em;
+}
+
+button.btn {
+	&:focus {
+		outline: 1px solid var(--color-blue);
+		outline-offset: 2px;
+	}
+
+	&:not([disabled]):hover {
+		opacity: 1;
+	}
+
+	&:disabled {
+		opacity: 0.3;
+	}
+
+	&:after {
+		content: '✓';
+		background-color: var(--color-green);
+		border-radius: 1em;
+		color: var(--color-bg);
+		display: block;
+		font-size: 1em;
+		height: 1.6em;
+		line-height: 1.6em;
+		margin-left: 5px;
+		opacity: 0;
+		pointer-events: none;
+		position: absolute;
+		right: -0.6em;
+		text-align: center;
+		top: -0.6em;
+		transition: opacity 0.1s ease-in-out;
+		width: 1.6em;
+	}
+
+	&.success {
+		&:after {
+			opacity: 1;
+		}
+	}
+}
+
+fieldset.btn {
+	position: relative;
+	display: inline-block;
+	border: none;
+	padding: 0;
+
+	legend {
+		padding-inline: 0;
+		position: absolute;
+		display: block;
+		text-align: center;
+		top: -1.3em;
+		left: 0;
+		right: 0;
+	}
+
+	& > div {
+		border-radius: var(--border-radius);
+		overflow: hidden;
+		border: none;
+		display: inline-flex;
+		padding: 0;
+
+		& > label {
+			margin: 0;
+			border-radius: 0;
+			border: none;
+			border-left: 0.5px solid color-mix(in srgb, var(--color-bg) 20%, transparent);
+
+			&:first-of-type {
+				border-left: none;
+			}
+		}
+
+		input[type='radio'] {
+			display: none;
+		}
+
+		input:checked + label,
+		label:hover {
+			background-color: var(--color-blue);
+			color: var(--color-bg);
+		}
+	}
+}
+
+.label {
+	opacity: 0.5;
+	font-size: 0.7rem;
+	font-weight: normal;
+	margin: 0;
+}

package/dist/components/MapEditor/style/index.scss

@@ -0,0 +1,3 @@
+@import url('button.scss');
+@import url('layout.scss');
+@import url('other.scss');

package/dist/components/MapEditor/style/layout.scss

@@ -0,0 +1,20 @@
+.grid1,
+.grid2 {
+	display: grid;
+	gap: var(--btn-gap);
+	margin: var(--btn-gap) 0;
+	width: 100%;
+}
+
+.grid1 {
+	grid-template-columns: 1fr;
+}
+
+.grid2 {
+	grid-template-columns: repeat(2, 1fr);
+}
+
+.grid1 > button,
+.grid2 > button {
+	width: 100%;
+}

package/dist/components/MapEditor/style/other.scss

@@ -0,0 +1,10 @@
+hr {
+	border: none;
+	border-top: 1px solid var(--color-text);
+	opacity: 0.1;
+	margin-block: var(--gap);
+
+	&.thick {
+		opacity: 0.2;
+	}
+}

package/dist/utils/location.d.ts

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