@viamrobotics/test-widgets 0.0.1

package/dist/components/maplibre/index.svelte

@@ -0,0 +1,232 @@
+<!--
+  @component
+
+  Creates a maplibre-gl map that will fill its parent.
+
+  Children will mount once the map is fully loaded.
+
+  ```svelte
+    <MapLibre mapProvider="open-street">
+      <MapLibreMarker lngLat={{ lng: 0, lat: 0 }} />
+    </MapLibre>
+  ```
+
+  ```svelte
+    <MapLibre mapProvider="google-maps" mapProviderKey="mycoolkey">
+      <MapLibreMarker lngLat={{ lng: 0, lat: 0 }} />
+    </MapLibre>
+  ```
+-->
+
+<script lang="ts">
+	import 'maplibre-gl/dist/maplibre-gl.css'
+
+	import type { ClassValue, HTMLAttributes } from 'svelte/elements'
+
+	import { LngLat, Map, type MapOptions } from 'maplibre-gl'
+	import { onMount, type Snippet, tick } from 'svelte'
+
+	import { provideMapContext } from './hooks'
+	import { getStyleSpecification } from './style'
+	import { type MapProvider, MapProviders } from './types'
+	import { DEFAULT_MAX_ZOOM } from './zoom'
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		/** The minimum camera pitch. */
+		minPitch?: number
+		/** The maximum camera pitch. */
+		maxPitch?: number
+		/** The map zoom. */
+		zoom?: number
+		/** The maximum zoom level of the map (0-24). */
+		minZoom?: number
+		/** The maximum zoom level of the map (0-24). */
+		maxZoom?: number
+		/** The class name to apply to the map container. */
+		class?: ClassValue
+
+		/**
+		 * The map center.
+		 *
+		 * @default { lng: -73.984421, lat: 40.7718116 }
+		 * The Viam Robotics office.
+		 */
+		center?: LngLat
+
+		/** A binding to the MapLibre Map instance */
+		map?: Map
+		options?: Partial<MapOptions>
+
+		/**
+		 * The map provider to use.
+		 *
+		 * @default 'open-street'
+		 */
+		mapProvider?: MapProvider
+
+		/**
+		 * The API key for the map provider.
+		 *
+		 * @default undefined
+		 */
+		mapProviderKey?: string
+
+		/**
+		 * Whether to show the satellite view.
+		 *
+		 * @default false
+		 */
+		satellite?: boolean
+
+		children?: Snippet
+		layer?: Snippet
+
+		/** Fired after the map has been created. */
+		onCreate?: (map: Map) => void
+		/** Fired when the map camera moves. */
+		onMove?: (map: Map) => void
+		/** Fired when the map resizes. */
+		onResize?: (map: Map) => void
+	}
+
+	let {
+		minPitch = 0,
+		maxPitch = 60,
+		zoom = 9,
+		minZoom = 0,
+		maxZoom = DEFAULT_MAX_ZOOM,
+		class: className,
+		center = new LngLat(-73.984_421, 40.771_811_6),
+		map = $bindable(),
+		options,
+		mapProvider = MapProviders.openStreet,
+		mapProviderKey,
+		satellite = false,
+		onCreate,
+		onMove,
+		onResize,
+		children,
+		layer,
+		...rest
+	}: Props = $props()
+
+	const context = provideMapContext(center, zoom, maxZoom, mapProvider, mapProviderKey, satellite)
+
+	let container = $state.raw<HTMLDivElement>()
+	let created = $state(false)
+
+	const setMapSize = () => {
+		const canvas = map?.getCanvas()
+		context.size.set({
+			width: canvas?.clientWidth ?? 0,
+			height: canvas?.clientHeight ?? 0,
+		})
+	}
+
+	const handleCreate = () => {
+		if (map === undefined) {
+			return
+		}
+
+		created = true
+		onCreate?.(map)
+
+		// Resize the map after any slots have been rendered.
+		void tick().then(() => map?.resize())
+	}
+
+	const handleMove = () => {
+		if (map === undefined) {
+			return
+		}
+
+		context.center.set(map.getCenter())
+		context.zoom.set(map.getZoom())
+		onMove?.(map)
+	}
+
+	const handleResize = () => {
+		if (map === undefined) {
+			return
+		}
+
+		setMapSize()
+		context.center.set(map.getCenter())
+		context.zoom.set(map.getZoom())
+		onResize?.(map)
+	}
+
+	const updateStyle = async (provider: MapProvider, apiKey?: string) => {
+		const style = await getStyleSpecification(provider, apiKey)
+		map?.setStyle(style)
+	}
+
+	$effect(() => {
+		map?.setMinPitch(minPitch)
+	})
+
+	$effect(() => {
+		map?.setMaxPitch(maxPitch)
+	})
+
+	$effect(() => {
+		map?.setZoom(zoom)
+	})
+
+	$effect(() => {
+		map?.setCenter(center)
+	})
+
+	$effect(() => {
+		void updateStyle(mapProvider, mapProviderKey)
+	})
+
+	onMount(() => {
+		if (container === undefined) {
+			return
+		}
+
+		map = new Map({
+			container,
+			center,
+			zoom,
+			minPitch,
+			maxPitch,
+			minZoom,
+			maxZoom,
+			...options,
+		})
+
+		context.map.set(map)
+
+		map.on('move', handleMove)
+		map.on('resize', handleResize)
+		map.on('style.load', handleCreate)
+
+		void updateStyle(mapProvider, mapProviderKey)
+
+		return () => {
+			map?.off('move', handleMove)
+			map?.off('resize', handleResize)
+			map?.off('style.load', handleCreate)
+		}
+	})
+</script>
+
+{#if created}
+	{@render children?.()}
+{/if}
+
+<div
+	class={['h-full', className]}
+	{...rest}
+>
+	<div
+		class="h-full"
+		bind:this={container}
+	></div>
+
+	{#if created}
+		{@render layer?.()}
+	{/if}
+</div>

package/dist/components/maplibre/index.svelte.d.ts

@@ -0,0 +1,75 @@
+import 'maplibre-gl/dist/maplibre-gl.css';
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+import { LngLat, Map, type MapOptions } from 'maplibre-gl';
+import { type Snippet } from 'svelte';
+import { type MapProvider } from './types';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** The minimum camera pitch. */
+    minPitch?: number;
+    /** The maximum camera pitch. */
+    maxPitch?: number;
+    /** The map zoom. */
+    zoom?: number;
+    /** The maximum zoom level of the map (0-24). */
+    minZoom?: number;
+    /** The maximum zoom level of the map (0-24). */
+    maxZoom?: number;
+    /** The class name to apply to the map container. */
+    class?: ClassValue;
+    /**
+     * The map center.
+     *
+     * @default { lng: -73.984421, lat: 40.7718116 }
+     * The Viam Robotics office.
+     */
+    center?: LngLat;
+    /** A binding to the MapLibre Map instance */
+    map?: Map;
+    options?: Partial<MapOptions>;
+    /**
+     * The map provider to use.
+     *
+     * @default 'open-street'
+     */
+    mapProvider?: MapProvider;
+    /**
+     * The API key for the map provider.
+     *
+     * @default undefined
+     */
+    mapProviderKey?: string;
+    /**
+     * Whether to show the satellite view.
+     *
+     * @default false
+     */
+    satellite?: boolean;
+    children?: Snippet;
+    layer?: Snippet;
+    /** Fired after the map has been created. */
+    onCreate?: (map: Map) => void;
+    /** Fired when the map camera moves. */
+    onMove?: (map: Map) => void;
+    /** Fired when the map resizes. */
+    onResize?: (map: Map) => void;
+}
+/**
+ * Creates a maplibre-gl map that will fill its parent.
+ *
+ * Children will mount once the map is fully loaded.
+ *
+ * ```svelte
+ *   <MapLibre mapProvider="open-street">
+ *     <MapLibreMarker lngLat={{ lng: 0, lat: 0 }} />
+ *   </MapLibre>
+ * ```
+ *
+ * ```svelte
+ *   <MapLibre mapProvider="google-maps" mapProviderKey="mycoolkey">
+ *     <MapLibreMarker lngLat={{ lng: 0, lat: 0 }} />
+ *   </MapLibre>
+ * ```
+ */
+declare const Index: import("svelte").Component<Props, {}, "map">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/maplibre/lnglat-input.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	import { SliderInput } from '@viamrobotics/prime-core'
+	import { LngLat } from 'maplibre-gl'
+
+	interface Props {
+		/** The label for the Lat,Lng, pair. Defaults to Latitude, Longitude. */
+		label?: string
+		/** Whether the inputs are readonly. */
+		readonly?: boolean
+		/** The longitude value. */
+		lng?: number
+		/** The latitude value. */
+		lat?: number
+		children?: Snippet
+		oninput: (lngLat: LngLat) => void
+	}
+
+	const { label, readonly = false, lng, lat, oninput, children }: Props = $props()
+
+	let latInput = $state.raw<HTMLInputElement>()
+	let lngInput = $state.raw<HTMLInputElement>()
+</script>
+
+<div class="flex items-end gap-1.5">
+	<SliderInput
+		bind:input={latInput}
+		type="number"
+		label={label ?? 'Latitude'}
+		placeholder="0"
+		incrementor={readonly ? undefined : 'slider'}
+		value={lat}
+		step={1}
+		class="grow"
+		on:change={() => oninput(new LngLat(lng ?? 0, latInput?.valueAsNumber ?? 0))}
+		on:input={() => oninput(new LngLat(lng ?? 0, latInput?.valueAsNumber ?? 0))}
+		{readonly}
+	/>
+	<SliderInput
+		bind:input={lngInput}
+		type="number"
+		label={label ? '' : 'Longitude'}
+		placeholder="0"
+		incrementor={readonly ? undefined : 'slider'}
+		value={lng}
+		step={1}
+		class="grow"
+		on:change={() => oninput(new LngLat(lngInput?.valueAsNumber ?? 0, lat ?? 0))}
+		on:input={() => oninput(new LngLat(lngInput?.valueAsNumber ?? 0, lat ?? 0))}
+		{readonly}
+	/>
+	{@render children?.()}
+</div>

package/dist/components/maplibre/lnglat-input.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import { LngLat } from 'maplibre-gl';
+interface Props {
+    /** The label for the Lat,Lng, pair. Defaults to Latitude, Longitude. */
+    label?: string;
+    /** Whether the inputs are readonly. */
+    readonly?: boolean;
+    /** The longitude value. */
+    lng?: number;
+    /** The latitude value. */
+    lat?: number;
+    children?: Snippet;
+    oninput: (lngLat: LngLat) => void;
+}
+declare const LnglatInput: import("svelte").Component<Props, {}, "">;
+type LnglatInput = ReturnType<typeof LnglatInput>;
+export default LnglatInput;

package/dist/components/maplibre/marker.svelte

@@ -0,0 +1,60 @@
+<!--
+  @component
+
+  Creates a marker on a maplibre map. Must be a child of `<MapLibre>`.
+  
+  ```svelte
+    <MapLibreMarker
+      lngLat={{ lng: 0, lat: 0 }}
+      scale={1}
+      color={'blue'}
+    />
+  ```
+-->
+<script lang="ts">
+	import { LngLat, Marker } from 'maplibre-gl'
+
+	import { useMapLibre } from './hooks'
+
+	interface Props {
+		/** The longitude of the marker. */
+		lng?: number
+		/** The latitude of the marker. */
+		lat?: number
+		/** The rotation angle of the marker (clockwise, in degrees) */
+		rotation?: number
+		/** The relative size of the marker. */
+		scale?: number
+		/** The marker color. */
+		color?: string
+		/** The marker icon */
+		element?: HTMLElement
+	}
+
+	const { lng = 0, lat = 0, rotation = 0, scale = 1, color = '', element }: Props = $props()
+
+	const { map } = useMapLibre()
+
+	const marker = $derived.by(() => {
+		const value = new Marker(element ? { element, scale, color } : { scale, color })
+		value.setLngLat(new LngLat(0, 0))
+		value.getElement().style.zIndex = '1'
+		return value
+	})
+
+	$effect.pre(() => {
+		const currentMarker = marker
+		currentMarker.addTo(map)
+		return () => {
+			currentMarker.remove()
+		}
+	})
+
+	$effect.pre(() => {
+		marker?.setLngLat(new LngLat(lng, lat))
+	})
+
+	$effect.pre(() => {
+		marker?.setRotation(rotation)
+	})
+</script>

package/dist/components/maplibre/marker.svelte.d.ts

@@ -0,0 +1,29 @@
+import { Marker } from 'maplibre-gl';
+interface Props {
+    /** The longitude of the marker. */
+    lng?: number;
+    /** The latitude of the marker. */
+    lat?: number;
+    /** The rotation angle of the marker (clockwise, in degrees) */
+    rotation?: number;
+    /** The relative size of the marker. */
+    scale?: number;
+    /** The marker color. */
+    color?: string;
+    /** The marker icon */
+    element?: HTMLElement;
+}
+/**
+ * Creates a marker on a maplibre map. Must be a child of `<MapLibre>`.
+ *
+ * ```svelte
+ *   <MapLibreMarker
+ *     lngLat={{ lng: 0, lat: 0 }}
+ *     scale={1}
+ *     color={'blue'}
+ *   />
+ * ```
+ */
+declare const Marker: import("svelte").Component<Props, {}, "">;
+type Marker = ReturnType<typeof Marker>;
+export default Marker;

package/dist/components/maplibre/math.d.ts

@@ -0,0 +1,12 @@
+import { LngLat, MercatorCoordinate } from 'maplibre-gl';
+export declare const lngLatToMercator: (lngLat: LngLat) => MercatorCoordinate;
+export declare const mercatorToCartesian: (mercator: MercatorCoordinate, scale?: number) => {
+    x: number;
+    y: number;
+};
+export declare const lngLatToCartesian: (lngLat: LngLat, scale?: number) => {
+    x: number;
+    y: number;
+};
+export declare const cartesianToMercator: (x: number, y: number, scale: number) => MercatorCoordinate;
+export declare const cartesianToLngLat: (x: number, y: number, scale: number) => LngLat;

package/dist/components/maplibre/math.js

@@ -0,0 +1,18 @@
+import { LngLat, MercatorCoordinate } from 'maplibre-gl';
+export const lngLatToMercator = (lngLat) => {
+    return MercatorCoordinate.fromLngLat(lngLat, 0);
+};
+export const mercatorToCartesian = (mercator, scale = mercator.meterInMercatorCoordinateUnits()) => {
+    return { x: mercator.x / scale, y: mercator.y / scale };
+};
+export const lngLatToCartesian = (lngLat, scale) => {
+    const mercator = lngLatToMercator(lngLat);
+    return mercatorToCartesian(mercator, scale);
+};
+export const cartesianToMercator = (x, y, scale) => {
+    return new MercatorCoordinate(x * scale, y * scale, 0);
+};
+export const cartesianToLngLat = (x, y, scale) => {
+    const mercator = cartesianToMercator(x, y, scale);
+    return mercator.toLngLat();
+};

package/dist/components/maplibre/plugins/google-maps.d.ts

@@ -0,0 +1 @@
+export declare const registerGoogleMapsProtocol: (apiKey: string) => Promise<boolean>;

package/dist/components/maplibre/plugins/google-maps.js

@@ -0,0 +1,74 @@
+import { addProtocol } from 'maplibre-gl';
+const sessions = {};
+let protocolRegistered = false;
+let registerProtocol = undefined;
+const testGoogleMapsAPI = async (apiKey) => {
+    try {
+        await getSession('roadmap', apiKey);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+export const registerGoogleMapsProtocol = async (apiKey) => {
+    if (protocolRegistered) {
+        return true;
+    }
+    registerProtocol = (async () => {
+        const passed = await testGoogleMapsAPI(apiKey);
+        if (!passed) {
+            return false;
+        }
+        addProtocol('google', googleProtocol);
+        protocolRegistered = true;
+        return true;
+    })();
+    return registerProtocol;
+};
+const googleProtocol = async (params) => {
+    const url = new URL(params.url.replace('google://', 'https://'));
+    const key = url.searchParams.get('key') ?? '';
+    const sessionKey = `${url.hostname}?${url.searchParams}`;
+    let session;
+    if (!sessions[sessionKey]) {
+        sessions[sessionKey] = {
+            value: undefined,
+            promise: getSession(url.hostname, key),
+        };
+        session = await sessions[sessionKey].promise;
+    }
+    else if (sessions[sessionKey].value === undefined) {
+        session = await sessions[sessionKey].promise;
+    }
+    else {
+        session = sessions[sessionKey].value;
+    }
+    return getTile(url, session, key);
+};
+const getSession = async (mapType, key) => {
+    const sessionRequest = {
+        mapType,
+        language: 'en-US',
+        region: 'US',
+        overlay: true,
+    };
+    const response = await fetch(`https://tile.googleapis.com/v1/createSession?key=${key}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(sessionRequest),
+    });
+    if (!response.ok) {
+        throw new Error('Failed to create Google Maps session');
+    }
+    const result = (await response.json());
+    return result.session;
+};
+const getTile = async (url, session, key) => {
+    const tile = await fetch(`https://tile.googleapis.com/v1/2dtiles${url.pathname}?session=${session}&key=${key}`);
+    if (!tile.ok) {
+        throw new Error('Failed to get Google Maps tile');
+    }
+    const data = await tile.arrayBuffer();
+    return { data };
+};

package/dist/components/maplibre/plugins/raycast.d.ts

@@ -0,0 +1,10 @@
+import { type Camera, type Raycaster, Vector2 } from 'three';
+/**
+ * Provides raycasting against THREE objects projected on to a maplibre map.
+ */
+export declare const useMapLibreThreeRaycast: (cameraSignal: {
+    current: Camera;
+}) => {
+    compute: (raycaster: Raycaster) => void;
+    pointer: Vector2;
+};

package/dist/components/maplibre/plugins/raycast.js

@@ -0,0 +1,29 @@
+import { onMount } from 'svelte';
+import { Matrix4, Vector2, Vector3 } from 'three';
+import { useMapLibre } from '../hooks';
+/**
+ * Provides raycasting against THREE objects projected on to a maplibre map.
+ */
+export const useMapLibreThreeRaycast = (cameraSignal) => {
+    const { map } = useMapLibre();
+    const pointer = new Vector2();
+    const handleMouseMove = (event) => {
+        pointer.set((event.point.x / map.transform.width) * 2 - 1, -(event.point.y / map.transform.height) * 2 + 1);
+    };
+    onMount(() => {
+        map.on('mousemove', handleMouseMove);
+        return () => map.off('mousemove', handleMouseMove);
+    });
+    const cameraPosition = new Vector3();
+    const mousePosition = new Vector3();
+    const viewDirection = new Vector3();
+    const camInverseProjection = new Matrix4();
+    const compute = (raycaster) => {
+        camInverseProjection.copy(cameraSignal.current.projectionMatrix).invert();
+        cameraPosition.set(0, 0, 0).applyMatrix4(camInverseProjection);
+        mousePosition.set(pointer.x, pointer.y, 1).applyMatrix4(camInverseProjection);
+        viewDirection.copy(mousePosition).sub(cameraPosition).normalize();
+        raycaster.set(cameraPosition, viewDirection);
+    };
+    return { compute, pointer };
+};

package/dist/components/maplibre/plugins/three.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type Camera, type Scene } from 'three';
+/**
+ *
+ * A plugin to integrate Three.js scenes into a Maplibre map.
+ *
+ * It syncs the projection matrix of a mapbibre-gl camera to a THREE.Camera in order to render objects
+ * from the perspective of the map viewer. The camera is set to look at the current center of the visible map.
+ *
+ * It also manages the position of any THREE.Object3D that has a `userData.lngLat` property. The position
+ * is determined by calculating the difference of the map's center lng,lat and the object's lng,lat and then
+ * making an approximate transform to an x,z plane offset in meters.
+ *
+ * The userData.lngLat property must be a maplibre LngLat object, or in the case of a THREE.Line, a LngLat[].
+ *
+ * @param scene A THREE.Scene instance.
+ * @param cameraSignal This should only be a THREE.Camera instance. Perspective and Orthographic cameras make projection defaults that will not work with Maplibre.
+ * @param renderFn A callback that runs on each map draw. Use it to render your scene.
+ */
+export declare const useMapLibreThreeRenderer: (scene: Scene, cameraSignal: {
+    current: Camera;
+}, renderFn: (scene: Scene, camera: Camera) => void) => void;