@versatiles/svelte 0.2.0 → 1.0.0

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

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

@@ -0,0 +1,117 @@
+import { get, writable } from 'svelte/store';
+import { MarkerElement } from './element_marker.js';
+import { LineElement } from './element_line.js';
+export class GeometryManager {
+    elements;
+    map;
+    activeElement = writable(undefined);
+    selection_nodes;
+    canvas;
+    constructor(map) {
+        this.elements = writable([]);
+        this.map = map;
+        this.canvas = this.map.getCanvasContainer();
+        map.addSource('selection_nodes', {
+            type: 'geojson',
+            data: { type: 'FeatureCollection', features: [] }
+        });
+        this.selection_nodes = map.getSource('selection_nodes');
+        map.addLayer({
+            id: 'selection_nodes',
+            source: 'selection_nodes',
+            type: 'circle',
+            layout: {},
+            paint: {
+                'circle-color': '#ffffff',
+                'circle-opacity': ['get', 'opacity'],
+                'circle-radius': 4,
+                'circle-stroke-color': '#000000',
+                'circle-stroke-opacity': ['get', 'opacity'],
+                'circle-stroke-width': 1.5
+            }
+        });
+        map.on('mousedown', 'selection_nodes', (e) => {
+            const element = get(this.activeElement);
+            if (element == undefined)
+                return;
+            const feature = map.queryRenderedFeatures(e.point, { layers: ['selection_nodes'] })[0];
+            const updateSelectionNode = element.getSelectionNodeUpdater(feature.properties);
+            if (updateSelectionNode == undefined)
+                return;
+            e.preventDefault();
+            const onMove = (e) => {
+                e.preventDefault();
+                this.canvas.style.cursor = 'grabbing';
+                updateSelectionNode(e.lngLat.lng, e.lngLat.lat);
+                this.drawSelectionNodes(element.getSelectionNodes());
+            };
+            const onUp = () => {
+                map.off('mousemove', onMove);
+                this.canvas.style.cursor = 'default';
+            };
+            map.once('mouseup', onUp);
+            map.on('mousemove', onMove);
+        });
+        map.on('mouseover', 'selection_nodes', () => (this.canvas.style.cursor = 'move'));
+        map.on('mouseout', 'selection_nodes', () => (this.canvas.style.cursor = 'default'));
+        map.on('click', (e) => {
+            this.setActiveElement(undefined);
+            e.preventDefault();
+        });
+    }
+    setActiveElement(element) {
+        if (element) {
+            if (!get(this.elements).includes(element))
+                throw new Error('Element not in list');
+            this.drawSelectionNodes(element.getSelectionNodes());
+        }
+        else {
+            this.drawSelectionNodes([]);
+        }
+        this.activeElement.set(element);
+    }
+    drawSelectionNodes(nodes) {
+        this.selection_nodes.setData({
+            type: 'FeatureCollection',
+            features: nodes.map((n) => ({
+                type: 'Feature',
+                properties: { index: n.index, opacity: n.transparent ? 0.3 : 1 },
+                geometry: { type: 'Point', coordinates: n.coordinates }
+            }))
+        });
+    }
+    getElement(index) {
+        return get(this.elements)[index];
+    }
+    getNewMarker() {
+        const element = new MarkerElement(this, this.newName('Marker '));
+        this.addElement(element);
+        return element;
+    }
+    getNewLine() {
+        const element = new LineElement(this, this.newName('Line '));
+        this.addElement(element);
+        return element;
+    }
+    addElement(element) {
+        this.elements.update((elements) => [...elements, element]);
+    }
+    newName(prefix) {
+        const set = new Set();
+        const elements = get(this.elements);
+        elements.forEach((e) => {
+            const name = e.name;
+            if (!name.startsWith(prefix))
+                return;
+            const index = name.substring(prefix.length);
+            if (!/^[0-9]+/.test(index))
+                return;
+            set.add(parseInt(index, 10));
+        });
+        for (let i = 1; i <= elements.length + 1; i++) {
+            if (!set.has(i))
+                return prefix + i;
+        }
+        throw new Error('Unreachable');
+    }
+}

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

@@ -0,0 +1,14 @@
+import type { LayerFill, LayerLine, LayerSymbol } from './types.js';
+type LayerSpec = LayerFill | LayerLine | LayerSymbol;
+export declare class MapLayer<T extends LayerSpec> {
+    readonly map: maplibregl.Map;
+    readonly id: string;
+    readonly layoutProperties: T["layout"];
+    readonly paintProperties: T["paint"];
+    constructor(map: maplibregl.Map, id: string, source: string, type: 'symbol' | 'line' | 'fill');
+    setPaint(paint: T['paint']): void;
+    updatePaint<K extends keyof T['paint'], V extends T['paint'][K]>(key: K, value: V): void;
+    setLayout(layout: T['layout']): void;
+    updateLayout<K extends keyof T['layout'], V extends T['layout'][K]>(key: K, value: V): void;
+}
+export {};

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

@@ -0,0 +1,61 @@
+import { Color } from '@versatiles/style';
+export class MapLayer {
+    map;
+    id;
+    layoutProperties = {};
+    paintProperties = {};
+    constructor(map, id, source, type) {
+        this.map = map;
+        this.id = id;
+        let filter;
+        switch (type) {
+            case 'symbol':
+                filter = 'Point';
+                break;
+            case 'line':
+                filter = 'LineString';
+                break;
+            case 'fill':
+                filter = 'Polygon';
+                break;
+            default:
+                throw new Error('Invalid layer type');
+        }
+        this.map.addLayer({
+            id,
+            source,
+            type,
+            layout: this.layoutProperties,
+            paint: this.paintProperties,
+            filter: ['==', '$type', filter]
+        }, 'selection_nodes');
+    }
+    setPaint(paint) {
+        if (paint === undefined)
+            return;
+        const keys = new Set(Object.keys(paint).concat(Object.keys(this.paintProperties)));
+        for (const key of keys.values())
+            this.updatePaint(key, paint[key]);
+    }
+    updatePaint(key, value) {
+        if (value instanceof Color)
+            value = value.asString();
+        if (this.paintProperties[key] == value)
+            return;
+        this.map.setPaintProperty(this.id, key, value);
+        this.paintProperties[key] = value;
+    }
+    setLayout(layout) {
+        if (layout === undefined)
+            return;
+        const keys = new Set(Object.keys(layout).concat(Object.keys(this.layoutProperties)));
+        for (const key of keys.values())
+            this.updateLayout(key, layout[key]);
+    }
+    updateLayout(key, value) {
+        if (this.layoutProperties[key] == value)
+            return;
+        this.map.setLayoutProperty(this.id, key, value);
+        this.layoutProperties[key] = value;
+    }
+}

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

@@ -0,0 +1,112 @@
+import type { Color } from '@versatiles/style';
+import type { ExpressionSpecification, FormattedSpecification, PaddingSpecification, ResolvedImageSpecification, VariableAnchorOffsetCollectionSpecification } from 'maplibre-gl';
+export interface LayerFill {
+    layout: {
+        'fill-sort-key'?: number;
+        visibility?: 'visible' | 'none';
+    };
+    paint: {
+        'fill-antialias'?: boolean;
+        'fill-opacity'?: number;
+        'fill-color'?: string | Color;
+        'fill-outline-color'?: string | Color;
+        'fill-translate'?: [number, number];
+        'fill-translate-anchor'?: 'map' | 'viewport';
+        'fill-pattern'?: ResolvedImageSpecification;
+    };
+}
+export interface LayerLine {
+    layout: {
+        'line-cap'?: 'butt' | 'round' | 'square';
+        'line-join'?: 'bevel' | 'round' | 'miter';
+        'line-miter-limit'?: number;
+        'line-round-limit'?: number;
+        'line-sort-key'?: number;
+        visibility?: 'visible' | 'none';
+    };
+    paint: {
+        'line-opacity'?: number;
+        'line-color'?: string | Color;
+        'line-translate'?: [number, number];
+        'line-translate-anchor'?: 'map' | 'viewport';
+        'line-width'?: number;
+        'line-gap-width'?: number;
+        'line-offset'?: number;
+        'line-blur'?: number;
+        'line-dasharray'?: Array<number>;
+        'line-pattern'?: ResolvedImageSpecification;
+        'line-gradient'?: ExpressionSpecification;
+    };
+}
+export interface LayerSymbol {
+    layout: {
+        'symbol-placement'?: 'point' | 'line' | 'line-center';
+        'symbol-spacing'?: number;
+        'symbol-avoid-edges'?: boolean;
+        'symbol-sort-key'?: number;
+        'symbol-z-order'?: 'auto' | 'viewport-y' | 'source';
+        'icon-allow-overlap'?: boolean;
+        'icon-overlap'?: 'never' | 'always' | 'cooperative';
+        'icon-ignore-placement'?: boolean;
+        'icon-optional'?: boolean;
+        'icon-rotation-alignment'?: 'map' | 'viewport' | 'auto';
+        'icon-size'?: number;
+        'icon-text-fit'?: 'none' | 'width' | 'height' | 'both';
+        'icon-text-fit-padding'?: [number, number, number, number];
+        'icon-image'?: ResolvedImageSpecification;
+        'icon-rotate'?: number;
+        'icon-padding'?: PaddingSpecification;
+        'icon-keep-upright'?: boolean;
+        'icon-offset'?: [number, number];
+        'icon-anchor'?: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+        'icon-pitch-alignment'?: 'map' | 'viewport' | 'auto';
+        'text-pitch-alignment'?: 'map' | 'viewport' | 'auto';
+        'text-rotation-alignment'?: 'map' | 'viewport' | 'viewport-glyph' | 'auto';
+        'text-field'?: FormattedSpecification;
+        'text-font'?: Array<string>;
+        'text-size'?: number;
+        'text-max-width'?: number;
+        'text-line-height'?: number;
+        'text-letter-spacing'?: number;
+        'text-justify'?: 'auto' | 'left' | 'center' | 'right';
+        'text-radial-offset'?: number;
+        'text-variable-anchor'?: Array<'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>;
+        'text-variable-anchor-offset'?: VariableAnchorOffsetCollectionSpecification;
+        'text-anchor'?: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+        'text-max-angle'?: number;
+        'text-writing-mode'?: Array<'horizontal' | 'vertical'>;
+        'text-rotate'?: number;
+        'text-padding'?: number;
+        'text-keep-upright'?: boolean;
+        'text-transform'?: 'none' | 'uppercase' | 'lowercase';
+        'text-offset'?: [number, number];
+        'text-allow-overlap'?: boolean;
+        'text-overlap'?: 'never' | 'always' | 'cooperative';
+        'text-ignore-placement'?: boolean;
+        'text-optional'?: boolean;
+        visibility?: 'visible' | 'none';
+    };
+    paint: {
+        'icon-opacity'?: number;
+        'icon-color'?: string | Color;
+        'icon-halo-color'?: string | Color;
+        'icon-halo-width'?: number;
+        'icon-halo-blur'?: number;
+        'icon-translate'?: [number, number];
+        'icon-translate-anchor'?: 'map' | 'viewport';
+        'text-opacity'?: number;
+        'text-color'?: string | Color;
+        'text-halo-color'?: string | Color;
+        'text-halo-width'?: number;
+        'text-halo-blur'?: number;
+        'text-translate'?: [number, number];
+        'text-translate-anchor'?: 'map' | 'viewport';
+    };
+}
+export type ElementPoint = [number, number];
+export type ElementLine = ElementPoint[];
+export interface SelectionNode {
+    coordinates: ElementPoint;
+    index: number;
+    transparent?: boolean;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+import type { ElementPoint } from './types.js';
+export declare function getMiddlePoint(p0: ElementPoint, p1: ElementPoint): ElementPoint;

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

@@ -0,0 +1,11 @@
+export function getMiddlePoint(p0, p1) {
+    const y0 = lat2mercator(p0[1]);
+    const y1 = lat2mercator(p1[1]);
+    return [(p0[0] + p1[0]) / 2, mercator2lat((y0 + y1) / 2)];
+}
+function lat2mercator(lat) {
+    return Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI) / 360));
+}
+function mercator2lat(y) {
+    return ((2 * Math.atan(Math.exp(y)) - Math.PI / 2) * 180) / Math.PI;
+}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 import BasicMap from './components/BasicMap/BasicMap.svelte';
 import BBoxMap from './components/BBoxMap/BBoxMap.svelte';
-export { BasicMap, BBoxMap };
+import LocatorMap from './components/LocatorMap/LocatorMap.svelte';
+import MapEditor from './components/MapEditor/MapEditor.svelte';
+export { BasicMap, BBoxMap, LocatorMap, MapEditor };

package/dist/index.js

@@ -1,3 +1,5 @@
 import BasicMap from './components/BasicMap/BasicMap.svelte';
 import BBoxMap from './components/BBoxMap/BBoxMap.svelte';
-export { BasicMap, BBoxMap };
+import LocatorMap from './components/LocatorMap/LocatorMap.svelte';
+import MapEditor from './components/MapEditor/MapEditor.svelte';
+export { BasicMap, BBoxMap, LocatorMap, MapEditor };

package/dist/utils/draw/bbox.d.ts

@@ -0,0 +1,28 @@
+import type geojson from 'geojson';
+type DragPoint = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' | false;
+export declare const DragPointMap: Map<DragPoint, {
+    cursor: string;
+    flipH: DragPoint;
+    flipV: DragPoint;
+}>;
+export type BBox = [number, number, number, number];
+export declare class BBoxDrawer {
+    private source?;
+    private dragPoint;
+    private isDragging;
+    private map;
+    private canvas;
+    private inverted;
+    private bbox;
+    constructor(map: maplibregl.Map, bbox: BBox, color: string, inverted?: boolean);
+    private updateDragPoint;
+    private getAsFeatureCollection;
+    setGeometry(bbox: geojson.BBox): void;
+    getBounds(): maplibregl.LngLatBounds;
+    private redraw;
+    private getAsPixel;
+    private checkDragPointAt;
+    private getCursor;
+    private doDrag;
+}
+export {};