@versatiles/svelte 2.0.0 → 2.1.0

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,33 +29,34 @@
 			{#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 />
 
 				<InputRow id="showStroke" label="Draw Outline">
-					<input id="showStroke" type="checkbox" bind:checked={$strokeVisible} />
+					<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}
+			{#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

@@ -10,11 +10,30 @@
 </script>
 
 <InputRow label="Color" id="color">
-	<input id="color" type="color" bind:value={$color} />
+	<input
+		id="color"
+		type="color"
+		bind:value={
+			() => $color,
+			(v) => {
+				$color = v;
+				layer.manager.state?.log();
+			}
+		}
+	/>
 </InputRow>
 
 <InputRow label="Pattern" id="pattern">
-	<select id="pattern" bind:value={$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}
@@ -22,5 +41,18 @@
 </InputRow>
 
 <InputRow label="Opacity" id="opacity">
-	<input id="opacity" type="range" min="0" max="1" step="0.02" bind:value={$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

@@ -10,11 +10,30 @@
 </script>
 
 <InputRow id="color" label="Color">
-	<input id="color" type="color" bind:value={$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}>
+	<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}
@@ -22,5 +41,18 @@
 </InputRow>
 
 <InputRow id="width" label="Width">
-	<input id="width" type="range" min="0.5" max="5" step="0.5" bind:value={$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,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();
 
@@ -15,31 +15,108 @@
 </script>
 
 <InputRow id="label" label="Symbol">
-	<SymbolSelector bind:symbolIndex={$symbolIndex} symbolLibrary={layer.manager.symbolLibrary} />
+	<SymbolSelector
+		bind:symbolIndex={
+			() => $symbolIndex,
+			(v) => {
+				$symbolIndex = v;
+				layer.manager.state?.log();
+			}
+		}
+		map={layer.manager.map}
+	/>
 </InputRow>
 
 <InputRow id="color" label="Color">
-	<input id="color" type="color" bind:value={$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} />
+	<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} />
+	<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} />
+	<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} />
+	<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}>
+	<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}

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>