@viamrobotics/motion-tools 0.11.2 → 0.11.4

package/README.md

@@ -4,10 +4,44 @@
 
 ### Getting started
 
-1. [Install pnpm](https://pnpm.io/installation)
-2. [Install bun](https://bun.sh/docs/installation)
-3. Install dependencies: `pnpm i`
-4. Run local app server: `pnpm dev`
+#### Quick Setup (Recommended)
+
+The easiest way to get started is using our automated setup script:
+
+```bash
+make setup
+```
+
+This single command will:
+
+1. Install and configure **nvm** (Node Version Manager)
+2. Install the latest **Node.js LTS** version via nvm
+3. Install **pnpm** package manager
+4. Install **bun** runtime
+5. Install all project dependencies
+
+After setup completes, start the development server:
+
+```bash
+make up
+```
+
+#### Manual Setup
+
+If you prefer to install dependencies manually:
+
+1. [Install nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
+2. Install Node.js LTS: `nvm install --lts && nvm use --lts`
+3. [Install pnpm](https://pnpm.io/installation)
+4. [Install bun](https://bun.sh/docs/installation)
+5. Install dependencies: `pnpm i`
+6. Run local app server: `pnpm dev`
+
+#### Available Make Commands
+
+- `make setup` - Complete development environment setup
+- `make up` - Start the development server
+- `make help` - Show available commands
 
 ### Running the visualizer
 

package/dist/components/App.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte'
 	import { Canvas } from '@threlte/core'
 	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+	import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
 
 	import Scene from './Scene.svelte'
 	import TreeContainer from './Tree/TreeContainer.svelte'
@@ -13,6 +14,7 @@
 	import Dashboard from './dashboard/Dashboard.svelte'
 	import { domPortal } from '../portal'
 	import { provideSettings } from '../hooks/useSettings.svelte'
+	import FileDrop from './FileDrop.svelte'
 
 	interface Props {
 		partID?: string
@@ -30,6 +32,8 @@
 
 	createPartIDContext(() => partID)
 
+	provideToast()
+
 	let root = $state.raw<HTMLElement>()
 </script>
 
@@ -57,8 +61,12 @@
 					{#if !focus}
 						<TreeContainer {@attach domPortal(root)} />
 					{/if}
+
+					<FileDrop {@attach domPortal(root)} />
 				{/snippet}
 			</SceneProviders>
 		</World>
 	</Canvas>
+
+	<ToastContainer />
 </div>

package/dist/components/FileDrop.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import { useDrawAPI } from '../hooks/useDrawAPI.svelte'
+	import { parsePcdInWorker, WorldObject } from '../lib'
+	import { useToast, ToastVariant } from '@viamrobotics/prime-core'
+
+	let { ...rest } = $props()
+
+	const { addPoints } = 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 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 !== '.pcd') {
+				toast({
+					message: `.${ext} is not a supported file type.`,
+					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') {
+					return
+				}
+
+				const result = await parsePcdInWorker(new Uint8Array(arrayBuffer))
+
+				addPoints(
+					new WorldObject(
+						file.name,
+						undefined,
+						undefined,
+						{
+							case: 'points',
+							value: result.positions,
+						},
+						result.colors ? { colors: result.colors } : undefined
+					)
+				)
+				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

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

package/dist/components/MeasureTool.svelte

@@ -76,15 +76,24 @@
 
 {#if enabled}
 	{#if intersection}
-		<DotSprite position={intersection?.point.toArray()} />
+		<DotSprite
+			position={intersection?.point.toArray()}
+			opacity={0.5}
+		/>
 	{/if}
 
 	{#if p1}
-		<DotSprite position={p1.toArray()} />
+		<DotSprite
+			position={p1.toArray()}
+			opacity={0.5}
+		/>
 	{/if}
 
 	{#if p2}
-		<DotSprite position={p2.toArray()} />
+		<DotSprite
+			position={p2.toArray()}
+			opacity={0.5}
+		/>
 	{/if}
 
 	{#if p1 && p2}
@@ -98,6 +107,7 @@
 				width={2.5}
 				depthTest={false}
 				color="black"
+				opacity={0.5}
 				attenuate={false}
 				transparent
 			/>

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

@@ -3,6 +3,7 @@ import { BatchedArrow } from '../three/BatchedArrow';
 import { WorldObject, type PointsGeometry } from '../WorldObject.svelte';
 type ConnectionStatus = 'connecting' | 'open' | 'closed';
 interface Context {
+    addPoints(worldObject: WorldObject<PointsGeometry>): void;
     points: WorldObject<PointsGeometry>[];
     lines: WorldObject[];
     meshes: WorldObject[];

package/dist/hooks/useDrawAPI.svelte.js

@@ -379,6 +379,9 @@ export const provideDrawAPI = () => {
         get points() {
             return points;
         },
+        addPoints(worldObject) {
+            points.push(worldObject);
+        },
         get lines() {
             return lines;
         },

package/dist/hooks/usePose.svelte.js

@@ -28,7 +28,7 @@ export const usePose = (name, parent) => {
             if (!client.current || !resource) {
                 throw new Error('No client');
             }
-            const pose = await client.current.getPose(resource, parent() ?? 'world', []);
+            const pose = await client.current.getPose(resource.name, parent() ?? 'world', []);
             return pose;
         },
     }));

package/dist/hooks/usePoses.svelte.js

@@ -26,7 +26,7 @@ export const providePoses = (partID) => {
                     throw new Error('No client');
                 }
                 const promises = components.map((component) => {
-                    return client.getPose(component, 'world', []);
+                    return client.getPose(component.name, 'world', []);
                 });
                 const results = await Promise.allSettled(promises);
                 return results

package/dist/hooks/useWorldState.svelte.js

@@ -4,10 +4,9 @@ import { fromTransform } from '../WorldObject.svelte';
 import { usePartID } from './usePartID.svelte';
 import { setInUnsafe } from '@thi.ng/paths';
 import { getContext, setContext } from 'svelte';
+import WorldStateWorker from '../workers/worldStateWorker?worker';
 const key = Symbol('world-state-context');
-const worker = new Worker(new URL('../workers/worldStateWorker.ts', import.meta.url), {
-    type: 'module',
-});
+const worker = new WorldStateWorker();
 export const provideWorldStates = () => {
     const partID = usePartID();
     const resourceNames = useResourceNames(() => partID.current, 'world_state_store');

package/dist/loaders/pcd/index.js

@@ -1,14 +1,25 @@
-const worker = new Worker(new URL('./worker', import.meta.url), { type: 'module' });
-export const parsePcdInWorker = async (data) => {
+import PCDWorker from './worker?worker';
+const worker = new PCDWorker();
+let requestId = 0;
+const pending = new Map();
+worker.addEventListener('message', (event) => {
+    const { id, ...rest } = event.data;
+    const promise = pending.get(id);
+    if (!promise) {
+        return;
+    }
+    pending.delete(id);
+    if ('error' in rest) {
+        promise.reject(rest.error);
+    }
+    else {
+        promise.resolve(rest);
+    }
+});
+export const parsePcdInWorker = (data) => {
     return new Promise((resolve, reject) => {
-        const onMessage = (event) => {
-            worker.removeEventListener('message', onMessage);
-            if ('error' in event.data) {
-                return reject(event.data.error);
-            }
-            resolve(event.data);
-        };
-        worker.addEventListener('message', onMessage);
-        worker.postMessage({ data }, [data.buffer]);
+        const id = ++requestId;
+        pending.set(id, { resolve, reject });
+        worker.postMessage({ id, data }, [data.buffer]);
     });
 };

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

@@ -1,7 +1,9 @@
 export interface SuccessMessage {
+    id: number;
     positions: Float32Array<ArrayBuffer>;
     colors: Float32Array | null;
 }
 export type Message = SuccessMessage | {
+    id: number;
     error: string;
 };

package/dist/loaders/pcd/worker.js

@@ -1,10 +1,9 @@
-// worker.js
 import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader.js';
 const loader = new PCDLoader();
 self.onmessage = async (event) => {
-    const { data } = event.data;
+    const { data, id } = event.data;
     if (!(data instanceof Uint8Array)) {
-        postMessage({ error: 'Invalid data format' });
+        postMessage({ id, error: 'Invalid data format' });
         return;
     }
     try {
@@ -12,13 +11,13 @@ self.onmessage = async (event) => {
         if (pcd.geometry) {
             const positions = pcd.geometry.attributes.position.array;
             const colors = pcd.geometry.attributes.color?.array ?? null;
-            postMessage({ positions, colors }, colors ? [positions.buffer, colors.buffer] : [positions.buffer]);
+            postMessage({ positions, colors, id }, colors ? [positions.buffer, colors.buffer] : [positions.buffer]);
         }
         else {
-            postMessage({ error: 'Failed to extract geometry' });
+            postMessage({ id, error: 'Failed to extract geometry' });
         }
     }
     catch (error) {
-        postMessage({ error: error.message });
+        postMessage({ id, error: error.message });
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.11.2",
+  "version": "0.11.4",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -37,7 +37,7 @@
     "@typescript-eslint/eslint-plugin": "8.42.0",
     "@typescript-eslint/parser": "8.42.0",
     "@viamrobotics/prime-core": "0.1.5",
-    "@viamrobotics/sdk": "0.51.0",
+    "@viamrobotics/sdk": "0.52.0",
     "@viamrobotics/svelte-sdk": "0.6.1",
     "@vitejs/plugin-basic-ssl": "2.1.0",
     "@zag-js/svelte": "1.22.1",