@viamrobotics/motion-tools 1.21.0 → 1.23.0

package/dist/components/SelectedTransformControls.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+	import { TransformControls } from '@threlte/extras'
+	import { Quaternion, Vector3 } from 'three'
+
+	import type { FrameEditSession } from '../editing/FrameEditSession'
+
+	import { traits, useTrait } from '../ecs'
+	import { useTransformControls } from '../hooks/useControls.svelte'
+	import { useEnvironment } from '../hooks/useEnvironment.svelte'
+	import { useFrameEditSession } from '../hooks/useFrameEditSession.svelte'
+	import { useSelectedEntity, useSelectedObject3d } from '../hooks/useSelection.svelte'
+	import { useSettings } from '../hooks/useSettings.svelte'
+	import {
+		composeEditedPoseForRenderedPose,
+		createPose,
+		quaternionToPose,
+		vector3ToPose,
+	} from '../transform'
+
+	const settings = useSettings()
+	const environment = useEnvironment()
+	const transformControls = useTransformControls()
+	const selectedEntity = useSelectedEntity()
+	const selectedObject3d = useSelectedObject3d()
+	const sessions = useFrameEditSession()
+
+	const mode = $derived(settings.current.transformMode)
+	const entity = $derived(selectedEntity.current)
+	const transformable = useTrait(() => entity, traits.Transformable)
+	const networkPose = useTrait(() => entity, traits.Pose)
+	const livePose = useTrait(() => entity, traits.LivePose)
+	const box = useTrait(() => entity, traits.Box)
+	const sphere = useTrait(() => entity, traits.Sphere)
+	const capsule = useTrait(() => entity, traits.Capsule)
+	const hasScalableGeometry = $derived(
+		box.current !== undefined || sphere.current !== undefined || capsule.current !== undefined
+	)
+
+	// Mesh sets name={entity} on its inner mesh, so useSelectedObject3d resolves
+	// to that mesh — not the parent Frame Group we actually want to drive. Walk
+	// up to the Group so translate/rotate/scale apply to the whole frame, not
+	// the geometry inside it.
+	const ref = $derived(selectedObject3d.current?.parent ?? selectedObject3d.current)
+
+	const activeMode = $derived.by(() => {
+		if (mode === 'none' || !transformable.current) return undefined
+		// Scale only does anything for primitive geometries the gizmo can size.
+		if (mode === 'scale' && !hasScalableGeometry) return undefined
+		return mode
+	})
+	const isSphereScale = $derived(activeMode === 'scale' && sphere.current !== undefined)
+	const isCapsuleScale = $derived(activeMode === 'scale' && capsule.current !== undefined)
+
+	const quaternion = new Quaternion()
+	const vector3 = new Vector3()
+	const refPose = createPose()
+
+	let session: FrameEditSession | undefined
+	let scaleStart:
+		| { type: 'box'; x: number; y: number; z: number }
+		| { type: 'sphere'; r: number }
+		| { type: 'capsule'; r: number; l: number }
+		| undefined
+
+	const captureScaleStart = () => {
+		if (!entity || activeMode !== 'scale') {
+			scaleStart = undefined
+			return
+		}
+
+		const box = entity.get(traits.Box)
+		if (box) {
+			scaleStart = { type: 'box', ...box }
+			return
+		}
+
+		const sphere = entity.get(traits.Sphere)
+		if (sphere) {
+			scaleStart = { type: 'sphere', ...sphere }
+			return
+		}
+
+		const capsule = entity.get(traits.Capsule)
+		if (capsule) {
+			scaleStart = { type: 'capsule', ...capsule }
+			return
+		}
+
+		scaleStart = undefined
+	}
+
+	const onMouseDown = () => {
+		if (entity?.has(traits.FramesAPI)) {
+			session = sessions.begin([entity])
+		}
+		captureScaleStart()
+		environment.current.viewerMode = 'edit'
+		transformControls.setActive(true)
+	}
+
+	const onChange = () => {
+		if (!ref || !entity || !activeMode) {
+			return
+		}
+
+		const isFrameEntity = entity.has(traits.FramesAPI)
+
+		if (activeMode === 'translate' || activeMode === 'rotate') {
+			if (isFrameEntity) {
+				stageFrameTransform()
+			} else {
+				const pose = entity.get(traits.Pose)
+				if (pose) {
+					if (activeMode === 'translate') {
+						vector3ToPose(ref.getWorldPosition(vector3), pose)
+					} else {
+						quaternionToPose(ref.getWorldQuaternion(quaternion), pose)
+						ref.quaternion.copy(quaternion)
+					}
+					entity.set(traits.Pose, pose)
+				}
+			}
+		} else {
+			// scale → bake the gizmo's scale factor into the geometry trait,
+			// then reset the object's scale so subsequent drags start from 1.
+			if (!scaleStart) {
+				captureScaleStart()
+			}
+
+			if (scaleStart?.type === 'box') {
+				const next = {
+					x: scaleStart.x * ref.scale.x,
+					y: scaleStart.y * ref.scale.y,
+					z: scaleStart.z * ref.scale.z,
+				}
+				if (isFrameEntity) {
+					session?.stageGeometry(entity, { type: 'box', ...next })
+				} else {
+					entity.set(traits.Box, next)
+				}
+			} else if (scaleStart?.type === 'sphere') {
+				const next = { r: scaleStart.r * ref.scale.x }
+				if (isFrameEntity) {
+					session?.stageGeometry(entity, { type: 'sphere', ...next })
+				} else {
+					entity.set(traits.Sphere, next)
+				}
+			} else if (scaleStart?.type === 'capsule') {
+				const next = { r: scaleStart.r * ref.scale.x, l: scaleStart.l * ref.scale.y }
+				if (isFrameEntity) {
+					session?.stageGeometry(entity, { type: 'capsule', ...next })
+				} else {
+					entity.set(traits.Capsule, next)
+				}
+			}
+
+			ref.scale.setScalar(1)
+		}
+	}
+
+	const onMouseUp = () => {
+		session?.commit()
+		session = undefined
+		scaleStart = undefined
+		transformControls.setActive(false)
+	}
+
+	// Pose.svelte renders frame entities through the live blend
+	//   render = M(live) × M(network)⁻¹ × M(edited)
+	// so for the user's drag to render where they pulled the gizmo to, EditedPose
+	// must satisfy
+	//   M(edited) = M(network) × M(live)⁻¹ × M(ref)
+	// where M(ref) is the gizmo-driven group's parent-relative matrix in mm.
+	// When live ≈ network (no kinematic offset), this collapses to M(edited) =
+	// M(ref) — the same as the naive writeback. When they diverge (e.g. an arm
+	// whose joints have moved away from its config pose), this composition is
+	// what keeps the rendering anchored to the user's pointer instead of
+	// shearing through the live × baseline⁻¹ offset.
+	const stageFrameTransform = () => {
+		if (!ref || !entity) return
+
+		vector3ToPose(ref.position, refPose)
+		quaternionToPose(ref.quaternion, refPose)
+
+		const live = livePose.current
+		const network = networkPose.current
+
+		if (!live || !network) {
+			// No live pose available — Pose.svelte's blend short-circuits to
+			// editedPose, so naive writeback is correct.
+			if (activeMode === 'translate') {
+				session?.stagePose(entity, {
+					x: refPose.x,
+					y: refPose.y,
+					z: refPose.z,
+				})
+			} else if (activeMode === 'rotate') {
+				session?.stagePose(entity, {
+					oX: refPose.oX,
+					oY: refPose.oY,
+					oZ: refPose.oZ,
+					theta: refPose.theta,
+				})
+			}
+			return
+		}
+
+		session?.stagePose(entity, composeEditedPoseForRenderedPose(network, live, refPose))
+	}
+</script>
+
+{#if ref && entity && activeMode}
+	{#key entity}
+		<TransformControls
+			object={ref}
+			mode={activeMode}
+			translationSnap={settings.current.snapping ? 0.1 : undefined}
+			rotationSnap={settings.current.snapping ? Math.PI / 24 : undefined}
+			scaleSnap={settings.current.snapping ? 0.1 : undefined}
+			showY={!isSphereScale}
+			showZ={!isSphereScale && !isCapsuleScale}
+			onmouseDown={onMouseDown}
+			onobjectChange={onChange}
+			onmouseUp={onMouseUp}
+		/>
+	{/key}
+{/if}

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

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

package/dist/components/StaticGeometries.svelte

@@ -8,22 +8,15 @@
 <script lang="ts">
 	import type { Entity } from 'koota'
 
-	import { TransformControls } from '@threlte/extras'
 	import { PressedKeys } from 'runed'
 	import { SvelteSet } from 'svelte/reactivity'
-	import { Quaternion, Vector3 } from 'three'
 
 	import { traits, useWorld } from '../ecs'
-	import { useTransformControls } from '../hooks/useControls.svelte'
 	import { useSelectedEntity } from '../hooks/useSelection.svelte'
-	import { useSettings } from '../hooks/useSettings.svelte'
-	import { quaternionToPose, vector3ToPose } from '../transform'
 
 	import Frame from './Entities/Frame.svelte'
 
 	const world = useWorld()
-	const settings = useSettings()
-	const transformControls = useTransformControls()
 	const selectedEntity = useSelectedEntity()
 
 	const entities = new SvelteSet<Entity>()
@@ -31,11 +24,6 @@
 		[...entities].find((entity) => entity === selectedEntity.current)
 	)
 
-	const mode = $derived(settings.current.transformMode)
-
-	const quaternion = new Quaternion()
-	const vector3 = new Vector3()
-
 	const keys = new PressedKeys()
 
 	keys.onKeys('=', () => {
@@ -43,7 +31,8 @@
 			traits.Name(`custom geometry ${++index}`),
 			traits.Pose,
 			traits.Box({ x: 100, y: 100, z: 100 }),
-			traits.Removable
+			traits.Removable,
+			traits.Transformable
 		)
 
 		entities.add(entity)
@@ -57,50 +46,8 @@
 			selectedEntity.set()
 		}
 	})
-
-	$effect(() => {
-		settings.current.transforming = selectedCustomGeometry !== undefined
-	})
 </script>
 
 {#each entities as entity (entity)}
-	<Frame {entity}>
-		{#snippet children({ ref })}
-			{#if selectedEntity.current === entity}
-				{#key mode}
-					<TransformControls
-						object={ref}
-						{mode}
-						translationSnap={settings.current.snapping ? 0.1 : undefined}
-						rotationSnap={settings.current.snapping ? Math.PI / 24 : undefined}
-						scaleSnap={settings.current.snapping ? 0.1 : undefined}
-						onmouseDown={() => {
-							transformControls.setActive(true)
-						}}
-						onmouseUp={() => {
-							transformControls.setActive(false)
-
-							const pose = entity.get(traits.Pose)
-							const box = entity.get(traits.Box)
-
-							if (pose && mode === 'translate') {
-								vector3ToPose(ref.getWorldPosition(vector3), pose)
-								entity.set(traits.Pose, pose)
-							} else if (pose && mode === 'rotate') {
-								quaternionToPose(ref.getWorldQuaternion(quaternion), pose)
-								ref.quaternion.copy(quaternion)
-								entity.set(traits.Pose, pose)
-							} else if (box && mode === 'scale') {
-								box.x *= ref.scale.x
-								box.y *= ref.scale.y
-								box.z *= ref.scale.z
-								entity.set(traits.Box, box)
-								ref.scale.setScalar(1)
-							}
-						}}
-					/>
-				{/key}
-			{/if}
-		{/snippet}
-	</Frame>
+	<Frame {entity} />
 {/each}

package/dist/components/overlay/Details.svelte

@@ -11,12 +11,6 @@
 	const quaternion = new Quaternion()
 	const ov = new OrientationVector()
 	const euler = new Euler()
-
-	ThemeUtils.setGlobalDefaultTheme({
-		...ThemeUtils.presets.light,
-		baseBackgroundColor: '#fbfbfc',
-		baseShadowColor: 'transparent',
-	})
 </script>
 
 <script lang="ts">
@@ -24,7 +18,7 @@
 	import type { Snippet } from 'svelte'
 
 	import { draggable } from '@neodrag/svelte'
-	import { isInstanceOf, useTask } from '@threlte/core'
+	import { isInstanceOf, useTask, useThrelte } from '@threlte/core'
 	import { Button, Icon, Tooltip } from '@viamrobotics/prime-core'
 	import { Check, Copy } from 'lucide-svelte'
 	import {
@@ -68,6 +62,7 @@
 	const { details }: Props = $props()
 
 	const world = useWorld()
+	const { invalidate } = useThrelte()
 	const drawService = useDrawService()
 	const controls = useCameraControls()
 	const resourceByName = useResourceByName()
@@ -92,6 +87,7 @@
 	const removable = useTrait(() => entity, traits.Removable)
 	const points = useTrait(() => entity, traits.Points)
 	const arrows = useTrait(() => entity, traits.Arrows)
+	const opacity = useTrait(() => entity, traits.Opacity)
 
 	const framesAPI = useTrait(() => entity, traits.FramesAPI)
 	const isFrameNode = $derived(!!framesAPI.current)
@@ -139,8 +135,6 @@
 		}
 	})
 
-	const formatTwoDecimals = (value: number) => value.toFixed(2)
-
 	const detailConfigUpdater = new FrameConfigUpdater(partConfig.updateFrame, partConfig.deleteFrame)
 
 	const handlePositionChange = (event: PointChangeEvent) => {
@@ -205,6 +199,23 @@
 		detailConfigUpdater.updateGeometry(entity, { type: 'capsule', l: event.detail.value })
 	}
 
+	const opacityValue = $derived(opacity.current ?? 1)
+
+	const handleOpacityChange = (event: SliderChangeEvent) => {
+		if (event.detail.origin !== 'internal' || !entity) return
+		const next = event.detail.value
+		// No trait === fully opaque, so drop the trait when the user returns to 1
+		// instead of leaving an Opacity(1) entry on the entity.
+		if (next >= 1) {
+			entity.remove(traits.Opacity)
+		} else if (entity.has(traits.Opacity)) {
+			entity.set(traits.Opacity, next)
+		} else {
+			entity.add(traits.Opacity(next))
+		}
+		invalidate()
+	}
+
 	const handleParentChange = (event: ListChangeEvent) => {
 		if (event.detail.origin !== 'internal' || !entity) return
 		const value = event.detail.value as string
@@ -295,6 +306,12 @@
 			2
 		)
 	}
+
+	ThemeUtils.setGlobalDefaultTheme({
+		...ThemeUtils.presets.light,
+		baseBackgroundColor: '#fbfbfc',
+		baseShadowColor: 'transparent',
+	})
 </script>
 
 {#snippet ImmutableField({
@@ -321,9 +338,7 @@
 {#if entity}
 	<div
 		id="details-panel"
-		class="border-medium bg-extralight absolute top-0 right-0 z-4 m-2 {showEditFrameOptions
-			? 'w-80'
-			: 'w-60'} border p-2 text-xs dark:text-black"
+		class="border-medium bg-extralight absolute top-0 right-0 z-4 m-2 w-70 border p-2 text-xs dark:text-black"
 		use:draggable={{
 			bounds: 'body',
 			handle: dragElement,
@@ -492,7 +507,6 @@
 									y: localPose.current.y,
 									z: localPose.current.z,
 								}}
-								format={formatTwoDecimals}
 								on:change={handlePositionChange}
 							/>
 						</div>
@@ -531,7 +545,6 @@
 											z: localPose.current.oZ,
 											w: localPose.current.theta,
 										}}
-										format={formatTwoDecimals}
 										on:change={handleOrientationOVChange}
 									/>
 								</TabPage>
@@ -578,48 +591,49 @@
 					<div aria-label="mutable geometry">
 						<TabGroup bind:selectedIndex={geometryTabIndex}>
 							<TabPage title="None" />
-							<TabPage title="Box" />
-							<TabPage title="Sphere" />
-							<TabPage title="Capsule" />
+							<TabPage title="Box">
+								{#if box.current}
+									<div aria-label="mutable box dimensions">
+										<Point
+											value={{
+												x: box.current.x,
+												y: box.current.y,
+												z: box.current.z,
+											}}
+											on:change={handleBoxChange}
+										/>
+									</div>
+								{/if}
+							</TabPage>
+							<TabPage title="Sphere">
+								{#if sphere.current}
+									<div aria-label="mutable sphere dimensions">
+										<Slider
+											label="r"
+											value={sphere.current.r}
+											on:change={handleSphereRChange}
+										/>
+									</div>
+								{/if}
+							</TabPage>
+							<TabPage title="Capsule">
+								{#if capsule.current}
+									<div aria-label="mutable capsule dimensions">
+										<Slider
+											label="r"
+											value={capsule.current.r}
+											on:change={handleCapsuleRChange}
+										/>
+										<Slider
+											label="l"
+											value={capsule.current.l}
+											on:change={handleCapsuleLChange}
+										/>
+									</div>
+								{/if}
+							</TabPage>
 						</TabGroup>
 					</div>
-					{#if geometryTabIndex === 1 && box.current}
-						<div aria-label="mutable box dimensions">
-							<Point
-								value={{
-									x: box.current.x,
-									y: box.current.y,
-									z: box.current.z,
-								}}
-								format={formatTwoDecimals}
-								on:change={handleBoxChange}
-							/>
-						</div>
-					{:else if geometryTabIndex === 2 && sphere.current}
-						<div aria-label="mutable sphere dimensions">
-							<Slider
-								label="r"
-								value={sphere.current.r}
-								format={formatTwoDecimals}
-								on:change={handleSphereRChange}
-							/>
-						</div>
-					{:else if geometryTabIndex === 3 && capsule.current}
-						<div aria-label="mutable capsule dimensions">
-							<Slider
-								label="r"
-								value={capsule.current.r}
-								format={formatTwoDecimals}
-								on:change={handleCapsuleRChange}
-							/>
-							<Slider
-								label="l"
-								value={capsule.current.l}
-								format={formatTwoDecimals}
-								on:change={handleCapsuleLChange}
-							/>
-						</div>
-					{/if}
 				</div>
 			{:else if box.current}
 				<div>
@@ -673,6 +687,20 @@
 				</div>
 			{/if}
 
+			<div>
+				<strong class="font-semibold">opacity</strong>
+				<div aria-label="mutable opacity">
+					<Slider
+						value={opacityValue}
+						min={0}
+						max={1}
+						step={0.01}
+						format={(v) => v.toFixed(2)}
+						on:change={handleOpacityChange}
+					/>
+				</div>
+			</div>
+
 			{#if isInstanceOf(object3d, 'Points')}
 				<div>
 					<strong class="font-semibold">points</strong>

package/dist/components/overlay/dashboard/Button.svelte

@@ -2,10 +2,10 @@
 	import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
 
 	import { Icon, type IconName, Tooltip } from '@viamrobotics/prime-core'
-	import { Ruler } from 'lucide-svelte'
+	import { MousePointer2, Ruler } from 'lucide-svelte'
 
 	interface Props extends HTMLButtonAttributes {
-		icon: IconName | 'ruler'
+		icon: IconName | 'ruler' | 'mouse-pointer'
 		active?: boolean
 		description: string
 		hotkey?: string
@@ -48,6 +48,8 @@
 		>
 			{#if icon === 'ruler'}
 				<Ruler size="16" />
+			{:else if icon === 'mouse-pointer'}
+				<MousePointer2 size="16" />
 			{:else}
 				<Icon name={icon} />
 			{/if}

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

@@ -1,7 +1,7 @@
 import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
 import { type IconName } from '@viamrobotics/prime-core';
 interface Props extends HTMLButtonAttributes {
-    icon: IconName | 'ruler';
+    icon: IconName | 'ruler' | 'mouse-pointer';
     active?: boolean;
     description: string;
     hotkey?: string;

package/dist/components/overlay/dashboard/Dashboard.svelte

@@ -38,40 +38,50 @@
 	</fieldset>
 
 	<!-- transform -->
-	{#if settings.current.transforming}
-		<fieldset class="flex">
-			<Button
-				icon="cursor-move"
-				active={settings.current.transformMode === 'translate'}
-				description="Translate"
-				hotkey="1"
-				onclick={() => {
-					settings.current.transformMode = 'translate'
-				}}
-			/>
-			<Button
-				icon="sync"
-				active={settings.current.transformMode === 'rotate'}
-				description="Rotate"
-				hotkey="2"
-				class="-ml-px"
-				onclick={() => {
-					settings.current.transformMode = 'rotate'
-				}}
-			/>
-			<Button
-				icon="resize"
-				active={settings.current.transformMode === 'scale'}
-				description="Scale"
-				hotkey="3"
-				class="-ml-px"
-				onclick={() => {
-					settings.current.transformMode = 'scale'
-				}}
-			/>
-		</fieldset>
+	<fieldset class="flex">
+		<Button
+			icon="mouse-pointer"
+			active={settings.current.transformMode === 'none'}
+			description="No transform controls"
+			hotkey="0"
+			onclick={() => {
+				settings.current.transformMode = 'none'
+			}}
+		/>
+		<Button
+			icon="cursor-move"
+			active={settings.current.transformMode === 'translate'}
+			description="Translate"
+			hotkey="1"
+			class="-ml-px"
+			onclick={() => {
+				settings.current.transformMode = 'translate'
+			}}
+		/>
+		<Button
+			icon="sync"
+			active={settings.current.transformMode === 'rotate'}
+			description="Rotate"
+			hotkey="2"
+			class="-ml-px"
+			onclick={() => {
+				settings.current.transformMode = 'rotate'
+			}}
+		/>
+		<Button
+			icon="resize"
+			active={settings.current.transformMode === 'scale'}
+			description="Scale"
+			hotkey="3"
+			class="-ml-px"
+			onclick={() => {
+				settings.current.transformMode = 'scale'
+			}}
+		/>
+	</fieldset>
 
-		<!-- snapping -->
+	<!-- snapping -->
+	{#if settings.current.transformMode !== 'none'}
 		<fieldset class="flex">
 			<Button
 				icon={settings.current.snapping ? 'magnet' : 'magnet-off'}

package/dist/ecs/traits.d.ts

@@ -23,6 +23,15 @@ export declare const EditedPose: import("koota").Trait<{
     oZ: number;
     theta: number;
 }>;
+export declare const LivePose: import("koota").Trait<{
+    x: number;
+    y: number;
+    z: number;
+    oX: number;
+    oY: number;
+    oZ: number;
+    theta: number;
+}>;
 export declare const Center: import("koota").Trait<{
     x: number;
     y: number;
@@ -146,6 +155,12 @@ 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").Trait<() => boolean>;
+/**
+ * Marker trait for entities the dashboard's TransformControls may attach to —
+ * editable frames and ad-hoc custom geometries. Other entity kinds (lines,
+ * points, batched arrows, etc.) are deliberately excluded.
+ */
+export declare const Transformable: import("koota").Trait<() => boolean>;
 export declare const ShowAxesHelper: import("koota").Trait<() => boolean>;
 /**
  * Marker trait for entities that should be rendered in screen space (CSS pixels)