@versatiles/svelte 1.1.1 → 2.0.0

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

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import type { AbstractElement } from '../lib/element/abstract.js';
 	import Editor from './Editor.svelte';
 	import type { GeometryManager } from '../lib/geometry_manager.js';
+	import SidebarPanel from './SidebarPanel.svelte';
 
 	const { geometryManager, width }: { geometryManager: GeometryManager; width: number } = $props();
 
-	let activeElement: AbstractElement | undefined = $state(undefined);
-	$effect(() => geometryManager.selectElement(activeElement));
-
-	geometryManager.selectedElement.subscribe((value) => (activeElement = value));
+	let history = geometryManager.state;
+	let undoEnabled = $state(geometryManager.state.undoEnabled);
+	let redoEnabled = $state(geometryManager.state.redoEnabled);
+	let activeElement = geometryManager.selectedElement;
 
 	function importGeoJSON() {
 		const input = document.createElement('input');
@@ -45,135 +45,140 @@
 		a.click();
 		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.')
+		);
+	}
 </script>
 
-<div class="sidebar" style="--gap: 10px;width: {width}px;">
-	<div style="min-height: calc(100vh - 2em);">
-		<div class="label">GeoJSON:</div>
-		<div class="row-flex">
-			<input type="button" value="Import" onclick={importGeoJSON} />
-			<input type="button" value="Export" onclick={exportGeoJSON} />
-		</div>
-		<hr />
-		<div class="label">Add new:</div>
-		<div class="row-flex">
-			<input
-				type="button"
-				value="Marker"
-				onclick={() => (activeElement = geometryManager.addNewMarker())}
-			/>
-			<input
-				type="button"
-				value="Line"
-				onclick={() => (activeElement = geometryManager.addNewLine())}
-			/>
-			<input
-				type="button"
-				value="Polygon"
-				onclick={() => (activeElement = geometryManager.addNewPolygon())}
-			/>
+<div class="sidebar" style="width: {width}px;">
+	<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>
-		{#if activeElement != null}
-			<hr />
-			<Editor element={activeElement} />
-		{/if}
-	</div>
-	<div class="footer">
-		<a href="https://github.com/versatiles-org/node-versatiles-svelte/issues" target="_blank">
-			Add a GitHub issue.</a
-		>
+		<SidebarPanel title="Share map" open={false}>
+			<div class="flex flex-one">
+				<button value="Link" onclick={copyLink}>Link</button>
+				<button onclick={copyEmbedCode}>Embed Code</button>
+			</div>
+		</SidebarPanel>
+		<SidebarPanel title="Import/Export" open={false}>
+			<div class="flex flex-one">
+				<button onclick={importGeoJSON}>Import GeoJSON</button>
+				<button onclick={exportGeoJSON}>Export GeoJSON</button>
+			</div>
+		</SidebarPanel>
+		<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>
+		</SidebarPanel>
+		<Editor element={$activeElement} />
+		<SidebarPanel title="Actions" disabled={!$activeElement}>
+			<div class="flex flex-two">
+				<button onclick={() => $activeElement!.delete()}>Delete</button>
+			</div>
+		</SidebarPanel>
+		<SidebarPanel title="Help">
+			<a
+				id="github_link"
+				href="https://github.com/versatiles-org/node-versatiles-svelte/issues"
+				target="_blank"
+				aria-label="Repository on GitHub">Report Bugs and Feature Requests as GitHub Issues</a
+			>
+		</SidebarPanel>
 	</div>
 </div>
 
 <style>
 	.sidebar {
-		width: 200px;
+		--color-btn: #336680;
+		--color-bg: #ffffff;
+		--color-text: #000000;
+		--gap: 10px;
+
+		background-color: rgb(from var(--color-bg) r g b/ 0.7);
+		backdrop-filter: blur(10px);
+		box-sizing: border-box;
+		color: var(--color-text);
+		font-size: 0.8em;
 		height: 100%;
+		overflow-y: scroll;
+		padding: var(--gap);
 		position: absolute;
-		top: 0;
 		right: 0;
-		background-color: #eee;
-		overflow-y: scroll;
-		box-sizing: border-box;
-		padding: 0.5em var(--gap) 0;
-		border-left: 0.5px solid rgba(0, 0, 0, 0.5);
-
-		hr {
-			border: none;
-			border-top: 0.5px solid rgba(0, 0, 0, 1);
-			margin: var(--gap) 0 var(--gap);
-		}
-
-		:global(h2) {
-			font-size: 0.9em;
-			font-weight: normal;
-			opacity: 0.5;
-			padding-top: var(--gap);
-			border-top: 0.5px solid rgba(0, 0, 0, 1);
-			margin: var(--gap) 0 var(--gap);
-			text-align: center;
-		}
+		top: 0;
+		width: 200px;
 
-		:global(.row-flex) {
-			margin-bottom: var(--gap);
+		.flex {
+			--gap: 5px;
+			align-items: center;
 			display: flex;
+			flex-wrap: wrap;
+			gap: var(--gap);
 			justify-content: space-between;
-			column-gap: var(--gap);
-			:global(input) {
-				flex-grow: 0;
-			}
-		}
-
-		:global(.row-input) {
 			margin: var(--gap) 0 var(--gap);
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			& > :global(label) {
-				flex-grow: 0;
-			}
-			& > :global(button),
-			& > :global(input),
-			& > :global(select) {
-				width: 60%;
-				flex-grow: 0;
-			}
-			& > :global(input[type='checkbox']) {
-				width: auto;
-			}
+			width: 100%;
 		}
-
-		:global(label),
-		:global(.label) {
-			opacity: 0.7;
-			font-size: 0.8em;
+		.flex-two button {
+			flex-grow: 1;
+			flex-basis: 0;
+			width: 40%;
 		}
 
-		:global(button),
-		:global(input),
-		:global(select) {
+		.flex-one button {
 			width: 100%;
-			box-sizing: border-box;
-			margin: 0;
 		}
 
-		:global(p) {
-			font-size: 0.8em;
-			opacity: 0.5;
-			margin: 0.5em 0 1em;
+		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;
+			}
 		}
+	}
 
-		.footer {
-			text-align: right;
-			font-size: 0.8em;
-			a {
-				color: #000;
-				text-decoration: none;
-				opacity: 0.3;
-				&:hover {
-					opacity: 1;
-				}
-			}
+	a {
+		text-decoration: none;
+		color: var(--fg-color);
+		&:hover {
+			text-decoration: underline;
 		}
 	}
 </style>

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