@viamrobotics/motion-tools 0.19.2 → 1.0.3

package/dist/three/CapsuleGeometry.js

@@ -6,7 +6,9 @@ import { LatheGeometry, Path } from 'three';
  */
 export class CapsuleGeometry extends LatheGeometry {
     type = 'CapsuleGeometry';
-    constructor(radius = 1, length = 1, capSegments = 4, radialSegments = 8) {
+    constructor(r = 1, l = 1, capSegments = 4, radialSegments = 8) {
+        const radius = Math.max(0.0001, r);
+        const length = Math.max(0.0001, l);
         const path = new Path();
         const midsectionLength = length - 2 * radius;
         path.absarc(0, -midsectionLength / 2, radius, Math.PI * 1.5, 0);

package/dist/transform.js

@@ -83,21 +83,6 @@ export const poseToDirection = (pose) => {
     ov.set(pose.oX, pose.oY, pose.oZ, MathUtils.degToRad(pose.theta));
     return new Vector3(ov.x, ov.y, ov.z);
 };
-export const scaleToDimensions = (scale, geometry) => {
-    if (geometry.case === 'box') {
-        geometry.value.dimsMm ??= { x: 0, y: 0, z: 0 };
-        geometry.value.dimsMm.x *= scale.x;
-        geometry.value.dimsMm.y *= scale.y;
-        geometry.value.dimsMm.z *= scale.z;
-    }
-    else if (geometry.case === 'capsule') {
-        geometry.value.radiusMm *= scale.x;
-        geometry.value.lengthMm *= scale.y;
-    }
-    else if (geometry.case === 'sphere') {
-        geometry.value.radiusMm *= scale.x;
-    }
-};
 export const poseToMatrix = (pose) => {
     ov.set(pose.oX, pose.oY, pose.oZ, MathUtils.degToRad(pose.theta));
     ov.toQuaternion(quaternion);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.19.2",
+  "version": "1.0.3",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -24,14 +24,15 @@
     "@tailwindcss/vite": "4.1.13",
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/svelte": "5.2.8",
+    "@testing-library/user-event": "^14.6.1",
     "@thi.ng/paths": "5.2.21",
-    "@threlte/core": "8.1.5",
-    "@threlte/extras": "9.5.4",
-    "@threlte/rapier": "3.1.5",
+    "@threlte/core": "8.3.0",
+    "@threlte/extras": "9.7.0",
+    "@threlte/rapier": "3.2.0",
     "@threlte/xr": "1.0.8",
     "@types/bun": "1.2.21",
     "@types/lodash-es": "4.17.12",
-    "@types/three": "0.179.0",
+    "@types/three": "0.181.0",
     "@typescript-eslint/eslint-plugin": "8.42.0",
     "@typescript-eslint/parser": "8.42.0",
     "@viamrobotics/prime-core": "0.1.5",
@@ -48,6 +49,7 @@
     "globals": "16.3.0",
     "idb-keyval": "6.2.2",
     "jsdom": "26.1.0",
+    "koota": "^0.5.3",
     "lodash-es": "4.17.21",
     "lucide-svelte": "0.542.0",
     "prettier": "3.6.2",
@@ -55,11 +57,11 @@
     "prettier-plugin-tailwindcss": "0.6.14",
     "publint": "0.3.12",
     "runed": "0.31.1",
-    "svelte": "5.43.0",
+    "svelte": "5.45.9",
     "svelte-check": "4.3.1",
     "svelte-virtuallists": "1.4.2",
     "tailwindcss": "4.1.13",
-    "three": "0.180.0",
+    "three": "0.182.0",
     "three-mesh-bvh": "^0.9.1",
     "threlte-uikit": "1.2.1",
     "tsx": "4.20.5",
@@ -117,6 +119,8 @@
     "!dist/**/*.spec.*"
   ],
   "dependencies": {
+    "@bufbuild/protobuf": "1.10.1",
+    "@neodrag/svelte": "^2.3.3",
     "@tanstack/svelte-query-devtools": "^6.0.2",
     "uuid-tool": "^2.0.3"
   },
@@ -130,9 +134,11 @@
     "lint": "prettier --check . && eslint .",
     "test:unit": "vitest",
     "test:client": "go test ./client/... -count=1",
+    "test:draw": "go test ./draw/... -count=1",
     "test": "pnpm test:unit -- --run",
     "test:coverage": "npx vitest run --coverage",
     "test:e2e": "playwright test",
+    "test:e2e-ui": "playwright test --ui",
     "model-pipeline:run": "node scripts/model-pipeline.js",
     "release": "changeset publish"
   }

package/dist/components/FileDrop.svelte

@@ -1,158 +0,0 @@
-<script lang="ts">
-	import { useDrawAPI } from '../hooks/useDrawAPI.svelte'
-	import { parsePcdInWorker, WorldObject } from '../lib'
-	import { useToast, ToastVariant } from '@viamrobotics/prime-core'
-	import { PLYLoader } from 'three/examples/jsm/Addons.js'
-
-	let { ...rest } = $props()
-
-	const { addPoints, addMesh } = useDrawAPI()
-
-	type DropStates = 'inactive' | 'hovering' | 'loading'
-
-	let dropState = $state<DropStates>('inactive')
-
-	// prevent default to allow drop
-	const ondragenter = (event: DragEvent) => {
-		event.preventDefault()
-		dropState = 'hovering'
-	}
-
-	// prevent default to allow drop
-	const ondragover = (event: DragEvent) => {
-		event.preventDefault()
-	}
-
-	const ondragleave = (event: DragEvent) => {
-		// only deactivate if really leaving the window
-		if (event.relatedTarget === null) {
-			dropState = 'inactive'
-		}
-	}
-
-	const toast = useToast()
-
-	const extensions = {
-		PCD: 'pcd',
-		PLY: 'ply',
-	}
-	const supportedFiles = [extensions.PCD, extensions.PLY]
-
-	const ondrop = (event: DragEvent) => {
-		event.preventDefault()
-
-		if (event.dataTransfer === null) {
-			return
-		}
-
-		let completed = 0
-
-		const { files } = event.dataTransfer
-
-		for (const file of files) {
-			const ext = file.name.split('.').at(-1)
-
-			if (!ext) {
-				toast({
-					message: `Could not determine file extension.`,
-					variant: ToastVariant.Danger,
-				})
-
-				continue
-			}
-
-			if (!supportedFiles.includes(ext)) {
-				toast({
-					message: `Only ${supportedFiles.map((file) => `.${file}`).join(', ')} files are supported.`,
-					variant: ToastVariant.Danger,
-				})
-
-				continue
-			}
-
-			const reader = new FileReader()
-
-			reader.addEventListener('loadend', () => {
-				completed += 1
-
-				if (completed === files.length) {
-					dropState = 'inactive'
-				}
-			})
-
-			reader.addEventListener('error', () => {
-				toast({
-					message: `${file.name} failed to load.`,
-					variant: ToastVariant.Danger,
-				})
-			})
-
-			reader.addEventListener('load', async (event) => {
-				const arrayBuffer = event.target?.result
-
-				if (!arrayBuffer || typeof arrayBuffer === 'string') {
-					toast({
-						message: `${file.name} failed to load.`,
-						variant: ToastVariant.Danger,
-					})
-
-					return
-				}
-
-				if (ext === extensions.PCD) {
-					const result = await parsePcdInWorker(new Uint8Array(arrayBuffer))
-
-					addPoints(
-						new WorldObject(
-							file.name,
-							undefined,
-							undefined,
-							{
-								center: undefined,
-								geometryType: {
-									case: 'points',
-									value: result.positions,
-								},
-							},
-							result.colors ? { colors: result.colors } : undefined
-						)
-					)
-
-					toast({ message: `Loaded ${file.name}`, variant: ToastVariant.Success })
-				} else if (ext === extensions.PLY) {
-					const result = new PLYLoader().parse(arrayBuffer)
-					const worldObject = new WorldObject(file.name, undefined, undefined, {
-						center: undefined,
-						geometryType: { case: 'bufferGeometry', value: result },
-					})
-
-					addMesh(worldObject)
-
-					toast({ message: `Loaded ${file.name}`, variant: ToastVariant.Success })
-				}
-			})
-
-			reader.readAsArrayBuffer(file)
-
-			dropState = 'loading'
-		}
-	}
-</script>
-
-<svelte:window
-	{ondragenter}
-	{ondragleave}
-	{ondragover}
-/>
-
-<div
-	class={{
-		'fixed inset-0 z-9999 ': true,
-		'pointer-events-none': dropState === 'inactive',
-		'bg-black/10': dropState !== 'inactive',
-	}}
-	role="region"
-	aria-label="File drop zone"
-	{ondrop}
-	{...rest}
-></div>

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

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

package/dist/components/WorldObject.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { T, type Props as ThrelteProps } from '@threlte/core'
-	import type { Snippet } from 'svelte'
-	import type { Object3D } from 'three'
-	import type { WorldObject } from '../WorldObject.svelte'
-	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
-
-	interface Props extends ThrelteProps<Object3D> {
-		object: WorldObject
-		children?: Snippet
-	}
-
-	let { object, children, ...rest }: Props = $props()
-
-	const objectProps = useObjectEvents(() => object.uuid)
-</script>
-
-{#if object.metadata.gltf?.scene}
-	<T
-		is={object.metadata.gltf.scene}
-		uuid={object.uuid}
-		name={object.name}
-		{...objectProps}
-		{...rest}
-	>
-		{@render children?.()}
-	</T>
-{/if}

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

@@ -1,11 +0,0 @@
-import { type Props as ThrelteProps } from '@threlte/core';
-import type { Snippet } from 'svelte';
-import type { Object3D } from 'three';
-import type { WorldObject } from '../WorldObject.svelte';
-interface Props extends ThrelteProps<Object3D> {
-    object: WorldObject;
-    children?: Snippet;
-}
-declare const WorldObject: import("svelte").Component<Props, {}, "">;
-type WorldObject = ReturnType<typeof WorldObject>;
-export default WorldObject;

package/dist/components/WorldObjects.svelte

@@ -1,159 +0,0 @@
-<script lang="ts">
-	import { T } from '@threlte/core'
-	import { Portal, PortalTarget } from './portal'
-	import { useFrames } from '../hooks/useFrames.svelte'
-	import { useGeometries } from '../hooks/useGeometries.svelte'
-	import { usePointClouds } from '../hooks/usePointclouds.svelte'
-	import { useDrawAPI } from '../hooks/useDrawAPI.svelte'
-	import { useWorldStates } from '../hooks/useWorldState.svelte'
-	import { useArrows } from '../hooks/useArrows.svelte'
-	import Pose from './Pose.svelte'
-	import Frame from './Frame.svelte'
-	import Line from './Line.svelte'
-	import Pointcloud from './Pointcloud.svelte'
-	import Model from './WorldObject.svelte'
-	import Label from './Label.svelte'
-	import WorldState from './WorldState.svelte'
-	import { determinePose } from '../WorldObject.svelte'
-	import { useWeblabs } from '../hooks/useWeblabs.svelte'
-	import type { WorldObject } from '../WorldObject.svelte'
-	import type { Pose as ViamPose } from '@viamrobotics/sdk'
-	import { WEBLABS_EXPERIMENTS } from '../hooks/useWeblabs.svelte'
-	const points = usePointClouds()
-	const drawAPI = useDrawAPI()
-	const frames = useFrames()
-	const geometries = useGeometries()
-	const worldStates = useWorldStates()
-	const batchedArrow = useArrows()
-	const weblabs = useWeblabs()
-
-	const weblabedDeterminePose = (object: WorldObject, pose: ViamPose | undefined) => {
-		if (weblabs.isActive(WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME)) {
-			return determinePose(object, pose)
-		}
-		return pose ?? object.pose
-	}
-</script>
-
-{#each frames.current as object (object.uuid)}
-	<Pose
-		name={object.name}
-		parent={object.referenceFrame}
-	>
-		{#snippet children({ pose })}
-			{@const framePose = weblabedDeterminePose(object, pose)}
-			<Portal id={object.referenceFrame}>
-				<Frame
-					uuid={object.uuid}
-					name={object.name}
-					pose={framePose}
-					geometry={object.geometry}
-					metadata={object.metadata}
-				>
-					<PortalTarget id={object.name} />
-					<Label text={object.name} />
-				</Frame>
-			</Portal>
-		{/snippet}
-	</Pose>
-{/each}
-
-{#each geometries.current as object (object.uuid)}
-	<Portal id={object.referenceFrame}>
-		<Frame
-			uuid={object.uuid}
-			name={object.name}
-			pose={object.pose}
-			geometry={object.geometry}
-			metadata={object.metadata}
-		>
-			<PortalTarget id={object.name} />
-			<Label text={object.name} />
-		</Frame>
-	</Portal>
-{/each}
-
-{#each worldStates.names as { name } (name)}
-	<WorldState worldObjects={worldStates.current[name].worldObjects} />
-{/each}
-
-{#each points.current as object (object.uuid)}
-	<Portal id={object.referenceFrame}>
-		<Pointcloud {object}>
-			<Label text={object.name} />
-		</Pointcloud>
-	</Portal>
-{/each}
-
-{#each drawAPI.frames as object (object.uuid)}
-	<Portal id={object.referenceFrame}>
-		<Frame
-			uuid={object.uuid}
-			name={object.name}
-			pose={object.pose}
-			geometry={object.geometry}
-			metadata={object.metadata}
-		>
-			<PortalTarget id={object.name} />
-			<Label text={object.name} />
-		</Frame>
-	</Portal>
-{/each}
-
-{#each drawAPI.points as object (object.uuid)}
-	<Portal id={object.referenceFrame}>
-		<Pointcloud {object}>
-			<Label text={object.name} />
-		</Pointcloud>
-	</Portal>
-{/each}
-
-<T
-	name={batchedArrow.object3d.name}
-	is={batchedArrow.object3d}
-	dispose={false}
-	bvh={{ enabled: false }}
-/>
-
-{#each drawAPI.meshes as object (object.uuid)}
-	<Portal id={object.referenceFrame}>
-		<Frame
-			uuid={object.uuid}
-			name={object.name}
-			pose={object.pose}
-			geometry={object.geometry}
-			metadata={object.metadata}
-		>
-			<PortalTarget id={object.name} />
-			<Label text={object.name} />
-		</Frame>
-	</Portal>
-{/each}
-
-{#each drawAPI.nurbs as object (object.uuid)}
-	<Portal id={object.referenceFrame}>
-		<Frame
-			uuid={object.uuid}
-			name={object.name}
-			pose={object.pose}
-			geometry={object.geometry}
-			metadata={object.metadata}
-		>
-			<PortalTarget id={object.name} />
-			<Label text={object.name} />
-		</Frame>
-	</Portal>
-{/each}
-
-{#each drawAPI.models as object (object.uuid)}
-	<Model {object}>
-		<PortalTarget id={object.name} />
-		<Label text={object.name} />
-	</Model>
-{/each}
-
-{#each drawAPI.lines as object (object.uuid)}
-	<Line {object}>
-		<Label text={object.name} />
-	</Line>
-{/each}

package/dist/components/WorldState.svelte

@@ -1,92 +0,0 @@
-<script lang="ts">
-	import { Color, Vector3 } from 'three'
-
-	import Frame from './Frame.svelte'
-	import Label from './Label.svelte'
-	import Portal from './portal/Portal.svelte'
-	import PortalTarget from './portal/PortalTarget.svelte'
-	import { WorldObject } from '../WorldObject.svelte'
-	import { poseToDirection } from '../transform'
-	import { BatchedArrow } from '../three/BatchedArrow'
-	import { T } from '@threlte/core'
-
-	interface Props {
-		worldObjects: WorldObject[]
-	}
-
-	let { worldObjects }: Props = $props()
-
-	const currentArrows: Record<string, { id: number; arrow: WorldObject }> = {}
-	const arrowBatches = $state<Record<string, BatchedArrow>>({})
-
-	const arrows = $derived(worldObjects.filter((object) => object.metadata?.shape === 'arrow'))
-	const objects = $derived(worldObjects.filter((object) => object.metadata?.shape !== 'arrow'))
-
-	const getArrows = () => ({ ...currentArrows })
-	const getArrow = (referenceFrame: string, uuid: string) =>
-		currentArrows[`${referenceFrame}:${uuid}`]
-
-	const removeArrow = (referenceFrame: string, uuid: string) => {
-		delete currentArrows[`${referenceFrame}:${uuid}`]
-	}
-
-	const setArrow = (arrow: WorldObject) => {
-		const referenceFrame = arrow.referenceFrame ?? 'world'
-		const currentArrow = getArrow(referenceFrame, arrow.uuid)
-		const color = arrow.metadata?.color ?? new Color('yellow')
-		const direction = poseToDirection(arrow.pose)
-		const position = new Vector3(arrow.pose.x, arrow.pose.y, arrow.pose.z)
-
-		arrowBatches[referenceFrame] ??= new BatchedArrow()
-		const batchedArrow = arrowBatches[referenceFrame]
-
-		if (currentArrow) {
-			batchedArrow.updateArrow(currentArrow.id, direction, position, 0.1, color, true)
-			currentArrows[`${referenceFrame}:${arrow.uuid}`] = { id: currentArrow.id, arrow }
-		} else {
-			const id = batchedArrow.addArrow(direction, position, 0.1, color, true)
-			currentArrows[`${referenceFrame}:${arrow.uuid}`] = { id, arrow }
-		}
-	}
-
-	$effect(() => {
-		const toRemove = getArrows()
-		arrows.forEach((arrow) => {
-			setArrow(arrow)
-			const referenceFrame = arrow.referenceFrame ?? 'world'
-			delete toRemove[`${referenceFrame}:${arrow.uuid}`]
-		})
-
-		Object.values(toRemove).forEach(({ id, arrow }) => {
-			const referenceFrame = arrow.referenceFrame ?? 'world'
-			arrowBatches[referenceFrame].removeArrow(id)
-			removeArrow(referenceFrame, arrow.uuid)
-		})
-	})
-</script>
-
-{#each Object.entries(arrowBatches) as [referenceFrame, batch] (referenceFrame)}
-	<Portal id={referenceFrame}>
-		<T
-			name={batch.object3d.name}
-			is={batch.object3d}
-			dispose={false}
-			bvh={{ enabled: false }}
-		/>
-	</Portal>
-{/each}
-
-{#each objects as object (object.uuid)}
-	<Portal id={object.referenceFrame}>
-		<Frame
-			uuid={object.uuid}
-			name={object.name}
-			pose={object.pose}
-			geometry={object.geometry}
-			metadata={object.metadata}
-		>
-			<PortalTarget id={object.name} />
-			<Label text={object.name} />
-		</Frame>
-	</Portal>
-{/each}

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

@@ -1,7 +0,0 @@
-import { WorldObject } from '../WorldObject.svelte';
-interface Props {
-    worldObjects: WorldObject[];
-}
-declare const WorldState: import("svelte").Component<Props, {}, "">;
-type WorldState = ReturnType<typeof WorldState>;
-export default WorldState;

package/dist/components/__tests__/__fixtures__/worldObject.svelte.d.ts

@@ -1,2 +0,0 @@
-import { WorldObject } from '../../../WorldObject.svelte';
-export declare const createWorldObjectFixture: () => WorldObject<import("../../../WorldObject.svelte").Geometries>;

package/dist/components/__tests__/__fixtures__/worldObject.svelte.js

@@ -1,35 +0,0 @@
-import { WorldObject } from '../../../WorldObject.svelte';
-export const createWorldObjectFixture = () => {
-    const object = new WorldObject();
-    object.name = 'Test Object';
-    object.uuid = '1234-5678';
-    object.referenceFrame = 'parent_frame';
-    object.pose = {
-        x: 10,
-        y: 20,
-        z: 30,
-        oX: 0.1,
-        oY: 0.2,
-        oZ: 0.3,
-        theta: 0.4,
-    };
-    object.geometry = {
-        label: 'my geometry',
-        geometryType: {
-            case: 'box',
-            value: {
-                dimsMm: { x: 10, y: 20, z: 30 },
-            },
-        },
-    };
-    object.localEditedPose = {
-        x: 10,
-        y: 20,
-        z: 30,
-        oX: 0.1,
-        oY: 0.2,
-        oZ: 0.3,
-        theta: 0.4,
-    };
-    return object;
-};

package/dist/components/portal/Portal.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte'
-	import { usePortalContext } from './usePortalContext.svelte'
-	import { SvelteSet } from 'svelte/reactivity'
-
-	interface Props {
-		id?: string
-		children?: Snippet
-	}
-
-	let { id = 'default', children }: Props = $props()
-
-	const portals = usePortalContext()
-
-	$effect.pre(() => {
-		if (!children) return
-
-		if (!portals.has(id)) {
-			portals.set(id, new SvelteSet())
-		}
-
-		portals.get(id)?.add(children)
-		return () => portals.get(id)?.delete(children)
-	})
-</script>

package/dist/components/portal/Portal.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    id?: string;
-    children?: Snippet;
-}
-declare const Portal: import("svelte").Component<Props, {}, "">;
-type Portal = ReturnType<typeof Portal>;
-export default Portal;

package/dist/components/portal/PortalTarget.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { usePortalContext } from './usePortalContext.svelte'
-
-	interface Props {
-		id?: string
-	}
-
-	let { id = 'default' }: Props = $props()
-
-	const portals = usePortalContext()
-	const childrenArray = $derived(portals.get(id))
-</script>
-
-{#if childrenArray !== undefined}
-	{#each childrenArray as children (children)}
-		{@render children()}
-	{/each}
-{/if}

package/dist/components/portal/PortalTarget.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    id?: string;
-}
-declare const PortalTarget: import("svelte").Component<Props, {}, "">;
-type PortalTarget = ReturnType<typeof PortalTarget>;
-export default PortalTarget;

package/dist/components/portal/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Portal } from './Portal.svelte';
-export { default as PortalTarget } from './PortalTarget.svelte';

package/dist/components/portal/index.js

@@ -1,2 +0,0 @@
-export { default as Portal } from './Portal.svelte';
-export { default as PortalTarget } from './PortalTarget.svelte';

package/dist/components/portal/usePortalContext.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { Snippet } from 'svelte';
-import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-type PortalContext = SvelteMap<string, SvelteSet<Snippet>>;
-export declare const usePortalContext: () => PortalContext;
-export {};