@versatiles/svelte 1.1.1 → 2.0.0

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

@@ -1,178 +1,205 @@
 import { Color } from '@versatiles/style';
-import { compress, uint8ArrayToBase64 } from '../utils.js';
-const chunkSize = 65536;
+import { BASE64_CHARS, CHAR_CODE2VALUE } from './constants.js';
+import { StateReader } from './reader.js';
 export class StateWriter {
-    buffer = new Uint8Array(chunkSize);
-    offset = 0;
+    bits = [];
     constructor() { }
-    writeByte(num) {
-        if (this.offset >= this.buffer.length) {
-            const newBuffer = new Uint8Array(this.buffer.length + chunkSize);
-            newBuffer.set(this.buffer);
-            this.buffer = newBuffer;
+    asBase64() {
+        const reader = new StateReader(this.bits);
+        const chars = [];
+        while (!reader.ended()) {
+            chars.push(BASE64_CHARS[reader.read6pack()]);
         }
-        this.buffer[this.offset++] = num;
+        return chars.join('');
     }
-    writeUnsignedInteger(i) {
-        if (!Number.isSafeInteger(i)) {
-            throw new RangeError(`Number out of safe integer range: ${i}`);
-        }
-        while (i > 0x7f) {
-            this.writeByte((i & 0x7f) | 0x80);
-            i >>>= 7;
+    asBitString() {
+        return this.bits.map((bit) => (bit ? '1' : '0')).join('');
+    }
+    writeBit(value) {
+        this.bits.push(value);
+    }
+    writeInteger(value, bits) {
+        if (value % 1 !== 0)
+            throw new Error('value must be an integer');
+        for (let i = bits - 1; i >= 0; i--) {
+            this.bits.push((value & (1 << i)) > 0);
         }
-        this.writeByte(i);
+        return value;
     }
-    writeSignedInteger(i) {
-        if (!Number.isSafeInteger(i)) {
-            throw new RangeError(`Number out of safe integer range: ${i}`);
+    writeVarint(value, signed) {
+        if (value % 1 !== 0)
+            throw new Error('value must be an integer');
+        if (signed) {
+            value = value < 0 ? ((-1 - value) << 1) | 1 : value << 1;
+        }
+        else {
+            if (value < 0)
+                throw new Error('Unsigned varint cannot be negative');
+        }
+        while (true) {
+            this.writeInteger(value & 0x1f, 5);
+            value >>= 5;
+            this.writeBit(value >= 1);
+            if (value < 1)
+                break;
         }
-        this.writeUnsignedInteger(i < 0 ? -i * 2 - 1 : i * 2);
     }
-    writeString(str) {
-        const length = str.length;
-        this.writeUnsignedInteger(length);
+    writeArray(array, cb) {
+        const length = array.length;
+        this.writeVarint(length);
         for (let i = 0; i < length; i++)
-            this.writeUnsignedInteger(str.charCodeAt(i));
-    }
-    writeBoolean(b) {
-        this.writeByte(b ? 1 : 0);
+            cb(array[i]);
     }
-    getBase64() {
-        return uint8ArrayToBase64(this.getBuffer());
+    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);
     }
-    async getBase64compressed() {
-        return uint8ArrayToBase64(await compress(this.getBuffer()));
-    }
-    getBuffer() {
-        return this.buffer.slice(0, this.offset);
+    writePoints(points, level = 14) {
+        this.writeVarint(points.length);
+        const scale = Math.pow(2, level + 2);
+        let x = 0;
+        let y = 0;
+        points.forEach((point) => {
+            const xi = Math.round(point[0] * scale);
+            const yi = Math.round(point[1] * scale);
+            this.writeVarint(xi - x, true);
+            this.writeVarint(yi - y, true);
+            x = xi;
+            y = yi;
+        });
     }
-    writeObject(state) {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const me = this;
-        Object.entries(state).forEach(([key, value]) => {
-            if (value == null)
-                return;
-            switch (key) {
-                case 'map':
-                    writeObject(10, value);
-                    break;
-                case 'style':
-                    writeObject(11, value);
-                    break;
-                case 'strokeStyle':
-                    writeObject(12, value);
-                    break;
-                case 'elements':
-                    if (!Array.isArray(value))
-                        throw new Error(`Invalid elements: ${value}`);
-                    this.writeByte(20);
-                    this.writeUnsignedInteger(value.length);
-                    value.forEach((element) => this.writeObject(element));
-                    break;
-                case 'point':
-                    if (!Array.isArray(value) || value.length !== 2)
-                        throw new Error(`Invalid point: ${value}`);
-                    this.writeByte(30);
-                    me.writeSignedInteger(Math.round(value[0] * 1e5));
-                    me.writeSignedInteger(Math.round(value[1] * 1e5));
-                    break;
-                case 'points':
-                    if (!Array.isArray(value))
-                        throw new Error(`Invalid points: ${value}`);
-                    this.writeByte(31);
-                    this.writeUnsignedInteger(value.length);
-                    this.writeDifferential(value.map((p) => Math.round(p[0] * 1e5)));
-                    this.writeDifferential(value.map((p) => Math.round(p[1] * 1e5)));
-                    break;
-                case 'color':
-                    this.writeByte(40);
-                    this.writeColor(value);
-                    break;
-                case 'type':
-                    this.writeByte(50);
-                    switch (value) {
-                        case 'marker':
-                            this.writeByte(0);
-                            break;
-                        case 'line':
-                            this.writeByte(1);
-                            break;
-                        case 'polygon':
-                            this.writeByte(2);
-                            break;
-                        default:
-                            throw new Error(`Invalid type: ${value}`);
-                    }
-                    break;
-                case 'label':
-                    if (typeof value !== 'string')
-                        throw new Error(`Invalid string: ${value}`);
-                    this.writeByte(60);
-                    this.writeString(value);
-                    break;
-                case 'halo':
-                    writeInteger(70, value, 10);
-                    break;
-                case 'opacity':
-                    writeInteger(71, value, 100);
-                    break;
-                case 'pattern':
-                    writeInteger(72, value);
-                    break;
-                case 'rotate':
-                    writeInteger(73, value);
-                    break;
-                case 'size':
-                    writeInteger(74, value, 10);
-                    break;
-                case 'width':
-                    writeInteger(75, value, 10);
-                    break;
-                case 'zoom':
-                    writeInteger(76, value, 20);
-                    break;
-                case 'visible':
-                    if (typeof value !== 'boolean')
-                        throw new Error(`Invalid boolean: ${value}`);
-                    this.writeByte(90);
-                    this.writeBoolean(value);
+    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);
+        root.elements.forEach((element) => {
+            switch (element.type) {
+                case 'marker':
+                    this.writeInteger(1, 3);
+                    this.writeElementMarker(element);
+                    break;
+                case 'line':
+                    this.writeInteger(2, 3);
+                    this.writeElementLine(element);
+                    break;
+                case 'polygon':
+                    this.writeInteger(3, 3);
+                    this.writeElementPolygon(element);
                     break;
-                default:
-                    throw new Error(`Invalid state key: ${key}`);
             }
         });
-        this.writeByte(0);
-        function writeObject(id, obj) {
-            if (typeof obj !== 'object' || obj == null)
-                throw new Error(`Invalid object: ${obj}`);
-            me.writeByte(id);
-            me.writeObject(obj);
-        }
-        function writeInteger(id, obj, factor = 1) {
-            if (typeof obj !== 'number')
-                throw new Error(`Invalid number: ${obj}`);
-            const value = Math.round(obj);
-            if (value < 0)
-                throw new Error(`Negative Number: ${obj}`);
-            me.writeByte(id);
-            me.writeUnsignedInteger(value * factor);
+    }
+    writeMap(map) {
+        this.writeInteger(Math.round(map.zoom * 32), 10);
+        this.writePoint(map.center, Math.ceil(map.zoom));
+    }
+    writeElementMarker(element) {
+        this.writePoint(element.point);
+        if (element.style) {
+            this.writeBit(true);
+            this.writeStyle(element.style);
+        }
+        else {
+            this.writeBit(false);
+        }
+        return element;
+    }
+    writeElementLine(element) {
+        this.writePoints(element.points);
+        if (element.style) {
+            this.writeBit(true);
+            this.writeStyle(element.style);
+        }
+        else {
+            this.writeBit(false);
+        }
+        return element;
+    }
+    writeElementPolygon(element) {
+        this.writePoints(element.points);
+        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);
         }
     }
+    writeStyle(style) {
+        if (style.halo != null) {
+            this.writeInteger(1, 4);
+            this.writeVarint(Math.round(style.halo * 10));
+        }
+        if (style.opacity != null) {
+            this.writeInteger(2, 4);
+            this.writeVarint(Math.round(style.opacity * 100));
+        }
+        if (style.pattern != null) {
+            this.writeInteger(3, 4);
+            this.writeVarint(style.pattern);
+        }
+        if (style.rotate != null) {
+            this.writeInteger(4, 4);
+            this.writeVarint(style.rotate, true);
+        }
+        if (style.size != null) {
+            this.writeInteger(5, 4);
+            this.writeVarint(Math.round(style.size * 10));
+        }
+        if (style.width != null) {
+            this.writeInteger(6, 4);
+            this.writeVarint(Math.round(style.width * 10));
+        }
+        if (style.align != null) {
+            this.writeInteger(7, 4);
+            this.writeVarint(style.align);
+        }
+        if (style.color != null) {
+            this.writeInteger(8, 4);
+            this.writeColor(style.color);
+        }
+        if (style.label != null) {
+            this.writeInteger(9, 4);
+            this.writeString(style.label);
+        }
+        if (style.visible === false) {
+            this.writeInteger(10, 4);
+        }
+        this.writeInteger(0, 4);
+    }
     writeColor(color) {
-        if (typeof color !== 'string')
-            throw new Error(`Invalid color: ${color}`);
-        const c = Color.parse(color).asRGB().round().asArray();
-        this.writeByte(c[0]);
-        this.writeByte(c[1]);
-        this.writeByte(c[2]);
-    }
-    writeDifferential(values) {
-        if (values.length === 0)
-            return;
-        this.writeSignedInteger(values[0]);
-        for (let i = 1; i < values.length; i++) {
-            this.writeSignedInteger(values[i] - values[i - 1]);
+        const rgb = Color.parse(color).toRGB();
+        this.writeInteger(rgb.r, 8);
+        this.writeInteger(rgb.g, 8);
+        this.writeInteger(rgb.b, 8);
+        if (rgb.a == 1) {
+            this.bits.push(false);
+        }
+        else {
+            this.bits.push(true);
+            this.writeInteger(Math.round(rgb.a * 255), 8);
         }
     }
+    writeString(value) {
+        const charCodes = value.split('').map((c) => c.charCodeAt(0));
+        this.writeVarint(charCodes.length);
+        charCodes.forEach((c) => this.writeVarint(c < 128 ? CHAR_CODE2VALUE[c] : c));
+        return value;
+    }
 }

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

@@ -1,9 +1,6 @@
 import type { ElementPoint } from './element/types.js';
+import type { StateStyle } from './state/types.js';
 export declare function getMiddlePoint(p0: ElementPoint, p1: ElementPoint): ElementPoint;
 export declare function lat2mercator(lat: number): number;
 export declare function mercator2lat(y: number): number;
-export declare function base64ToUint8Array(base64: string): Uint8Array;
-export declare function uint8ArrayToBase64(data: Uint8Array): string;
-export declare function compress(data: Uint8Array): Promise<Uint8Array>;
-export declare function decompress(data: Uint8Array): Promise<Uint8Array>;
-export declare function removeDefaultFields<T extends Record<string, unknown>>(value: T, def: T): Partial<T> | undefined;
+export declare function removeDefaultFields(value: StateStyle, def: StateStyle): Partial<StateStyle> | undefined;

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

@@ -9,25 +9,6 @@ export function lat2mercator(lat) {
 export function mercator2lat(y) {
     return ((2 * Math.atan(Math.exp(y)) - Math.PI / 2) * 180) / Math.PI;
 }
-export function base64ToUint8Array(base64) {
-    const binaryString = atob(base64);
-    return Uint8Array.from(binaryString, (c) => c.charCodeAt(0));
-}
-export function uint8ArrayToBase64(data) {
-    const binaryString = String.fromCharCode(...data);
-    return btoa(binaryString);
-}
-export async function compress(data) {
-    const stream = new Blob([data]).stream();
-    const compressedStream = stream.pipeThrough(new CompressionStream('deflate-raw'));
-    return new Uint8Array(await new Response(compressedStream).arrayBuffer());
-}
-export async function decompress(data) {
-    const stream = new Blob([data]).stream();
-    const decompressedStream = stream.pipeThrough(new DecompressionStream('deflate-raw'));
-    const arrayBuffer = await new Response(decompressedStream).arrayBuffer();
-    return new Uint8Array(arrayBuffer);
-}
 export function removeDefaultFields(value, def) {
     const entries = Object.entries(value).filter(([k, v]) => {
         if (v === undefined)

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "@versatiles/svelte",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "license": "MIT",
   "scripts": {
     "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": "npm run lint && npm run build && npm run test",
+    "check-watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "check": "npm run format && npm run lint && npm run build && npm run test",
     "dev": "vite dev",
-    "format": "prettier --write .",
+    "format": "prettier --write --log-level warn .",
     "lint": "prettier --check . && eslint --color .",
     "package": "svelte-kit sync && svelte-package && publint",
     "prepack": "npm run build",
     "prepublishOnly": "npm run package",
     "preview": "vite preview",
-    "screenshots": "npm run build && npx tsx ./scripts/screenshots.ts && pngquant --nofs --force --ext .png screenshots/*.png && optipng -quiet screenshots/*.png",
+    "screenshots": "npx tsx ./scripts/screenshots.ts",
     "release": "vrt release-npm",
-    "test:integration": "playwright test",
-    "test:unit": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "test": "npm run test:unit && npm run test:integration",
+    "test-integration": "playwright test",
+    "test-unit": "vitest run",
+    "test-coverage": "vitest run --coverage",
+    "test": "npm run test-unit && npm run test-integration",
     "upgrade": "vrt deps-upgrade"
   },
   "exports": {
@@ -30,50 +30,51 @@
   "files": [
     "dist",
     "!dist/**/*.spec.*",
+    "!dist/**/__mocks__/*",
     "!dist/**/*.test.*",
     "!dist/BBoxMap/data/*",
     "!dist/BBoxMap/helpers/*"
   ],
   "peerDependencies": {
-    "sass-embedded": "^1.86.0",
-    "svelte": "^5.0.3"
+    "sass-embedded": "^1.86.3",
+    "svelte": "^5.27.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.51.1",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.20.0",
-    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/kit": "^2.20.7",
+    "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@turf/turf": "^7.2.0",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^22.13.10",
+    "@types/node": "^22.14.1",
     "@versatiles/release-tool": "^2.4.2",
-    "@vitest/coverage-v8": "^3.0.9",
+    "@vitest/coverage-v8": "^3.1.1",
     "cookie": "^1.0.2",
-    "eslint": "^9.22.0",
-    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-svelte": "^3.3.2",
+    "eslint": "^9.24.0",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-svelte": "^3.5.1",
     "geojson": "^0.5.0",
     "globals": "^16.0.0",
     "happy-dom": "^17.4.4",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
-    "publint": "^0.3.9",
-    "sass": "^1.86.0",
-    "svelte": "^5.23.1",
-    "svelte-check": "^4.1.5",
+    "publint": "^0.3.12",
+    "sass": "^1.86.3",
+    "svelte": "^5.27.0",
+    "svelte-check": "^4.1.6",
     "svelte-preprocess": "^6.0.3",
     "tsx": "^4.19.3",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.26.1",
-    "vite": "^6.2.2",
-    "vitest": "^3.0.9"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.2.6",
+    "vitest": "^3.1.1"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
     "@versatiles/style": "^5.6.0",
-    "maplibre-gl": "^5.2.0"
+    "maplibre-gl": "^5.3.1"
   }
 }

package/dist/components/MapEditor/lib/__mocks__/cursor.d.ts

@@ -1,5 +0,0 @@
-export declare class MockCursor {
-    grab: import("vitest").Mock<(...args: any[]) => any>;
-    hover: import("vitest").Mock<(...args: any[]) => any>;
-    precise: import("vitest").Mock<(...args: any[]) => any>;
-}

package/dist/components/MapEditor/lib/__mocks__/cursor.js

@@ -1,6 +0,0 @@
-import { vi } from 'vitest';
-export class MockCursor {
-    grab = vi.fn();
-    hover = vi.fn();
-    precise = vi.fn();
-}

package/dist/components/MapEditor/lib/__mocks__/geometry_manager.d.ts

@@ -1,22 +0,0 @@
-import { type Writable } from 'svelte/store';
-import type { AbstractElement } from '../element/abstract.js';
-import type { StateObject } from '../state/types.js';
-import { MockMap } from './map.js';
-import { MockCursor } from './cursor.js';
-export declare class MockGeometryManager {
-    readonly elements: Writable<AbstractElement[]>;
-    readonly activeElement: Writable<AbstractElement | undefined>;
-    readonly map: MockMap;
-    readonly cursor: MockCursor;
-    constructor();
-    setActiveElement: import("vitest").Mock<(...args: any[]) => any>;
-    getState: import("vitest").Mock<() => StateObject>;
-    saveState: import("vitest").Mock<(...args: any[]) => any>;
-    loadState: import("vitest").Mock<(...args: any[]) => any>;
-    getElement: import("vitest").Mock<(index: number) => AbstractElement>;
-    addNewMarker: import("vitest").Mock<() => AbstractElement>;
-    addNewLine: import("vitest").Mock<() => AbstractElement>;
-    addNewPolygon: import("vitest").Mock<() => AbstractElement>;
-    deleteElement: import("vitest").Mock<(...args: any[]) => any>;
-    drawSelectionNodes: import("vitest").Mock<(...args: any[]) => any>;
-}

package/dist/components/MapEditor/lib/__mocks__/geometry_manager.js

@@ -1,21 +0,0 @@
-import { writable } from 'svelte/store';
-import { vi } from 'vitest';
-import { MockMap } from './map.js';
-import { MockCursor } from './cursor.js';
-export class MockGeometryManager {
-    elements = writable([]);
-    activeElement = writable(undefined);
-    map = new MockMap();
-    cursor = new MockCursor();
-    constructor() { }
-    setActiveElement = vi.fn();
-    getState = vi.fn(() => ({ map: { point: [0, 0], zoom: 10 }, elements: [] }));
-    saveState = vi.fn();
-    loadState = vi.fn();
-    getElement = vi.fn((index) => ({ index }));
-    addNewMarker = vi.fn(() => ({}));
-    addNewLine = vi.fn(() => ({}));
-    addNewPolygon = vi.fn(() => ({}));
-    deleteElement = vi.fn();
-    drawSelectionNodes = vi.fn();
-}

package/dist/components/MapEditor/lib/__mocks__/map.d.ts

@@ -1,36 +0,0 @@
-export declare class MockMap {
-    getCanvasContainer: import("vitest").Mock<() => {
-        style: {
-            cursor: string;
-        };
-    }>;
-    addSource: import("vitest").Mock<(...args: any[]) => any>;
-    removeSource: import("vitest").Mock<(...args: any[]) => any>;
-    getSource: import("vitest").Mock<() => {
-        setData: import("vitest").Mock<(...args: any[]) => any>;
-    }>;
-    addLayer: import("vitest").Mock<(...args: any[]) => any>;
-    on: import("vitest").Mock<(...args: any[]) => any>;
-    setCenter: import("vitest").Mock<(...args: any[]) => any>;
-    setZoom: import("vitest").Mock<(...args: any[]) => any>;
-    getZoom: import("vitest").Mock<() => number>;
-    getCenter: import("vitest").Mock<() => {
-        lng: number;
-        lat: number;
-    }>;
-    queryRenderedFeatures: import("vitest").Mock<() => {
-        properties: {};
-    }[]>;
-    setPaintProperty: import("vitest").Mock<(...args: any[]) => any>;
-    setLayoutProperty: import("vitest").Mock<(...args: any[]) => any>;
-    removeLayer: import("vitest").Mock<(...args: any[]) => any>;
-    hasImage: import("vitest").Mock<(...args: any[]) => any>;
-    removeImage: import("vitest").Mock<(...args: any[]) => any>;
-    addImage: import("vitest").Mock<(...args: any[]) => any>;
-    getBounds: import("vitest").Mock<() => {
-        getWest: () => -180;
-        getEast: () => 180;
-        getSouth: () => -90;
-        getNorth: () => 90;
-    }>;
-}

package/dist/components/MapEditor/lib/__mocks__/map.js

@@ -1,26 +0,0 @@
-import { vi } from 'vitest';
-export class MockMap {
-    getCanvasContainer = vi.fn(() => ({ style: { cursor: 'default' } }));
-    addSource = vi.fn();
-    removeSource = vi.fn();
-    getSource = vi.fn(() => ({ setData: vi.fn() }));
-    addLayer = vi.fn();
-    on = vi.fn();
-    setCenter = vi.fn();
-    setZoom = vi.fn();
-    getZoom = vi.fn(() => 10);
-    getCenter = vi.fn(() => ({ lng: 0, lat: 0 }));
-    queryRenderedFeatures = vi.fn(() => [{ properties: {} }]);
-    setPaintProperty = vi.fn();
-    setLayoutProperty = vi.fn();
-    removeLayer = vi.fn();
-    hasImage = vi.fn();
-    removeImage = vi.fn();
-    addImage = vi.fn();
-    getBounds = vi.fn(() => ({
-        getWest: () => -180,
-        getEast: () => 180,
-        getSouth: () => -90,
-        getNorth: () => 90
-    }));
-}