@versatiles/svelte 1.1.2 → 2.0.1

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

@@ -3,9 +3,8 @@ import { MarkerElement } from './element/marker.js';
 import { LineElement } from './element/line.js';
 import { PolygonElement } from './element/polygon.js';
 import { Cursor } from './cursor.js';
-import { StateWriter } from './state/writer.js';
-import { StateReader } from './state/reader.js';
 import { SymbolLibrary } from './symbols.js';
+import { StateManager } from './state/manager.js';
 export class GeometryManager {
     elements;
     map;
@@ -13,6 +12,7 @@ export class GeometryManager {
     canvas;
     cursor;
     symbolLibrary;
+    state;
     selectionNodes;
     constructor(map) {
         this.elements = writable([]);
@@ -53,7 +53,6 @@ export class GeometryManager {
             if (e.originalEvent.shiftKey) {
                 selectedNode.delete();
                 this.drawSelectionNodes();
-                this.saveState();
             }
             else {
                 const onMove = (e) => {
@@ -63,8 +62,8 @@ export class GeometryManager {
                 };
                 map.on('mousemove', onMove);
                 map.once('mouseup', () => {
-                    this.saveState();
                     map.off('mousemove', onMove);
+                    this.state.log();
                 });
             }
         });
@@ -79,10 +78,7 @@ export class GeometryManager {
                 this.selectElement(undefined);
             e.preventDefault();
         });
-        map.on('moveend', () => this.saveState());
-        const hash = location.hash.slice(1);
-        if (hash)
-            this.loadState(hash);
+        this.state = new StateManager(this);
     }
     selectElement(element) {
         if (element == get(this.selectedElement))
@@ -107,48 +103,42 @@ export class GeometryManager {
         const center = this.map.getCenter();
         return {
             map: {
-                point: [center.lng, center.lat],
+                center: [center.lng, center.lat],
                 zoom: this.map.getZoom()
             },
             elements: get(this.elements).map((element) => element.getState())
         };
     }
-    async saveState() {
-        const writer = new StateWriter();
-        writer.writeObject(this.getState());
-        location.hash = await writer.getBase64compressed();
-    }
-    async loadState(hash) {
-        if (!hash)
+    setState(state) {
+        if (!state)
             return;
-        try {
-            const reader = await StateReader.fromBase64compressed(hash);
-            const state = reader.readObject();
-            if (!state)
-                return;
-            if (state.map?.zoom)
+        this.selectElement(undefined);
+        this.elements.update((elements) => {
+            elements.forEach((e) => e.destroy());
+            return [];
+        });
+        if (state.map) {
+            if (state.map.zoom)
                 this.map.setZoom(state.map.zoom);
-            if (state.map?.point) {
-                this.map.setCenter({ lng: state.map.point[0], lat: state.map.point[1] });
-            }
-            if (state.elements) {
-                const elements = state.elements.map((element) => {
-                    switch (element.type) {
-                        case 'marker':
-                            return MarkerElement.fromState(this, element);
-                        case 'line':
-                            return LineElement.fromState(this, element);
-                        case 'polygon':
-                            return PolygonElement.fromState(this, element);
-                        default:
-                            throw new Error('Unknown element type');
-                    }
-                });
-                this.elements.set(elements);
+            if (state.map.center) {
+                const [lng, lat] = state.map.center;
+                this.map.setCenter({ lng, lat });
             }
         }
-        catch (error) {
-            console.error(error);
+        if (state.elements) {
+            const elements = state.elements.map((element) => {
+                switch (element.type) {
+                    case 'marker':
+                        return MarkerElement.fromState(this, element);
+                    case 'line':
+                        return LineElement.fromState(this, element);
+                    case 'polygon':
+                        return PolygonElement.fromState(this, element);
+                    default:
+                        throw new Error('Unknown element type');
+                }
+            });
+            this.elements.set(elements);
         }
     }
     getElement(index) {
@@ -156,28 +146,29 @@ export class GeometryManager {
     }
     addNewMarker() {
         const element = new MarkerElement(this);
-        this.addElement(element);
+        this.appendElement(element);
+        this.selectElement(element);
         return element;
     }
     addNewLine() {
         const element = new LineElement(this);
-        this.addElement(element);
+        this.appendElement(element);
+        this.selectElement(element);
         return element;
     }
     addNewPolygon() {
         const element = new PolygonElement(this);
-        this.addElement(element);
+        this.appendElement(element);
+        this.selectElement(element);
         return element;
     }
-    addElement(element) {
+    appendElement(element) {
         this.elements.update((elements) => [...elements, element]);
-        this.saveState();
     }
-    deleteElement(element) {
-        this.elements.update((elements) => elements.filter((e) => e !== element));
+    removeElement(element) {
         if (get(this.selectedElement) === element)
             this.selectElement(undefined);
-        this.saveState();
+        this.elements.update((elements) => elements.filter((e) => e !== element));
     }
     getGeoJSON() {
         const center = this.map.getCenter();
@@ -191,7 +182,7 @@ export class GeometryManager {
         };
     }
     addGeoJSON(geojson) {
-        if ('map' in geojson) {
+        if ('map' in geojson && geojson.map) {
             const { map } = geojson;
             if (typeof map.zoom === 'number') {
                 this.map.setZoom(map.zoom);
@@ -218,8 +209,7 @@ export class GeometryManager {
                 default:
                     throw new Error(`Unknown geometry type "${feature.geometry.type}"`);
             }
-            this.addElement(element);
+            this.appendElement(element);
         }
-        this.saveState();
     }
 }

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

@@ -1,6 +1,6 @@
 import type { LayerFill, LayerLine, LayerSymbol } from './types.js';
 import type { GeometryManager } from '../geometry_manager.js';
-import type { StateObject } from '../state/types.js';
+import type { StateStyle } from '../state/types.js';
 type LayerSpec = LayerFill | LayerLine | LayerSymbol;
 type Events = 'click' | 'mousedown' | 'mousemove' | 'mouseup';
 type MouseEventHandler = (event: maplibregl.MapMouseEvent) => void;
@@ -23,7 +23,7 @@ export declare abstract class MapLayer<T extends LayerSpec> {
     updateLayout(obj: T['layout']): void;
     updateLayout<K extends keyof T['layout'], V extends T['layout'][K]>(key: K, value: V): void;
     destroy(): void;
-    abstract getState(): StateObject | undefined;
+    abstract getState(): StateStyle | undefined;
     abstract getGeoJSONProperties(): GeoJSON.GeoJsonProperties;
     abstract setGeoJSONProperties(properties: GeoJSON.GeoJsonProperties): void;
 }

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

@@ -1,7 +1,7 @@
 import type { LayerFill } 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 Fill {
     xf: number;
     yf: number;
@@ -15,9 +15,10 @@ export declare class MapLayerFill extends MapLayer<LayerFill> {
     color: import("svelte/store").Writable<string>;
     opacity: import("svelte/store").Writable<number>;
     pattern: import("svelte/store").Writable<number>;
+    static readonly defaultStyle: StateStyle;
     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/fill.js

@@ -12,6 +12,11 @@ export class MapLayerFill extends MapLayer {
     color = writable('#ff0000');
     opacity = writable(1);
     pattern = writable(0);
+    static defaultStyle = {
+        color: '#ff0000',
+        opacity: 1,
+        pattern: 0
+    };
     constructor(manager, id, source) {
         super(manager, id);
         this.addLayer(source, 'fill', {}, {
@@ -47,29 +52,16 @@ export class MapLayerFill extends MapLayer {
             this.map.addImage(name, { width: size, height: size, data });
             this.updatePaint('fill-pattern', name);
         };
-        this.color.subscribe(() => {
-            updatePattern();
-            this.manager.saveState();
-        });
-        this.pattern.subscribe(() => {
-            updatePattern();
-            this.manager.saveState();
-        });
-        this.opacity.subscribe((value) => {
-            this.updatePaint('fill-opacity', value);
-            this.manager.saveState();
-        });
+        this.color.subscribe(() => updatePattern());
+        this.pattern.subscribe(() => updatePattern());
+        this.opacity.subscribe((value) => this.updatePaint('fill-opacity', value));
     }
     getState() {
         return removeDefaultFields({
             color: get(this.color),
             opacity: get(this.opacity),
             pattern: get(this.pattern)
-        }, {
-            color: '#ff0000',
-            opacity: 1,
-            pattern: 0
-        });
+        }, MapLayerFill.defaultStyle);
     }
     setState(state) {
         if (state.color)

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

@@ -1,20 +1,21 @@
 import type { LayerLine } 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';
 export declare const dashArrays: Map<number, {
     name: string;
     array: number[] | undefined;
 }>;
 export declare class MapLayerLine extends MapLayer<LayerLine> {
+    static readonly defaultStyle: StateStyle;
     color: import("svelte/store").Writable<string>;
     dashed: import("svelte/store").Writable<number>;
     visible: import("svelte/store").Writable<boolean>;
     width: import("svelte/store").Writable<number>;
     dashArray: import("svelte/store").Readable<number[]>;
     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/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);
@@ -24,22 +30,10 @@ export class MapLayerLine extends MapLayer {
             'line-dasharray': get(this.dashArray),
             'line-width': get(this.width)
         });
-        this.color.subscribe((v) => {
-            this.updatePaint('line-color', Color.parse(v));
-            this.manager.saveState();
-        });
-        this.dashArray.subscribe((v) => {
-            this.updatePaint('line-dasharray', v);
-            this.manager.saveState();
-        });
-        this.visible.subscribe((v) => {
-            this.updateLayout('visibility', v ? 'visible' : 'none');
-            this.manager.saveState();
-        });
-        this.width.subscribe((v) => {
-            this.updatePaint('line-width', v);
-            this.manager.saveState();
-        });
+        this.color.subscribe((v) => this.updatePaint('line-color', Color.parse(v)));
+        this.dashArray.subscribe((v) => this.updatePaint('line-dasharray', v));
+        this.visible.subscribe((v) => this.updateLayout('visibility', v ? 'visible' : 'none'));
+        this.width.subscribe((v) => this.updatePaint('line-width', v));
     }
     getState() {
         return removeDefaultFields({
@@ -47,12 +41,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,17 @@
+import type { GeometryManager } from '../geometry_manager.js';
+export declare class StateManager {
+    geometryManager: GeometryManager;
+    private disableLogging;
+    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,87 @@
+import { writable } from 'svelte/store';
+import { StateReader } from './reader.js';
+import { StateWriter } from './writer.js';
+const MAXLENGTH = 100;
+export class StateManager {
+    geometryManager;
+    disableLogging = false;
+    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.disableLogging = true;
+            this.geometryManager.setState(state);
+            this.disableLogging = false;
+            this.history = [{ ...state, map: undefined }];
+            this.historyIndex = 0;
+            this.updateButtons();
+        }
+        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() {
+        if (this.disableLogging)
+            return;
+        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.disableLogging = true;
+            this.geometryManager.setState(state);
+            this.disableLogging = false;
+            this.updateButtons();
+        }
+    }
+    redo() {
+        if (this.historyIndex > 0) {
+            this.historyIndex--;
+            const state = this.history[this.historyIndex];
+            this.disableLogging = true;
+            this.geometryManager.setState(state);
+            this.disableLogging = false;
+            this.updateButtons();
+        }
+    }
+    updateButtons() {
+        this.undoEnabled.set(this.historyIndex < this.history.length - 1);
+        this.redoEnabled.set(this.historyIndex > 0);
+    }
+}