@viamrobotics/motion-tools 1.26.1 → 1.27.0

package/dist/components/Entities/GLTF.svelte

@@ -16,11 +16,10 @@
 	import type { Snippet } from 'svelte'
 
 	import { T, type Props as ThrelteProps } from '@threlte/core'
-	import { Portal, PortalTarget, type ThrelteGltf, useGltfAnimations } from '@threlte/extras'
+	import { type ThrelteGltf, useGltfAnimations } from '@threlte/extras'
 	import { Group, type Object3D } from 'three'
 
-	import { traits, useParentName, useTrait } from '../../ecs'
-	import { poseToObject3d } from '../../transform'
+	import { traits, useTrait } from '../../ecs'
 
 	import AxesHelper from '../AxesHelper.svelte'
 	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
@@ -34,11 +33,8 @@
 
 	const { gltf, actions } = useGltfAnimations()
 
-	const name = useTrait(() => entity, traits.Name)
-	const parent = useParentName(() => entity)
-	const pose = useTrait(() => entity, traits.Pose)
+	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const gltfTrait = useTrait(() => entity, traits.GLTF)
-	const scale = useTrait(() => entity, traits.Scale)
 	const invisible = useTrait(() => entity, traits.Invisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 	const events = useEntityEvents(() => entity)
@@ -46,10 +42,12 @@
 	const animationName = $derived(gltfTrait.current?.animationName)
 
 	const group = new Group()
+	group.matrixAutoUpdate = false
 
 	$effect.pre(() => {
-		if (pose.current) {
-			poseToObject3d(pose.current, group)
+		if (worldMatrix.current) {
+			group.matrix.copy(worldMatrix.current)
+			group.updateMatrixWorld()
 		}
 	})
 
@@ -84,30 +82,23 @@
 	})
 </script>
 
-<Portal id={parent.current}>
-	<T is={group}>
-		{#if showAxesHelper.current}
-			<AxesHelper
-				name={entity}
-				width={3}
-				length={0.1}
-			/>
-		{/if}
-		{#if $gltf}
-			<T
-				is={$gltf.scene as Object3D}
-				scale={[scale.current?.x ?? 1, scale.current?.y ?? 1, scale.current?.z ?? 1]}
-				name={entity}
-				visible={invisible.current !== true}
-				{...events}
-				{...rest}
-			>
-				{@render children?.()}
-
-				{#if name.current}
-					<PortalTarget id={name.current} />
-				{/if}
-			</T>
-		{/if}
-	</T>
-</Portal>
+<T is={group}>
+	{#if showAxesHelper.current}
+		<AxesHelper
+			name={entity}
+			width={3}
+			length={0.1}
+		/>
+	{/if}
+	{#if $gltf}
+		<T
+			is={$gltf.scene as Object3D}
+			name={entity}
+			visible={invisible.current !== true}
+			{...events}
+			{...rest}
+		>
+			{@render children?.()}
+		</T>
+	{/if}
+</T>

package/dist/components/Entities/Geometry.svelte

@@ -8,9 +8,9 @@ Renders a Viam Geometry object
 	import type { Snippet } from 'svelte'
 
 	import { T, useThrelte } from '@threlte/core'
-	import { Portal } from '@threlte/extras'
+	import { Group } from 'three'
 
-	import { traits, useParentName, useTrait } from '../../ecs'
+	import { traits, useTrait } from '../../ecs'
 	import { use3DModels } from '../../hooks/use3DModels.svelte'
 	import { useSettings } from '../../hooks/useSettings.svelte'
 	import { poseToObject3d } from '../../transform'
@@ -31,7 +31,7 @@ Renders a Viam Geometry object
 	const models = use3DModels()
 
 	const name = useTrait(() => entity, traits.Name)
-	const parent = useParentName(() => entity)
+	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const center = useTrait(() => entity, traits.Center)
 	const invisible = useTrait(() => entity, traits.Invisible)
 
@@ -52,6 +52,16 @@ Renders a Viam Geometry object
 		return models.current[componentName]?.[id]?.clone() ?? undefined
 	})
 
+	const group = new Group()
+	group.matrixAutoUpdate = false
+
+	$effect.pre(() => {
+		if (!worldMatrix.current) return
+		group.matrix.copy(worldMatrix.current)
+		group.updateMatrixWorld()
+		invalidate()
+	})
+
 	$effect.pre(() => {
 		if (model && center.current) {
 			poseToObject3d(center.current, model)
@@ -62,24 +72,25 @@ Renders a Viam Geometry object
 	const events = useEntityEvents(() => entity)
 </script>
 
-<Portal id={parent.current}>
-	<T.Group visible={invisible.current !== true}>
-		{#if model}
-			<T
-				is={model}
-				name={entity}
-				{...events}
-			/>
-		{/if}
-
-		{#if settings.current.renderArmModels.includes('colliders') || !model}
-			<Mesh
-				{entity}
-				center={center.current}
-				{...events}
-			>
-				{@render children?.()}
-			</Mesh>
-		{/if}
-	</T.Group>
-</Portal>
+<T
+	is={group}
+	visible={invisible.current !== true}
+>
+	{#if model}
+		<T
+			is={model}
+			name={entity}
+			{...events}
+		/>
+	{/if}
+
+	{#if settings.current.renderArmModels.includes('colliders') || !model}
+		<Mesh
+			{entity}
+			center={center.current}
+			{...events}
+		>
+			{@render children?.()}
+		</Mesh>
+	{/if}
+</T>

package/dist/components/Entities/Line.svelte

@@ -3,12 +3,11 @@
 	import type { Snippet } from 'svelte'
 
 	import { T, useThrelte } from '@threlte/core'
-	import { meshBounds, Portal, PortalTarget } from '@threlte/extras'
+	import { meshBounds } from '@threlte/extras'
 	import { Line2, LineMaterial } from 'three/examples/jsm/Addons.js'
 
 	import { isVertexColors, STRIDE } from '../../buffer'
-	import { traits, useParentName, useTrait } from '../../ecs'
-	import { poseToObject3d } from '../../transform'
+	import { traits, useTrait } from '../../ecs'
 
 	import AxesHelper from '../AxesHelper.svelte'
 	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
@@ -24,8 +23,7 @@
 
 	const { invalidate } = useThrelte()
 	const name = useTrait(() => entity, traits.Name)
-	const parent = useParentName(() => entity)
-	const pose = useTrait(() => entity, traits.Pose)
+	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const color = useTrait(() => entity, traits.Color)
 	const colors = useTrait(() => entity, traits.Colors)
 	const dotColors = useTrait(() => entity, traits.DotColors)
@@ -63,48 +61,48 @@
 	const currentOpacity = $derived(opacity.current ?? 0.7)
 
 	const mesh = new Line2()
+	mesh.matrixAutoUpdate = false
 
 	$effect.pre(() => {
-		if (pose.current) {
-			poseToObject3d(pose.current, mesh)
+		if (worldMatrix.current) {
+			mesh.matrix.copy(worldMatrix.current)
+			mesh.updateMatrixWorld()
 			invalidate()
 		}
 	})
 </script>
 
-<Portal id={parent.current}>
+<T
+	is={mesh}
+	name={entity}
+	userData.name={name}
+	raycast={meshBounds}
+	renderOrder={renderOrder.current}
+	visible={invisible.current !== true}
+	{...events}
+>
+	<LineGeometry
+		positions={linePositions.current}
+		colors={lineColors}
+	/>
 	<T
-		is={mesh}
-		name={entity}
-		userData.name={name}
-		raycast={meshBounds}
-		renderOrder={renderOrder.current}
-		visible={invisible.current !== true}
-		{...events}
-	>
-		<LineGeometry
-			positions={linePositions.current}
-			colors={lineColors}
-		/>
-		<T
-			is={LineMaterial}
-			color={hasVertexColors ? [1, 1, 1] : lineColor}
-			vertexColors={hasVertexColors}
-			transparent={currentOpacity < 1}
-			depthWrite={currentOpacity === 1}
-			opacity={currentOpacity}
-			worldUnits={!screenSpace.current}
-			linewidth={(lineWidth.current ?? 5) * (screenSpace.current ? 1 : 0.001)}
-			depthTest={materialProps.current?.depthTest ?? true}
+		is={LineMaterial}
+		color={hasVertexColors ? [1, 1, 1] : lineColor}
+		vertexColors={hasVertexColors}
+		transparent={currentOpacity < 1}
+		depthWrite={currentOpacity === 1}
+		opacity={currentOpacity}
+		worldUnits={!screenSpace.current}
+		linewidth={(lineWidth.current ?? 5) * (screenSpace.current ? 1 : 0.001)}
+		depthTest={materialProps.current?.depthTest ?? true}
+	/>
+	{#if showAxesHelper.current}
+		<AxesHelper
+			name={entity}
+			width={3}
+			length={0.1}
 		/>
-		{#if showAxesHelper.current}
-			<AxesHelper
-				name={entity}
-				width={3}
-				length={0.1}
-			/>
-		{/if}
-	</T>
+	{/if}
 
 	{#if linePositions.current && dotSize.current}
 		<LineDots
@@ -115,9 +113,5 @@
 		/>
 	{/if}
 
-	{#if name.current}
-		<PortalTarget id={name.current} />
-	{/if}
-
 	{@render children?.()}
-</Portal>
+</T>

package/dist/components/Entities/Mesh.svelte

@@ -137,9 +137,18 @@
 		renderOrder={renderOrder.current}
 		{...rest}
 	>
-		{#if box.current}
+		{#if box.current || sphere.current}
+			{@const meshGeometry = box.current ? unitBox : unitSphere}
+			{@const edgesGeometry = box.current ? unitBoxEdges : unitSphereEdges}
+			<!--
+				Switch via a derived `is` on the same <T> so `useAttach`'s effect
+				cleanup runs before the new attach. Splitting these across two
+				branches of an {#if}/{:else if} races mount-new against unmount-old:
+				the new attach saves `mesh.geometry`, then the old cleanup restores
+				it to the pre-attach value (null), leaving the mesh geometryless.
+			-->
 			<T
-				is={unitBox}
+				is={meshGeometry}
 				dispose={false}
 			/>
 			<T.LineSegments
@@ -147,22 +156,7 @@
 				bvh={{ enabled: false }}
 			>
 				<T
-					is={unitBoxEdges}
-					dispose={false}
-				/>
-				<T.LineBasicMaterial color={darkenColor(color, 10)} />
-			</T.LineSegments>
-		{:else if sphere.current}
-			<T
-				is={unitSphere}
-				dispose={false}
-			/>
-			<T.LineSegments
-				raycast={() => null}
-				bvh={{ enabled: false }}
-			>
-				<T
-					is={unitSphereEdges}
+					is={edgesGeometry}
 					dispose={false}
 				/>
 				<T.LineBasicMaterial color={darkenColor(color, 10)} />

package/dist/components/Entities/Points.svelte

@@ -3,13 +3,11 @@
 	import type { Snippet } from 'svelte'
 
 	import { T, useTask, useThrelte } from '@threlte/core'
-	import { Portal } from '@threlte/extras'
 	import { OrthographicCamera, Points, PointsMaterial } from 'three'
 
 	import { asColor, isSingleColor } from '../../buffer'
-	import { traits, useParentName, useTrait } from '../../ecs'
+	import { traits, useTrait } from '../../ecs'
 	import { useSettings } from '../../hooks/useSettings.svelte'
-	import { poseToObject3d } from '../../transform'
 
 	import AxesHelper from '../AxesHelper.svelte'
 	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
@@ -24,8 +22,7 @@
 	const { camera } = useThrelte()
 	const settings = useSettings()
 
-	const parent = useParentName(() => entity)
-	const pose = useTrait(() => entity, traits.Pose)
+	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const geometry = useTrait(() => entity, traits.BufferGeometry)
 	const entityColor = useTrait(() => entity, traits.Color)
 	const colors = useTrait(() => entity, traits.Colors)
@@ -42,6 +39,7 @@
 	const orthographic = $derived(settings.current.cameraMode === 'orthographic')
 
 	const points = new Points()
+	points.matrixAutoUpdate = false
 	const material = points.material as PointsMaterial
 	material.toneMapped = false
 
@@ -98,8 +96,9 @@
 	})
 
 	$effect.pre(() => {
-		if (pose.current) {
-			poseToObject3d(pose.current, points)
+		if (worldMatrix.current) {
+			points.matrix.copy(worldMatrix.current)
+			points.updateMatrixWorld()
 		}
 	})
 
@@ -125,25 +124,23 @@
 </script>
 
 {#if geometry.current}
-	<Portal id={parent.current}>
-		<T
-			is={points}
-			name={entity}
-			bvh={{ maxDepth: 40, maxLeafSize: 20 }}
-			visible={invisible.current !== true}
-			renderOrder={renderOrder.current}
-			{...events}
-		>
-			<T is={geometry.current} />
-			<T is={material} />
-			{#if showAxesHelper.current}
-				<AxesHelper
-					name={entity}
-					width={3}
-					length={0.1}
-				/>
-			{/if}
-			{@render children?.()}
-		</T>
-	</Portal>
+	<T
+		is={points}
+		name={entity}
+		bvh={{ maxDepth: 40, maxLeafSize: 20 }}
+		visible={invisible.current !== true}
+		renderOrder={renderOrder.current}
+		{...events}
+	>
+		<T is={geometry.current} />
+		<T is={material} />
+		{#if showAxesHelper.current}
+			<AxesHelper
+				name={entity}
+				width={3}
+				length={0.1}
+			/>
+		{/if}
+		{@render children?.()}
+	</T>
 {/if}

package/dist/components/Entities/Pose.svelte

@@ -1,52 +1,45 @@
 <script lang="ts">
-	import type { Pose } from '@viamrobotics/sdk'
 	import type { Entity } from 'koota'
 	import type { Snippet } from 'svelte'
 
+	import { Matrix4 } from 'three'
+
 	import { traits, useParentName, useTrait } from '../../ecs'
-	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
 	import { usePose } from '../../hooks/usePose.svelte'
-	import { composeRenderedPose } from '../../transform'
+	import { poseToMatrix } from '../../transform'
 
 	interface Props {
 		entity: Entity
-		children: Snippet<[{ pose: Pose | undefined }]>
+		children: Snippet
 	}
 	let { entity, children }: Props = $props()
 
-	const partConfig = usePartConfig()
 	const name = useTrait(() => entity, traits.Name)
 	const parent = useParentName(() => entity)
-	const editedPose = useTrait(() => entity, traits.EditedPose)
-	const entityPose = useTrait(() => entity, traits.Pose)
 
 	const pose = usePose(
 		() => name.current,
 		() => parent.current
 	)
 
+	/**
+	 * Mirror the robot's live kinematics-resolved pose into LiveMatrix so
+	 * Frame.svelte can compose the rendered transform via
+	 * `composeLocalMatrix(live, baseline, edited)`. Mutate the stored
+	 * `Matrix4` in place when present and notify via `entity.changed` —
+	 * allocate only on first add.
+	 */
 	$effect.pre(() => {
 		if (pose.current === undefined) return
 
-		if (entity.has(traits.LivePose)) {
-			entity.set(traits.LivePose, pose.current)
+		const live = entity.get(traits.LiveMatrix)
+		if (live) {
+			poseToMatrix(pose.current, live)
+			entity.changed(traits.LiveMatrix)
 		} else {
-			entity.add(traits.LivePose(pose.current))
+			entity.add(traits.LiveMatrix(poseToMatrix(pose.current, new Matrix4())))
 		}
 	})
-
-	// Always render through the live blend: live × network⁻¹ × edited. With
-	// `edited === network` (no edits) this collapses to `live`, so the rendered
-	// pose tracks the robot's kinematics-resolved position. With edits, the
-	// formula composes the staged delta on top of live. Input handlers that
-	// drive edits (gizmo onChange, Details panel) compute `edited` such that
-	// the blend renders to the user's intent.
-	const resolvedPose = $derived.by(() => {
-		if (pose.current === undefined || partConfig.hasPendingSave) return editedPose.current
-		if (!entityPose.current || !editedPose.current) return undefined
-
-		return composeRenderedPose(pose.current, entityPose.current, editedPose.current)
-	})
 </script>
 
-{@render children({ pose: resolvedPose })}
+{@render children()}

package/dist/components/Entities/Pose.svelte.d.ts

@@ -1,11 +1,8 @@
-import type { Pose } from '@viamrobotics/sdk';
 import type { Entity } from 'koota';
 import type { Snippet } from 'svelte';
 interface Props {
     entity: Entity;
-    children: Snippet<[{
-        pose: Pose | undefined;
-    }]>;
+    children: Snippet;
 }
 declare const Pose: import("svelte").Component<Props, {}, "">;
 type Pose = ReturnType<typeof Pose>;

package/dist/components/Entities/hooks/useEntityEvents.svelte.js

@@ -1,9 +1,18 @@
 import { useCursor } from '@threlte/extras';
-import { Vector2 } from 'three';
+import { MathUtils, Matrix4, Quaternion, Vector2 } from 'three';
 import { traits, useTrait } from '../../../ecs';
 import { useFocusedEntity, useSelectedEntity } from '../../../hooks/useSelection.svelte';
 import { updateHoverInfo } from '../../../HoverUpdater.svelte';
-import { createPose, matrixToPose, poseToMatrix } from '../../../transform';
+import { OrientationVector } from '../../../three/OrientationVector';
+const tempHoverMatrix = new Matrix4();
+const hoverQuat = new Quaternion();
+const hoverOv = new OrientationVector();
+const infoToLocalMatrix = (info, out) => {
+    hoverOv.set(info.oX, info.oY, info.oZ, MathUtils.degToRad(info.theta));
+    hoverOv.toQuaternion(hoverQuat);
+    out.makeRotationFromQuaternion(hoverQuat);
+    out.setPosition(info.x, info.y, info.z);
+};
 export const useEntityEvents = (entity) => {
     const down = new Vector2();
     const selectedEntity = useSelectedEntity();
@@ -19,15 +28,18 @@ export const useEntityEvents = (entity) => {
         if (currentEntity && !currentEntity.has(traits.Hovered)) {
             const hoverInfo = updateHoverInfo(currentEntity, event);
             if (hoverInfo) {
-                currentEntity.add(traits.InstancedPose({
+                infoToLocalMatrix(hoverInfo, tempHoverMatrix);
+                const worldMatrix = currentEntity.get(traits.WorldMatrix);
+                const composed = new Matrix4();
+                if (worldMatrix) {
+                    composed.copy(worldMatrix).multiply(tempHoverMatrix);
+                }
+                else {
+                    composed.copy(tempHoverMatrix);
+                }
+                currentEntity.add(traits.InstancedMatrix({
+                    matrix: composed,
                     index: hoverInfo.index,
-                    x: hoverInfo.x,
-                    y: hoverInfo.y,
-                    z: hoverInfo.z,
-                    oX: hoverInfo.oX,
-                    oY: hoverInfo.oY,
-                    oZ: hoverInfo.oZ,
-                    theta: hoverInfo.theta,
                 }));
             }
             currentEntity.add(traits.Hovered);
@@ -40,34 +52,21 @@ export const useEntityEvents = (entity) => {
         const currentEntity = entity();
         if (currentEntity?.has(traits.Hovered)) {
             const hoverInfo = updateHoverInfo(currentEntity, event);
-            const hoverPose = createPose(hoverInfo
-                ? {
-                    x: hoverInfo.x,
-                    y: hoverInfo.y,
-                    z: hoverInfo.z,
-                    oX: 0,
-                    oY: 0,
-                    oZ: 1,
-                    theta: 0,
-                }
-                : undefined);
-            const worldPose = currentEntity.get(traits.WorldPose) ?? createPose();
-            const hoverPoseMatrix = poseToMatrix(hoverPose);
-            const worldPoseMatrix = poseToMatrix(worldPose);
-            const resultMatrix = worldPoseMatrix.multiply(hoverPoseMatrix);
-            const resultPose = matrixToPose(resultMatrix);
-            if (hoverInfo) {
-                currentEntity.set(traits.InstancedPose, {
-                    index: hoverInfo.index,
-                    x: resultPose.x,
-                    y: resultPose.y,
-                    z: resultPose.z,
-                    oX: resultPose.oX,
-                    oY: resultPose.oY,
-                    oZ: resultPose.oZ,
-                    theta: resultPose.theta,
-                });
+            if (!hoverInfo)
+                return;
+            infoToLocalMatrix(hoverInfo, tempHoverMatrix);
+            const instanced = currentEntity.get(traits.InstancedMatrix);
+            if (!instanced)
+                return;
+            const worldMatrix = currentEntity.get(traits.WorldMatrix);
+            if (worldMatrix) {
+                instanced.matrix.copy(worldMatrix).multiply(tempHoverMatrix);
+            }
+            else {
+                instanced.matrix.copy(tempHoverMatrix);
             }
+            instanced.index = hoverInfo.index;
+            currentEntity.changed(traits.InstancedMatrix);
         }
     };
     const onpointerleave = (event) => {
@@ -77,8 +76,8 @@ export const useEntityEvents = (entity) => {
         if (currentEntity?.has(traits.Hovered)) {
             currentEntity.remove(traits.Hovered);
         }
-        if (currentEntity?.has(traits.InstancedPose)) {
-            currentEntity.remove(traits.InstancedPose);
+        if (currentEntity?.has(traits.InstancedMatrix)) {
+            currentEntity.remove(traits.InstancedMatrix);
         }
     };
     const ondblclick = (event) => {
@@ -109,8 +108,8 @@ export const useEntityEvents = (entity) => {
             if (currentEntity?.has(traits.Hovered)) {
                 currentEntity.remove(traits.Hovered);
             }
-            if (currentEntity?.has(traits.InstancedPose)) {
-                currentEntity.remove(traits.InstancedPose);
+            if (currentEntity?.has(traits.InstancedMatrix)) {
+                currentEntity.remove(traits.InstancedMatrix);
             }
         }
     });

package/dist/components/Scene.svelte

@@ -51,7 +51,13 @@
 		enabled.set(settings.current.interactionMode === 'navigate')
 	})
 
-	bvh(raycaster, () => ({ helper: false }))
+	const bvhEnabled = $derived(
+		settings.current.renderSubEntityHoverDetail ||
+			settings.current.interactionMode === 'measure' ||
+			settings.current.interactionMode === 'select'
+	)
+
+	bvh(raycaster, () => ({ helper: false, enabled: bvhEnabled }))
 
 	const focusedObject = $derived(focusedObject3d.current)
 

package/dist/components/SceneProviders.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
 
-	import { provideHierarchy } from '../ecs'
+	import { provideHierarchy, provideWorldMatrix } from '../ecs'
 	import { provide3DModels } from '../hooks/use3DModels.svelte'
 	import { provideArmClient } from '../hooks/useArmClient.svelte'
 	import { provideArmKinematics } from '../hooks/useArmKinematics.svelte'
@@ -43,6 +43,7 @@
 	provideLogs()
 
 	provideHierarchy()
+	provideWorldMatrix()
 	provideOrigin()
 	provideDrawAPI()
 	provideRelationships()