@viamrobotics/motion-tools 1.13.0 → 1.14.0

package/dist/components/Entities/Mesh.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { T, useThrelte, type Props as ThrelteProps } from '@threlte/core'
+	import { type Snippet } from 'svelte'
+	import { BufferGeometry, Color, DoubleSide, FrontSide, Mesh } from 'three'
+	import { CapsuleGeometry } from '../../three/CapsuleGeometry'
+	import { colors, darkenColor } from '../../color'
+	import AxesHelper from '../AxesHelper.svelte'
+	import type { Entity } from 'koota'
+	import { traits, useTrait } from '../../ecs'
+	import { poseToObject3d } from '../../transform'
+	import type { Pose } from '@viamrobotics/sdk'
+
+	interface Props extends ThrelteProps<Mesh> {
+		entity: Entity
+		color?: string
+		center?: Pose
+		children?: Snippet
+	}
+
+	let { entity, color: overrideColor, center, children, ...rest }: Props = $props()
+
+	const colorUtil = new Color()
+
+	const { invalidate } = useThrelte()
+	const name = useTrait(() => entity, traits.Name)
+	const entityColor = useTrait(() => entity, traits.Color)
+	const opacity = useTrait(() => entity, traits.Opacity)
+	const box = useTrait(() => entity, traits.Box)
+	const capsule = useTrait(() => entity, traits.Capsule)
+	const sphere = useTrait(() => entity, traits.Sphere)
+	const bufferGeometry = useTrait(() => entity, traits.BufferGeometry)
+	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
+	const materialProps = useTrait(() => entity, traits.Material)
+	const renderOrder = useTrait(() => entity, traits.RenderOrder)
+
+	const color = $derived.by(() => {
+		if (overrideColor) {
+			return overrideColor
+		}
+
+		if (entityColor.current) {
+			return colorUtil.setRGB(entityColor.current.r, entityColor.current.g, entityColor.current.b)
+		}
+
+		return colors.default
+	})
+
+	const mesh = new Mesh()
+
+	$effect.pre(() => {
+		if (center) {
+			poseToObject3d(center, mesh)
+			invalidate()
+		}
+	})
+
+	let geo = $state.raw<BufferGeometry>()
+
+	const oncreate = (bufferGeometry: BufferGeometry) => {
+		geo = bufferGeometry
+	}
+</script>
+
+<T
+	is={mesh}
+	name={entity}
+	userData.name={name}
+	renderOrder={renderOrder.current}
+	{...rest}
+>
+	{#if box.current}
+		{@const { x, y, z } = box.current ?? { x: 0, y: 0, z: 0 }}
+		<T.BoxGeometry
+			args={[x * 0.001, y * 0.001, z * 0.001]}
+			{oncreate}
+		/>
+	{:else if sphere.current}
+		{@const { r } = sphere.current ?? { r: 0 }}
+		<T.SphereGeometry
+			args={[r * 0.001]}
+			{oncreate}
+		/>
+	{:else if capsule.current}
+		{@const { r, l } = capsule.current ?? { r: 0, l: 0 }}
+		<T
+			is={CapsuleGeometry}
+			args={[r * 0.001, l * 0.001]}
+			{oncreate}
+		/>
+	{:else if bufferGeometry.current}
+		<T
+			is={bufferGeometry.current}
+			{oncreate}
+		/>
+	{/if}
+
+	{@const currentOpacity = opacity.current ?? 0.7}
+	<T.MeshToonMaterial
+		{color}
+		side={bufferGeometry.current ? DoubleSide : FrontSide}
+		transparent={currentOpacity < 1}
+		depthWrite={currentOpacity === 1}
+		opacity={currentOpacity}
+		depthTest={materialProps.current?.depthTest ?? true}
+	/>
+
+	<!-- 
+		TODO(mp) currently some bufferGeometries are coming in empty, 
+		this is a quick fix but this should be handled upstream
+	-->
+	{#if geo && geo.getAttribute('position').array.length > 0}
+		<T.LineSegments
+			raycast={() => null}
+			bvh={{ enabled: false }}
+		>
+			<T.EdgesGeometry args={[geo, 0]} />
+			<T.LineBasicMaterial color={darkenColor(color, 10)} />
+		</T.LineSegments>
+	{/if}
+
+	{@render children?.()}
+</T>
+
+{#if showAxesHelper.current}
+	<AxesHelper
+		name={entity}
+		width={3}
+		length={0.1}
+	/>
+{/if}

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

@@ -0,0 +1,4 @@
+import { Mesh } from 'three';
+declare const Mesh: any;
+type Mesh = ReturnType<typeof Mesh>;
+export default Mesh;

package/dist/components/{Points.svelte → Entities/Points.svelte}

@@ -2,12 +2,12 @@
 	import { Points, PointsMaterial, OrthographicCamera } from 'three'
 	import { T, useTask, useThrelte } from '@threlte/core'
 	import { Portal } from '@threlte/extras'
-	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
-	import { poseToObject3d } from '../transform'
-	import { useSettings } from '../hooks/useSettings.svelte'
+	import { useEntityEvents } from './hooks/useEntityEvents.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'
+	import { traits, useTrait } from '../../ecs'
 
 	interface Props {
 		entity: Entity
@@ -93,7 +93,7 @@
 		}
 	})
 
-	const events = useObjectEvents(() => entity)
+	const events = useEntityEvents(() => entity)
 
 	const { start, stop } = useTask(
 		() => {

package/dist/components/{Pose.svelte → Entities/Pose.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { traits, useTrait } from '../ecs'
-	import { usePose } from '../hooks/usePose.svelte'
-	import { matrixToPose, poseToMatrix } from '../transform'
+	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'

package/dist/{hooks/useObjectEvents.svelte.d.ts → components/Entities/hooks/useEntityEvents.svelte.d.ts}

@@ -1,6 +1,6 @@
 import { type IntersectionEvent } from '@threlte/extras';
 import type { Entity } from 'koota';
-export declare const useObjectEvents: (entity: () => Entity | undefined) => {
+export declare const useEntityEvents: (entity: () => Entity | undefined) => {
     readonly visible: boolean;
     onpointerenter: (event: IntersectionEvent<MouseEvent>) => void;
     onpointermove: (event: IntersectionEvent<MouseEvent>) => void;

package/dist/{hooks/useObjectEvents.svelte.js → components/Entities/hooks/useEntityEvents.svelte.js}

@@ -1,11 +1,11 @@
 import { useCursor } from '@threlte/extras';
-import { useFocusedEntity, useSelectedEntity } from './useSelection.svelte';
-import { useVisibility } from './useVisibility.svelte';
+import { useFocusedEntity, useSelectedEntity } from '../../../hooks/useSelection.svelte';
+import { useVisibility } from '../../../hooks/useVisibility.svelte';
 import { Vector2 } from 'three';
-import { traits } from '../ecs';
-import { updateHoverInfo } from '../HoverUpdater.svelte';
-import { createPose, matrixToPose, poseToMatrix } from '../transform';
-export const useObjectEvents = (entity) => {
+import { traits } from '../../../ecs';
+import { updateHoverInfo } from '../../../HoverUpdater.svelte';
+import { createPose, matrixToPose, poseToMatrix } from '../../../transform';
+export const useEntityEvents = (entity) => {
     const down = new Vector2();
     const selectedEntity = useSelectedEntity();
     const focusedEntity = useFocusedEntity();

package/dist/components/FileDrop/file-names.js

@@ -26,13 +26,14 @@ const hasPrefix = (name) => {
 };
 const validatePrefix = (extension, prefix) => {
     switch (prefix) {
-        case Prefixes.Snapshot:
+        case Prefixes.Snapshot: {
             if (extension !== Extensions.JSON &&
                 extension !== Extensions.PB &&
                 extension !== Extensions.PB_GZ) {
                 return new FileNameError(`Only ${Extensions.JSON}, ${Extensions.PB} and ${Extensions.PB_GZ} snapshot files are supported.`);
             }
             break;
+        }
     }
     return undefined;
 };
@@ -76,12 +77,14 @@ export const readFile = (file, reader, extension) => {
     if (!extension)
         return;
     switch (extension) {
-        case Extensions.JSON:
+        case Extensions.JSON: {
             return reader.readAsText(file);
+        }
         case Extensions.PCD:
         case Extensions.PLY:
         case Extensions.PB:
-        case Extensions.PB_GZ:
+        case Extensions.PB_GZ: {
             return reader.readAsArrayBuffer(file);
+        }
     }
 };

package/dist/components/FileDrop/snapshot-dropper.js

@@ -81,16 +81,20 @@ const decodeGzip = async (params) => {
 };
 export const snapshotDropper = async (params) => {
     switch (params.extension) {
-        case 'json':
+        case 'json': {
             return decodeJson(params);
-        case 'pb':
+        }
+        case 'pb': {
             return decodeBinary(params);
-        case 'pb.gz':
+        }
+        case 'pb.gz': {
             return decodeGzip(params);
-        default:
+        }
+        default: {
             return {
                 success: false,
                 error: new FileDropperError(`Only ${Extensions.JSON}, ${Extensions.PB} and ${Extensions.PB_GZ} snapshot files are supported.`),
             };
+        }
     }
 };

package/dist/components/FileDrop/useFileDrop.svelte.js

@@ -4,14 +4,17 @@ import { plyDropper } from './ply-dropper';
 import { snapshotDropper } from './snapshot-dropper';
 const createFileDropper = (extension, prefix) => {
     switch (prefix) {
-        case Prefixes.Snapshot:
+        case Prefixes.Snapshot: {
             return snapshotDropper;
+        }
     }
     switch (extension) {
-        case Extensions.PCD:
+        case Extensions.PCD: {
             return pcdDropper;
-        case Extensions.PLY:
+        }
+        case Extensions.PLY: {
             return plyDropper;
+        }
     }
     return undefined;
 };
@@ -74,11 +77,11 @@ export const useFileDrop = (onSuccess, onError) => {
                     prefix,
                     content,
                 });
-                if (!result.success) {
-                    handleError(result.error.message);
+                if (result.success) {
+                    onSuccess(result);
                 }
                 else {
-                    onSuccess(result);
+                    handleError(result.error.message);
                 }
             });
             readFile(file, reader, extension);

package/dist/components/Lasso/Lasso.svelte

@@ -245,16 +245,16 @@
 	}
 
 	$effect(() => {
-		window.addEventListener('keydown', onkeydown)
-		window.addEventListener('keyup', onkeyup)
+		globalThis.addEventListener('keydown', onkeydown)
+		globalThis.addEventListener('keyup', onkeyup)
 		dom.addEventListener('pointerdown', onpointerdown)
 		dom.addEventListener('pointermove', onpointermove)
 		dom.addEventListener('pointerup', onpointerup)
 		dom.addEventListener('pointerleave', onpointerleave)
 
 		return () => {
-			window.removeEventListener('keydown', onkeydown)
-			window.removeEventListener('keyup', onkeyup)
+			globalThis.removeEventListener('keydown', onkeydown)
+			globalThis.removeEventListener('keyup', onkeyup)
 			dom.removeEventListener('pointerdown', onpointerdown)
 			dom.removeEventListener('pointermove', onpointermove)
 			dom.removeEventListener('pointerup', onpointerup)

package/dist/components/PCD.svelte

@@ -2,13 +2,15 @@
 	import { parsePcdInWorker } from '../lib'
 	import { traits, useWorld } from '../ecs'
 	import { createBufferGeometry } from '../attribute'
-	import type { Entity } from 'koota'
+	import type { ConfigurableTrait, Entity } from 'koota'
 
 	interface Props {
 		data: Uint8Array
+		name?: string
+		renderOrder?: number
 	}
 
-	let { data }: Props = $props()
+	let { data, name, renderOrder }: Props = $props()
 
 	const world = useWorld()
 
@@ -18,11 +20,17 @@
 		parsePcdInWorker(data).then(({ positions, colors }) => {
 			const geometry = createBufferGeometry(positions, colors)
 
-			entity = world.spawn(
-				traits.Name('Random points'),
+			const entityTraits: ConfigurableTrait[] = [
+				traits.Name(name ?? 'Random points'),
 				traits.Points,
-				traits.BufferGeometry(geometry)
-			)
+				traits.BufferGeometry(geometry),
+			]
+
+			if (renderOrder) {
+				entityTraits.push(traits.RenderOrder(renderOrder))
+			}
+
+			entity = world.spawn(...entityTraits)
 		})
 
 		return () => {

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

@@ -1,5 +1,7 @@
 interface Props {
     data: Uint8Array;
+    name?: string;
+    renderOrder?: number;
 }
 declare const PCD: import("svelte").Component<Props, {}, "">;
 type PCD = ReturnType<typeof PCD>;

package/dist/components/Scene.svelte

@@ -2,7 +2,7 @@
 	import { ShaderMaterial, Vector3 } from 'three'
 	import { T } from '@threlte/core'
 	import { Environment, Grid, interactivity, PerfMonitor, PortalTarget } from '@threlte/extras'
-	import Entities from './Entities.svelte'
+	import Entities from './Entities/Entities.svelte'
 	import Selected from './Selected.svelte'
 	import Focus from './Focus.svelte'
 	import StaticGeometries from './StaticGeometries.svelte'
@@ -17,7 +17,6 @@
 	import MeasureTool from './MeasureTool/MeasureTool.svelte'
 	import PointerMissBox from './PointerMissBox.svelte'
 	import BatchedArrows from './BatchedArrows.svelte'
-	import Arrows from './Arrows/ArrowGroups.svelte'
 	import hdrImage from '../assets/ferndale_studio_11_1k.hdr'
 
 	interface Props {
@@ -103,7 +102,6 @@
 
 		<Entities />
 		<BatchedArrows />
-		<Arrows />
 	</T.Group>
 
 	{@render children?.()}

package/dist/components/Selected.svelte

@@ -46,6 +46,8 @@
 				selectedObject3d.current?.getWorldPosition(object.position)
 				selectedObject3d.current?.getWorldQuaternion(object.quaternion)
 				obbHelper.setFromObject(object)
+			} else {
+				obbHelper.setFromObject(object)
 			}
 
 			invalidate()

package/dist/components/StaticGeometries.svelte

@@ -12,7 +12,7 @@
 	import { PressedKeys } from 'runed'
 	import { quaternionToPose, vector3ToPose } from '../transform'
 	import { Quaternion, Vector3 } from 'three'
-	import Frame from './Frame.svelte'
+	import Frame from './Entities/Frame.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import { useWorld, traits } from '../ecs'
 	import type { Entity } from 'koota'

package/dist/components/overlay/AddRelationship.svelte

@@ -17,7 +17,7 @@
 		return allEntities.current
 			.map((e: Entity) => e.get(traits.Name))
 			.filter((n: string | undefined): n is string => n !== undefined && n !== currentEntityName)
-			.sort()
+			.toSorted()
 	})
 
 	let showRelationshipOptions = $state(false)

package/dist/components/overlay/LiveUpdatesBanner.svelte

@@ -13,12 +13,10 @@
 
 <svelte:window
 	onkeydown={(event) => {
-		if (event.metaKey) {
-			if (event.key.toLowerCase() === 's') {
-				event.preventDefault()
-				event.stopImmediatePropagation()
-				partConfig.save()
-			}
+		if (event.metaKey && event.key.toLowerCase() === 's') {
+			event.preventDefault()
+			event.stopImmediatePropagation()
+			partConfig.save()
 		}
 	}}
 />

package/dist/components/overlay/left-pane/buildTree.js

@@ -1,4 +1,7 @@
 import { traits } from '../../../ecs';
+function sortNodes(nodes) {
+    nodes.sort((a, b) => a.entity.get(traits.Name)?.localeCompare(b.entity.get(traits.Name) ?? '') ?? 0);
+}
 /**
  * Creates a tree representing parent child / relationships from a set of frames.
  */
@@ -29,5 +32,17 @@ export const buildTreeNodes = (entities) => {
             }
         }
     }
+    for (const node of rootNodes) {
+        if (!node.children)
+            continue;
+        sortNodes(node.children);
+    }
+    for (const node of childNodes) {
+        if (!node.children)
+            continue;
+        sortNodes(node.children);
+    }
+    sortNodes(rootNodes);
+    sortNodes(childNodes);
     return { rootNodes, nodeMap };
 };

package/dist/components/overlay/settings/Settings.svelte

@@ -285,19 +285,17 @@
 				<Switch
 					on={isWidgetOpen}
 					on:change={(event) => {
-						if (event.detail) {
-							settings.current.openCameraWidgets = {
-								...settings.current.openCameraWidgets,
-								[partID.current]: [...currentRobotCameraWidgets, camera.name],
-							}
-						} else {
-							settings.current.openCameraWidgets = {
-								...settings.current.openCameraWidgets,
-								[partID.current]: currentRobotCameraWidgets.filter(
-									(widget) => widget !== camera.name
-								),
-							}
-						}
+						settings.current.openCameraWidgets = event.detail
+							? {
+									...settings.current.openCameraWidgets,
+									[partID.current]: [...currentRobotCameraWidgets, camera.name],
+								}
+							: {
+									...settings.current.openCameraWidgets,
+									[partID.current]: currentRobotCameraWidgets.filter(
+										(widget) => widget !== camera.name
+									),
+								}
 					}}
 				/>
 			</div>

package/dist/components/overlay/widgets/Camera.svelte

@@ -31,12 +31,14 @@
 	let fpsInterval: ReturnType<typeof setInterval> | undefined
 	let fpsCounterActive = false
 
+	const cleanup = () => {
+		if (fpsInterval) clearInterval(fpsInterval)
+		fpsCounterActive = false
+	}
+
 	// Cleanup on destroy
 	$effect(() => {
-		return () => {
-			if (fpsInterval) clearInterval(fpsInterval)
-			fpsCounterActive = false
-		}
+		return cleanup
 	})
 
 	const onMediaLoad = (e: Event) => {
@@ -89,8 +91,8 @@
 					resolutions = options.map((opt) => ({ width: opt.width, height: opt.height }))
 					isLoading = false
 				})
-				.catch((e) => {
-					error = e instanceof Error ? e.message : 'Failed to get stream options'
+				.catch((error_) => {
+					error = error_ instanceof Error ? error_.message : 'Failed to get stream options'
 					isLoading = false
 				})
 		}
@@ -101,13 +103,13 @@
 		if (!target.value || !streamClient) return
 
 		const [w, h] = target.value.split('x').map(Number)
-		if (isNaN(w) || isNaN(h)) return
+		if (Number.isNaN(w) || Number.isNaN(h)) return
 
 		try {
 			await streamClient.setOptions(name, w, h)
 			error = undefined
-		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to set resolution'
+		} catch (error_) {
+			error = error_ instanceof Error ? error_.message : 'Failed to set resolution'
 		}
 	}
 </script>