@viamrobotics/motion-tools 0.4.0 → 0.5.0

package/README.md

@@ -11,19 +11,19 @@ Open the machine config page (bottom right) and enter in connection details to v
 
 ## Todo
 
-- animated sequence
-- double click to set trackball center
-- Give error logs
-- default pointcloud color
-- remote IP access
-- ortho points are messed up size-wise
-- geometries parented to parent
-- end effector pose visualized
-- poses of all frames
+- animated sequence of motion plan
+- double click to set trackball center in object view
+- Give better fetching / connection state info
+- Set default pointcloud color in settings
+- remote IP access when custom drawing, to draw on remote computers
+- points are not sized right in ortho cam view
+- geometries need to be parented to parent
 - bounding boxes should include just the thing and not children
-- configure frames from here
+- configure frames in app
 - color pallet for resource to color
 
+- foxglove / rviz
+
 ## Env files
 
 To add a list of connection configs in an `.env.local` file, use the following format:

package/dist/components/App.svelte

@@ -11,6 +11,7 @@
 	import XR from './xr/XR.svelte'
 	import { World } from '@threlte/rapier'
 	import { createPartIDContext } from '../hooks/usePartID.svelte'
+	import Dashboard from './dashboard/Dashboard.svelte'
 
 	interface Props {
 		partID?: string
@@ -51,6 +52,7 @@
 					</Scene>
 
 					<DomPortal element={root}>
+						<Dashboard />
 						<Details />
 					</DomPortal>
 

package/dist/components/AxesHelper.svelte

@@ -1,17 +1,77 @@
 <script lang="ts">
 	import { T, type Props as ThrelteProps } from '@threlte/core'
-	import { AxesHelper } from '../three/AxesHelper'
-	import { meshBounds } from '@threlte/extras'
-	interface Props extends ThrelteProps<AxesHelper> {
-		size?: number
-		thickness?: number
+	import { Color } from 'three'
+	import { Line2 } from 'three/examples/jsm/lines/Line2.js'
+	import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
+	import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+
+	interface Props extends ThrelteProps<Line2> {
+		length?: number
+		width?: number
+		axesColors?: [x: string, y: string, z: string]
+		depthTest?: boolean
 	}
 
-	let { size, thickness, ...rest }: Props = $props()
+	const {
+		length = 1,
+		width = 0.1,
+		axesColors = ['red', 'green', 'blue'],
+		depthTest = true,
+		...rest
+	}: Props = $props()
+
+	const TOTAL_VERTICES = 9
+	const VERTEX_COMPONENTS = 3
+
+	const line = new Line2()
+	const material = $state(new LineMaterial())
+	const geometry = new LineGeometry()
+	const color = new Color()
+	const colors = $state(new Float32Array(TOTAL_VERTICES * VERTEX_COMPONENTS))
+	const positions = $state(new Float32Array(TOTAL_VERTICES * VERTEX_COMPONENTS))
+
+	// Assign colors per vertex
+	$effect.pre(() => {
+		for (let i = 0, l = axesColors.length; i < l; i += 1) {
+			const axis = axesColors[i]
+
+			color.set(axis)
+
+			const axisBufferStart = i * TOTAL_VERTICES
+			const axisBufferEnd = axisBufferStart + TOTAL_VERTICES
+
+			for (let j = axisBufferStart; j < axisBufferEnd; j += VERTEX_COMPONENTS) {
+				colors[j + 0] = color.r
+				colors[j + 1] = color.g
+				colors[j + 2] = color.b
+			}
+		}
+
+		geometry.setColors(colors)
+	})
+
+	const X_AXIS_X_COMPONENT_INDEX = 3
+	const Y_AXIS_Y_COMPONENT_INDEX = 13
+	const Z_AXIS_Z_COMPONENT_INDEX = 23
+
+	$effect.pre(() => {
+		positions[X_AXIS_X_COMPONENT_INDEX] = length
+		positions[Y_AXIS_Y_COMPONENT_INDEX] = length
+		positions[Z_AXIS_Z_COMPONENT_INDEX] = length
+		geometry.setPositions(positions)
+	})
 </script>
 
 <T
-	is={new AxesHelper(size, thickness)}
-	raycast={meshBounds}
+	is={line}
 	{...rest}
-/>
+	raycast={() => null}
+>
+	<T is={geometry} />
+	<T
+		is={material}
+		vertexColors
+		linewidth={width}
+		{depthTest}
+	/>
+</T>

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

@@ -1,4 +1,11 @@
-import { AxesHelper } from '../three/AxesHelper';
-declare const AxesHelper: any;
+import { type Props as ThrelteProps } from '@threlte/core';
+import { Line2 } from 'three/examples/jsm/lines/Line2.js';
+interface Props extends ThrelteProps<Line2> {
+    length?: number;
+    width?: number;
+    axesColors?: [x: string, y: string, z: string];
+    depthTest?: boolean;
+}
+declare const AxesHelper: import("svelte").Component<Props, {}, "">;
 type AxesHelper = ReturnType<typeof AxesHelper>;
 export default AxesHelper;

package/dist/components/Camera.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { PersistedState } from 'runed'
 	import { T } from '@threlte/core'
 	import { PerspectiveCamera, OrthographicCamera } from 'three'
+	import { useSettings } from '../hooks/useSettings.svelte'
 
 	let { children, ...rest } = $props()
 
-	const mode = new PersistedState<'perspective' | 'orthographic'>('camera-type', 'perspective')
+	const settings = useSettings()
+	const mode = $derived(settings.current.cameraMode)
 
 	const perspective = new PerspectiveCamera()
 	perspective.near = 0.01
@@ -18,15 +19,7 @@
 	orthographic.zoom = 200
 </script>
 
-<svelte:window
-	onkeydown={({ key }) => {
-		if (key.toLowerCase() === 'c') {
-			mode.current = mode.current === 'perspective' ? 'orthographic' : 'perspective'
-		}
-	}}
-/>
-
-{#if mode.current === 'perspective'}
+{#if mode === 'perspective'}
 	<T
 		is={perspective}
 		makeDefault
@@ -34,7 +27,7 @@
 	>
 		{@render children?.()}
 	</T>
-{:else if mode.current === 'orthographic'}
+{:else if mode === 'orthographic'}
 	<T
 		is={orthographic}
 		makeDefault

package/dist/components/Details.svelte

@@ -2,6 +2,7 @@
 	import { useSelectedObject, useFocusedObject, useFocused } from '../hooks/useSelection.svelte'
 	import { Check, Copy } from 'lucide-svelte'
 	import { Button, Icon } from '@viamrobotics/prime-core'
+	import { useDraggable } from '../hooks/useDraggable.svelte'
 
 	const focused = useFocused()
 	const selectedObject = useSelectedObject()
@@ -9,14 +10,22 @@
 	const object = $derived(focusedObject.current ?? selectedObject.current)
 
 	let copied = $state(false)
+
+	const draggable = useDraggable('details')
 </script>
 
 {#if object}
 	{@const { geometry, pose } = object}
-	<div class="border-medium bg-extralight absolute top-0 right-0 z-10 m-2 w-60 border p-2 text-xs">
+	<div
+		class="border-medium bg-extralight absolute top-0 right-0 z-10 m-2 w-60 border p-2 text-xs"
+		style:transform="translate({draggable.current.x}px, {draggable.current.y}px)"
+	>
 		<div class="flex items-center justify-between gap-2 pb-2">
 			<div class="flex items-center gap-1">
-				<button>
+				<button
+					onmousedown={draggable.onDragStart}
+					onmouseup={draggable.onDragEnd}
+				>
 					<Icon name="drag" />
 				</button>
 				{object.name}

package/dist/components/Focus.svelte

@@ -14,13 +14,11 @@
 	const vec = new Vector3()
 
 	let center = $state.raw<[number, number, number]>([0, 0, 0])
-	// let size = $state.raw<[number, number, number]>([0, 0, 0])
 
 	$effect(() => {
 		if (object3d) {
 			box.setFromObject(object3d)
 			center = box.getCenter(vec).toArray()
-			// size = box.getSize(vec).toArray()
 		}
 	})
 

package/dist/components/Geometry.svelte

@@ -80,7 +80,7 @@
 		/>
 	{:else}
 		<AxesHelper
-			width={5}
+			width={3}
 			length={0.1}
 		/>
 	{/if}

package/dist/components/Scene.svelte

@@ -65,7 +65,7 @@
 		{#if !$isPresenting}
 			<Grid
 				plane="xy"
-				sectionColor="lightgrey"
+				sectionColor="#333"
 				infiniteGrid
 				fadeOrigin={new Vector3()}
 				fadeDistance={25}

package/dist/components/SceneProviders.svelte

@@ -14,6 +14,7 @@
 	import { provideObjects } from '../hooks/useObjects.svelte'
 	import { provideMotionClient } from '../hooks/useMotionClient.svelte'
 	import { provideLogs } from '../hooks/useLogs.svelte'
+	import { provideSettings } from '../hooks/useSettings.svelte'
 
 	interface Props {
 		children: Snippet<[{ focus: boolean }]>
@@ -23,6 +24,7 @@
 
 	const partID = usePartID()
 
+	provideSettings()
 	provideTransformControls()
 	provideVisibility()
 	provideRefreshRates()

package/dist/components/Tree/Tree.svelte

@@ -8,6 +8,7 @@
 	import { useExpanded } from './useExpanded.svelte'
 	import { VirtualList } from 'svelte-virtuallists'
 	import { observe } from '@threlte/core'
+	import { Icon } from '@viamrobotics/prime-core'
 
 	const visibility = useVisibility()
 	const expanded = useExpanded()
@@ -16,9 +17,11 @@
 		rootNode: TreeNode
 		selections: string[]
 		onSelectionChange?: (event: tree.SelectionChangeDetails) => void
+		onDragStart?: (event: MouseEvent) => void
+		onDragEnd?: (event: MouseEvent) => void
 	}
 
-	let { rootNode, selections, onSelectionChange }: Props = $props()
+	let { rootNode, selections, onSelectionChange, onDragStart, onDragEnd }: Props = $props()
 
 	const collection = tree.collection<TreeNode>({
 		nodeToValue: (node) => node.id,
@@ -143,7 +146,13 @@
 
 <div class="root-node">
 	<div {...api.getRootProps() as object}>
-		<div class="border-medium border-b p-2">
+		<div class="border-medium flex items-center gap-1 border-b p-2">
+			<button
+				onmousedown={onDragStart}
+				onmouseup={onDragEnd}
+			>
+				<Icon name="drag" />
+			</button>
 			<h3 {...api.getLabelProps() as object}>{rootNode.name}</h3>
 		</div>
 

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

@@ -4,6 +4,8 @@ interface Props {
     rootNode: TreeNode;
     selections: string[];
     onSelectionChange?: (event: tree.SelectionChangeDetails) => void;
+    onDragStart?: (event: MouseEvent) => void;
+    onDragEnd?: (event: MouseEvent) => void;
 }
 declare const Tree: import("svelte").Component<Props, {}, "">;
 type Tree = ReturnType<typeof Tree>;

package/dist/components/Tree/TreeContainer.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
-	import { PersistedState } from 'runed'
 	import Tree from './Tree.svelte'
-	import { fly } from 'svelte/transition'
-	import { Keybindings } from '../../keybindings'
-	import { ListTree } from 'lucide-svelte'
+
 	import { buildTreeNodes, type TreeNode } from './buildTree'
 	import { useSelected } from '../../hooks/useSelection.svelte'
 	import { provideTreeExpandedContext } from './useExpanded.svelte'
@@ -11,13 +8,13 @@
 	import { useObjects } from '../../hooks/useObjects.svelte'
 	import Settings from './Settings.svelte'
 	import Logs from './Logs.svelte'
-
-	const showTreeview = new PersistedState('show-treeview', true)
+	import { useDraggable } from '../../hooks/useDraggable.svelte'
 
 	provideTreeExpandedContext()
 
 	const selected = useSelected()
 	const objects = useObjects()
+	const draggable = useDraggable('treeview')
 
 	let rootNode = $state<TreeNode>({
 		id: 'world',
@@ -35,38 +32,22 @@
 	})
 </script>
 
-<svelte:window
-	onkeydown={({ key }) => {
-		if (key === Keybindings.TREEVIEW) {
-			showTreeview.current = !showTreeview.current
-		}
-	}}
-/>
-
-<button
-	class="absolute top-2 left-2 p-2"
-	onclick={() => (showTreeview.current = !showTreeview.current)}
+<div
+	class="bg-extralight border-medium absolute top-0 left-0 m-2 overflow-y-auto border text-xs"
+	style:transform="translate({draggable.current.x}px, {draggable.current.y}px)"
 >
-	<ListTree />
-</button>
-
-{#if showTreeview.current}
-	<div
-		class="bg-extralight border-medium absolute top-0 left-0 m-2 overflow-y-auto border text-xs"
-		in:fly={{ duration: 250, x: -100 }}
-		out:fly={{ duration: 250, x: -100 }}
-	>
-		{#key rootNode}
-			<Tree
-				{rootNode}
-				selections={selected.current ? [selected.current] : []}
-				onSelectionChange={(event) => {
-					selected.set(event.selectedValue[0])
-				}}
-			/>
-		{/key}
-
-		<Logs />
-		<Settings />
-	</div>
-{/if}
+	{#key rootNode}
+		<Tree
+			{rootNode}
+			selections={selected.current ? [selected.current] : []}
+			onSelectionChange={(event) => {
+				selected.set(event.selectedValue[0])
+			}}
+			onDragStart={draggable.onDragStart}
+			onDragEnd={draggable.onDragEnd}
+		/>
+	{/key}
+
+	<Logs />
+	<Settings />
+</div>

package/dist/components/dashboard/Button.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Icon, type IconName, Tooltip } from '@viamrobotics/prime-core'
+
+	interface Props {
+		icon: IconName
+		active?: boolean
+		description: string
+		hotkey: string
+		class?: string
+		onclick?: () => void
+	}
+
+	let {
+		icon,
+		active = false,
+		description,
+		hotkey,
+		class: className = '',
+		onclick,
+	}: Props = $props()
+
+	const activeClasses = 'z-10 border-gray-5 bg-white text-gray-8'
+	const inactiveClasses = 'bg-light border-medium text-disabled'
+</script>
+
+<Tooltip
+	let:tooltipID
+	location="bottom"
+>
+	<label
+		class={[className, 'relative block border', active ? activeClasses : inactiveClasses]}
+		aria-describedby={tooltipID}
+	>
+		<button
+			class="p-1.5"
+			role="radio"
+			aria-label={description}
+			aria-checked={active}
+			{onclick}
+		>
+			<Icon name={icon} />
+		</button>
+	</label>
+	<p slot="description">
+		{description} <span class="text-gray-5 pl-1">{hotkey}</span>
+	</p>
+</Tooltip>

package/dist/components/dashboard/Button.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type IconName } from '@viamrobotics/prime-core';
+interface Props {
+    icon: IconName;
+    active?: boolean;
+    description: string;
+    hotkey: string;
+    class?: string;
+    onclick?: () => void;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/dashboard/Dashboard.svelte

@@ -0,0 +1,77 @@
+<script>
+	import { useSettings } from '../../hooks/useSettings.svelte'
+	import Button from './Button.svelte'
+
+	const settings = useSettings()
+</script>
+
+<svelte:window
+	onkeydown={({ key }) => {
+		if (key.toLowerCase() === 'c') {
+			settings.current.cameraMode =
+				settings.current.cameraMode === 'perspective' ? 'orthographic' : 'perspective'
+		}
+	}}
+/>
+
+<div class="absolute top-2 flex w-full justify-center">
+	<!-- transform -->
+	<!-- <fieldset>
+    <Button
+      icon="cursor-move"
+      active={$transformMode === TransformModes.TRANSLATE}
+      description="Translate"
+      hotkey="T"
+      onclick={() => transformMode.set(TransformModes.TRANSLATE)}
+    />
+    <Button
+      icon="sync"
+      active={$transformMode === TransformModes.ROTATE}
+      description="Rotate"
+      hotkey="R"
+      class="-my-px"
+      onclick={() => transformMode.set(TransformModes.ROTATE)}
+    />
+    <Button
+      icon="resize"
+      active={$transformMode === TransformModes.SCALE}
+      description="Scale"
+      hotkey="S"
+      onclick={() => transformMode.set(TransformModes.SCALE)}
+    />
+  </fieldset> -->
+
+	<!-- snapping -->
+	<!-- <fieldset>
+    <Button
+      icon={$snapMode ? 'magnet' : 'magnet-off'}
+      active={$snapMode === true}
+      description="Snapping"
+      hotkey="Spacebar"
+      onClick={() => snapMode.set(!$snapMode)}
+    />
+  </fieldset> -->
+
+	<!-- camera view -->
+	<fieldset class="flex">
+		<Button
+			icon="grid-orthographic"
+			active={settings.current.cameraMode === 'orthographic'}
+			description="Orthographic view"
+			hotkey="C"
+			onclick={() => {
+				settings.current.cameraMode = 'orthographic'
+			}}
+		/>
+		<Button
+			icon="grid-perspective"
+			active={settings.current.cameraMode === 'perspective'}
+			description="Perspective view"
+			hotkey="C"
+			class="-ml-px"
+			onclick={() => {
+				settings.current.cameraMode = 'perspective'
+			}}
+		/>
+	</fieldset>
+</div>

package/dist/components/dashboard/Dashboard.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Dashboard;
+type Dashboard = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Dashboard: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/hooks/useDraggable.svelte.d.ts

@@ -1,2 +1,10 @@
-export declare const provideDraggables: () => void;
-export declare const useDraggable: (name: string) => void;
+interface Context {
+    onDragStart: (event: MouseEvent) => void;
+    onDragEnd: (event: MouseEvent) => void;
+    readonly current: {
+        x: number;
+        y: number;
+    };
+}
+export declare const useDraggable: (name: string) => Context;
+export {};

package/dist/hooks/useDraggable.svelte.js

@@ -1,25 +1,36 @@
-import { PersistedState } from 'runed';
-import { setContext } from 'svelte';
-const key = Symbol('draggables-context');
-export const provideDraggables = () => { };
+import { get, set } from 'idb-keyval';
 export const useDraggable = (name) => {
     const down = { x: 0, y: 0 };
-    const onDragMove = () => { };
+    const last = { x: 0, y: 0 };
+    let translate = $state({ x: 0, y: 0 });
+    const onDragMove = (event) => {
+        translate.x = event.clientX - down.x + last.x;
+        translate.y = event.clientY - down.y + last.y;
+    };
     const onDragStart = (event) => {
         down.x = event.clientX;
         down.y = event.clientY;
+        last.x = translate.x;
+        last.y = translate.y;
+        window.addEventListener('pointermove', onDragMove, { passive: true });
     };
-    const onDragEnd = (event) => {
-        translate.current.x += event.clientX - down.x;
-        translate.current.y += event.clientY - down.y;
+    const onDragEnd = () => {
+        set(`${name}-draggable`, $state.snapshot(translate));
+        window.removeEventListener('pointermove', onDragMove);
     };
-    const translate = new PersistedState(`${name} draggable`, { x: 0, y: 0 });
-    setContext(key, {
+    get(`${name}-draggable`).then((response) => {
+        if (response) {
+            translate = response;
+        }
+    });
+    $effect(() => {
+        return () => window.removeEventListener('pointermove', onDragMove);
+    });
+    return {
         onDragStart,
-        onDragMove,
         onDragEnd,
         get current() {
-            return translate.current;
+            return translate;
         },
-    });
+    };
 };

package/dist/hooks/usePointclouds.svelte.js

@@ -3,7 +3,7 @@ import { CameraClient } from '@viamrobotics/sdk';
 import { setContext, getContext } from 'svelte';
 import { fromStore, toStore } from 'svelte/store';
 import { createResourceClient, useResourceNames } from '@viamrobotics/svelte-sdk';
-import { parsePCD } from '../loaders/pcd';
+import { parsePcdInWorker } from '../loaders/pcd';
 import { useRefreshRates } from './useRefreshRates.svelte';
 import { WorldObject } from '../WorldObject';
 import { usePersistentUUIDs } from './usePersistentUUIDs.svelte';
@@ -32,7 +32,7 @@ export const providePointclouds = (partID) => {
                 const response = await cameraClient.current.getPointCloud();
                 if (!response)
                     return null;
-                const { positions, colors } = await parsePCD(new Uint8Array(response));
+                const { positions, colors } = await parsePcdInWorker(new Uint8Array(response));
                 return new WorldObject(`${name}:pointcloud`, undefined, name, { case: 'points', value: new Float32Array(positions) }, colors ? { colors: new Float32Array(colors) } : undefined);
             },
         });

package/dist/hooks/useSettings.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Settings {
+    cameraMode: 'orthographic' | 'perspective';
+}
+interface Context {
+    current: Settings;
+}
+export declare const provideSettings: () => void;
+export declare const useSettings: () => Context;
+export {};

package/dist/hooks/useSettings.svelte.js

@@ -0,0 +1,25 @@
+import { get, set } from 'idb-keyval';
+import { getContext, setContext } from 'svelte';
+const key = Symbol('dashboard-context');
+const defaults = () => ({
+    cameraMode: 'perspective',
+});
+export const provideSettings = () => {
+    let settings = $state(defaults());
+    get('motion-tools-settings').then((response) => {
+        if (response) {
+            settings = response;
+        }
+    });
+    $effect(() => {
+        set('motion-tools-settings', $state.snapshot(settings));
+    });
+    setContext(key, {
+        get current() {
+            return settings;
+        },
+    });
+};
+export const useSettings = () => {
+    return getContext(key);
+};

package/dist/hooks/useShapes.svelte.js

@@ -1,7 +1,7 @@
 import { getContext, setContext } from 'svelte';
 import { Vector3, Vector4 } from 'three';
 import { NURBSCurve } from 'three/addons/curves/NURBSCurve.js';
-import { parsePCD } from '../loaders/pcd';
+import { parsePcdInWorker } from '../loaders/pcd';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { BatchedArrow } from '../three/BatchedArrow';
 import { WorldObject } from '../WorldObject';
@@ -31,7 +31,7 @@ export const provideShapes = () => {
     const loader = new GLTFLoader();
     const addPcd = async (data) => {
         const buffer = await data.arrayBuffer();
-        const { positions, colors } = await parsePCD(new Uint8Array(buffer));
+        const { positions, colors } = await parsePcdInWorker(new Uint8Array(buffer));
         points.push(new WorldObject(`points ${++pointsIndex}`, undefined, undefined, {
             case: 'points',
             value: new Float32Array(positions),

package/dist/lib.d.ts

@@ -1,7 +1,9 @@
 export { default as CameraControls } from './components/CameraControls.svelte';
 export { type default as CameraController } from 'camera-controls';
 export { default as Geometry } from './components/Geometry.svelte';
-export { AxesHelper } from './three/AxesHelper';
+export { default as AxesHelper } from './components/AxesHelper.svelte';
 export { BatchedArrow } from './three/BatchedArrow';
 export { CapsuleGeometry } from './three/CapsuleGeometry';
+export { OrientationVector } from './three/OrientationVector';
 export { WorldObject } from './WorldObject';
+export { parsePcdInWorker } from './loaders/pcd';

package/dist/lib.js

@@ -1,7 +1,12 @@
+// Components
 export { default as CameraControls } from './components/CameraControls.svelte';
 export {} from 'camera-controls';
 export { default as Geometry } from './components/Geometry.svelte';
-export { AxesHelper } from './three/AxesHelper';
+export { default as AxesHelper } from './components/AxesHelper.svelte';
+// Classes
 export { BatchedArrow } from './three/BatchedArrow';
 export { CapsuleGeometry } from './three/CapsuleGeometry';
+export { OrientationVector } from './three/OrientationVector';
 export { WorldObject } from './WorldObject';
+// Functions
+export { parsePcdInWorker } from './loaders/pcd';

package/dist/loaders/pcd/index.d.ts

@@ -1,4 +1,4 @@
-export declare const parsePCD: (array: Uint8Array<ArrayBufferLike>) => Promise<{
+export declare const parsePcdInWorker: (array: Uint8Array<ArrayBufferLike>) => Promise<{
     positions: ArrayBuffer;
     colors: ArrayBuffer | undefined;
 }>;

package/dist/loaders/pcd/index.js

@@ -1,6 +1,5 @@
-// main.js
 const worker = new Worker(new URL('./worker', import.meta.url), { type: 'module' });
-export const parsePCD = async (array) => {
+export const parsePcdInWorker = async (array) => {
     return new Promise((resolve, reject) => {
         worker.onmessage = (event) => {
             if (event.data.error) {

package/dist/test/createRandomPcdBinary.d.ts

@@ -0,0 +1 @@
+export declare const createRandomPcdBinary: (numPoints?: number, scale?: number, axes?: string) => Uint8Array;

package/dist/test/createRandomPcdBinary.js

@@ -0,0 +1,31 @@
+export const createRandomPcdBinary = (numPoints = 200, scale = 1, axes = 'xyz') => {
+    const header = `
+# .PCD v0.7 - Point Cloud Data file format
+VERSION 0.7
+FIELDS x y z rgb
+SIZE 4 4 4 4
+TYPE F F F F
+COUNT 1 1 1
+WIDTH ${numPoints}
+HEIGHT 1
+VIEWPOINT 0 0 0 1 0 0 0
+POINTS ${numPoints}
+DATA ascii
+`.trim();
+    const doX = axes.includes('x');
+    const doY = axes.includes('y');
+    const doZ = axes.includes('z');
+    const points = Array.from({ length: numPoints }, () => {
+        const x = doX ? ((Math.random() - 0.5) * scale).toFixed(6) : '0.000000';
+        const y = doY ? ((Math.random() - 0.5) * scale).toFixed(6) : '0.000000';
+        const z = doZ ? ((Math.random() - 0.5) * scale).toFixed(6) : '0.000000';
+        const red = Math.floor(Math.random() * 256);
+        const green = Math.floor(Math.random() * 256);
+        const blue = Math.floor(Math.random() * 256);
+        const rgbInt = (red << 16) | (green << 8) | blue;
+        const rgbFloat = String(new Float32Array(new Uint32Array([rgbInt]).buffer)[0]);
+        return `${x} ${y} ${z} ${rgbFloat}`;
+    });
+    const encoder = new TextEncoder();
+    return encoder.encode(`${header}\n${points.join('\n')}`);
+};

package/dist/test.d.ts

@@ -0,0 +1 @@
+export { createRandomPcdBinary } from './test/createRandomPcdBinary';

package/dist/test.js

@@ -0,0 +1 @@
+export { createRandomPcdBinary } from './test/createRandomPcdBinary';

package/dist/three/OrientationVector.d.ts

@@ -0,0 +1,71 @@
+import { Euler, Quaternion } from 'three';
+export declare const EPSILON = 0.0001;
+/**
+ * Golang: https://github.com/viamrobotics/rdk/blob/main/spatialmath/orientationVector.go
+ * Rust:   https://github.com/viamrobotics/rust-utils/blob/main/src/spatialmath/utils.rs
+ */
+/**
+ * Viam’s orientation vector is a method for describing the orientation of an object in 3D space.
+ * It is part of a Pose which also includes the position in 3D space.
+ *
+ * The vector extends from the center of the object to another point in the reference frame. This defines the direction something is pointing in.
+ *
+ * @see https://docs.viam.com/internals/orientation-vector/
+ */
+export declare class OrientationVector {
+    #private;
+    readonly isOrientationVector = true;
+    autoNormalize: boolean;
+    constructor(x?: number, y?: number, z?: number, th?: number);
+    get units(): 'degrees' | 'radians';
+    /**
+     * The vector's x component.
+     * @default 0
+     */
+    get x(): number;
+    set x(value: number);
+    /**
+     * The vector's y component.
+     * @default 0
+     */
+    get y(): number;
+    set y(value: number);
+    /**
+     * The vector's z component.
+     * @default 0
+     */
+    get z(): number;
+    set z(value: number);
+    /**
+     * Describes the rotation around the vector.
+     * @default 0
+     */
+    get th(): number;
+    set th(value: number);
+    get w(): number;
+    set w(value: number);
+    _onChange(callback: () => void): this;
+    /**
+     * Sets the value of this orientation vector.
+     */
+    set(x?: number, y?: number, z?: number, th?: number): this;
+    setUnits(units: 'degrees' | 'radians'): this;
+    /**
+     * Computes the length of this orientation vector.
+     */
+    length(): number;
+    /**
+     * Normalizes the vector component.
+     */
+    normalize(): this;
+    /**
+     * Copies value of ov to this orientation vector.
+     */
+    copy(ov: OrientationVector): this;
+    fromArray(array: number[], offset?: number): this;
+    toArray(array?: number[], offset?: number): number[];
+    toJson(): number[];
+    setFromQuaternion(quaternion: Quaternion): this;
+    toQuaternion(dest: Quaternion): Quaternion;
+    toEuler(dest: Euler): Euler;
+}

package/dist/three/OrientationVector.js

@@ -0,0 +1,233 @@
+import { Euler, Quaternion, Vector3, MathUtils } from 'three';
+export const EPSILON = 0.0001;
+const xAxis = new Quaternion(-1, 0, 0, 0);
+const zAxis = new Quaternion(0, 0, +1, 0);
+const quatA = new Quaternion();
+const quatB = new Quaternion();
+const quatC = new Quaternion();
+const quatD = new Quaternion();
+const quatE = new Quaternion();
+const vecA = new Vector3();
+const vecB = new Vector3();
+const vecC = new Vector3();
+const vecD = new Vector3();
+const vecE = new Vector3();
+const vecF = new Vector3();
+const vecG = new Vector3();
+const vecH = new Vector3();
+/**
+ * Golang: https://github.com/viamrobotics/rdk/blob/main/spatialmath/orientationVector.go
+ * Rust:   https://github.com/viamrobotics/rust-utils/blob/main/src/spatialmath/utils.rs
+ */
+/**
+ * Viam’s orientation vector is a method for describing the orientation of an object in 3D space.
+ * It is part of a Pose which also includes the position in 3D space.
+ *
+ * The vector extends from the center of the object to another point in the reference frame. This defines the direction something is pointing in.
+ *
+ * @see https://docs.viam.com/internals/orientation-vector/
+ */
+export class OrientationVector {
+    isOrientationVector = true;
+    #units = 'radians';
+    #vec = new Vector3();
+    #th = 0;
+    #onChangeCallback;
+    autoNormalize = true;
+    constructor(x = 0, y = 0, z = 1, th = 0) {
+        this.#vec.set(x, y, z);
+        if (this.autoNormalize) {
+            this.#vec.normalize();
+        }
+        this.#th = th;
+    }
+    get units() {
+        return this.#units;
+    }
+    /**
+     * The vector's x component.
+     * @default 0
+     */
+    get x() {
+        return this.#vec.x;
+    }
+    set x(value) {
+        this.#vec.setX(value);
+        if (this.autoNormalize) {
+            this.#vec.normalize();
+        }
+        this.#onChangeCallback?.();
+    }
+    /**
+     * The vector's y component.
+     * @default 0
+     */
+    get y() {
+        return this.#vec.y;
+    }
+    set y(value) {
+        this.#vec.setY(value);
+        if (this.autoNormalize) {
+            this.#vec.normalize();
+        }
+        this.#onChangeCallback?.();
+    }
+    /**
+     * The vector's z component.
+     * @default 0
+     */
+    get z() {
+        return this.#vec.z;
+    }
+    set z(value) {
+        this.#vec.setZ(value);
+        if (this.autoNormalize) {
+            this.#vec.normalize();
+        }
+        this.#onChangeCallback?.();
+    }
+    /**
+     * Describes the rotation around the vector.
+     * @default 0
+     */
+    get th() {
+        if (this.#units === 'degrees') {
+            return MathUtils.radToDeg(this.#th);
+        }
+        return this.#th;
+    }
+    set th(value) {
+        this.#th = this.#units === 'degrees' ? MathUtils.degToRad(value) : value;
+        this.#onChangeCallback?.();
+    }
+    get w() {
+        return this.th;
+    }
+    set w(value) {
+        this.th = value;
+    }
+    _onChange(callback) {
+        this.#onChangeCallback = callback;
+        return this;
+    }
+    /**
+     * Sets the value of this orientation vector.
+     */
+    set(x = 0, y = 0, z = 0, th = 0) {
+        this.#vec.set(x, y, z);
+        if (this.autoNormalize) {
+            this.#vec.normalize();
+        }
+        this.th = th;
+        this.#onChangeCallback?.();
+        return this;
+    }
+    setUnits(units) {
+        this.#units = units;
+        return this;
+    }
+    /**
+     * Computes the length of this orientation vector.
+     */
+    length() {
+        return this.#vec.length();
+    }
+    /**
+     * Normalizes the vector component.
+     */
+    normalize() {
+        this.#vec.normalize();
+        return this;
+    }
+    /**
+     * Copies value of ov to this orientation vector.
+     */
+    copy(ov) {
+        this.#vec.set(ov.x, ov.y, ov.z);
+        if (this.autoNormalize) {
+            this.#vec.normalize();
+        }
+        this.th = ov.th;
+        this.#onChangeCallback?.();
+        return this;
+    }
+    fromArray(array, offset = 0) {
+        this.#vec.set(array[offset] ?? 0, array[offset + 1] ?? 0, array[offset + 2] ?? 0);
+        this.th = array[offset + 3] ?? 0;
+        this.#onChangeCallback?.();
+        return this;
+    }
+    toArray(array = [], offset = 0) {
+        array[offset] = this.x;
+        array[offset + 1] = this.y;
+        array[offset + 2] = this.z;
+        array[offset + 3] = this.th;
+        return array;
+    }
+    toJson() {
+        return this.toArray();
+    }
+    setFromQuaternion(quaternion) {
+        // Get the transform of our +X and +Z points
+        const conj = quatA.copy(quaternion).conjugate();
+        const newX = quatB.multiplyQuaternions(quaternion, xAxis).multiply(conj);
+        const newZ = quatC.multiplyQuaternions(quaternion, zAxis).multiply(conj);
+        let th = 0;
+        /*
+         * The contents of ov.newX.Kmag are not in radians but we can use angleEpsilon anyway to check how close we are to
+         * the pole because it's a convenient small number
+         */
+        if (1 - Math.abs(newZ.z) > EPSILON) {
+            const newZimag = vecA.set(newZ.x, newZ.y, newZ.z);
+            const newXimag = vecB.set(newX.x, newX.y, newX.z);
+            const zImagAxis = vecC.set(zAxis.x, zAxis.y, zAxis.z);
+            // Get the vector normal to the local-x, local-z, origin plane
+            const normal1 = vecD.copy(newZimag).cross(newXimag);
+            // Get the vector normal to the global-z, local-z, origin plane
+            const normal2 = vecE.copy(newZimag).cross(zImagAxis);
+            // For theta, find the angle between the planes defined by local-x, global-z, origin and local-x, local-z, origin
+            const cosThetaCand = normal1.dot(normal2) / (normal1.length() * normal2.length());
+            const cosTheta = MathUtils.clamp(cosThetaCand, -1, 1);
+            const theta = Math.acos(cosTheta);
+            if (theta > EPSILON) {
+                const newZImagUnit = vecF.copy(newXimag).normalize();
+                const rotQuatUnit = quatD.setFromAxisAngle(newZImagUnit, -1 * theta);
+                const conj2 = quatE.copy(rotQuatUnit).conjugate();
+                const testZ = rotQuatUnit.multiplyQuaternions(rotQuatUnit.multiply(zAxis), conj2);
+                const normal3 = vecG.copy(newZimag).cross(vecH.set(testZ.x, testZ.y, testZ.z));
+                const cosTest = normal1.dot(normal3) / (normal1.length() * normal3.length());
+                th = 1 - cosTest < EPSILON ** 2 ? -theta : theta;
+            }
+            else {
+                th = 0;
+            }
+            /*
+             * Special case for when we point directly along the Z axis
+             * Get the vector normal to the local-x, global-z, origin plane
+             */
+        }
+        else if (newZ.z < 0) {
+            th = -Math.atan2(newX.y, newX.x);
+        }
+        else {
+            th = -Math.atan2(newX.y, -newX.x);
+        }
+        this.set(newZ.x, newZ.y, newZ.z, th);
+        this.#onChangeCallback?.();
+        return this;
+    }
+    toQuaternion(dest) {
+        const lat = Math.acos(this.z);
+        const lon = 1 - Math.abs(this.z) > EPSILON ? Math.atan2(this.y, this.x) : 0;
+        const s0 = Math.sin(lon / 2);
+        const c0 = Math.cos(lon / 2);
+        const s1 = Math.sin(lat / 2);
+        const c1 = Math.cos(lat / 2);
+        const s2 = Math.sin(this.th / 2);
+        const c2 = Math.cos(this.th / 2);
+        return dest.set(c0 * s1 * s2 - s0 * s1 * c2, c0 * s1 * c2 + s0 * s1 * s2, s0 * c1 * c2 + c0 * c1 * s2, c0 * c1 * c2 - s0 * c1 * s2);
+    }
+    toEuler(dest) {
+        return dest.setFromQuaternion(this.toQuaternion(quatA), 'ZYX');
+    }
+}

package/dist/transform.js

@@ -1,4 +1,4 @@
-import { OrientationVector } from '@viamrobotics/three';
+import { OrientationVector } from './three/OrientationVector';
 import { MathUtils, Quaternion, Vector3 } from 'three';
 const ov = new OrientationVector();
 export const createPose = (pose) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -9,9 +9,9 @@
     "@ag-grid-community/core": "^32.3.5",
     "@ag-grid-community/styles": "^32.3.5",
     "@changesets/cli": "^2.29.4",
-    "@dimforge/rapier3d-compat": "^0.17.1",
+    "@dimforge/rapier3d-compat": "^0.17.3",
     "@eslint/compat": "^1.2.9",
-    "@eslint/js": "^9.27.0",
+    "@eslint/js": "^9.28.0",
     "@playwright/test": "^1.52.0",
     "@skeletonlabs/skeleton": "3.1.3",
     "@skeletonlabs/skeleton-svelte": "1.2.3",
@@ -21,30 +21,29 @@
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/vite": "^4.1.8",
-    "@tanstack/svelte-query": "^5.79.0",
-    "@tanstack/svelte-query-devtools": "^5.79.0",
+    "@tanstack/svelte-query": "^5.79.2",
+    "@tanstack/svelte-query-devtools": "^5.79.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.8",
     "@threlte/core": "^8.0.4",
     "@threlte/extras": "^9.2.1",
     "@threlte/rapier": "^3.1.4",
-    "@threlte/xr": "^1.0.5",
+    "@threlte/xr": "^1.0.6",
     "@types/bun": "^1.2.15",
     "@types/lodash-es": "^4.17.12",
-    "@types/three": "^0.176.0",
-    "@typescript-eslint/eslint-plugin": "^8.33.0",
-    "@typescript-eslint/parser": "^8.33.0",
+    "@types/three": "^0.177.0",
+    "@typescript-eslint/eslint-plugin": "^8.33.1",
+    "@typescript-eslint/parser": "^8.33.1",
     "@viamrobotics/prime-core": "^0.1.5",
     "@viamrobotics/sdk": "0.42.0",
-    "@viamrobotics/svelte-sdk": "0.1.4",
-    "@viamrobotics/three": "^0.0.9",
+    "@viamrobotics/svelte-sdk": "0.2.0",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
-    "@zag-js/svelte": "1.13.1",
-    "@zag-js/tree-view": "1.13.1",
+    "@zag-js/svelte": "1.14.0",
+    "@zag-js/tree-view": "1.14.0",
     "camera-controls": "^2.10.1",
-    "eslint": "^9.27.0",
+    "eslint": "^9.28.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.9.0",
+    "eslint-plugin-svelte": "^3.9.1",
     "globals": "^16.2.0",
     "idb-keyval": "^6.2.2",
     "jsdom": "^26.1.0",
@@ -52,21 +51,21 @@
     "lucide-svelte": "^0.511.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.6.12",
     "publint": "^0.3.12",
     "runed": "^0.28.0",
-    "svelte": "5.33.8",
+    "svelte": "5.33.14",
     "svelte-check": "^4.2.1",
     "svelte-virtuallists": "^1.4.2",
     "tailwindcss": "^4.1.8",
-    "three": "^0.176.0",
-    "threlte-uikit": "^1.0.0",
+    "three": "^0.177.0",
+    "threlte-uikit": "^1.1.0",
     "tsx": "^4.19.4",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.33.0",
+    "typescript-eslint": "^8.33.1",
     "vite": "^6.3.5",
     "vite-plugin-mkcert": "^1.17.8",
-    "vitest": "^3.1.4"
+    "vitest": "^3.2.0"
   },
   "peerDependencies": {
     "@dimforge/rapier3d-compat": ">=0.17",
@@ -97,6 +96,10 @@
     "./lib": {
       "types": "./dist/lib.d.ts",
       "svelte": "./dist/lib.js"
+    },
+    "./test": {
+      "types": "./dist/test.d.ts",
+      "svelte": "./dist/test.js"
     }
   },
   "repository": {

package/dist/three/AxesHelper.d.ts

@@ -1,5 +0,0 @@
-import { Mesh } from 'three';
-export declare class AxesHelper extends Mesh {
-    constructor(size?: number, thickness?: number);
-    dispose(): void;
-}

package/dist/three/AxesHelper.js

@@ -1,35 +0,0 @@
-import { Mesh, Vector3, Color, BoxGeometry, BufferAttribute, MeshBasicMaterial } from 'three';
-import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';
-export class AxesHelper extends Mesh {
-    constructor(size = 0.1, thickness = 0.005) {
-        const axisGeometries = [];
-        const axes = [
-            { dir: new Vector3(1, 0, 0), color: new Color(0xff0000) }, // X - Red
-            { dir: new Vector3(0, 1, 0), color: new Color(0x00ff00) }, // Y - Green
-            { dir: new Vector3(0, 0, 1), color: new Color(0x0000ff) }, // Z - Blue
-        ];
-        const dimensions = new Vector3();
-        for (const axis of axes) {
-            dimensions.set(axis.dir.x ? size : thickness, axis.dir.y ? size : thickness, axis.dir.z ? size : thickness);
-            const geometry = new BoxGeometry(dimensions.x, dimensions.y, dimensions.z);
-            // Translate so it starts at the origin (like traditional AxesHelper)
-            geometry.translate(dimensions.x / 2, dimensions.y / 2, dimensions.z / 2);
-            // Add vertex colors
-            const { count } = geometry.attributes.position;
-            const colorArray = new Float32Array(count * 3);
-            for (let i = 0; i < count; i++) {
-                colorArray[i * 3 + 0] = axis.color.r;
-                colorArray[i * 3 + 1] = axis.color.g;
-                colorArray[i * 3 + 2] = axis.color.b;
-            }
-            geometry.setAttribute('color', new BufferAttribute(colorArray, 3));
-            axisGeometries.push(geometry);
-        }
-        const mergedGeometry = mergeGeometries(axisGeometries);
-        const material = new MeshBasicMaterial({ vertexColors: true });
-        super(mergedGeometry, material);
-    }
-    dispose() {
-        this.geometry.dispose();
-    }
-}