@versatiles/svelte 1.1.2 → 2.0.0

package/dist/components/BasicMap/BasicMap.svelte

@@ -17,8 +17,8 @@
 		styleOptions?: Parameters<typeof getMapStyle>[1];
 		mapOptions?: Partial<MapOptions>;
 		map?: maplibre.Map;
-		onMapInit?: (map: maplibre.Map) => void;
-		onMapLoad?: (map: maplibre.Map) => void;
+		onMapInit?: (map: maplibre.Map, maplibre: typeof import('maplibre-gl')) => void;
+		onMapLoad?: (map: maplibre.Map, maplibre: typeof import('maplibre-gl')) => void;
 	} = $props();
 
 	let container: HTMLDivElement;
@@ -48,10 +48,10 @@
 			...mapOptions
 		});
 
-		if (onMapInit) onMapInit(map);
+		if (onMapInit) onMapInit(map, maplibre);
 
 		map.on('load', () => {
-			if (onMapLoad) onMapLoad(map!);
+			if (onMapLoad) onMapLoad(map!, maplibre);
 		});
 	}
 </script>

package/dist/components/BasicMap/BasicMap.svelte.d.ts

@@ -7,8 +7,8 @@ type $$ComponentProps = {
     styleOptions?: Parameters<typeof getMapStyle>[1];
     mapOptions?: Partial<MapOptions>;
     map?: maplibre.Map;
-    onMapInit?: (map: maplibre.Map) => void;
-    onMapLoad?: (map: maplibre.Map) => void;
+    onMapInit?: (map: maplibre.Map, maplibre: typeof import('maplibre-gl')) => void;
+    onMapLoad?: (map: maplibre.Map, maplibre: typeof import('maplibre-gl')) => void;
 };
 declare const BasicMap: import("svelte").Component<$$ComponentProps, {}, "map">;
 type BasicMap = ReturnType<typeof BasicMap>;

package/dist/components/MapEditor/MapEditor.svelte

@@ -15,25 +15,34 @@
 	let map: MaplibreMapType | undefined = $state();
 	let geometryManager: GeometryManager | undefined = $state();
 
-	function onMapInit(_map: MaplibreMapType) {
+	function onMapInit(_map: MaplibreMapType, maplibre: typeof import('maplibre-gl')) {
 		map = _map;
+		map.addControl(new maplibre.AttributionControl({ compact: true }), 'bottom-left');
+
 		map.on('load', async () => {
 			const { GeometryManager } = await import('./lib/geometry_manager.js');
 			geometryManager = new GeometryManager(map!);
+			const hash = location.hash.slice(1);
+			if (hash) geometryManager.state.setHash(hash);
+			addEventListener('hashchange', () => geometryManager!.state.setHash(location.hash.slice(1)));
 		});
 	}
 </script>
 
 <div class="page">
 	<div class="container">
-		<BasicMap {onMapInit} styleOptions={{ disableDarkMode: true }}></BasicMap>
+		<BasicMap
+			{onMapInit}
+			styleOptions={{ disableDarkMode: true }}
+			mapOptions={{ attributionControl: false }}
+		></BasicMap>
 	</div>
 	{#if showSidebar && geometryManager}
 		<Sidebar {geometryManager} width={200} />
 
 		<style>
 			.page .container {
-				width: calc(100% - 200px);
+				width: 100%;
 				position: absolute;
 				top: 0;
 				left: 0;
@@ -50,4 +59,8 @@
 		position: relative;
 		min-height: 6em;
 	}
+	:global(.maplibregl-ctrl-attrib) {
+		display: flex;
+		align-items: center;
+	}
 </style>

package/dist/components/MapEditor/components/Editor.svelte

@@ -6,49 +6,55 @@
 	import { LineElement } from '../lib/element/line.js';
 	import { MarkerElement } from '../lib/element/marker.js';
 	import { PolygonElement } from '../lib/element/polygon.js';
+	import InputRow from './InputRow.svelte';
+	import SidebarPanel from './SidebarPanel.svelte';
+	import { writable } from 'svelte/store';
 
-	const { element }: { element: AbstractElement } = $props();
+	const { element }: { element: AbstractElement | undefined } = $props();
 
-	let strokeVisible = $state(false);
-
-	if (element instanceof PolygonElement) {
-		element.strokeLayer.visible.subscribe((value) => (strokeVisible = value));
-	}
+	const noElement = $derived(!element);
+	const strokeVisible = $derived.by(() => {
+		if (element instanceof PolygonElement) return element.strokeLayer.visible;
+		return writable(false);
+	});
 </script>
 
-{#if element instanceof MarkerElement}
-	<h2>Marker</h2>
-	<EditorSymbol layer={element.layer} />
-{/if}
-{#if element instanceof LineElement}
-	<h2>Line Stroke</h2>
-	<EditorStroke layer={element.layer} />
-{/if}
-{#if element instanceof PolygonElement}
-	<h2>Polygon Fill</h2>
-	<EditorFill layer={element.fillLayer} />
-	<h2>Polygon Stroke</h2>
+{#key element}
+	<SidebarPanel title="Style" disabled={noElement}>
+		<div class="style-editor">
+			{#if element instanceof MarkerElement}
+				<EditorSymbol layer={element.layer} />
+			{/if}
+			{#if element instanceof LineElement}
+				<EditorStroke layer={element.layer} />
+			{/if}
+			{#if element instanceof PolygonElement}
+				<EditorFill layer={element.fillLayer} />
+				<hr />
 
-	<div class="row-input">
-		<label for="showStroke">Outline:</label>
-		<input
-			id="showStroke"
-			type="checkbox"
-			bind:checked={
-				() => strokeVisible, (v) => (element as PolygonElement).strokeLayer.visible.set(v)
-			}
-		/>
-	</div>
+				<InputRow id="showStroke" label="Draw Outline">
+					<input id="showStroke" type="checkbox" bind:checked={$strokeVisible} />
+				</InputRow>
 
-	{#if strokeVisible}
-		<EditorStroke layer={element.strokeLayer} />
-	{/if}
-{/if}
-{#if element instanceof PolygonElement || element instanceof LineElement}
-	<h2>Shape</h2>
-	<p>
-		Drag points to move.<br />Drag a midpoint to add.<br />Shift-click to delete a point.
-	</p>
-{/if}
-<h2>Actions</h2>
-<input type="button" value="Delete" onclick={() => element!.delete()} />
+				{#if $strokeVisible}
+					<EditorStroke layer={element.strokeLayer} />
+				{/if}
+			{/if}
+			{#if element instanceof PolygonElement || element instanceof LineElement}
+				<hr />
+				<p>
+					Drag points to move.<br />Drag a midpoint to add.<br />Shift-click to delete a point.
+				</p>
+			{/if}
+		</div>
+	</SidebarPanel>
+{/key}
+
+<style>
+	.style-editor {
+		:global(p) {
+			opacity: 0.5;
+			margin: 0.5em 0 1em;
+		}
+	}
+</style>

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

@@ -1,6 +1,6 @@
 import type { AbstractElement } from '../lib/element/abstract.js';
 type $$ComponentProps = {
-    element: AbstractElement;
+    element: AbstractElement | undefined;
 };
 declare const Editor: import("svelte").Component<$$ComponentProps, {}, "">;
 type Editor = ReturnType<typeof Editor>;

package/dist/components/MapEditor/components/EditorFill.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { fillPatterns, type MapLayerFill } from '../lib/map_layer/fill.js';
+	import InputRow from './InputRow.svelte';
 
 	const { layer }: { layer: MapLayerFill } = $props();
 
@@ -8,21 +9,18 @@
 	let opacity = $state(layer.opacity);
 </script>
 
-<div class="row-input">
-	<label for="color">Color:</label>
+<InputRow label="Color" id="color">
 	<input id="color" type="color" bind:value={$color} />
-</div>
+</InputRow>
 
-<div class="row-input">
-	<label for="pattern">Pattern:</label>
+<InputRow label="Pattern" id="pattern">
 	<select id="pattern" bind:value={$pattern}>
 		{#each fillPatterns as [index, fill] (index)}
 			<option value={index}>{fill.name}</option>
 		{/each}
 	</select>
-</div>
+</InputRow>
 
-<div class="row-input">
-	<label for="opacity">Opacity:</label>
+<InputRow label="Opacity" id="opacity">
 	<input id="opacity" type="range" min="0" max="1" step="0.02" bind:value={$opacity} />
-</div>
+</InputRow>

package/dist/components/MapEditor/components/EditorStroke.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { dashArrays, MapLayerLine } from '../lib/map_layer/line.js';
+	import InputRow from './InputRow.svelte';
 
 	const { layer }: { layer: MapLayerLine } = $props();
 
@@ -8,21 +9,18 @@
 	let dashed = $state(layer.dashed);
 </script>
 
-<div class="row-input">
-	<label for="dashed">Dashed:</label>
+<InputRow id="color" label="Color">
+	<input id="color" type="color" bind:value={$color} />
+</InputRow>
+
+<InputRow id="dashed" label="Dashed">
 	<select id="dashed" bind:value={$dashed}>
 		{#each dashArrays as [index, dash] (index)}
 			<option value={index}>{dash.name}</option>
 		{/each}
 	</select>
-</div>
-
-<div class="row-input">
-	<label for="color">Color:</label>
-	<input id="color" type="color" bind:value={$color} />
-</div>
+</InputRow>
 
-<div class="row-input">
-	<label for="width">Width:</label>
+<InputRow id="width" label="Width">
 	<input id="width" type="range" min="0.5" max="5" step="0.5" bind:value={$width} />
-</div>
+</InputRow>

package/dist/components/MapEditor/components/EditorSymbol.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { labelPositions, MapLayerSymbol } from '../lib/map_layer/symbol.js';
+	import InputRow from './InputRow.svelte';
 	import SymbolSelector from './SymbolSelector.svelte';
 
 	const { layer }: { layer: MapLayerSymbol } = $props();
@@ -13,41 +14,34 @@
 	let size = $state(layer.size);
 </script>
 
-<div class="row-input">
-	<div class="label">Symbol:</div>
+<InputRow id="label" label="Symbol">
 	<SymbolSelector bind:symbolIndex={$symbolIndex} symbolLibrary={layer.manager.symbolLibrary} />
-</div>
+</InputRow>
 
-<div class="row-input">
-	<label for="color">Color:</label>
+<InputRow id="color" label="Color">
 	<input id="color" type="color" bind:value={$color} />
-</div>
+</InputRow>
 
-<div class="row-input">
-	<label for="size">Size:</label>
+<InputRow id="size" label="Size">
 	<input id="size" type="range" min="0.5" max="3" step="0.1" bind:value={$size} />
-</div>
+</InputRow>
 
-<div class="row-input">
-	<label for="rotate">Rotation:</label>
+<InputRow id="rotate" label="Rotation">
 	<input id="rotate" type="range" min="-180" max="180" step="15" bind:value={$rotate} />
-</div>
+</InputRow>
 
-<div class="row-input">
-	<label for="halo">Halo:</label>
+<InputRow id="halo" label="Halo">
 	<input id="halo" type="range" min="0" max="3" step="0.5" bind:value={$halo} />
-</div>
+</InputRow>
 
-<div class="row-input">
-	<label for="label">Label:</label>
+<InputRow id="label" label="Label">
 	<input id="label" type="label" bind:value={$label} />
-</div>
+</InputRow>
 
-<div class="row-input">
-	<label for="labelAlign">Align Label:</label>
+<InputRow id="labelAlign" label="Align Label">
 	<select id="labelAlign" bind:value={$labelAlign}>
 		{#each labelPositions as { index, name } (index)}
 			<option value={index}>{name}</option>
 		{/each}
 	</select>
-</div>
+</InputRow>

package/dist/components/MapEditor/components/InputRow.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	const { children, label, id }: { children: Snippet; label: string; id: string } = $props();
+</script>
+
+<div class="row">
+	<label for={id}>{label}</label>
+	{@render children()}
+</div>
+
+<style>
+	.row {
+		margin: var(--gap) 0 var(--gap);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		color: var(--fg-color);
+		& > :global(label) {
+			flex-grow: 0;
+			opacity: 0.5;
+		}
+		& > :global(button),
+		& > :global(input),
+		& > :global(select) {
+			box-sizing: border-box;
+			width: 60%;
+			flex-grow: 0;
+		}
+		& > :global(input[type='checkbox']) {
+			width: auto;
+		}
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    label: string;
+    id: string;
+};
+declare const InputRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type InputRow = ReturnType<typeof InputRow>;
+export default InputRow;

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

@@ -1,9 +1,13 @@
 <script lang="ts">
 	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 history = geometryManager.state;
+	let undoEnabled = $state(geometryManager.state.undoEnabled);
+	let redoEnabled = $state(geometryManager.state.redoEnabled);
 	let activeElement = geometryManager.selectedElement;
 
 	function importGeoJSON() {
@@ -41,137 +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.set(geometryManager.addNewMarker())}
-			/>
-			<input
-				type="button"
-				value="Line"
-				onclick={() => activeElement.set(geometryManager.addNewLine())}
-			/>
-			<input
-				type="button"
-				value="Polygon"
-				onclick={() => activeElement.set(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 />
-			{#key $activeElement}
-				<Editor element={$activeElement} />
-			{/key}
-		{/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>