@viamrobotics/motion-tools 0.9.3 → 0.9.5

package/README.md

@@ -1,6 +1,6 @@
 ## motion-tools
 
-`motion-tools` is visualizer for motion-related monitoring, testing, and debugging.
+`motion-tools` aims to provide a visualization interface for any spatial information using Viam's APIs. This typically means motion-related monitoring, testing, and debugging.
 
 ### Getting started
 
@@ -30,6 +30,7 @@ VITE_CONFIGS='
     "signalingAddress": "https://app.viam.com:443"
   }
 }
+'
 ```
 
 ### Executing drawing commands

package/dist/WorldObject.d.ts

@@ -1,4 +1,4 @@
-import type { Geometry, Pose } from '@viamrobotics/sdk';
+import type { Geometry, Pose, TransformWithUUID } from '@viamrobotics/sdk';
 import { BatchedMesh, Box3, Object3D, Vector3, type ColorRepresentation } from 'three';
 export type PointsGeometry = {
     case: 'points';
@@ -34,3 +34,22 @@ export declare class WorldObject<T extends Geometries = Geometries> {
     metadata: Metadata;
     constructor(name: string, pose?: Pose, parent?: string, geometry?: T, metadata?: Metadata);
 }
+export declare const fromTransform: (transform: TransformWithUUID) => WorldObject<{
+    case: undefined;
+    value?: undefined;
+} | {
+    case: "sphere";
+    value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Sphere>;
+} | {
+    case: "box";
+    value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").RectangularPrism>;
+} | {
+    case: "capsule";
+    value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Capsule>;
+} | {
+    case: "mesh";
+    value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Mesh>;
+} | {
+    case: "pointcloud";
+    value: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").PointCloud>;
+}>;

package/dist/WorldObject.js

@@ -16,3 +16,8 @@ export class WorldObject {
         this.metadata = metadata ?? {};
     }
 }
+export const fromTransform = (transform) => {
+    const metadata = { ...transform.metadata?.fields };
+    const worldObject = new WorldObject(transform.referenceFrame, transform.poseInObserverFrame?.pose, transform.poseInObserverFrame?.referenceFrame, transform.physicalObject?.geometryType, metadata);
+    return worldObject;
+};

package/dist/components/App.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
 	import { Canvas } from '@threlte/core'
+	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+
 	import Scene from './Scene.svelte'
 	import TreeContainer from './Tree/TreeContainer.svelte'
 	import Details from './Details.svelte'
@@ -10,19 +12,31 @@
 	import { createPartIDContext } from '../hooks/usePartID.svelte'
 	import Dashboard from './dashboard/Dashboard.svelte'
 	import { domPortal } from '../portal'
+	import { provideSettings } from '../hooks/useSettings.svelte'
 
 	interface Props {
 		partID?: string
+		enableKeybindings?: boolean
 		children?: Snippet
 	}
 
-	let { partID = '', children: appChildren }: Props = $props()
+	let { partID = '', enableKeybindings = true, children: appChildren }: Props = $props()
+
+	const settings = provideSettings()
+
+	$effect(() => {
+		settings.current.enableKeybindings = enableKeybindings
+	})
 
 	createPartIDContext(() => partID)
 
 	let root = $state.raw<HTMLElement>()
 </script>
 
+{#if settings.current.enableQueryDevtools}
+	<SvelteQueryDevtools initialIsOpen />
+{/if}
+
 <div
 	class="relative h-full w-full overflow-hidden"
 	bind:this={root}

package/dist/components/App.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     partID?: string;
+    enableKeybindings?: boolean;
     children?: Snippet;
 }
 declare const App: import("svelte").Component<Props, {}, "">;

package/dist/components/AxesHelper.svelte

@@ -66,6 +66,7 @@
 	is={line}
 	{...rest}
 	raycast={() => null}
+	bvh={{ enabled: false }}
 >
 	<T is={geometry} />
 	<T

package/dist/components/CameraControls.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
+	import { MathUtils } from 'three'
 	import { CameraControls, type CameraControlsRef, Gizmo } from '@threlte/extras'
 	import { useTransformControls } from '../hooks/useControls.svelte'
 	import KeyboardControls from './KeyboardControls.svelte'
 	import Portal from './portal/Portal.svelte'
 	import Button from './dashboard/Button.svelte'
 	import { useDrawAPI } from '../hooks/useDrawAPI.svelte'
+	import { useSettings } from '../hooks/useSettings.svelte'
 
+	const settings = useSettings()
 	const drawAPI = useDrawAPI()
 	const transformControls = useTransformControls()
 
+	const enableKeybindings = $derived(settings.current.enableKeybindings)
+
 	let ref = $state.raw<CameraControlsRef>()
 
 	$effect(() => {
@@ -22,6 +27,7 @@
 
 	$effect(() => {
 		if (ref) {
+			;(window as unknown as { MathUtils: typeof MathUtils }).MathUtils = MathUtils
 			;(window as unknown as { cameraControls: CameraControlsRef }).cameraControls = ref
 		}
 	})
@@ -45,7 +51,9 @@
 	enabled={!transformControls.active}
 >
 	{#snippet children({ ref }: { ref: CameraControlsRef })}
-		<KeyboardControls cameraControls={ref} />
+		{#if enableKeybindings}
+			<KeyboardControls cameraControls={ref} />
+		{/if}
 		<Gizmo />
 	{/snippet}
 </CameraControls>

package/dist/components/DotSprite.svelte

@@ -1,44 +1,59 @@
-<script
-	module
-	lang="ts"
->
+<script lang="ts">
 	import { T, type Props as ThrelteProps } from '@threlte/core'
-	import { CanvasTexture, type Sprite, type ColorRepresentation } from 'three'
-
-	const size = 128
-	const canvas = new OffscreenCanvas(size, size)
-	const ctx = canvas.getContext('2d')
+	import type { ColorRepresentation, Vector3Tuple, Group } from 'three'
+	import { HTML } from '@threlte/extras'
 
-	if (ctx) {
-		ctx.clearRect(0, 0, size, size)
-		ctx.beginPath()
-		ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2)
-		ctx.fillStyle = 'white'
-		ctx.fill()
-	}
-
-	const map = new CanvasTexture(canvas)
-</script>
-
-<script lang="ts">
-	interface Props extends ThrelteProps<typeof Sprite> {
+	interface Props extends ThrelteProps<typeof Group> {
+		position: Vector3Tuple
 		color?: ColorRepresentation
 		opacity?: number
 	}
 
-	let { color, opacity = 1, ref = $bindable(), ...rest }: Props = $props()
+	let { position, color, opacity = 1, ref = $bindable(), ...rest }: Props = $props()
 </script>
 
-<T.Sprite
+<T.Group
 	bind:ref
-	scale={0.05}
 	{...rest}
+	{position}
 >
-	<T.SpriteMaterial
-		transparent
-		depthTest={false}
-		{map}
-		{opacity}
-		color={color ?? 'black'}
-	/>
-</T.Sprite>
+	<T.Mesh
+		bvh={{ enabled: false }}
+		raycast={() => null}
+		scale={0.01}
+		renderOrder={1}
+	>
+		<T.SphereGeometry />
+		<T.MeshBasicMaterial
+			color={color ?? 'black'}
+			transparent
+			depthTest={false}
+			{opacity}
+		/>
+	</T.Mesh>
+
+	<HTML
+		class="pointer-events-none mb-2 w-16 -translate-x-1/2 -translate-y-[calc(100%+10px)] border border-black bg-white px-1 py-0.5 text-xs text-wrap"
+	>
+		<div class="flex justify-between">
+			<span class="text-subtle-2">x</span>
+			<div>
+				{position[0].toFixed(2)}<span class="text-subtle-2">m</span>
+			</div>
+		</div>
+
+		<div class="flex justify-between">
+			<span class="text-subtle-2">y</span>
+			<div>
+				{position[1].toFixed(2)}<span class="text-subtle-2">m</span>
+			</div>
+		</div>
+
+		<div class="flex justify-between">
+			<span class="text-subtle-2">z</span>
+			<div>
+				{position[2].toFixed(2)}<span class="text-subtle-2">m</span>
+			</div>
+		</div>
+	</HTML>
+</T.Group>

package/dist/components/DotSprite.svelte.d.ts

@@ -1,6 +1,7 @@
 import { type Props as ThrelteProps } from '@threlte/core';
-import { type Sprite, type ColorRepresentation } from 'three';
-interface Props extends ThrelteProps<typeof Sprite> {
+import type { ColorRepresentation, Vector3Tuple, Group } from 'three';
+interface Props extends ThrelteProps<typeof Group> {
+    position: Vector3Tuple;
     color?: ColorRepresentation;
     opacity?: number;
 }

package/dist/components/Focus.svelte

@@ -2,7 +2,10 @@
 	import { T } from '@threlte/core'
 	import { TrackballControls, Gizmo } from '@threlte/extras'
 	import { Box3, type Object3D, Vector3 } from 'three'
+	import { TrackballControls as ThreeTrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
 	import Camera from './Camera.svelte'
+	import Portal from './portal/Portal.svelte'
+	import Button from './dashboard/Button.svelte'
 
 	interface Props {
 		object3d: Object3D
@@ -16,6 +19,8 @@
 	let center = $state.raw<[number, number, number]>([0, 0, 0])
 	let size = $state.raw<[number, number, number]>([0, 0, 0])
 
+	let controls = $state.raw<ThreeTrackballControls>()
+
 	$effect.pre(() => {
 		box.setFromObject(object3d)
 		size = box.getSize(vec).toArray()
@@ -23,11 +28,39 @@
 	})
 </script>
 
+<Portal id="dashboard">
+	<fieldset>
+		<Button
+			active
+			icon="camera-outline"
+			description="Reset camera"
+			onclick={() => {
+				controls?.reset()
+			}}
+		/>
+	</fieldset>
+</Portal>
+
 <Camera position={[size[0] + 1, size[0] + 1, size[0] + 1]}>
-	<TrackballControls target={center}>
+	<TrackballControls
+		bind:ref={controls}
+		target={center}
+	>
 		<Gizmo />
 	</TrackballControls>
 </Camera>
 
-<T is={object3d} />
-<T.BoxHelper args={[object3d, 'red']} />
+<T
+	is={object3d}
+	bvh={{
+		enabled: object3d.type === 'Points',
+		maxDepth: 40,
+		maxLeafTris: 20,
+	}}
+/>
+
+<T.BoxHelper
+	args={[object3d, 'red']}
+	bvh={{ enabled: false }}
+	raycast={() => null}
+/>

package/dist/components/Geometry.svelte

@@ -62,6 +62,7 @@
 	{name}
 	{uuid}
 	{...rest}
+	bvh={{ enabled: false }}
 >
 	{#if geometry?.case === 'mesh'}
 		{@const mesh = geometry.value.mesh as Uint8Array<ArrayBuffer>}
@@ -112,7 +113,10 @@
 		/>
 
 		{#if geo}
-			<T.LineSegments raycast={() => null}>
+			<T.LineSegments
+				raycast={() => null}
+				bvh={{ enabled: false }}
+			>
 				<T.EdgesGeometry args={[geo, 0]} />
 				<T.LineBasicMaterial color={darkenColor(color, 10)} />
 			</T.LineSegments>

package/dist/components/MeasureTool.svelte

@@ -1,41 +1,39 @@
 <script lang="ts">
 	import { untrack } from 'svelte'
-	import { Raycaster, Vector2, Vector3, type Intersection } from 'three'
-	import { T, useThrelte, useTask } from '@threlte/core'
-	import { HTML, MeshLineGeometry, MeshLineMaterial, useInteractivity } from '@threlte/extras'
+	import { Vector3, type Intersection } from 'three'
+	import { T } from '@threlte/core'
+	import { HTML, MeshLineGeometry, MeshLineMaterial } from '@threlte/extras'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import Button from './dashboard/Button.svelte'
 	import Portal from './portal/Portal.svelte'
 	import DotSprite from './DotSprite.svelte'
+	import { useMouseRaycaster } from '../hooks/useMouseRaycaster.svelte'
+	import { useFocused } from '../hooks/useSelection.svelte'
 
+	const focus = useFocused()
 	const settings = useSettings()
-	const { camera } = useThrelte()
-	const interactivity = useInteractivity()
-	const raycaster = new Raycaster()
 
 	const htmlPosition = new Vector3()
-	const pointerDown = new Vector2()
-	const pointerUp = new Vector2()
 
 	let step: 'idle' | 'p1' | 'p2' = 'idle'
 
-	let intersection: Intersection | undefined
+	let intersection = $state.raw<Intersection>()
 	let p1 = $state.raw<Vector3>()
 	let p2 = $state.raw<Vector3>()
 
 	const enabled = $derived(settings.current.enableMeasure)
 
-	const onpointerdown = (event: PointerEvent) => {
-		pointerDown.set(event.clientX, event.clientY)
-	}
-
-	const onpointerup = (event: PointerEvent) => {
-		pointerUp.set(event.clientX, event.clientY)
+	const { onclick, onmove, raycaster } = useMouseRaycaster(() => ({
+		enabled,
+	}))
+	raycaster.firstHitOnly = true
+	raycaster.params.Points.threshold = 0.005
 
-		if (pointerDown.distanceToSquared(pointerUp) > 0.1) {
-			return
-		}
+	onmove((event) => {
+		intersection = event.intersections[0]
+	})
 
+	onclick(() => {
 		if (step === 'idle' && intersection) {
 			p1 = intersection.point.clone()
 			step = 'p1'
@@ -47,38 +45,18 @@
 			p2 = undefined
 			step = 'idle'
 		}
-	}
-
-	const { start, stop } = useTask(
-		() => {
-			if (interactivity.hovered.size === 0) {
-				return
-			}
-
-			for (const [, event] of interactivity.hovered) {
-				raycaster.setFromCamera(interactivity.pointer.current, camera.current)
-				intersection = raycaster.intersectObject(event.object)[0]
-			}
-		},
-		{ autoStart: false }
-	)
-
-	$effect(() => {
-		if (!enabled) {
-			untrack(() => {
-				p1 = undefined
-				p2 = undefined
-				step = 'idle'
-			})
-		}
 	})
 
+	const clear = () => {
+		p1 = undefined
+		p2 = undefined
+		step = 'idle'
+	}
+
 	$effect(() => {
-		if (enabled) {
-			start()
-		} else {
-			stop()
-		}
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		;(focus.current, enabled)
+		untrack(() => clear())
 	})
 </script>
 
@@ -96,12 +74,11 @@
 	</fieldset>
 </Portal>
 
-<svelte:window
-	onpointerdown={enabled ? onpointerdown : undefined}
-	onpointerup={enabled ? onpointerup : undefined}
-/>
-
 {#if enabled}
+	{#if intersection}
+		<DotSprite position={intersection?.point.toArray()} />
+	{/if}
+
 	{#if p1}
 		<DotSprite position={p1.toArray()} />
 	{/if}
@@ -111,12 +88,18 @@
 	{/if}
 
 	{#if p1 && p2}
-		<T.Mesh>
+		<T.Mesh
+			raycast={() => null}
+			bvh={{ enabled: false }}
+			renderOrder={1}
+		>
 			<MeshLineGeometry points={[p1, p2]} />
 			<MeshLineMaterial
-				width={0.015}
+				width={2.5}
 				depthTest={false}
 				color="black"
+				attenuate={false}
+				transparent
 			/>
 		</T.Mesh>
 		<HTML
@@ -124,7 +107,7 @@
 			position={htmlPosition.lerpVectors(p1, p2, 0.5).toArray()}
 		>
 			<div class="border border-black bg-white px-1 py-0.5 text-xs">
-				{p1.distanceTo(p2).toFixed(2)}m
+				{p1.distanceTo(p2).toFixed(2)}<span class="text-subtle-2">m</span>
 			</div>
 		</HTML>
 	{/if}

package/dist/components/Pointcloud.svelte

@@ -6,11 +6,9 @@
 		PointsMaterial,
 		OrthographicCamera,
 	} from 'three'
-
 	import { T, useTask, useThrelte } from '@threlte/core'
 	import type { WorldObject } from '../WorldObject'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
-	import { meshBounds } from '@threlte/extras'
 	import { poseToObject3d } from '../transform'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import type { Snippet } from 'svelte'
@@ -85,8 +83,8 @@
 	is={points}
 	name={object.name}
 	uuid={object.uuid}
-	raycast={meshBounds}
 	{...events}
+	bvh={{ maxDepth: 40, maxLeafTris: 20 }}
 >
 	<T is={geometry} />
 	<T is={material} />

package/dist/components/PointerMissBox.svelte

@@ -1,19 +1,25 @@
 <script lang="ts">
-	import { BackSide, Vector3 } from 'three'
+	import { BackSide, Mesh, Vector3 } from 'three'
 	import { T, useThrelte } from '@threlte/core'
 	import { MeshDiscardMaterial } from '@threlte/extras'
 	import { useSelected } from '../hooks/useSelection.svelte'
 	import { useTransformControls } from '../hooks/useControls.svelte'
+	import { useSettings } from '../hooks/useSettings.svelte'
 
 	const { camera } = useThrelte()
+	const settings = useSettings()
 	const selected = useSelected()
 	const transformControls = useTransformControls()
 	const cameraDown = new Vector3()
 
+	const enabled = $derived(!settings.current.enableMeasure)
+
 	const size = 1_000
 </script>
 
 <T.Mesh
+	raycast={enabled ? Mesh.prototype.raycast : () => null}
+	bvh={{ enabled: false }}
 	onpointerdown={() => {
 		cameraDown.copy(camera.current.position)
 	}}

package/dist/components/PointerMissBox.svelte.d.ts

@@ -1,18 +1,3 @@
-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 PointerMissBox: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type PointerMissBox = InstanceType<typeof PointerMissBox>;
+declare const PointerMissBox: import("svelte").Component<Record<string, never>, {}, "">;
+type PointerMissBox = ReturnType<typeof PointerMissBox>;
 export default PointerMissBox;

package/dist/components/Scene.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Vector3 } from 'three'
 	import { T } from '@threlte/core'
-	import { Grid, interactivity, PerfMonitor } from '@threlte/extras'
+	import { Grid, interactivity, PerfMonitor, bvh } from '@threlte/extras'
 	import { PortalTarget } from './portal'
 	import WorldObjects from './WorldObjects.svelte'
 	import Selected from './Selected.svelte'
@@ -24,7 +24,11 @@
 
 	let { children }: Props = $props()
 
-	interactivity({
+	const settings = useSettings()
+	const focusedObject3d = useFocusedObject3d()
+	const origin = useOrigin()
+
+	const { raycaster, enabled } = interactivity({
 		filter: (items) => {
 			const item = items.find((item) => {
 				return item.object.visible === undefined || item.object.visible === true
@@ -33,12 +37,14 @@
 			return item ? [item] : []
 		},
 	})
+	$effect.pre(() => {
+		enabled.set(!settings.current.enableMeasure)
+	})
+	raycaster.firstHitOnly = true
 
-	const settings = useSettings()
-	const focusedObject3d = useFocusedObject3d()
-	const origin = useOrigin()
+	bvh(() => ({ helper: false }))
 
-	const object3d = $derived(focusedObject3d.current)
+	const focusedObject = $derived(focusedObject3d.current)
 
 	const { isPresenting } = useXR()
 </script>
@@ -52,8 +58,11 @@
 	rotation.x={$isPresenting ? -Math.PI / 2 : 0}
 	rotation.z={origin.rotation}
 >
-	{#if object3d}
-		<Focus {object3d} />
+	<PointerMissBox />
+	<MeasureTool />
+
+	{#if focusedObject}
+		<Focus object3d={focusedObject} />
 	{:else}
 		{#if !$isPresenting}
 			<Camera position={[3, 3, 3]}>
@@ -61,18 +70,13 @@
 			</Camera>
 		{/if}
 
-		<PortalTarget id="world" />
-
-		<MeasureTool />
 		<StaticGeometries />
-
-		<WorldObjects />
-		<PointerMissBox />
-
 		<Selected />
 
 		{#if !$isPresenting && settings.current.grid}
 			<Grid
+				raycast={() => null}
+				bvh={{ enabled: false }}
 				plane="xy"
 				sectionColor="#333"
 				infiniteGrid
@@ -84,6 +88,11 @@
 		{/if}
 	{/if}
 
+	<T.Group attach={focusedObject ? false : undefined}>
+		<PortalTarget id="world" />
+		<WorldObjects />
+	</T.Group>
+
 	{@render children?.()}
 
 	<T.DirectionalLight position={[3, 3, 3]} />

package/dist/components/SceneProviders.svelte

@@ -13,7 +13,6 @@
 	import { provideObjects } from '../hooks/useObjects.svelte'
 	import { provideMotionClient } from '../hooks/useMotionClient.svelte'
 	import { provideLogs } from '../hooks/useLogs.svelte'
-	import { provideSettings } from '../hooks/useSettings.svelte'
 	import { provideOrigin } from './xr/useOrigin.svelte'
 
 	interface Props {
@@ -24,7 +23,6 @@
 
 	const partID = usePartID()
 
-	provideSettings()
 	provideTransformControls()
 	provideVisibility()
 	provideMachineSettings()
@@ -39,6 +37,7 @@
 	providePointclouds(() => partID.current)
 	provideMotionClient(() => partID.current)
 	provideObjects()
+
 	const { focus } = provideSelection()
 </script>
 

package/dist/components/Selected.svelte

@@ -53,4 +53,5 @@
 <T
 	is={box}
 	raycast={() => null}
+	bvh={{ enabled: false }}
 />