@versatiles/svelte 2.0.1 → 2.1.1

package/dist/components/MapEditor/components/DialogShare.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+	import type { StateManager } from '../lib/state/manager.js';
+	import Dialog from './Dialog.svelte';
+
+	const { state: stateManager = $bindable() }: { state: StateManager } = $props();
+
+	let dialog: Dialog | undefined;
+	let iframe: HTMLIFrameElement | undefined;
+	let btnLink: HTMLButtonElement | undefined;
+	let btnEmbed: HTMLButtonElement | undefined;
+	let previewAspectRatio: 'wide' | 'square' | 'tall' = $state('wide');
+
+	const baseUrl = window.location.href.replace(/#.*$/, '');
+
+	let timeout: ReturnType<typeof setTimeout> | null = null;
+	let linkCode = $state('');
+	let embedCode = $state('');
+
+	export function open() {
+		dialog?.open();
+		update(1);
+	}
+
+	function getLinkCode() {
+		return `${baseUrl}#${stateManager.getHash()}`;
+	}
+
+	function getEmbedCode() {
+		return `<iframe src="${getLinkCode()}" style="width:100%; height:60vh" frameborder="0"></iframe>`;
+	}
+
+	function update(delay: number = 500) {
+		if (!dialog?.isOpen()) return;
+		linkCode = getLinkCode();
+		embedCode = getEmbedCode();
+		if (timeout != null) {
+			clearTimeout(timeout);
+			timeout = null;
+		}
+		timeout = setTimeout(() => {
+			if (!iframe) return;
+			if (iframe.src === linkCode) {
+				iframe.contentWindow?.location.reload();
+			} else {
+				iframe.src = getLinkCode();
+			}
+		}, delay);
+	}
+
+	export function close() {
+		dialog?.close();
+	}
+
+	function copyLink() {
+		navigator.clipboard.writeText(getLinkCode()).then(
+			() => flash(btnLink),
+			() => alert('Failed to copy link. Please try again.')
+		);
+	}
+
+	function copyEmbedCode() {
+		navigator.clipboard.writeText(getEmbedCode()).then(
+			() => flash(btnEmbed),
+			() => alert('Failed to copy embed code. Please try again.')
+		);
+	}
+
+	function flash(b?: HTMLButtonElement) {
+		if (!b) return;
+		b.classList.add('success');
+		setTimeout(() => b.classList.remove('success'), 2000);
+	}
+
+	function selectPreview(event: Event) {
+		const target = event.target as HTMLInputElement;
+		if (target.checked) {
+			previewAspectRatio = target.value as 'wide' | 'square' | 'tall';
+			setTimeout(() => iframe?.contentWindow?.location.reload(), 0);
+		}
+	}
+</script>
+
+<Dialog bind:this={dialog} size="fullscreen">
+	<div class="grid">
+		<div class="head">
+			<p>Share your map with others by copying the link or embed code below.</p>
+		</div>
+		<div class="left">
+			<iframe title="preview" bind:this={iframe} class={'aspect-' + previewAspectRatio}></iframe>
+		</div>
+		<div class="right">
+			<p>
+				<label for="text-link">
+					Link:
+					<textarea id="text-link" rows="3" readonly onclick={(e) => e.currentTarget.select()}>{linkCode}</textarea>
+				</label>
+				<button class="btn" bind:this={btnLink} onclick={copyLink}>Copy Link</button>
+			</p>
+			<p>
+				<label for="text-iframe">
+					Embed Code:
+					<textarea id="text-iframe" rows="5" readonly onclick={(e) => e.currentTarget.select()}>{embedCode}</textarea>
+				</label>
+
+				<button class="btn" bind:this={btnEmbed} onclick={copyEmbedCode}>Copy Embed Code</button>
+			</p>
+		</div>
+		<div class="bottom">
+			<button class="btn" onclick={() => update(0)}>Reload</button>
+			<fieldset class="btn">
+				<legend>Aspect ratio of the preview</legend>
+				<div>
+					<input type="radio" id="preview-wide" name="preview-ratio" value="wide" onclick={selectPreview} checked />
+					<label for="preview-wide">horizontal</label>
+					<input type="radio" id="preview-square" name="preview-ratio" value="square" onclick={selectPreview} />
+					<label for="preview-square">square</label>
+					<input type="radio" id="preview-tall" name="preview-ratio" value="tall" onclick={selectPreview} />
+					<label for="preview-tall">vertical</label>
+				</div>
+			</fieldset>
+		</div>
+	</div>
+</Dialog>
+
+<style>
+	.grid {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		grid-template-rows: auto 1fr auto;
+		gap: 10px;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+
+		.head {
+			grid-column: 1 / -1;
+			grid-row: 1 / 1;
+			text-align: center;
+			font-size: 1.2em;
+			margin-bottom: 20px;
+		}
+
+		.left {
+			grid-column: 1 / 2;
+			grid-row: 2 / 2;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			container-name: myContainer;
+			container-type: size;
+
+			iframe {
+				aspect-ratio: 16 / 9;
+				width: 100%;
+				height: auto;
+				border: 1px solid #000;
+				box-sizing: border-box;
+				background: #fff;
+
+				@container myContainer (min-aspect-ratio: 16 / 9) {
+					& {
+						width: auto;
+						height: 100%;
+					}
+				}
+			}
+
+			iframe.aspect-tall {
+				aspect-ratio: 9 / 16;
+				@container myContainer (min-aspect-ratio: 9 / 16) {
+					& {
+						width: auto;
+						height: 100%;
+					}
+				}
+			}
+
+			iframe.aspect-square {
+				aspect-ratio: 1/1;
+				@container myContainer (min-aspect-ratio: 1/1) {
+					& {
+						width: auto;
+						height: 100%;
+					}
+				}
+			}
+		}
+
+		.right {
+			grid-column: 2 / -1;
+			grid-row: 2 / -1;
+			text-align: left;
+
+			textarea {
+				width: 200px;
+				margin: 0 0 0.3rem;
+				display: block;
+				resize: none;
+			}
+
+			textarea[readonly] {
+				font-size: 0.6rem;
+				-webkit-user-select: all;
+				user-select: all;
+				color: color-mix(in srgb, var(--color-text) 60%, transparent);
+			}
+		}
+
+		.bottom {
+			grid-column: 1 / 1;
+			grid-row: 3 / 3;
+			text-align: center;
+			padding-top: 1rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { StateManager } from '../lib/state/manager.js';
+type $$ComponentProps = {
+    state: StateManager;
+};
+declare const DialogShare: import("svelte").Component<$$ComponentProps, {
+    open: () => void;
+    close: () => void;
+}, "state">;
+type DialogShare = ReturnType<typeof DialogShare>;
+export default DialogShare;

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

@@ -9,12 +9,13 @@
 	import InputRow from './InputRow.svelte';
 	import SidebarPanel from './SidebarPanel.svelte';
 	import { writable } from 'svelte/store';
+	import { CircleElement } from '../lib/element/circle.js';
 
 	const { element }: { element: AbstractElement | undefined } = $props();
 
 	const noElement = $derived(!element);
 	const strokeVisible = $derived.by(() => {
-		if (element instanceof PolygonElement) return element.strokeLayer.visible;
+		if (element instanceof PolygonElement || element instanceof CircleElement) return element.strokeLayer.visible;
 		return writable(false);
 	});
 </script>
@@ -28,7 +29,7 @@
 			{#if element instanceof LineElement}
 				<EditorStroke layer={element.layer} />
 			{/if}
-			{#if element instanceof PolygonElement}
+			{#if element instanceof PolygonElement || element instanceof CircleElement}
 				<EditorFill layer={element.fillLayer} />
 				<hr />
 
@@ -40,7 +41,7 @@
 							() => $strokeVisible,
 							(visible) => {
 								$strokeVisible = visible;
-								element.manager.state.log();
+								element.manager.state?.log();
 							}
 						}
 					/>
@@ -50,21 +51,12 @@
 					<EditorStroke layer={element.strokeLayer} />
 				{/if}
 			{/if}
-			{#if element instanceof PolygonElement || element instanceof LineElement}
+			{#if element instanceof LineElement || element instanceof PolygonElement || element instanceof CircleElement}
 				<hr />
-				<p>
+				<p class="label" style="margin: 0.5em 0 1em;">
 					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/EditorFill.svelte

@@ -17,7 +17,7 @@
 			() => $color,
 			(v) => {
 				$color = v;
-				layer.manager.state.log();
+				layer.manager.state?.log();
 			}
 		}
 	/>
@@ -30,7 +30,7 @@
 			() => $pattern,
 			(v) => {
 				$pattern = v;
-				layer.manager.state.log();
+				layer.manager.state?.log();
 			}
 		}
 	>
@@ -51,7 +51,7 @@
 			() => $opacity,
 			(v) => {
 				$opacity = v;
-				layer.manager.state.log();
+				layer.manager.state?.log();
 			}
 		}
 	/>

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

@@ -17,7 +17,7 @@
 			() => $color,
 			(v) => {
 				$color = v;
-				layer.manager.state.log();
+				layer.manager.state?.log();
 			}
 		}
 	/>
@@ -30,7 +30,7 @@
 			() => $dashed,
 			(v) => {
 				$dashed = v;
-				layer.manager.state.log();
+				layer.manager.state?.log();
 			}
 		}
 	>
@@ -51,7 +51,7 @@
 			() => $width,
 			(v) => {
 				$width = v;
-				layer.manager.state.log();
+				layer.manager.state?.log();
 			}
 		}
 	/>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { labelPositions, MapLayerSymbol } from '../lib/map_layer/symbol.js';
 	import InputRow from './InputRow.svelte';
-	import SymbolSelector from './SymbolSelector.svelte';
+	import SymbolSelector from './PanelSymbolSelector.svelte';
 
 	const { layer }: { layer: MapLayerSymbol } = $props();
 
@@ -20,10 +20,10 @@
 			() => $symbolIndex,
 			(v) => {
 				$symbolIndex = v;
-				layer.manager.state.log();
+				layer.manager.state?.log();
 			}
 		}
-		symbolLibrary={layer.manager.symbolLibrary}
+		map={layer.manager.map}
 	/>
 </InputRow>
 
@@ -35,7 +35,7 @@
 			() => $color,
 			(v) => {
 				$color = v;
-				layer.manager.state.log();
+				layer.manager.state?.log();
 			}
 		}
 	/>
@@ -52,7 +52,7 @@
 			() => $size,
 			(v) => {
 				$size = v;
-				layer.manager.state.log();
+				layer.manager.state?.log();
 			}
 		}
 	/>
@@ -69,7 +69,7 @@
 			() => $rotate,
 			(v) => {
 				$rotate = v;
-				layer.manager.state.log();
+				layer.manager.state?.log();
 			}
 		}
 	/>
@@ -86,7 +86,7 @@
 			() => $halo,
 			(v) => {
 				$halo = v;
-				layer.manager.state.log();
+				layer.manager.state?.log();
 			}
 		}
 	/>
@@ -100,7 +100,7 @@
 			() => $label,
 			(v) => {
 				$label = v;
-				layer.manager.state.log();
+				layer.manager.state?.log();
 			}
 		}
 	/>
@@ -113,7 +113,7 @@
 			() => $labelAlign,
 			(v) => {
 				$labelAlign = v;
-				layer.manager.state.log();
+				layer.manager.state?.log();
 			}
 		}
 	>

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

@@ -5,7 +5,7 @@
 </script>
 
 <div class="row">
-	<label for={id}>{label}</label>
+	<label class="label" for={id}>{label}</label>
 	{@render children()}
 </div>
 
@@ -16,9 +16,8 @@
 		justify-content: space-between;
 		align-items: center;
 		color: var(--fg-color);
-		& > :global(label) {
+		& > label {
 			flex-grow: 0;
-			opacity: 0.5;
 		}
 		& > :global(button),
 		& > :global(input),

package/dist/components/MapEditor/components/PanelFile.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { GeometryManagerInteractive } from '../lib/geometry_manager_interactive.js';
+	import Dialog from './DialogFile.svelte';
+
+	const { manager }: { manager: GeometryManagerInteractive } = $props();
+
+	const defaultFilename = 'default.mapjson';
+	let filename = defaultFilename;
+	const useFileAPI = false;
+	let dialog: Dialog | undefined = undefined;
+	const disabledSave = $state(false);
+
+	async function newFile(): Promise<void> {
+		if (!(await dialog?.askCreateNew())) return;
+		manager.clear();
+		filename = defaultFilename;
+	}
+
+	async function openFile(): Promise<void> {
+		if (!dialog) return;
+
+		const fileInput = document.createElement('input');
+		fileInput.type = 'file';
+		fileInput.accept = '.mapjson';
+		fileInput.onchange = async (event: Event) => {
+			const target = event.target as HTMLInputElement;
+			if (!target.files || target.files.length === 0) return;
+			const file = target.files[0];
+			filename = file.name;
+			const reader = new FileReader();
+			reader.onload = () => {
+				manager.loadState(JSON.parse(reader.result as string));
+			};
+			reader.readAsText(file);
+		};
+		fileInput.click();
+	}
+
+	async function saveFile(): Promise<void> {}
+
+	async function downloadFile(): Promise<void> {
+		if (!dialog) return;
+		const response = await dialog.askDownloadFilename(filename);
+		if (!response) return;
+		filename = response;
+
+		const state = manager.getState();
+		const blob = new Blob([JSON.stringify(state)], { type: 'application/json' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.setAttribute('href', url);
+		a.setAttribute('download', filename);
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+	async function saveFileAs(): Promise<void> {}
+</script>
+
+<div class="grid2">
+	<button class="btn" onclick={newFile}>New</button>
+	<button class="btn" onclick={openFile}>Open…</button>
+</div>
+<Dialog bind:this={dialog} />
+{#if useFileAPI}
+	<div class="grid2">
+		<button class="btn" onclick={saveFile} disabled={disabledSave}>Save</button>
+		<button class="btn" onclick={saveFileAs}>Save As…</button>
+	</div>
+{:else}
+	<div class="grid1">
+		<button class="btn" onclick={downloadFile}>Download</button>
+	</div>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { GeometryManagerInteractive } from '../lib/geometry_manager_interactive.js';
+type $$ComponentProps = {
+    manager: GeometryManagerInteractive;
+};
+declare const PanelFile: import("svelte").Component<$$ComponentProps, {}, "">;
+type PanelFile = ReturnType<typeof PanelFile>;
+export default PanelFile;

package/dist/components/MapEditor/components/PanelSymbolSelector.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { Action } from 'svelte/action';
+	import type { Map as MaplibreMap } from 'maplibre-gl';
+	import { SymbolLibrary } from '../lib/symbols.js';
+	import Dialog from './Dialog.svelte';
+
+	let dialog: Dialog;
+	const buttonIconSize = 20;
+	const listItemSize = 48;
+	const listIconSize = 32;
+	const retina = window.devicePixelRatio || 1;
+
+	let { symbolIndex = $bindable(), map }: { symbolIndex: number; map: MaplibreMap } = $props();
+
+	const symbolLibrary = new SymbolLibrary(map);
+
+	const drawIconHalo: Action<HTMLCanvasElement, number> = (canvas, index) => symbolLibrary.drawSymbol(canvas, index, 3);
+
+	const drawIcon: Action<HTMLCanvasElement, number> = (canvas, index) => symbolLibrary.drawSymbol(canvas, index, 3);
+</script>
+
+<button onclick={() => dialog?.open()} style="text-align: left; white-space: nowrap; overflow: hidden; padding: 1px">
+	{#key symbolIndex}
+		<canvas
+			width={buttonIconSize * retina}
+			height={buttonIconSize * retina}
+			use:drawIcon={symbolIndex}
+			style="width:{buttonIconSize}px;height:{buttonIconSize}px;vertical-align:middle"
+		></canvas>
+	{/key}
+	{#if symbolIndex !== undefined}
+		{symbolLibrary.getSymbol(symbolIndex)?.name}
+	{:else}
+		Select Symbol
+	{/if}
+</button>
+
+<Dialog bind:this={dialog}>
+	<div class="list" style="--list-icon-size: {listIconSize}px; --list-item-size: {listItemSize}px">
+		{#each symbolLibrary.asList() as symbol (symbol.index)}
+			<button class="item" onclick={() => (symbolIndex = symbol.index)}
+				><canvas width={listIconSize * retina} height={listIconSize * retina} use:drawIconHalo={symbol.index}
+				></canvas><br />{symbol.name}</button
+			>
+		{/each}
+	</div>
+</Dialog>
+
+<style>
+	.list {
+		width: 100%;
+		height: 100%;
+		overflow-y: scroll;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
+		row-gap: 10px;
+		column-gap: 0px;
+		justify-items: center;
+
+		.item {
+			width: var(--list-item-size);
+			height: var(--list-item-size);
+			cursor: pointer;
+			border: none;
+			font-size: 10px;
+			background: none;
+			line-height: 1em;
+			text-align: center;
+			padding: 0;
+
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.1);
+			}
+
+			canvas {
+				display: inline-block;
+				width: var(--list-icon-size);
+				height: var(--list-icon-size);
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { Map as MaplibreMap } from 'maplibre-gl';
+type $$ComponentProps = {
+    symbolIndex: number;
+    map: MaplibreMap;
+};
+declare const PanelSymbolSelector: import("svelte").Component<$$ComponentProps, {}, "symbolIndex">;
+type PanelSymbolSelector = ReturnType<typeof PanelSymbolSelector>;
+export default PanelSymbolSelector;