@versatiles/svelte 1.0.1 → 1.1.0

package/dist/components/MapEditor/MapEditor.svelte

@@ -1,27 +1,27 @@
-<script lang="ts">import 'maplibre-gl/dist/maplibre-gl.css';
-import BasicMap from '../BasicMap/BasicMap.svelte';
-import Editor from './Editor.svelte';
-import { GeometryManager } from './lib/geometry_manager.js';
-import { onMount } from 'svelte';
-let showSidebar = $state(false);
-onMount(() => {
-    const inIframe = window.self !== window.top;
-    if (!inIframe)
-        showSidebar = true;
-});
-let map = $state();
-let geometryManager = $state();
-let elements = $state([]);
-let activeElement = $state(undefined);
-function onMapInit(_map) {
-    map = _map;
-    map.on('load', async () => {
-        geometryManager = new GeometryManager(map);
-        geometryManager.elements.subscribe((value) => (elements = value));
-        geometryManager.activeElement.subscribe((value) => (activeElement = value));
-    });
-}
-$effect(() => geometryManager?.setActiveElement(activeElement));
+<script lang="ts">
+	import type { Map as MaplibreMapType } from 'maplibre-gl';
+	import BasicMap from '../BasicMap/BasicMap.svelte';
+	import { onMount } from 'svelte';
+	import Sidebar from './components/Sidebar.svelte';
+	import type { GeometryManager } from './lib/geometry_manager.js';
+
+	let showSidebar = $state(false);
+
+	onMount(() => {
+		const inIframe = window.self !== window.top;
+		if (!inIframe) showSidebar = true;
+	});
+
+	let map: MaplibreMapType | undefined = $state();
+	let geometryManager: GeometryManager | undefined = $state();
+
+	function onMapInit(_map: MaplibreMapType) {
+		map = _map;
+		map.on('load', async () => {
+			const { GeometryManager } = await import('./lib/geometry_manager.js');
+			geometryManager = new GeometryManager(map!);
+		});
+	}
 </script>
 
 <div class="page">
@@ -29,62 +29,16 @@ $effect(() => geometryManager?.setActiveElement(activeElement));
 		<BasicMap {onMapInit} styleOptions={{ disableDarkMode: true }}></BasicMap>
 	</div>
 	{#if showSidebar && geometryManager}
-		<div class="sidebar" style="--gap: 10px;">
-			<div class="label">Add new:</div>
-			<div class="row" style="display: flex; column-gap: var(--gap);">
-				<input
-					type="button"
-					value="Marker"
-					onclick={() => (activeElement = geometryManager?.getNewMarker())}
-				/>
-				<input
-					type="button"
-					value="Line"
-					onclick={() => (activeElement = geometryManager?.getNewLine())}
-				/>
-			</div>
-			<hr />
-			<div class="row">
-				<select
-					size="5"
-					bind:value={
-						() => elements.indexOf(activeElement!), (index) => (activeElement = elements[index])
-					}
-				>
-					{#each elements as element, index}
-						<option value={index}>{element.name}</option>
-					{/each}
-				</select>
-			</div>
-			{#if activeElement != null}
-				<hr />
-				<div class="editor">
-					<Editor element={activeElement} />
-				</div>
-			{/if}
-		</div>
-		<style>.page .sidebar {
-  width: 300px;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  right: 0;
-  min-height: 6em;
-  background-color: #eee;
-  overflow-y: scroll;
-  box-sizing: border-box;
-  padding: var(--gap);
-}
-.page .row {
-  margin-bottom: var(--gap);
-}
-.page .container {
-  width: calc(100% - 300px);
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}</style>
+		<Sidebar {geometryManager} width={200} />
+
+		<style>
+			.page .container {
+				width: calc(100% - 200px);
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
+		</style>
 	{/if}
 </div>
 

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

@@ -1,4 +1,3 @@
-import 'maplibre-gl/dist/maplibre-gl.css';
 declare const MapEditor: import("svelte").Component<Record<string, never>, {}, "">;
 type MapEditor = ReturnType<typeof MapEditor>;
 export default MapEditor;

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { AbstractElement } from '../lib/element/abstract.js';
+	import EditorFill from './EditorFill.svelte';
+	import EditorStroke from './EditorStroke.svelte';
+	import EditorSymbol from './EditorSymbol.svelte';
+	import { LineElement } from '../lib/element/line.js';
+	import { MarkerElement } from '../lib/element/marker.js';
+	import { PolygonElement } from '../lib/element/polygon.js';
+
+	const { element }: { element: AbstractElement } = $props();
+	let strokeVisible = $state(false);
+
+	if (element instanceof PolygonElement) {
+		element.strokeLayer.visible.subscribe((value) => (strokeVisible = value));
+	}
+</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>
+
+	<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}
+	<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()} />

package/dist/components/MapEditor/{Editor.svelte.d.ts → components/Editor.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { AbstractElement } from './lib/element_abstract.js';
+import type { AbstractElement } from '../lib/element/abstract.js';
 type $$ComponentProps = {
     element: AbstractElement;
 };

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { fillPatterns, type MapLayerFill } from '../lib/map_layer/fill.js';
+
+	const { layer }: { layer: MapLayerFill } = $props();
+
+	let color = $state(layer.color);
+	let pattern = $state(layer.pattern);
+	let opacity = $state(layer.opacity);
+</script>
+
+<div class="row-input">
+	<label for="color">Color:</label>
+	<input id="color" type="color" bind:value={$color} />
+</div>
+
+<div class="row-input">
+	<label for="pattern">Pattern:</label>
+	<select id="pattern" bind:value={$pattern}>
+		{#each fillPatterns as [index, fill] (index)}
+			<option value={index}>{fill.name}</option>
+		{/each}
+	</select>
+</div>
+
+<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>

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

@@ -0,0 +1,7 @@
+import { type MapLayerFill } from '../lib/map_layer/fill.js';
+type $$ComponentProps = {
+    layer: MapLayerFill;
+};
+declare const EditorFill: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditorFill = ReturnType<typeof EditorFill>;
+export default EditorFill;

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { dashArrays, MapLayerLine } from '../lib/map_layer/line.js';
+
+	const { layer }: { layer: MapLayerLine } = $props();
+
+	let color = $state(layer.color);
+	let width = $state(layer.width);
+	let dashed = $state(layer.dashed);
+</script>
+
+<div class="row-input">
+	<label for="dashed">Dashed:</label>
+	<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>
+
+<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>

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

@@ -0,0 +1,7 @@
+import { MapLayerLine } from '../lib/map_layer/line.js';
+type $$ComponentProps = {
+    layer: MapLayerLine;
+};
+declare const EditorStroke: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditorStroke = ReturnType<typeof EditorStroke>;
+export default EditorStroke;

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { MapLayerSymbol } from '../lib/map_layer/symbol.js';
+	import SymbolSelector from './SymbolSelector.svelte';
+
+	const { layer }: { layer: MapLayerSymbol } = $props();
+
+	let symbolIndex = $state(layer.symbolIndex);
+	let color = $state(layer.color);
+	let rotate = $state(layer.rotate);
+	let halo = $state(layer.halo);
+	let label = $state(layer.label);
+	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>

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

@@ -0,0 +1,7 @@
+import { MapLayerSymbol } from '../lib/map_layer/symbol.js';
+type $$ComponentProps = {
+    layer: MapLayerSymbol;
+};
+declare const EditorSymbol: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditorSymbol = ReturnType<typeof EditorSymbol>;
+export default EditorSymbol;

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

@@ -0,0 +1,179 @@
+<script lang="ts">
+	import type { AbstractElement } from '../lib/element/abstract.js';
+	import Editor from './Editor.svelte';
+	import type { GeometryManager } from '../lib/geometry_manager.js';
+
+	const { geometryManager, width }: { geometryManager: GeometryManager; width: number } = $props();
+
+	let activeElement: AbstractElement | undefined = $state(undefined);
+	$effect(() => geometryManager.selectElement(activeElement));
+
+	geometryManager.selectedElement.subscribe((value) => (activeElement = value));
+
+	function importGeoJSON() {
+		const input = document.createElement('input');
+		input.type = 'file';
+		input.onchange = (_) => {
+			if (!input.files) return alert('No file selected.');
+			const file = input.files[0];
+			const reader = new FileReader();
+			reader.onload = (evt) => {
+				try {
+					if (!evt.target) return alert('Failed to read file.');
+					const json = JSON.parse(evt.target.result as string);
+					geometryManager.addGeoJSON(json);
+				} catch (error) {
+					console.error(error);
+					return alert('Failed to import GeoJSON. Please check the file format.');
+				}
+			};
+
+			reader.onerror = () => alert('Failed to read file. Please try again.');
+
+			reader.readAsText(file);
+		};
+		input.click();
+	}
+
+	function exportGeoJSON() {
+		const geoJSON = geometryManager.getGeoJSON();
+		const blob = new Blob([JSON.stringify(geoJSON)], { type: 'application/geo+json' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.setAttribute('href', url);
+		a.setAttribute('download', 'map.geojson');
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+</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 = geometryManager.addNewMarker())}
+			/>
+			<input
+				type="button"
+				value="Line"
+				onclick={() => (activeElement = geometryManager.addNewLine())}
+			/>
+			<input
+				type="button"
+				value="Polygon"
+				onclick={() => (activeElement = geometryManager.addNewPolygon())}
+			/>
+		</div>
+		{#if activeElement != null}
+			<hr />
+			<Editor element={activeElement} />
+		{/if}
+	</div>
+	<div class="footer">
+		<a href="https://github.com/versatiles-org/node-versatiles-svelte/issues" target="_blank">
+			Add a GitHub issue.</a
+		>
+	</div>
+</div>
+
+<style>
+	.sidebar {
+		width: 200px;
+		height: 100%;
+		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;
+		}
+
+		:global(.row-flex) {
+			margin-bottom: var(--gap);
+			display: flex;
+			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;
+			}
+		}
+
+		:global(label),
+		:global(.label) {
+			opacity: 0.7;
+			font-size: 0.8em;
+		}
+
+		:global(button),
+		:global(input),
+		:global(select) {
+			width: 100%;
+			box-sizing: border-box;
+			margin: 0;
+		}
+
+		:global(p) {
+			font-size: 0.8em;
+			opacity: 0.5;
+			margin: 0.5em 0 1em;
+		}
+
+		.footer {
+			text-align: right;
+			font-size: 0.8em;
+			a {
+				color: #000;
+				text-decoration: none;
+				opacity: 0.3;
+				&:hover {
+					opacity: 1;
+				}
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { GeometryManager } from '../lib/geometry_manager.js';
+type $$ComponentProps = {
+    geometryManager: GeometryManager;
+    width: number;
+};
+declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/MapEditor/components/SymbolSelector.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type { Action } from 'svelte/action';
+	import type { SymbolLibrary } from '../lib/symbols.js';
+
+	let {
+		symbolIndex = $bindable(),
+		symbolLibrary
+	}: { symbolIndex: number; symbolLibrary: SymbolLibrary } = $props();
+
+	let open = $state(false);
+
+	const drawIconHalo: Action<HTMLCanvasElement, number> = (canvas, index) =>
+		symbolLibrary.drawSymbol(canvas, index, true);
+
+	const drawIcon: Action<HTMLCanvasElement, number> = (canvas, index) =>
+		symbolLibrary.drawSymbol(canvas, index);
+</script>
+
+<button
+	onclick={() => (open = !open)}
+	style="text-align: left; white-space: nowrap; overflow: hidden; padding: 1px"
+>
+	{#key symbolIndex}
+		<canvas
+			width="40"
+			height="40"
+			use:drawIcon={symbolIndex}
+			style="width:20px;height:20px;vertical-align:middle"
+		></canvas>
+	{/key}
+	{#if symbolIndex !== undefined}
+		{symbolLibrary.getSymbol(symbolIndex)?.name}
+	{:else}
+		Select Symbol
+	{/if}
+</button>
+
+<div class="modal" style="display: {open ? 'block' : 'none'};">
+	<button class="close" onclick={() => (open = false)}>&#x2715;</button>
+	<div class="inner">
+		{#each symbolLibrary.asList() as symbol (symbol.index)}
+			<button
+				class="icon"
+				onclick={() => {
+					symbolIndex = symbol.index;
+					open = false;
+				}}
+				><canvas width="64" height="64" use:drawIconHalo={symbol.index}></canvas><br
+				/>{symbol.name}</button
+			>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.modal {
+		position: fixed;
+		top: max(calc(50vh - 250px), 0px);
+		left: max(calc(50vw - 250px), 0px);
+		width: min(500px, 100vw);
+		height: min(500px, 100vh);
+		background-color: rgba(255, 255, 255, 0.5);
+		backdrop-filter: blur(20px) brightness(0.85);
+		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
+		z-index: 10000;
+		border: 0.5px solid rgba(0, 0, 0, 0.5);
+		border-radius: 10px;
+		box-sizing: border-box;
+		padding: 20px;
+
+		.inner {
+			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;
+
+			.icon {
+				width: 48px;
+				height: 48px;
+				cursor: pointer;
+				border: none;
+				font-size: 0.6em;
+				background: none;
+				line-height: 1em;
+				text-align: center;
+				padding: 0;
+
+				&:hover {
+					background-color: rgba(0, 0, 0, 0.1);
+				}
+
+				canvas {
+					display: inline-block;
+					width: 32px;
+					height: 32px;
+				}
+			}
+		}
+
+		.close {
+			position: absolute;
+			top: 0px;
+			right: 0px;
+			font-size: 20px;
+			cursor: pointer;
+			background: none;
+			border: none;
+			width: 25px;
+			height: 25px;
+			text-align: center;
+			padding: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { SymbolLibrary } from '../lib/symbols.js';
+type $$ComponentProps = {
+    symbolIndex: number;
+    symbolLibrary: SymbolLibrary;
+};
+declare const SymbolSelector: import("svelte").Component<$$ComponentProps, {}, "symbolIndex">;
+type SymbolSelector = ReturnType<typeof SymbolSelector>;
+export default SymbolSelector;

package/dist/components/MapEditor/lib/__mocks__/cursor.d.ts

@@ -0,0 +1,5 @@
+export declare class MockCursor {
+    grab: import("vitest").Mock<(...args: any[]) => any>;
+    hover: import("vitest").Mock<(...args: any[]) => any>;
+    precise: import("vitest").Mock<(...args: any[]) => any>;
+}

package/dist/components/MapEditor/lib/__mocks__/cursor.js

@@ -0,0 +1,6 @@
+import { vi } from 'vitest';
+export class MockCursor {
+    grab = vi.fn();
+    hover = vi.fn();
+    precise = vi.fn();
+}

package/dist/components/MapEditor/lib/__mocks__/geometry_manager.d.ts

@@ -0,0 +1,22 @@
+import { type Writable } from 'svelte/store';
+import type { AbstractElement } from '../element/abstract.js';
+import type { StateObject } from '../state/types.js';
+import { MockMap } from './map.js';
+import { MockCursor } from './cursor.js';
+export declare class MockGeometryManager {
+    readonly elements: Writable<AbstractElement[]>;
+    readonly activeElement: Writable<AbstractElement | undefined>;
+    readonly map: MockMap;
+    readonly cursor: MockCursor;
+    constructor();
+    setActiveElement: import("vitest").Mock<(...args: any[]) => any>;
+    getState: import("vitest").Mock<() => StateObject>;
+    saveState: import("vitest").Mock<(...args: any[]) => any>;
+    loadState: import("vitest").Mock<(...args: any[]) => any>;
+    getElement: import("vitest").Mock<(index: number) => AbstractElement>;
+    addNewMarker: import("vitest").Mock<() => AbstractElement>;
+    addNewLine: import("vitest").Mock<() => AbstractElement>;
+    addNewPolygon: import("vitest").Mock<() => AbstractElement>;
+    deleteElement: import("vitest").Mock<(...args: any[]) => any>;
+    drawSelectionNodes: import("vitest").Mock<(...args: any[]) => any>;
+}