@viamrobotics/test-widgets 0.0.1

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

@@ -0,0 +1,265 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { AxesHelper, CapsuleGeometry } from '@viamrobotics/motion-tools/lib'
+	import { theme } from '@viamrobotics/prime-core/theme'
+	import {
+		LngLat,
+		type MapLayerMouseEvent,
+		type MapLayerTouchEvent,
+		type MapMouseEvent,
+	} from 'maplibre-gl'
+	import * as THREE from 'three'
+
+	import type { Obstacle } from '../types'
+
+	import { useMapLibre, useMapLibreEvent } from '../../maplibre'
+	import { useNavigationMap } from '../use-navigation-map.svelte'
+
+	interface Props {
+		/** The obstacle name. */
+		name: string
+		/** Fired when obstacles are created, destroyed, or edited. */
+		onupdate: (payload: Obstacle) => void
+	}
+
+	const { name, onupdate }: Props = $props()
+
+	const { map } = useMapLibre()
+	const nav = useNavigationMap()
+
+	let pointerdownTheta = 0
+	let pointerdownRadius = 0
+	let pointerdownLength = 0
+	let pointerdownWidth = 0
+	let pointerdownHeight = 0
+
+	let draggingObstacle = $state(false)
+
+	const pointermove = new THREE.Vector2()
+	const pointerdown = new THREE.Vector2()
+
+	const debugMode = $derived(nav.environment === 'debug')
+	const obstacle = $derived(nav.obstacles.find((item) => item.name === name))
+
+	const handleGeometryCreate = (ref: THREE.BufferGeometry) => {
+		ref.rotateX(-Math.PI / 2)
+	}
+
+	const handlePointerDown = () => {
+		nav.selected = name
+
+		if (debugMode) {
+			return
+		}
+
+		map.dragPan.disable()
+		draggingObstacle = true
+	}
+
+	const handleMapPointerDown = (event: MapLayerMouseEvent | MapLayerTouchEvent) => {
+		if (debugMode) {
+			return
+		}
+
+		const ev = event.originalEvent
+		const isManipulating = ev.metaKey || ev.ctrlKey || ev.altKey
+
+		if (isManipulating) {
+			event.preventDefault()
+			map.getCanvas().classList.add('!cursor-ns-resize')
+		}
+
+		pointerdown.set(event.point.x, event.point.y)
+
+		const geometry = obstacle?.geometries[0]
+		if (!geometry) {
+			return
+		}
+
+		pointerdownTheta = geometry.pose.orientationVector.th
+
+		switch (geometry.type) {
+			case 'sphere': {
+				pointerdownRadius = geometry.radius
+				break
+			}
+			case 'box': {
+				pointerdownLength = geometry.length
+				pointerdownWidth = geometry.width
+				pointerdownHeight = geometry.height
+				break
+			}
+			case 'capsule': {
+				pointerdownRadius = geometry.radius
+				pointerdownLength = geometry.length
+				break
+			}
+		}
+	}
+
+	const handlePointerMove = (event: MapMouseEvent) => {
+		if (nav.selected === null) {
+			return
+		}
+
+		if (!obstacle) {
+			return
+		}
+
+		const geometry = obstacle.geometries[0]
+		if (!geometry) {
+			return
+		}
+
+		// Rotate
+		if (event.originalEvent.metaKey || event.originalEvent.ctrlKey) {
+			pointermove.set(event.point.x, event.point.y)
+			pointermove.sub(pointerdown)
+
+			geometry.pose.orientationVector.th = pointerdownTheta + pointermove.y / 10
+
+			onupdate({
+				...obstacle,
+				geometries: [geometry],
+			})
+
+			// Scale
+		} else if (event.originalEvent.altKey) {
+			pointermove.set(event.point.x, event.point.y)
+			pointermove.sub(pointerdown)
+
+			const { y } = pointermove
+
+			switch (geometry.type) {
+				case 'sphere': {
+					geometry.radius = Math.max(0, pointerdownRadius - y)
+					break
+				}
+				case 'box': {
+					geometry.length = Math.max(0, pointerdownLength - y)
+					geometry.width = Math.max(0, pointerdownWidth - y)
+					geometry.height = Math.max(0, pointerdownHeight - y)
+					break
+				}
+				case 'capsule': {
+					geometry.radius = Math.max(0, pointerdownRadius - y)
+					geometry.length = Math.max(0, pointerdownLength - y)
+					break
+				}
+			}
+
+			onupdate({
+				...obstacle,
+				geometries: [geometry],
+			})
+
+			// Transform
+		} else {
+			onupdate({
+				...obstacle,
+				location: new LngLat(event.lngLat.lng, event.lngLat.lat),
+			})
+		}
+	}
+
+	const handlePointerUp = () => {
+		draggingObstacle = false
+		map.dragPan.enable()
+		map.getCanvas().classList.remove('!cursor-ns-resize')
+	}
+
+	const active = $derived(nav.hovered === name || nav.selected === name)
+
+	$effect.pre(() => {
+		if (draggingObstacle) {
+			map.on('mousemove', handlePointerMove)
+		} else {
+			map.off('mousemove', handlePointerMove)
+		}
+	})
+
+	useMapLibreEvent('mousedown', handleMapPointerDown)
+</script>
+
+<svelte:window onpointerup={handlePointerUp} />
+
+{#if obstacle}
+	{#each obstacle.geometries as geometry, index (index)}
+		<T.Mesh
+			{name}
+			obstacle={name}
+			userData.lngLat={obstacle.location}
+			rotation.y={geometry.pose.orientationVector.th}
+			onpointerenter={() => (nav.hovered = name)}
+			onpointerleave={() => (nav.hovered = undefined)}
+			onpointerdown={() => handlePointerDown()}
+		>
+			{#if geometry.type === 'box'}
+				{#if active}
+					<AxesHelper
+						raycast={() => null}
+						length={Math.max(geometry.length, geometry.width, geometry.height) * 2}
+						depthTest={false}
+					/>
+				{/if}
+
+				{#if nav.view === '3D'}
+					<T.BoxGeometry
+						computeBounding={name}
+						args={[geometry.length, geometry.width, geometry.height]}
+						oncreate={handleGeometryCreate}
+					/>
+				{:else}
+					<T.PlaneGeometry
+						computeBounding={name}
+						args={[geometry.length, geometry.width]}
+						oncreate={handleGeometryCreate}
+					/>
+				{/if}
+			{:else if geometry.type === 'sphere'}
+				<!--
+        Points are defined as a sphere with radius 0.
+        Those points use sensible defaults defined below.
+      -->
+				{#if active}
+					<AxesHelper
+						raycast={() => null}
+						length={geometry.radius * 2}
+						depthTest={false}
+					/>
+				{/if}
+
+				{#if nav.view === '3D'}
+					<T.SphereGeometry
+						computeBounding={name}
+						args={[geometry.radius || 5]}
+						oncreate={handleGeometryCreate}
+					/>
+				{:else}
+					<T.CircleGeometry
+						computeBounding={name}
+						args={[geometry.radius || 5]}
+						oncreate={handleGeometryCreate}
+					/>
+				{/if}
+			{:else if geometry.type === 'capsule'}
+				{#if active}
+					<AxesHelper
+						raycast={() => null}
+						length={Math.max(geometry.radius, geometry.length) * 2}
+						depthTest={false}
+					/>
+				{/if}
+
+				<T
+					is={CapsuleGeometry}
+					computeBounding={name}
+					args={[geometry.radius, geometry.length, 16, 32]}
+					oncreate={handleGeometryCreate}
+				/>
+			{/if}
+
+			<T.MeshPhongMaterial color={active ? theme.extend.colors['solar-power'] : obstacle.color} />
+		</T.Mesh>
+	{/each}
+{/if}

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

@@ -0,0 +1,10 @@
+import type { Obstacle } from '../types';
+interface Props {
+    /** The obstacle name. */
+    name: string;
+    /** Fired when obstacles are created, destroyed, or edited. */
+    onupdate: (payload: Obstacle) => void;
+}
+declare const Obstacle: import("svelte").Component<Props, {}, "">;
+type Obstacle = ReturnType<typeof Obstacle>;
+export default Obstacle;

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { ColorRepresentation } from 'three'
+
+	import { T } from '@threlte/core'
+
+	import type { Path } from '../types'
+
+	interface Props {
+		path: Path
+		color: ColorRepresentation
+	}
+
+	const { path, color }: Props = $props()
+</script>
+
+{#each path as loc, index (index)}
+	<T.Mesh userData.lngLat={loc}>
+		<T.SphereGeometry args={[0.2]} />
+		<T.MeshBasicMaterial {color} />
+	</T.Mesh>
+{/each}
+
+<T.Line userData.lngLat={path}>
+	<T.BufferGeometry />
+	<T.LineDashedMaterial
+		{color}
+		dashSize={0.1}
+		gapSize={0.1}
+	/>
+</T.Line>

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

@@ -0,0 +1,9 @@
+import type { ColorRepresentation } from 'three';
+import type { Path } from '../types';
+interface Props {
+    path: Path;
+    color: ColorRepresentation;
+}
+declare const Path: import("svelte").Component<Props, {}, "">;
+type Path = ReturnType<typeof Path>;
+export default Path;

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { DirectionalMarker, type GeoPose } from '../../maplibre'
+
+	interface Props {
+		/** The Lng,Lat and rotation of the marker. */
+		pose?: GeoPose
+	}
+
+	const { pose }: Props = $props()
+</script>
+
+{#if pose}
+	<DirectionalMarker
+		lng={pose.lng}
+		lat={pose.lat}
+		rotation={pose.rotation}
+	/>
+{/if}

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

@@ -0,0 +1,8 @@
+import { type GeoPose } from '../../maplibre';
+interface Props {
+    /** The Lng,Lat and rotation of the marker. */
+    pose?: GeoPose;
+}
+declare const RobotMarker: import("svelte").Component<Props, {}, "">;
+type RobotMarker = ReturnType<typeof RobotMarker>;
+export default RobotMarker;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Canvas } from '@threlte/core'
+
+	import type { Obstacle } from '../types'
+
+	import Scene from './scene.svelte'
+
+	interface Props {
+		onUpdate: (payload: Obstacle[]) => void
+	}
+
+	const { onUpdate }: Props = $props()
+</script>
+
+<div class="pointer-events-none absolute right-0 bottom-0 h-full w-full">
+	<Canvas
+		autoRender={false}
+		renderMode="always"
+	>
+		<Scene {onUpdate} />
+	</Canvas>
+</div>

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

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

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

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import type { LngLat } from 'maplibre-gl'
+
+	import { T, useThrelte } from '@threlte/core'
+	import { theme } from '@viamrobotics/prime-core/theme'
+	import { Camera, Plane, Vector3 } from 'three'
+
+	import type { Obstacle } from '../types'
+
+	import { useMapLibreThreeRenderer } from '../../maplibre'
+	import { createName } from '../lib/create-name'
+	import { createObstacle } from '../lib/create-obstacle'
+	import { computeBoundingPlugin } from '../plugins/compute-bounding.svelte'
+	import { interactivityPlugin } from '../plugins/interactivity'
+	import { useNavigationMap } from '../use-navigation-map.svelte'
+	import Drawtool from './draw-tool.svelte'
+	import ObstacleGeometries from './obstacle.svelte'
+	import Path from './path.svelte'
+
+	interface Props {
+		onUpdate: (payload: Obstacle[]) => void
+	}
+
+	const { onUpdate }: Props = $props()
+
+	const nav = useNavigationMap()
+
+	computeBoundingPlugin()
+	interactivityPlugin()
+
+	const { renderer, scene, camera } = useThrelte()
+	const clippingPlane = new Plane(new Vector3(0, 1, 0), 0)
+
+	camera.set(new Camera())
+
+	useMapLibreThreeRenderer(scene, camera, () => {
+		renderer.render(scene, camera.current)
+	})
+
+	const handleUpdate = () => {
+		onUpdate(nav.obstacles)
+	}
+
+	const handleDraw = ({
+		width,
+		height,
+		center,
+	}: {
+		width: number
+		height: number
+		center: LngLat
+	}) => {
+		const names = nav.obstacles.map((obstacle) => obstacle.name)
+		const name = createName(names, 'obstacle', nav.obstacles.length)
+		const obstacle = createObstacle(name, center)
+
+		if (obstacle.geometries[0]?.type === 'box') {
+			obstacle.geometries[0].length = width
+			obstacle.geometries[0].width = height
+		}
+
+		nav.obstacles = [obstacle, ...nav.obstacles]
+		nav.selected = obstacle.name
+
+		onUpdate(nav.obstacles)
+	}
+
+	const flat = $derived(nav.view === '2D')
+
+	// This clips against the map so that objects intersecting sea level will not render over the map
+	$effect.pre(() => {
+		renderer.clippingPlanes = flat ? [] : [clippingPlane]
+	})
+</script>
+
+<T.AmbientLight intensity={flat ? 2 : 1.5} />
+
+{#if !flat}
+	<T.DirectionalLight intensity={1.5} />
+{/if}
+
+{#each nav.obstacles as obstacle (obstacle.name)}
+	<ObstacleGeometries
+		name={obstacle.name}
+		onupdate={handleUpdate}
+	/>
+{/each}
+
+{#each nav.paths as path, i (i)}
+	<Path
+		{path}
+		color={theme.extend.colors.hyperlink}
+	/>
+{/each}
+
+{#if nav.environment === 'configure'}
+	<Drawtool onUpdate={handleDraw} />
+{/if}

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

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

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { MapLibreMarker } from '../../maplibre'
+	import { useNavigationMap } from '../use-navigation-map.svelte'
+
+	const nav = useNavigationMap()
+</script>
+
+{#each nav.waypoints as waypoint (waypoint.id)}
+	<MapLibreMarker
+		scale={0.7}
+		lng={waypoint.lng}
+		lat={waypoint.lat}
+	/>
+{/each}

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

@@ -0,0 +1,18 @@
+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;
+}
+declare const Waypoints: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Waypoints = InstanceType<typeof Waypoints>;
+export default Waypoints;

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

@@ -0,0 +1,2 @@
+export { default as NavigationMap } from './index.svelte';
+export { NavigationTab, type NavigationTabType, type Shapes, type CapsuleGeometry, type SphereGeometry, type BoxGeometry, type Geometry, type Obstacle, type Path, } from './types';

package/dist/components/navigation-map/index.js

@@ -0,0 +1,2 @@
+export { default as NavigationMap } from './index.svelte';
+export { NavigationTab, } from './types';

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

@@ -0,0 +1,99 @@
+<!--
+  @component
+
+  A map for configuring or viewing navigation service information, such as waypoints, obstacles, or motion paths.
+
+  ```svelte
+    <NavigationMap
+      environment={'debug' | 'configure'}
+      waypoints={Waypoint[]}
+      obstacles={Obstacle[]}
+      on:click
+      on:delete-waypoint
+      on:update-obstacles
+    />
+  ```
+-->
+<script lang="ts">
+	import type { LngLat, Map as MapType } from 'maplibre-gl'
+	import type { Snippet } from 'svelte'
+
+	import { type GeoPose, type MapProvider, MapProviders, type Waypoint } from '../maplibre/types'
+	import Map from './components/map.svelte'
+	import { NavigationTab, type NavigationTabType, type Obstacle, type Path } from './types'
+	import { provideNavigationMapContext } from './use-navigation-map.svelte'
+
+	interface Props {
+		/** The map environment. "debug" assumes the robot is on and connected. */
+		environment?: 'debug' | 'configure'
+		/** The waypoints to render on the map. */
+		waypoints?: Waypoint[]
+		/** The obstacles to render on the map. */
+		obstacles?: Obstacle[]
+		/** The paths to render on the map. */
+		paths?: Path[]
+		/** The initial tab to show. */
+		tab?: NavigationTabType
+		/** A reference to the maplibre map, once created. */
+		map?: MapType
+		/** The visible set of tabs. */
+		tabs?: NavigationTabType[]
+		/** The pose (Lng,Lat) and rotation of a base. */
+		baseGeoPose?: GeoPose
+		/** The map provider to use. */
+		mapProvider?: MapProvider
+		/** The API key for the map provider. */
+		mapProviderKey?: string
+		/** The current tab to show. */
+		currentTab?: Snippet
+		/** Fires when the obstacles are updated. */
+		onupdate: (obstacles: Obstacle[]) => void
+		/** Fires when a waypoint is added. */
+		onaddwaypoint: (waypoint: LngLat) => void
+		/** Fires when a waypoint is deleted. */
+		ondeletewaypoint: (id: string) => void
+	}
+
+	let {
+		environment = 'debug',
+		waypoints = [],
+		obstacles = [],
+		paths = [],
+		tab = NavigationTab.Waypoints,
+		map = $bindable(),
+		tabs = [NavigationTab.Waypoints, NavigationTab.Obstacles],
+		baseGeoPose,
+		mapProvider = MapProviders.openStreet,
+		mapProviderKey,
+		currentTab,
+		onupdate,
+		onaddwaypoint,
+		ondeletewaypoint,
+	}: Props = $props()
+
+	const context = provideNavigationMapContext(
+		() => tab,
+		() => tabs,
+		() => waypoints,
+		() => paths,
+		() => environment
+	)
+
+	$effect(() => {
+		context.obstacles = obstacles
+	})
+</script>
+
+<Map
+	bind:map
+	{baseGeoPose}
+	{mapProvider}
+	{mapProviderKey}
+	{onupdate}
+	{onaddwaypoint}
+	{ondeletewaypoint}
+>
+	{#snippet tab()}
+		{@render currentTab?.()}
+	{/snippet}
+</Map>

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

@@ -0,0 +1,51 @@
+import type { LngLat, Map as MapType } from 'maplibre-gl';
+import type { Snippet } from 'svelte';
+import { type GeoPose, type MapProvider, type Waypoint } from '../maplibre/types';
+import { type NavigationTabType, type Obstacle, type Path } from './types';
+interface Props {
+    /** The map environment. "debug" assumes the robot is on and connected. */
+    environment?: 'debug' | 'configure';
+    /** The waypoints to render on the map. */
+    waypoints?: Waypoint[];
+    /** The obstacles to render on the map. */
+    obstacles?: Obstacle[];
+    /** The paths to render on the map. */
+    paths?: Path[];
+    /** The initial tab to show. */
+    tab?: NavigationTabType;
+    /** A reference to the maplibre map, once created. */
+    map?: MapType;
+    /** The visible set of tabs. */
+    tabs?: NavigationTabType[];
+    /** The pose (Lng,Lat) and rotation of a base. */
+    baseGeoPose?: GeoPose;
+    /** The map provider to use. */
+    mapProvider?: MapProvider;
+    /** The API key for the map provider. */
+    mapProviderKey?: string;
+    /** The current tab to show. */
+    currentTab?: Snippet;
+    /** Fires when the obstacles are updated. */
+    onupdate: (obstacles: Obstacle[]) => void;
+    /** Fires when a waypoint is added. */
+    onaddwaypoint: (waypoint: LngLat) => void;
+    /** Fires when a waypoint is deleted. */
+    ondeletewaypoint: (id: string) => void;
+}
+/**
+ * A map for configuring or viewing navigation service information, such as waypoints, obstacles, or motion paths.
+ *
+ * ```svelte
+ *   <NavigationMap
+ *     environment={'debug' | 'configure'}
+ *     waypoints={Waypoint[]}
+ *     obstacles={Obstacle[]}
+ *     on:click
+ *     on:delete-waypoint
+ *     on:update-obstacles
+ *   />
+ * ```
+ */
+declare const Index: import("svelte").Component<Props, {}, "map">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/navigation-map/lib/create-geometry.d.ts

@@ -0,0 +1,2 @@
+import type { Geometry, Shapes } from '../types';
+export declare const createGeometry: (type: Shapes, size?: number, rotation?: number) => Geometry;