@versatiles/svelte 0.2.0 → 1.0.0

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

@@ -1,22 +1,6 @@
-import type { BBox } from './BBoxMap.js';
 import 'maplibre-gl/dist/maplibre-gl.css';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const BBoxMap: $$__sveltets_2_IsomorphicComponent<{
-    selectedBBox?: BBox;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BBoxMap = InstanceType<typeof BBoxMap>;
+declare const BBoxMap: import("svelte").Component<{
+    selectedBBox?: any;
+}, {}, "selectedBBox">;
+type BBoxMap = ReturnType<typeof BBoxMap>;
 export default BBoxMap;

package/dist/components/BasicMap/BasicMap.svelte

@@ -1,41 +1,38 @@
 <!-- BasicMap.svelte -->
-<script lang="ts">
-	import type { Map as MaplibreMapType, MapOptions } from 'maplibre-gl';
-	import { onMount, createEventDispatcher } from 'svelte';
-	import 'maplibre-gl/dist/maplibre-gl.css';
-	import { getMapStyle, isDarkMode } from '../../utils/style.js';
-	import type { StyleBuilderOptions } from '@versatiles/style';
-
-	// Props
-	export let style: string = 'position:absolute; left:0px; top:0px; width:100%; height:100%;';
-	export let container: HTMLDivElement | undefined = undefined;
-	export let map: MaplibreMapType | undefined = undefined;
-	export let styleOptions: StyleBuilderOptions = {};
-	export let mapOptions: Partial<MapOptions> = {};
-
-	// Create the event dispatcher
-	const dispatch = createEventDispatcher();
-
-	onMount(async (): Promise<void> => {
-		let MaplibreMap: typeof MaplibreMapType = (await import('maplibre-gl')).Map;
-
-		if (!container) throw Error();
-
-		const darkMode = isDarkMode(container);
-		container.style.setProperty('--bg-color', darkMode ? '#000' : '#fff');
-		container.style.setProperty('--fg-color', darkMode ? '#fff' : '#000');
-
-		map = new MaplibreMap({
-			container,
-			style: getMapStyle(darkMode, styleOptions),
-			renderWorldCopies: false,
-			dragRotate: false,
-			attributionControl: { compact: false },
-			...mapOptions
-		});
-
-		dispatch('mapReady', { map });
-	});
+<script lang="ts">import 'maplibre-gl/dist/maplibre-gl.css';
+import { getMapStyle, isDarkMode } from '../../utils/map_style.js';
+// Props
+let { style = 'position:absolute; left:0px; top:0px; width:100%; height:100%;', styleOptions = { transitionDuration: 0 }, mapOptions = {}, map = $bindable(), onMapInit, onMapLoad } = $props();
+let container;
+$effect(() => {
+    if (container)
+        init();
+});
+async function init() {
+    if (map)
+        return;
+    let MaplibreMap = (await import('maplibre-gl')).Map;
+    if (!container)
+        throw Error();
+    const darkMode = isDarkMode(container);
+    container.style.setProperty('--bg-color', darkMode ? '#000' : '#fff');
+    container.style.setProperty('--fg-color', darkMode ? '#fff' : '#000');
+    map = new MaplibreMap({
+        container,
+        style: getMapStyle(darkMode, styleOptions),
+        renderWorldCopies: false,
+        dragRotate: false,
+        attributionControl: { compact: false },
+        fadeDuration: 0,
+        ...mapOptions
+    });
+    if (onMapInit)
+        onMapInit(map);
+    map.on('load', () => {
+        if (onMapLoad)
+            onMapLoad(map);
+    });
+}
 </script>
 
 <div class="map" {style} bind:this={container}></div>

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

@@ -1,29 +1,14 @@
 import type { Map as MaplibreMapType, MapOptions } from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import type { StyleBuilderOptions } from '@versatiles/style';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const BasicMap: $$__sveltets_2_IsomorphicComponent<{
+import { getMapStyle } from '../../utils/map_style.js';
+type $$ComponentProps = {
     style?: string;
-    container?: HTMLDivElement | undefined;
-    map?: MaplibreMapType | undefined;
-    styleOptions?: StyleBuilderOptions;
+    styleOptions?: Parameters<typeof getMapStyle>[1];
     mapOptions?: Partial<MapOptions>;
-}, {
-    mapReady: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BasicMap = InstanceType<typeof BasicMap>;
+    map?: MaplibreMapType;
+    onMapInit?: (map: MaplibreMapType) => void;
+    onMapLoad?: (map: MaplibreMapType) => void;
+};
+declare const BasicMap: import("svelte").Component<$$ComponentProps, {}, "map">;
+type BasicMap = ReturnType<typeof BasicMap>;
 export default BasicMap;

package/dist/components/LocatorMap/LocatorMap.svelte

@@ -0,0 +1,75 @@
+<!-- LocatorMap.svelte -->
+<script lang="ts">import 'maplibre-gl/dist/maplibre-gl.css';
+import BasicMap from '../BasicMap/BasicMap.svelte';
+let map;
+function onMapInit(_map) {
+    map = _map;
+    map.on('load', async () => {
+        let coordinates = [0, 0];
+        const initialHash = parseHash();
+        if (initialHash) {
+            console.log('initialHash', initialHash);
+            coordinates = [initialHash[1], initialHash[2]];
+            map.setZoom(initialHash[0]);
+            map.setCenter(coordinates);
+        }
+        else {
+            map.on('move', () => {
+                const { lng, lat } = map.getCenter();
+                source.setData({
+                    type: 'Feature',
+                    geometry: { type: 'Point', coordinates: [lng, lat] },
+                    properties: {}
+                });
+            });
+            map.on('moveend', () => updateHash());
+        }
+        map.addSource('marker', {
+            type: 'geojson',
+            data: { type: 'Feature', geometry: { type: 'Point', coordinates }, properties: {} }
+        });
+        const source = map.getSource('marker');
+        map.addLayer({
+            id: 'marker',
+            source: 'marker',
+            type: 'symbol',
+            layout: {
+                'icon-image': 'basics:icon-embassy',
+                'icon-size': 1,
+                'icon-overlap': 'always'
+            },
+            paint: {
+                'icon-color': '#FF0000',
+                'icon-halo-color': '#FFFFFF',
+                'icon-halo-width': 1,
+                'icon-halo-blur': 0
+            }
+        });
+        function parseHash() {
+            const hash = window.location.hash
+                .replace(/[^0-9/.]+/g, '')
+                .split('/')
+                .map(parseFloat);
+            return hash.length === 3 ? hash : undefined;
+        }
+        function updateHash() {
+            const center = map.getCenter();
+            const zoom = map.getZoom();
+            window.location.hash = `#${zoom.toFixed(2)}/${center.lng.toFixed(6)}/${center.lat.toFixed(6)}`;
+        }
+    });
+}
+</script>
+
+<div class="container">
+	<BasicMap {onMapInit}></BasicMap>
+</div>
+
+<style>
+	.container {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		min-height: 6em;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import 'maplibre-gl/dist/maplibre-gl.css';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const LocatorMap: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LocatorMap = InstanceType<typeof LocatorMap>;
+export default LocatorMap;

package/dist/components/MapEditor/Editor.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import {} from './editor.scss';
+import EditorMarker from './EditorMarker.svelte';
+import EditorLine from './EditorLine.svelte';
+import { LineElement } from './lib/element_line.js';
+import { MarkerElement } from './lib/element_marker.js';
+const { element } = $props();
+let name = $state(element.name);
+$effect(() => {
+    name = element.name;
+});
+$effect(() => {
+    //element.name = name;
+});
+</script>
+
+{#if element}
+	<label for="input-name">Name</label>
+	<input id="input-name" type="text" bind:value={name} />
+	{#if element instanceof MarkerElement}
+		<EditorMarker {element} />
+	{/if}
+	{#if element instanceof LineElement}
+		<EditorLine {element} />
+	{/if}
+{/if}

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

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

package/dist/components/MapEditor/EditorLine.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">import {} from './editor.scss';
+import { get } from 'svelte/store';
+import { dashArrays } from './lib/element_line.js';
+const dashedList = Array.from(dashArrays.keys()).sort();
+let { element } = $props();
+let color = $state(get(element.color));
+let width = $state(get(element.width));
+let dashed = $state(get(element.dashed));
+$effect(() => element.color.set(color));
+$effect(() => element.width.set(width));
+$effect(() => element.dashed.set(dashed));
+</script>
+
+<div class="row">
+	<label for="dashed-input">Dashed</label>
+	<select id="dashed-input" bind:value={dashed}>
+		{#each dashedList as d}
+			<option value={d}>{d}</option>
+		{/each}
+	</select>
+
+	<label for="color-input">Color</label>
+	<input id="color-input" type="color" bind:value={color} />
+
+	<label for="width-input">Width</label>
+	<input id="width-input" type="range" min="0.5" max="5" step="0.5" bind:value={width} />
+</div>

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

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

package/dist/components/MapEditor/EditorMarker.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">import {} from './editor.scss';
+import { get } from 'svelte/store';
+import { symbols } from './lib/element_marker.js';
+const symbolList = Array.from(symbols.keys()).sort();
+let { element } = $props();
+let color = $state(get(element.color));
+let halo = $state(get(element.halo));
+let rotate = $state(get(element.rotate));
+let size = $state(get(element.size));
+let symbol = $state(get(element.symbol));
+let label = $state(get(element.label));
+$effect(() => element.color.set(color));
+$effect(() => element.halo.set(halo));
+$effect(() => element.rotate.set(rotate));
+$effect(() => element.size.set(size));
+$effect(() => element.label.set(label));
+$effect(() => element.symbol.set(symbol));
+</script>
+
+<div class="row">
+	<label for="symbol-input">Symbol</label>
+	<select id="symbol-input" bind:value={symbol}>
+		{#each symbolList as s}
+			<option value={s}>{s}</option>
+		{/each}
+	</select>
+
+	<label for="color-input">Color</label>
+	<input id="color-input" type="color" bind:value={color} />
+
+	<label for="size-input">Size</label>
+	<input id="size-input" type="range" min="0.5" max="3" step="0.1" bind:value={size} />
+
+	<label for="rotate-input">Rotation</label>
+	<input id="rotate-input" type="range" min="-180" max="180" step="15" bind:value={rotate} />
+
+	<label for="halo-input">Halo</label>
+	<input id="halo-input" type="range" min="0" max="3" step="0.5" bind:value={halo} />
+
+	<label for="label-input">Label</label>
+	<input id="label-input" type="text" bind:value={label} />
+</div>

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

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

package/dist/components/MapEditor/MapEditor.svelte

@@ -0,0 +1,99 @@
+<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>
+
+<div class="page">
+	<div class="container">
+		<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>
+	{/if}
+</div>
+
+<style>
+	.page,
+	.container {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		min-height: 6em;
+	}
+</style>

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

@@ -0,0 +1,4 @@
+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/editor.scss

@@ -0,0 +1,16 @@
+input {
+	width: 100%;
+}
+
+label,
+div.label {
+	opacity: 0.7;
+	font-size: 0.8em;
+	display: block;
+	margin-top: 1.5em;
+	margin-bottom: 0.2em;
+}
+
+select {
+	width: 100%;
+}

package/dist/components/MapEditor/lib/element_abstract.d.ts

@@ -0,0 +1,20 @@
+import type { Feature } from 'geojson';
+import type maplibregl from 'maplibre-gl';
+import { MapLayer } from './map_layer.js';
+import type { ElementPoint, LayerFill, LayerLine, LayerSymbol, SelectionNode } from './types.js';
+import type { GeometryManager } from './geometry_manager.js';
+export declare abstract class AbstractElement<T extends LayerSymbol | LayerFill | LayerLine = LayerSymbol | LayerFill | LayerLine> {
+    name: string;
+    protected canvas: HTMLElement;
+    protected manager: GeometryManager;
+    protected map: maplibregl.Map;
+    protected layer: MapLayer<T>;
+    protected source: maplibregl.GeoJSONSource;
+    private isActive;
+    private slug;
+    constructor(manager: GeometryManager, name: string, type: 'symbol' | 'fill' | 'line');
+    protected randomPositions(name: string, length: number): ElementPoint[];
+    abstract getFeature(): Feature;
+    abstract getSelectionNodes(): SelectionNode[];
+    abstract getSelectionNodeUpdater(properties?: Record<string, unknown>): ((lng: number, lat: number) => void) | undefined;
+}

package/dist/components/MapEditor/lib/element_abstract.js

@@ -0,0 +1,58 @@
+import { MapLayer } from './map_layer.js';
+export class AbstractElement {
+    name;
+    canvas;
+    manager;
+    map;
+    layer;
+    source;
+    isActive = true;
+    slug = '_' + Math.random().toString(36).slice(2);
+    constructor(manager, name, type) {
+        this.manager = manager;
+        this.map = manager.map;
+        this.canvas = this.map.getCanvasContainer();
+        this.name = name;
+        this.map.addSource('source' + this.slug, {
+            type: 'geojson',
+            data: { type: 'FeatureCollection', features: [] }
+        });
+        this.source = this.map.getSource('source' + this.slug);
+        this.layer = new MapLayer(this.map, type + this.slug, 'source' + this.slug, type);
+        this.map.on('mouseenter', this.layer.id, () => {
+            if (this.isActive)
+                this.canvas.style.cursor = 'pointer';
+        });
+        this.map.on('mouseleave', this.layer.id, () => {
+            if (this.isActive)
+                this.canvas.style.cursor = 'default';
+        });
+        this.map.on('click', this.layer.id, (e) => {
+            if (this.isActive) {
+                this.manager.setActiveElement(this);
+                e.preventDefault();
+            }
+        });
+    }
+    randomPositions(name, length) {
+        let seed = name
+            .split('')
+            .reduce((acc, char) => (acc * 0x101 + char.charCodeAt(0)) % 0x100000000, 0);
+        const points = [];
+        for (let i = 0; i < length; i++) {
+            const xr = random() * 0.5 + 0.25;
+            const yr = random() * 0.5 + 0.25;
+            const bounds = this.map.getBounds();
+            points.push([
+                (1 - xr) * bounds.getWest() + xr * bounds.getEast(),
+                (1 - yr) * bounds.getSouth() + yr * bounds.getNorth()
+            ]);
+        }
+        return points;
+        function random() {
+            for (let i = 0; i < 10; i++)
+                seed = ((Math.cos(seed * 3.14 + 0.0159) + 1.1) * 9631) % 1;
+            return seed;
+        }
+    }
+}

package/dist/components/MapEditor/lib/element_line.d.ts

@@ -0,0 +1,14 @@
+import { AbstractElement } from './element_abstract.js';
+import type { GeometryManager } from './geometry_manager.js';
+import type { ElementLine, LayerLine, SelectionNode } from './types.js';
+export declare const dashArrays: Map<string, number[] | undefined>;
+export declare class LineElement extends AbstractElement<LayerLine> {
+    readonly color: import("svelte/store").Writable<string>;
+    readonly dashed: import("svelte/store").Writable<string>;
+    readonly width: import("svelte/store").Writable<number>;
+    private line;
+    constructor(manager: GeometryManager, name: string, line?: ElementLine);
+    getFeature(): GeoJSON.Feature<GeoJSON.LineString>;
+    getSelectionNodes(): SelectionNode[];
+    getSelectionNodeUpdater(properties?: Record<string, unknown>): ((lng: number, lat: number) => void) | undefined;
+}

package/dist/components/MapEditor/lib/element_line.js

@@ -0,0 +1,76 @@
+import { Color } from '@versatiles/style';
+import { AbstractElement } from './element_abstract.js';
+import { get, writable } from 'svelte/store';
+import { getMiddlePoint } from './utils.js';
+export const dashArrays = new Map([
+    ['solid', undefined],
+    ['dashed', [2, 4]],
+    ['dotted', [0, 2]]
+]);
+export class LineElement extends AbstractElement {
+    color = writable('#ff0000');
+    dashed = writable('solid');
+    width = writable(2);
+    line = [
+        [0, 0],
+        [0, 0]
+    ];
+    constructor(manager, name, line) {
+        super(manager, name, 'line');
+        this.line = line ?? this.randomPositions(name, 2);
+        const getDashArray = () => dashArrays.get(get(this.dashed));
+        this.layer.setLayout({
+            'line-cap': 'round',
+            'line-join': 'round'
+        });
+        this.layer.setPaint({
+            'line-color': Color.parse(get(this.color)).asString(),
+            'line-dasharray': getDashArray(),
+            'line-width': get(this.width)
+        });
+        this.color.subscribe((value) => this.layer.updatePaint('line-color', Color.parse(value)));
+        this.width.subscribe((value) => this.layer.updatePaint('line-width', value));
+        this.dashed.subscribe(() => this.layer.updatePaint('line-dasharray', getDashArray()));
+        this.source.setData(this.getFeature());
+    }
+    getFeature() {
+        return {
+            type: 'Feature',
+            properties: {},
+            geometry: { type: 'LineString', coordinates: this.line }
+        };
+    }
+    getSelectionNodes() {
+        const points = [];
+        for (let i = 0; i < this.line.length; i++) {
+            points.push({ index: i, coordinates: this.line[i] });
+            if (i === this.line.length - 1)
+                continue;
+            points.push({
+                index: i + 0.5,
+                transparent: true,
+                coordinates: getMiddlePoint(this.line[i], this.line[i + 1])
+            });
+        }
+        return points;
+    }
+    getSelectionNodeUpdater(properties) {
+        if (properties == undefined)
+            return;
+        const index = properties.index;
+        let point;
+        if (index % 1 === 0) {
+            point = this.line[index];
+        }
+        else {
+            const i = Math.ceil(index);
+            this.line.splice(i, 0, [0, 0]);
+            point = this.line[i];
+        }
+        return (lng, lat) => {
+            point[0] = lng;
+            point[1] = lat;
+            this.source.setData(this.getFeature());
+        };
+    }
+}