@viamrobotics/motion-tools 0.19.2 → 1.0.3

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

@@ -1,7 +1,7 @@
-import type { PointsGeometry, WorldObject } from '../WorldObject.svelte';
 import type { Snippet } from 'svelte';
+import type { Entity } from 'koota';
 interface Props {
-    object: WorldObject<PointsGeometry>;
+    entity: Entity;
     children?: Snippet;
 }
 declare const Pointcloud: import("svelte").Component<Props, {}, "">;

package/dist/components/PointerMissBox.svelte

@@ -2,13 +2,13 @@
 	import { BackSide, Mesh, Vector3 } from 'three'
 	import { T, useThrelte } from '@threlte/core'
 	import { MeshDiscardMaterial } from '@threlte/extras'
-	import { useSelected } from '../hooks/useSelection.svelte'
+	import { useSelectedEntity } from '../hooks/useSelection.svelte'
 	import { useTransformControls } from '../hooks/useControls.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 
 	const { camera } = useThrelte()
 	const settings = useSettings()
-	const selected = useSelected()
+	const selectedEntity = useSelectedEntity()
 	const transformControls = useTransformControls()
 	const cameraDown = new Vector3()
 
@@ -32,7 +32,7 @@
 			return
 		}
 
-		selected.set()
+		selectedEntity.set()
 	}}
 >
 	<T.BoxGeometry args={[size, size, size]} />

package/dist/components/Pose.svelte

@@ -1,19 +1,44 @@
 <script lang="ts">
+	import { traits, useTrait } from '../ecs'
 	import { usePose } from '../hooks/usePose.svelte'
+	import { matrixToPose, poseToMatrix } from '../transform'
 	import type { Pose } from '@viamrobotics/sdk'
+	import type { Entity } from 'koota'
 	import type { Snippet } from 'svelte'
 
 	interface Props {
-		name?: string
-		parent?: string
+		entity: Entity
 		children: Snippet<[{ pose: Pose | undefined }]>
 	}
-	let { name, parent, children }: Props = $props()
+	let { entity, children }: Props = $props()
+
+	const name = useTrait(() => entity, traits.Name)
+	const parent = useTrait(() => entity, traits.Parent)
+	const editedPose = useTrait(() => entity, traits.EditedPose)
+	const entityPose = useTrait(() => entity, traits.Pose)
 
 	const pose = usePose(
-		() => name,
-		() => parent ?? 'world'
+		() => name.current,
+		() => parent.current
 	)
+
+	const resolvedPose = $derived.by(() => {
+		if (pose.current === undefined) {
+			return editedPose.current
+		}
+
+		if (!entityPose.current || !editedPose.current) {
+			return
+		}
+
+		const poseNetwork = poseToMatrix(entityPose.current)
+		const poseUsePose = poseToMatrix(pose.current)
+		const poseLocalEditedPose = poseToMatrix(editedPose.current)
+
+		const poseNetworkInverse = poseNetwork.invert()
+		const resultMatrix = poseUsePose.multiply(poseNetworkInverse).multiply(poseLocalEditedPose)
+		return matrixToPose(resultMatrix)
+	})
 </script>
 
-{@render children({ pose: pose.current })}
+{@render children({ pose: resolvedPose })}

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

@@ -1,8 +1,8 @@
 import type { Pose } from '@viamrobotics/sdk';
+import type { Entity } from 'koota';
 import type { Snippet } from 'svelte';
 interface Props {
-    name?: string;
-    parent?: string;
+    entity: Entity;
     children: Snippet<[{
         pose: Pose | undefined;
     }]>;

package/dist/components/Scene.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { Vector3 } from 'three'
 	import { T } from '@threlte/core'
-	import { Grid, interactivity, PerfMonitor, bvh } from '@threlte/extras'
-	import { PortalTarget } from './portal'
-	import WorldObjects from './WorldObjects.svelte'
+	import { Grid, interactivity, PerfMonitor, bvh, PortalTarget } from '@threlte/extras'
+	import Entities from './Entities.svelte'
 	import Selected from './Selected.svelte'
 	import Focus from './Focus.svelte'
 	import StaticGeometries from './StaticGeometries.svelte'
@@ -17,6 +16,7 @@
 	import CameraControls from './CameraControls.svelte'
 	import MeasureTool from './MeasureTool.svelte'
 	import PointerMissBox from './PointerMissBox.svelte'
+	import BatchedArrows from './BatchedArrows.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -41,6 +41,7 @@
 		enabled.set(!settings.current.enableMeasure)
 	})
 	raycaster.firstHitOnly = true
+	raycaster.params.Points.threshold = 0.005
 
 	bvh(() => ({ helper: false }))
 
@@ -89,11 +90,11 @@
 	{/if}
 
 	<T.Group attach={focusedObject ? false : undefined}>
-		<!-- Capture "default" portals if "world" is not explicit -->
-		<PortalTarget />
 		<PortalTarget id="world" />
+		<PortalTarget />
 
-		<WorldObjects />
+		<Entities />
+		<BatchedArrows />
 	</T.Group>
 
 	{@render children?.()}

package/dist/components/SceneProviders.svelte

@@ -5,7 +5,6 @@
 	import { providePointclouds } from '../hooks/usePointclouds.svelte'
 	import { usePartID } from '../hooks/usePartID.svelte'
 	import { provideSelection } from '../hooks/useSelection.svelte'
-	import { provideStaticGeometries } from '../hooks/useStaticGeometries.svelte'
 	import { provideVisibility } from '../hooks/useVisibility.svelte'
 	import { provideDrawAPI } from '../hooks/useDrawAPI.svelte'
 	import { provideMachineSettings } from '../hooks/useMachineSettings.svelte'
@@ -14,13 +13,11 @@
 		provideTransformControls,
 		type CameraPose,
 	} from '../hooks/useControls.svelte'
-	import { provideObjects } from '../hooks/useObjects.svelte'
 	import { provideMotionClient } from '../hooks/useMotionClient.svelte'
 	import { provideLogs } from '../hooks/useLogs.svelte'
 	import { provideOrigin } from './xr/useOrigin.svelte'
 	import { provideWorldStates } from '../hooks/useWorldState.svelte'
 	import { provideArmClient } from '../hooks/useArmClient.svelte'
-	import { provideArrows } from '../hooks/useArrows.svelte'
 	import { provideFramelessComponents } from '../hooks/useFramelessComponents.svelte'
 	import { provideResourceByName } from '../hooks/useResourceByName.svelte'
 	import { provide3DModels } from '../hooks/use3DModels.svelte'
@@ -40,9 +37,7 @@
 	provideMachineSettings()
 	provideLogs()
 
-	provideArrows()
 	provideOrigin()
-	provideStaticGeometries()
 	provideDrawAPI()
 
 	provideResourceByName(() => partID.current)
@@ -52,7 +47,6 @@
 	providePointclouds(() => partID.current)
 	provideMotionClient(() => partID.current)
 	provideArmClient(() => partID.current)
-	provideObjects()
 	provideWorldStates()
 	provideFramelessComponents()
 

package/dist/components/Selected.svelte

@@ -1,19 +1,23 @@
 <script lang="ts">
 	import { T, useTask, useThrelte } from '@threlte/core'
-	import { useSelectedObject, useSelectedObject3d } from '../hooks/useSelection.svelte'
+	import { useSelectedEntity, useSelectedObject3d } from '../hooks/useSelection.svelte'
 	import { OBBHelper } from '../three/OBBHelper'
 	import { OBB } from 'three/addons/math/OBB.js'
+	import { traits, useTrait } from '../ecs'
+	import { BatchedMesh, Box3 } from 'three'
 
+	const box3 = new Box3()
 	const obb = new OBB()
 	const obbHelper = new OBBHelper()
 
-	const { invalidate } = useThrelte()
-	const selected = useSelectedObject()
+	const { scene, invalidate } = useThrelte()
+	const selectedEntity = useSelectedEntity()
 	const selectedObject3d = useSelectedObject3d()
+	const instance = useTrait(() => selectedEntity.current, traits.Instance)
 
 	// Create a clone so that our bounding box doesn't include children
 	const clone = $derived.by(() => {
-		if (selected.current?.metadata.batched) {
+		if (instance.current) {
 			return
 		}
 
@@ -22,12 +26,14 @@
 
 	const { start, stop } = useTask(
 		() => {
-			if (selected.current === undefined) {
+			if (selectedEntity.current === undefined) {
 				return
 			}
 
-			if (selected.current.metadata.batched) {
-				selected.current.metadata.getBoundingBoxAt?.(obb)
+			if (instance.current) {
+				const mesh = scene.getObjectById(instance.current.meshID) as BatchedMesh
+				mesh?.getBoundingBoxAt(instance.current.instanceID, box3)
+				obb.fromBox3(box3)
 				obbHelper.setFromOBB(obb)
 				invalidate()
 				return
@@ -47,21 +53,21 @@
 	)
 
 	$effect.pre(() => {
-		if (selected.current) {
+		if (selectedEntity.current) {
 			start()
-			obbHelper.visible = true
 		} else {
 			stop()
-
-			obbHelper.visible = false
 		}
 
 		invalidate()
 	})
 </script>
 
-<T
-	is={obbHelper}
-	raycast={() => null}
-	bvh={{ enabled: false }}
-/>
+{#if selectedEntity.current}
+	<T
+		is={obbHelper}
+		dispose={false}
+		raycast={() => null}
+		bvh={{ enabled: false }}
+	/>
+{/if}

package/dist/components/StaticGeometries.svelte

@@ -1,18 +1,32 @@
+<script
+	module
+	lang="ts"
+>
+	let index = 0
+</script>
+
 <script lang="ts">
 	import { TransformControls } from '@threlte/extras'
-	import { useSelected } from '../hooks/useSelection.svelte'
-	import { useStaticGeometries } from '../hooks/useStaticGeometries.svelte'
+	import { useSelectedEntity } from '../hooks/useSelection.svelte'
 	import { useTransformControls } from '../hooks/useControls.svelte'
 	import { PressedKeys } from 'runed'
-	import { quaternionToPose, scaleToDimensions, vector3ToPose } from '../transform'
+	import { quaternionToPose, vector3ToPose } from '../transform'
 	import { Quaternion, Vector3 } from 'three'
 	import Frame from './Frame.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
+	import { useWorld, traits } from '../ecs'
+	import type { Entity } from 'koota'
+	import { SvelteSet } from 'svelte/reactivity'
 
+	const world = useWorld()
 	const settings = useSettings()
 	const transformControls = useTransformControls()
-	const geometries = useStaticGeometries()
-	const selected = useSelected()
+	const selectedEntity = useSelectedEntity()
+
+	const entities = new SvelteSet<Entity>()
+	const selectedCustomGeometry = $derived(
+		[...entities].find((entity) => entity === selectedEntity.current)
+	)
 
 	const mode = $derived(settings.current.transformMode)
 
@@ -21,26 +35,33 @@
 
 	const keys = new PressedKeys()
 
-	keys.onKeys('=', () => geometries.add())
-	keys.onKeys('-', () => geometries.remove(selected.current ?? ''))
+	keys.onKeys('=', () => {
+		const entity = world.spawn(
+			traits.Name(`custom geometry ${++index}`),
+			traits.Pose,
+			traits.Box({ x: 0.1, y: 0.1, z: 0.1 })
+		)
+
+		entities.add(entity)
+	})
+
+	keys.onKeys('-', () => {
+		if (selectedCustomGeometry) {
+			selectedCustomGeometry.destroy()
+			entities.delete(selectedCustomGeometry)
+			selectedEntity.set()
+		}
+	})
 
 	$effect(() => {
-		settings.current.transforming = geometries.current.some(
-			(geometry) => selected.current === geometry.uuid
-		)
+		settings.current.transforming = selectedCustomGeometry !== undefined
 	})
 </script>
 
-{#each geometries.current as object (object.uuid)}
-	<Frame
-		uuid={object.uuid}
-		name={object.name}
-		pose={object.pose}
-		geometry={object.geometry}
-		metadata={object.metadata}
-	>
+{#each entities as entity (entity)}
+	<Frame {entity}>
 		{#snippet children({ ref })}
-			{#if selected.current === object.uuid}
+			{#if selectedEntity.current === entity}
 				{#key mode}
 					<TransformControls
 						object={ref}
@@ -54,17 +75,20 @@
 						onmouseUp={() => {
 							transformControls.setActive(false)
 
-							if (mode === 'translate') {
-								vector3ToPose(ref.getWorldPosition(vector3), object.pose)
-							} else if (mode === 'rotate') {
-								quaternionToPose(ref.getWorldQuaternion(quaternion), object.pose)
+							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)
-							} else if (mode === 'scale' && object.geometry?.geometryType.case === 'box') {
-								scaleToDimensions(ref.scale, object.geometry.geometryType)
+								entity.set(traits.Pose, pose)
+							} else if (box && mode === 'scale') {
+								entity.set(traits.Box, ref.scale)
 								ref.scale.setScalar(1)
 							}
-
-							object.pose = { ...object.pose }
 						}}
 					/>
 				{/key}

package/dist/components/Tree/Tree.svelte

@@ -1,60 +1,76 @@
 <script lang="ts">
 	import * as tree from '@zag-js/tree-view'
 	import { useMachine, normalizeProps } from '@zag-js/svelte'
-	import { untrack } from 'svelte'
 	import { ChevronRight, Eye, EyeOff } from 'lucide-svelte'
 	import { useVisibility } from '../../hooks/useVisibility.svelte'
 	import type { TreeNode } from './buildTree'
-	import { useExpanded } from './useExpanded.svelte'
 	import { VirtualList } from 'svelte-virtuallists'
-	import { observe } from '@threlte/core'
 	import { Icon } from '@viamrobotics/prime-core'
+	import { traits } from '../../ecs'
+	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
+	import { SvelteSet } from 'svelte/reactivity'
 
+	const selected = useSelectedEntity()
 	const visibility = useVisibility()
-	const expanded = useExpanded()
 
 	interface Props {
 		rootNode: TreeNode
-		selections: string[]
+		nodeMap: Record<string, TreeNode | undefined>
+		dragElement?: HTMLElement
 		onSelectionChange?: (event: tree.SelectionChangeDetails) => void
-		onDragStart?: (event: MouseEvent) => void
-		onDragEnd?: (event: MouseEvent) => void
 	}
 
-	let { rootNode, selections, onSelectionChange, onDragStart, onDragEnd }: Props = $props()
+	let { rootNode, nodeMap, onSelectionChange, dragElement = $bindable() }: Props = $props()
 
-	const collection = tree.collection<TreeNode>({
-		nodeToValue: (node) => node.id,
-		nodeToString: (node) => node.name,
-		rootNode,
+	const collection = $derived(
+		tree.collection<TreeNode>({
+			nodeToValue: (node) => `${node.entity}`,
+			nodeToString: (node) => node.entity.get(traits.Name) ?? '',
+			rootNode,
+		})
+	)
+
+	const selectedValue = $derived(selected.current ? [`${selected.current}`] : [])
+	const expandedValues = new SvelteSet<string>()
+
+	$effect(() => {
+		let name = selected.current?.get(traits.Name)
+		let node = nodeMap[name ?? '']
+		while (node) {
+			expandedValues.add(`${node.entity}`)
+			node = node.parent
+		}
 	})
 
-	const service = useMachine(tree.machine, {
+	const id = $props.id()
+	const service = useMachine(tree.machine, () => ({
+		id,
 		collection,
+		selectedValue,
+		expandedValue: [...expandedValues],
 		onSelectionChange(details) {
 			onSelectionChange?.(details)
 		},
 		onExpandedChange(details) {
-			expanded.clear()
+			expandedValues.clear()
 			for (const value of details.expandedValue) {
-				expanded.add(value)
+				expandedValues.add(value)
 			}
 		},
-	})
+	}))
 
 	const api = $derived(tree.connect(service, normalizeProps))
+	const rootChildren = $derived(collection.rootNode.children ?? [])
 
-	observe(
-		() => [selections],
-		() => untrack(() => api.setSelectedValue(selections))
-	)
-
-	observe(
-		() => [expanded],
-		() => untrack(() => api.setExpandedValue([...expanded]))
-	)
+	$effect(() => {
+		const element = document.querySelector(
+			`[data-scope="tree-view"][data-value="${selected.current}"]`
+		)
 
-	const rootChildren = $derived(collection.rootNode.children ?? [])
+		requestAnimationFrame(() => {
+			element?.scrollIntoView({ block: 'nearest' })
+		})
+	})
 </script>
 
 {#snippet treeNode({
@@ -68,7 +84,7 @@
 })}
 	{@const nodeProps = { indexPath, node }}
 	{@const nodeState = api.getNodeState(nodeProps)}
-	{@const isVisible = visibility.get(node.id) ?? true}
+	{@const isVisible = visibility.get(node.entity) ?? true}
 	{@const { selected } = nodeState}
 
 	{#if nodeState.isBranch}
@@ -93,14 +109,14 @@
 					class="flex items-center"
 					{...api.getBranchTextProps(nodeProps)}
 				>
-					{node.name}
+					{node.entity.get(traits.Name)}
 				</span>
 
 				<button
 					class="text-gray-6"
 					onclick={(event) => {
 						event.stopPropagation()
-						visibility.set(node.id, !isVisible)
+						visibility.set(node.entity, !isVisible)
 					}}
 				>
 					{#if isVisible}
@@ -113,7 +129,7 @@
 			<div {...api.getBranchContentProps(nodeProps)}>
 				<div {...api.getBranchIndentGuideProps(nodeProps)}></div>
 
-				{#each children as node, index (node.id)}
+				{#each children as node, index (node.entity)}
 					{@render treeNode({ node, indexPath: [...indexPath, index], api })}
 				{/each}
 			</div>
@@ -124,14 +140,14 @@
 			{...api.getItemProps(nodeProps)}
 		>
 			<span class="flex items-center gap-1.5">
-				{node.name}
+				{node.entity.get(traits.Name)}
 			</span>
 
 			<button
 				class="text-gray-6"
 				onclick={(event) => {
 					event.stopPropagation()
-					visibility.set(node.id, !isVisible)
+					visibility.set(node.entity, !isVisible)
 				}}
 			>
 				{#if isVisible}
@@ -147,13 +163,10 @@
 <div class="root-node">
 	<div {...api.getRootProps() as object}>
 		<div class="border-medium flex items-center gap-1 border-b p-2">
-			<button
-				onmousedown={onDragStart}
-				onmouseup={onDragEnd}
-			>
+			<button bind:this={dragElement}>
 				<Icon name="drag" />
 			</button>
-			<h3 {...api.getLabelProps() as object}>{rootNode.name}</h3>
+			<h3 {...api.getLabelProps() as object}>{rootNode.entity.get(traits.Name)}</h3>
 		</div>
 
 		<div {...api.getTreeProps()}>
@@ -174,7 +187,7 @@
 					style="height:{Math.min(8, Math.max(rootChildren.length, 5)) * 32}px;"
 					class="overflow-auto"
 				>
-					{#each rootChildren as node, index (node.id)}
+					{#each rootChildren as node, index (node.entity)}
 						{@render treeNode({ node, indexPath: [Number(index)], api })}
 					{/each}
 				</div>

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

@@ -2,11 +2,10 @@ import * as tree from '@zag-js/tree-view';
 import type { TreeNode } from './buildTree';
 interface Props {
     rootNode: TreeNode;
-    selections: string[];
+    nodeMap: Record<string, TreeNode | undefined>;
+    dragElement?: HTMLElement;
     onSelectionChange?: (event: tree.SelectionChangeDetails) => void;
-    onDragStart?: (event: MouseEvent) => void;
-    onDragEnd?: (event: MouseEvent) => void;
 }
-declare const Tree: import("svelte").Component<Props, {}, "">;
+declare const Tree: import("svelte").Component<Props, {}, "dragElement">;
 type Tree = ReturnType<typeof Tree>;
 export default Tree;