@viamrobotics/motion-tools 1.7.0 → 1.9.1

package/dist/components/App.svelte

@@ -5,20 +5,20 @@
 	import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
 	import type { Struct } from '@viamrobotics/sdk'
 	import Scene from './Scene.svelte'
-	import TreeContainer from './Tree/TreeContainer.svelte'
-	import Details from './Details.svelte'
+	import TreeContainer from './overlay/left-pane/TreeContainer.svelte'
+	import Details from './overlay/Details.svelte'
 	import SceneProviders from './SceneProviders.svelte'
 	import XR from './xr/XR.svelte'
 	import { createPartIDContext } from '../hooks/usePartID.svelte'
-	import Dashboard from './dashboard/Dashboard.svelte'
+	import Dashboard from './overlay/dashboard/Dashboard.svelte'
 	import { domPortal } from '../portal'
 	import { provideSettings } from '../hooks/useSettings.svelte'
 	import FileDrop from './FileDrop/FileDrop.svelte'
 	import { provideWeblabs } from '../hooks/useWeblabs.svelte'
 	import { providePartConfig } from '../hooks/usePartConfig.svelte'
 	import { useViamClient } from '@viamrobotics/svelte-sdk'
-	import LiveUpdatesBanner from './LiveUpdatesBanner.svelte'
-	import ArmPositions from './widgets/ArmPositions.svelte'
+	import LiveUpdatesBanner from './overlay/LiveUpdatesBanner.svelte'
+	import ArmPositions from './overlay/widgets/ArmPositions.svelte'
 	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
 	import type { CameraPose } from '../hooks/useControls.svelte'
 	import { provideWorld } from '../ecs'
@@ -26,7 +26,8 @@
 		provideDrawConnectionConfig,
 		type DrawConnectionConfig,
 	} from '../hooks/useDrawConnectionConfig.svelte'
-	import Camera from './widgets/Camera.svelte'
+	import Camera from './overlay/widgets/Camera.svelte'
+	import HoveredEntities from './HoveredEntities.svelte'
 
 	interface LocalConfigProps {
 		getLocalPartConfig: () => Struct
@@ -128,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)} />

package/dist/components/CameraControls.svelte

@@ -3,7 +3,7 @@
 	import { CameraControls, type CameraControlsRef, Gizmo, Portal } from '@threlte/extras'
 	import { useCameraControls, useTransformControls } from '../hooks/useControls.svelte'
 	import KeyboardControls from './KeyboardControls.svelte'
-	import Button from './dashboard/Button.svelte'
+	import Button from './overlay/dashboard/Button.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 
 	const cameraControls = useCameraControls()

package/dist/components/Focus.svelte

@@ -4,7 +4,7 @@
 	import { Box3, type Object3D, Vector3 } from 'three'
 	import { TrackballControls as ThreeTrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
 	import Camera from './Camera.svelte'
-	import Button from './dashboard/Button.svelte'
+	import Button from './overlay/dashboard/Button.svelte'
 
 	interface Props {
 		object3d: Object3D

package/dist/components/Frame.svelte

@@ -62,7 +62,7 @@
 		if (!componentName || !id) {
 			return
 		}
-		return componentModels.current?.[componentName]?.[id]
+		return componentModels.current?.[componentName]?.[id].clone()
 	})
 </script>
 

package/dist/components/Geometry2.svelte

@@ -46,6 +46,7 @@
 	const linePositions = useTrait(() => entity, traits.LinePositions)
 	const lineWidth = useTrait(() => entity, traits.LineWidth)
 	const center = useTrait(() => entity, traits.Center)
+	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 
 	const geometryType = $derived.by(() => {
 		if (box.current) return 'box'
@@ -124,10 +125,12 @@
 	{...rest}
 >
 	{#if geometryType}
-		<AxesHelper
-			width={3}
-			length={0.1}
-		/>
+		{#if showAxesHelper.current}
+			<AxesHelper
+				width={3}
+				length={0.1}
+			/>
+		{/if}
 
 		<T
 			is={mesh}
@@ -196,7 +199,7 @@
 				{/if}
 			{/if}
 		</T>
-	{:else}
+	{:else if showAxesHelper.current}
 		<AxesHelper
 			name={name.current}
 			width={3}

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,242 @@
+<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"
+		zIndexRange={[3, 0]}
+	>
+		<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/Label.svelte

@@ -17,7 +17,7 @@
 {#if labels && text}
 	<HTML
 		center
-		zIndexRange={[100, 0]}
+		zIndexRange={[3, 0]}
 		class="border-gray-7 border bg-white px-2 py-1 text-xs"
 	>
 		{text}

package/dist/components/{DotSprite.svelte → MeasureTool/MeasurePoint.svelte}

@@ -1,15 +1,13 @@
 <script lang="ts">
 	import { T, type Props as ThrelteProps } from '@threlte/core'
-	import type { ColorRepresentation, Vector3Tuple, Group } from 'three'
+	import type { Vector3Tuple, Group } from 'three'
 	import { HTML } from '@threlte/extras'
 
 	interface Props extends ThrelteProps<typeof Group> {
 		position: Vector3Tuple
-		color?: ColorRepresentation
-		opacity?: number
 	}
 
-	let { position, color, opacity = 1, ref = $bindable(), ...rest }: Props = $props()
+	let { position, ref = $bindable(), ...rest }: Props = $props()
 </script>
 
 <T.Group
@@ -17,23 +15,15 @@
 	{...rest}
 	{position}
 >
-	<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
+		center
+		zIndexRange={[3, 0]}
+		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"
+		zIndexRange={[3, 0]}
 	>
 		<div class="flex justify-between">
 			<span class="text-subtle-2">x</span>

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 '../overlay/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 = $state<'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()}
+				zIndexRange={[3, 0]}
+			>
+				<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/Scene.svelte

@@ -14,7 +14,7 @@
 	import { useOrigin } from './xr/useOrigin.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import CameraControls from './CameraControls.svelte'
-	import MeasureTool from './MeasureTool.svelte'
+	import MeasureTool from './MeasureTool/MeasureTool.svelte'
 	import PointerMissBox from './PointerMissBox.svelte'
 	import BatchedArrows from './BatchedArrows.svelte'
 	import Arrows from './Arrows/ArrowGroups.svelte'

package/dist/components/{Details.svelte → overlay/Details.svelte}

@@ -2,7 +2,7 @@
 	module
 	lang="ts"
 >
-	import { OrientationVector } from '../three/OrientationVector'
+	import { OrientationVector } from '../../three/OrientationVector'
 	import { Quaternion, Vector3, MathUtils, BufferAttribute } from 'three'
 
 	const vec3 = new Vector3()
@@ -20,14 +20,14 @@
 		useFocusedEntity,
 		useFocusedObject3d,
 		useSelectedObject3d,
-	} from '../hooks/useSelection.svelte'
-	import { useFrames } from '../hooks/useFrames.svelte'
-	import { usePartConfig } from '../hooks/usePartConfig.svelte'
-	import { FrameConfigUpdater } from '../FrameConfigUpdater.svelte'
-	import { useEnvironment } from '../hooks/useEnvironment.svelte'
-	import { traits, useTrait, useWorld } from '../ecs'
-	import { useResourceByName } from '../hooks/useResourceByName.svelte'
-	import { useCameraControls } from '../hooks/useControls.svelte'
+	} from '../../hooks/useSelection.svelte'
+	import { useFrames } from '../../hooks/useFrames.svelte'
+	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
+	import { FrameConfigUpdater } from '../../FrameConfigUpdater.svelte'
+	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
+	import { traits, useTrait, useWorld } from '../../ecs'
+	import { useResourceByName } from '../../hooks/useResourceByName.svelte'
+	import { useCameraControls } from '../../hooks/useControls.svelte'
 
 	const { ...rest } = $props()
 
@@ -232,7 +232,7 @@
 
 	<div
 		id="details-panel"
-		class="border-medium bg-extralight absolute top-0 right-0 z-10 m-2 {showEditFrameOptions
+		class="border-medium bg-extralight absolute top-0 right-0 z-4 m-2 {showEditFrameOptions
 			? 'w-80'
 			: 'w-60'} border p-2 text-xs"
 		use:draggable={{