@versatiles/svelte 0.3.0 → 1.0.1

package/dist/components/AutoComplete.svelte

@@ -1,196 +0,0 @@
-<!-- AutoComplete.svelte -->
-<script lang="ts" generics="T">
-	import { isDarkMode } from '../utils/map_style.js';
-	/* eslint svelte/no-at-html-tags: off */
-
-	import { createEventDispatcher, onMount } from 'svelte';
-	const dispatch = createEventDispatcher();
-
-	type Item = { key: string; value: T };
-	type ResultItem = Item & { _label: string };
-
-	// Component properties
-	export let placeholder: string = '';
-	export let minChar: number = 3;
-	export let maxItems: number = 10;
-
-	// Reactive variables
-	export let items: Item[];
-
-	let inputElement: HTMLInputElement; // Reference to DOM element
-	let autocompleteElement: HTMLDivElement; // Reference to DOM element
-	let isOpen = false;
-	let results: ResultItem[] = [];
-	let selectedIndex = 0;
-	let inputText: string = '';
-
-	// Escape special characters in search string for use in regex
-	const regExpEscape = (s: string) => s.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
-
-	if (inputText.length >= minChar) {
-		const r = filterResults();
-		if (r.length > 0) {
-			const { key, value } = r[0];
-			inputText = key;
-			dispatch('change', JSON.parse(JSON.stringify(value)));
-		} else {
-			inputText = '';
-		}
-	}
-
-	export function setInputText(text: string) {
-		inputText = text;
-		results = filterResults();
-		close(0);
-	}
-
-	// Handle input change
-	function onChange() {
-		if (inputText.length >= minChar) {
-			results = filterResults();
-			selectedIndex = 0;
-			isOpen = true;
-		} else {
-			isOpen = false;
-		}
-	}
-
-	function onFocus() {
-		inputElement.setSelectionRange(0, 1000);
-	}
-
-	// Filter results based on search query
-	function filterResults(): ResultItem[] {
-		const searchText = inputText.trim();
-		const searchTextUpper = searchText.toUpperCase();
-		const searchReg = RegExp(regExpEscape(searchText), 'i');
-		return items
-			.filter((item) => item.key.toUpperCase().includes(searchTextUpper))
-			.slice(0, maxItems)
-			.map((item) => ({
-				...item,
-				_label: item.key.replace(searchReg, '<span>$&</span>')
-			}));
-	}
-
-	// Handle keyboard navigation
-	function onKeyDown(event: KeyboardEvent) {
-		switch (event.key) {
-			case 'ArrowDown':
-				if (selectedIndex < results.length - 1) selectedIndex += 1;
-				break;
-			case 'ArrowUp':
-				if (selectedIndex > 0) selectedIndex -= 1;
-				break;
-			case 'Enter':
-				event.preventDefault();
-				close(selectedIndex);
-				break;
-			case 'Escape':
-				event.preventDefault();
-				close();
-				break;
-		}
-	}
-
-	// Close the autocomplete and select an item
-	function close(index = -1) {
-		isOpen = false;
-		if (index >= 0 && results[index]) {
-			const { key, value } = results[index];
-			inputText = key;
-			dispatch('change', JSON.parse(JSON.stringify(value)));
-		}
-	}
-
-	onMount(() => {
-		const darkMode = isDarkMode(autocompleteElement);
-		autocompleteElement.style.setProperty('--bg-color', darkMode ? '#000' : '#fff');
-		autocompleteElement.style.setProperty('--fg-color', darkMode ? '#fff' : '#000');
-	});
-</script>
-
-<svelte:window on:click={() => close()} />
-
-<div class="autocomplete" bind:this={autocompleteElement}>
-	<input
-		type="text"
-		bind:value={inputText}
-		{placeholder}
-		autocomplete="off"
-		on:input={onChange}
-		on:keydown={onKeyDown}
-		on:focusin={onFocus}
-		on:click={(e) => e.stopPropagation()}
-		bind:this={inputElement}
-		aria-activedescendant={isOpen ? `result-${selectedIndex}` : undefined}
-		aria-autocomplete="list"
-		aria-controls="autocomplete-results"
-	/>
-	<div class="autocomplete-results" class:hide-results={!isOpen}>
-		{#each results as result, i}
-			<button
-				on:click={() => close(i)}
-				class={i === selectedIndex ? ' is-active' : ''}
-				role="option"
-				aria-selected={i === selectedIndex}
-			>
-				{@html result._label}
-			</button>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.autocomplete {
-		position: relative;
-		border-radius: 0.5em;
-		background: color-mix(in srgb, var(--bg-color) 80%, transparent);
-		box-sizing: border-box;
-		line-height: normal;
-	}
-
-	input {
-		width: 100%;
-		display: block;
-		box-sizing: border-box;
-		padding: 0.3em 0.6em;
-		border: none;
-		background: none;
-		color: var(--fg-color);
-	}
-
-	.autocomplete-results {
-		padding: 0;
-		margin: 0;
-		background: none;
-		width: 100%;
-		display: block;
-		border-radius: 0 0 0.5em 0.5em;
-	}
-
-	.autocomplete-results.hide-results {
-		display: none;
-	}
-
-	button {
-		padding: 0.2rem 0.5rem;
-		cursor: pointer;
-		border: none;
-		display: block;
-		background: transparent;
-		font-weight: normal;
-		color: color-mix(in srgb, var(--fg-color) 50%, transparent);
-		width: 100%;
-		text-align: left;
-	}
-
-	button > :global(span) {
-		color: var(--fg-color);
-	}
-
-	button.is-active,
-	button:hover {
-		background-color: color-mix(in srgb, var(--fg-color) 15%, transparent);
-	}
-</style>

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

@@ -1,5 +0,0 @@
-import type { LngLatBounds } from 'maplibre-gl';
-export declare abstract class AbstractDrawer<Geometry> {
-    abstract setGeometry(geometry: Geometry): void;
-    abstract getBounds(): LngLatBounds;
-}

package/dist/utils/draw/abstract.js

@@ -1,2 +0,0 @@
-export class AbstractDrawer {
-}

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

@@ -1,24 +0,0 @@
-import type geojson from 'geojson';
-import type { SymbolStyle } from './style.js';
-import { AbstractDrawer } from './abstract.js';
-export type Point = [number, number];
-export declare class MarkerDrawer extends AbstractDrawer<geojson.BBox> {
-    private source?;
-    private isDragging;
-    private dragPoint;
-    private map;
-    private canvas;
-    private symbolStyle;
-    private point;
-    constructor(map: maplibregl.Map, options?: {
-        point?: Point;
-    } & SymbolStyle);
-    private updateDragPoint;
-    private getAsFeatureCollection;
-    setGeometry(point: geojson.Position): void;
-    getBounds(): maplibregl.LngLatBounds;
-    private redraw;
-    private getAsPixel;
-    private checkDragPointAt;
-    private doDrag;
-}

package/dist/utils/draw/marker.js

@@ -1,97 +0,0 @@
-import { AbstractDrawer } from './abstract.js';
-import { getSymbolStyle } from './style.js';
-const maplibregl = await import('maplibre-gl');
-const { LngLatBounds } = maplibregl;
-export class MarkerDrawer extends AbstractDrawer {
-    source;
-    isDragging = false;
-    dragPoint = false;
-    map;
-    canvas;
-    symbolStyle;
-    point;
-    constructor(map, options) {
-        super();
-        this.point = options?.point ?? [0, 0];
-        this.symbolStyle = getSymbolStyle(options);
-        this.map = map;
-        const sourceId = 'marker_' + Math.random().toString(36).slice(2);
-        if (this.source)
-            throw new Error('BBoxDrawer already added to map');
-        map.addSource(sourceId, { type: 'geojson', data: this.getAsFeatureCollection() });
-        map.addLayer({
-            id: 'marker_' + Math.random().toString(36).slice(2),
-            type: 'symbol',
-            source: sourceId,
-            filter: ['==', '$type', 'Point'],
-            ...this.symbolStyle
-        });
-        this.source = map.getSource(sourceId);
-        this.canvas = map.getCanvasContainer();
-        map.on('mousemove', (e) => {
-            if (e.originalEvent.buttons % 2 === 0)
-                return this.checkDragPointAt(e.point);
-            if (!this.isDragging)
-                return;
-            if (!this.dragPoint)
-                return this.checkDragPointAt(e.point);
-            this.doDrag(e.lngLat);
-            this.redraw();
-            e.preventDefault();
-        });
-        map.on('mousedown', (e) => {
-            if (this.isDragging)
-                return;
-            if (e.originalEvent.buttons % 2) {
-                this.checkDragPointAt(e.point);
-                if (this.dragPoint)
-                    this.isDragging = true;
-                if (this.isDragging)
-                    e.preventDefault();
-            }
-        });
-        map.on('mouseup', () => {
-            this.isDragging = false;
-            this.updateDragPoint(false);
-        });
-    }
-    updateDragPoint(dragPoint) {
-        if (this.dragPoint === dragPoint)
-            return;
-        this.dragPoint = dragPoint;
-        this.canvas.style.cursor = dragPoint ? 'move' : 'default';
-    }
-    getAsFeatureCollection() {
-        return {
-            type: 'FeatureCollection',
-            features: [getPoint(this.point)]
-        };
-        function getPoint(coordinates) {
-            return { type: 'Feature', geometry: { type: 'Point', coordinates }, properties: {} };
-        }
-    }
-    setGeometry(point) {
-        this.point = [point[0], point[1]];
-        this.redraw();
-    }
-    getBounds() {
-        return new LngLatBounds(this.point, this.point);
-    }
-    redraw() {
-        this.source?.setData(this.getAsFeatureCollection());
-    }
-    getAsPixel() {
-        const p = this.map.project([this.point[0], this.point[1]]);
-        return [p.x, p.y];
-    }
-    checkDragPointAt(point) {
-        const maxDistance = 5;
-        const { x, y } = point;
-        const [x0, y0] = this.getAsPixel();
-        const distance = Math.sqrt(Math.pow(x - x0, 2) + Math.pow(y - y0, 2));
-        this.updateDragPoint(distance < maxDistance);
-    }
-    doDrag(lngLat) {
-        this.point = [Math.round(lngLat.lng * 1e5) / 1e5, Math.round(lngLat.lat * 1e5) / 1e5];
-    }
-}

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

@@ -1,19 +0,0 @@
-import type { FillLayerSpecification, LineLayerSpecification, SymbolLayerSpecification } from 'maplibre-gl';
-export type AbstractLayerStyle<T extends FillLayerSpecification | LineLayerSpecification | SymbolLayerSpecification> = {
-    paint: {} & T['paint'];
-    layout: {} & T['layout'];
-};
-export interface FillStyle {
-    color?: string;
-    fillColor?: string;
-}
-export declare function getFillStyle(style?: FillStyle): AbstractLayerStyle<FillLayerSpecification>;
-export interface LineStyle {
-    color?: string;
-    lineColor?: string;
-}
-export declare function getLineStyle(style?: LineStyle): AbstractLayerStyle<LineLayerSpecification>;
-export interface SymbolStyle {
-    color?: string;
-}
-export declare function getSymbolStyle(style?: SymbolStyle): AbstractLayerStyle<SymbolLayerSpecification>;

package/dist/utils/draw/style.js

@@ -1,40 +0,0 @@
-import { Color } from '@versatiles/style';
-export function getFillStyle(style) {
-    const result = {
-        layout: {},
-        paint: {}
-    };
-    if (style) {
-        if (style.fillColor) {
-            result.paint['fill-color'] = Color.parse(style.fillColor).asString();
-        }
-        else if (style.color) {
-            result.paint['fill-color'] = Color.parse(style.color).fade(0.8).asString();
-        }
-    }
-    return result;
-}
-export function getLineStyle(style) {
-    const result = {
-        layout: { 'line-cap': 'round', 'line-join': 'round' },
-        paint: {}
-    };
-    if (style) {
-        const color = style.lineColor ?? style.color;
-        if (color)
-            result.paint['line-color'] = Color.parse(color).asString();
-    }
-    return result;
-}
-export function getSymbolStyle(style) {
-    const result = {
-        layout: {},
-        paint: {}
-    };
-    result.paint['icon-color'] = Color.parse(style?.color ?? '#a00').asString();
-    result.paint['icon-halo-color'] = Color.parse('#fff').asString();
-    result.paint['icon-halo-width'] = 0.5;
-    result.paint['icon-halo-blur'] = 0;
-    result.layout['icon-image'] = 'basics:icon-embassy';
-    return result;
-}