@viamrobotics/motion-tools 1.7.0 → 1.9.0

package/dist/components/App.svelte

@@ -27,6 +27,7 @@
 		type DrawConnectionConfig,
 	} from '../hooks/useDrawConnectionConfig.svelte'
 	import Camera from './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/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;

package/dist/components/Overlay/ToggleGroup.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { normalizeProps, useMachine } from '@zag-js/svelte'
+	import * as toggle from '@zag-js/toggle-group'
+
+	interface Props {
+		multiple: boolean
+		buttons: {
+			on?: boolean
+			disabled?: boolean
+			label?: string
+			value: string
+		}[]
+		onclick: (details: string[]) => void
+	}
+
+	let { multiple, buttons, onclick }: Props = $props()
+
+	const id = $props.id()
+	const service = useMachine(toggle.machine, () => ({
+		id,
+		value: buttons.filter((button) => button.on).map((button) => button.value),
+		multiple,
+		onValueChange(details) {
+			onclick(details.value)
+		},
+	}))
+	const api = $derived(toggle.connect(service, normalizeProps))
+</script>
+
+<div
+	class="flex items-center"
+	{...api.getRootProps()}
+>
+	{#each buttons as button (button.value)}
+		<button
+			class="-ml-px flex h-5 w-5 items-center justify-center border text-xs"
+			{...api.getItemProps({ value: button.value })}
+		>
+			{button.label ?? button.value}
+		</button>
+	{/each}
+</div>
+
+<style>
+	button[data-state='on'] {
+		background: green;
+		border-color: black;
+		color: white;
+	}
+
+	button[data-disabled] {
+		opacity: 0.5;
+
+		filter: grayscale(100%);
+	}
+
+	button[data-focus] {
+		outline: none;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+interface Props {
+    multiple: boolean;
+    buttons: {
+        on?: boolean;
+        disabled?: boolean;
+        label?: string;
+        value: string;
+    }[];
+    onclick: (details: string[]) => void;
+}
+declare const ToggleGroup: import("svelte").Component<Props, {}, "">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

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/Tree/Settings.svelte

@@ -193,6 +193,11 @@
 			<label class="flex items-center justify-between gap-2">
 				Render stats <Switch bind:on={settings.current.renderStats} />
 			</label>
+			<label class="flex items-center justify-between gap-2">
+				Render sub-entity hover detail <Switch
+					bind:on={settings.current.renderSubEntityHoverDetail}
+				/>
+			</label>
 			<label class="flex items-center justify-between gap-2">
 				Render Arm Models
 				<Select

package/dist/components/dashboard/Button.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { Icon, type IconName, Tooltip } from '@viamrobotics/prime-core'
 	import { Ruler } from 'lucide-svelte'
-	import type { ClassValue, MouseEventHandler } from 'svelte/elements'
+	import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
 
-	interface Props {
+	interface Props extends HTMLButtonAttributes {
 		icon: IconName | 'ruler'
 		active?: boolean
 		description: string
 		hotkey?: string
 		class?: ClassValue | null | undefined
+		tooltipLocation?: 'bottom' | 'right'
 		onclick?: MouseEventHandler<HTMLButtonElement> | null | undefined
 	}
 
@@ -18,13 +19,15 @@
 		description,
 		hotkey = '',
 		class: className = '',
+		tooltipLocation,
 		onclick,
+		...rest
 	}: Props = $props()
 </script>
 
 <Tooltip
 	let:tooltipID
-	location="bottom"
+	location={tooltipLocation ?? 'bottom'}
 >
 	<label
 		class={[
@@ -40,6 +43,7 @@
 			aria-label={description}
 			aria-checked={active}
 			{onclick}
+			{...rest}
 		>
 			{#if icon === 'ruler'}
 				<Ruler size="16" />

package/dist/components/dashboard/Button.svelte.d.ts

@@ -1,11 +1,12 @@
 import { type IconName } from '@viamrobotics/prime-core';
-import type { ClassValue, MouseEventHandler } from 'svelte/elements';
-interface Props {
+import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
     icon: IconName | 'ruler';
     active?: boolean;
     description: string;
     hotkey?: string;
     class?: ClassValue | null | undefined;
+    tooltipLocation?: 'bottom' | 'right';
     onclick?: MouseEventHandler<HTMLButtonElement> | null | undefined;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;

package/dist/ecs/traits.d.ts

@@ -30,11 +30,17 @@ export declare const Center: import("koota").Trait<{
     oZ: number;
     theta: number;
 }>;
+export declare const Hover: import("koota").Trait<{
+    index: number;
+    x: number;
+    y: number;
+    z: number;
+}>;
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances
  */
-export declare const Instanced: import("koota").TagTrait;
+export declare const Instanced: import("koota").Trait<() => boolean>;
 export declare const Instance: import("koota").Trait<{
     meshID: number;
     instanceID: number;
@@ -49,7 +55,7 @@ export declare const Color: import("koota").Trait<{
     g: number;
     b: number;
 }>;
-export declare const Arrow: import("koota").TagTrait;
+export declare const Arrow: import("koota").Trait<() => boolean>;
 export declare const Positions: import("koota").Trait<() => Float32Array<ArrayBuffer>>;
 export declare const Colors: import("koota").Trait<() => Uint8Array<ArrayBuffer>>;
 export declare const Instances: import("koota").Trait<{
@@ -61,7 +67,7 @@ export declare const Arrows: import("koota").Trait<{
 /**
  * Render entity as points
  */
-export declare const Points: import("koota").TagTrait;
+export declare const Points: import("koota").Trait<() => boolean>;
 /**
  * A box, in mm
  */
@@ -108,15 +114,15 @@ export declare const Scale: import("koota").Trait<{
     y: number;
     z: number;
 }>;
-export declare const FramesAPI: import("koota").TagTrait;
-export declare const GeometriesAPI: import("koota").TagTrait;
-export declare const DrawAPI: import("koota").TagTrait;
-export declare const WorldStateStoreAPI: import("koota").TagTrait;
-export declare const SnapshotAPI: import("koota").TagTrait;
+export declare const FramesAPI: import("koota").Trait<() => boolean>;
+export declare const GeometriesAPI: import("koota").Trait<() => boolean>;
+export declare const DrawAPI: import("koota").Trait<() => boolean>;
+export declare const WorldStateStoreAPI: import("koota").Trait<() => boolean>;
+export declare const SnapshotAPI: import("koota").Trait<() => boolean>;
 /**
  * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
  */
-export declare const DroppedFile: import("koota").TagTrait;
+export declare const DroppedFile: import("koota").Trait<() => boolean>;
 /**
  * Point size, in mm
  */
@@ -125,12 +131,12 @@ export declare const PointSize: import("koota").Trait<() => number>;
  * Line width, in mm
  */
 export declare const LineWidth: import("koota").Trait<() => number>;
-export declare const ReferenceFrame: import("koota").TagTrait;
+export declare const ReferenceFrame: import("koota").Trait<() => boolean>;
 /**
  * This entity can be safetly removed from the scene by the user
  */
-export declare const Removable: import("koota").TagTrait;
-export declare const Geometry: (geometry: ViamGeometry) => import("koota").TagTrait | [import("koota").Trait<{
+export declare const Removable: import("koota").Trait<() => boolean>;
+export declare const Geometry: (geometry: ViamGeometry) => import("koota").Trait<() => boolean> | [import("koota").Trait<{
     x: number;
     y: number;
     z: number;

package/dist/ecs/traits.js

@@ -8,11 +8,17 @@ export const Parent = trait(() => 'world');
 export const Pose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const EditedPose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const Center = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
+export const Hover = trait({
+    index: -1, // Sub-entity index, -1 if not applicable
+    x: 0, // World position X in meters
+    y: 0, // World position Y in meters
+    z: 0, // World position Z in meters
+});
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances
  */
-export const Instanced = trait();
+export const Instanced = trait(() => true);
 export const Instance = trait({
     meshID: -1,
     instanceID: -1,
@@ -23,7 +29,7 @@ export const Opacity = trait(() => 1);
  * @default { r: 1, g: 0, b: 0 }
  */
 export const Color = trait({ r: 0, g: 0, b: 0 });
-export const Arrow = trait();
+export const Arrow = trait(() => true);
 export const Positions = trait(() => new Float32Array());
 export const Colors = trait(() => new Uint8Array());
 export const Instances = trait({
@@ -35,7 +41,7 @@ export const Arrows = trait({
 /**
  * Render entity as points
  */
-export const Points = trait();
+export const Points = trait(() => true);
 /**
  * A box, in mm
  */
@@ -59,15 +65,15 @@ export const GLTF = trait(() => ({
     animationName: '',
 }));
 export const Scale = trait({ x: 1, y: 1, z: 1 });
-export const FramesAPI = trait();
-export const GeometriesAPI = trait();
-export const DrawAPI = trait();
-export const WorldStateStoreAPI = trait();
-export const SnapshotAPI = trait();
+export const FramesAPI = trait(() => true);
+export const GeometriesAPI = trait(() => true);
+export const DrawAPI = trait(() => true);
+export const WorldStateStoreAPI = trait(() => true);
+export const SnapshotAPI = trait(() => true);
 /**
  * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
  */
-export const DroppedFile = trait();
+export const DroppedFile = trait(() => true);
 // === Shape Properties ===
 /**
  * Point size, in mm
@@ -77,11 +83,11 @@ export const PointSize = trait(() => 10);
  * Line width, in mm
  */
 export const LineWidth = trait(() => 5);
-export const ReferenceFrame = trait();
+export const ReferenceFrame = trait(() => true);
 /**
  * This entity can be safetly removed from the scene by the user
  */
-export const Removable = trait();
+export const Removable = trait(() => true);
 export const Geometry = (geometry) => {
     if (geometry.geometryType.case === 'box') {
         return Box(createBox(geometry.geometryType.value));

package/dist/ecs/useQuery.svelte.js

@@ -1,29 +1,29 @@
 import { untrack } from 'svelte';
-import { $internal as internal, cacheQuery } from 'koota';
+import { $internal as internal, createQuery } from 'koota';
 import { useWorld } from './useWorld';
 export function useQuery(...parameters) {
     const world = useWorld();
-    const hash = cacheQuery(...parameters);
+    const createdQuery = createQuery(...parameters);
     // Using internals to get the query data.
-    const query = world[internal].queriesHashMap.get(hash);
+    const query = world[internal].queriesHashMap.get(createdQuery.hash);
     const initialQueryVersion = query?.version;
     let version = $state.raw(0);
-    let entities = $state.raw(world.query(hash));
+    let entities = $state.raw(world.query(createdQuery));
     $effect(() => {
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         version;
         // Compare the initial version to the current version to
         // see it the query has changed.
-        const query = world[internal].queriesHashMap.get(hash);
+        const query = world[internal].queriesHashMap.get(createdQuery.hash);
         if (query?.version !== initialQueryVersion) {
-            entities = world.query(hash);
+            entities = world.query(createdQuery);
         }
         return untrack(() => {
-            const unsubAdd = world.onQueryAdd(hash, () => {
-                entities = world.query(hash);
+            const unsubAdd = world.onQueryAdd(createdQuery, () => {
+                entities = world.query(createdQuery);
             });
-            const unsubRemove = world.onQueryRemove(hash, () => {
-                entities = world.query(hash);
+            const unsubRemove = world.onQueryRemove(createdQuery, () => {
+                entities = world.query(createdQuery);
             });
             return () => {
                 unsubAdd();

package/dist/hooks/useObjectEvents.svelte.d.ts

@@ -3,6 +3,7 @@ import type { Entity } from 'koota';
 export declare const useObjectEvents: (entity: () => Entity | undefined) => {
     readonly visible: boolean;
     onpointerenter: (event: IntersectionEvent<MouseEvent>) => void;
+    onpointermove: (event: IntersectionEvent<MouseEvent>) => void;
     onpointerleave: (event: IntersectionEvent<MouseEvent>) => void;
     ondblclick: (event: IntersectionEvent<MouseEvent>) => void;
     onpointerdown: (event: IntersectionEvent<MouseEvent>) => void;

package/dist/hooks/useObjectEvents.svelte.js

@@ -2,6 +2,7 @@ import { useCursor } from '@threlte/extras';
 import { useFocusedEntity, useSelectedEntity } from './useSelection.svelte';
 import { useVisibility } from './useVisibility.svelte';
 import { Vector2 } from 'three';
+import { traits } from '../ecs';
 export const useObjectEvents = (entity) => {
     const down = new Vector2();
     const selectedEntity = useSelectedEntity();
@@ -13,10 +14,32 @@ export const useObjectEvents = (entity) => {
     const onpointerenter = (event) => {
         event.stopPropagation();
         cursor.onPointerEnter();
+        if (currentEntity && !currentEntity.has(traits.Hover)) {
+            currentEntity.add(traits.Hover({
+                index: -1,
+                x: event.point.x,
+                y: event.point.y,
+                z: event.point.z,
+            }));
+        }
+    };
+    const onpointermove = (event) => {
+        event.stopPropagation();
+        if (currentEntity && currentEntity.has(traits.Hover)) {
+            currentEntity.set(traits.Hover, {
+                index: event.index ?? -1,
+                x: event.point.x,
+                y: event.point.y,
+                z: event.point.z,
+            });
+        }
     };
     const onpointerleave = (event) => {
         event.stopPropagation();
         cursor.onPointerLeave();
+        if (currentEntity?.has(traits.Hover)) {
+            currentEntity.remove(traits.Hover);
+        }
     };
     const ondblclick = (event) => {
         event.stopPropagation();
@@ -41,6 +64,7 @@ export const useObjectEvents = (entity) => {
             return visible;
         },
         onpointerenter,
+        onpointermove,
         onpointerleave,
         ondblclick,
         onpointerdown,

package/dist/hooks/useSettings.svelte.d.ts

@@ -13,6 +13,9 @@ export interface Settings {
     lineWidth: number;
     lineDotSize: number;
     enableMeasure: boolean;
+    enableMeasureAxisX: boolean;
+    enableMeasureAxisY: boolean;
+    enableMeasureAxisZ: boolean;
     enableLabels: boolean;
     enableKeybindings: boolean;
     enableQueryDevtools: boolean;
@@ -21,6 +24,7 @@ export interface Settings {
     openCameraWidgets: Record<string, string[]>;
     renderStats: boolean;
     renderArmModels: 'colliders' | 'colliders+model' | 'model';
+    renderSubEntityHoverDetail: boolean;
 }
 interface Context {
     current: Settings;

package/dist/hooks/useSettings.svelte.js

@@ -16,6 +16,9 @@ const defaults = () => ({
     lineWidth: 0.005,
     lineDotSize: 0.01,
     enableMeasure: false,
+    enableMeasureAxisX: true,
+    enableMeasureAxisY: true,
+    enableMeasureAxisZ: true,
     enableLabels: false,
     enableKeybindings: true,
     enableQueryDevtools: false,
@@ -24,6 +27,7 @@ const defaults = () => ({
     openCameraWidgets: {},
     renderStats: false,
     renderArmModels: 'colliders+model',
+    renderSubEntityHoverDetail: false,
 });
 export const provideSettings = () => {
     let settings = $state(defaults());

package/dist/three/InstancedArrows/raycast.js

@@ -2,7 +2,6 @@ import { Object3D, BufferGeometry, Ray, Matrix4, Raycaster, Vector3, Box3, RawSh
 const vec3 = new Vector3();
 const inverseMatrix = new Matrix4();
 const localRay = new Ray();
-const ray = new Ray();
 const box = new Box3();
 const segmentStart = new Vector3();
 const segmentEnd = new Vector3();
@@ -46,17 +45,14 @@ export function meshBoundsRaycast(raycaster, intersects) {
         this.geometry.computeBoundingBox();
     }
     box.copy(this.geometry.boundingBox ?? box);
-    box.applyMatrix4(this.matrixWorld);
     if (!raycaster.ray.intersectsBox(box)) {
         return;
     }
-    inverseMatrix.copy(this.matrixWorld).invert();
-    ray.copy(raycaster.ray).applyMatrix4(inverseMatrix);
+    raycaster.ray.intersectBox(box, vec3);
     const distance = vec3.distanceTo(raycaster.ray.origin);
-    const point = vec3.clone();
     intersects.push({
         distance,
-        point,
+        point: vec3.clone(),
         object: this,
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -41,7 +41,9 @@
     "@vitest/coverage-v8": "^3.2.4",
     "@zag-js/collapsible": "1.22.1",
     "@zag-js/floating-panel": "1.22.1",
+    "@zag-js/popover": "1.22.1",
     "@zag-js/svelte": "1.22.1",
+    "@zag-js/toggle-group": "1.22.1",
     "@zag-js/tree-view": "1.22.1",
     "camera-controls": "3.1.0",
     "eslint": "9.34.0",
@@ -87,7 +89,9 @@
     "@zag-js/collapsible": ">=1",
     "@zag-js/dialog": ">=1.31",
     "@zag-js/floating-panel": ">=1",
+    "@zag-js/popover": ">=1",
     "@zag-js/svelte": ">=1",
+    "@zag-js/toggle-group": ">=1",
     "@zag-js/tree-view": ">=1",
     "camera-controls": ">=3",
     "idb-keyval": ">=6",
@@ -128,7 +132,7 @@
     "@bufbuild/protobuf": "1.10.1",
     "@neodrag/svelte": "^2.3.3",
     "@tanstack/svelte-query-devtools": "^6.0.2",
-    "koota": "^0.5.3",
+    "koota": "0.6.5",
     "lodash-es": "4.17.23",
     "uuid-tool": "^2.0.3"
   },