@viamrobotics/motion-tools 1.5.0 → 1.9.0

package/README.md

@@ -17,21 +17,28 @@ make setup
 
 This single command will:
 
-1. Install and configure **nvm** (Node Version Manager)
-2. Install the latest **Node.js LTS** version via nvm
-3. Install **pnpm** package manager
-4. Install **bun** runtime
+1. Install **fnm** (Fast Node Manager) and **Node.js 22**
+2. Install **pnpm** package manager
+3. Install **bun** runtime
+4. Install **Go** and **buf** (for protobuf generation)
 5. Install all project dependencies
+6. Generate protobuf code
+
+After setup completes, add the shell configuration it prints to your shell config file (`~/.zshrc` or `~/.bashrc`), then restart your terminal.
 
 #### Manual setup
 
 If the above does not work for you, or if you prefer to install dependencies manually:
 
-1. [Install nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
-2. Install Node.js LTS: `nvm install --lts && nvm use --lts`
-3. [Install pnpm](https://pnpm.io/installation)
-4. [Install bun](https://bun.sh/docs/installation)
-5. Install dependencies: `pnpm i`
+1. [Install fnm](https://github.com/Schniz/fnm#installation): `curl -fsSL https://fnm.vercel.app/install | bash`
+2. Install Node.js: `fnm install 22 && fnm use 22`
+3. [Install pnpm](https://pnpm.io/installation): `curl -fsSL https://get.pnpm.io/install.sh | sh -`
+4. [Install bun](https://bun.sh/docs/installation): `curl -fsSL https://bun.sh/install | bash`
+5. [Install Go](https://go.dev/doc/install)
+6. [Install buf](https://buf.build/docs/installation): download from GitHub releases
+7. Install Go tools: `go install google.golang.org/protobuf/cmd/protoc-gen-go@latest`
+8. Install dependencies: `pnpm install`
+9. Generate protobufs: `make proto`
 
 ### Env files for machine configs
 

package/dist/components/App.svelte

@@ -26,6 +26,8 @@
 		provideDrawConnectionConfig,
 		type DrawConnectionConfig,
 	} from '../hooks/useDrawConnectionConfig.svelte'
+	import Camera from './widgets/Camera.svelte'
+	import HoveredEntities from './HoveredEntities.svelte'
 
 	interface LocalConfigProps {
 		getLocalPartConfig: () => Struct
@@ -64,6 +66,8 @@
 	const settings = provideSettings()
 	const environment = provideEnvironment()
 
+	const currentRobotCameraWidgets = $derived(settings.current.openCameraWidgets[partID] || [])
+
 	$effect(() => {
 		settings.current.enableKeybindings = enableKeybindings
 	})
@@ -125,6 +129,10 @@
 					{@attach domPortal(root)}
 					{dashboard}
 				/>
+
+				{#if settings.current.renderSubEntityHoverDetail}
+					<HoveredEntities {@attach domPortal(root)} />
+				{/if}
 				<Details {@attach domPortal(root)} />
 				{#if environment.current.isStandalone}
 					<LiveUpdatesBanner {@attach domPortal(root)} />
@@ -138,6 +146,15 @@
 					<ArmPositions {@attach domPortal(root)} />
 				{/if}
 
+				{#if !focus}
+					{#each currentRobotCameraWidgets as cameraName (cameraName)}
+						<Camera
+							name={cameraName}
+							{@attach domPortal(root)}
+						/>
+					{/each}
+				{/if}
+
 				<FileDrop {@attach domPortal(root)} />
 			{/snippet}
 		</SceneProviders>

package/dist/components/Frame.svelte

@@ -3,12 +3,10 @@
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
 	import { Color, Group, type Object3D } from 'three'
 	import Geometry from './Geometry2.svelte'
-	import { useWeblabs } from '../hooks/useWeblabs.svelte'
 	import { useSelectedEntity } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import { use3DModels } from '../hooks/use3DModels.svelte'
 	import { colors, darkenColor, resourceColors } from '../color'
-	import { WEBLABS_EXPERIMENTS } from '../hooks/useWeblabs.svelte'
 	import type { Entity } from 'koota'
 	import { traits, useTrait } from '../ecs'
 	import type { Pose } from '@viamrobotics/sdk'
@@ -31,7 +29,6 @@
 	const componentModels = use3DModels()
 	const selectedEntity = useSelectedEntity()
 	const resourceByName = useResourceByName()
-	const weblabs = useWeblabs()
 
 	const name = useTrait(() => entity, traits.Name)
 	const parent = useTrait(() => entity, traits.Parent)
@@ -57,10 +54,6 @@
 	})
 
 	const model = $derived.by(() => {
-		if (!weblabs.isActive(WEBLABS_EXPERIMENTS.MOTION_TOOLS_RENDER_ARM_MODELS)) {
-			return
-		}
-
 		if (!name.current) {
 			return
 		}

package/dist/components/HoveredEntities.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { useQuery } from '../ecs'
+	import { traits } from '../ecs'
+	import HoveredEntityTooltip from './HoveredEntityTooltip.svelte'
+	import { useSelectedEntity } from '../hooks/useSelection.svelte'
+	import { useFocusedEntity } from '../hooks/useSelection.svelte'
+
+	const hoveredEntities = useQuery(traits.Hover)
+	const selectedEntity = useSelectedEntity()
+	const focusedEntity = useFocusedEntity()
+
+	const displayEntity = $derived(selectedEntity.current ?? focusedEntity.current) // for now, only display hover tooltip if the entity is selected or focused
+</script>
+
+{#each hoveredEntities.current as entity (entity)}
+	{#if entity === displayEntity}
+		<HoveredEntityTooltip hoveredEntity={entity} />
+	{/if}
+{/each}

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

@@ -0,0 +1,3 @@
+declare const HoveredEntities: import("svelte").Component<Record<string, never>, {}, "">;
+type HoveredEntities = ReturnType<typeof HoveredEntities>;
+export default HoveredEntities;

package/dist/components/HoveredEntityTooltip.svelte

@@ -0,0 +1,241 @@
+<script
+	module
+	lang="ts"
+>
+	import { Vector3 } from 'three'
+
+	interface ClosestArrow {
+		index: number
+		x: number
+		y: number
+		z: number
+		oX: number
+		oY: number
+		oZ: number
+	}
+
+	interface ClosestPoint {
+		index: number
+		x: number
+		y: number
+		z: number
+	}
+
+	const getClosestArrow = (positions: Float32Array, point: Vector3): ClosestArrow => {
+		let smallestDistance = Infinity
+		let index = -1
+
+		for (let i = 0; i < positions.length; i += 6) {
+			const x = positions[i] / 1000
+			const y = positions[i + 1] / 1000
+			const z = positions[i + 2] / 1000
+
+			const distance = point.distanceToSquared(new Vector3(x, y, z))
+
+			if (distance < smallestDistance) {
+				smallestDistance = distance
+				index = i
+			}
+		}
+
+		return {
+			index: Math.floor(index / 6),
+			x: positions[index] / 1000,
+			y: positions[index + 1] / 1000,
+			z: positions[index + 2] / 1000,
+			oX: positions[index + 3],
+			oY: positions[index + 4],
+			oZ: positions[index + 5],
+		}
+	}
+
+	const getClosestPoint = (positions: Float32Array, point: Vector3): ClosestPoint => {
+		let smallestDistance = Infinity
+		let index = -1
+
+		for (let i = 0; i < positions.length; i += 3) {
+			const x = positions[i]
+			const y = positions[i + 1]
+			const z = positions[i + 2]
+
+			const distance = point.distanceToSquared(new Vector3(x, y, z))
+
+			if (distance < smallestDistance) {
+				smallestDistance = distance
+				index = i
+			}
+		}
+
+		return {
+			index: Math.floor(index / 3),
+			x: positions[index],
+			y: positions[index + 1],
+			z: positions[index + 2],
+		}
+	}
+
+	const getPointAtIndex = (positions: Float32Array, index: number): ClosestPoint => ({
+		index,
+		x: positions[index * 3],
+		y: positions[index * 3 + 1],
+		z: positions[index * 3 + 2],
+	})
+</script>
+
+<script lang="ts">
+	import { traits } from '../ecs'
+	import { HTML } from '@threlte/extras'
+	import type { Entity } from 'koota'
+	import { useWorld } from '../ecs'
+	import { onDestroy } from 'svelte'
+
+	interface Props {
+		hoveredEntity: Entity
+	}
+
+	let { hoveredEntity }: Props = $props()
+
+	const world = useWorld()
+
+	let tooltipData: {
+		subEntityPosition: Vector3 | undefined
+		closestArrow?: ClosestArrow
+		closestPoint?: ClosestPoint
+	} | null = $state.raw(null)
+
+	const getTooltipData = (entity: Entity) => {
+		if (entity !== hoveredEntity) {
+			return null
+		}
+
+		const hover = entity.get(traits.Hover)
+		if (!hover) return null
+
+		const hoverPosition = new Vector3(hover.x, hover.y, hover.z)
+		const index = hover.index >= 0 ? hover.index : undefined
+
+		let closestArrow: ClosestArrow | undefined
+		let closestPoint: ClosestPoint | undefined
+		let subEntityPosition: Vector3 | undefined
+
+		if (entity.has(traits.Arrows)) {
+			// TODO: maybe we could store the arrows in a buffered geometry to avoid the slow getClosestArrow
+			closestArrow = getClosestArrow(entity.get(traits.Positions) as Float32Array, hoverPosition)
+			subEntityPosition = new Vector3(closestArrow.x, closestArrow.y, closestArrow.z)
+		} else if (entity.has(traits.Points)) {
+			const positions = entity.get(traits.BufferGeometry)?.attributes.position.array as Float32Array
+
+			// we can skip the slow getClosestPoint if the points provided an index already
+			if (index !== undefined) {
+				closestPoint = getPointAtIndex(positions, index)
+			} else {
+				closestPoint = getClosestPoint(positions, hoverPosition)
+			}
+			subEntityPosition = new Vector3(closestPoint.x, closestPoint.y, closestPoint.z)
+		}
+		return { subEntityPosition, closestArrow, closestPoint }
+	}
+
+	const unsubChange = world.onChange(traits.Hover, (entity) => {
+		if (entity === hoveredEntity) {
+			tooltipData = getTooltipData(entity)
+		}
+	})
+
+	const unsubRemove = world.onRemove(traits.Hover, (entity) => {
+		if (entity === hoveredEntity) {
+			tooltipData = null
+		}
+	})
+
+	onDestroy(() => {
+		unsubChange()
+		unsubRemove()
+	})
+</script>
+
+{#if tooltipData?.subEntityPosition}
+	<HTML
+		position={tooltipData.subEntityPosition.toArray()}
+		class="pointer-events-none"
+	>
+		<div
+			class="border-medium pointer-events-none relative -mb-2 -translate-x-1/2 -translate-y-full border bg-white px-3 py-2.5 text-xs shadow-md"
+		>
+			<!-- Arrow -->
+			<div
+				class="border-medium absolute -bottom-[5px] left-1/2 size-2.5 -translate-x-1/2 rotate-45 border-r border-b bg-white"
+			></div>
+
+			<div class="flex flex-col gap-2.5">
+				{#if tooltipData.closestArrow}
+					<div>
+						<div class="mb-1"><strong class="font-semibold">index</strong></div>
+						<div>{tooltipData.closestArrow.index}</div>
+					</div>
+
+					<div>
+						<div class="mb-1">
+							<strong class="font-semibold">world position</strong>
+							<span class="text-subtle-2"> (m)</span>
+						</div>
+						<div class="flex gap-3">
+							<div>
+								<span class="text-subtle-2 mr-1">x </span>{tooltipData.closestArrow.x.toFixed(2)}
+							</div>
+							<div>
+								<span class="text-subtle-2 mr-1">y </span>{tooltipData.closestArrow.y.toFixed(2)}
+							</div>
+							<div>
+								<span class="text-subtle-2 mr-1">z </span>{tooltipData.closestArrow.z.toFixed(2)}
+							</div>
+						</div>
+					</div>
+
+					<div>
+						<div class="mb-1">
+							<strong class="font-semibold">world orientation</strong>
+							<span class="text-subtle-2"> (deg)</span>
+						</div>
+						<div class="flex gap-3">
+							<div>
+								<span class="text-subtle-2 mr-1">x </span>{tooltipData.closestArrow.oX.toFixed(2)}
+							</div>
+							<div>
+								<span class="text-subtle-2 mr-1">y </span>{tooltipData.closestArrow.oY.toFixed(2)}
+							</div>
+							<div>
+								<span class="text-subtle-2 mr-1">z </span>{tooltipData.closestArrow.oZ.toFixed(2)}
+							</div>
+						</div>
+					</div>
+				{/if}
+
+				{#if tooltipData.closestPoint}
+					<div>
+						<div class="mb-1"><strong class="font-semibold">index</strong></div>
+						<div>{tooltipData.closestPoint.index}</div>
+					</div>
+
+					<div>
+						<div class="mb-1">
+							<strong class="font-semibold">world position</strong>
+							<span class="text-subtle-2"> (m)</span>
+						</div>
+						<div class="flex gap-3">
+							<div>
+								<span class="text-subtle-2">x </span>{tooltipData.closestPoint.x.toFixed(2)}
+							</div>
+							<div>
+								<span class="text-subtle-2">y </span>{tooltipData.closestPoint.y.toFixed(2)}
+							</div>
+							<div>
+								<span class="text-subtle-2">z </span>{tooltipData.closestPoint.z.toFixed(2)}
+							</div>
+						</div>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</HTML>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { Entity } from 'koota';
+interface Props {
+    hoveredEntity: Entity;
+}
+declare const HoveredEntityTooltip: import("svelte").Component<Props, {}, "">;
+type HoveredEntityTooltip = ReturnType<typeof HoveredEntityTooltip>;
+export default HoveredEntityTooltip;

package/dist/components/MeasureTool/MeasurePoint.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { T, type Props as ThrelteProps } from '@threlte/core'
+	import type { Vector3Tuple, Group } from 'three'
+	import { HTML } from '@threlte/extras'
+
+	interface Props extends ThrelteProps<typeof Group> {
+		position: Vector3Tuple
+	}
+
+	let { position, ref = $bindable(), ...rest }: Props = $props()
+</script>
+
+<T.Group
+	bind:ref
+	{...rest}
+	{position}
+>
+	<HTML
+		center
+		class="h-2.5 w-2.5 rounded-full bg-black/70"
+	/>
+
+	<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/MeasureTool/MeasurePoint.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Props as ThrelteProps } from '@threlte/core';
+import type { Vector3Tuple, Group } from 'three';
+interface Props extends ThrelteProps<typeof Group> {
+    position: Vector3Tuple;
+}
+declare const MeasurePoint: import("svelte").Component<Props, {}, "ref">;
+type MeasurePoint = ReturnType<typeof MeasurePoint>;
+export default MeasurePoint;

package/dist/components/MeasureTool/MeasureTool.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+	import { untrack } from 'svelte'
+	import { Vector3, type Intersection } from 'three'
+	import { T } from '@threlte/core'
+	import { HTML, MeshLineGeometry, MeshLineMaterial, Portal } from '@threlte/extras'
+	import { useSettings } from '../../hooks/useSettings.svelte'
+	import Button from '../dashboard/Button.svelte'
+	import MeasurePoint from './MeasurePoint.svelte'
+	import { useMouseRaycaster } from '../../hooks/useMouseRaycaster.svelte'
+	import { useFocusedEntity } from '../../hooks/useSelection.svelte'
+	import ToggleGroup from '../Overlay/ToggleGroup.svelte'
+	import Popover from '../Overlay/Popover.svelte'
+
+	const focusedEntity = useFocusedEntity()
+	const settings = useSettings()
+
+	const htmlPosition = new Vector3()
+
+	let step: 'idle' | 'p1' | 'p2' = 'idle'
+
+	let intersection = $state<Intersection>()
+	let p1 = $state.raw<Vector3>()
+	let p2 = $state.raw<Vector3>()
+
+	const enabled = $derived(settings.current.enableMeasure)
+
+	const { onclick, onmove, raycaster } = useMouseRaycaster(() => ({
+		enabled,
+	}))
+	raycaster.firstHitOnly = true
+	raycaster.params.Points.threshold = 0.005
+
+	onmove((event) => {
+		intersection = event.intersections[0]
+
+		// Only handle axis restrictions if a first point has been placed
+		if (!p1) {
+			return
+		}
+
+		if (settings.current.enableMeasureAxisX === false) {
+			intersection.point.x = p1.x
+		}
+
+		if (settings.current.enableMeasureAxisY === false) {
+			intersection.point.y = p1.y
+		}
+
+		if (settings.current.enableMeasureAxisZ === false) {
+			intersection.point.z = p1.z
+		}
+	})
+
+	onclick(() => {
+		if (step === 'idle' && intersection) {
+			p1 = intersection.point.clone()
+			step = 'p1'
+		} else if (step === 'p1' && intersection) {
+			p2 = intersection.point.clone()
+			step = 'p2'
+		} else if (step === 'p2') {
+			p1 = undefined
+			p2 = undefined
+			step = 'idle'
+		}
+	})
+
+	const clear = () => {
+		p1 = undefined
+		p2 = undefined
+		step = 'idle'
+	}
+
+	$effect(() => {
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		;(focusedEntity.current, enabled)
+		untrack(() => clear())
+	})
+</script>
+
+<Portal id="dashboard">
+	<fieldset class="relative">
+		<div class="flex">
+			<Button
+				active={enabled}
+				icon="ruler"
+				description="{enabled ? 'Disable' : 'Enable'} measurement"
+				onclick={() => {
+					settings.current.enableMeasure = !settings.current.enableMeasure
+				}}
+			/>
+			<Popover>
+				{#snippet trigger(triggerProps)}
+					<Button
+						{...triggerProps}
+						active={enabled}
+						class="border-l-0"
+						icon="filter-sliders"
+						description="Measurement settings"
+					/>
+				{/snippet}
+
+				<div class="border-medium m-2 border bg-white p-2 text-xs">
+					<div class="flex items-center gap-2">
+						Enabled axes
+						<ToggleGroup
+							multiple
+							buttons={[
+								{ value: 'x', on: settings.current.enableMeasureAxisX },
+								{ value: 'y', on: settings.current.enableMeasureAxisY },
+								{ value: 'z', on: settings.current.enableMeasureAxisZ },
+							]}
+							onclick={(details) => {
+								settings.current.enableMeasureAxisX = details.includes('x')
+								settings.current.enableMeasureAxisY = details.includes('y')
+								settings.current.enableMeasureAxisZ = details.includes('z')
+							}}
+						/>
+					</div>
+				</div>
+			</Popover>
+		</div>
+	</fieldset>
+</Portal>
+
+{#if enabled}
+	{#if intersection && step !== 'p2'}
+		<MeasurePoint
+			position={intersection?.point.toArray()}
+			opacity={0.5}
+		/>
+	{/if}
+
+	{#if p1}
+		<MeasurePoint
+			position={p1.toArray()}
+			opacity={0.5}
+		/>
+	{/if}
+
+	{#if p2}
+		<MeasurePoint
+			position={p2.toArray()}
+			opacity={0.5}
+		/>
+	{/if}
+
+	{#if p1 && (p2 || intersection)}
+		<T.Mesh
+			raycast={() => null}
+			bvh={{ enabled: false }}
+			renderOrder={1}
+		>
+			<MeshLineGeometry points={[p1, p2 ?? intersection?.point ?? new Vector3()]} />
+			<MeshLineMaterial
+				width={2.5}
+				depthTest={false}
+				color="black"
+				opacity={p2 ? 0.5 : 0.2}
+				attenuate={false}
+				transparent
+			/>
+		</T.Mesh>
+
+		{#if p2}
+			<HTML
+				center
+				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)}<span class="text-subtle-2">m</span>
+				</div>
+			</HTML>
+		{/if}
+	{/if}
+{/if}

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

@@ -0,0 +1,3 @@
+declare const MeasureTool: import("svelte").Component<Record<string, never>, {}, "">;
+type MeasureTool = ReturnType<typeof MeasureTool>;
+export default MeasureTool;

package/dist/components/Overlay/Popover.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import * as popover from '@zag-js/popover'
+	import { portal, useMachine, normalizeProps } from '@zag-js/svelte'
+	import type { Snippet } from 'svelte'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
+
+	interface Props {
+		trigger: Snippet<[HTMLButtonAttributes]>
+		children: Snippet
+	}
+
+	let { children, trigger }: Props = $props()
+
+	const id = $props.id()
+	const service = useMachine(popover.machine, { id })
+	const api = $derived(popover.connect(service, normalizeProps))
+</script>
+
+{@render trigger(api.getTriggerProps())}
+
+<div
+	use:portal={{ disabled: !api.portalled }}
+	{...api.getPositionerProps()}
+>
+	<div {...api.getContentProps()}>
+		{@render children()}
+	</div>
+</div>

package/dist/components/Overlay/Popover.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props {
+    trigger: Snippet<[HTMLButtonAttributes]>;
+    children: Snippet;
+}
+declare const Popover: import("svelte").Component<Props, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;