@versatiles/svelte 2.0.0 → 2.1.0

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

@@ -0,0 +1,70 @@
+import { get, writable } from 'svelte/store';
+export class SelectionHandler {
+    selectedElement = writable(undefined);
+    selectionNodes;
+    manager;
+    constructor(manager) {
+        this.manager = manager;
+        const map = this.manager.map;
+        map.on('mousedown', 'selection_nodes', (e) => {
+            const element = get(this.selectedElement);
+            if (element == null)
+                return;
+            const feature = map.queryRenderedFeatures(e.point, { layers: ['selection_nodes'] })[0];
+            const selectedNode = element.getSelectionNodeUpdater(feature.properties);
+            if (selectedNode == null)
+                return;
+            // @ts-expect-error ensure that the event is ignored by other layers
+            e.ignore = true;
+            e.preventDefault();
+            if (e.originalEvent.shiftKey) {
+                selectedNode.delete();
+                this.updateSelectionNodes();
+            }
+            else {
+                const onMove = (e) => {
+                    e.preventDefault();
+                    selectedNode.update(e.lngLat.lng, e.lngLat.lat);
+                    this.updateSelectionNodes();
+                };
+                map.on('mousemove', onMove);
+                map.once('mouseup', () => {
+                    map.off('mousemove', onMove);
+                    this.manager.state.log();
+                });
+            }
+        });
+        map.on('mouseenter', 'selection_nodes', () => {
+            this.manager.cursor.togglePrecise('selection_nodes');
+        });
+        map.on('mouseleave', 'selection_nodes', () => {
+            this.manager.cursor.togglePrecise('selection_nodes', false);
+        });
+        map.on('click', (e) => {
+            if (!e.originalEvent.shiftKey)
+                this.selectElement();
+            e.preventDefault();
+        });
+    }
+    selectElement(element) {
+        if (element == get(this.selectedElement))
+            return;
+        const elements = get(this.manager.elements);
+        elements.forEach((e) => e.select(e == element));
+        this.selectedElement.set(element);
+        this.updateSelectionNodes();
+    }
+    updateSelectionNodes() {
+        const nodes = get(this.selectedElement)?.getSelectionNodes() ?? [];
+        if (!this.selectionNodes)
+            this.selectionNodes = this.manager.map.getSource('selection_nodes');
+        this.selectionNodes?.setData({
+            type: 'FeatureCollection',
+            features: nodes.map((n) => ({
+                type: 'Feature',
+                properties: { index: n.index, opacity: n.transparent ? 0.3 : 1 },
+                geometry: { type: 'Point', coordinates: n.coordinates }
+            }))
+        });
+    }
+}

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

@@ -11,12 +11,11 @@ for (let i = 0; i < BASE64_CHARS.length; i++) {
     ];
 }
 export const CHAR_VALUE2CODE = [
-    32, 101, 116, 97, 110, 105, 111, 115, 114, 108, 100, 104, 99, 117, 109, 112, 102, 103, 46, 121,
-    98, 119, 44, 118, 48, 107, 49, 83, 84, 67, 50, 56, 53, 65, 57, 120, 51, 73, 45, 54, 52, 55, 77,
-    66, 34, 39, 80, 69, 78, 70, 82, 68, 85, 113, 76, 71, 74, 72, 79, 87, 106, 122, 47, 60, 62, 75, 41,
-    40, 86, 89, 58, 81, 90, 88, 59, 63, 94, 38, 43, 91, 93, 36, 33, 42, 61, 126, 95, 123, 64, 0, 1, 2,
-    3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28,
-    29, 30, 31, 35, 37, 92, 96, 124, 125, 127
+    32, 101, 116, 97, 110, 105, 111, 115, 114, 108, 100, 104, 99, 117, 109, 112, 102, 103, 46, 121, 98, 119, 44, 118, 48,
+    107, 49, 83, 84, 67, 50, 56, 53, 65, 57, 120, 51, 73, 45, 54, 52, 55, 77, 66, 34, 39, 80, 69, 78, 70, 82, 68, 85, 113,
+    76, 71, 74, 72, 79, 87, 106, 122, 47, 60, 62, 75, 41, 40, 86, 89, 58, 81, 90, 88, 59, 63, 94, 38, 43, 91, 93, 36, 33,
+    42, 61, 126, 95, 123, 64, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
+    25, 26, 27, 28, 29, 30, 31, 35, 37, 92, 96, 124, 125, 127
 ];
 export const CHAR_CODE2VALUE = [];
 CHAR_VALUE2CODE.forEach((c, v) => (CHAR_CODE2VALUE[c] = v));

package/dist/components/MapEditor/lib/state/history.d.ts

@@ -0,0 +1,14 @@
+import type { StateRoot } from './types.js';
+export declare class StateHistory {
+    private history;
+    private index;
+    undoEnabled: import("svelte/store").Writable<boolean>;
+    redoEnabled: import("svelte/store").Writable<boolean>;
+    constructor(state: StateRoot);
+    reset(state: StateRoot): void;
+    push(state: StateRoot): void;
+    private get;
+    undo(): StateRoot;
+    redo(): StateRoot;
+    private updateButtons;
+}

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

@@ -0,0 +1,53 @@
+import { writable } from 'svelte/store';
+const MAXLENGTH = 100;
+export class StateHistory {
+    // History of state hashes
+    // The first element is the most recent state
+    history = [];
+    // The index of the current state in the history
+    // 0 means the most recent state
+    // 1 means the second most recent state
+    index = 0;
+    undoEnabled = writable(false);
+    redoEnabled = writable(false);
+    constructor(state) {
+        this.reset(state);
+    }
+    reset(state) {
+        this.history = [];
+        this.index = 0;
+        this.push(state);
+    }
+    push(state) {
+        state.map = undefined; // Remove map state from history
+        if (this.index > 0) {
+            this.history.splice(0, this.index);
+            this.index = 0;
+        }
+        this.history.unshift(JSON.stringify(state));
+        // Remove old history
+        if (this.history.length > MAXLENGTH) {
+            this.history.length = MAXLENGTH;
+        }
+        this.updateButtons();
+    }
+    get() {
+        return JSON.parse(this.history[this.index]);
+    }
+    undo() {
+        if (this.index < this.history.length - 1)
+            this.index++;
+        this.updateButtons();
+        return this.get();
+    }
+    redo() {
+        if (this.index > 0)
+            this.index--;
+        this.updateButtons();
+        return this.get();
+    }
+    updateButtons() {
+        this.undoEnabled.set(this.index < this.history.length - 1);
+        this.redoEnabled.set(this.index > 0);
+    }
+}

package/dist/components/MapEditor/lib/state/manager.d.ts

@@ -1,16 +1,14 @@
-import type { GeometryManager } from '../geometry_manager.js';
+import type { GeometryManagerInteractive } from '../geometry_manager_interactive.js';
+import type { StateMetadata } from './types.js';
+import { StateHistory } from './history.js';
 export declare class StateManager {
-    geometryManager: GeometryManager;
-    constructor(geometryManager: GeometryManager);
-    getHash(): string;
+    geometryManager: GeometryManagerInteractive;
+    private disableLogging;
+    readonly history: StateHistory;
+    constructor(geometryManager: GeometryManagerInteractive);
+    getHash(additionalMeta?: StateMetadata): string;
     setHash(hash: string): void;
-    private history;
-    private historyIndex;
-    undoEnabled: import("svelte/store").Writable<boolean>;
-    redoEnabled: import("svelte/store").Writable<boolean>;
-    private resetHistory;
     log(): void;
     undo(): void;
     redo(): void;
-    private updateButtons;
 }

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

@@ -1,16 +1,27 @@
-import { writable } from 'svelte/store';
 import { StateReader } from './reader.js';
 import { StateWriter } from './writer.js';
-const MAXLENGTH = 100;
+import { StateHistory } from './history.js';
 export class StateManager {
     geometryManager;
+    disableLogging = false;
+    history;
     constructor(geometryManager) {
         this.geometryManager = geometryManager;
-        this.resetHistory();
+        this.history = new StateHistory(geometryManager.getState());
     }
-    getHash() {
+    getHash(additionalMeta) {
         const writer = new StateWriter();
-        writer.writeRoot(this.geometryManager.getState());
+        const state = this.geometryManager.getState();
+        if (additionalMeta) {
+            state.meta ??= {};
+            const keys = Object.keys(additionalMeta);
+            for (const key of keys) {
+                if (additionalMeta[key] == null)
+                    continue;
+                state.meta[key] = additionalMeta[key];
+            }
+        }
+        writer.writeRoot(state);
         return writer.asBase64();
     }
     setHash(hash) {
@@ -18,59 +29,24 @@ export class StateManager {
             return;
         try {
             const state = StateReader.fromBase64(hash).readRoot();
+            this.disableLogging = true;
             this.geometryManager.setState(state);
-            this.resetHistory();
+            this.disableLogging = false;
+            this.history.reset(state);
         }
         catch (error) {
             console.error(error);
         }
     }
-    // History of state hashes
-    // The first element is the most recent state
-    history = [];
-    // The index of the current state in the history
-    // 0 means the most recent state
-    // 1 means the second most recent state
-    historyIndex = 0;
-    undoEnabled = writable(false);
-    redoEnabled = writable(false);
-    resetHistory() {
-        this.history = [this.geometryManager.getState()];
-        this.historyIndex = 0;
-        this.updateButtons();
-    }
     log() {
-        const state = this.geometryManager.getState();
-        state.map = undefined; // Remove map state from history
-        if (this.historyIndex > 0) {
-            this.history.splice(0, this.historyIndex);
-            this.historyIndex = 0;
-        }
-        this.history.unshift(state);
-        // Remove old history
-        if (this.history.length > MAXLENGTH) {
-            this.history.length = MAXLENGTH;
-        }
-        this.updateButtons();
+        if (this.disableLogging)
+            return;
+        this.history.push(this.geometryManager.getState());
     }
     undo() {
-        if (this.historyIndex < this.history.length - 1) {
-            this.historyIndex++;
-            const state = this.history[this.historyIndex];
-            this.geometryManager.setState(state);
-            this.updateButtons();
-        }
+        this.geometryManager.setState(this.history.undo());
     }
     redo() {
-        if (this.historyIndex > 0) {
-            this.historyIndex--;
-            const state = this.history[this.historyIndex];
-            this.geometryManager.setState(state);
-            this.updateButtons();
-        }
-    }
-    updateButtons() {
-        this.undoEnabled.set(this.historyIndex < this.history.length - 1);
-        this.redoEnabled.set(this.historyIndex > 0);
+        this.geometryManager.setState(this.history.redo());
     }
 }

package/dist/components/MapEditor/lib/state/reader.d.ts

@@ -1,4 +1,4 @@
-import type { StateElementLine, StateElementMarker, StateElementPolygon, StateRoot, StateStyle } from './types.js';
+import type { StateElementCircle, StateElementLine, StateElementMarker, StateElementPolygon, StateMetadata, StateRoot, StateStyle } from './types.js';
 export declare class StateReader {
     bits: boolean[];
     offset: number;
@@ -11,13 +11,15 @@ export declare class StateReader {
     read6pack(): number;
     readVarint(signed?: true): number;
     readArray<T>(cb: () => T): T[];
-    readPoint(level?: number): [number, number];
-    readPoints(level?: number): [number, number][];
+    readPoint(resolutionInMeters?: number): [number, number];
+    readPoints(resolutionInMeters?: number): [number, number][];
     readRoot(): StateRoot;
-    readMap(): NonNullable<StateRoot['map']>;
+    readMap(): StateRoot['map'];
+    readMetadata(): StateMetadata | undefined;
     readElementMarker(): StateElementMarker;
     readElementLine(): StateElementLine;
     readElementPolygon(): StateElementPolygon;
+    readElementCircle(): StateElementCircle;
     readStyle(): StateStyle;
     readColor(): string;
     readString(): string;

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

@@ -83,29 +83,28 @@ export class StateReader {
             throw new Error(`Error reading array`, { cause });
         }
     }
-    readPoint(level = 14) {
+    readPoint(resolutionInMeters = 1) {
+        if (!resolutionInMeters || resolutionInMeters < 1)
+            resolutionInMeters = 1;
         try {
-            const scale = Math.pow(2, level + 2);
-            return [
-                this.readInteger(level + 11, true) / scale,
-                this.readInteger(level + 10, true) / scale
-            ];
+            const scale = Math.round(1e5 / resolutionInMeters);
+            return [this.readVarint(true) / scale, this.readVarint(true) / scale];
         }
         catch (cause) {
             throw new Error(`Error reading point`, { cause });
         }
     }
-    readPoints(level = 14) {
+    readPoints(resolutionInMeters = 1) {
         try {
             const length = this.readVarint();
-            const scale = Math.pow(2, -level - 2);
+            const scale = Math.round(1e5 / resolutionInMeters);
             let x = 0;
             let y = 0;
             const points = [];
             for (let i = 0; i < length; i++) {
                 x += this.readVarint(true);
                 y += this.readVarint(true);
-                points[i] = [x * scale, y * scale];
+                points[i] = [x / scale, y / scale];
             }
             return points;
         }
@@ -121,13 +120,13 @@ export class StateReader {
                 throw new Error(`Unsupported version: ${version}`);
             }
             // Read the map element
-            if (this.readBit()) {
-                root.map = this.readMap();
-            }
+            root.map = this.readMap();
+            if (!root.map)
+                delete root.map;
             // Read the metadata
-            if (this.readBit()) {
-                throw new Error(`Metadata not supported yet`);
-            }
+            root.meta = this.readMetadata();
+            if (!root.meta)
+                delete root.meta;
             // Read the elements
             while (true) {
                 let key;
@@ -149,6 +148,9 @@ export class StateReader {
                     case 3:
                         root.elements.push(this.readElementPolygon());
                         break;
+                    case 4:
+                        root.elements.push(this.readElementCircle());
+                        break;
                     default:
                         console.warn(`Unknown state key: ${key}`);
                 }
@@ -160,19 +162,48 @@ export class StateReader {
     }
     readMap() {
         try {
-            const zoom = this.readInteger(10) / 32;
-            const center = this.readPoint(Math.ceil(zoom));
-            return { zoom, center };
+            if (!this.readBit())
+                return undefined;
+            const radius = Math.pow(2, this.readInteger(10) / 40);
+            // effective resolution of coordinates is 1000 times the visible radius
+            const center = this.readPoint(radius / 1e3);
+            if (this.readBit())
+                throw new Error('Addtional map meta data is not supported yet');
+            return { radius, center };
         }
         catch (cause) {
             throw new Error(`Error reading map`, { cause });
         }
     }
+    readMetadata() {
+        try {
+            if (!this.readBit())
+                return undefined;
+            const metadata = {};
+            while (true) {
+                const key = this.readInteger(6);
+                switch (key) {
+                    case 0:
+                        return metadata;
+                    //case 1:
+                    //	metadata.heading = this.readString();
+                    //	break;
+                    default:
+                        throw new Error(`Invalid state key: ${key}`);
+                }
+            }
+        }
+        catch (cause) {
+            throw new Error(`Error reading metadata`, { cause });
+        }
+    }
     readElementMarker() {
         try {
             const element = { type: 'marker', point: this.readPoint() };
             if (this.readBit())
                 element.style = this.readStyle();
+            if (this.readBit())
+                throw new Error(`Tooltip not supported yet`);
             return element;
         }
         catch (cause) {
@@ -184,6 +215,8 @@ export class StateReader {
             const element = { type: 'line', points: this.readPoints() };
             if (this.readBit())
                 element.style = this.readStyle();
+            if (this.readBit())
+                throw new Error(`Tooltip not supported yet`);
             return element;
         }
         catch (cause) {
@@ -197,12 +230,31 @@ export class StateReader {
                 element.style = this.readStyle();
             if (this.readBit())
                 element.strokeStyle = this.readStyle();
+            if (this.readBit())
+                throw new Error(`Tooltip not supported yet`);
             return element;
         }
         catch (cause) {
             throw new Error(`Error reading polygon element`, { cause });
         }
     }
+    readElementCircle() {
+        try {
+            const point = this.readPoint();
+            const radius = this.readVarint();
+            const element = { type: 'circle', point, radius };
+            if (this.readBit())
+                element.style = this.readStyle();
+            if (this.readBit())
+                element.strokeStyle = this.readStyle();
+            if (this.readBit())
+                throw new Error(`Tooltip not supported yet`);
+            return element;
+        }
+        catch (cause) {
+            throw new Error(`Error reading circle element`, { cause });
+        }
+    }
     readStyle() {
         try {
             const style = {};

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

@@ -1,26 +1,38 @@
 export interface StateRoot {
     map?: {
         center: [number, number];
-        zoom: number;
+        radius: number;
     };
+    meta?: StateMetadata;
     elements: StateElement[];
 }
-export type StateElement = StateElementMarker | StateElementLine | StateElementPolygon;
+export type StateElement = StateElementMarker | StateElementLine | StateElementPolygon | StateElementCircle;
 export interface StateElementMarker {
     type: 'marker';
     point: [number, number];
     style?: StateStyle;
+    tooltip?: StateTooltip;
 }
 export interface StateElementLine {
     type: 'line';
     points: [number, number][];
     style?: StateStyle;
+    tooltip?: StateTooltip;
 }
 export interface StateElementPolygon {
     type: 'polygon';
     points: [number, number][];
     style?: StateStyle;
     strokeStyle?: StateStyle;
+    tooltip?: StateTooltip;
+}
+export interface StateElementCircle {
+    type: 'circle';
+    point: [number, number];
+    radius: number;
+    style?: StateStyle;
+    strokeStyle?: StateStyle;
+    tooltip?: StateTooltip;
 }
 export interface StateStyle {
     halo?: number;
@@ -34,3 +46,8 @@ export interface StateStyle {
     label?: string;
     visible?: boolean;
 }
+export interface StateMetadata {
+}
+export interface StateTooltip {
+    text?: string;
+}

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

@@ -0,0 +1,2 @@
+import type { StateStyle } from './types.js';
+export declare function removeDefaultFields(value: StateStyle, def: StateStyle): Partial<StateStyle> | undefined;

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

@@ -0,0 +1,12 @@
+export function removeDefaultFields(value, def) {
+    const entries = Object.entries(value).filter(([k, v]) => {
+        if (v === undefined)
+            return false;
+        if (v === def[k])
+            return false;
+        return true;
+    });
+    if (entries.length === 0)
+        return undefined;
+    return Object.fromEntries(entries);
+}

package/dist/components/MapEditor/lib/state/writer.d.ts

@@ -1,4 +1,4 @@
-import type { StateElementLine, StateElementMarker, StateElementPolygon, StateRoot, StateStyle } from './types.js';
+import type { StateElementCircle, StateElementLine, StateElementMarker, StateElementPolygon, StateMetadata, StateRoot, StateStyle } from './types.js';
 export declare class StateWriter {
     bits: boolean[];
     constructor();
@@ -8,13 +8,15 @@ export declare class StateWriter {
     writeInteger(value: number, bits: number): number;
     writeVarint(value: number, signed?: true): void;
     writeArray<T>(array: T[], cb: (v: T) => void): void;
-    writePoint(point: [number, number], level?: number): void;
-    writePoints(points: [number, number][], level?: number): void;
+    writePoint(point: [number, number], resolutionInMeters?: number): void;
+    writePoints(points: [number, number][], resolutionInMeters?: number): void;
     writeRoot(root: StateRoot): void;
-    writeMap(map: NonNullable<StateRoot['map']>): void;
+    writeMap(map: StateRoot['map']): void;
+    writeMetadata(metadata?: StateMetadata): void;
     writeElementMarker(element: StateElementMarker): StateElementMarker;
     writeElementLine(element: StateElementLine): StateElementLine;
     writeElementPolygon(element: StateElementPolygon): void;
+    writeElementCircle(element: StateElementCircle): void;
     writeStyle(style: StateStyle): void;
     writeColor(color: string): void;
     writeString(value: string): string;