@versatiles/svelte 1.1.2 → 2.0.1

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,65 @@
 	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,
+							(visible) => {
+								$strokeVisible = visible;
+								element.manager.state.log();
+							}
+						}
+					/>
+				</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,50 @@
 	let opacity = $state(layer.opacity);
 </script>
 
-<div class="row-input">
-	<label for="color">Color:</label>
-	<input id="color" type="color" bind:value={$color} />
-</div>
+<InputRow label="Color" id="color">
+	<input
+		id="color"
+		type="color"
+		bind:value={
+			() => $color,
+			(v) => {
+				$color = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
+</InputRow>
 
-<div class="row-input">
-	<label for="pattern">Pattern:</label>
-	<select id="pattern" bind:value={$pattern}>
+<InputRow label="Pattern" id="pattern">
+	<select
+		id="pattern"
+		bind:value={
+			() => $pattern,
+			(v) => {
+				$pattern = v;
+				layer.manager.state.log();
+			}
+		}
+	>
 		{#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>
-	<input id="opacity" type="range" min="0" max="1" step="0.02" bind:value={$opacity} />
-</div>
+<InputRow label="Opacity" id="opacity">
+	<input
+		id="opacity"
+		type="range"
+		min="0"
+		max="1"
+		step="0.02"
+		bind:value={
+			() => $opacity,
+			(v) => {
+				$opacity = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
+</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,50 @@
 	let dashed = $state(layer.dashed);
 </script>
 
-<div class="row-input">
-	<label for="dashed">Dashed:</label>
-	<select id="dashed" bind:value={$dashed}>
+<InputRow id="color" label="Color">
+	<input
+		id="color"
+		type="color"
+		bind:value={
+			() => $color,
+			(v) => {
+				$color = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
+</InputRow>
+
+<InputRow id="dashed" label="Dashed">
+	<select
+		id="dashed"
+		bind:value={
+			() => $dashed,
+			(v) => {
+				$dashed = v;
+				layer.manager.state.log();
+			}
+		}
+	>
 		{#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>
-	<input id="width" type="range" min="0.5" max="5" step="0.5" bind:value={$width} />
-</div>
+<InputRow id="width" label="Width">
+	<input
+		id="width"
+		type="range"
+		min="0.5"
+		max="5"
+		step="0.5"
+		bind:value={
+			() => $width,
+			(v) => {
+				$width = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
+</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,111 @@
 	let size = $state(layer.size);
 </script>
 
-<div class="row-input">
-	<div class="label">Symbol:</div>
-	<SymbolSelector bind:symbolIndex={$symbolIndex} symbolLibrary={layer.manager.symbolLibrary} />
-</div>
-
-<div class="row-input">
-	<label for="color">Color:</label>
-	<input id="color" type="color" bind:value={$color} />
-</div>
-
-<div class="row-input">
-	<label for="size">Size:</label>
-	<input id="size" type="range" min="0.5" max="3" step="0.1" bind:value={$size} />
-</div>
-
-<div class="row-input">
-	<label for="rotate">Rotation:</label>
-	<input id="rotate" type="range" min="-180" max="180" step="15" bind:value={$rotate} />
-</div>
-
-<div class="row-input">
-	<label for="halo">Halo:</label>
-	<input id="halo" type="range" min="0" max="3" step="0.5" bind:value={$halo} />
-</div>
-
-<div class="row-input">
-	<label for="label">Label:</label>
-	<input id="label" type="label" bind:value={$label} />
-</div>
-
-<div class="row-input">
-	<label for="labelAlign">Align Label:</label>
-	<select id="labelAlign" bind:value={$labelAlign}>
+<InputRow id="label" label="Symbol">
+	<SymbolSelector
+		bind:symbolIndex={
+			() => $symbolIndex,
+			(v) => {
+				$symbolIndex = v;
+				layer.manager.state.log();
+			}
+		}
+		symbolLibrary={layer.manager.symbolLibrary}
+	/>
+</InputRow>
+
+<InputRow id="color" label="Color">
+	<input
+		id="color"
+		type="color"
+		bind:value={
+			() => $color,
+			(v) => {
+				$color = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
+</InputRow>
+
+<InputRow id="size" label="Size">
+	<input
+		id="size"
+		type="range"
+		min="0.5"
+		max="3"
+		step="0.1"
+		bind:value={
+			() => $size,
+			(v) => {
+				$size = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
+</InputRow>
+
+<InputRow id="rotate" label="Rotation">
+	<input
+		id="rotate"
+		type="range"
+		min="-180"
+		max="180"
+		step="15"
+		bind:value={
+			() => $rotate,
+			(v) => {
+				$rotate = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
+</InputRow>
+
+<InputRow id="halo" label="Halo">
+	<input
+		id="halo"
+		type="range"
+		min="0"
+		max="3"
+		step="0.5"
+		bind:value={
+			() => $halo,
+			(v) => {
+				$halo = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
+</InputRow>
+
+<InputRow id="label" label="Label">
+	<input
+		id="label"
+		type="label"
+		bind:value={
+			() => $label,
+			(v) => {
+				$label = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
+</InputRow>
+
+<InputRow id="labelAlign" label="Align Label">
+	<select
+		id="labelAlign"
+		bind:value={
+			() => $labelAlign,
+			(v) => {
+				$labelAlign = v;
+				layer.manager.state.log();
+			}
+		}
+	>
 		{#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;