@viamrobotics/motion-tools 0.19.2 → 1.0.2

package/dist/components/LiveUpdatesBanner.svelte

@@ -1,39 +1,75 @@
 <script lang="ts">
+	import { Button, Icon } from '@viamrobotics/prime-core'
 	import { usePartConfig } from '../hooks/usePartConfig.svelte'
 
 	const partConfig = usePartConfig()
 
 	const { ...rest } = $props()
+
+	const isMacDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform)
+	const iconName = isMacDevice ? ('apple-keyboard-command' as const) : ('chevron-up' as const)
+	const iconLabel = isMacDevice ? 'command' : 'control'
 </script>
 
+<svelte:window
+	onkeydown={(event) => {
+		if (event.metaKey) {
+			if (event.key.toLowerCase() === 's') {
+				event.preventDefault()
+				event.stopImmediatePropagation()
+				partConfig.saveLocalPartConfig()
+			}
+		}
+	}}
+/>
+
 {#if partConfig.isDirty}
 	<div
-		class="absolute bottom-8 z-1000 flex w-full justify-center gap-2"
+		class="absolute bottom-8 z-10 flex w-full justify-center gap-2"
 		{...rest}
 	>
 		<div
-			class="flex flex-col items-start rounded border-l-4 border-yellow-600 bg-yellow-50 px-4 py-2"
+			class="flex items-center gap-8 rounded border-l-4 border-yellow-600 bg-yellow-50 px-4 py-2 shadow-2xl"
 		>
-			<p>
-				<strong>Live updates paused</strong>
-			</p>
+			<div class="flex flex-col">
+				<p class="text-sm">
+					<strong>Live updates paused</strong>
+				</p>
 
-			<p class="text-sm">
-				<button
+				<p class="text-subtle-2 text-sm">You are currently viewing a snapshot while editing.</p>
+			</div>
+
+			<div class="flex gap-2">
+				<Button
 					class="cursor-pointer text-blue-600"
 					onclick={() => {
-						partConfig.saveLocalPartConfig()
-					}}>Save</button
+						partConfig.resetLocalPartConfig()
+					}}
 				>
-				or
-				<button
+					Discard
+				</Button>
+
+				<Button
+					variant="dark"
+					aria-label="Save"
 					class="cursor-pointer text-blue-600"
 					onclick={() => {
-						partConfig.resetLocalPartConfig()
-					}}>Discard</button
+						partConfig.saveLocalPartConfig()
+					}}
 				>
-				to resume.
-			</p>
+					<div class="flex gap-2">
+						Save
+						<div class="font-roboto-mono text-disabled flex items-center">
+							<Icon
+								name={iconName}
+								size="xs"
+							/>
+							<span class="sr-only">{iconLabel}</span>
+							<span>S</span>
+						</div>
+					</div>
+				</Button>
+			</div>
 		</div>
 	</div>
 {/if}

package/dist/components/MeasureTool.svelte

@@ -2,15 +2,14 @@
 	import { untrack } from 'svelte'
 	import { Vector3, type Intersection } from 'three'
 	import { T } from '@threlte/core'
-	import { HTML, MeshLineGeometry, MeshLineMaterial } from '@threlte/extras'
+	import { HTML, MeshLineGeometry, MeshLineMaterial, Portal } from '@threlte/extras'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import Button from './dashboard/Button.svelte'
-	import Portal from './portal/Portal.svelte'
 	import DotSprite from './DotSprite.svelte'
 	import { useMouseRaycaster } from '../hooks/useMouseRaycaster.svelte'
-	import { useFocused } from '../hooks/useSelection.svelte'
+	import { useFocusedEntity } from '../hooks/useSelection.svelte'
 
-	const focus = useFocused()
+	const focusedEntity = useFocusedEntity()
 	const settings = useSettings()
 
 	const htmlPosition = new Vector3()
@@ -55,7 +54,7 @@
 
 	$effect(() => {
 		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-		;(focus.current, enabled)
+		;(focusedEntity.current, enabled)
 		untrack(() => clear())
 	})
 </script>

package/dist/components/Pointcloud.svelte

@@ -7,25 +7,29 @@
 		OrthographicCamera,
 	} from 'three'
 	import { T, useTask, useThrelte } from '@threlte/core'
-	import type { PointsGeometry, WorldObject } from '../WorldObject.svelte'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
 	import { poseToObject3d } from '../transform'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import type { Snippet } from 'svelte'
+	import type { Entity } from 'koota'
+	import { traits, useTrait } from '../ecs'
 
 	interface Props {
-		object: WorldObject<PointsGeometry>
+		entity: Entity
 		children?: Snippet
 	}
 
-	let { object, children }: Props = $props()
+	let { entity, children }: Props = $props()
 
 	const { camera } = useThrelte()
 	const settings = useSettings()
 
-	const colors = $derived(object.metadata.colors)
-	const pointSize = $derived(object.metadata.pointSize ?? settings.current.pointSize)
-	const positions = $derived(object.geometry?.geometryType?.value ?? new Float32Array())
+	const name = useTrait(() => entity, traits.Name)
+	const pose = useTrait(() => entity, traits.Pose)
+	const positions = useTrait(() => entity, traits.PointsGeometry)
+	const color = useTrait(() => entity, traits.Color)
+	const colors = useTrait(() => entity, traits.VertexColors)
+	const pointSize = $derived(settings.current.pointSize)
 	const orthographic = $derived(settings.current.cameraMode === 'orthographic')
 
 	const points = new Points()
@@ -38,27 +42,37 @@
 	})
 
 	$effect.pre(() => {
-		material.color.set(colors ? 0xffffff : (object.metadata.color ?? settings.current.pointColor))
+		if (colors) {
+			material.color.set(0xffffff)
+		} else if (color.current) {
+			material.color.setRGB(color.current.r, color.current.g, color.current.b)
+		} else {
+			material.color.set(settings.current.pointColor)
+		}
 	})
 
 	$effect.pre(() => {
-		geometry.setAttribute('position', new BufferAttribute(positions, 3))
+		if (positions.current) {
+			geometry.setAttribute('position', new BufferAttribute(positions.current, 3))
+		}
 	})
 
 	$effect.pre(() => {
 		material.vertexColors = colors !== undefined
 
-		if (colors) {
-			geometry.setAttribute('color', new BufferAttribute(colors, 3))
+		if (colors.current) {
+			geometry.setAttribute('color', new BufferAttribute(colors.current, 3))
 			geometry.attributes.color.needsUpdate = true
 		}
 	})
 
 	$effect.pre(() => {
-		poseToObject3d(object.pose, points)
+		if (pose.current) {
+			poseToObject3d(pose.current, points)
+		}
 	})
 
-	const events = useObjectEvents(() => object.uuid)
+	const events = useObjectEvents(() => entity)
 
 	const { start, stop } = useTask(
 		() => {
@@ -84,8 +98,7 @@
 
 <T
 	is={points}
-	name={object.name}
-	uuid={object.uuid}
+	name={name.current}
 	{...events}
 	bvh={{ maxDepth: 40, maxLeafTris: 20 }}
 >

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}