@versatiles/svelte 1.1.2 → 2.0.0

package/dist/components/MapEditor/components/SidebarPanel.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		children,
+		open = true,
+		title,
+		disabled = false
+	}: { children: Snippet; disabled?: boolean; open?: boolean; title: string } = $props();
+</script>
+
+<div class={{ panel: true, open, disabled }}>
+	<button class="header" onclick={() => (open = !open)}>
+		<span class="title">{title}</span>
+		<div class="chevron">
+			<svg viewBox="0 0 7 12">
+				<path d="M1,0L7,6L1,12L0,11,L5,6L0,1z" />
+			</svg>
+		</div>
+	</button>
+	<div class="content">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.panel {
+		margin: 1em 0;
+
+		.header {
+			background: none;
+			border: none;
+			color: var(--color-text);
+			cursor: pointer;
+			font-weight: 600;
+			margin: 0;
+			padding: 0;
+			position: relative;
+			text-align: left;
+			width: 100%;
+
+			.title {
+				text-transform: uppercase;
+				opacity: 0.8;
+			}
+			.chevron {
+				box-sizing: border-box;
+				display: block;
+				height: 1em;
+				opacity: 0.7;
+				padding: 0;
+				position: absolute;
+				right: 0.4em;
+				top: 0;
+				width: 1em;
+				svg {
+					fill: var(--color-fg);
+					width: 100%;
+					height: 100%;
+					rotate: 0deg;
+					transition: rotate 0.1s linear;
+					transform-origin: 40% 50%;
+				}
+			}
+		}
+		.content {
+			height: 0;
+			overflow: hidden;
+			padding: 0;
+			box-sizing: border-box;
+		}
+	}
+	.open {
+		margin-bottom: 2em;
+		.header {
+			.chevron {
+				svg {
+					rotate: 90deg;
+				}
+			}
+		}
+		.content {
+			height: auto;
+		}
+	}
+	.disabled {
+		opacity: 0.3;
+		.content {
+			display: none;
+		}
+	}
+</style>

package/dist/components/MapEditor/components/SidebarPanel.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    disabled?: boolean;
+    open?: boolean;
+    title: string;
+};
+declare const SidebarPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type SidebarPanel = ReturnType<typeof SidebarPanel>;
+export default SidebarPanel;

package/dist/components/MapEditor/components/SymbolSelector.svelte

@@ -7,17 +7,17 @@
 		symbolLibrary
 	}: { symbolIndex: number; symbolLibrary: SymbolLibrary } = $props();
 
-	let open = $state(false);
-
 	const drawIconHalo: Action<HTMLCanvasElement, number> = (canvas, index) =>
 		symbolLibrary.drawSymbol(canvas, index, true);
 
 	const drawIcon: Action<HTMLCanvasElement, number> = (canvas, index) =>
 		symbolLibrary.drawSymbol(canvas, index);
+
+	let dialog: HTMLDialogElement | null = null;
 </script>
 
 <button
-	onclick={() => (open = !open)}
+	onclick={() => dialog?.showModal()}
 	style="text-align: left; white-space: nowrap; overflow: hidden; padding: 1px"
 >
 	{#key symbolIndex}
@@ -35,28 +35,20 @@
 	{/if}
 </button>
 
-<div class="modal" style="display: {open ? 'block' : 'none'};">
-	<button class="close" onclick={() => (open = false)}>&#x2715;</button>
+<dialog class="modal" bind:this={dialog}>
+	<button class="close" onclick={() => dialog?.close()}>&#x2715;</button>
 	<div class="inner">
 		{#each symbolLibrary.asList() as symbol (symbol.index)}
-			<button
-				class="icon"
-				onclick={() => {
-					symbolIndex = symbol.index;
-					open = false;
-				}}
+			<button class="icon" onclick={() => (symbolIndex = symbol.index)}
 				><canvas width="64" height="64" use:drawIconHalo={symbol.index}></canvas><br
 				/>{symbol.name}</button
 			>
 		{/each}
 	</div>
-</div>
+</dialog>
 
 <style>
 	.modal {
-		position: fixed;
-		top: max(calc(50vh - 250px), 0px);
-		left: max(calc(50vw - 250px), 0px);
 		width: min(500px, 100vw);
 		height: min(500px, 100vh);
 		background-color: rgba(255, 255, 255, 0.5);

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

@@ -1,6 +1,6 @@
 import type { ElementPoint, SelectionNode, SelectionNodeUpdater } from './types.js';
 import type { GeometryManager } from '../geometry_manager.js';
-import type { StateObject } from '../state/types.js';
+import type { StateElement } from '../state/types.js';
 export declare abstract class AbstractElement {
     protected readonly canvas: HTMLElement;
     protected readonly manager: GeometryManager;
@@ -14,8 +14,8 @@ export declare abstract class AbstractElement {
     protected randomPositions(length: number): ElementPoint[];
     delete(): void;
     abstract destroy(): void;
-    abstract getFeature(includeProperties: boolean): GeoJSON.Feature;
+    abstract getFeature(includeProperties?: boolean): GeoJSON.Feature;
     abstract getSelectionNodes(): SelectionNode[];
     abstract getSelectionNodeUpdater(properties?: Record<string, unknown>): SelectionNodeUpdater | undefined;
-    abstract getState(): StateObject;
+    abstract getState(): StateElement;
 }

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

@@ -33,7 +33,7 @@ export class AbstractElement {
         return points;
     }
     delete() {
+        this.manager.removeElement(this);
         this.destroy();
-        this.manager.deleteElement(this);
     }
 }

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

@@ -2,15 +2,14 @@ import type { GeometryManager } from '../geometry_manager.js';
 import type { ElementPath } from './types.js';
 import { MapLayerLine } from '../map_layer/line.js';
 import { AbstractPathElement } from './abstract_path.js';
-import type { StateObject } from '../state/types.js';
+import type { StateElementLine } from '../state/types.js';
 export declare class LineElement extends AbstractPathElement {
     readonly layer: MapLayerLine;
-    readonly path: ElementPath;
     constructor(manager: GeometryManager, line?: ElementPath);
     select(value: boolean): void;
     getFeature(includeProperties?: boolean): GeoJSON.Feature<GeoJSON.LineString>;
     destroy(): void;
-    getState(): StateObject;
-    static fromState(manager: GeometryManager, state: StateObject): LineElement;
+    getState(): StateElementLine;
+    static fromState(manager: GeometryManager, state: StateElementLine): LineElement;
     static fromGeoJSON(manager: GeometryManager, feature: GeoJSON.Feature<GeoJSON.LineString>): LineElement;
 }

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

@@ -2,7 +2,6 @@ import { MapLayerLine } from '../map_layer/line.js';
 import { AbstractPathElement } from './abstract_path.js';
 export class LineElement extends AbstractPathElement {
     layer;
-    path;
     constructor(manager, line) {
         super(manager, true);
         this.path = line ?? this.randomPositions(2);

package/dist/components/MapEditor/lib/element/marker.d.ts

@@ -2,17 +2,17 @@ import { AbstractElement } from './abstract.js';
 import type { GeometryManager } from '../geometry_manager.js';
 import type { ElementPoint, SelectionNode, SelectionNodeUpdater } from './types.js';
 import { MapLayerSymbol } from '../map_layer/symbol.js';
-import type { StateObject } from '../state/types.js';
+import type { StateElementMarker } from '../state/types.js';
 export declare class MarkerElement extends AbstractElement {
     readonly layer: MapLayerSymbol;
-    private point;
+    point: ElementPoint;
     constructor(manager: GeometryManager, point?: ElementPoint);
     select(value: boolean): void;
     getFeature(includeProperties?: boolean): GeoJSON.Feature<GeoJSON.Point>;
     getSelectionNodes(): SelectionNode[];
     getSelectionNodeUpdater(): SelectionNodeUpdater | undefined;
     destroy(): void;
-    getState(): StateObject;
-    static fromState(manager: GeometryManager, state: StateObject): MarkerElement;
+    getState(): StateElementMarker;
+    static fromState(manager: GeometryManager, state: StateElementMarker): MarkerElement;
     static fromGeoJSON(manager: GeometryManager, feature: GeoJSON.Feature<GeoJSON.Point>): MarkerElement;
 }

package/dist/components/MapEditor/lib/element/polygon.d.ts

@@ -3,7 +3,7 @@ import type { ElementPath } from './types.js';
 import { MapLayerFill } from '../map_layer/fill.js';
 import { MapLayerLine } from '../map_layer/line.js';
 import { AbstractPathElement } from './abstract_path.js';
-import type { StateObject } from '../state/types.js';
+import type { StateElementPolygon } from '../state/types.js';
 export declare class PolygonElement extends AbstractPathElement {
     readonly fillLayer: MapLayerFill;
     readonly strokeLayer: MapLayerLine;
@@ -11,7 +11,7 @@ export declare class PolygonElement extends AbstractPathElement {
     select(value: boolean): void;
     getFeature(includeProperties?: boolean): GeoJSON.Feature<GeoJSON.Polygon>;
     destroy(): void;
-    getState(): StateObject;
-    static fromState(manager: GeometryManager, state: StateObject): PolygonElement;
+    getState(): StateElementPolygon;
+    static fromState(manager: GeometryManager, state: StateElementPolygon): PolygonElement;
     static fromGeoJSON(manager: GeometryManager, feature: GeoJSON.Feature<GeoJSON.Polygon>): PolygonElement;
 }

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

@@ -1,8 +1,18 @@
 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 type { StateObject } from './state/types.js';
 import { SymbolLibrary } from './symbols.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 GeometryManager {
     readonly elements: Writable<AbstractElement[]>;
     readonly map: maplibregl.Map;
@@ -10,19 +20,19 @@ export declare class GeometryManager {
     readonly canvas: HTMLElement;
     readonly cursor: Cursor;
     readonly symbolLibrary: SymbolLibrary;
+    readonly state: StateManager;
     private readonly selectionNodes;
     constructor(map: maplibregl.Map);
     selectElement(element: AbstractElement | undefined): void;
     drawSelectionNodes(): void;
-    getState(): StateObject;
-    saveState(): Promise<void>;
-    loadState(hash: string): Promise<void>;
+    getState(): StateRoot;
+    setState(state: StateRoot): void;
     getElement(index: number): AbstractElement;
-    addNewMarker(): AbstractElement;
-    addNewLine(): AbstractElement;
-    addNewPolygon(): AbstractElement;
-    private addElement;
-    deleteElement(element: AbstractElement): void;
+    addNewMarker(): MarkerElement;
+    addNewLine(): LineElement;
+    addNewPolygon(): PolygonElement;
+    private appendElement;
+    removeElement(element: AbstractElement): void;
     getGeoJSON(): GeoJSON.FeatureCollection;
-    addGeoJSON(geojson: GeoJSON.FeatureCollection): void;
+    addGeoJSON(geojson: ExtendedGeoJSON): void;
 }

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,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();
@@ -191,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);
@@ -218,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;
@@ -23,7 +24,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/abstract.js

@@ -12,6 +12,9 @@ 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);

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