@versatiles/svelte 0.3.0 → 1.0.0

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());
+        };
+    }
+}

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

@@ -0,0 +1,20 @@
+import { AbstractElement } from './element_abstract.js';
+import type { GeometryManager } from './geometry_manager.js';
+import type { ElementPoint, LayerSymbol, SelectionNode } from './types.js';
+export declare const symbols: Map<string, {
+    image: string;
+    offset?: [number, number];
+}>;
+export declare class MarkerElement extends AbstractElement<LayerSymbol> {
+    readonly color: import("svelte/store").Writable<string>;
+    readonly halo: import("svelte/store").Writable<number>;
+    readonly rotate: import("svelte/store").Writable<number>;
+    readonly size: import("svelte/store").Writable<number>;
+    readonly symbol: import("svelte/store").Writable<string>;
+    readonly label: import("svelte/store").Writable<string>;
+    private point;
+    constructor(manager: GeometryManager, name: string, point?: ElementPoint);
+    getFeature(): GeoJSON.Feature<GeoJSON.Point>;
+    getSelectionNodes(): SelectionNode[];
+    getSelectionNodeUpdater(): ((lng: number, lat: number) => void) | undefined;
+}

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

@@ -0,0 +1,191 @@
+import { Color } from '@versatiles/style';
+import { AbstractElement } from './element_abstract.js';
+import { get, writable } from 'svelte/store';
+export const symbols = new Map([
+    ['airplane', { image: 'basics:icon-airfield' }],
+    ['airport', { image: 'basics:icon-airport' }],
+    ['alcohol shop', { image: 'basics:icon-alcohol_shop' }],
+    ['art gallery', { image: 'basics:icon-art_gallery' }],
+    ['artwork', { image: 'basics:icon-artwork' }],
+    ['atm', { image: 'basics:icon-atm' }],
+    ['bakery', { image: 'basics:icon-bakery' }],
+    ['bank', { image: 'basics:icon-bank' }],
+    ['beauty', { image: 'basics:icon-beauty' }],
+    ['beer', { image: 'basics:icon-beer' }],
+    ['beergarden', { image: 'basics:icon-beergarden' }],
+    ['bench', { image: 'basics:icon-bench' }],
+    ['beverages', { image: 'basics:icon-beverages' }],
+    ['bicycle share', { image: 'basics:icon-bicycle_share' }],
+    ['books', { image: 'basics:icon-books' }],
+    ['bus', { image: 'basics:icon-bus' }],
+    ['butcher', { image: 'basics:icon-butcher' }],
+    ['cafe', { image: 'basics:icon-cafe', offset: [2, 0] }],
+    ['car rental', { image: 'basics:icon-car_rental' }],
+    ['car wash', { image: 'basics:icon-car_wash' }],
+    ['castle', { image: 'basics:icon-castle' }],
+    ['cemetery', { image: 'basics:icon-cemetery' }],
+    ['chalet', { image: 'basics:icon-chalet' }],
+    ['chemist', { image: 'basics:icon-chemist' }],
+    ['cinema', { image: 'basics:icon-cinema' }],
+    ['clothes', { image: 'basics:icon-clothes' }],
+    ['college', { image: 'basics:icon-college' }],
+    ['community', { image: 'basics:icon-community' }],
+    ['defibrillator', { image: 'basics:icon-defibrillator' }],
+    ['doctor', { image: 'basics:icon-doctor' }],
+    ['dog park', { image: 'basics:icon-dog_park' }],
+    ['doityourself', { image: 'basics:icon-doityourself' }],
+    ['drinking water', { image: 'basics:icon-drinking_water' }],
+    ['drycleaning', { image: 'basics:icon-drycleaning' }],
+    ['emergency phone', { image: 'basics:icon-emergency_phone' }],
+    ['fast food', { image: 'basics:icon-fast_food' }],
+    ['fire station', { image: 'basics:icon-fire_station' }],
+    ['flag', { image: 'basics:icon-embassy', offset: [7.5, -10] }],
+    ['florist', { image: 'basics:icon-florist' }],
+    ['fountain', { image: 'basics:icon-fountain' }],
+    ['furniture', { image: 'basics:icon-furniture' }],
+    ['garden centre', { image: 'basics:icon-garden_centre' }],
+    ['gift', { image: 'basics:icon-gift' }],
+    ['glasses', { image: 'basics:icon-optician' }],
+    ['golf', { image: 'basics:icon-golf' }],
+    ['greengrocer', { image: 'basics:icon-greengrocer' }],
+    ['hardware', { image: 'basics:icon-hardware' }],
+    ['hospital', { image: 'basics:icon-hospital' }],
+    ['huntingstand', { image: 'basics:icon-huntingstand' }],
+    ['hydrant', { image: 'basics:icon-hydrant' }],
+    ['icerink', { image: 'basics:icon-icerink' }],
+    ['information', { image: 'basics:transport-information' }],
+    ['jewelry store', { image: 'basics:icon-jewelry_store' }],
+    ['kiosk', { image: 'basics:icon-kiosk' }],
+    ['laundry', { image: 'basics:icon-laundry' }],
+    ['letter', { image: 'basics:icon-post' }],
+    ['library', { image: 'basics:icon-library' }],
+    ['lighthouse', { image: 'basics:icon-lighthouse' }],
+    ['marketplace', { image: 'basics:icon-marketplace' }],
+    ['money', { image: 'basics:icon-bar' }],
+    ['monument', { image: 'basics:icon-monument' }],
+    ['newsagent', { image: 'basics:icon-newsagent' }],
+    ['nightclub', { image: 'basics:icon-nightclub' }],
+    ['nursinghome', { image: 'basics:icon-nursinghome' }],
+    ['observation tower', { image: 'basics:icon-observation_tower' }],
+    ['outdoor', { image: 'basics:icon-outdoor' }],
+    ['pharmacy', { image: 'basics:icon-pharmacy' }],
+    ['picnic site', { image: 'basics:icon-picnic_site' }],
+    ['place of worship', { image: 'basics:icon-place_of_worship' }],
+    ['playground', { image: 'basics:icon-playground' }],
+    ['police', { image: 'basics:icon-police', offset: [-1, -3] }],
+    ['postbox', { image: 'basics:icon-postbox' }],
+    ['prison', { image: 'basics:icon-prison' }],
+    ['rail light', { image: 'basics:icon-rail_light' }],
+    ['rail metro', { image: 'basics:icon-rail_metro' }],
+    ['rail', { image: 'basics:icon-rail' }],
+    ['recycling', { image: 'basics:icon-recycling' }],
+    ['restaurant', { image: 'basics:icon-restaurant' }],
+    ['run', { image: 'basics:icon-pitch' }],
+    ['school', { image: 'basics:icon-school' }],
+    ['scissor', { image: 'basics:icon-hairdresser' }],
+    ['shield', { image: 'basics:icon-historic', offset: [0, -10] }],
+    ['shoes', { image: 'basics:icon-shoes', offset: [-5, 0] }],
+    ['shop', { image: 'basics:icon-shop' }],
+    ['shop', { image: 'basics:icon-shop' }],
+    ['shrine', { image: 'basics:icon-shrine' }],
+    ['sports', { image: 'basics:icon-sports' }],
+    ['stadium', { image: 'basics:icon-stadium' }],
+    ['stationery', { image: 'basics:icon-stationery' }],
+    ['surveillance', { image: 'basics:icon-surveillance' }],
+    ['swimming', { image: 'basics:icon-swimming' }],
+    ['telephone', { image: 'basics:icon-telephone' }],
+    ['theatre', { image: 'basics:icon-theatre' }],
+    ['toilet', { image: 'basics:icon-toilet' }],
+    ['tooth', { image: 'basics:icon-dentist' }],
+    ['town hall', { image: 'basics:icon-town_hall' }],
+    ['toys', { image: 'basics:icon-toys' }],
+    ['tram', { image: 'basics:transport-tram' }],
+    ['travel agent', { image: 'basics:icon-travel_agent' }],
+    ['vendingmachine', { image: 'basics:icon-vendingmachine' }],
+    ['veterinary', { image: 'basics:icon-veterinary' }],
+    ['video', { image: 'basics:icon-video' }],
+    ['viewpoint', { image: 'basics:icon-viewpoint', offset: [0, -6] }],
+    ['waste basket', { image: 'basics:icon-waste_basket' }],
+    ['watermill', { image: 'basics:icon-watermill' }],
+    ['waterpark', { image: 'basics:icon-waterpark' }],
+    ['windmill', { image: 'basics:icon-windmill' }],
+    ['zoo', { image: 'basics:icon-zoo' }]
+]);
+export class MarkerElement extends AbstractElement {
+    color = writable('#ff0000');
+    halo = writable(1);
+    rotate = writable(0);
+    size = writable(1);
+    symbol = writable('flag');
+    label = writable('');
+    point = [0, 0];
+    constructor(manager, name, point) {
+        super(manager, name, 'symbol');
+        this.point = point ?? this.randomPositions(name, 1)[0];
+        const getSymbol = () => {
+            const entry = symbols.get(get(this.symbol)) ?? symbols.get('flag');
+            return { image: entry.image, offset: entry.offset ?? [0, 0] };
+        };
+        this.layer.setLayout({
+            'icon-image': getSymbol().image,
+            'icon-offset': getSymbol().offset,
+            'icon-overlap': 'always',
+            'icon-rotate': get(this.rotate),
+            'icon-size': get(this.size),
+            'text-field': get(this.label),
+            'text-font': ['noto_sans_regular'],
+            'text-justify': 'left',
+            'text-anchor': 'right',
+            'text-offset': [-0.4, -0.6]
+        });
+        this.layer.setPaint({
+            'icon-color': Color.parse(get(this.color)).asString(),
+            'icon-halo-blur': 0,
+            'icon-halo-color': '#FFFFFF',
+            'icon-halo-width': get(this.halo) * get(this.size),
+            'icon-opacity': 1,
+            'text-halo-blur': 0,
+            'text-halo-color': '#FFFFFF',
+            'text-halo-width': get(this.halo) * get(this.size)
+        });
+        this.color.subscribe((value) => this.layer.updatePaint('icon-color', Color.parse(value)));
+        this.halo.subscribe((value) => {
+            this.layer.updatePaint('icon-halo-width', value * get(this.size));
+            this.layer.updatePaint('text-halo-width', value * get(this.size));
+        });
+        this.label.subscribe((value) => this.layer.updateLayout('text-field', value));
+        this.rotate.subscribe((value) => this.layer.updateLayout('icon-rotate', value));
+        this.size.subscribe((value) => {
+            this.layer.updateLayout('icon-size', value);
+            this.layer.updatePaint('icon-halo-width', value * get(this.halo));
+            this.layer.updateLayout('text-size', value * 16);
+            this.layer.updatePaint('text-halo-width', value * get(this.halo));
+        });
+        this.symbol.subscribe(() => {
+            const symbol = getSymbol();
+            this.layer.updateLayout('icon-image', symbol.image);
+            this.layer.updateLayout('icon-offset', symbol.offset);
+        });
+        this.source.setData(this.getFeature());
+    }
+    getFeature() {
+        return {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+                type: 'Point',
+                coordinates: this.point
+            }
+        };
+    }
+    getSelectionNodes() {
+        return [{ index: 0, coordinates: this.point }];
+    }
+    getSelectionNodeUpdater() {
+        return (lng, lat) => {
+            this.point[0] = lng;
+            this.point[1] = lat;
+            this.source.setData(this.getFeature());
+        };
+    }
+}

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

@@ -0,0 +1 @@
+export declare function getLatLng(query: string): Promise<[number, number] | undefined>;

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

@@ -0,0 +1,8 @@
+export async function getLatLng(query) {
+    const url = `https://photon.komoot.io/api/?${new URLSearchParams(query)}`;
+    const result = await fetch(url).then((r) => r.json());
+    const geometry = result?.features?.[0]?.geometry;
+    if (geometry?.type !== 'Point')
+        return;
+    return geometry.coordinates;
+}

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

@@ -0,0 +1,18 @@
+import { type Writable } from 'svelte/store';
+import type { AbstractElement } from './element_abstract.js';
+import type maplibregl from 'maplibre-gl';
+export declare class GeometryManager {
+    readonly elements: Writable<AbstractElement[]>;
+    readonly map: maplibregl.Map;
+    readonly activeElement: Writable<AbstractElement | undefined>;
+    private readonly selection_nodes;
+    private readonly canvas;
+    constructor(map: maplibregl.Map);
+    setActiveElement(element: AbstractElement | undefined): void;
+    private drawSelectionNodes;
+    getElement(index: number): AbstractElement;
+    getNewMarker(): AbstractElement;
+    getNewLine(): AbstractElement;
+    private addElement;
+    private newName;
+}