@viamrobotics/motion-tools 0.18.1 → 0.18.3

package/dist/__tests__/fixtures/MockCanvas.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { Canvas } from '@threlte/core'
+	let { child, ...rest } = $props()
+</script>
+
+<Canvas>
+	<svelte:component
+		this={child}
+		{...rest}
+	/>
+</Canvas>

package/dist/__tests__/fixtures/MockCanvas.svelte.d.ts

@@ -0,0 +1,11 @@
+export default MockCanvas;
+type MockCanvas = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const MockCanvas: import("svelte").Component<{
+    child: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    child: any;
+} & Record<string, any>;

package/dist/components/Frame.svelte

@@ -8,8 +8,12 @@
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
 	import { Color, type Object3D } from 'three'
 	import Geometry from './Geometry.svelte'
+	import { useWeblabs } from '../hooks/useWeblabs.svelte'
 	import { useSelected } from '../hooks/useSelection.svelte'
+	import { useSettings } from '../hooks/useSettings.svelte'
+	import { use3DModels } from '../hooks/use3DModels.svelte'
 	import { colors, darkenColor } from '../color'
+	import { WEBLABS_EXPERIMENTS } from '../hooks/useWeblabs.svelte'
 
 	interface Props {
 		uuid: string
@@ -20,16 +24,34 @@
 		children?: Snippet<[{ ref: Object3D }]>
 	}
 
-	let { uuid, ...rest }: Props = $props()
+	let { uuid, name, ...rest }: Props = $props()
 
+	const settings = useSettings()
+	const componentModels = use3DModels()
 	const selected = useSelected()
+	const weblabs = useWeblabs()
 	const events = useObjectEvents(() => uuid)
 
 	const color = $derived(rest.metadata.color ?? colors.default)
+
+	const model = $derived.by(() => {
+		if (!weblabs.isActive(WEBLABS_EXPERIMENTS.MOTION_TOOLS_RENDER_ARM_MODELS)) {
+			return
+		}
+
+		const [componentName, id] = name.split(':')
+		if (!componentName || !id) {
+			return
+		}
+		return componentModels.current?.[componentName]?.[id]
+	})
 </script>
 
 <Geometry
 	{uuid}
+	{name}
+	{model}
+	renderMode={settings.current.renderArmModels}
 	color={selected.current === uuid
 		? `#${darkenColor(color, 75).getHexString()}`
 		: `#${colorUtil.set(color).getHexString()}`}

package/dist/components/Geometry.svelte

@@ -1,3 +1,9 @@
+<!--
+
+This component is consumed as a library export
+and should remain pure, i.e. no hooks should be used.
+
+-->
 <script lang="ts">
 	import { T, type Props as ThrelteProps } from '@threlte/core'
 	import { type Snippet } from 'svelte'
@@ -10,14 +16,7 @@
 	import type { WorldObject } from '../WorldObject.svelte'
 	import { PLYLoader } from 'three/addons/loaders/PLYLoader.js'
 
-	import { WEBLABS_EXPERIMENTS } from '../hooks/useWeblabs.svelte'
-	import { useSettings } from '../hooks/useSettings.svelte'
-	import { useWeblabs } from '../hooks/useWeblabs.svelte'
-	import { use3DModels } from '../hooks/use3DModels.svelte'
-	const settings = useSettings()
 	const plyLoader = new PLYLoader()
-	const weblabs = useWeblabs()
-	const componentModels = use3DModels()
 
 	interface Props extends ThrelteProps<Group> {
 		uuid: string
@@ -25,8 +24,10 @@
 		geometry?: WorldObject['geometry']
 		pose: WorldObject['pose']
 		metadata: WorldObject['metadata']
-		children?: Snippet<[{ ref: Group }]>
 		color?: string
+		model?: Group
+		renderMode?: 'model' | 'colliders' | 'colliders+model'
+		children?: Snippet<[{ ref: Group }]>
 	}
 
 	let {
@@ -36,32 +37,15 @@
 		metadata,
 		pose,
 		color: overrideColor,
+		model,
+		renderMode = 'colliders',
 		children,
 		...rest
 	}: Props = $props()
 
-	const gltfModel = $derived.by(() => {
-		const [componentName, id] = name.split(':')
-		if (!componentName || !id) {
-			return undefined
-		}
-		return componentModels.current?.[componentName]?.[id]
-	})
-
 	const type = $derived(geometry?.geometryType?.case)
 	const color = $derived(overrideColor ?? metadata.color ?? colors.default)
 
-	const renderModels = $derived(
-		(settings.current.renderArmModels === 'model' ||
-			settings.current.renderArmModels === 'colliders+model') &&
-			gltfModel
-	)
-	const renderPrimitives = $derived(
-		settings.current.renderArmModels === 'colliders' ||
-			settings.current.renderArmModels === 'colliders+model' ||
-			!gltfModel
-	)
-
 	const group = new Group()
 	const mesh = $derived.by(() => {
 		if (type === undefined) {
@@ -76,16 +60,6 @@
 		return result
 	})
 
-	$effect.pre(() => {
-		if (
-			weblabs.isActive(WEBLABS_EXPERIMENTS.MOTION_TOOLS_RENDER_ARM_MODELS) &&
-			renderModels &&
-			!renderPrimitives
-		) {
-			geo = undefined
-		}
-	})
-
 	$effect.pre(() => {
 		if (geometry?.center && mesh) {
 			poseToObject3d(geometry.center, mesh)
@@ -139,11 +113,11 @@
 			{uuid}
 			bvh={{ enabled: false }}
 		>
-			{#if weblabs.isActive(WEBLABS_EXPERIMENTS.MOTION_TOOLS_RENDER_ARM_MODELS) && renderModels}
-				<T is={gltfModel} />
+			{#if model && renderMode.includes('model')}
+				<T is={model} />
 			{/if}
 
-			{#if !weblabs.isActive(WEBLABS_EXPERIMENTS.MOTION_TOOLS_RENDER_ARM_MODELS) || renderPrimitives}
+			{#if renderMode.includes('colliders')}
 				{#if geometry.geometryType.case === 'bufferGeometry'}
 					<T
 						is={geometry.geometryType.value}
@@ -193,7 +167,7 @@
 					opacity={metadata.opacity ?? 0.7}
 				/>
 
-				{#if geo}
+				{#if geo && renderMode.includes('colliders')}
 					<T.LineSegments
 						raycast={() => null}
 						bvh={{ enabled: false }}

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

@@ -8,10 +8,12 @@ interface Props extends ThrelteProps<Group> {
     geometry?: WorldObject['geometry'];
     pose: WorldObject['pose'];
     metadata: WorldObject['metadata'];
+    color?: string;
+    model?: Group;
+    renderMode?: 'model' | 'colliders' | 'colliders+model';
     children?: Snippet<[{
         ref: Group;
     }]>;
-    color?: string;
 }
 declare const Geometry: import("svelte").Component<Props, {}, "">;
 type Geometry = ReturnType<typeof Geometry>;

package/dist/hooks/useDrawAPI.svelte.js

@@ -10,17 +10,17 @@ import { createPose, createPoseFromFrame } from '../transform';
 import { useCameraControls } from './useControls.svelte';
 import { useThrelte } from '@threlte/core';
 import { OrientationVector } from '../three/OrientationVector';
+import { useLogs } from './useLogs.svelte';
 const axis = new Vector3();
 const quaternion = new Quaternion();
 const ov = new OrientationVector();
 const key = Symbol('draw-api-context-key');
 const tryParse = (json) => {
     try {
-        return JSON.parse(json);
+        return [null, JSON.parse(json)];
     }
     catch (error) {
-        console.warn('Failed to parse JSON:', error);
-        return;
+        return [error, null];
     }
 };
 /**
@@ -55,6 +55,7 @@ class Float32Reader {
     }
 }
 export const provideDrawAPI = () => {
+    const logs = useLogs();
     const cameraControls = useCameraControls();
     const { invalidate } = useThrelte();
     let pointsIndex = 0;
@@ -380,23 +381,27 @@ export const provideDrawAPI = () => {
     const scheduleReconnect = () => {
         setTimeout(() => {
             reconnectDelay = Math.min(reconnectDelay * 2, maxReconnectDelay);
-            console.log(`Reconnecting in ${reconnectDelay / 1000} seconds...`);
+            logs.add(`Reconnecting to drawing server in ${reconnectDelay / 1000} seconds...`, 'warn');
             connect();
         }, reconnectDelay);
     };
     const onOpen = () => {
         connectionStatus = 'open';
         reconnectDelay = 1000;
-        console.log(`Connected to websocket server at ${BACKEND_IP}:${BUN_SERVER_PORT}`);
+        logs.add(`Connected to drawing server at ${BACKEND_IP}:${BUN_SERVER_PORT}`);
     };
     const onClose = () => {
         connectionStatus = 'closed';
-        console.log('Disconnected from websocket server');
+        logs.add('Disconnected from drawing server', 'warn');
         scheduleReconnect();
     };
     const onError = (event) => {
-        console.log('Websocket error', JSON.stringify(event));
+        const stringified = JSON.stringify(event);
         ws.close();
+        if (stringified === '{"isTrusted":true}') {
+            return;
+        }
+        logs.add(`Drawing server error: ${JSON.stringify(event)}`, 'error');
     };
     const onMessage = async (event) => {
         if (typeof event.data === 'object' && 'arrayBuffer' in event.data) {
@@ -418,7 +423,10 @@ export const provideDrawAPI = () => {
                 return drawGLTF(reader.buffer);
             }
         }
-        const data = tryParse(event.data);
+        const [error, data] = tryParse(event.data);
+        if (error) {
+            logs.add(`Failed to parse JSON from drawing server: ${JSON.stringify(error)}`, 'error');
+        }
         if (!data)
             return;
         if ('setCameraPose' in data) {

package/dist/hooks/useFrames.svelte.js

@@ -24,7 +24,11 @@ export const provideFrames = (partID) => {
         if (revision) {
             untrack(() => query.current).refetch();
         }
-        logs.add('Fetching frames...');
+    });
+    $effect.pre(() => {
+        if (query.current.isFetching) {
+            logs.add('Fetching frames...');
+        }
     });
     $effect.pre(() => {
         if (partConfig.isDirty) {

package/dist/lib.js

@@ -1,4 +1,6 @@
 // Components
+// NOTE: These components should be pure and not use any hooks if you add a new component to export here
+// ensure you write a corresponding unit test to assert the component works in absence of parent providers in /src/lib/__tests__/PureComponents.svelte.spec.ts
 export { default as Geometry } from './components/Geometry.svelte';
 export { default as AxesHelper } from './components/AxesHelper.svelte';
 // Classes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -40,6 +40,7 @@
     "@viamrobotics/sdk": "0.55.0",
     "@viamrobotics/svelte-sdk": "0.7.1",
     "@vitejs/plugin-basic-ssl": "2.1.0",
+    "@vitest/coverage-v8": "^3.2.4",
     "@zag-js/svelte": "1.22.1",
     "@zag-js/tree-view": "1.22.1",
     "camera-controls": "3.1.0",
@@ -129,6 +130,7 @@
     "test:unit": "vitest",
     "test:client": "go test ./client/... -count=1",
     "test": "pnpm test:unit -- --run",
+    "test:coverage": "npx vitest run --coverage",
     "test:e2e": "playwright test",
     "model-pipeline:run": "node scripts/model-pipeline.js",
     "release": "changeset publish"