@viamrobotics/test-widgets 0.0.1

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

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import type { LngLat, Map } from 'maplibre-gl'
+	import type { Snippet } from 'svelte'
+
+	import { Icon, ToggleButtons, Tooltip } from '@viamrobotics/prime-core'
+
+	import type { Obstacle } from '../types'
+
+	import {
+		CenterControls,
+		FollowControls,
+		GeoPose,
+		MapLibre,
+		type MapProvider,
+		MapProviders,
+		NavigationControls,
+		SatelliteControls,
+	} from '../../maplibre'
+	import { useNavigationMap } from '../use-navigation-map.svelte'
+	import Nav from './nav/index.svelte'
+	import ObstaclesLegend from './nav/obstacles-legend.svelte'
+	import RobotMarker from './robot-marker.svelte'
+	import SceneLayer from './scene-layer.svelte'
+	import Waypoints from './waypoints.svelte'
+
+	const minPitch = 0
+	const maxPitch = 60
+
+	interface Props {
+		/** The Geo-pose of a robot base. */
+		baseGeoPose?: GeoPose
+		/** The map provider to use. */
+		mapProvider?: MapProvider
+		/** The API key for the map provider. */
+		mapProviderKey?: string
+		map?: Map
+		tab?: Snippet
+		onupdate: (obstacles: Obstacle[]) => void
+		onaddwaypoint: (waypoint: LngLat) => void
+		ondeletewaypoint: (id: string) => void
+	}
+
+	let {
+		baseGeoPose = undefined,
+		mapProvider = MapProviders.openStreet,
+		mapProviderKey = undefined,
+		map = $bindable(),
+		onupdate,
+		onaddwaypoint,
+		ondeletewaypoint,
+		tab,
+	}: Props = $props()
+
+	const nav = useNavigationMap()
+
+	const handleViewSelect = ({ detail }: CustomEvent<string>) => {
+		nav.view = detail as '2D' | '3D'
+	}
+
+	let didHoverTooltip = $state(
+		Boolean(localStorage.getItem('navigation-service-card-tooltip-hovered'))
+	)
+
+	const currentTab = $derived(tab)
+</script>
+
+<div class="relative h-full w-full items-stretch lg:flex">
+	<MapLibre
+		class="relative hidden grow lg:block"
+		{minPitch}
+		maxPitch={nav.view === '3D' ? maxPitch : minPitch}
+		minZoom={6}
+		{mapProvider}
+		{mapProviderKey}
+		bind:map
+	>
+		<NavigationControls showZoom={false} />
+
+		<Nav
+			{onaddwaypoint}
+			{ondeletewaypoint}
+			{onupdate}
+		>
+			{@render currentTab?.()}
+		</Nav>
+		<RobotMarker pose={baseGeoPose} />
+		<Waypoints />
+
+		{#snippet layer()}
+			<SceneLayer onUpdate={onupdate} />
+		{/snippet}
+
+		<div class="absolute top-2.5 right-12 z-10 flex items-center gap-2 lg:flex">
+			{#if nav.environment === 'configure'}
+				<Tooltip>
+					<div
+						class="relative"
+						role="tooltip"
+						onpointerenter={() => {
+							didHoverTooltip = true
+							localStorage.setItem('navigation-service-card-tooltip-hovered', 'true')
+						}}
+					>
+						{#if !didHoverTooltip}
+							<div class="bg-success-dark absolute -m-1 h-7 w-7 animate-ping rounded-full"></div>
+						{/if}
+						<div class="relative z-10 rounded-full bg-white">
+							<Icon
+								size="lg"
+								name="help-circle-outline"
+							/>
+						</div>
+					</div>
+
+					<div
+						class="flex flex-col p-2"
+						slot="description"
+					>
+						<ObstaclesLegend />
+					</div>
+				</Tooltip>
+			{/if}
+
+			<SatelliteControls />
+
+			<ToggleButtons
+				options={['2D', '3D']}
+				selected={nav.view}
+				on:input={handleViewSelect}
+			/>
+
+			<div class="flex w-60 flex-wrap items-end justify-between gap-y-2">
+				<CenterControls />
+			</div>
+		</div>
+
+		<div class="absolute right-2 bottom-10 z-10 hidden lg:block">
+			<FollowControls
+				lng={baseGeoPose?.lng}
+				lat={baseGeoPose?.lat}
+				following
+			/>
+		</div>
+	</MapLibre>
+</div>

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

@@ -0,0 +1,20 @@
+import type { LngLat, Map } from 'maplibre-gl';
+import type { Snippet } from 'svelte';
+import type { Obstacle } from '../types';
+import { GeoPose, type MapProvider } from '../../maplibre';
+interface Props {
+    /** The Geo-pose of a robot base. */
+    baseGeoPose?: GeoPose;
+    /** The map provider to use. */
+    mapProvider?: MapProvider;
+    /** The API key for the map provider. */
+    mapProviderKey?: string;
+    map?: Map;
+    tab?: Snippet;
+    onupdate: (obstacles: Obstacle[]) => void;
+    onaddwaypoint: (waypoint: LngLat) => void;
+    ondeletewaypoint: (id: string) => void;
+}
+declare const Map: import("svelte").Component<Props, {}, "map">;
+type Map = ReturnType<typeof Map>;
+export default Map;

package/dist/components/navigation-map/components/nav/index.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { LngLat } from 'maplibre-gl'
+	import type { Snippet } from 'svelte'
+
+	import { NavigationTab, type Obstacle } from '../../types'
+	import { useNavigationMap } from '../../use-navigation-map.svelte'
+	import ObstaclesTab from './obstacles.svelte'
+	import WaypointsTab from './waypoints.svelte'
+
+	interface Props {
+		onupdate: (obstacles: Obstacle[]) => void
+		onaddwaypoint: (waypoint: LngLat) => void
+		ondeletewaypoint: (id: string) => void
+		children?: Snippet
+	}
+
+	const { onupdate, onaddwaypoint, ondeletewaypoint, children }: Props = $props()
+
+	const nav = useNavigationMap()
+</script>
+
+<nav class="py-4 pl-4 sm:h-full sm:w-[350px]">
+	<ol class="mb-2 flex flex-wrap items-center">
+		{#each nav.tabs as tabTitle (tabTitle)}
+			{@const selected = nav.tab === tabTitle}
+			<li>
+				<button
+					class={[
+						'border-b px-4 py-1 text-sm tracking-normal capitalize',
+						selected ? 'border-black font-bold text-gray-600' : 'text-gray-600',
+					]}
+					onclick={() => {
+						nav.tab = tabTitle
+					}}
+				>
+					{tabTitle}
+				</button>
+			</li>
+		{/each}
+	</ol>
+
+	{#if nav.tab === NavigationTab.Waypoints}
+		<ul
+			onmouseleave={() => (nav.hovered = undefined)}
+			class="overflow-y-auto py-2 pr-4 sm:h-[calc(100%-38px)]"
+		>
+			<WaypointsTab
+				{onaddwaypoint}
+				{ondeletewaypoint}
+			/>
+		</ul>
+	{:else if nav.tab === NavigationTab.Obstacles}
+		<ul
+			class="overflow-y-auto py-2 pr-4 sm:h-[calc(100%-38px)]"
+			onmouseleave={() => (nav.hovered = undefined)}
+		>
+			<ObstaclesTab {onupdate} />
+		</ul>
+	{:else}
+		<div class="overflow-y-auto py-2 pr-4 sm:h-[calc(100%-38px)]">
+			{@render children?.()}
+		</div>
+	{/if}
+</nav>

package/dist/components/navigation-map/components/nav/index.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { LngLat } from 'maplibre-gl';
+import type { Snippet } from 'svelte';
+import { type Obstacle } from '../../types';
+interface Props {
+    onupdate: (obstacles: Obstacle[]) => void;
+    onaddwaypoint: (waypoint: LngLat) => void;
+    ondeletewaypoint: (id: string) => void;
+    children?: Snippet;
+}
+declare const Index: import("svelte").Component<Props, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/navigation-map/components/nav/key.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		children?: Snippet
+	}
+
+	const { children }: Props = $props()
+</script>
+
+<!-- 
+  @component Represents a keyboard key.
+-->
+<span class="text-default rounded-[4px] bg-gray-200 px-1 py-0.5 font-semibold">
+	{@render children?.()}
+</span>

package/dist/components/navigation-map/components/nav/key.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
+/** Represents a keyboard key. */
+declare const Key: import("svelte").Component<Props, {}, "">;
+type Key = ReturnType<typeof Key>;
+export default Key;

package/dist/components/navigation-map/components/nav/obstacles-legend.svelte

@@ -0,0 +1,18 @@
+<script>
+	import Key from './key.svelte'
+</script>
+
+<p>Getting started:</p>
+
+<ul class="flex !list-disc flex-col gap-2 pt-2">
+	<li class="ml-4">
+		Hold <Key>shift</Key> + drag on the map to draw an obstacle.
+	</li>
+	<li class="ml-4">Drag an obstacle to move it.</li>
+	<li class="ml-4">
+		Hold <Key>cmd</Key> + drag an obstacle up / down to rotate it.
+	</li>
+	<li class="ml-4">
+		Hold <Key>option</Key> + drag an obstacle up / down to scale it.
+	</li>
+</ul>

package/dist/components/navigation-map/components/nav/obstacles-legend.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ObstaclesLegend;
+type ObstaclesLegend = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ObstaclesLegend: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/navigation-map/components/nav/obstacles.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import { IconButton, Label, TextInput, Tooltip } from '@viamrobotics/prime-core'
+	import { LngLat, LngLatBounds } from 'maplibre-gl'
+
+	import type { Geometry, Obstacle } from '../../types'
+
+	import { LngLatInput, useMapLibre } from '../../../maplibre'
+	import { useNavigationMap } from '../../use-navigation-map.svelte'
+	import GeometryInputs from '../input/geometry.svelte'
+	import OrientationInput from '../input/orientation.svelte'
+	import ObstaclesLegend from './obstacles-legend.svelte'
+
+	interface Props {
+		onupdate: (obstacles: Obstacle[]) => void
+	}
+
+	const { onupdate }: Props = $props()
+
+	const { map } = useMapLibre()
+	const nav = useNavigationMap()
+
+	const handleSelect = (selection: { name: string; location: LngLat }) => {
+		const radius = nav.boundingRadius[selection.name]
+		const lngLat = new LngLat(selection.location.lng, selection.location.lat)
+		const bounds = LngLatBounds.fromLngLat(lngLat, radius)
+		map.fitBounds(bounds, {
+			padding: 100,
+			duration: 800,
+			curve: 0.1,
+		})
+	}
+
+	const handleLngLatInput = (name: string) => (lngLat: LngLat) => {
+		const index = nav.obstacles.findIndex((obstacle) => obstacle.name === name)
+		const obstacle = nav.obstacles[index]
+		if (obstacle) {
+			obstacle.location = lngLat
+			nav.obstacles[index] = obstacle
+			onupdate(nav.obstacles)
+		}
+	}
+
+	const handleDeleteObstacle = (name: string) => () => {
+		nav.obstacles = nav.obstacles.filter((obstacle) => obstacle.name !== name)
+		nav.hovered = undefined
+		nav.selected = undefined
+		onupdate(nav.obstacles)
+	}
+
+	const handleGeometryInput = (name: string, geoIndex: number) => (geometry: Geometry) => {
+		const index = nav.obstacles.findIndex((obstacle) => obstacle.name === name)
+		const obstacle = nav.obstacles[index]
+		if (obstacle) {
+			obstacle.geometries[geoIndex] = geometry
+			nav.obstacles[index] = obstacle
+			onupdate(nav.obstacles)
+		}
+	}
+
+	const handleOrientationInput = (name: string, geoIndex: number) => (value: number) => {
+		const index = nav.obstacles.findIndex((obstacle) => obstacle.name === name)
+		const obstacle = nav.obstacles[index]
+		const geometry = obstacle?.geometries[geoIndex]
+		if (geometry) {
+			geometry.pose.orientationVector.th = value
+			obstacle.geometries[geoIndex] = geometry
+			nav.obstacles[index] = obstacle
+			onupdate(nav.obstacles)
+		}
+	}
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Backspace' && nav.selected && document.activeElement?.tagName !== 'INPUT') {
+			nav.obstacles = nav.obstacles.filter((obstacle) => obstacle.name !== nav.selected)
+			nav.hovered = undefined
+			nav.selected = undefined
+			onupdate(nav.obstacles)
+		}
+	}
+
+	const selectedObstacle = $derived(
+		nav.obstacles.find((obstacle) => obstacle.name === nav.selected)
+	)
+	const debugMode = $derived(nav.environment === 'debug')
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if nav.obstacles.length === 0}
+	<li class="text-subtle-2 py-2 font-sans text-xs">
+		{#if debugMode}
+			Add static obstacles in your navigation service config.
+		{:else}
+			<ObstaclesLegend />
+		{/if}
+	</li>
+{/if}
+
+{#each nav.obstacles as { name, location, geometries, color, label }, index (index)}
+	<li
+		class="group border-b-medium flex min-h-[30px] items-center border-b pl-2 leading-[1] last:border-b-0"
+		class:pb-3={debugMode}
+		class:pt-1={debugMode}
+		class:bg-light={nav.selected === name}
+		onmouseenter={() => (nav.hovered = name)}
+	>
+		<button
+			class="w-full text-left"
+			onclick={() => {
+				nav.selected = nav.selected === name ? undefined : name
+			}}
+		>
+			<div class="flex items-center justify-between gap-1.5">
+				<small>{name}</small>
+				<div class="flex items-center gap-1.5">
+					{#if debugMode}
+						<small class="text-subtle-2 opacity-60 group-hover:opacity-100">
+							({location.lat.toFixed(4)}, {location.lng.toFixed(4)})
+						</small>
+					{:else}
+						<IconButton
+							label="Delete {name}"
+							icon="trash-can-outline"
+							on:click={handleDeleteObstacle(name)}
+						/>
+					{/if}
+					<IconButton
+						icon="image-filter-center-focus"
+						label="Focus {name}"
+						on:click={(event) => {
+							event.stopPropagation()
+							handleSelect({ name, location })
+						}}
+					/>
+					<Tooltip
+						let:tooltipID
+						location="right"
+					>
+						<div
+							aria-describedby={tooltipID}
+							class="m-2 h-3.5 w-3.5"
+							style:background-color={color}
+						></div>
+						<p slot="description">{label}</p>
+					</Tooltip>
+				</div>
+			</div>
+			{#if debugMode}
+				{#each geometries as geometry, i (i)}
+					<small class="text-subtle-2">
+						{#if geometry.type === 'box'}
+							Length: {geometry.length}m, Width: {geometry.width}m, Height: {geometry.height}m
+						{:else if geometry.type === 'sphere'}
+							Radius: {geometry.radius}m
+						{:else if geometry.type === 'capsule'}
+							Radius: {geometry.radius}m, Length: {geometry.length}m
+						{/if}
+					</small>
+
+					{#if geometry.pose.orientationVector.th !== 0}
+						<small class="text-subtle-2 mt-2 block">
+							Theta: {geometry.pose.orientationVector.th.toFixed(2)}
+						</small>
+					{/if}
+				{/each}
+			{/if}
+		</button>
+	</li>
+{/each}
+
+{#if !debugMode && selectedObstacle}
+	<li
+		class="group sticky bottom-0 z-10 bg-white pt-4"
+		onmouseenter={() => {
+			nav.hovered = selectedObstacle.name
+		}}
+	>
+		<div class="flex items-end gap-1.5 pb-2">
+			<!-- @todo(mp) obstacle API doesn't yet allow custom names. -->
+			<Label>
+				Name
+				<TextInput
+					slot="input"
+					readonly
+					value={selectedObstacle.name}
+				/>
+			</Label>
+		</div>
+		<LngLatInput
+			lng={selectedObstacle.location.lng}
+			lat={selectedObstacle.location.lat}
+			oninput={handleLngLatInput(selectedObstacle.name)}
+		/>
+
+		{#each selectedObstacle.geometries as geometry, geoIndex (geoIndex)}
+			<GeometryInputs
+				{geometry}
+				oninput={handleGeometryInput(selectedObstacle.name, geoIndex)}
+			/>
+			<OrientationInput
+				th={geometry.pose.orientationVector.th}
+				oninput={handleOrientationInput(selectedObstacle.name, geoIndex)}
+			/>
+		{/each}
+	</li>
+{/if}

package/dist/components/navigation-map/components/nav/obstacles.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Obstacle } from '../../types';
+interface Props {
+    onupdate: (obstacles: Obstacle[]) => void;
+}
+declare const Obstacles: import("svelte").Component<Props, {}, "">;
+type Obstacles = ReturnType<typeof Obstacles>;
+export default Obstacles;

package/dist/components/navigation-map/components/nav/waypoints.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { LngLat } from 'maplibre-gl'
+
+	import { IconButton } from '@viamrobotics/prime-core'
+
+	import { useMapLibre, useMapLibreEvent, Waypoint } from '../../../maplibre'
+	import { useNavigationMap } from '../../use-navigation-map.svelte'
+
+	interface Props {
+		onaddwaypoint: (waypoint: LngLat) => void
+		ondeletewaypoint: (id: string) => void
+	}
+
+	const { onaddwaypoint, ondeletewaypoint }: Props = $props()
+
+	const { map } = useMapLibre()
+	const nav = useNavigationMap()
+
+	const handleDeleteWaypoint = (id: string) => {
+		nav.waypoints = nav.waypoints.filter((waypoint) => waypoint.id !== id)
+		ondeletewaypoint(id)
+	}
+
+	useMapLibreEvent('click', (event) => {
+		const waypoint = new Waypoint(event.lngLat.lng, event.lngLat.lat, crypto.randomUUID())
+
+		nav.waypoints = [...nav.waypoints, waypoint]
+
+		onaddwaypoint(waypoint)
+	})
+</script>
+
+{#if nav.waypoints.length === 0}
+	<li class="text-subtle-2 py-2 font-sans text-xs">Click on the map to add a waypoint.</li>
+{/if}
+
+{#each nav.waypoints as waypoint, index (waypoint.id)}
+	<li class="group flex items-center justify-between gap-1.5 border-b py-2 sm:py-0">
+		<small>Waypoint {index}</small>
+		<small class="text-subtle-2 opacity-60 group-hover:opacity-100">
+			({waypoint.lat.toFixed(4)}, {waypoint.lng.toFixed(4)})
+		</small>
+		<div class="flex items-center gap-1.5">
+			<IconButton
+				label="Remove waypoint {index}"
+				icon="trash-can-outline"
+				on:click={() => handleDeleteWaypoint(waypoint.id)}
+			/>
+			<IconButton
+				icon="image-filter-center-focus"
+				label="Focus waypoint {index}"
+				on:click={() =>
+					map.flyTo({
+						zoom: 15,
+						duration: 800,
+						curve: 0.1,
+						center: [waypoint.lng, waypoint.lat],
+					})}
+			/>
+		</div>
+	</li>
+{/each}

package/dist/components/navigation-map/components/nav/waypoints.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { LngLat } from 'maplibre-gl';
+interface Props {
+    onaddwaypoint: (waypoint: LngLat) => void;
+    ondeletewaypoint: (id: string) => void;
+}
+declare const Waypoints: import("svelte").Component<Props, {}, "">;
+type Waypoints = ReturnType<typeof Waypoints>;
+export default Waypoints;