@viamrobotics/motion-tools 1.23.1 → 1.25.0

package/README.md

@@ -4,14 +4,12 @@
 
 ## Documentation
 
-📚 **[viamrobotics.github.io/visualization](https://viamrobotics.github.io/visualization/)** is the canonical guide. It covers:
+📚 **[viamrobotics.github.io/visualization](https://viamrobotics.github.io/visualization/)** is our guide to a few popular use cases. It covers:
 
 - [Running locally](https://viamrobotics.github.io/visualization/guides/local-usage/) — set up the app and drive it from Go via `client/api`.
-- [Embedding `<MotionTools />`](https://viamrobotics.github.io/visualization/guides/embedding/) — drop the visualizer into your own Svelte app.
-- [Implementing WorldStateStoreService](https://viamrobotics.github.io/visualization/guides/worldstatestore/) — produce `Transform`s for a Viam WSS module with `draw`.
-- API reference for [`client/api`](https://viamrobotics.github.io/visualization/api/client-api/) and [`draw`](https://viamrobotics.github.io/visualization/api/draw/).
-- [v1 → v2 migration guide](https://viamrobotics.github.io/visualization/migration/v1-to-v2/).
-- A live [playground](https://viamrobotics.github.io/visualization/playground/) rendering a baked snapshot.
+- [Embedding `<Visualizer />`](https://viamrobotics.github.io/visualization/guides/embedding/) — drop the visualizer into your own Svelte app.
+- [Implementing WorldStateStoreService](https://viamrobotics.github.io/visualization/guides/worldstatestore/) — produce `Transform`s for a Viam WorldStateStoreService module with `draw`.
+- A live [playground](https://viamrobotics.github.io/visualization/playground/snapshot) rendering a snapshot.
 
 ## Quick start
 

package/dist/components/Entities/Capsule.svelte

@@ -0,0 +1,137 @@
+<!--
+@component
+
+A compound capsule via a shared open-ended unit cylinder and two
+hemispheres, each scaled per `r` and `l`, so dimension changes update
+transforms only and cause no geometry rebuild.
+
+Viam's capsule `l` is the *total* length, including the rounded caps, so the 
+midsection has length `l - 2r`.
+-->
+<script
+	module
+	lang="ts"
+>
+	import { CylinderGeometry, EdgesGeometry, SphereGeometry } from 'three'
+
+	const unitCylinder = new CylinderGeometry(1, 1, 1, 16, 1, true)
+	unitCylinder.rotateX(Math.PI / 2)
+
+	/**
+	 * Hemisphere with rounded part toward +Z and an open boundary on the XY plane.
+	 * 6 height segments matches the existing sphere's density (`Mesh.svelte` uses `SphereGeometry(1, 16, 12)`).
+	 */
+	const unitHemisphere = new SphereGeometry(1, 16, 6, 0, Math.PI * 2, 0, Math.PI / 2)
+	unitHemisphere.rotateX(Math.PI / 2)
+
+	const unitCylinderEdges = new EdgesGeometry(unitCylinder, 0)
+	const unitHemisphereEdges = new EdgesGeometry(unitHemisphere, 0)
+</script>
+
+<script lang="ts">
+	import type { ColorRepresentation } from 'three'
+
+	import { T, useThrelte } from '@threlte/core'
+	import { LineBasicMaterial, MeshToonMaterial } from 'three'
+
+	import { darkenColor } from '../../color'
+
+	interface Props {
+		r: number
+		l: number
+		color: ColorRepresentation
+		opacity?: number
+		depthTest?: boolean
+	}
+
+	let { r, l, color, opacity = 1, depthTest = true }: Props = $props()
+
+	const { invalidate } = useThrelte()
+	const material = new MeshToonMaterial()
+	const lineMaterial = new LineBasicMaterial()
+
+	$effect(() => {
+		material.color.set(color)
+		lineMaterial.color.set(darkenColor(color, 10))
+		invalidate()
+	})
+
+	$effect(() => {
+		const isTransparent = opacity < 1
+		material.opacity = opacity
+		material.depthWrite = opacity === 1
+		material.depthTest = depthTest
+		lineMaterial.depthTest = depthTest
+		if (material.transparent !== isTransparent) {
+			material.transparent = isTransparent
+			material.needsUpdate = true
+		}
+		invalidate()
+	})
+
+	const midsection = $derived(Math.max(0, l - 2 * r))
+	const halfMid = $derived(midsection / 2)
+</script>
+
+{#if midsection > 0}
+	<T.Mesh scale={[r, r, midsection]}>
+		<T
+			is={unitCylinder}
+			dispose={false}
+		/>
+		<T is={material} />
+		<T.LineSegments
+			raycast={() => null}
+			bvh={{ enabled: false }}
+		>
+			<T
+				is={unitCylinderEdges}
+				dispose={false}
+			/>
+			<T is={lineMaterial} />
+		</T.LineSegments>
+	</T.Mesh>
+{/if}
+
+<T.Mesh
+	position={[0, 0, halfMid]}
+	scale={r}
+>
+	<T
+		is={unitHemisphere}
+		dispose={false}
+	/>
+	<T is={material} />
+	<T.LineSegments
+		raycast={() => null}
+		bvh={{ enabled: false }}
+	>
+		<T
+			is={unitHemisphereEdges}
+			dispose={false}
+		/>
+		<T is={lineMaterial} />
+	</T.LineSegments>
+</T.Mesh>
+
+<T.Mesh
+	position={[0, 0, -halfMid]}
+	rotation={[Math.PI, 0, 0]}
+	scale={[r, r, r]}
+>
+	<T
+		is={unitHemisphere}
+		dispose={false}
+	/>
+	<T is={material} />
+	<T.LineSegments
+		raycast={() => null}
+		bvh={{ enabled: false }}
+	>
+		<T
+			is={unitHemisphereEdges}
+			dispose={false}
+		/>
+		<T is={lineMaterial} />
+	</T.LineSegments>
+</T.Mesh>

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

@@ -0,0 +1,19 @@
+import type { ColorRepresentation } from 'three';
+interface Props {
+    r: number;
+    l: number;
+    color: ColorRepresentation;
+    opacity?: number;
+    depthTest?: boolean;
+}
+/**
+ * A compound capsule via a shared open-ended unit cylinder and two
+ * hemispheres, each scaled per `r` and `l`, so dimension changes update
+ * transforms only and cause no geometry rebuild.
+ *
+ * Viam's capsule `l` is the *total* length, including the rounded caps, so the
+ * midsection has length `l - 2r`.
+ */
+declare const Capsule: import("svelte").Component<Props, {}, "">;
+type Capsule = ReturnType<typeof Capsule>;
+export default Capsule;

package/dist/components/Entities/Mesh.svelte

@@ -1,20 +1,36 @@
+<script
+	module
+	lang="ts"
+>
+	import { BoxGeometry, EdgesGeometry, SphereGeometry } from 'three'
+
+	/**
+	 * Shared unit geometries — every mesh references these and sets
+	 * dimensions through `mesh.scale`, so resizing never rebuilds GPU buffers.
+	 */
+	const unitBox = new BoxGeometry(1, 1, 1)
+	const unitSphere = new SphereGeometry(1, 16, 12)
+	const unitBoxEdges = new EdgesGeometry(unitBox, 0)
+	const unitSphereEdges = new EdgesGeometry(unitSphere, 0)
+</script>
+
 <script lang="ts">
 	import type { Pose } from '@viamrobotics/sdk'
 	import type { Entity } from 'koota'
 
 	import { T, type Props as ThrelteProps, useThrelte } from '@threlte/core'
 	import { type Snippet } from 'svelte'
-	import { BufferGeometry, Color, DoubleSide, FrontSide, Material, Mesh } from 'three'
+	import { Color, DoubleSide, FrontSide, Group, Material, Mesh } from 'three'
 
 	import { asColor } from '../../buffer'
 	import { colors, darkenColor } from '../../color'
 	import { traits, useTrait } from '../../ecs'
-	import { CapsuleGeometry } from '../../three/CapsuleGeometry'
 	import { poseToObject3d } from '../../transform'
 
 	import AxesHelper from '../AxesHelper.svelte'
+	import Capsule from './Capsule.svelte'
 
-	interface Props extends ThrelteProps<Mesh> {
+	interface Props extends Omit<ThrelteProps<Mesh>, 'ref'> {
 		entity: Entity
 		color?: string
 		center?: Pose
@@ -56,6 +72,8 @@
 
 	const currentOpacity = $derived(opacity.current ?? 0.7)
 
+	const isCapsule = $derived(capsule.current !== undefined)
+
 	let material = $state.raw<Material>(new Material())
 	$effect(() => {
 		const isTransparent = currentOpacity < 1
@@ -69,83 +87,118 @@
 	})
 
 	const mesh = new Mesh()
-	$effect.pre(() => {
+	const group = new Group()
+
+	$effect(() => {
+		const target = isCapsule ? group : mesh
 		if (center) {
-			poseToObject3d(center, mesh)
+			poseToObject3d(center, target)
 			invalidate()
 		}
 	})
 
-	let geo = $state.raw<BufferGeometry>()
-	$effect.pre(() => {
-		if (!box.current && !sphere.current && !capsule.current && !bufferGeometry.current) {
-			geo = undefined
+	$effect(() => {
+		if (box.current) {
+			const { x, y, z } = box.current
+			mesh.scale.set(x * 0.001, y * 0.001, z * 0.001)
+		} else if (sphere.current) {
+			mesh.scale.setScalar((sphere.current.r ?? 0) * 0.001)
+		} else {
+			mesh.scale.set(1, 1, 1)
 		}
+		invalidate()
 	})
-
-	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}
+{#if isCapsule}
+	{@const { r, l } = capsule.current ?? { r: 0, l: 0 }}
+	<T
+		is={group}
+		name={entity}
+		userData.name={name}
+		renderOrder={renderOrder.current}
+		{...rest}
+	>
+		<Capsule
+			r={r * 0.001}
+			l={l * 0.001}
+			{color}
+			opacity={currentOpacity}
+			depthTest={materialProps.current?.depthTest ?? true}
 		/>
-	{:else if bufferGeometry.current}
-		<T
-			is={bufferGeometry.current}
-			{oncreate}
+
+		{@render children?.()}
+	</T>
+{:else}
+	<T
+		is={mesh}
+		name={entity}
+		userData.name={name}
+		renderOrder={renderOrder.current}
+		{...rest}
+	>
+		{#if box.current}
+			<T
+				is={unitBox}
+				dispose={false}
+			/>
+			<T.LineSegments
+				raycast={() => null}
+				bvh={{ enabled: false }}
+			>
+				<T
+					is={unitBoxEdges}
+					dispose={false}
+				/>
+				<T.LineBasicMaterial color={darkenColor(color, 10)} />
+			</T.LineSegments>
+		{:else if sphere.current}
+			<T
+				is={unitSphere}
+				dispose={false}
+			/>
+			<T.LineSegments
+				raycast={() => null}
+				bvh={{ enabled: false }}
+			>
+				<T
+					is={unitSphereEdges}
+					dispose={false}
+				/>
+				<T.LineBasicMaterial color={darkenColor(color, 10)} />
+			</T.LineSegments>
+		{:else if bufferGeometry.current}
+			<T is={bufferGeometry.current}>
+				{#snippet children({ ref: geo })}
+					<!--
+						TODO(mp) currently some bufferGeometries are coming in empty,
+						this is a quick fix but this should be handled upstream
+					-->
+					{#if 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}
+				{/snippet}
+			</T>
+		{/if}
+
+		<T.MeshToonMaterial
+			{color}
+			side={bufferGeometry.current ? DoubleSide : FrontSide}
+			depthTest={materialProps.current?.depthTest ?? true}
+			oncreate={(m) => {
+				material = m
+			}}
 		/>
-	{/if}
-
-	<T.MeshToonMaterial
-		{color}
-		side={bufferGeometry.current ? DoubleSide : FrontSide}
-		depthTest={materialProps.current?.depthTest ?? true}
-		oncreate={(m) => {
-			material = m
-		}}
-	/>
 
-	<!-- 
-		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>
+		{@render children?.()}
+	</T>
+{/if}
 
 {#if showAxesHelper.current}
 	<AxesHelper

package/dist/components/PCD.svelte

@@ -14,12 +14,21 @@
 		renderOrder?: number
 		depthTest?: boolean
 		depthWrite?: boolean
+		color?: { r: number; g: number; b: number }
 		interactionLayers?: InteractionLayerValue[]
 		oncreate?: (positions: Float32Array, colors: Uint8Array | undefined) => void
 	}
 
-	let { data, name, renderOrder, depthTest, depthWrite, interactionLayers, oncreate }: Props =
-		$props()
+	let {
+		data,
+		name,
+		renderOrder,
+		depthTest,
+		depthWrite,
+		color,
+		interactionLayers,
+		oncreate,
+	}: Props = $props()
 
 	const world = useWorld()
 
@@ -41,11 +50,16 @@
 			if (renderOrder) {
 				entityTraits.push(traits.RenderOrder(renderOrder))
 			}
+
 			if (depthTest !== undefined || depthWrite !== undefined) {
 				entityTraits.push(
 					traits.Material({ depthTest: depthTest ?? true, depthWrite: depthWrite ?? true })
 				)
 			}
+			if (color !== undefined) {
+				geometry.deleteAttribute('color')
+				entityTraits.push(traits.Color({ r: color.r, g: color.g, b: color.b }))
+			}
 			if (interactionLayers?.includes('selectTool')) {
 				entityTraits.push(traits.SelectToolInteractionLayer)
 			}

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

@@ -5,6 +5,11 @@ interface Props {
     renderOrder?: number;
     depthTest?: boolean;
     depthWrite?: boolean;
+    color?: {
+        r: number;
+        g: number;
+        b: number;
+    };
     interactionLayers?: InteractionLayerValue[];
     oncreate?: (positions: Float32Array, colors: Uint8Array | undefined) => void;
 }

package/dist/components/overlay/Details.svelte

@@ -338,7 +338,7 @@
 {#if entity}
 	<div
 		id="details-panel"
-		class="border-medium bg-extralight absolute top-0 right-0 z-4 m-2 w-70 border p-2 text-xs dark:text-black"
+		class="border-medium bg-extralight absolute top-0 right-0 z-4 m-2 w-70 border p-2 text-xs dark:text-white"
 		use:draggable={{
 			bounds: 'body',
 			handle: dragElement,

package/dist/hooks/useArmKinematics.svelte.js

@@ -9,14 +9,18 @@ export const provideArmKinematics = (partID) => {
     const names = $derived(arms.current.map((arm) => arm.name));
     const clients = $derived(arms.current.map((arm) => createResourceClient(ArmClient, partID, () => arm.name)));
     const kinematicsQueries = $derived(clients.map((client) => [client.current?.name, createResourceQuery(client, 'getKinematics', () => options)]));
-    const kinematics = $derived(Object.fromEntries(kinematicsQueries.map(([name, query]) => [
-        name,
-        query.data?.joints.map((j) => ({
-            id: j.id,
-            min: j.min,
-            max: j.max,
-        })),
-    ])));
+    const kinematics = $derived(Object.fromEntries(kinematicsQueries.map(([name, query]) => {
+        const data = query.data;
+        const joints = data && ('joints' in data ? data.joints : data.kinematicsData.joints);
+        return [
+            name,
+            joints?.map((j) => ({
+                id: j.id,
+                min: j.min,
+                max: j.max,
+            })),
+        ];
+    })));
     setContext(key, {
         get names() {
             return names;

package/dist/hooks/usePose.svelte.js

@@ -1,6 +1,5 @@
-import { observe } from '@threlte/core';
-import { commonApi, Pose } from '@viamrobotics/sdk';
-import { createRobotQuery, useRobotClient } from '@viamrobotics/svelte-sdk';
+import { commonApi, MachineConnectionEvent, Pose } from '@viamrobotics/sdk';
+import { createRobotQuery, useConnectionStatus, useRobotClient } from '@viamrobotics/svelte-sdk';
 import { untrack } from 'svelte';
 import { RefetchRates } from '../components/overlay/RefreshRate.svelte';
 import { useEnvironment } from './useEnvironment.svelte';
@@ -12,10 +11,11 @@ import { useResourceByName } from './useResourceByName.svelte';
 import { RefreshRates, useSettings } from './useSettings.svelte';
 const originFrameComponentTypes = new Set(['arm', 'gantry', 'gripper', 'base']);
 export const usePose = (name, parent) => {
+    const partID = usePartID();
+    const connectionStatus = useConnectionStatus(() => partID.current);
     const environment = useEnvironment();
     const logs = useLogs();
     const settings = useSettings();
-    const partID = usePartID();
     const robotClient = useRobotClient(() => partID.current);
     const currentName = $derived(name());
     const currentParent = $derived(parent());
@@ -49,8 +49,10 @@ export const usePose = (name, parent) => {
             logs.add(`Error fetching pose for ${currentName}: ${query.error.message}`, 'error');
         }
     });
-    observe.pre(() => [environment.current.viewerMode, frames.current], () => {
-        if (environment.current.viewerMode === 'monitor') {
+    $effect(() => {
+        if (environment.current.viewerMode === 'monitor' &&
+            frames.current &&
+            connectionStatus.current === MachineConnectionEvent.CONNECTED) {
             untrack(() => query.refetch());
         }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.23.1",
+  "version": "1.25.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -12,7 +12,7 @@
     "@dimforge/rapier3d-compat": "0.18.2",
     "@eslint/compat": "2.0.2",
     "@eslint/js": "10.0.1",
-    "@playwright/test": "1.55.0",
+    "@playwright/test": "1.55.1",
     "@sentry/sveltekit": "10.10.0",
     "@skeletonlabs/skeleton": "3.2.0",
     "@skeletonlabs/skeleton-svelte": "1.5.1",
@@ -37,8 +37,8 @@
     "@typescript-eslint/eslint-plugin": "8.56.1",
     "@typescript-eslint/parser": "8.56.1",
     "@viamrobotics/prime-core": "0.1.5",
-    "@viamrobotics/sdk": "0.58.0",
-    "@viamrobotics/svelte-sdk": "1.0.1",
+    "@viamrobotics/sdk": "0.69.0",
+    "@viamrobotics/svelte-sdk": "1.2.2",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "@zag-js/collapsible": "1.22.1",
@@ -70,7 +70,7 @@
     "svelte-virtuallists": "1.4.2",
     "tailwindcss": "4.1.13",
     "three": "0.183.2",
-    "threlte-uikit": "1.2.1",
+    "threlte-uikit": "^2.0.0",
     "tsx": "4.20.5",
     "type-fest": "^5.0.1",
     "typescript": "5.9.2",
@@ -78,7 +78,7 @@
     "vite": "7.3.2",
     "vite-plugin-devtools-json": "1.0.0",
     "vite-plugin-glsl": "^1.5.5",
-    "vite-plugin-mkcert": "1.17.8",
+    "vite-plugin-mkcert": "1.17.9",
     "vitest": "3.2.4"
   },
   "peerDependencies": {