@versatiles/svelte 2.0.1 → 2.1.1

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

@@ -1,38 +1,21 @@
-import { type Writable } from 'svelte/store';
 import type { AbstractElement } from './element/abstract.js';
-import { MarkerElement } from './element/marker.js';
-import { LineElement } from './element/line.js';
-import { PolygonElement } from './element/polygon.js';
-import { Cursor } from './cursor.js';
-import { SymbolLibrary } from './symbols.js';
-import { StateManager } from './state/manager.js';
+import type { GeometryManagerInteractive } from './geometry_manager_interactive.js';
+import type { SelectionHandler } from './selection.js';
+import type { StateManager } from './state/manager.js';
 import type { StateRoot } from './state/types.js';
-export type ExtendedGeoJSON = GeoJSON.FeatureCollection & {
-    map?: {
-        center: [number, number];
-        zoom: number;
-    };
-};
+import { type Writable } from 'svelte/store';
 export declare class GeometryManager {
     readonly elements: Writable<AbstractElement[]>;
     readonly map: maplibregl.Map;
-    readonly selectedElement: Writable<AbstractElement | undefined>;
     readonly canvas: HTMLElement;
-    readonly cursor: Cursor;
-    readonly symbolLibrary: SymbolLibrary;
-    readonly state: StateManager;
-    private readonly selectionNodes;
+    readonly state: StateManager | null;
+    readonly selection: SelectionHandler | null;
     constructor(map: maplibregl.Map);
-    selectElement(element: AbstractElement | undefined): void;
-    drawSelectionNodes(): void;
-    getState(): StateRoot;
-    setState(state: StateRoot): void;
-    getElement(index: number): AbstractElement;
-    addNewMarker(): MarkerElement;
-    addNewLine(): LineElement;
-    addNewPolygon(): PolygonElement;
-    private appendElement;
+    isInteractive(): this is GeometryManagerInteractive;
+    clear(): void;
+    protected appendElement(element: AbstractElement): void;
     removeElement(element: AbstractElement): void;
-    getGeoJSON(): GeoJSON.FeatureCollection;
-    addGeoJSON(geojson: ExtendedGeoJSON): void;
+    loadState(state: StateRoot): Promise<void>;
+    setState(state: StateRoot): Promise<void>;
+    getElement(index: number): AbstractElement;
 }

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

@@ -1,31 +1,26 @@
 import { get, writable } from 'svelte/store';
-import { MarkerElement } from './element/marker.js';
+import { getMapStyle } from '../../../utils/map_style.js';
+import { CircleElement } from './element/circle.js';
 import { LineElement } from './element/line.js';
+import { MarkerElement } from './element/marker.js';
 import { PolygonElement } from './element/polygon.js';
-import { Cursor } from './cursor.js';
-import { SymbolLibrary } from './symbols.js';
-import { StateManager } from './state/manager.js';
 export class GeometryManager {
     elements;
     map;
-    selectedElement = writable(undefined);
     canvas;
-    cursor;
-    symbolLibrary;
-    state;
-    selectionNodes;
+    state = null;
+    selection = null;
     constructor(map) {
         this.elements = writable([]);
         this.map = map;
         this.canvas = this.map.getCanvasContainer();
-        this.cursor = new Cursor(this.canvas);
-        this.symbolLibrary = new SymbolLibrary(map);
-        map.addSource('selection_nodes', {
+        const style = getMapStyle({ darkMode: false });
+        style.transition = { duration: 0, delay: 0 };
+        style.sources.selection_nodes = {
             type: 'geojson',
             data: { type: 'FeatureCollection', features: [] }
-        });
-        this.selectionNodes = map.getSource('selection_nodes');
-        map.addLayer({
+        };
+        style.layers.push({
             id: 'selection_nodes',
             source: 'selection_nodes',
             type: 'circle',
@@ -39,91 +34,46 @@ export class GeometryManager {
                 'circle-stroke-width': 1
             }
         });
-        map.on('mousedown', 'selection_nodes', (e) => {
-            const element = get(this.selectedElement);
-            if (element == undefined)
-                return;
-            const feature = map.queryRenderedFeatures(e.point, { layers: ['selection_nodes'] })[0];
-            const selectedNode = element.getSelectionNodeUpdater(feature.properties);
-            if (selectedNode == undefined)
-                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.drawSelectionNodes();
-            }
-            else {
-                const onMove = (e) => {
-                    e.preventDefault();
-                    selectedNode.update(e.lngLat.lng, e.lngLat.lat);
-                    this.drawSelectionNodes();
-                };
-                map.on('mousemove', onMove);
-                map.once('mouseup', () => {
-                    map.off('mousemove', onMove);
-                    this.state.log();
-                });
-            }
-        });
-        map.on('mouseenter', 'selection_nodes', () => {
-            this.cursor.togglePrecise('selection_nodes');
-        });
-        map.on('mouseleave', 'selection_nodes', () => {
-            this.cursor.togglePrecise('selection_nodes', false);
-        });
-        map.on('click', (e) => {
-            if (!e.originalEvent.shiftKey)
-                this.selectElement(undefined);
-            e.preventDefault();
-        });
-        this.state = new StateManager(this);
+        map.setStyle(style);
     }
-    selectElement(element) {
-        if (element == get(this.selectedElement))
-            return;
-        const elements = get(this.elements);
-        elements.forEach((e) => e.select(e == element));
-        this.selectedElement.set(element);
-        this.drawSelectionNodes();
+    isInteractive() {
+        return false;
     }
-    drawSelectionNodes() {
-        const nodes = get(this.selectedElement)?.getSelectionNodes() ?? [];
-        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 }
-            }))
+    clear() {
+        this.elements.update((elements) => {
+            elements.forEach((e) => e.destroy());
+            return [];
         });
     }
-    getState() {
-        const center = this.map.getCenter();
-        return {
-            map: {
-                center: [center.lng, center.lat],
-                zoom: this.map.getZoom()
-            },
-            elements: get(this.elements).map((element) => element.getState())
-        };
+    appendElement(element) {
+        this.elements.update((elements) => [...elements, element]);
+    }
+    removeElement(element) {
+        this.elements.update((elements) => elements.filter((e) => e !== element));
     }
-    setState(state) {
+    async loadState(state) {
         if (!state)
             return;
-        this.selectElement(undefined);
-        this.elements.update((elements) => {
-            elements.forEach((e) => e.destroy());
-            return [];
-        });
+        this.clear();
+        this.setState(state);
+        this.state?.history.reset(state);
+    }
+    async setState(state) {
+        if (!state)
+            return;
+        this.clear();
         if (state.map) {
-            if (state.map.zoom)
-                this.map.setZoom(state.map.zoom);
-            if (state.map.center) {
-                const [lng, lat] = state.map.center;
-                this.map.setCenter({ lng, lat });
-            }
+            const { center, radius } = state.map;
+            const dy = (radius * 360) / 40074000;
+            const dx = dy / Math.cos((center[1] * Math.PI) / 180);
+            const bounds = [
+                [center[0] - dx, center[1] - dy],
+                [center[0] + dx, center[1] + dy]
+            ];
+            this.map.fitBounds(bounds, { animate: false });
+        }
+        if (!this.map.isStyleLoaded()) {
+            await new Promise((r) => this.map.once('styledata', r));
         }
         if (state.elements) {
             const elements = state.elements.map((element) => {
@@ -134,6 +84,8 @@ export class GeometryManager {
                         return LineElement.fromState(this, element);
                     case 'polygon':
                         return PolygonElement.fromState(this, element);
+                    case 'circle':
+                        return CircleElement.fromState(this, element);
                     default:
                         throw new Error('Unknown element type');
                 }
@@ -144,72 +96,4 @@ export class GeometryManager {
     getElement(index) {
         return get(this.elements)[index];
     }
-    addNewMarker() {
-        const element = new MarkerElement(this);
-        this.appendElement(element);
-        this.selectElement(element);
-        return element;
-    }
-    addNewLine() {
-        const element = new LineElement(this);
-        this.appendElement(element);
-        this.selectElement(element);
-        return element;
-    }
-    addNewPolygon() {
-        const element = new PolygonElement(this);
-        this.appendElement(element);
-        this.selectElement(element);
-        return element;
-    }
-    appendElement(element) {
-        this.elements.update((elements) => [...elements, element]);
-    }
-    removeElement(element) {
-        if (get(this.selectedElement) === element)
-            this.selectElement(undefined);
-        this.elements.update((elements) => elements.filter((e) => e !== element));
-    }
-    getGeoJSON() {
-        const center = this.map.getCenter();
-        return {
-            type: 'FeatureCollection',
-            map: {
-                center: [center.lng, center.lat],
-                zoom: this.map.getZoom()
-            },
-            features: get(this.elements).map((element) => element.getFeature(true))
-        };
-    }
-    addGeoJSON(geojson) {
-        if ('map' in geojson && geojson.map) {
-            const { map } = geojson;
-            if (typeof map.zoom === 'number') {
-                this.map.setZoom(map.zoom);
-            }
-            if (Array.isArray(map.center)) {
-                const [lng, lat] = map.center;
-                if (typeof lng === 'number' && typeof lat === 'number') {
-                    this.map.setCenter({ lng, lat });
-                }
-            }
-        }
-        for (const feature of geojson.features) {
-            let element;
-            switch (feature.geometry.type) {
-                case 'Point':
-                    element = MarkerElement.fromGeoJSON(this, feature);
-                    break;
-                case 'LineString':
-                    element = LineElement.fromGeoJSON(this, feature);
-                    break;
-                case 'Polygon':
-                    element = PolygonElement.fromGeoJSON(this, feature);
-                    break;
-                default:
-                    throw new Error(`Unknown geometry type "${feature.geometry.type}"`);
-            }
-            this.appendElement(element);
-        }
-    }
 }

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

@@ -0,0 +1,33 @@
+import type { AbstractElement } from './element/abstract.js';
+import { CircleElement } from './element/circle.js';
+import { LineElement } from './element/line.js';
+import { MarkerElement } from './element/marker.js';
+import { PolygonElement } from './element/polygon.js';
+import { GeometryManager } from './geometry_manager.js';
+import { SelectionHandler } from './selection.js';
+import { Cursor } from './cursor.js';
+import { StateManager } from './state/manager.js';
+import type { StateRoot } from './state/types.js';
+export type ExtendedGeoJSON = GeoJSON.FeatureCollection & {
+    map?: {
+        center: [number, number];
+        zoom: number;
+    };
+};
+export declare class GeometryManagerInteractive extends GeometryManager {
+    readonly selection: SelectionHandler;
+    readonly cursor: Cursor;
+    readonly state: StateManager;
+    constructor(map: maplibregl.Map);
+    clear(): void;
+    isInteractive(): this is GeometryManagerInteractive;
+    removeElement(element: AbstractElement): void;
+    addNewElement(type: 'marker'): MarkerElement;
+    addNewElement(type: 'line'): LineElement;
+    addNewElement(type: 'polygon'): PolygonElement;
+    addNewElement(type: 'circle'): CircleElement;
+    addNewElement(type: 'marker' | 'line' | 'polygon' | 'circle'): AbstractElement;
+    getGeoJSON(): GeoJSON.FeatureCollection;
+    getState(): StateRoot;
+    addGeoJSON(geojson: ExtendedGeoJSON): void;
+}

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

@@ -0,0 +1,102 @@
+import { get } from 'svelte/store';
+import { CircleElement } from './element/circle.js';
+import { LineElement } from './element/line.js';
+import { MarkerElement } from './element/marker.js';
+import { PolygonElement } from './element/polygon.js';
+import { GeometryManager } from './geometry_manager.js';
+import { SelectionHandler } from './selection.js';
+import { flatten } from './utils/geometry.js';
+import { Cursor } from './cursor.js';
+import { StateManager } from './state/manager.js';
+export class GeometryManagerInteractive extends GeometryManager {
+    selection;
+    cursor;
+    state;
+    constructor(map) {
+        super(map);
+        this.cursor = new Cursor(map.getCanvasContainer());
+        this.selection = new SelectionHandler(this);
+        this.state = new StateManager(this);
+    }
+    clear() {
+        this.selection.selectElement();
+        super.clear();
+    }
+    isInteractive() {
+        return true;
+    }
+    removeElement(element) {
+        this.selection.selectElement();
+        super.removeElement(element);
+    }
+    addNewElement(type) {
+        const AbstractClass = {
+            marker: MarkerElement,
+            line: LineElement,
+            polygon: PolygonElement,
+            circle: CircleElement
+        }[type];
+        const element = new AbstractClass(this);
+        this.appendElement(element);
+        this.selection.selectElement(element);
+        return element;
+    }
+    getGeoJSON() {
+        const center = this.map.getCenter();
+        return {
+            type: 'FeatureCollection',
+            map: {
+                center: [center.lng, center.lat],
+                zoom: this.map.getZoom()
+            },
+            features: get(this.elements).map((element) => element.getGeoJSON())
+        };
+    }
+    getState() {
+        const center = this.map.getCenter();
+        const bounds = this.map.getBounds();
+        const radiusDegrees = Math.min(bounds.getNorth() - bounds.getSouth(), (bounds.getEast() - bounds.getWest()) * Math.cos((center.lat * Math.PI) / 180)) / 2;
+        const radius = 40074000 * (radiusDegrees / 360);
+        return {
+            map: {
+                center: [center.lng, center.lat],
+                radius
+            },
+            elements: get(this.elements).map((element) => element.getState())
+        };
+    }
+    addGeoJSON(geojson) {
+        if ('map' in geojson && geojson.map) {
+            const { map } = geojson;
+            if (typeof map.zoom === 'number') {
+                this.map.setZoom(map.zoom);
+            }
+            if (Array.isArray(map.center)) {
+                const [lng, lat] = map.center;
+                if (typeof lng === 'number' && typeof lat === 'number') {
+                    this.map.setCenter({ lng, lat });
+                }
+            }
+        }
+        for (const feature of flatten(geojson.features)) {
+            let element;
+            const p = feature.properties;
+            switch (feature.geometry.type) {
+                case 'Point':
+                    if (p && p.subType == 'Circle' && p.radius != null) {
+                        element = CircleElement.fromGeoJSON(this, feature);
+                        break;
+                    }
+                    element = MarkerElement.fromGeoJSON(this, feature);
+                    break;
+                case 'LineString':
+                    element = LineElement.fromGeoJSON(this, feature);
+                    break;
+                case 'Polygon':
+                    element = PolygonElement.fromGeoJSON(this, feature);
+                    break;
+            }
+            this.appendElement(element);
+        }
+    }
+}

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

@@ -1,6 +1,7 @@
 import type { LayerFill, LayerLine, LayerSymbol } from './types.js';
 import type { GeometryManager } from '../geometry_manager.js';
 import type { StateStyle } from '../state/types.js';
+import type { GeometryManagerInteractive } from '../geometry_manager_interactive.js';
 type LayerSpec = LayerFill | LayerLine | LayerSymbol;
 type Events = 'click' | 'mousedown' | 'mousemove' | 'mouseup';
 type MouseEventHandler = (event: maplibregl.MapMouseEvent) => void;
@@ -8,7 +9,7 @@ export declare abstract class MapLayer<T extends LayerSpec> {
     private layout;
     private paint;
     protected readonly id: string;
-    readonly manager: GeometryManager;
+    readonly manager: GeometryManager | GeometryManagerInteractive;
     protected readonly map: maplibregl.Map;
     eventHandlers: Map<Events, MouseEventHandler[]>;
     isSelected: boolean;

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

@@ -45,28 +45,31 @@ export class MapLayer {
             handlers.forEach((handler) => handler(e));
     }
     addEvents() {
-        this.map.on('mouseenter', this.id, () => {
-            if (this.isSelected)
-                this.manager.cursor.toggleGrab(this.id);
-            this.manager.cursor.toggleHover(this.id);
-        });
-        this.map.on('mouseleave', this.id, () => {
-            if (this.isSelected)
-                this.manager.cursor.toggleGrab(this.id, false);
-            this.manager.cursor.toggleHover(this.id, false);
-        });
-        this.map.on('click', this.id, (e) => {
-            this.dispatchEvent('click', e);
-            if (this.isSelected)
-                this.manager.cursor.toggleGrab(this.id);
-            this.manager.cursor.toggleHover(this.id);
-            e.preventDefault();
-        });
-        this.map.on('mousedown', this.id, (e) => {
-            if (this.manager.cursor.isPrecise())
-                return;
-            this.dispatchEvent('mousedown', e);
-        });
+        const manager = this.manager;
+        if (manager.isInteractive()) {
+            this.map.on('mouseenter', this.id, () => {
+                if (this.isSelected)
+                    manager.cursor.toggleGrab(this.id);
+                manager.cursor.toggleHover(this.id);
+            });
+            this.map.on('mouseleave', this.id, () => {
+                if (this.isSelected)
+                    manager.cursor.toggleGrab(this.id, false);
+                manager.cursor.toggleHover(this.id, false);
+            });
+            this.map.on('click', this.id, (e) => {
+                this.dispatchEvent('click', e);
+                if (this.isSelected)
+                    manager.cursor.toggleGrab(this.id);
+                manager.cursor.toggleHover(this.id);
+                e.preventDefault();
+            });
+            this.map.on('mousedown', this.id, (e) => {
+                if (manager.cursor.isPrecise())
+                    return;
+                this.dispatchEvent('mousedown', e);
+            });
+        }
         this.map.on('mouseup', this.id, (e) => this.dispatchEvent('mouseup', e));
         this.map.on('mousemove', this.id, (e) => this.dispatchEvent('mousemove', e));
     }

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

@@ -1,7 +1,7 @@
 import { get, writable } from 'svelte/store';
 import { MapLayer } from './abstract.js';
 import { Color } from '@versatiles/style';
-import { removeDefaultFields } from '../utils.js';
+import { removeDefaultFields } from '../state/utils.js';
 const size = 32;
 export const fillPatterns = new Map([
     [0, { name: 'solid', fill: undefined }],
@@ -86,9 +86,7 @@ export class MapLayerFill extends MapLayer {
         if (properties['fill-opacity'])
             this.opacity.set(properties['fill-opacity']);
         if (properties['fill-pattern']) {
-            const pattern = fillPatterns
-                .entries()
-                .find(([, { name }]) => name === properties['fill-pattern']);
+            const pattern = fillPatterns.entries().find(([, { name }]) => name === properties['fill-pattern']);
             if (pattern)
                 this.pattern.set(pattern[0]);
         }

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

@@ -1,7 +1,7 @@
 import { derived, get, writable } from 'svelte/store';
 import { MapLayer } from './abstract.js';
 import { Color } from '@versatiles/style';
-import { removeDefaultFields } from '../utils.js';
+import { removeDefaultFields } from '../state/utils.js';
 export const dashArrays = new Map([
     [0, { name: 'solid', array: [100] }],
     [1, { name: 'dashed', array: [2, 4] }],

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

@@ -19,8 +19,8 @@ export declare class MapLayerSymbol extends MapLayer<LayerSymbol> {
     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>;
+    textAnchor: import("svelte/store").Readable<"center" | "left" | "right" | "top" | "bottom" | undefined>;
+    textVariableAnchor: import("svelte/store").Readable<("center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left" | "right" | "top" | "bottom")[] | undefined>;
     constructor(manager: GeometryManager, id: string, source: string);
     getState(): StateStyle | undefined;
     setState(state: StateStyle): void;

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

@@ -2,7 +2,7 @@ import { derived, get, writable } from 'svelte/store';
 import { MapLayer } from './abstract.js';
 import { Color } from '@versatiles/style';
 import { getSymbol, getSymbolIndexByName } from '../symbols.js';
-import { removeDefaultFields } from '../utils.js';
+import { removeDefaultFields } from '../state/utils.js';
 export const labelPositions = [
     { index: 0, name: 'auto' },
     { index: 1, name: 'right', anchor: 'left' },

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

@@ -0,0 +1,11 @@
+import { type Writable } from 'svelte/store';
+import type { AbstractElement } from './element/abstract.js';
+import type { GeometryManagerInteractive } from './geometry_manager_interactive.js';
+export declare class SelectionHandler {
+    readonly selectedElement: Writable<AbstractElement | undefined>;
+    private selectionNodes;
+    private manager;
+    constructor(manager: GeometryManagerInteractive);
+    selectElement(element?: AbstractElement): void;
+    updateSelectionNodes(): void;
+}

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 }
+            }))
+        });
+    }
+}