@viamrobotics/test-widgets 0.0.1

package/dist/components/maplibre/plugins/three.svelte.js

@@ -0,0 +1,73 @@
+import { MercatorCoordinate } from 'maplibre-gl';
+import { Line, Matrix4, Vector3 } from 'three';
+import { useMapLibre } from '../hooks';
+import { lngLatToCartesian, mercatorToCartesian } from '../math';
+/**
+ *
+ * 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 const useMapLibreThreeRenderer = (scene, cameraSignal, renderFn) => {
+    const { map } = useMapLibre();
+    const cameraTransform = new Matrix4();
+    const cameraMatrix = new Matrix4();
+    const scale = new Matrix4();
+    const rotation = new Matrix4().multiplyMatrices(new Matrix4().makeRotationX(-0.5 * Math.PI), new Matrix4().makeRotationY(Math.PI));
+    $effect(() => {
+        map.addLayer({
+            id: 'scene-layer',
+            type: 'custom',
+            renderingMode: '3d',
+            render(_, { modelViewProjectionMatrix }) {
+                const center = map.getCenter();
+                const mercator = MercatorCoordinate.fromLngLat(center, 0);
+                const mercatorScale = mercator.meterInMercatorCoordinateUnits();
+                const { x: cx, y: cy } = mercatorToCartesian(mercator, mercatorScale);
+                scale.makeScale(mercatorScale, mercatorScale, -mercatorScale);
+                cameraTransform
+                    .multiplyMatrices(scale, rotation)
+                    .setPosition(mercator.x, mercator.y, mercator.z);
+                cameraSignal.current.projectionMatrix = cameraMatrix
+                    .fromArray(modelViewProjectionMatrix)
+                    .multiply(cameraTransform);
+                scene.traverse((object) => {
+                    const { lngLat } = object.userData;
+                    if (lngLat === undefined) {
+                        return;
+                    }
+                    if (Array.isArray(lngLat)) {
+                        if (object instanceof Line) {
+                            ;
+                            object.geometry.setFromPoints(lngLat.map((value) => {
+                                const { x: ox, y: oy } = lngLatToCartesian(value, mercatorScale);
+                                return new Vector3(cx - ox, 0, cy - oy);
+                            }));
+                            object.computeLineDistances();
+                        }
+                    }
+                    else {
+                        const { x: ox, y: oy } = lngLatToCartesian(lngLat, mercatorScale);
+                        object.position.set(cx - ox, 0, cy - oy);
+                    }
+                });
+                renderFn(scene, cameraSignal.current);
+                map.triggerRepaint();
+            },
+        });
+        return () => {
+            map.removeLayer('scene-layer');
+        };
+    });
+};

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

@@ -0,0 +1,4 @@
+import type { StyleSpecification } from 'maplibre-gl';
+import { type MapProvider } from './types';
+export declare const getGoogleMapsStyle: (apiKey: string, maxzoom: number, mapType?: "roadmap" | "satellite") => StyleSpecification;
+export declare const getStyleSpecification: (provider: MapProvider, apiKey?: string, maxZoom?: number, satelliteMode?: boolean) => Promise<StyleSpecification>;

package/dist/components/maplibre/style.js

@@ -0,0 +1,88 @@
+import { registerGoogleMapsProtocol } from './plugins/google-maps';
+import { MapProviders } from './types';
+import { DEFAULT_MAX_ZOOM } from './zoom';
+const tileSize = 256;
+export const getGoogleMapsStyle = (apiKey, maxzoom, mapType = 'roadmap') => {
+    const style = {
+        version: 8,
+        sources: {
+            google: {
+                type: 'raster',
+                tiles: [`google://${mapType}/{z}/{x}/{y}?key=${apiKey}`],
+                tileSize,
+                attribution: '© Google Maps',
+                maxzoom,
+            },
+        },
+        layers: [
+            {
+                id: 'google',
+                type: 'raster',
+                source: 'google',
+            },
+        ],
+    };
+    return style;
+};
+const getOpenStreetMapStyle = (maxzoom) => ({
+    version: 8,
+    sources: {
+        osm: {
+            type: 'raster',
+            tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
+            tileSize,
+            attribution: '© OpenStreetMap Contributors',
+            maxzoom,
+        },
+        satellite: {
+            type: 'raster',
+            tiles: [
+                'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}',
+            ],
+            tileSize,
+            attribution: '© USGS National Map Services',
+            maxzoom,
+        },
+    },
+    layers: [
+        {
+            id: 'osm',
+            type: 'raster',
+            source: 'osm',
+        },
+        {
+            id: 'satellite',
+            type: 'raster',
+            source: 'satellite',
+            layout: {
+                visibility: 'none',
+            },
+        },
+    ],
+});
+export const getStyleSpecification = async (provider, apiKey, maxZoom = DEFAULT_MAX_ZOOM, satelliteMode = false) => {
+    switch (provider) {
+        case MapProviders.googleMaps: {
+            if (!apiKey) {
+                console.warn('Google Maps API key is required, falling back to OpenStreetMap');
+                return getOpenStreetMapStyle(maxZoom);
+            }
+            try {
+                const success = await registerGoogleMapsProtocol(apiKey);
+                if (!success) {
+                    console.warn('Google Maps protocol registration failed, falling back to OpenStreetMap');
+                    return getOpenStreetMapStyle(maxZoom);
+                }
+                const mapType = satelliteMode ? 'satellite' : 'roadmap';
+                return getGoogleMapsStyle(apiKey, maxZoom, mapType);
+            }
+            catch (error) {
+                console.error('Failed to create Google Maps style, falling back to OpenStreetMap:', error);
+                return getOpenStreetMapStyle(maxZoom);
+            }
+        }
+        case MapProviders.openStreet: {
+            return getOpenStreetMapStyle(maxZoom);
+        }
+    }
+};

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

@@ -0,0 +1,14 @@
+import { LngLat } from 'maplibre-gl';
+export declare const MapProviders: {
+    readonly openStreet: "open-street";
+    readonly googleMaps: "google-maps";
+};
+export type MapProvider = (typeof MapProviders)[keyof typeof MapProviders];
+export declare class GeoPose extends LngLat {
+    rotation: number;
+    constructor(lng: number, lat: number, rotation: number);
+}
+export declare class Waypoint extends LngLat {
+    id: string;
+    constructor(lng: number, lat: number, id: string);
+}

package/dist/components/maplibre/types.js

@@ -0,0 +1,19 @@
+import { LngLat } from 'maplibre-gl';
+export const MapProviders = {
+    openStreet: 'open-street',
+    googleMaps: 'google-maps',
+};
+export class GeoPose extends LngLat {
+    rotation;
+    constructor(lng, lat, rotation) {
+        super(lng, lat);
+        this.rotation = rotation;
+    }
+}
+export class Waypoint extends LngLat {
+    id;
+    constructor(lng, lat, id) {
+        super(lng, lat);
+        this.id = id;
+    }
+}

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

@@ -0,0 +1 @@
+export declare const DEFAULT_MAX_ZOOM = 21;

package/dist/components/maplibre/zoom.js

@@ -0,0 +1 @@
+export const DEFAULT_MAX_ZOOM = 21;

package/dist/components/mutation-section.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	import { Icon, Tooltip } from '@viamrobotics/prime-core'
+	import { twMerge } from 'tailwind-merge'
+
+	import ErrorDisplay from './error.svelte'
+
+	interface Props {
+		title: string
+		tooltip?: string | undefined
+		description?: string | undefined
+		lastError: Error | null
+		class?: string
+		titleInput?: Snippet
+		error?: Snippet
+		children?: Snippet
+	}
+
+	const {
+		title,
+		tooltip,
+		description,
+		lastError = null,
+		class: className,
+		titleInput,
+		error,
+		children,
+	}: Props = $props()
+
+	const headingID = $props.id()
+</script>
+
+<section
+	class="flex flex-col gap-2 p-4"
+	aria-labelledby={headingID}
+>
+	<div class={twMerge('flex grow flex-row flex-wrap gap-2', className)}>
+		<div class="flex max-w-[200px] grow flex-col gap-0.5 pr-4">
+			<h3
+				class="flex flex-row items-center gap-1 text-sm font-semibold"
+				id={headingID}
+			>
+				{title}
+				{#if tooltip}
+					<Tooltip>
+						<Icon
+							name="information-outline"
+							cx="text-gray-6"
+						/>
+
+						<p
+							slot="description"
+							class="text-xs whitespace-pre-line"
+						>
+							{tooltip}
+						</p>
+					</Tooltip>
+				{/if}
+			</h3>
+			{#if description}
+				<p class="text-subtle-2 text-xs">{description}</p>
+			{/if}
+			{@render titleInput?.()}
+		</div>
+
+		<div class="flex grow flex-wrap justify-between gap-2">
+			{@render children?.()}
+		</div>
+	</div>
+	{#if error}
+		{@render error()}
+	{:else}
+		<ErrorDisplay {lastError} />
+	{/if}
+</section>

package/dist/components/mutation-section.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    tooltip?: string | undefined;
+    description?: string | undefined;
+    lastError: Error | null;
+    class?: string;
+    titleInput?: Snippet;
+    error?: Snippet;
+    children?: Snippet;
+}
+declare const MutationSection: import("svelte").Component<Props, {}, "">;
+type MutationSection = ReturnType<typeof MutationSection>;
+export default MutationSection;

package/dist/components/mutation-view.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	import ErrorDisplay from './error.svelte'
+
+	interface Props {
+		lastError: Error | null
+
+		titleInput?: Snippet
+		error?: Snippet
+		children: Snippet
+	}
+
+	const { lastError, titleInput, error, children }: Props = $props()
+</script>
+
+<div class="flex flex-col gap-2">
+	<span class="inline-flex flex-wrap gap-2">
+		{@render titleInput?.()}
+		<div class="flex grow flex-wrap justify-between gap-2">
+			{@render children()}
+		</div>
+	</span>
+	{#if error}
+		{@render error()}
+	{:else}
+		<ErrorDisplay {lastError} />
+	{/if}
+</div>

package/dist/components/mutation-view.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    lastError: Error | null;
+    titleInput?: Snippet;
+    error?: Snippet;
+    children: Snippet;
+}
+declare const MutationView: import("svelte").Component<Props, {}, "">;
+type MutationView = ReturnType<typeof MutationView>;
+export default MutationView;

package/dist/components/navigation-map/components/draw-tool.svelte

@@ -0,0 +1,139 @@
+<!-- 
+  @component
+  Renders an in-progress rectangle that represents a drawn area by the user.
+-->
+<script lang="ts">
+	import type * as THREE from 'three'
+
+	import { T } from '@threlte/core'
+	import { theme } from '@viamrobotics/prime-core/theme'
+	import {
+		LngLat,
+		type MapLayerMouseEvent,
+		type MapLayerTouchEvent,
+		type MapMouseEvent,
+		MercatorCoordinate,
+	} from 'maplibre-gl'
+
+	import {
+		cartesianToMercator,
+		lngLatToMercator,
+		useMapLibre,
+		useMapLibreEvent,
+	} from '../../maplibre'
+	import { useNavigationMap } from '../use-navigation-map.svelte'
+
+	interface Props {
+		/** Fires when a rectangle is drawn. */
+		onUpdate: (payload: { width: number; height: number; center: LngLat }) => void
+	}
+
+	const { onUpdate }: Props = $props()
+
+	const { map } = useMapLibre()
+	const nav = useNavigationMap()
+
+	let downLngLat = $state(new LngLat(0, 0))
+	let downMercator = new MercatorCoordinate(0, 0, 0)
+
+	let drawing = $state(false)
+	let width = $state(0)
+	let height = $state(0)
+
+	const moveSign = $state({ x: 0, y: 0 })
+
+	const toPrecisionLevel = (number: number, decimals: number): number => {
+		const multiplier = 10 ** decimals
+		return Math.floor(number * multiplier) / multiplier
+	}
+
+	const handlePointerDown = (event: MapLayerMouseEvent | MapLayerTouchEvent) => {
+		event.preventDefault()
+		drawing = true
+		downLngLat = event.lngLat
+		downMercator = lngLatToMercator(downLngLat)
+	}
+
+	const handlePointerMove = (event: MapMouseEvent) => {
+		const moveMercator = lngLatToMercator(event.lngLat)
+		const scale = moveMercator.meterInMercatorCoordinateUnits()
+
+		moveSign.x = Math.sign(moveMercator.x - downMercator.x)
+		moveSign.y = Math.sign(moveMercator.y - downMercator.y)
+
+		width = toPrecisionLevel(Math.abs(moveMercator.x - downMercator.x) / scale, 2)
+		height = toPrecisionLevel(Math.abs(moveMercator.y - downMercator.y) / scale, 2)
+	}
+
+	const handlePointerUp = () => {
+		drawing = false
+
+		const scale = downMercator.meterInMercatorCoordinateUnits()
+		const offset = cartesianToMercator(-moveSign.x * (width / 2), -moveSign.y * (height / 2), scale)
+
+		downMercator.x -= offset.x
+		downMercator.y -= offset.y
+
+		const center = downMercator.toLngLat()
+
+		onUpdate({ width, height, center })
+
+		width = 0
+		height = 0
+	}
+
+	const handleGeometryCreate = (ref: THREE.BufferGeometry) => {
+		ref.rotateX(-Math.PI / 2)
+	}
+
+	useMapLibreEvent('mousedown', (event) => {
+		if (event.originalEvent.shiftKey) {
+			handlePointerDown(event)
+		}
+	})
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (event.shiftKey) {
+			map.getCanvas().classList.add('!cursor-crosshair')
+		}
+	}
+
+	const handleKeyup = () => {
+		map.getCanvas().classList.remove('!cursor-crosshair')
+	}
+
+	$effect.pre(() => {
+		if (drawing) {
+			map.on('mousemove', handlePointerMove)
+			map.on('mouseup', handlePointerUp)
+		} else {
+			map.off('mousemove', handlePointerMove)
+			map.off('mouseup', handlePointerUp)
+		}
+	})
+</script>
+
+<svelte:window
+	onkeydown={handleKeydown}
+	onkeyup={handleKeyup}
+/>
+
+<T.Group userData.lngLat={downLngLat}>
+	<T.Mesh
+		position.x={(-moveSign.x * width) / 2}
+		position.z={(-moveSign.y * height) / 2}
+	>
+		{#if nav.view === '3D'}
+			<T.BoxGeometry
+				args={[width, height, 10]}
+				oncreate={handleGeometryCreate}
+			/>
+		{:else}
+			<T.PlaneGeometry
+				args={[width, height]}
+				oncreate={handleGeometryCreate}
+			/>
+		{/if}
+		<T.MeshPhongMaterial color={theme.extend.colors.cyberpunk} />
+	</T.Mesh>
+</T.Group>

package/dist/components/navigation-map/components/draw-tool.svelte.d.ts

@@ -0,0 +1,13 @@
+import { LngLat } from 'maplibre-gl';
+interface Props {
+    /** Fires when a rectangle is drawn. */
+    onUpdate: (payload: {
+        width: number;
+        height: number;
+        center: LngLat;
+    }) => void;
+}
+/** Renders an in-progress rectangle that represents a drawn area by the user. */
+declare const DrawTool: import("svelte").Component<Props, {}, "">;
+type DrawTool = ReturnType<typeof DrawTool>;
+export default DrawTool;

package/dist/components/navigation-map/components/input/geometry.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { ToggleButtons, VectorInput } from '@viamrobotics/prime-core'
+
+	import type { Geometry, Shapes } from '../../types'
+
+	import { createGeometry } from '../../lib/create-geometry'
+
+	interface Props {
+		/** The geometry to edit. */
+		geometry: Geometry
+		oninput: (geometry: Geometry) => void
+	}
+
+	const { geometry, oninput }: Props = $props()
+
+	const getNormalizedSize = () => {
+		switch (geometry.type) {
+			case 'box': {
+				return geometry.length > geometry.height ? geometry.length / 2 : geometry.height / 2
+			}
+			case 'sphere': {
+				return geometry.radius
+			}
+			case 'capsule': {
+				return geometry.length
+			}
+		}
+	}
+
+	const handleShapeSelect = ({ detail }: CustomEvent<string>) => {
+		const currentSize = getNormalizedSize()
+		const currentRotation = geometry.pose.orientationVector.th
+		const nextType = detail.toLowerCase() as Shapes
+		oninput(createGeometry(nextType, currentSize, currentRotation))
+	}
+
+	const handleDimensionsInput = (event: CustomEvent<Record<string, number>>) => {
+		const nextGeometry = { ...geometry }
+
+		switch (nextGeometry.type) {
+			case 'box': {
+				const length = event.detail['Length (m)']
+				const width = event.detail['Width (m)']
+				const height = event.detail['Height (m)']
+
+				if (length !== undefined) {
+					nextGeometry.length = length
+				}
+				if (width !== undefined) {
+					nextGeometry.width = width
+				}
+				if (height !== undefined) {
+					nextGeometry.height = height
+				}
+				break
+			}
+			case 'sphere': {
+				const radius = event.detail['Radius (m)']
+
+				if (radius !== undefined) {
+					nextGeometry.radius = radius
+				}
+				break
+			}
+			case 'capsule': {
+				const radius = event.detail['Radius (m)']
+				const length = event.detail['Length (m)']
+
+				if (radius !== undefined) {
+					nextGeometry.radius = radius
+				}
+				if (length !== undefined) {
+					nextGeometry.length = length
+				}
+				break
+			}
+		}
+
+		oninput(nextGeometry)
+	}
+
+	const shapeMap = {
+		box: 'Box',
+		sphere: 'Sphere',
+		capsule: 'Capsule',
+	}
+</script>
+
+<div class="my-2 flex flex-col gap-2">
+	<ToggleButtons
+		options={['Box', 'Sphere', 'Capsule']}
+		selected={shapeMap[geometry.type]}
+		on:input={handleShapeSelect}
+	>
+		{#snippet legend()}
+			Shape
+		{/snippet}
+	</ToggleButtons>
+
+	{#if geometry.type === 'box'}
+		<VectorInput
+			labels={['Length (m)', 'Width (m)', 'Height (m)']}
+			values={{
+				'Length (m)': geometry.length,
+				'Width (m)': geometry.width,
+				'Height (m)': geometry.height,
+			}}
+			on:input={handleDimensionsInput}
+		/>
+	{:else if geometry.type === 'capsule'}
+		<VectorInput
+			labels={['Radius (m)', 'Length (m)']}
+			values={{ 'Radius (m)': geometry.radius, 'Length (m)': geometry.length }}
+			on:input={handleDimensionsInput}
+		/>
+	{:else if geometry.type === 'sphere'}
+		<VectorInput
+			labels={['Radius (m)']}
+			values={{ 'Radius (m)': geometry.radius }}
+			on:input={handleDimensionsInput}
+		/>
+	{/if}
+</div>

package/dist/components/navigation-map/components/input/geometry.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Geometry } from '../../types';
+interface Props {
+    /** The geometry to edit. */
+    geometry: Geometry;
+    oninput: (geometry: Geometry) => void;
+}
+declare const Geometry: import("svelte").Component<Props, {}, "">;
+type Geometry = ReturnType<typeof Geometry>;
+export default Geometry;

package/dist/components/navigation-map/components/input/orientation.svelte

@@ -0,0 +1,46 @@
+<!--
+@component
+An editable 2d rotation input, presented to the user in degrees
+-->
+<script lang="ts">
+	import { Label, SliderInput } from '@viamrobotics/prime-core'
+	import { MathUtils } from 'three'
+
+	interface Props {
+		/** The rotation in radians */
+		th: number
+		/** Fires when orientation changes with the new value in radians */
+		oninput?: (th: number) => void
+	}
+
+	const { th, oninput = undefined }: Props = $props()
+
+	let input = $state<HTMLInputElement>()
+
+	const handleInput = () => {
+		if (!input) {
+			return
+		}
+
+		const value = input.valueAsNumber
+
+		if (!Number.isNaN(value)) {
+			oninput?.(MathUtils.degToRad(value))
+		}
+	}
+</script>
+
+<div class="w-1/2">
+	<Label position="top">
+		Rotation (deg)
+		<SliderInput
+			bind:input
+			slot="input"
+			value={MathUtils.radToDeg(th)}
+			placeholder={0}
+			on:blur={handleInput}
+			on:input={handleInput}
+			on:keydown={(event) => event.key === 'Enter' && handleInput()}
+		/>
+	</Label>
+</div>

package/dist/components/navigation-map/components/input/orientation.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    /** The rotation in radians */
+    th: number;
+    /** Fires when orientation changes with the new value in radians */
+    oninput?: (th: number) => void;
+}
+/** An editable 2d rotation input, presented to the user in degrees */
+declare const Orientation: import("svelte").Component<Props, {}, "">;
+type Orientation = ReturnType<typeof Orientation>;
+export default Orientation;