@versatiles/svelte 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/AutoComplete/AutoComplete.svelte

@@ -0,0 +1,159 @@
+<!-- AutoComplete.svelte -->
+<script generics="T">import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let placeholder = "";
+export let minChar = 0;
+export let maxItems = 10;
+export let initialText = "";
+export let items;
+let input;
+let isOpen = false;
+let results = [];
+let inputText = initialText;
+let selectedIndex = 0;
+const regExpEscape = (s) => s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
+if (inputText.length >= minChar) {
+  const r = filterResults();
+  if (r.length > 0) {
+    const { key, value } = r[0];
+    inputText = key;
+    setTimeout(() => dispatch("change", JSON.parse(JSON.stringify(value))), 0);
+  } else {
+    inputText = "";
+  }
+}
+function onChange() {
+  if (inputText.length >= minChar) {
+    results = filterResults();
+    selectedIndex = 0;
+    isOpen = true;
+  } else {
+    isOpen = false;
+  }
+}
+function onFocus() {
+  input.setSelectionRange(0, 1e3);
+}
+function filterResults() {
+  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>")
+  }));
+}
+function onKeyDown(event) {
+  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;
+  }
+}
+function close(index = -1) {
+  isOpen = false;
+  if (index > -1 && results[index]) {
+    const { key, value } = results[index];
+    inputText = key;
+    dispatch("change", JSON.parse(JSON.stringify(value)));
+  }
+}
+</script>
+
+<svelte:window on:click={() => close()} />
+
+<div class="autocomplete">
+	<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={input}
+		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 {
+		--bg-color: var(--autocomplete-bg-color, light-dark(white, black));
+		--fg-color: var(--autocomplete-text-color, light-dark(black, white));
+		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/AutoComplete/AutoComplete.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare class __sveltets_Render<T> {
+    props(): {
+        placeholder?: string;
+        minChar?: number;
+        maxItems?: number;
+        initialText?: string;
+        items: {
+            key: string;
+            value: T;
+        }[];
+    };
+    events(): {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type AutoCompleteProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type AutoCompleteEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type AutoCompleteSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class AutoComplete<T> extends SvelteComponent<AutoCompleteProps<T>, AutoCompleteEvents<T>, AutoCompleteSlots<T>> {
+}
+export {};

package/dist/BBoxMap/BBoxMap.d.ts

@@ -0,0 +1,15 @@
+import type { GeoJSON } from 'geojson';
+import type { LngLat, Point } from 'maplibre-gl';
+export type BBox = [number, number, number, number];
+export type BBoxDrag = '0_' | '1_' | '_0' | '_1' | '00' | '01' | '10' | '11' | false;
+export declare function getBBoxDrag(point: Point, bboxPixel: BBox): BBoxDrag;
+export declare function dragBBox(bbox: BBox, drag: BBoxDrag, lngLat: LngLat): {
+    bbox: BBox;
+    drag: BBoxDrag;
+};
+export declare function getCursor(drag: BBoxDrag): string | false;
+export declare function getBBoxGeometry(bbox: BBox): GeoJSON;
+export declare function getBBoxes(): {
+    key: string;
+    value: BBox;
+}[];

package/dist/BBoxMap/BBoxMap.js

@@ -0,0 +1,209 @@
+import bboxes from './bboxes.json';
+export function getBBoxDrag(point, bboxPixel) {
+    const maxDistance = 5;
+    const { x, y } = point;
+    const [x0, y0, x1, y1] = bboxPixel;
+    // Don't think outside the box
+    if (x < x0 - maxDistance)
+        return false;
+    if (x > x1 + maxDistance)
+        return false;
+    if (y < y0 - maxDistance)
+        return false;
+    if (y > y1 + maxDistance)
+        return false;
+    const drag = [
+        Math.abs(x0 - x) < maxDistance,
+        Math.abs(y0 - y) < maxDistance,
+        Math.abs(x1 - x) < maxDistance,
+        Math.abs(y1 - y) < maxDistance
+    ];
+    if (drag[0] && drag[2]) {
+        if (Math.abs(x0 - x) < Math.abs(x1 - x)) {
+            drag[2] = false;
+        }
+        else {
+            drag[0] = false;
+        }
+    }
+    if (drag[1] && drag[3]) {
+        if (Math.abs(y0 - y) < Math.abs(y1 - y)) {
+            drag[3] = false;
+        }
+        else {
+            drag[1] = false;
+        }
+    }
+    if (drag[0]) {
+        if (drag[1])
+            return '01';
+        if (drag[3])
+            return '00';
+        return '0_';
+    }
+    else if (drag[1]) {
+        if (drag[2])
+            return '11';
+        return '_1';
+    }
+    else if (drag[2]) {
+        if (drag[3])
+            return '10';
+        return '1_';
+    }
+    else if (drag[3]) {
+        return '_0';
+    }
+    else
+        return false;
+}
+export function dragBBox(bbox, drag, lngLat) {
+    const x = Math.round(lngLat.lng * 1e3) / 1e3;
+    const y = Math.round(lngLat.lat * 1e3) / 1e3;
+    switch (drag) {
+        case '_0':
+            bbox[1] = y;
+            break;
+        case '_1':
+            bbox[3] = y;
+            break;
+        case '0_':
+            bbox[0] = x;
+            break;
+        case '00':
+            bbox[0] = x;
+            bbox[1] = y;
+            break;
+        case '01':
+            bbox[0] = x;
+            bbox[3] = y;
+            break;
+        case '1_':
+            bbox[2] = x;
+            break;
+        case '10':
+            bbox[2] = x;
+            bbox[1] = y;
+            break;
+        case '11':
+            bbox[2] = x;
+            bbox[3] = y;
+            break;
+    }
+    if (bbox[2] < bbox[0]) {
+        // flip horizontal
+        const t = bbox[0];
+        bbox[0] = bbox[2];
+        bbox[2] = t;
+        switch (drag) {
+            case '0_':
+                drag = '1_';
+                break;
+            case '00':
+                drag = '10';
+                break;
+            case '01':
+                drag = '11';
+                break;
+            case '1_':
+                drag = '0_';
+                break;
+            case '10':
+                drag = '00';
+                break;
+            case '11':
+                drag = '01';
+                break;
+        }
+    }
+    if (bbox[3] < bbox[1]) {
+        // flip vertical
+        const t = bbox[1];
+        bbox[1] = bbox[3];
+        bbox[3] = t;
+        switch (drag) {
+            case '_0':
+                drag = '_1';
+                break;
+            case '_1':
+                drag = '_0';
+                break;
+            case '00':
+                drag = '01';
+                break;
+            case '01':
+                drag = '00';
+                break;
+            case '10':
+                drag = '11';
+                break;
+            case '11':
+                drag = '10';
+                break;
+        }
+    }
+    return { drag, bbox };
+}
+export function getCursor(drag) {
+    switch (drag) {
+        case '_0':
+            return 'ns-resize';
+        case '_1':
+            return 'ns-resize';
+        case '0_':
+            return 'ew-resize';
+        case '00':
+            return 'nesw-resize';
+        case '01':
+            return 'nwse-resize';
+        case '1_':
+            return 'ew-resize';
+        case '10':
+            return 'nwse-resize';
+        case '11':
+            return 'nesw-resize';
+    }
+    return false;
+}
+export function getBBoxGeometry(bbox) {
+    return {
+        type: 'FeatureCollection',
+        features: [polygon(getRing([-180, -86, 180, 86]), getRing(bbox)), linestring(getRing(bbox))]
+    };
+    function polygon(...coordinates) {
+        return {
+            type: 'Feature',
+            geometry: { type: 'Polygon', coordinates },
+            properties: {}
+        };
+    }
+    function linestring(coordinates) {
+        return {
+            type: 'Feature',
+            geometry: { type: 'LineString', coordinates },
+            properties: {}
+        };
+    }
+    function getRing(bbox) {
+        const x0 = Math.min(bbox[0], bbox[2]);
+        const x1 = Math.max(bbox[0], bbox[2]);
+        const y0 = Math.min(bbox[1], bbox[3]);
+        const y1 = Math.max(bbox[1], bbox[3]);
+        return [
+            [x0, y0],
+            [x1, y0],
+            [x1, y1],
+            [x0, y1],
+            [x0, y0]
+        ];
+    }
+}
+export function getBBoxes() {
+    return bboxes.map((e) => {
+        const key = e[0];
+        const value = e.slice(1, 5);
+        value[2] = Math.round((value[2] + value[0]) * 1e5) / 1e5;
+        value[3] = Math.round((value[3] + value[1]) * 1e5) / 1e5;
+        return { key, value };
+    });
+}

package/dist/BBoxMap/BBoxMap.svelte

@@ -0,0 +1,155 @@
+<!-- BBoxMap.svelte -->
+<script>import { onMount } from "svelte";
+import maplibregl, {} from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { dragBBox, getBBoxDrag, getBBoxes, getBBoxGeometry, getCursor } from "./BBoxMap.js";
+import AutoComplete from "../AutoComplete/AutoComplete.svelte";
+import { getMapStyle, isDarkMode } from "../utils/style.js";
+import { getCountry } from "../utils/location.js";
+const bboxes = getBBoxes();
+let container;
+const worldBBox = [-180, -85, 180, 85];
+const startTime = Date.now();
+export let selectedBBox = worldBBox;
+let map;
+let initialCountry = getCountry();
+onMount(() => {
+  const darkMode = isDarkMode(container);
+  map = new maplibregl.Map({
+    container,
+    style: getMapStyle(darkMode),
+    bounds: selectedBBox,
+    renderWorldCopies: false,
+    dragRotate: false,
+    attributionControl: { compact: false }
+  });
+  map.setPadding({ top: 31 + 5, right: 5, bottom: 5, left: 5 });
+  const canvas = map.getCanvasContainer();
+  map.on("load", () => {
+    map.addSource("bbox", { type: "geojson", data: getBBoxGeometry(selectedBBox) });
+    map.addLayer({
+      id: "bbox-line",
+      type: "line",
+      source: "bbox",
+      filter: ["==", "$type", "LineString"],
+      layout: { "line-cap": "round", "line-join": "round" },
+      paint: { "line-color": darkMode ? "#FFFFFF" : "#000000", "line-width": 0.5 }
+    });
+    map.addLayer({
+      id: "bbox-fill",
+      type: "fill",
+      source: "bbox",
+      filter: ["==", "$type", "Polygon"],
+      paint: { "fill-color": darkMode ? "#FFFFFF" : "#000000", "fill-opacity": 0.2 }
+    });
+  });
+  function getDrag(point) {
+    const { x: x0, y: y1 } = map.project([selectedBBox[0], selectedBBox[1]]);
+    const { x: x1, y: y0 } = map.project([selectedBBox[2], selectedBBox[3]]);
+    return getBBoxDrag(point, [x0, y0, x1, y1]);
+  }
+  let lastDrag = false;
+  let dragging = false;
+  map.on("mousemove", (e) => {
+    if (dragging) {
+      if (e.originalEvent.buttons % 2) {
+        const { drag, bbox } = dragBBox(selectedBBox, lastDrag, e.lngLat);
+        lastDrag = drag;
+        selectedBBox = bbox;
+        redrawBBox();
+        e.preventDefault();
+      } else {
+        dragging = false;
+      }
+    } else {
+      const drag = getDrag(e.point);
+      if (drag !== lastDrag) {
+        lastDrag = drag;
+        canvas.style.cursor = getCursor(drag) || "grab";
+      }
+    }
+  });
+  map.on("mousedown", (e) => {
+    if (e.originalEvent.buttons % 2) {
+      const drag = getDrag(e.point);
+      lastDrag = drag;
+      if (drag) {
+        dragging = true;
+        e.preventDefault();
+      }
+    }
+  });
+  map.on("mouseup", () => dragging = false);
+  return () => map.remove();
+});
+function redrawBBox() {
+  const bboxSource = map.getSource("bbox");
+  bboxSource.setData(getBBoxGeometry(selectedBBox));
+}
+function flyTo(bbox) {
+  selectedBBox = bbox ?? worldBBox;
+  if (map) {
+    if (map.getSource("bbox")) redrawBBox();
+    const transform = map.cameraForBounds(selectedBBox);
+    if (transform == null) return;
+    transform.zoom = transform.zoom ?? 0 - 0.5;
+    transform.bearing = 0;
+    transform.pitch = 0;
+    if (Date.now() - startTime < 1e3) {
+      map.jumpTo(transform);
+    } else {
+      map.flyTo({ ...transform, essential: true, speed: 5 });
+    }
+  }
+}
+</script>
+
+<div class="container">
+	{#if bboxes}
+		<div class="input">
+			<AutoComplete
+				items={bboxes}
+				placeholder="Find country, region or city …"
+				initialText={initialCountry}
+				on:change={(e) => flyTo(e.detail)}
+			/>
+		</div>
+	{/if}
+	<div class="map" bind:this={container}></div>
+</div>
+
+<style>
+	.container {
+		--bg-color: var(--bboxmap-bg-color, light-dark(white, black));
+		--fg-color: var(--bboxmap-text-color, light-dark(black, white));
+		width: 100%;
+		height: 100%;
+		position: relative;
+		min-height: 6em;
+	}
+	.map {
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		bottom: 0px;
+		right: 0px;
+	}
+	:global(.maplibregl-ctrl-attrib) {
+		background-color: color-mix(in srgb, var(--bg-color) 50%, transparent) !important;
+		color: var(--fg-color) !important;
+		opacity: 0.5;
+		font-size: 0.85em;
+		padding: 0.1em !important;
+		line-height: normal !important;
+	}
+	:global(.maplibregl-ctrl-attrib a) {
+		color: var(--fg-color) !important;
+	}
+	.input {
+		position: absolute;
+		top: 0.5em;
+		left: 0.5em;
+		right: 0.5em;
+		z-index: 10;
+	}
+</style>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import 'maplibre-gl/dist/maplibre-gl.css';
+import type { BBox } from './BBoxMap.js';
+declare const __propDef: {
+    props: {
+        selectedBBox?: BBox;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type BBoxMapProps = typeof __propDef.props;
+export type BBoxMapEvents = typeof __propDef.events;
+export type BBoxMapSlots = typeof __propDef.slots;
+export default class BBoxMap extends SvelteComponent<BBoxMapProps, BBoxMapEvents, BBoxMapSlots> {
+}
+export {};