@versatiles/svelte 2.0.1 → 2.1.0

package/dist/components/MapEditor/components/Sidebar.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
+	import '../style/index.scss';
 	import Editor from './Editor.svelte';
-	import type { GeometryManager } from '../lib/geometry_manager.js';
 	import SidebarPanel from './SidebarPanel.svelte';
+	import DialogShareMap from './DialogShare.svelte';
+	import PanelFile from './PanelFile.svelte';
+	import type { GeometryManagerInteractive } from '../lib/geometry_manager_interactive.js';
 
-	const { geometryManager, width }: { geometryManager: GeometryManager; width: number } = $props();
+	const { geometryManager }: { geometryManager: GeometryManagerInteractive } = $props();
 
+	let panelShareMap: DialogShareMap | null = null;
 	let history = geometryManager.state;
-	let undoEnabled = $state(geometryManager.state.undoEnabled);
-	let redoEnabled = $state(geometryManager.state.redoEnabled);
-	let activeElement = geometryManager.selectedElement;
+	let undoEnabled = $state(geometryManager.state.history.undoEnabled);
+	let redoEnabled = $state(geometryManager.state.history.redoEnabled);
+	let activeElement = geometryManager.selection.selectedElement;
 
 	function importGeoJSON() {
 		const input = document.createElement('input');
@@ -47,58 +51,51 @@
 		URL.revokeObjectURL(url);
 	}
 
-	function getLink() {
-		const url = new URL(window.location.href);
-		url.hash = geometryManager.state.getHash();
-		return url.href;
-	}
-
-	function copyLink() {
-		navigator.clipboard.writeText(getLink()).then(
-			() => alert('Link copied to clipboard!'),
-			() => alert('Failed to copy link. Please try again.')
-		);
-	}
-
-	function copyEmbedCode() {
-		const html = `<iframe style="width:100%; height:60vh" src="${getLink()}"></iframe>`;
-		navigator.clipboard.writeText(html).then(
-			() => alert('Embed code copied to clipboard!'),
-			() => alert('Failed to copy embed code. Please try again.')
-		);
+	function addNewElement(type: 'marker' | 'line' | 'polygon' | 'circle') {
+		activeElement.set(geometryManager.addNewElement(type));
 	}
 </script>
 
-<div class="sidebar" style="width: {width}px;">
+<div class="sidebar">
 	<div style="margin-bottom: 36px;">
-		<div class="flex flex-two">
-			<button onclick={() => history.undo()} disabled={!$undoEnabled}>Undo</button>
-			<button onclick={() => history.redo()} disabled={!$redoEnabled}>Redo</button>
+		<div class="grid2">
+			<button class="btn" onclick={() => history.undo()} disabled={!$undoEnabled}>Undo</button>
+			<button class="btn" onclick={() => history.redo()} disabled={!$redoEnabled}>Redo</button>
 		</div>
-		<SidebarPanel title="Share map" open={false}>
-			<div class="flex flex-one">
-				<button value="Link" onclick={copyLink}>Link</button>
-				<button onclick={copyEmbedCode}>Embed Code</button>
+		<hr class="thick" />
+		<SidebarPanel title="Map">
+			<PanelFile manager={geometryManager} />
+			<div class="grid1">
+				<button class="btn" onclick={() => panelShareMap?.open()}>Share/Embed</button>
+				<DialogShareMap bind:this={panelShareMap} bind:state={() => geometryManager.state, () => {}} />
 			</div>
 		</SidebarPanel>
+		<hr class="thick" />
 		<SidebarPanel title="Import/Export" open={false}>
-			<div class="flex flex-one">
-				<button onclick={importGeoJSON}>Import GeoJSON</button>
-				<button onclick={exportGeoJSON}>Export GeoJSON</button>
-			</div>
+			<label
+				>GeoJSON:
+				<div class="grid2">
+					<button class="btn" onclick={importGeoJSON}>Import</button>
+					<button class="btn" onclick={exportGeoJSON} data-testid="btnExportGeoJSON">Export</button>
+				</div>
+			</label>
 		</SidebarPanel>
+		<hr class="thick" />
 		<SidebarPanel title="Add new">
-			<div class="flex flex-two">
-				<button onclick={() => activeElement.set(geometryManager.addNewMarker())}>Marker</button>
-				<button onclick={() => activeElement.set(geometryManager.addNewLine())}>Line</button>
-				<button onclick={() => activeElement.set(geometryManager.addNewPolygon())}>Polygon</button>
-				<button disabled>Circle</button>
+			<div class="grid2">
+				<button class="btn" onclick={() => addNewElement('marker')}>Marker</button>
+				<button class="btn" onclick={() => addNewElement('line')}>Line</button>
+				<button class="btn" onclick={() => addNewElement('polygon')}>Polygon</button>
+				<button class="btn" onclick={() => addNewElement('circle')}>Circle</button>
 			</div>
 		</SidebarPanel>
+		<hr class="thick" />
 		<Editor element={$activeElement} />
+		<hr class="thick" />
 		<SidebarPanel title="Actions" disabled={!$activeElement}>
-			<div class="flex flex-two">
+			<div class="grid2">
 				<button
+					class="btn"
 					onclick={() => {
 						$activeElement!.delete();
 						geometryManager.state.log();
@@ -106,26 +103,24 @@
 				>
 			</div>
 		</SidebarPanel>
+		<hr class="thick" />
 		<SidebarPanel title="Help" open={false}>
-			Submit bugs and feature requests as
-			<a
-				id="github_link"
-				href="https://github.com/versatiles-org/node-versatiles-svelte/issues"
-				target="_blank"
-				aria-label="Repository on GitHub">GitHub issues</a
-			>
+			<p>
+				Submit bugs and feature requests as
+				<a
+					id="github_link"
+					href="https://github.com/versatiles-org/node-versatiles-svelte/issues"
+					target="_blank"
+					aria-label="Repository on GitHub">GitHub Issues</a
+				>
+			</p>
 		</SidebarPanel>
 	</div>
 </div>
 
 <style>
 	.sidebar {
-		--color-btn: #336680;
-		--color-bg: #ffffff;
-		--color-text: #000000;
-		--gap: 10px;
-
-		background-color: rgb(from var(--color-bg) r g b/ 0.7);
+		background: color-mix(in srgb, var(--color-bg) 80%, transparent);
 		backdrop-filter: blur(10px);
 		box-sizing: border-box;
 		color: var(--color-text);
@@ -136,49 +131,7 @@
 		position: absolute;
 		right: 0;
 		top: 0;
-		width: 200px;
-
-		.flex {
-			--gap: 5px;
-			align-items: center;
-			display: flex;
-			flex-wrap: wrap;
-			gap: var(--gap);
-			justify-content: space-between;
-			margin: var(--gap) 0 var(--gap);
-			width: 100%;
-		}
-		.flex-two button {
-			flex-grow: 1;
-			flex-basis: 0;
-			width: 40%;
-		}
-
-		.flex-one button {
-			width: 100%;
-		}
-
-		button {
-			background-color: var(--color-btn);
-			border: 2px solid var(--color-btn);
-			border-radius: 0.2em;
-			color: var(--color-bg);
-			cursor: pointer;
-			font-weight: 600;
-			padding: 0.4em 1em;
-			transition:
-				background-color 0.1s ease-in-out,
-				color 0.1s ease-in-out;
-
-			&:not([disabled]):hover {
-				background-color: var(--color-bg);
-				color: var(--color-btn);
-			}
-			&:disabled {
-				cursor: not-allowed;
-				opacity: 0.5;
-			}
-		}
+		width: 250px;
 	}
 
 	a {

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

@@ -1,7 +1,7 @@
-import type { GeometryManager } from '../lib/geometry_manager.js';
+import '../style/index.scss';
+import type { GeometryManagerInteractive } from '../lib/geometry_manager_interactive.js';
 type $$ComponentProps = {
-    geometryManager: GeometryManager;
-    width: number;
+    geometryManager: GeometryManagerInteractive;
 };
 declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "">;
 type Sidebar = ReturnType<typeof Sidebar>;

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

@@ -25,7 +25,7 @@
 
 <style>
 	.panel {
-		margin: 1em 0;
+		margin: 0;
 
 		.header {
 			background: none;
@@ -45,6 +45,7 @@
 			}
 
 			.chevron {
+				border-radius: 1em;
 				box-sizing: border-box;
 				display: block;
 				height: 1em;
@@ -52,7 +53,7 @@
 				padding: 0;
 				position: absolute;
 				right: 0.4em;
-				top: 0;
+				top: 0.05em;
 				width: 1em;
 
 				svg {
@@ -64,20 +65,26 @@
 					width: 100%;
 				}
 			}
+
+			&:focus {
+				outline: none;
+				.chevron {
+					outline: 1px solid var(--color-blue);
+					outline-offset: 2px;
+				}
+			}
 		}
 
 		.content {
 			box-sizing: border-box;
 			height: 0;
-			margin: var(--gap) 0;
+			margin: 0;
 			overflow: hidden;
 			padding: 0;
 		}
 	}
 
 	.open {
-		margin-bottom: 2em;
-
 		.header {
 			.chevron {
 				svg {
@@ -88,6 +95,7 @@
 
 		.content {
 			height: auto;
+			overflow: visible;
 		}
 	}
 

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

@@ -1,18 +1,22 @@
-import type { ElementPoint, SelectionNode, SelectionNodeUpdater } from './types.js';
+import type { SelectionNode, SelectionNodeUpdater } from './types.js';
+import type { GeoPoint } from '../utils/types.js';
 import type { GeometryManager } from '../geometry_manager.js';
 import type { StateElement } from '../state/types.js';
+import type { GeometryManagerInteractive } from '../geometry_manager_interactive.js';
 export declare abstract class AbstractElement {
     protected readonly canvas: HTMLElement;
     protected readonly map: maplibregl.Map;
     protected readonly source: maplibregl.GeoJSONSource;
     protected readonly slug: string;
     protected isSelected: boolean;
-    readonly manager: GeometryManager;
+    readonly manager: GeometryManager | GeometryManagerInteractive;
     readonly sourceId: string;
-    constructor(manager: GeometryManager);
+    constructor(manager: GeometryManager | GeometryManagerInteractive);
     select(value: boolean): void;
-    protected randomPositions(length: number): ElementPoint[];
+    protected randomPositions(length: number): GeoPoint[];
+    protected randomRadius(): number;
     delete(): void;
+    getGeoJSON(): GeoJSON.Feature;
     abstract destroy(): void;
     abstract getFeature(includeProperties?: boolean): GeoJSON.Feature;
     abstract getSelectionNodes(): SelectionNode[];

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

@@ -21,10 +21,10 @@ export class AbstractElement {
     }
     randomPositions(length) {
         const points = [];
+        const bounds = this.map.getBounds();
         for (let i = 0; i < length; i++) {
             const xr = Math.random() * 0.5 + 0.25;
             const yr = Math.random() * 0.5 + 0.25;
-            const bounds = this.map.getBounds();
             points.push([
                 (1 - xr) * bounds.getWest() + xr * bounds.getEast(),
                 (1 - yr) * bounds.getSouth() + yr * bounds.getNorth()
@@ -32,8 +32,17 @@ export class AbstractElement {
         }
         return points;
     }
+    randomRadius() {
+        const bounds = this.map.getBounds();
+        const width = bounds.getEast() - bounds.getWest();
+        const height = bounds.getNorth() - bounds.getSouth();
+        return Math.sqrt(width * height) * 10000;
+    }
     delete() {
         this.manager.removeElement(this);
         this.destroy();
     }
+    getGeoJSON() {
+        return this.getFeature(true);
+    }
 }

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

@@ -1,8 +1,9 @@
 import { AbstractElement } from './abstract.js';
 import type { GeometryManager } from '../geometry_manager.js';
-import type { ElementPath, SelectionNode, SelectionNodeUpdater } from './types.js';
+import type { SelectionNode, SelectionNodeUpdater } from './types.js';
+import type { GeoPath } from '../utils/types.js';
 export declare abstract class AbstractPathElement extends AbstractElement {
-    path: ElementPath;
+    path: GeoPath;
     protected readonly isLine: boolean;
     constructor(manager: GeometryManager, isLine: boolean);
     protected handleDrag(e: maplibregl.MapMouseEvent): void;

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

@@ -1,5 +1,5 @@
 import { AbstractElement } from './abstract.js';
-import { getMiddlePoint, lat2mercator, mercator2lat } from '../utils.js';
+import { getMiddlePoint, lat2mercator, mercator2lat } from '../utils/geometry.js';
 export class AbstractPathElement extends AbstractElement {
     path = [];
     isLine;
@@ -20,11 +20,14 @@ export class AbstractPathElement extends AbstractElement {
             x0 = lng;
             this.path = this.path.map(([x, y]) => [x + dx, mercator2lat(lat2mercator(y) + dy)]);
             this.source.setData(this.getFeature(false));
-            this.manager.drawSelectionNodes();
+            this.manager.selection?.updateSelectionNodes();
             e.preventDefault();
         };
         this.manager.map.on('mousemove', moveHandler);
-        this.manager.map.once('mouseup', () => this.manager.map.off('mousemove', moveHandler));
+        this.manager.map.once('mouseup', () => {
+            this.manager.map.off('mousemove', moveHandler);
+            this.manager.state?.log();
+        });
         e.preventDefault();
     }
     getSelectionNodes() {

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

@@ -0,0 +1,25 @@
+import type { GeometryManager } from '../geometry_manager.js';
+import type { SelectionNode, SelectionNodeUpdater } from './types.js';
+import type { GeoPoint } from '../utils/types.js';
+import { MapLayerFill } from '../map_layer/fill.js';
+import { MapLayerLine } from '../map_layer/line.js';
+import type { StateElementCircle } from '../state/types.js';
+import { AbstractElement } from './abstract.js';
+export declare class CircleElement extends AbstractElement {
+    readonly fillLayer: MapLayerFill;
+    readonly strokeLayer: MapLayerLine;
+    point: GeoPoint;
+    radius: number;
+    constructor(manager: GeometryManager, point?: GeoPoint, radius?: number);
+    getSelectionNodes(): SelectionNode[];
+    getSelectionNodeUpdater(properties?: Record<string, unknown>): SelectionNodeUpdater | undefined;
+    select(value: boolean): void;
+    getFeature(includeProperties?: boolean): GeoJSON.Feature<GeoJSON.Polygon>;
+    getGeoJSON(): GeoJSON.Feature<GeoJSON.Point>;
+    destroy(): void;
+    getState(): StateElementCircle;
+    static fromState(manager: GeometryManager, state: StateElementCircle): CircleElement;
+    static fromGeoJSON(manager: GeometryManager, feature: GeoJSON.Feature<GeoJSON.Point, {
+        radius: number;
+    }>): CircleElement;
+}

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

@@ -0,0 +1,118 @@
+import { MapLayerFill } from '../map_layer/fill.js';
+import { MapLayerLine } from '../map_layer/line.js';
+import { AbstractElement } from './abstract.js';
+import { circle, distance } from '../utils/geometry.js';
+export class CircleElement extends AbstractElement {
+    fillLayer;
+    strokeLayer;
+    point;
+    radius;
+    constructor(manager, point, radius) {
+        super(manager);
+        this.point = point ?? this.randomPositions(1)[0];
+        this.radius = radius ?? this.randomRadius();
+        this.fillLayer = new MapLayerFill(manager, 'fill' + this.slug, this.sourceId);
+        this.fillLayer.on('click', () => this.manager.selection?.selectElement(this));
+        this.strokeLayer = new MapLayerLine(manager, 'line' + this.slug, this.sourceId);
+        this.strokeLayer.on('click', () => this.manager.selection?.selectElement(this));
+        this.source.setData(this.getFeature());
+    }
+    getSelectionNodes() {
+        return [
+            { index: 0, coordinates: this.point },
+            ...circle(this.point, this.radius, 4).map((coordinates) => ({
+                index: 1,
+                transparent: true,
+                coordinates
+            }))
+        ];
+    }
+    getSelectionNodeUpdater(properties) {
+        if (properties == undefined)
+            return;
+        if (properties.index == 0) {
+            return {
+                update: (lng, lat) => {
+                    this.point[0] = lng;
+                    this.point[1] = lat;
+                    this.source.setData(this.getFeature(false));
+                },
+                delete: () => this.delete()
+            };
+        }
+        else {
+            return {
+                update: (lng, lat) => {
+                    this.radius = distance([lng, lat], this.point);
+                    this.source.setData(this.getFeature(false));
+                },
+                delete: () => this.delete()
+            };
+        }
+    }
+    select(value) {
+        super.select(value);
+        this.fillLayer.isSelected = value;
+        this.strokeLayer.isSelected = value;
+    }
+    getFeature(includeProperties = false) {
+        const coordinates = circle(this.point, this.radius, 72);
+        coordinates.push(coordinates[0]); // Close the circle
+        return {
+            type: 'Feature',
+            properties: includeProperties
+                ? {
+                    ...this.fillLayer.getGeoJSONProperties(),
+                    ...this.strokeLayer.getGeoJSONProperties(),
+                    'circle-center-x': this.point[0],
+                    'circle-center-y': this.point[1],
+                    'circle-radius': this.radius
+                }
+                : {},
+            geometry: { type: 'Polygon', coordinates: [coordinates] }
+        };
+    }
+    getGeoJSON() {
+        return {
+            type: 'Feature',
+            properties: {
+                ...this.fillLayer.getGeoJSONProperties(),
+                ...this.strokeLayer.getGeoJSONProperties(),
+                subType: 'Circle',
+                radius: this.radius
+            },
+            geometry: { type: 'Point', coordinates: this.point }
+        };
+    }
+    destroy() {
+        this.fillLayer.destroy();
+        this.strokeLayer.destroy();
+        this.map.removeSource(this.sourceId);
+    }
+    getState() {
+        return {
+            type: 'circle',
+            point: this.point,
+            radius: this.radius,
+            style: this.fillLayer.getState(),
+            strokeStyle: this.strokeLayer.getState()
+        };
+    }
+    static fromState(manager, state) {
+        const element = new CircleElement(manager, state.point, state.radius);
+        if (state.style)
+            element.fillLayer.setState(state.style);
+        if (state.strokeStyle)
+            element.strokeLayer.setState(state.strokeStyle);
+        return element;
+    }
+    static fromGeoJSON(manager, feature) {
+        const properties = feature.properties;
+        const center = feature.geometry.coordinates;
+        const radius = feature.properties.radius;
+        const element = new CircleElement(manager, center, radius);
+        element.fillLayer.setGeoJSONProperties(properties);
+        element.strokeLayer.setGeoJSONProperties(properties);
+        return element;
+    }
+}

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

@@ -1,11 +1,11 @@
 import type { GeometryManager } from '../geometry_manager.js';
-import type { ElementPath } from './types.js';
+import type { GeoPath } from '../utils/types.js';
 import { MapLayerLine } from '../map_layer/line.js';
 import { AbstractPathElement } from './abstract_path.js';
 import type { StateElementLine } from '../state/types.js';
 export declare class LineElement extends AbstractPathElement {
     readonly layer: MapLayerLine;
-    constructor(manager: GeometryManager, line?: ElementPath);
+    constructor(manager: GeometryManager, line?: GeoPath);
     select(value: boolean): void;
     getFeature(includeProperties?: boolean): GeoJSON.Feature<GeoJSON.LineString>;
     destroy(): void;

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

@@ -6,7 +6,7 @@ export class LineElement extends AbstractPathElement {
         super(manager, true);
         this.path = line ?? this.randomPositions(2);
         this.layer = new MapLayerLine(manager, 'line' + this.slug, this.sourceId);
-        this.layer.on('click', () => this.manager.selectElement(this));
+        this.layer.on('click', () => this.manager.selection?.selectElement(this));
         this.layer.on('mousedown', (e) => {
             if (!this.isSelected)
                 return;

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

@@ -1,12 +1,13 @@
 import { AbstractElement } from './abstract.js';
 import type { GeometryManager } from '../geometry_manager.js';
-import type { ElementPoint, SelectionNode, SelectionNodeUpdater } from './types.js';
+import type { SelectionNode, SelectionNodeUpdater } from './types.js';
 import { MapLayerSymbol } from '../map_layer/symbol.js';
 import type { StateElementMarker } from '../state/types.js';
+import type { GeoPoint } from '../utils/types.js';
 export declare class MarkerElement extends AbstractElement {
     readonly layer: MapLayerSymbol;
-    point: ElementPoint;
-    constructor(manager: GeometryManager, point?: ElementPoint);
+    point: GeoPoint;
+    constructor(manager: GeometryManager, point?: GeoPoint);
     select(value: boolean): void;
     getFeature(includeProperties?: boolean): GeoJSON.Feature<GeoJSON.Point>;
     getSelectionNodes(): SelectionNode[];

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

@@ -2,12 +2,12 @@ import { AbstractElement } from './abstract.js';
 import { MapLayerSymbol } from '../map_layer/symbol.js';
 export class MarkerElement extends AbstractElement {
     layer;
-    point = [0, 0];
+    point;
     constructor(manager, point) {
         super(manager);
         this.point = point ?? this.randomPositions(1)[0];
         this.layer = new MapLayerSymbol(manager, 'symbol' + this.slug, this.sourceId);
-        this.layer.on('click', () => this.manager.selectElement(this));
+        this.layer.on('click', () => this.manager.selection?.selectElement(this));
         this.source.setData(this.getFeature());
     }
     select(value) {

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

@@ -1,5 +1,5 @@
 import type { GeometryManager } from '../geometry_manager.js';
-import type { ElementPath } from './types.js';
+import type { GeoPath } from '../utils/types.js';
 import { MapLayerFill } from '../map_layer/fill.js';
 import { MapLayerLine } from '../map_layer/line.js';
 import { AbstractPathElement } from './abstract_path.js';
@@ -7,7 +7,7 @@ import type { StateElementPolygon } from '../state/types.js';
 export declare class PolygonElement extends AbstractPathElement {
     readonly fillLayer: MapLayerFill;
     readonly strokeLayer: MapLayerLine;
-    constructor(manager: GeometryManager, polygon?: ElementPath);
+    constructor(manager: GeometryManager, polygon?: GeoPath);
     select(value: boolean): void;
     getFeature(includeProperties?: boolean): GeoJSON.Feature<GeoJSON.Polygon>;
     destroy(): void;

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

@@ -8,14 +8,14 @@ export class PolygonElement extends AbstractPathElement {
         super(manager, false);
         this.path = polygon ?? this.randomPositions(3);
         this.fillLayer = new MapLayerFill(manager, 'fill' + this.slug, this.sourceId);
-        this.fillLayer.on('click', () => this.manager.selectElement(this));
+        this.fillLayer.on('click', () => this.manager.selection?.selectElement(this));
         this.fillLayer.on('mousedown', (e) => {
             if (!this.isSelected)
                 return;
             this.handleDrag(e);
         });
         this.strokeLayer = new MapLayerLine(manager, 'line' + this.slug, this.sourceId);
-        this.strokeLayer.on('click', () => this.manager.selectElement(this));
+        this.strokeLayer.on('click', () => this.manager.selection?.selectElement(this));
         this.source.setData(this.getFeature());
     }
     select(value) {

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

@@ -1,7 +1,6 @@
-export type ElementPoint = [number, number];
-export type ElementPath = ElementPoint[];
+import type { GeoPoint } from '../utils/types.js';
 export interface SelectionNode {
-    coordinates: ElementPoint;
+    coordinates: GeoPoint;
     index: number;
     transparent?: boolean;
 }