@versatiles/svelte 1.1.1 → 2.0.0

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,12 +78,11 @@ 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))
+            return;
         const elements = get(this.elements);
         elements.forEach((e) => e.select(e == element));
         this.selectedElement.set(element);
@@ -105,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) {
@@ -154,28 +146,31 @@ 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();
+        this.state.log();
     }
-    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));
+        this.state.log();
     }
     getGeoJSON() {
         const center = this.map.getCenter();
@@ -189,7 +184,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);
@@ -216,8 +211,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;
@@ -13,6 +13,7 @@ export declare abstract class MapLayer<T extends LayerSpec> {
     eventHandlers: Map<Events, MouseEventHandler[]>;
     isSelected: boolean;
     constructor(manager: GeometryManager, id: string);
+    pushState(): void;
     addLayer(source: string, type: 'symbol' | 'line' | 'fill', layout: T['layout'], paint: T['paint']): void;
     on(event: Events, handler: MouseEventHandler): void;
     off(event: Events, handler: MouseEventHandler): void;
@@ -20,10 +21,10 @@ export declare abstract class MapLayer<T extends LayerSpec> {
     private addEvents;
     setPaint(paint: T['paint']): void;
     updatePaint<K extends keyof T['paint'], V extends T['paint'][K]>(key: K, value: V): void;
-    setLayout(layout: T['layout']): void;
+    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/abstract.js

@@ -12,11 +12,24 @@ export class MapLayer {
         this.map = manager.map;
         this.id = id;
     }
+    pushState() {
+        this.manager.state.log();
+    }
     addLayer(source, type, layout, paint) {
+        layout = cloneClean(layout);
+        paint = cloneClean(paint);
         this.layout = layout;
         this.paint = paint;
         this.map.addLayer({ id: this.id, source, type, layout, paint }, 'selection_nodes');
         this.addEvents();
+        function cloneClean(obj) {
+            const clone = { ...obj };
+            for (const key in clone) {
+                if (clone[key] == null)
+                    delete clone[key];
+            }
+            return clone;
+        }
     }
     on(event, handler) {
         if (!this.eventHandlers.has(event))
@@ -75,18 +88,23 @@ export class MapLayer {
         this.map.setPaintProperty(this.id, key, value);
         this.paint[key] = value;
     }
-    setLayout(layout) {
-        if (layout === undefined)
-            return;
-        const keys = new Set(Object.keys(layout).concat(Object.keys(this.layout)));
-        for (const key of keys.values())
-            this.updateLayout(key, layout[key]);
-    }
-    updateLayout(key, value) {
-        if (this.layout[key] == value)
-            return;
-        this.map.setLayoutProperty(this.id, key, value);
-        this.layout[key] = value;
+    updateLayout(arg1, arg2) {
+        if (typeof arg1 === 'string') {
+            if (this.layout[arg1] == arg2)
+                return;
+            this.map.setLayoutProperty(this.id, arg1, arg2);
+            if (arg2 == null) {
+                delete this.layout[arg1];
+            }
+            else {
+                this.layout[arg1] = arg2;
+            }
+        }
+        else if (typeof arg1 === 'object') {
+            for (const [key, value] of Object.entries(arg1)) {
+                this.updateLayout(key, value);
+            }
+        }
     }
     destroy() {
         this.map.removeLayer(this.id);

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', {}, {
@@ -49,15 +54,15 @@ export class MapLayerFill extends MapLayer {
         };
         this.color.subscribe(() => {
             updatePattern();
-            this.manager.saveState();
+            this.manager.state.log();
         });
         this.pattern.subscribe(() => {
             updatePattern();
-            this.manager.saveState();
+            this.manager.state.log();
         });
         this.opacity.subscribe((value) => {
             this.updatePaint('fill-opacity', value);
-            this.manager.saveState();
+            this.manager.state.log();
         });
     }
     getState() {
@@ -65,11 +70,7 @@ export class MapLayerFill extends MapLayer {
             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);
@@ -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

@@ -1,19 +1,30 @@
+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;
+    anchor?: 'center' | 'left' | 'right' | 'bottom' | 'top';
+}
+export declare const labelPositions: LabelAlign[];
 export declare class MapLayerSymbol extends MapLayer<LayerSymbol> {
-    color: import("svelte/store").Writable<string>;
-    halo: import("svelte/store").Writable<number>;
-    rotate: import("svelte/store").Writable<number>;
-    size: import("svelte/store").Writable<number>;
-    symbolIndex: import("svelte/store").Writable<number>;
-    label: import("svelte/store").Writable<string>;
-    haloWidth: import("svelte/store").Readable<number>;
+    static readonly defaultStyle: StateStyle;
+    color: Writable<string>;
+    halo: Writable<number>;
+    rotate: Writable<number>;
+    size: Writable<number>;
+    symbolIndex: Writable<number>;
+    label: Writable<string>;
+    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;
 }
+export {};

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

@@ -3,53 +3,75 @@ import { MapLayer } from './abstract.js';
 import { Color } from '@versatiles/style';
 import { getSymbol, getSymbolIndexByName } from '../symbols.js';
 import { removeDefaultFields } from '../utils.js';
-const defaultStyle = {
-    color: '#ff0000',
-    rotate: 0,
-    size: 1,
-    halo: 1,
-    pattern: 38,
-    label: ''
-};
+export const labelPositions = [
+    { index: 0, name: 'auto' },
+    { index: 1, name: 'right', anchor: 'left' },
+    { index: 2, name: 'left', anchor: 'right' },
+    { index: 3, name: 'top', anchor: 'bottom' },
+    { index: 4, name: 'bottom', anchor: 'top' }
+];
 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);
-    haloWidth = derived([this.halo, this.size], ([halo, size]) => halo * size);
+    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;
+    });
+    textVariableAnchor = derived([this.labelAlign, this.symbolInfo], ([index, symbol]) => {
+        if (index !== 0)
+            return undefined;
+        if (symbol.image == null) {
+            return ['center', 'left', 'right', 'top', 'bottom'];
+        }
+        return ['left', 'right', 'top', 'bottom'];
+    });
     constructor(manager, id, source) {
         super(manager, id);
         this.addLayer(source, 'symbol', {
             'icon-image': get(this.symbolInfo).image,
             'icon-offset': get(this.symbolInfo).offset,
-            'icon-overlap': 'always',
-            'icon-rotate': defaultStyle.rotate,
-            'icon-size': defaultStyle.size,
-            'text-field': defaultStyle.label,
+            'icon-allow-overlap': true,
+            'icon-rotate': get(this.rotate),
+            'icon-size': get(this.size),
+            'text-field': get(this.label),
             'text-font': ['noto_sans_regular'],
             'text-justify': 'left',
-            'text-optional': true,
-            'text-offset': [0.7, 0.7],
-            'text-variable-anchor': ['right', 'left', 'top', 'bottom']
+            'text-overlap': 'always',
+            'text-radial-offset': 0.7,
+            '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
+            'text-halo-width': get(this.halo)
         });
         this.color.subscribe((v) => this.updatePaint('icon-color', Color.parse(v)));
-        this.haloWidth.subscribe((v) => {
+        this.halo.subscribe((v) => {
             this.updatePaint('icon-halo-width', v);
             this.updatePaint('text-halo-width', v);
         });
         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);
@@ -58,11 +80,9 @@ export class MapLayerSymbol extends MapLayer {
         this.symbolInfo.subscribe((v) => {
             if (v.image == null) {
                 this.updateLayout('icon-image', undefined);
-                this.updateLayout('text-variable-anchor', ['center']);
             }
             else {
                 this.updateLayout('icon-image', v.image);
-                this.updateLayout('text-variable-anchor', ['right', 'left', 'top', 'bottom']);
                 this.updateLayout('icon-offset', v.offset);
             }
         });
@@ -74,8 +94,9 @@ export class MapLayerSymbol extends MapLayer {
             size: get(this.size),
             halo: get(this.halo),
             pattern: get(this.symbolIndex),
-            label: get(this.label)
-        }, defaultStyle);
+            label: get(this.label),
+            align: get(this.labelAlign)
+        }, MapLayerSymbol.defaultStyle);
     }
     setState(state) {
         if (state.color)
@@ -90,6 +111,8 @@ export class MapLayerSymbol extends MapLayer {
             this.symbolIndex.set(state.pattern);
         if (state.label)
             this.label.set(state.label);
+        if (state.align)
+            this.labelAlign.set(lookupLabelAlign(state.align).index);
     }
     getGeoJSONProperties() {
         return {
@@ -98,7 +121,8 @@ export class MapLayerSymbol extends MapLayer {
             'symbol-rotate': get(this.rotate),
             'symbol-size': get(this.size),
             'symbol-pattern': get(this.symbolInfo).name,
-            'symbol-label': get(this.label)
+            'symbol-label': get(this.label),
+            'symbol-label-align': lookupLabelAlign(this.labelAlign).name
         };
     }
     setGeoJSONProperties(properties) {
@@ -114,6 +138,8 @@ export class MapLayerSymbol extends MapLayer {
             this.size.set(properties['symbol-size']);
         if (properties['symbol-label'])
             this.label.set(properties['symbol-label']);
+        if (properties['symbol-label-align'])
+            this.labelAlign.set(lookupLabelAlign(properties['symbol-label-align']).index);
         if (properties['symbol-pattern']) {
             const index = getSymbolIndexByName(properties['symbol-pattern']);
             if (index != null)
@@ -121,3 +147,18 @@ export class MapLayerSymbol extends MapLayer {
         }
     }
 }
+function lookupLabelAlign(index) {
+    let pos;
+    if (typeof index === 'object') {
+        index = get(index);
+    }
+    if (typeof index === 'number') {
+        pos = labelPositions.find((p) => p.index === index);
+    }
+    else if (typeof index === 'string') {
+        pos = labelPositions.find((p) => p.name === index);
+    }
+    if (pos == null)
+        return labelPositions[0];
+    return pos;
+}

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[];