@viamrobotics/motion-tools 1.3.2 → 1.3.4

package/dist/components/{Arrows.svelte → Arrows/ArrowGroups.svelte}

@@ -1,14 +1,11 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
-	import { Portal } from '@threlte/extras'
-	import { InstancedArrows } from '../three/InstancedArrows/InstancedArrows'
-	import { traits, useWorld } from '../ecs'
+	import { InstancedArrows } from '../../three/InstancedArrows/InstancedArrows'
+	import { traits, useWorld } from '../../ecs'
 	import type { Entity } from 'koota'
-	import { STRIDE } from '../buffer'
-	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
+	import { STRIDE } from '../../buffer'
 	import { SvelteMap } from 'svelte/reactivity'
 	import { Color } from 'three'
-	import { meshBoundsRaycast } from '../three/InstancedArrows/raycast'
+	import Arrows from './Arrows.svelte'
 
 	const world = useWorld()
 
@@ -59,23 +56,8 @@
 </script>
 
 {#each map as [entity, arrows] (entity)}
-	{@const events = useObjectEvents(() => entity)}
-	<Portal id={entity.get(traits.Parent)}>
-		<T
-			is={arrows}
-			name={entity}
-		>
-			<T
-				is={arrows.headMesh}
-				bvh={{ enabled: false }}
-				raycast={() => null}
-			/>
-			<T
-				is={arrows.shaftMesh}
-				bvh={{ enabled: false }}
-				raycast={meshBoundsRaycast}
-				{...events}
-			/>
-		</T>
-	</Portal>
+	<Arrows
+		{entity}
+		{arrows}
+	/>
 {/each}

package/dist/components/Arrows/ArrowGroups.svelte.d.ts

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

package/dist/components/Arrows/Arrows.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { Portal } from '@threlte/extras'
+	import type { Entity } from 'koota'
+	import { traits } from '../../ecs'
+	import { useObjectEvents } from '../../hooks/useObjectEvents.svelte'
+	import type { InstancedArrows } from '../../three/InstancedArrows/InstancedArrows'
+	import { meshBoundsRaycast } from '../../three/InstancedArrows/raycast'
+
+	interface Props {
+		entity: Entity
+		arrows: InstancedArrows
+	}
+
+	let { entity, arrows }: Props = $props()
+
+	const events = useObjectEvents(() => entity)
+</script>
+
+<Portal id={entity.get(traits.Parent)}>
+	<T
+		is={arrows}
+		name={entity}
+	>
+		<T
+			is={arrows.headMesh}
+			bvh={{ enabled: false }}
+			raycast={() => null}
+			visible={events.visible}
+		/>
+		<T
+			is={arrows.shaftMesh}
+			bvh={{ enabled: false }}
+			raycast={meshBoundsRaycast}
+			{...events}
+		/>
+	</T>
+</Portal>

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

@@ -0,0 +1,9 @@
+import type { Entity } from 'koota';
+import type { InstancedArrows } from '../../three/InstancedArrows/InstancedArrows';
+interface Props {
+    entity: Entity;
+    arrows: InstancedArrows;
+}
+declare const Arrows: import("svelte").Component<Props, {}, "">;
+type Arrows = ReturnType<typeof Arrows>;
+export default Arrows;

package/dist/components/Details.svelte

@@ -14,7 +14,7 @@
 	import { draggable } from '@neodrag/svelte'
 	import { Check, Copy } from 'lucide-svelte'
 	import { useTask } from '@threlte/core'
-	import { Button, Icon, Select, Input } from '@viamrobotics/prime-core'
+	import { Button, Icon, Select, Input, Tooltip } from '@viamrobotics/prime-core'
 	import {
 		useSelectedEntity,
 		useFocusedEntity,
@@ -28,14 +28,13 @@
 	import { traits, useTrait } from '../ecs'
 	import { useResourceByName } from '../hooks/useResourceByName.svelte'
 	import { PersistedState } from 'runed'
+	import { useCameraControls } from '../hooks/useControls.svelte'
 
 	const { ...rest } = $props()
 
-	const dragPosition = new PersistedState<Vector2Like | undefined>(
-		'details-drag-position',
-		undefined
-	)
+	const dragPosition = new PersistedState<Vector2Like>('details-drag-position', { x: 0, y: 0 })
 
+	const controls = useCameraControls()
 	const resourceByName = useResourceByName()
 	const frames = useFrames()
 	const partConfig = usePartConfig()
@@ -247,13 +246,46 @@
 		{...rest}
 	>
 		<div class="flex items-center justify-between gap-2 pb-2">
-			<div class="flex items-center gap-1">
+			<div class="flex w-[90%] items-center gap-1">
 				<button bind:this={dragElement}>
 					<Icon name="drag" />
 				</button>
-				<strong>{name.current}</strong>
+				<strong class="overflow-hidden text-nowrap text-ellipsis">{name.current}</strong>
 				<span class="text-subtle-2">{resourceName?.subtype}</span>
 			</div>
+
+			{#if object3d}
+				<Tooltip
+					let:tooltipID
+					location="bottom"
+				>
+					<button
+						class="text-subtle-2"
+						aria-describedby={tooltipID}
+						onclick={() => {
+							const padding = 0.4
+
+							if (!controls.current) return
+
+							const { azimuthAngle, polarAngle } = controls.current
+
+							controls.current.fitToBox(object3d, true, {
+								paddingTop: padding,
+								paddingBottom: padding,
+								paddingLeft: padding,
+								paddingRight: padding,
+							})
+
+							// Preserve previous rotation
+							controls.current?.rotateAzimuthTo(azimuthAngle, true)
+							controls.current?.rotatePolarTo(polarAngle, true)
+						}}
+					>
+						<Icon name="image-filter-center-focus" />
+					</button>
+					<p slot="description">Zoom to object</p>
+				</Tooltip>
+			{/if}
 		</div>
 
 		<div class="border-medium -mx-2 w-[100%+0.5rem] border-b"></div>

package/dist/components/Geometry2.svelte

@@ -132,6 +132,7 @@
 		<T
 			is={mesh}
 			name={entity}
+			userData.name={name}
 			bvh={{ enabled: geometryType === 'buffer' }}
 		>
 			{#if model && renderMode.includes('model')}

package/dist/components/KeyboardControls.svelte

@@ -3,8 +3,9 @@
 	import { useTask } from '@threlte/core'
 	import type { CameraControlsRef } from '@threlte/extras'
 	import { PressedKeys } from 'runed'
-	import { useFocusedEntity } from '../hooks/useSelection.svelte'
+	import { useFocusedEntity, useSelectedEntity } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
+	import { useVisibility } from '../hooks/useVisibility.svelte'
 
 	interface Props {
 		cameraControls: CameraControlsRef
@@ -13,7 +14,12 @@
 	let { cameraControls }: Props = $props()
 
 	const focusedEntity = useFocusedEntity()
+	const selectedEntity = useSelectedEntity()
+
+	const entity = $derived(focusedEntity.current ?? selectedEntity.current)
+
 	const settings = useSettings()
+	const visibility = useVisibility()
 
 	const keys = new PressedKeys()
 	const meta = $derived(keys.has('meta'))
@@ -28,6 +34,7 @@
 	const down = $derived(keys.has('arrowdown'))
 	const right = $derived(keys.has('arrowright'))
 	const any = $derived(w || s || a || d || r || f || up || left || down || right)
+
 	const { start, stop } = useTask(
 		(delta) => {
 			const dt = delta * 1000
@@ -117,4 +124,24 @@
 	keys.onKeys('x', () => {
 		settings.current.enableXR = !settings.current.enableXR
 	})
+
+	/**
+	 * Handler for any keybindings that need to access the event object
+	 */
+	const onkeydown = (event: KeyboardEvent) => {
+		const key = event.key.toLowerCase()
+
+		if (key === 'h') {
+			if (!entity) return
+
+			event.stopImmediatePropagation()
+
+			const visible = visibility.get(entity) ?? true
+
+			visibility.set(entity, !visible)
+			return
+		}
+	}
 </script>
+
+<svelte:window {onkeydown} />

package/dist/components/Scene.svelte

@@ -17,7 +17,7 @@
 	import MeasureTool from './MeasureTool.svelte'
 	import PointerMissBox from './PointerMissBox.svelte'
 	import BatchedArrows from './BatchedArrows.svelte'
-	import Arrows from './Arrows.svelte'
+	import Arrows from './Arrows/ArrowGroups.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -30,17 +30,19 @@
 	const origin = useOrigin()
 
 	const { raycaster, enabled } = interactivity({
-		filter: (items) => {
-			const item = items.find((item) => {
-				return item.object.visible === undefined || item.object.visible === true
+		filter: (intersections) => {
+			const match = intersections.find((intersection) => {
+				return intersection.object.visible === undefined || intersection.object.visible === true
 			})
 
-			return item ? [item] : []
+			return match ? [match] : []
 		},
 	})
+
 	$effect(() => {
 		enabled.set(!settings.current.enableMeasure)
 	})
+
 	raycaster.firstHitOnly = true
 	raycaster.params.Points.threshold = 0.005
 

package/dist/components/Tree/Settings.svelte

@@ -18,7 +18,7 @@
 	const cameras = useResourceNames(() => partID.current, 'camera')
 	const visionServices = useResourceNames(() => partID.current, 'vision')
 	const settings = useSettings()
-	const { disabledCameras, disabledVisionServicesObjectPointclouds } = useMachineSettings()
+	const { disabledCameras, disabledVisionServices } = useMachineSettings()
 	const geometries = useGeometries()
 	const pointclouds = usePointClouds()
 	const { refetchPoses } = useRefetchPoses()
@@ -81,9 +81,9 @@
 				<div class="flex items-center justify-between gap-4 py-2">
 					{visionService.name}
 					<Switch
-						on={disabledVisionServicesObjectPointclouds.get(visionService.name) !== true}
+						on={disabledVisionServices.get(visionService.name) !== true}
 						on:change={(event) => {
-							disabledVisionServicesObjectPointclouds.set(visionService.name, !event.detail)
+							disabledVisionServices.set(visionService.name, !event.detail)
 						}}
 					/>
 				</div>

package/dist/components/Tree/Tree.svelte

@@ -92,11 +92,14 @@
 		{@const { children = [] } = node}
 		<div
 			{...api.getBranchProps(nodeProps)}
-			class={{
-				'text-disabled': !isVisible,
-				'bg-medium': selected,
-				sticky: true,
-			}}
+			class={[
+				'w-full',
+				{
+					'text-disabled': !isVisible,
+					'bg-medium': selected,
+					sticky: true,
+				},
+			]}
 		>
 			<div {...api.getBranchControlProps(nodeProps)}>
 				<span
@@ -106,7 +109,7 @@
 					<ChevronRight size={14} />
 				</span>
 				<span
-					class="flex items-center"
+					class="flex items-center overflow-hidden text-ellipsis"
 					{...api.getBranchTextProps(nodeProps)}
 				>
 					{node.entity.get(traits.Name)}
@@ -151,7 +154,7 @@
 			class={{ 'flex justify-between': true, 'text-disabled': !isVisible, 'bg-medium': selected }}
 			{...api.getItemProps(nodeProps)}
 		>
-			<span class="flex items-center gap-1.5">
+			<span class="flex items-center gap-1.5 overflow-hidden text-nowrap text-ellipsis">
 				{node.entity.get(traits.Name)}
 			</span>
 

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

@@ -6,7 +6,7 @@ export declare const RefreshRates: {
 type Context = {
     refreshRates: SvelteMap<string, number>;
     disabledCameras: SvelteMap<string, boolean>;
-    disabledVisionServicesObjectPointclouds: SvelteMap<string, boolean>;
+    disabledVisionServices: SvelteMap<string, boolean>;
 };
 export declare const provideMachineSettings: () => void;
 export declare const useMachineSettings: () => Context;

package/dist/hooks/useMachineSettings.svelte.js

@@ -4,7 +4,7 @@ import { SvelteMap } from 'svelte/reactivity';
 const key = Symbol('polling-rate-context');
 const refreshRatesKey = 'polling-rate';
 const disabledCamerasKey = 'disabled-cameras';
-const disabledVisionServicesObjectPointcloudsKey = 'disabled-vision-services-object-pointcloud';
+const disabledVisionServicesKey = 'disabled-vision-services-object-pointcloud';
 export const RefreshRates = {
     poses: 'poses',
     pointclouds: 'pointclouds',
@@ -22,15 +22,15 @@ export const provideMachineSettings = () => {
         [RefreshRates.pointclouds, -1],
     ]);
     const disabledCameras = new SvelteMap();
-    const disabledVisionServicesObjectPointclouds = new SvelteMap();
+    const disabledVisionServices = new SvelteMap();
     get(refreshRatesKey).then((entries) => {
         setFromEntries(refreshRates, entries);
     });
     get(disabledCamerasKey).then((entries) => {
         setFromEntries(disabledCameras, entries);
     });
-    get(disabledVisionServicesObjectPointcloudsKey).then((entries) => {
-        setFromEntries(disabledVisionServicesObjectPointclouds, entries);
+    get(disabledVisionServicesKey).then((entries) => {
+        setFromEntries(disabledVisionServices, entries);
     });
     $effect(() => {
         set(refreshRatesKey, [...refreshRates.entries()]);
@@ -38,6 +38,9 @@ export const provideMachineSettings = () => {
     $effect(() => {
         set(disabledCamerasKey, [...disabledCameras.entries()]);
     });
+    $effect(() => {
+        set(disabledVisionServicesKey, [...disabledVisionServices.entries()]);
+    });
     setContext(key, {
         get refreshRates() {
             return refreshRates;
@@ -45,8 +48,8 @@ export const provideMachineSettings = () => {
         get disabledCameras() {
             return disabledCameras;
         },
-        get disabledVisionServicesObjectPointclouds() {
-            return disabledVisionServicesObjectPointclouds;
+        get disabledVisionServices() {
+            return disabledVisionServices;
         },
     });
 };

package/dist/hooks/useObjectEvents.svelte.js

@@ -3,39 +3,47 @@ import { useFocusedEntity, useSelectedEntity } from './useSelection.svelte';
 import { useVisibility } from './useVisibility.svelte';
 import { Vector2 } from 'three';
 export const useObjectEvents = (entity) => {
+    const down = new Vector2();
     const selectedEntity = useSelectedEntity();
     const focusedEntity = useFocusedEntity();
     const visibility = useVisibility();
-    const down = new Vector2();
-    const currentEntity = $derived(entity());
     const cursor = useCursor();
+    const currentEntity = $derived(entity());
+    const visible = $derived(currentEntity ? (visibility.get(currentEntity) ?? true) : true);
+    const onpointerenter = (event) => {
+        event.stopPropagation();
+        cursor.onPointerEnter();
+    };
+    const onpointerleave = (event) => {
+        event.stopPropagation();
+        cursor.onPointerLeave();
+    };
+    const ondblclick = (event) => {
+        event.stopPropagation();
+        focusedEntity.set(currentEntity, event.instanceId ?? event.batchId);
+    };
+    const onpointerdown = (event) => {
+        down.copy(event.pointer);
+    };
+    const onclick = (event) => {
+        event.stopPropagation();
+        if (down.distanceToSquared(event.pointer) < 0.1) {
+            selectedEntity.set(currentEntity, event.instanceId ?? event.batchId);
+        }
+    };
+    $effect(() => {
+        if (!visible) {
+            cursor.onPointerLeave();
+        }
+    });
     return {
         get visible() {
-            if (!currentEntity) {
-                return true;
-            }
-            return visibility.get(currentEntity) ?? true;
-        },
-        onpointerenter: (event) => {
-            event.stopPropagation();
-            cursor.onPointerEnter();
-        },
-        onpointerleave: (event) => {
-            event.stopPropagation();
-            cursor.onPointerLeave();
-        },
-        ondblclick: (event) => {
-            event.stopPropagation();
-            focusedEntity.set(currentEntity, event.instanceId ?? event.batchId);
-        },
-        onpointerdown: (event) => {
-            down.copy(event.pointer);
-        },
-        onclick: (event) => {
-            event.stopPropagation();
-            if (down.distanceToSquared(event.pointer) < 0.1) {
-                selectedEntity.set(currentEntity, event.instanceId ?? event.batchId);
-            }
+            return visible;
         },
+        onpointerenter,
+        onpointerleave,
+        ondblclick,
+        onpointerdown,
+        onclick,
     };
 };

package/dist/hooks/usePointcloudObjects.svelte.js

@@ -13,7 +13,7 @@ const key = Symbol('pointcloud-object-context');
 export const providePointcloudObjects = (partID) => {
     const world = useWorld();
     const environment = useEnvironment();
-    const { refreshRates, disabledVisionServicesObjectPointclouds } = useMachineSettings();
+    const { refreshRates, disabledVisionServices } = useMachineSettings();
     const services = useResourceNames(partID, 'vision');
     const clients = $derived(services.current.map((service) => createResourceClient(VisionClient, partID, () => service.name)));
     const propQueries = $derived(clients.map((client) => [
@@ -31,7 +31,8 @@ export const providePointcloudObjects = (partID) => {
             if (environment.current.viewerMode === 'monitor' &&
                 fetchedPropQueries &&
                 client.current?.name &&
-                interval !== RefetchRates.OFF) {
+                interval !== RefetchRates.OFF &&
+                disabledVisionServices.get(client.current?.name) !== true) {
                 results.push(client);
             }
         }
@@ -47,8 +48,8 @@ export const providePointcloudObjects = (partID) => {
     $effect(() => {
         for (const [name, query] of propQueries) {
             if (name && query.data?.objectPointCloudsSupported === false) {
-                if (disabledVisionServicesObjectPointclouds.get(name) === undefined) {
-                    disabledVisionServicesObjectPointclouds.set(name, true);
+                if (disabledVisionServices.get(name) === undefined) {
+                    disabledVisionServices.set(name, true);
                 }
             }
         }
@@ -83,7 +84,11 @@ export const providePointcloudObjects = (partID) => {
             }
         }
         Promise.allSettled(responses.map(async ([name, pointcloudObjects]) => {
-            const pointclouds = await Promise.all(pointcloudObjects.map((value) => parsePcdInWorker(new Uint8Array(value.pointCloud))));
+            const pointclouds = await Promise.all(pointcloudObjects
+                .filter((value) => value !== undefined)
+                .map((value) => {
+                return parsePcdInWorker(new Uint8Array(value.pointCloud));
+            }));
             return {
                 name,
                 pointclouds,

package/dist/hooks/usePose.svelte.js

@@ -10,6 +10,7 @@ import { RefetchRates } from '../components/RefreshRate.svelte';
 import { useLogs } from './useLogs.svelte';
 import { useResourceByName } from './useResourceByName.svelte';
 import { useRefetchPoses } from './useRefetchPoses';
+const origingFrameComponentTypes = ['arm', 'gantry', 'gripper'];
 export const usePose = (name, parent) => {
     const environment = useEnvironment();
     const logs = useLogs();
@@ -25,10 +26,10 @@ export const usePose = (name, parent) => {
     const frames = useFrames();
     let pose = $state(undefined);
     const interval = $derived(refreshRates.get(RefreshRates.poses));
-    const resolvedParent = $derived(parentResource?.subtype === 'arm' || parentResource?.subtype === 'gantry'
+    const resolvedParent = $derived(origingFrameComponentTypes.includes(parentResource?.subtype ?? '')
         ? `${parent()}_origin`
         : parent());
-    const resolvedName = $derived(resource?.subtype === 'arm' || resource?.subtype === 'gantry'
+    const resolvedName = $derived(origingFrameComponentTypes.includes(resource?.subtype ?? '')
         ? `${currentName}_origin`
         : currentName);
     const query = createRobotQuery(robotClient, 'getPose', () => [resolvedName, resolvedParent ?? 'world', []], () => ({

package/dist/loaders/pcd/worker.js

@@ -9,7 +9,12 @@ self.onmessage = async (event) => {
     try {
         const pcd = loader.parse(data.buffer);
         if (pcd.geometry) {
-            const positions = pcd.geometry.attributes.position.array;
+            /**
+             * Positions is _usually_ defined. However, we have experienced parsing PCDs from Viam APIs that
+             * result in the Three.js parser not attaching this attribute, throwing errors downstream.
+             */
+            const positions = pcd.geometry.attributes.position?.array ??
+                new Float32Array(0);
             const colors = pcd.geometry.attributes.color?.array ?? null;
             postMessage({ positions, colors, id }, colors ? [positions.buffer, colors.buffer] : [positions.buffer]);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",

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

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