@viamrobotics/motion-tools 1.11.0 → 1.11.1

package/dist/components/App.svelte

@@ -29,6 +29,7 @@
 	import Camera from './overlay/widgets/Camera.svelte'
 	import HoveredEntities from './hover/HoveredEntities.svelte'
 	import Settings from './overlay/settings/Settings.svelte'
+	import { useXR } from '@threlte/xr'
 
 	interface LocalConfigProps {
 		getLocalPartConfig: () => Struct
@@ -67,6 +68,7 @@
 	const settings = provideSettings()
 	const environment = provideEnvironment()
 	const currentRobotCameraWidgets = $derived(settings.current.openCameraWidgets[partID] || [])
+	const { isPresenting } = useXR()
 
 	$effect(() => {
 		settings.current.enableKeybindings = enableKeybindings
@@ -148,7 +150,7 @@
 						<ArmPositions />
 					{/if}
 
-					{#if !focus}
+					{#if !focus && !$isPresenting}
 						{#each currentRobotCameraWidgets as cameraName (cameraName)}
 							<Camera name={cameraName} />
 						{/each}

package/dist/components/Focus.svelte

@@ -49,14 +49,7 @@
 	</TrackballControls>
 </Camera>
 
-<T
-	is={object3d}
-	bvh={{
-		enabled: object3d.type === 'Points',
-		maxDepth: 40,
-		maxLeafTris: 20,
-	}}
-/>
+<T is={object3d} />
 
 <T.BoxHelper
 	args={[object3d, 'red']}

package/dist/components/Geometry.svelte

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

package/dist/components/Lasso/Lasso.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import type { IntersectionEvent } from '@threlte/extras'
+	import Line from './Line.svelte'
+	import { useCameraControls } from '../../hooks/useControls.svelte'
+	import earcut from 'earcut'
+	import { Box3, BufferAttribute, Vector3 } from 'three'
+
+	interface Props {
+		debug?: boolean
+	}
+
+	let { debug = true }: Props = $props()
+
+	const controls = useCameraControls()
+
+	const box3 = new Box3()
+	const a = new Vector3()
+	const b = new Vector3()
+	const c = new Vector3()
+
+	let drawing = false
+
+	let position = $state<[number, number, number]>([0, 0, 0])
+	let lassos = $state<
+		{
+			positions: number[]
+			indices: Uint16Array
+			boxes: Box3[]
+			min: { x: number; y: number }
+			max: { x: number; y: number }
+		}[]
+	>([])
+
+	const onpointerdown = (event: IntersectionEvent<PointerEvent>) => {
+		drawing = true
+
+		const { x, y } = event.point
+
+		lassos.push({
+			positions: [x, y, 0],
+			indices: new Uint16Array(),
+			boxes: [],
+			min: { x, y },
+			max: { x, y },
+		})
+
+		if (controls.current) {
+			controls.current.enabled = false
+		}
+	}
+
+	const onpointermove = (event: IntersectionEvent<PointerEvent>) => {
+		event.point.toArray(position)
+
+		if (!drawing) return
+
+		let line = lassos.at(-1)
+
+		if (!line) return
+
+		const { x, y } = event.point
+		line.positions.push(x, y, 0)
+
+		if (x < line.min.x) line.min.x = x
+		else if (x > line.max.x) line.max.x = x
+
+		if (y < line.min.y) line.min.y = y
+		else if (y > line.max.y) line.max.y = y
+	}
+
+	const onpointerup = () => {
+		drawing = false
+
+		let lasso = lassos.at(-1)
+
+		if (!lasso) return
+
+		const [x, y] = lasso.positions
+
+		if (controls.current) {
+			controls.current.enabled = true
+		}
+
+		// Close the loop
+		lasso.positions.push(x, y, 0)
+
+		const { positions } = lasso
+
+		const indices = earcut(positions, undefined, 3)
+		lasso.indices = new Uint16Array(indices)
+
+		for (let i = 0; i < indices.length; i += 6) {
+			const stride = 3
+			const ia = indices[i + 0] * stride
+			const ib = indices[i + 1] * stride
+			const ic = indices[i + 2] * stride
+
+			a.set(positions[ia + 0], positions[ia + 1], positions[ia + 2])
+			b.set(positions[ib + 0], positions[ib + 1], positions[ib + 2])
+			c.set(positions[ic + 0], positions[ic + 1], positions[ic + 2])
+			box3.setFromPoints([a, b, c])
+
+			lasso.boxes.push(box3.clone())
+		}
+	}
+</script>
+
+<T.Mesh
+	{onpointerdown}
+	{onpointerup}
+	{onpointermove}
+>
+	<T.PlaneGeometry args={[7, 7, 10, 10]} />
+	<T.MeshBasicMaterial
+		wireframe
+		color="blue"
+		transparent
+		opacity={debug ? 1 : 0}
+	/>
+</T.Mesh>
+
+{#each lassos as lasso (lasso)}
+	<Line positions={lasso.positions} />
+
+	{#if debug}
+		{#if lasso.indices.length > 0}
+			<T.Mesh>
+				<T.BufferGeometry
+					oncreate={(ref) => {
+						ref.setIndex(new BufferAttribute(lasso.indices, 1))
+						ref.setAttribute('position', new BufferAttribute(new Float32Array(lasso.positions), 3))
+					}}
+				/>
+				<T.MeshBasicMaterial
+					wireframe
+					color="green"
+				/>
+			</T.Mesh>
+		{/if}
+
+		{#each lasso.boxes as box (box)}
+			<T.Box3Helper args={[box, 'lightgreen']} />
+		{/each}
+
+		<T.Box3Helper
+			args={[
+				new Box3(a.set(lasso.min.x, lasso.min.y, 0), b.set(lasso.max.x, lasso.max.y, 0)),
+				'red',
+			]}
+		/>
+	{/if}
+{/each}

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

@@ -0,0 +1,6 @@
+interface Props {
+    debug?: boolean;
+}
+declare const Lasso: import("svelte").Component<Props, {}, "">;
+type Lasso = ReturnType<typeof Lasso>;
+export default Lasso;

package/dist/components/Lasso/Line.svelte

@@ -0,0 +1,44 @@
+<script>
+	import { T, useThrelte } from '@threlte/core'
+	import { Line2 } from 'three/examples/jsm/lines/Line2.js'
+	import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+	import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
+	import { untrack } from 'svelte'
+
+	let { positions } = $props()
+
+	let geometry = $state.raw(new LineGeometry())
+
+	const material = new LineMaterial()
+	const line = new Line2()
+	material.linewidth = 1
+	material.color.set('red')
+	material.depthTest = false
+	material.depthWrite = false
+
+	const { invalidate } = useThrelte()
+
+	$effect(() => {
+		untrack(() => {
+			geometry = new LineGeometry()
+			invalidate()
+		})
+
+		if (!positions || positions.length === 0) {
+			return
+		}
+
+		untrack(() => {
+			geometry.setPositions(positions)
+		})
+	})
+</script>
+
+<T
+	is={line}
+	frustumCulled={false}
+	renderOrder={Number.POSITIVE_INFINITY}
+>
+	<T is={geometry} />
+	<T is={material} />
+</T>

package/dist/components/Lasso/Line.svelte.d.ts

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

package/dist/components/PointerMissBox.svelte

@@ -19,7 +19,6 @@
 
 <T.Mesh
 	raycast={enabled ? Mesh.prototype.raycast : () => null}
-	bvh={{ enabled: false }}
 	onpointerdown={() => {
 		cameraDown.copy(camera.current.position)
 	}}

package/dist/components/Points.svelte

@@ -122,7 +122,7 @@
 		<T
 			is={points}
 			name={entity}
-			bvh={{ maxDepth: 40, maxLeafTris: 20 }}
+			bvh={{ maxDepth: 40, maxLeafSize: 20 }}
 			{...events}
 		>
 			<T is={geometry.current} />

package/dist/components/Scene.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Vector3 } from 'three'
 	import { T } from '@threlte/core'
-	import { Grid, interactivity, PerfMonitor, bvh, PortalTarget } from '@threlte/extras'
+	import { Grid, interactivity, PerfMonitor, PortalTarget } from '@threlte/extras'
 	import Entities from './Entities.svelte'
 	import Selected from './Selected.svelte'
 	import Focus from './Focus.svelte'
@@ -10,7 +10,7 @@
 	import { useFocusedObject3d } from '../hooks/useSelection.svelte'
 	import type { Snippet } from 'svelte'
 	import { useXR } from '@threlte/xr'
-
+	import { bvh } from '../plugins/bvh.svelte'
 	import { useOrigin } from './xr/useOrigin.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import CameraControls from './CameraControls.svelte'
@@ -43,10 +43,7 @@
 		enabled.set(!settings.current.enableMeasure)
 	})
 
-	raycaster.firstHitOnly = true
-	raycaster.params.Points.threshold = 0.005
-
-	bvh(() => ({ helper: false }))
+	bvh(raycaster, () => ({ helper: false }))
 
 	const focusedObject = $derived(focusedObject3d.current)
 

package/dist/components/hover/HoveredEntityTooltip.svelte

@@ -14,9 +14,10 @@
 		position={[hoverInfo.x, hoverInfo.y, hoverInfo.z]}
 		class="pointer-events-none"
 		zIndexRange={[3, 0]}
+		center
 	>
 		<div
-			class="border-medium pointer-events-none relative -mb-2 -translate-x-1/2 -translate-y-full border bg-white px-3 py-2.5 text-xs shadow-md"
+			class="border-medium pointer-events-none relative -translate-y-1/2 border bg-white px-3 py-2.5 text-xs shadow-md"
 		>
 			<!-- Arrow -->
 			<div

package/dist/components/xr/CameraFeed.svelte

@@ -10,6 +10,7 @@
 		offset?: { x?: number; y?: number; z?: number }
 		scale?: number
 		enableProfiling?: boolean
+		onAspectChange?: (aspect: number) => void
 	}
 
 	let {
@@ -17,6 +18,7 @@
 		offset = {},
 		scale = 0.7,
 		enableProfiling = false,
+		onAspectChange,
 	}: CameraFeedProps = $props()
 
 	const partID = usePartID()
@@ -77,6 +79,7 @@
 		const onReady = () => {
 			const videoReadyTime = performance.now()
 			aspect = video.videoWidth / video.videoHeight
+			onAspectChange?.(aspect)
 
 			if (!texture) {
 				texture = new VideoTexture(video)

package/dist/components/xr/CameraFeed.svelte.d.ts

@@ -7,6 +7,7 @@ interface CameraFeedProps {
     };
     scale?: number;
     enableProfiling?: boolean;
+    onAspectChange?: (aspect: number) => void;
 }
 declare const CameraFeed: import("svelte").Component<CameraFeedProps, {}, "">;
 type CameraFeed = ReturnType<typeof CameraFeed>;

package/dist/components/xr/JointLimitsWidget.svelte

@@ -11,12 +11,7 @@
 		rotationY?: number
 	}
 
-	let {
-		armName,
-		offset = {},
-		scale = 0.6,
-		rotationY = -15 * (Math.PI / 180),
-	}: JointLimitsWidgetProps = $props()
+	let { armName, offset = {}, scale = 0.6, rotationY = 0 }: JointLimitsWidgetProps = $props()
 
 	const armClient = useArmClient()
 	const armKinematics = useArmKinematics()
@@ -63,10 +58,11 @@
 		})
 	})
 
-	// Canvas setup
-	const CANVAS_WIDTH = 800
-	const HEADER_HEIGHT = 80
-	const ROW_HEIGHT = 120
+	// Canvas setup — use 2x resolution for sharper XR text
+	const RESOLUTION_SCALE = 4
+	const CANVAS_WIDTH = 800 * RESOLUTION_SCALE
+	const HEADER_HEIGHT = 80 * RESOLUTION_SCALE
+	const ROW_HEIGHT = 120 * RESOLUTION_SCALE
 	let canvasHeight = $derived(HEADER_HEIGHT + (jointData?.length ?? 0) * ROW_HEIGHT)
 
 	let canvas: HTMLCanvasElement | undefined = $state()
@@ -105,19 +101,21 @@
 
 	// Render header with arm name
 	function renderHeader(ctx: CanvasRenderingContext2D, width: number) {
+		const s = RESOLUTION_SCALE
+
 		// Header background
 		ctx.fillStyle = '#0a0a0a'
 		ctx.fillRect(0, 0, width, HEADER_HEIGHT)
 
 		// Arm name
 		ctx.fillStyle = '#ffffff'
-		ctx.font = 'bold 36px monospace'
+		ctx.font = `bold ${36 * s}px monospace`
 		ctx.textBaseline = 'middle'
-		ctx.fillText(armName, 20, HEADER_HEIGHT / 2)
+		ctx.fillText(armName, 20 * s, HEADER_HEIGHT / 2)
 
 		// Separator line
 		ctx.strokeStyle = '#444444'
-		ctx.lineWidth = 4
+		ctx.lineWidth = 4 * s
 		ctx.beginPath()
 		ctx.moveTo(0, HEADER_HEIGHT)
 		ctx.lineTo(width, HEADER_HEIGHT)
@@ -131,6 +129,7 @@
 		width: number,
 		height: number
 	) {
+		const s = RESOLUTION_SCALE
 		const rowHeight = (height - HEADER_HEIGHT) / joints.length
 
 		joints.forEach((joint, index) => {
@@ -142,15 +141,15 @@
 
 			// Joint label
 			ctx.fillStyle = '#ffffff'
-			ctx.font = 'bold 32px monospace'
+			ctx.font = `bold ${32 * s}px monospace`
 			ctx.textBaseline = 'middle'
-			ctx.fillText(joint.jointId, 20, y + rowHeight / 2)
+			ctx.fillText(joint.jointId, 20 * s, y + rowHeight / 2)
 
 			// Progress bar dimensions
-			const barX = 240
-			const barY = y + (rowHeight - 60) / 2
-			const barWidth = 360
-			const barHeight = 60
+			const barX = 240 * s
+			const barY = y + (rowHeight - 60 * s) / 2
+			const barWidth = 360 * s
+			const barHeight = 60 * s
 
 			// Progress bar background
 			ctx.fillStyle = '#333333'
@@ -164,13 +163,17 @@
 
 			// Progress bar border
 			ctx.strokeStyle = '#666666'
-			ctx.lineWidth = 4
+			ctx.lineWidth = 4 * s
 			ctx.strokeRect(barX, barY, barWidth, barHeight)
 
 			// Current value text
 			ctx.fillStyle = '#ffffff'
-			ctx.font = '28px monospace'
-			ctx.fillText(`${joint.currentPosition.toFixed(1)}°`, barX + barWidth + 20, y + rowHeight / 2)
+			ctx.font = `${28 * s}px monospace`
+			ctx.fillText(
+				`${joint.currentPosition.toFixed(1)}°`,
+				barX + barWidth + 20 * s,
+				y + rowHeight / 2
+			)
 		})
 	}
 

package/dist/components/xr/XR.svelte

@@ -10,6 +10,7 @@
 	import { usePartID } from '../../hooks/usePartID.svelte'
 	import XRToast from './XRToast.svelte'
 	import { useOrigin } from './useOrigin.svelte'
+	import { SvelteMap } from 'svelte/reactivity'
 
 	const { ...rest } = $props()
 
@@ -27,6 +28,16 @@
 		return openWidgets[currentPartID] || []
 	})
 
+	// Track camera aspect ratios to compute proper spacing
+	const cameraAspects = new SvelteMap<string, number>()
+
+	const CAMERA_SCALE = 0.8
+	const CAMERA_GAP = 0.15 // gap between feed edges
+
+	// Compute spacing from the widest camera feed (default 16:9 before any aspect is known)
+	const maxAspect = $derived(cameraAspects.size > 0 ? Math.max(...cameraAspects.values()) : 16 / 9)
+	const feedSpacing = $derived(maxAspect * CAMERA_SCALE + CAMERA_GAP)
+
 	// Get arms assigned to controllers
 	const controllerConfig = $derived(settings.current.xrController)
 	const leftArmName = $derived(controllerConfig.left.armName)
@@ -42,37 +53,34 @@
 			origin.set([0, 0, 0])
 		}}
 	>
-		<!-- Render all enabled camera feeds with horizontal spacing behind origin -->
-		{#each enabledCameras as cameraName, index (cameraName)}
-			{@const spacing = 1.2}
-			{@const centerOffset = ((enabledCameras.length - 1) * spacing) / 2}
-			<CameraFeed
-				resourceName={cameraName}
-				offset={{ x: index * spacing - centerOffset, y: 1.5, z: -2.5 }}
-				scale={0.8}
-				enableProfiling={false}
-			/>
-		{/each}
+		<!-- Render camera feeds only when presenting to avoid conflicting with overlay Camera widgets -->
+		{#if $isPresenting}
+			{#each enabledCameras as cameraName, index (cameraName)}
+				{@const centerOffset = ((enabledCameras.length - 1) * feedSpacing) / 2}
+				<CameraFeed
+					resourceName={cameraName}
+					offset={{ x: index * feedSpacing - centerOffset, y: 1.5, z: -2.5 }}
+					scale={CAMERA_SCALE}
+					enableProfiling={false}
+					onAspectChange={(a) => {
+						cameraAspects.set(cameraName, a)
+					}}
+				/>
+			{/each}
+		{/if}
 
 		<!-- Render joint limits widgets only for arms assigned to controllers, on the matching side -->
 		{#if leftArmName}
-			{@const spacing = 1.2}
-			{@const centerOffset = ((enabledCameras.length - 1) * spacing) / 2}
-			{@const widgetX = -(centerOffset + spacing + 0.3)}
 			<JointLimitsWidget
 				armName={leftArmName}
-				offset={{ x: widgetX, y: 1.5, z: -2.5 }}
+				offset={{ x: -0.5, y: 2.5, z: -2.5 }}
 				scale={0.6}
-				rotationY={15 * (Math.PI / 180)}
 			/>
 		{/if}
 		{#if rightArmName}
-			{@const spacing = 1.2}
-			{@const centerOffset = ((enabledCameras.length - 1) * spacing) / 2}
-			{@const widgetX = centerOffset + spacing + 0.3}
 			<JointLimitsWidget
 				armName={rightArmName}
-				offset={{ x: widgetX, y: 1.5, z: -2.5 }}
+				offset={{ x: 0.5, y: 2.5, z: -2.5 }}
 				scale={0.6}
 			/>
 		{/if}

package/dist/plugins/bvh.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Raycaster } from 'three';
+import { type BVHOptions } from 'three-mesh-bvh';
+interface Options extends BVHOptions {
+    helper?: boolean;
+    enabled?: boolean;
+}
+export declare const bvh: (raycaster: Raycaster, options?: () => Options) => void;
+export {};

package/dist/plugins/bvh.svelte.js

@@ -0,0 +1,69 @@
+import { injectPlugin, isInstanceOf } from '@threlte/core';
+import { BatchedMesh, Points, Mesh } from 'three';
+import { acceleratedRaycast, computeBoundsTree, disposeBoundsTree, computeBatchedBoundsTree, disposeBatchedBoundsTree, PointsBVH, SAH, BVHHelper, } from 'three-mesh-bvh';
+export const bvh = (raycaster, options) => {
+    const bvhOptions = $derived({
+        strategy: SAH,
+        verbose: false,
+        setBoundingBox: true,
+        maxDepth: 20,
+        maxLeafSize: 10,
+        indirect: false,
+        helper: false,
+        ...options?.(),
+    });
+    raycaster.firstHitOnly = true;
+    raycaster.params.Points.threshold = 0.005;
+    injectPlugin('bvh', (args) => {
+        const { props } = $derived(args);
+        const opts = $derived(props.bvh ? { ...bvhOptions, ...props.bvh } : bvhOptions);
+        $effect(() => {
+            const { ref } = args;
+            if (opts.enabled === false) {
+                return;
+            }
+            if (isInstanceOf(ref, 'Points')) {
+                ref.geometry.computeBoundsTree = computeBoundsTree;
+                ref.geometry.disposeBoundsTree = disposeBoundsTree;
+                ref.raycast = acceleratedRaycast;
+                computeBoundsTree.call(ref.geometry, { type: PointsBVH, ...opts });
+                const helper = opts.helper ? new BVHHelper(ref) : undefined;
+                if (helper)
+                    ref.add(helper);
+                return () => {
+                    ref.raycast = Points.prototype.raycast;
+                    if (helper)
+                        ref.remove(helper);
+                };
+            }
+            else if (isInstanceOf(ref, 'BatchedMesh')) {
+                /* @ts-expect-error Some sort of ambient type is conflicing here, likely from @threlte/extras */
+                ref.geometry.computeBoundsTree = computeBatchedBoundsTree;
+                ref.geometry.disposeBoundsTree = disposeBatchedBoundsTree;
+                ref.raycast = acceleratedRaycast;
+                const helper = opts.helper ? new BVHHelper(ref) : undefined;
+                if (helper)
+                    ref.add(helper);
+                return () => {
+                    ref.raycast = BatchedMesh.prototype.raycast;
+                    if (helper)
+                        ref.remove(helper);
+                };
+            }
+            else if (isInstanceOf(ref, 'Mesh')) {
+                ref.geometry.computeBoundsTree = computeBoundsTree;
+                ref.geometry.disposeBoundsTree = disposeBoundsTree;
+                ref.raycast = acceleratedRaycast;
+                computeBoundsTree.call(ref.geometry, opts);
+                const helper = opts.helper ? new BVHHelper(ref) : undefined;
+                if (helper)
+                    ref.add(helper);
+                return () => {
+                    ref.raycast = Mesh.prototype.raycast;
+                    if (helper)
+                        ref.remove(helper);
+                };
+            }
+        });
+    });
+};

package/dist/ply.d.ts

@@ -1,2 +1,2 @@
-import type { BufferGeometry } from 'three';
+import { BufferGeometry } from 'three';
 export declare const parsePlyInput: (mesh: string | Uint8Array) => BufferGeometry;

package/dist/ply.js

@@ -1,3 +1,4 @@
+import { BufferGeometry } from 'three';
 import { PLYLoader } from 'three/addons/loaders/PLYLoader.js';
 const plyLoader = new PLYLoader();
 export const parsePlyInput = (mesh) => {
@@ -5,6 +6,10 @@ export const parsePlyInput = (mesh) => {
     if (typeof mesh === 'string') {
         return plyLoader.parse(atob(mesh));
     }
+    // First, determine if ply has any geometry
+    if (mesh.length === 0) {
+        return new BufferGeometry();
+    }
     // Case 2: detect text vs binary PLY in Uint8Array
     const header = new TextDecoder().decode(mesh.slice(0, 50));
     const isAscii = header.includes('format ascii');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -30,6 +30,7 @@
     "@threlte/rapier": "3.2.0",
     "@threlte/xr": "1.0.8",
     "@types/bun": "1.2.21",
+    "@types/earcut": "^3.0.0",
     "@types/lodash-es": "4.17.12",
     "@types/three": "0.181.0",
     "@typescript-eslint/eslint-plugin": "8.42.0",
@@ -132,9 +133,11 @@
     "@connectrpc/connect-web": "1.7.0",
     "@neodrag/svelte": "^2.3.3",
     "@tanstack/svelte-query-devtools": "^6.0.2",
+    "earcut": "^3.0.2",
     "expr-eval": "^2.0.2",
     "koota": "0.6.5",
     "lodash-es": "4.17.23",
+    "three-mesh-bvh": "^0.9.8",
     "uuid-tool": "^2.0.3"
   },
   "scripts": {