@versatiles/svelte 1.1.2 → 2.0.0

package/dist/components/MapEditor/lib/map_layer/line.js

@@ -8,10 +8,16 @@ export const dashArrays = new Map([
     [2, { name: 'dotted', array: [0, 2] }]
 ]);
 export class MapLayerLine extends MapLayer {
-    color = writable('#ff0000');
-    dashed = writable(0);
-    visible = writable(true);
-    width = writable(2);
+    static defaultStyle = {
+        color: '#ff0000',
+        pattern: 0,
+        visible: true,
+        width: 2
+    };
+    color = writable(MapLayerLine.defaultStyle.color);
+    dashed = writable(MapLayerLine.defaultStyle.pattern);
+    visible = writable(MapLayerLine.defaultStyle.visible);
+    width = writable(MapLayerLine.defaultStyle.width);
     dashArray = derived(this.dashed, (dashed) => dashArrays.get(dashed)?.array ?? [100]);
     constructor(manager, id, source) {
         super(manager, id);
@@ -26,19 +32,19 @@ export class MapLayerLine extends MapLayer {
         });
         this.color.subscribe((v) => {
             this.updatePaint('line-color', Color.parse(v));
-            this.manager.saveState();
+            this.manager.state.log();
         });
         this.dashArray.subscribe((v) => {
             this.updatePaint('line-dasharray', v);
-            this.manager.saveState();
+            this.manager.state.log();
         });
         this.visible.subscribe((v) => {
             this.updateLayout('visibility', v ? 'visible' : 'none');
-            this.manager.saveState();
+            this.manager.state.log();
         });
         this.width.subscribe((v) => {
             this.updatePaint('line-width', v);
-            this.manager.saveState();
+            this.manager.state.log();
         });
     }
     getState() {
@@ -47,12 +53,7 @@ export class MapLayerLine extends MapLayer {
             pattern: get(this.dashed),
             visible: get(this.visible),
             width: get(this.width)
-        }, {
-            color: '#ff0000',
-            pattern: 0,
-            visible: true,
-            width: 2
-        });
+        }, MapLayerLine.defaultStyle);
     }
     setState(state) {
         if (state.color)

package/dist/components/MapEditor/lib/map_layer/symbol.d.ts

@@ -2,7 +2,7 @@ import { type Writable } from 'svelte/store';
 import type { LayerSymbol } from './types.js';
 import { MapLayer } from './abstract.js';
 import type { GeometryManager } from '../geometry_manager.js';
-import type { StateObject } from '../state/types.js';
+import type { StateStyle } from '../state/types.js';
 interface LabelAlign {
     index: 0 | 1 | 2 | 3 | 4;
     name: string;
@@ -10,19 +10,20 @@ interface LabelAlign {
 }
 export declare const labelPositions: LabelAlign[];
 export declare class MapLayerSymbol extends MapLayer<LayerSymbol> {
+    static readonly defaultStyle: StateStyle;
     color: Writable<string>;
     halo: Writable<number>;
     rotate: Writable<number>;
     size: Writable<number>;
     symbolIndex: Writable<number>;
     label: Writable<string>;
-    labelAlign: Writable<0 | 2 | 1 | 4 | 3>;
+    labelAlign: Writable<number>;
     symbolInfo: import("svelte/store").Readable<import("../symbols.js").SymbolInfo>;
     textAnchor: import("svelte/store").Readable<"center" | "top" | "bottom" | "right" | "left" | undefined>;
     textVariableAnchor: import("svelte/store").Readable<("center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "bottom" | "right" | "left")[] | undefined>;
     constructor(manager: GeometryManager, id: string, source: string);
-    getState(): StateObject | undefined;
-    setState(state: StateObject): void;
+    getState(): StateStyle | undefined;
+    setState(state: StateStyle): void;
     getGeoJSONProperties(): GeoJSON.GeoJsonProperties;
     setGeoJSONProperties(properties: GeoJSON.GeoJsonProperties): void;
 }

package/dist/components/MapEditor/lib/map_layer/symbol.js

@@ -10,23 +10,23 @@ export const labelPositions = [
     { index: 3, name: 'top', anchor: 'bottom' },
     { index: 4, name: 'bottom', anchor: 'top' }
 ];
-const defaultStyle = {
-    color: '#ff0000',
-    rotate: 0,
-    size: 1,
-    halo: 1,
-    pattern: 38,
-    label: '',
-    align: 0
-};
 export class MapLayerSymbol extends MapLayer {
-    color = writable(defaultStyle.color);
-    halo = writable(defaultStyle.halo);
-    rotate = writable(defaultStyle.rotate);
-    size = writable(defaultStyle.size);
-    symbolIndex = writable(defaultStyle.pattern);
-    label = writable(defaultStyle.label);
-    labelAlign = writable(defaultStyle.align);
+    static defaultStyle = {
+        color: '#ff0000',
+        rotate: 0,
+        size: 1,
+        halo: 1,
+        pattern: 38,
+        label: '',
+        align: 0
+    };
+    color = writable(MapLayerSymbol.defaultStyle.color);
+    halo = writable(MapLayerSymbol.defaultStyle.halo);
+    rotate = writable(MapLayerSymbol.defaultStyle.rotate);
+    size = writable(MapLayerSymbol.defaultStyle.size);
+    symbolIndex = writable(MapLayerSymbol.defaultStyle.pattern);
+    label = writable(MapLayerSymbol.defaultStyle.label);
+    labelAlign = writable(MapLayerSymbol.defaultStyle.align);
     symbolInfo = derived(this.symbolIndex, (index) => getSymbol(index));
     textAnchor = derived(this.labelAlign, (index) => {
         return lookupLabelAlign(index).anchor;
@@ -45,9 +45,9 @@ export class MapLayerSymbol extends MapLayer {
             'icon-image': get(this.symbolInfo).image,
             'icon-offset': get(this.symbolInfo).offset,
             'icon-allow-overlap': true,
-            'icon-rotate': defaultStyle.rotate,
-            'icon-size': defaultStyle.size,
-            'text-field': defaultStyle.label,
+            'icon-rotate': get(this.rotate),
+            'icon-size': get(this.size),
+            'text-field': get(this.label),
             'text-font': ['noto_sans_regular'],
             'text-justify': 'left',
             'text-overlap': 'always',
@@ -55,44 +55,27 @@ export class MapLayerSymbol extends MapLayer {
             'text-variable-anchor': get(this.textVariableAnchor),
             'text-anchor': get(this.textAnchor)
         }, {
-            'icon-color': defaultStyle.color,
+            'icon-color': get(this.color),
             'icon-halo-blur': 0,
             'icon-halo-color': '#FFFFFF',
-            'icon-halo-width': defaultStyle.halo,
+            'icon-halo-width': get(this.halo),
             'icon-opacity': 1,
             'text-halo-blur': 0,
             'text-halo-color': '#FFFFFF',
-            'text-halo-width': defaultStyle.halo
-        });
-        this.color.subscribe((v) => {
-            this.updatePaint('icon-color', Color.parse(v));
-            this.manager.saveState();
+            'text-halo-width': get(this.halo)
         });
+        this.color.subscribe((v) => this.updatePaint('icon-color', Color.parse(v)));
         this.halo.subscribe((v) => {
             this.updatePaint('icon-halo-width', v);
             this.updatePaint('text-halo-width', v);
-            this.manager.saveState();
-        });
-        this.label.subscribe((v) => {
-            this.updateLayout('text-field', v);
-            this.manager.saveState();
-        });
-        this.textAnchor.subscribe((v) => {
-            this.updateLayout('text-anchor', v);
-            this.manager.saveState();
-        });
-        this.textVariableAnchor.subscribe((v) => {
-            this.updateLayout('text-variable-anchor', v);
-            this.manager.saveState();
-        });
-        this.rotate.subscribe((v) => {
-            this.updateLayout('icon-rotate', v);
-            this.manager.saveState();
         });
+        this.label.subscribe((v) => this.updateLayout('text-field', v));
+        this.textAnchor.subscribe((v) => this.updateLayout('text-anchor', v));
+        this.textVariableAnchor.subscribe((v) => this.updateLayout('text-variable-anchor', v));
+        this.rotate.subscribe((v) => this.updateLayout('icon-rotate', v));
         this.size.subscribe((v) => {
             this.updateLayout('icon-size', v);
             this.updateLayout('text-size', v * 16);
-            this.manager.saveState();
         });
         this.symbolInfo.subscribe((v) => {
             if (v.image == null) {
@@ -102,7 +85,6 @@ export class MapLayerSymbol extends MapLayer {
                 this.updateLayout('icon-image', v.image);
                 this.updateLayout('icon-offset', v.offset);
             }
-            this.manager.saveState();
         });
     }
     getState() {
@@ -114,7 +96,7 @@ export class MapLayerSymbol extends MapLayer {
             pattern: get(this.symbolIndex),
             label: get(this.label),
             align: get(this.labelAlign)
-        }, defaultStyle);
+        }, MapLayerSymbol.defaultStyle);
     }
     setState(state) {
         if (state.color)

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

@@ -0,0 +1,4 @@
+export declare const BASE64_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+export declare const BASE64_CODE2BITS: [boolean, boolean, boolean, boolean, boolean, boolean][];
+export declare const CHAR_VALUE2CODE: number[];
+export declare const CHAR_CODE2VALUE: number[];

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

@@ -0,0 +1,22 @@
+export const BASE64_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
+export const BASE64_CODE2BITS = [];
+for (let i = 0; i < BASE64_CHARS.length; i++) {
+    BASE64_CODE2BITS[BASE64_CHARS.charCodeAt(i)] = [
+        (i & 32) > 0,
+        (i & 16) > 0,
+        (i & 8) > 0,
+        (i & 4) > 0,
+        (i & 2) > 0,
+        (i & 1) > 0
+    ];
+}
+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
+];
+export const CHAR_CODE2VALUE = [];
+CHAR_VALUE2CODE.forEach((c, v) => (CHAR_CODE2VALUE[c] = v));

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

@@ -0,0 +1,16 @@
+import type { GeometryManager } from '../geometry_manager.js';
+export declare class StateManager {
+    geometryManager: GeometryManager;
+    constructor(geometryManager: GeometryManager);
+    getHash(): 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

@@ -0,0 +1,76 @@
+import { writable } from 'svelte/store';
+import { StateReader } from './reader.js';
+import { StateWriter } from './writer.js';
+const MAXLENGTH = 100;
+export class StateManager {
+    geometryManager;
+    constructor(geometryManager) {
+        this.geometryManager = geometryManager;
+        this.resetHistory();
+    }
+    getHash() {
+        const writer = new StateWriter();
+        writer.writeRoot(this.geometryManager.getState());
+        return writer.asBase64();
+    }
+    setHash(hash) {
+        if (!hash)
+            return;
+        try {
+            const state = StateReader.fromBase64(hash).readRoot();
+            this.geometryManager.setState(state);
+            this.resetHistory();
+        }
+        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();
+    }
+    undo() {
+        if (this.historyIndex < this.history.length - 1) {
+            this.historyIndex++;
+            const state = this.history[this.historyIndex];
+            this.geometryManager.setState(state);
+            this.updateButtons();
+        }
+    }
+    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);
+    }
+}

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

@@ -1,17 +1,24 @@
-import type { StateObject } from './types.js';
+import type { StateElementLine, StateElementMarker, StateElementPolygon, StateRoot, StateStyle } from './types.js';
 export declare class StateReader {
-    private buffer;
-    private offset;
-    constructor(buffer: Uint8Array | number[]);
-    readByte(): number;
-    readUnsignedInteger(): number;
-    readSignedInteger(): number;
-    readString(): string;
-    readBoolean(): boolean;
-    static fromBase64compressed(base64: string): Promise<StateReader>;
-    static fromBase64(base64: string): Promise<StateReader>;
-    readObject(): StateObject;
-    readDifferential(count: number): number[];
+    bits: boolean[];
+    offset: number;
+    constructor(bits: boolean[]);
+    static fromBase64(text: string): StateReader;
+    static fromBitString(text: string): StateReader;
+    ended(): boolean;
+    readBit(): boolean;
+    readInteger(bits: number, signed?: true): number;
+    read6pack(): number;
+    readVarint(signed?: true): number;
+    readArray<T>(cb: () => T): T[];
+    readPoint(level?: number): [number, number];
+    readPoints(level?: number): [number, number][];
+    readRoot(): StateRoot;
+    readMap(): NonNullable<StateRoot['map']>;
+    readElementMarker(): StateElementMarker;
+    readElementLine(): StateElementLine;
+    readElementPolygon(): StateElementPolygon;
+    readStyle(): StateStyle;
     readColor(): string;
-    readType(): string;
+    readString(): string;
 }