@viamrobotics/motion-tools 0.3.5 → 0.3.7

package/dist/color.d.ts

@@ -6,3 +6,4 @@ import { Color, type ColorRepresentation } from 'three';
  * @returns A new THREE.Color instance with the darkened color.
  */
 export declare const darkenColor: (value: ColorRepresentation, percent: number) => Color;
+export declare const mapStringToColor: () => void;

package/dist/color.js

@@ -12,3 +12,4 @@ export const darkenColor = (value, percent) => {
     hsl.l = Math.max(0, hsl.l * (1 - percent / 100));
     return color.setHSL(hsl.h, hsl.s, hsl.l);
 };
+export const mapStringToColor = () => { };

package/dist/components/CameraControls.svelte

@@ -17,7 +17,6 @@
 	import CameraControls from 'camera-controls'
 	import { T, useTask, useThrelte } from '@threlte/core'
 	import type { Snippet } from 'svelte'
-	import { useTransformControls } from '../hooks/useControls.svelte'
 
 	let installed = false
 
@@ -42,17 +41,17 @@
 <script lang="ts">
 	interface Props {
 		ref?: CameraControls
+		enabled?: boolean
 		children?: Snippet
 	}
 
-	let { ref = $bindable(), children }: Props = $props()
+	let { ref = $bindable(), enabled = true, children }: Props = $props()
 
 	if (!installed) {
 		install()
 	}
 
 	const { camera, dom, invalidate } = useThrelte()
-	const transformControls = useTransformControls()
 
 	const controls = new CameraControls(camera.current as PerspectiveCamera, dom)
 
@@ -61,7 +60,7 @@
 	})
 
 	$effect.pre(() => {
-		controls.enabled = !transformControls.active
+		controls.enabled = enabled
 	})
 
 	useTask(

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

@@ -2,6 +2,7 @@ import CameraControls from 'camera-controls';
 import type { Snippet } from 'svelte';
 interface Props {
     ref?: CameraControls;
+    enabled?: boolean;
     children?: Snippet;
 }
 declare const CameraControls: import("svelte").Component<Props, {}, "ref">;

package/dist/components/Frame.svelte

@@ -1,17 +1,9 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
-	import { type Snippet } from 'svelte'
-	import { meshBounds, MeshLineGeometry, MeshLineMaterial } from '@threlte/extras'
-	import { BufferGeometry, DoubleSide, FrontSide, Mesh, Object3D } from 'three'
-	import { CapsuleGeometry } from '../three/CapsuleGeometry'
-	import { poseToObject3d } from '../transform'
-	import { darkenColor } from '../color'
-	import AxesHelper from './AxesHelper.svelte'
+	import type { Snippet } from 'svelte'
+	import type { Object3D } from 'three'
 	import type { WorldObject } from '../WorldObject'
-	import { PLYLoader } from 'three/addons/loaders/PLYLoader.js'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
-
-	const plyLoader = new PLYLoader()
+	import Geometry from './Geometry.svelte'
 
 	interface Props {
 		uuid: string
@@ -22,91 +14,13 @@
 		children?: Snippet<[{ ref: Object3D }]>
 	}
 
-	let { uuid, name, geometry, metadata, pose, children }: Props = $props()
-
-	const type = $derived(geometry?.case)
-	const mesh = $derived.by(() => {
-		const object3d = type === undefined ? new Object3D() : new Mesh()
-
-		if (type === 'mesh' || type === 'points' || type === 'line') {
-			object3d.raycast = meshBounds
-		}
-
-		return object3d
-	})
-
-	$effect.pre(() => {
-		poseToObject3d(pose, mesh)
-	})
+	let { uuid, ...rest }: Props = $props()
 
 	const events = useObjectEvents(() => uuid)
-
-	let geo = $state<BufferGeometry>()
 </script>
 
-<T
-	is={mesh}
-	{name}
+<Geometry
 	{uuid}
 	{...events}
->
-	{#if geometry?.case === 'mesh'}
-		{@const meshGeometry = plyLoader.parse(atob(geometry.value.mesh as unknown as string))}
-		<T is={meshGeometry} />
-	{:else if geometry?.case === 'line' && metadata.points}
-		<MeshLineGeometry points={metadata.points} />
-	{:else if geometry?.case === 'box'}
-		{@const dimsMm = geometry.value.dimsMm ?? { x: 0, y: 0, z: 0 }}
-		<T.BoxGeometry
-			args={[dimsMm.x * 0.001, dimsMm.y * 0.001, dimsMm.z * 0.001]}
-			oncreate={(ref) => {
-				geo = ref
-			}}
-		/>
-	{:else if geometry?.case === 'sphere'}
-		{@const radiusMm = geometry.value.radiusMm ?? 0}
-		<T.SphereGeometry
-			args={[radiusMm * 0.001]}
-			oncreate={(ref) => {
-				geo = ref
-			}}
-		/>
-	{:else if geometry?.case === 'capsule'}
-		{@const { lengthMm, radiusMm } = geometry.value}
-		<T
-			is={CapsuleGeometry}
-			args={[radiusMm * 0.001, lengthMm * 0.001]}
-			oncreate={(ref) => {
-				geo = ref
-			}}
-		/>
-	{:else}
-		<AxesHelper
-			width={5}
-			length={0.1}
-		/>
-	{/if}
-
-	{#if geometry?.case === 'line'}
-		<MeshLineMaterial
-			color={metadata.color ?? 'red'}
-			width={0.005}
-		/>
-	{:else if geometry}
-		<T.MeshToonMaterial
-			color={metadata.color ?? 'red'}
-			side={geometry.case === 'mesh' ? DoubleSide : FrontSide}
-			transparent
-			opacity={0.7}
-		/>
-
-		{#if geo}
-			<T.LineSegments raycast={() => null}>
-				<T.EdgesGeometry args={[geo, 1]} />
-				<T.LineBasicMaterial color={darkenColor(metadata.color ?? 'red', 10)} />
-			</T.LineSegments>
-		{/if}
-	{/if}
-
-	{@render children?.({ ref: mesh })}
-</T>
+	{...rest}
+/>

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

@@ -1,5 +1,5 @@
-import { type Snippet } from 'svelte';
-import { Object3D } from 'three';
+import type { Snippet } from 'svelte';
+import type { Object3D } from 'three';
 import type { WorldObject } from '../WorldObject';
 interface Props {
     uuid: string;

package/dist/components/Geometry.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { type Snippet } from 'svelte'
+	import { meshBounds, MeshLineGeometry, MeshLineMaterial } from '@threlte/extras'
+	import { BufferGeometry, DoubleSide, FrontSide, Mesh, Object3D } from 'three'
+	import { CapsuleGeometry } from '../three/CapsuleGeometry'
+	import { poseToObject3d } from '../transform'
+	import { darkenColor } from '../color'
+	import AxesHelper from './AxesHelper.svelte'
+	import type { WorldObject } from '../WorldObject'
+	import { PLYLoader } from 'three/addons/loaders/PLYLoader.js'
+
+	const plyLoader = new PLYLoader()
+
+	interface Props {
+		uuid: string
+		name: string
+		geometry?: WorldObject['geometry']
+		pose: WorldObject['pose']
+		metadata: WorldObject['metadata']
+		children?: Snippet<[{ ref: Object3D }]>
+		[prop: string]: unknown
+	}
+
+	let { uuid, name, geometry, metadata, pose, children, ...rest }: Props = $props()
+
+	const type = $derived(geometry?.case)
+	const mesh = $derived.by(() => {
+		const object3d = type === undefined ? new Object3D() : new Mesh()
+
+		if (type === 'mesh' || type === 'points' || type === 'line') {
+			object3d.raycast = meshBounds
+		}
+
+		return object3d
+	})
+
+	$effect.pre(() => {
+		poseToObject3d(pose, mesh)
+	})
+
+	let geo = $state<BufferGeometry>()
+</script>
+
+<T
+	is={mesh}
+	{name}
+	{uuid}
+	{...rest}
+>
+	{#if geometry?.case === 'mesh'}
+		{@const meshGeometry = plyLoader.parse(atob(geometry.value.mesh as unknown as string))}
+		<T is={meshGeometry} />
+	{:else if geometry?.case === 'line' && metadata.points}
+		<MeshLineGeometry points={metadata.points} />
+	{:else if geometry?.case === 'box'}
+		{@const dimsMm = geometry.value.dimsMm ?? { x: 0, y: 0, z: 0 }}
+		<T.BoxGeometry
+			args={[dimsMm.x * 0.001, dimsMm.y * 0.001, dimsMm.z * 0.001]}
+			oncreate={(ref) => {
+				geo = ref
+			}}
+		/>
+	{:else if geometry?.case === 'sphere'}
+		{@const radiusMm = geometry.value.radiusMm ?? 0}
+		<T.SphereGeometry
+			args={[radiusMm * 0.001]}
+			oncreate={(ref) => {
+				geo = ref
+			}}
+		/>
+	{:else if geometry?.case === 'capsule'}
+		{@const { lengthMm, radiusMm } = geometry.value}
+		<T
+			is={CapsuleGeometry}
+			args={[radiusMm * 0.001, lengthMm * 0.001]}
+			oncreate={(ref) => {
+				geo = ref
+			}}
+		/>
+	{:else}
+		<AxesHelper
+			width={5}
+			length={0.1}
+		/>
+	{/if}
+
+	{#if geometry?.case === 'line'}
+		<MeshLineMaterial
+			color={metadata.color ?? 'red'}
+			width={0.005}
+		/>
+	{:else if geometry}
+		<T.MeshToonMaterial
+			color={metadata.color ?? 'red'}
+			side={geometry.case === 'mesh' ? DoubleSide : FrontSide}
+			transparent
+			opacity={0.7}
+		/>
+
+		{#if geo}
+			<T.LineSegments raycast={() => null}>
+				<T.EdgesGeometry args={[geo, 1]} />
+				<T.LineBasicMaterial color={darkenColor(metadata.color ?? 'red', 10)} />
+			</T.LineSegments>
+		{/if}
+	{/if}
+
+	{@render children?.({ ref: mesh })}
+</T>

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

@@ -0,0 +1,17 @@
+import { type Snippet } from 'svelte';
+import { Object3D } from 'three';
+import type { WorldObject } from '../WorldObject';
+interface Props {
+    uuid: string;
+    name: string;
+    geometry?: WorldObject['geometry'];
+    pose: WorldObject['pose'];
+    metadata: WorldObject['metadata'];
+    children?: Snippet<[{
+        ref: Object3D;
+    }]>;
+    [prop: string]: unknown;
+}
+declare const Geometry: import("svelte").Component<Props, {}, "">;
+type Geometry = ReturnType<typeof Geometry>;
+export default Geometry;

package/dist/components/Scene.svelte

@@ -14,6 +14,7 @@
 	import { useFocused } from '../hooks/useSelection.svelte'
 	import type { Snippet } from 'svelte'
 	import { useXR } from '@threlte/xr'
+	import { useTransformControls } from '../hooks/useControls.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -32,6 +33,7 @@
 	})
 
 	const focused = useFocused()
+	const transformControls = useTransformControls()
 
 	const { isPresenting } = useXR()
 </script>
@@ -45,7 +47,7 @@
 	{#if focused.current === undefined}
 		{#if !$isPresenting}
 			<Camera position={[3, 3, 3]}>
-				<CameraControls>
+				<CameraControls enabled={!transformControls.active}>
 					<Gizmo />
 				</CameraControls>
 			</Camera>

package/dist/components/Tree/Tree.svelte

@@ -153,7 +153,7 @@
 		>
 			{#if rootChildren.length === 0}
 				<p class="text-subtle-2 px-2 py-4">No objects displayed</p>
-			{:else}
+			{:else if rootChildren.length > 200}
 				<VirtualList
 					class="w-full"
 					style="height:{Math.min(8, Math.max(rootChildren.length, 5)) * 32}px;"
@@ -163,6 +163,15 @@
 						{@render treeNode({ node: item, indexPath: [Number(index)], api })}
 					{/snippet}
 				</VirtualList>
+			{:else}
+				<div
+					style="height:{Math.min(8, Math.max(rootChildren.length, 5)) * 32}px;"
+					class="overflow-auto"
+				>
+					{#each rootChildren as node, index (node.id)}
+						{@render treeNode({ node, indexPath: [Number(index)], api })}
+					{/each}
+				</div>
 			{/if}
 		</div>
 	</div>

package/dist/hooks/index.d.ts

@@ -1 +0,0 @@
-export { provideConnectionConfigs, useConnectionConfigs, useActiveConnectionConfig, } from './useConnectionConfigs.svelte';

package/dist/hooks/index.js

@@ -1 +1 @@
-export { provideConnectionConfigs, useConnectionConfigs, useActiveConnectionConfig, } from './useConnectionConfigs.svelte';
+"use strict";

package/dist/hooks/useFrames.svelte.js

@@ -29,7 +29,7 @@ export const provideFrames = (partID) => {
         }
         for (const { frame } of query.current.data ?? []) {
             if (frame) {
-                objects.push(new WorldObject(frame.referenceFrame, frame.poseInObserverFrame?.pose, frame.poseInObserverFrame?.referenceFrame, frame.physicalObject?.geometryType));
+                objects.push(new WorldObject(frame.referenceFrame ?? 'Unnamed frame', frame.poseInObserverFrame?.pose, frame.poseInObserverFrame?.referenceFrame, frame.physicalObject?.geometryType));
             }
         }
         return objects;

package/dist/hooks/useGeometries.svelte.js

@@ -8,6 +8,7 @@ import { WorldObject } from '../WorldObject';
 import { usePersistentUUIDs } from './usePersistentUUIDs.svelte';
 import { useLogs } from './useLogs.svelte';
 const key = Symbol('geometries-context');
+let index = 0;
 export const provideGeometries = (partID) => {
     const logs = useLogs();
     const refreshRates = useRefreshRates();
@@ -45,7 +46,7 @@ export const provideGeometries = (partID) => {
             if (!query.data)
                 continue;
             for (const { center, label, geometryType } of query.data.geometries) {
-                results.push(new WorldObject(label, center, query.data.name, geometryType));
+                results.push(new WorldObject(label ? label : `Unnamed geometry ${++index}`, center, query.data.name, geometryType));
             }
         }
         updateUUIDs(results);

package/dist/hooks/usePersistentUUIDs.svelte.js

@@ -1,13 +1,12 @@
 export const usePersistentUUIDs = () => {
     const uuids = new Map();
     const updateUUIDs = (objects) => {
-        if (uuids.size === 0) {
-            for (const object of objects) {
-                uuids.set(object.name, object.uuid);
-            }
-        }
         for (const object of objects) {
-            object.uuid = uuids.get(object.name) ?? object.uuid;
+            const ref = `${object.referenceFrame}-${object.name}`;
+            if (uuids.has(ref) === false) {
+                uuids.set(ref, object.uuid);
+            }
+            object.uuid = uuids.get(ref) ?? object.uuid;
         }
     };
     return { uuids, updateUUIDs };

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 export { default as MotionTools } from './components/App.svelte';
+export { default as CameraControls } from './components/CameraControls.svelte';
+export { default as Geometry } from './components/Geometry.svelte';
 export { AxesHelper } from './three/AxesHelper';
 export { BatchedArrow } from './three/BatchedArrow';
 export { CapsuleGeometry } from './three/CapsuleGeometry';
+export { WorldObject } from './WorldObject';

package/dist/index.js

@@ -1,4 +1,7 @@
 export { default as MotionTools } from './components/App.svelte';
+export { default as CameraControls } from './components/CameraControls.svelte';
+export { default as Geometry } from './components/Geometry.svelte';
 export { AxesHelper } from './three/AxesHelper';
 export { BatchedArrow } from './three/BatchedArrow';
 export { CapsuleGeometry } from './three/CapsuleGeometry';
+export { WorldObject } from './WorldObject';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -20,20 +20,20 @@
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/vite": "^4.1.7",
-    "@tanstack/svelte-query": "^5.77.2",
-    "@tanstack/svelte-query-devtools": "^5.77.2",
+    "@tailwindcss/vite": "^4.1.8",
+    "@tanstack/svelte-query": "^5.79.0",
+    "@tanstack/svelte-query-devtools": "^5.79.0",
     "@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",
-    "@types/bun": "^1.2.14",
+    "@types/bun": "^1.2.15",
     "@types/lodash-es": "^4.17.12",
     "@types/three": "^0.176.0",
-    "@typescript-eslint/eslint-plugin": "^8.32.1",
-    "@typescript-eslint/parser": "^8.32.1",
+    "@typescript-eslint/eslint-plugin": "^8.33.0",
+    "@typescript-eslint/parser": "^8.33.0",
     "@viamrobotics/prime-core": "^0.1.5",
     "@viamrobotics/sdk": "0.42.0",
     "@viamrobotics/svelte-sdk": "0.1.4",
@@ -55,15 +55,15 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "publint": "^0.3.12",
     "runed": "^0.28.0",
-    "svelte": "5.33.4",
+    "svelte": "5.33.8",
     "svelte-check": "^4.2.1",
     "svelte-virtuallists": "^1.4.2",
-    "tailwindcss": "^4.1.7",
+    "tailwindcss": "^4.1.8",
     "three": "^0.176.0",
     "threlte-uikit": "^1.0.0",
     "tsx": "^4.19.4",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1",
+    "typescript-eslint": "^8.33.0",
     "vite": "^6.3.5",
     "vite-plugin-mkcert": "^1.17.8",
     "vitest": "^3.1.4"

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

@@ -1,20 +0,0 @@
-interface ConnectionConfig {
-    host: string;
-    partId: string;
-    apiKeyId: string;
-    apiKeyValue: string;
-    signalingAddress: string;
-}
-interface Context {
-    current: ConnectionConfig[];
-    add: () => void;
-    remove: (index: number) => void;
-    isEnvConfig: (config: ConnectionConfig) => boolean;
-}
-export declare const provideConnectionConfigs: () => void;
-export declare const useConnectionConfigs: () => Context;
-export declare const useActiveConnectionConfig: () => {
-    readonly current: ConnectionConfig | undefined;
-    set(index: number | undefined): void;
-};
-export {};

package/dist/hooks/useConnectionConfigs.svelte.js

@@ -1,59 +0,0 @@
-import { get, set } from 'idb-keyval';
-import { PersistedState } from 'runed';
-import { getContext, setContext } from 'svelte';
-import { envConfigs } from '../../routes/lib/configs';
-import { isEqual } from 'lodash-es';
-const key = Symbol('connection-config-context');
-const activeConfig = new PersistedState('active-connection-config', 0);
-export const provideConnectionConfigs = () => {
-    let connectionConfigs = $state([]);
-    get('connection-configs').then((response) => {
-        if (Array.isArray(response)) {
-            connectionConfigs = response;
-        }
-    });
-    $effect(() => {
-        set('connection-configs', $state.snapshot(connectionConfigs));
-    });
-    const merged = $derived([...envConfigs, ...connectionConfigs]);
-    const add = () => {
-        connectionConfigs.push({
-            host: '',
-            partId: '',
-            apiKeyId: '',
-            apiKeyValue: '',
-            signalingAddress: '',
-        });
-    };
-    const remove = (index) => {
-        connectionConfigs.splice(index - envConfigs.length, 1);
-    };
-    const isEnvConfig = (config) => {
-        return envConfigs.some((value) => isEqual(config, value));
-    };
-    setContext(key, {
-        get current() {
-            return merged;
-        },
-        add,
-        remove,
-        isEnvConfig,
-    });
-};
-export const useConnectionConfigs = () => {
-    return getContext(key);
-};
-export const useActiveConnectionConfig = () => {
-    const connectionConfigs = useConnectionConfigs();
-    return {
-        get current() {
-            if (activeConfig.current === -1) {
-                return undefined;
-            }
-            return connectionConfigs.current.at(activeConfig.current);
-        },
-        set(index) {
-            activeConfig.current = index ?? -1;
-        },
-    };
-};