app-16292: small component tweaks to support per-entity pose mutators

.changeset/component-tweaks-for-gizmo-mode.md

@@ -0,0 +1,5 @@
+---
+'@viamrobotics/motion-tools': patch
+---
+
+Default `Line` and `Mesh` opacity to `1`, fix `LineDots` instance ID tracking, enable BVH raycasting in `'gizmo'` interaction mode, fix stale matrix reads in `SelectedTransformControls`, and add `isOpen` / `close` to `Popover` snippets plus a `shapes` icon and `disableTooltip` prop on dashboard `Button`

src/lib/components/Entities/LineDots.svelte

@@ -41,9 +41,15 @@
 
 	$effect(() => {
 		if (!positions) return
+		// Track the IDs `addInstance` returns rather than assuming they're a
+		// sequential 0..N-1 range — when positions changes (e.g. a line gizmo
+		// being placed), cleanup-by-index would target slots that were never
+		// allocated for this effect run and throw "Invalid instanceId".
+		const instances: number[] = []
 		for (let i = 0, l = positions.length; i < l; i += 3) {
 			const dotIndex = i / 3
 			const instance = mesh.addInstance(geometryID)
+			instances.push(instance)
 			matrix.makeTranslation(positions[i + 0], positions[i + 1], positions[i + 2])
 			matrix.scale(vec3.setScalar(scale))
 			mesh.setMatrixAt(instance, matrix)
@@ -55,9 +61,8 @@
 		}
 
 		return () => {
-			if (!positions) return
-			for (let i = 0, l = positions.length / 3; i < l; i += 1) {
-				mesh.deleteInstance(i)
+			for (const instance of instances) {
+				mesh.deleteInstance(instance)
 			}
 		}
 	})

src/lib/components/Scene.svelte

@@ -49,7 +49,8 @@
 	const bvhEnabled = $derived(
 		settings.current.renderSubEntityHoverDetail ||
 			settings.current.interactionMode === 'measure' ||
-			settings.current.interactionMode === 'select'
+			settings.current.interactionMode === 'select' ||
+			settings.current.interactionMode === 'gizmo'
 	)
 
 	bvh(raycaster, () => ({ helper: false, enabled: bvhEnabled }))

src/lib/components/SelectedTransformControls.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { useThrelte } from '@threlte/core'
 	import { TransformControls } from '@threlte/extras'
-	import { Matrix4, Quaternion, Vector3 } from 'three'
+	import { Matrix4 } from 'three'
 
 	import type { FrameEditSession } from '$lib/editing/FrameEditSession'
 
@@ -11,14 +11,7 @@
 	import { useFrameEditSession } from '$lib/hooks/useFrameEditSession.svelte'
 	import { usePartConfig } from '$lib/hooks/usePartConfig.svelte'
 	import { useSettings } from '$lib/hooks/useSettings.svelte'
-	import {
-		createPose,
-		matrixToPose,
-		poseToMatrix,
-		quaternionToPose,
-		solveEditedMatrix,
-		vector3ToPose,
-	} from '$lib/transform'
+	import { createPose, matrixToPose, poseToMatrix, solveEditedMatrix } from '$lib/transform'
 
 	const { scene } = useThrelte()
 	const settings = useSettings()
@@ -64,9 +57,10 @@
 	})
 	const isSphereScale = $derived(activeMode === 'scale' && sphere.current !== undefined)
 	const isCapsuleScale = $derived(activeMode === 'scale' && capsule.current !== undefined)
+	const transforming = $derived(
+		ref && entity && activeMode && !isFragmentComponentWithVariables && !invisible.current
+	)
 
-	const quaternion = new Quaternion()
-	const vector3 = new Vector3()
 	const refPose = createPose()
 	const tempRefMatrix = new Matrix4()
 	const tempEditedMatrix = new Matrix4()
@@ -119,28 +113,14 @@
 	}
 
 	const onChange = () => {
-		if (!ref || !entity || !activeMode) {
-			return
-		}
+		if (!ref || !entity || !activeMode) return
 
 		const isFrameEntity = entity.has(traits.FramesAPI)
-
 		if (activeMode === 'translate' || activeMode === 'rotate') {
 			if (isFrameEntity) {
 				stageFrameTransform()
 			} else {
-				const matrix = entity.get(traits.Matrix)
-				if (matrix) {
-					matrixToPose(matrix, tempPose)
-					if (activeMode === 'translate') {
-						vector3ToPose(ref.getWorldPosition(vector3), tempPose)
-					} else {
-						quaternionToPose(ref.getWorldQuaternion(quaternion), tempPose)
-						ref.quaternion.copy(quaternion)
-					}
-					poseToMatrix(tempPose, matrix)
-					entity.changed(traits.Matrix)
-				}
+				stageLocalTransform()
 			}
 		} else {
 			// scale → bake the gizmo's scale factor into the geometry trait,
@@ -194,40 +174,46 @@
 	}
 
 	/**
-	 * Frame.svelte renders frame entities by writing the entity's WorldMatrix
-	 * into group.matrix and decomposing it into position/quaternion. The gizmo's
-	 * Three.js parent has identity world, so `ref.position` / `ref.quaternion`
-	 * are world-space values. Matrix and EditedMatrix store local-to-parent
-	 * transforms, so we left-multiply by the parent's inverted WorldMatrix
-	 * before staging — otherwise WorldMatrix recomposition (parent × edited)
-	 * re-applies the parent's rotation/translation and the frame ends up at
-	 * parent × where-the-user-pulled-it.
+	 * Build the entity's parent-relative drag target from the gizmo's world-space
+	 * `ref` transform into `out`.
 	 *
-	 * With a kinematic offset (LiveMatrix + Matrix both present), the local
-	 * target M(local) feeds solveEditedMatrix to back out the EditedMatrix
-	 * that satisfies live × baseline⁻¹ × edited = local.
+	 * Entity renderers mount at the scene root with `matrixAutoUpdate = false`
+	 * and recompose `group.matrix` from the `WorldMatrix` trait, so
+	 * `ref.position` / `ref.quaternion` are world-space. Matrix-shaped traits
+	 * store local-to-parent, so we left-multiply by the parent's inverted
+	 * WorldMatrix. Otherwise recomposition (parentWorld × local) re-applies the
+	 * parent transform and the entity lands at parentWorld × where-it-was-dragged.
 	 */
-	const stageFrameTransform = () => {
+	const computeLocalDragTarget = (out: Matrix4) => {
 		if (!ref || !entity) return
 
-		tempRefMatrix.makeRotationFromQuaternion(ref.quaternion)
-		tempRefMatrix.setPosition(ref.position)
+		out.makeRotationFromQuaternion(ref.quaternion)
+		out.setPosition(ref.position)
 
-		const parentEntity = entity.targetFor(relations.ChildOf)
-		const parentWorld = parentEntity?.get(traits.WorldMatrix)
+		const parentWorld = entity.targetFor(relations.ChildOf)?.get(traits.WorldMatrix)
 		if (parentWorld) {
 			tempParentInverse.copy(parentWorld).invert()
-			tempRefMatrix.premultiply(tempParentInverse)
+			out.premultiply(tempParentInverse)
 		}
+	}
+
+	/**
+	 * Stages a translate/rotate drag for a frame system entity into the edit
+	 * session. With a kinematic offset (LiveMatrix + Matrix both present), the
+	 * parent-relative target feeds solveEditedMatrix to back out the EditedMatrix
+	 * satisfying live × baseline⁻¹ × edited = local. Without one, Frame.svelte's
+	 * blend short-circuits to EditedMatrix, so we stage the target pose directly.
+	 */
+	const stageFrameTransform = () => {
+		if (!ref || !entity) return
 
+		computeLocalDragTarget(tempRefMatrix)
 		matrixToPose(tempRefMatrix, refPose)
 
 		const live = liveMatrix.current
 		const config = configMatrix.current
 
 		if (!live || !config) {
-			// No live matrix available — Frame.svelte's blend short-circuits to
-			// editedMatrix, so the parent-relative target is what we stage.
 			if (activeMode === 'translate') {
 				session?.stagePose(entity, {
 					x: refPose.x,
@@ -249,9 +235,41 @@
 		matrixToPose(tempEditedMatrix, tempPose)
 		session?.stagePose(entity, { ...tempPose })
 	}
+
+	/**
+	 * Stages a translate/rotate drag for a non-frame-system entity (e.g. a gizmo)
+	 * by writing the dragged component into the Matrix trait. Gizmos carry no
+	 * LiveMatrix, so there's no live-pose blend to invert — the parent-relative
+	 * target is the new local transform.
+	 */
+	const stageLocalTransform = () => {
+		if (!ref || !entity) return
+
+		const matrix = entity.get(traits.Matrix)
+		if (!matrix) return
+
+		computeLocalDragTarget(tempRefMatrix)
+
+		// update only the dragged component
+		matrixToPose(matrix, tempPose)
+		matrixToPose(tempRefMatrix, refPose)
+		if (activeMode === 'translate') {
+			tempPose.x = refPose.x
+			tempPose.y = refPose.y
+			tempPose.z = refPose.z
+		} else {
+			tempPose.oX = refPose.oX
+			tempPose.oY = refPose.oY
+			tempPose.oZ = refPose.oZ
+			tempPose.theta = refPose.theta
+		}
+
+		poseToMatrix(tempPose, matrix)
+		entity.changed(traits.Matrix)
+	}
 </script>
 
-{#if ref && entity && activeMode && !isFragmentComponentWithVariables && !invisible.current}
+{#if transforming}
 	{#key entity}
 		<TransformControls
 			object={ref}

src/lib/components/overlay/Popover.svelte

@@ -6,24 +6,26 @@
 	import { normalizeProps, portal, useMachine } from '@zag-js/svelte'
 
 	interface Props {
-		trigger: Snippet<[HTMLButtonAttributes]>
-		children: Snippet
+		trigger: Snippet<[HTMLButtonAttributes, { isOpen: boolean }]>
+		children: Snippet<[{ close: () => void }]>
 	}
 
 	let { children, trigger }: Props = $props()
 
 	const id = $props.id()
 	const service = useMachine(popover.machine, { id })
 	const api = $derived(popover.connect(service, normalizeProps))
+
+	const close = () => api.setOpen(false)
 </script>
 
-{@render trigger(api.getTriggerProps())}
+{@render trigger(api.getTriggerProps(), { isOpen: api.open })}
 
 <div
 	use:portal={{ disabled: !api.portalled }}
 	{...api.getPositionerProps()}
 >
 	<div {...api.getContentProps()}>
-		{@render children()}
+		{@render children({ close })}
 	</div>
 </div>

src/lib/components/overlay/dashboard/Button.svelte

@@ -2,15 +2,16 @@
 	import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
 
 	import { Icon, type IconName, Tooltip } from '@viamrobotics/prime-core'
-	import { Focus, MousePointer2, Ruler } from 'lucide-svelte'
+	import { Focus, MousePointer2, Ruler, Shapes } from 'lucide-svelte'
 
 	interface Props extends HTMLButtonAttributes {
-		icon: IconName | 'ruler' | 'mouse-pointer' | 'focus'
+		icon: IconName | 'ruler' | 'mouse-pointer' | 'shapes' | 'focus'
 		active?: boolean
 		description: string
 		hotkey?: string
 		class?: ClassValue | null | undefined
 		tooltipLocation?: 'bottom' | 'right' | 'left' | 'top'
+		disableTooltip?: boolean
 		onclick?: MouseEventHandler<HTMLButtonElement> | null | undefined
 	}
 
@@ -21,6 +22,7 @@
 		hotkey = '',
 		class: className = '',
 		tooltipLocation,
+		disableTooltip = false,
 		onclick,
 		...rest
 	}: Props = $props()
@@ -29,6 +31,7 @@
 <Tooltip
 	let:tooltipID
 	location={tooltipLocation ?? 'bottom'}
+	state={disableTooltip ? 'invisible' : undefined}
 >
 	<label
 		class={[
@@ -50,6 +53,8 @@
 				<Ruler size="16" />
 			{:else if icon === 'mouse-pointer'}
 				<MousePointer2 size="16" />
+			{:else if icon === 'shapes'}
+				<Shapes size="16" />
 			{:else if icon === 'focus'}
 				<Focus size="16" />
 			{:else}

src/lib/components/overlay/dashboard/__tests__/Button.svelte.spec.ts

@@ -52,4 +52,34 @@ describe('<Button> (dashboard)', () => {
 
 		expect(screen.getByText('1')).toBeInTheDocument()
 	})
+
+	it('preserves aria and role when disableTooltip is true and active', () => {
+		render(Button, {
+			props: {
+				icon: 'cursor-move',
+				description: 'Translate',
+				active: true,
+				disableTooltip: true,
+			},
+		})
+
+		const radio = screen.getByRole('radio', { name: 'Translate' })
+		expect(radio).toBeInTheDocument()
+		expect(radio).toHaveAttribute('aria-checked', 'true')
+	})
+
+	it('preserves aria and role when disableTooltip is true and inactive', () => {
+		render(Button, {
+			props: {
+				icon: 'cursor-move',
+				description: 'Translate',
+				active: false,
+				disableTooltip: true,
+			},
+		})
+
+		const radio = screen.getByRole('radio', { name: 'Translate' })
+		expect(radio).toBeInTheDocument()
+		expect(radio).toHaveAttribute('aria-checked', 'false')
+	})
 })

src/lib/components/overlay/details/__tests__/MatrixDetails.svelte.spec.ts → src/lib/components/overlay/details/__tests__/PoseDetails.svelte.spec.ts

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/svelte'
 import { createWorld } from 'koota'
 import { Matrix4 } from 'three'
-import '@testing-library/jest-dom/vitest'
 import { describe, expect, it } from 'vitest'
+import '@testing-library/jest-dom/vitest'
 
 import { traits } from '$lib/ecs'
 import { WORLD_CONTEXT_KEY } from '$lib/ecs/useWorld'