@versatiles/svelte 1.1.1 → 2.0.0

package/dist/components/BBoxMap/AutoComplete.svelte

@@ -1,4 +1,3 @@
-<!-- AutoComplete.svelte -->
 <script lang="ts" generics="T">
 	import { isDarkMode } from '../../utils/map_style.js';
 	/* eslint svelte/no-at-html-tags: off */

package/dist/components/BBoxMap/BBoxMap.svelte

@@ -1,4 +1,3 @@
-<!-- BBoxMap.svelte -->
 <script lang="ts">
 	import type { CameraOptions, Map as MaplibreMapType } from 'maplibre-gl';
 	import AutoComplete from './AutoComplete.svelte';
@@ -7,7 +6,7 @@
 	import { isDarkMode } from '../../utils/map_style.js';
 	import type { BBox } from 'geojson';
 	import { loadBBoxes } from './BBoxMap.js';
-	import { BBoxDrawer } from '../../utils/draw/bbox.js';
+	import { BBoxDrawer } from './lib/bbox.js';
 
 	let { selectedBBox = $bindable() }: { selectedBBox?: BBox } = $props();
 	const startTime = Date.now();

package/dist/{utils/draw → components/BBoxMap/lib}/bbox.d.ts

@@ -1,7 +1,7 @@
 import type geojson from 'geojson';
 import { type Writable } from 'svelte/store';
 import maplibregl from 'maplibre-gl';
-type DragPoint = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' | false;
+export type DragPoint = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' | false;
 export declare const DragPointMap: Map<DragPoint, {
     cursor: string;
     flipH: DragPoint;
@@ -27,4 +27,3 @@ export declare class BBoxDrawer {
     private getCursor;
     private doDrag;
 }
-export {};

package/dist/components/BasicMap/BasicMap.svelte

@@ -1,10 +1,8 @@
-<!-- BasicMap.svelte -->
 <script lang="ts">
-	import type { Map as MaplibreMapType, MapOptions } from 'maplibre-gl';
 	import 'maplibre-gl/dist/maplibre-gl.css';
 	import { getMapStyle, isDarkMode } from '../../utils/map_style.js';
 	import maplibre from 'maplibre-gl';
-	const { Map } = maplibre;
+	import type { MapOptions } from 'maplibre-gl';
 
 	// Props
 	let {
@@ -18,9 +16,9 @@
 		style?: string;
 		styleOptions?: Parameters<typeof getMapStyle>[1];
 		mapOptions?: Partial<MapOptions>;
-		map?: MaplibreMapType;
-		onMapInit?: (map: MaplibreMapType) => void;
-		onMapLoad?: (map: MaplibreMapType) => void;
+		map?: maplibre.Map;
+		onMapInit?: (map: maplibre.Map, maplibre: typeof import('maplibre-gl')) => void;
+		onMapLoad?: (map: maplibre.Map, maplibre: typeof import('maplibre-gl')) => void;
 	} = $props();
 
 	let container: HTMLDivElement;
@@ -40,7 +38,7 @@
 
 		const style = getMapStyle(darkMode, styleOptions);
 		style.transition = { duration: 0, delay: 0 };
-		map = new Map({
+		map = new maplibre.Map({
 			container,
 			style,
 			renderWorldCopies: false,
@@ -50,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

@@ -1,13 +1,14 @@
-import type { Map as MaplibreMapType, MapOptions } from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { getMapStyle } from '../../utils/map_style.js';
+import maplibre from 'maplibre-gl';
+import type { MapOptions } from 'maplibre-gl';
 type $$ComponentProps = {
     style?: string;
     styleOptions?: Parameters<typeof getMapStyle>[1];
     mapOptions?: Partial<MapOptions>;
-    map?: MaplibreMapType;
-    onMapInit?: (map: MaplibreMapType) => void;
-    onMapLoad?: (map: MaplibreMapType) => void;
+    map?: maplibre.Map;
+    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/LocatorMap/LocatorMap.svelte

@@ -1,4 +1,3 @@
-<!-- LocatorMap.svelte -->
 <script lang="ts">
 	import type { Map as MaplibreMapType, GeoJSONSource } from 'maplibre-gl';
 	import BasicMap from '../BasicMap/BasicMap.svelte';
@@ -10,7 +9,6 @@
 			let coordinates: [number, number] = [0, 0];
 			const initialHash = parseHash();
 			if (initialHash) {
-				console.log('initialHash', initialHash);
 				coordinates = [initialHash[1], initialHash[2]];
 				map.setZoom(initialHash[0]);
 				map.setCenter(coordinates);

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,48 +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();
-	let strokeVisible = $state(false);
+	const { element }: { element: AbstractElement | undefined } = $props();
 
-	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 />
+
+				<InputRow id="showStroke" label="Draw Outline">
+					<input id="showStroke" type="checkbox" bind:checked={$strokeVisible} />
+				</InputRow>
 
-	<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>
+				{#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}
 
-	{#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()} />
+<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 { MapLayerSymbol } from '../lib/map_layer/symbol.js';
+	import { labelPositions, MapLayerSymbol } from '../lib/map_layer/symbol.js';
+	import InputRow from './InputRow.svelte';
 	import SymbolSelector from './SymbolSelector.svelte';
 
 	const { layer }: { layer: MapLayerSymbol } = $props();
@@ -9,35 +10,38 @@
 	let rotate = $state(layer.rotate);
 	let halo = $state(layer.halo);
 	let label = $state(layer.label);
+	let labelAlign = $state(layer.labelAlign);
 	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>
+
+<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>
+</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;