@viamrobotics/motion-tools 1.11.1 → 1.12.1

package/dist/components/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
 	import { Canvas } from '@threlte/core'
+	import { PortalTarget } from '@threlte/extras'
 	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 	import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
 	import type { Struct } from '@viamrobotics/sdk'
@@ -155,6 +156,8 @@
 							<Camera name={cameraName} />
 						{/each}
 					{/if}
+
+					<PortalTarget id="dom" />
 				</div>
 			{/snippet}
 		</SceneProviders>

package/dist/components/CameraControls.svelte

@@ -20,7 +20,7 @@
 			icon="camera-outline"
 			description="Reset camera"
 			onclick={() => {
-				cameraControls.current?.reset(true)
+				cameraControls.setInitialPose()
 			}}
 		/>
 	</fieldset>

package/dist/components/Geometry.svelte

@@ -3,7 +3,7 @@
 	import { type Snippet } from 'svelte'
 	import { meshBounds } from '@threlte/extras'
 	import { BufferGeometry, Color, DoubleSide, FrontSide, Group, Mesh } from 'three'
-	import { Line2, LineGeometry, LineMaterial } from 'three/examples/jsm/Addons.js'
+	import { Line2, LineMaterial } from 'three/examples/jsm/Addons.js'
 	import { CapsuleGeometry } from '../three/CapsuleGeometry'
 	import { colors, darkenColor } from '../color'
 	import AxesHelper from './AxesHelper.svelte'
@@ -11,6 +11,7 @@
 	import { traits, useTrait } from '../ecs'
 	import { poseToObject3d } from '../transform'
 	import type { Pose } from '@viamrobotics/sdk'
+	import LineGeometry from './LineGeometry.svelte'
 
 	interface Props extends ThrelteProps<Group> {
 		entity: Entity
@@ -47,6 +48,8 @@
 	const lineWidth = useTrait(() => entity, traits.LineWidth)
 	const center = useTrait(() => entity, traits.Center)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
+	const materialProps = useTrait(() => entity, traits.Material)
+	const renderOrder = useTrait(() => entity, traits.RenderOrder)
 
 	const geometryType = $derived.by(() => {
 		if (box.current) return 'box'
@@ -136,6 +139,7 @@
 			is={mesh}
 			name={entity}
 			userData.name={name}
+			renderOrder={renderOrder.current}
 		>
 			{#if model && renderMode.includes('model')}
 				<T is={model} />
@@ -143,14 +147,7 @@
 
 			{#if !model || renderMode.includes('colliders')}
 				{#if linePositions.current}
-					<T
-						is={LineGeometry}
-						oncreate={(ref) => {
-							if (linePositions.current) {
-								ref.setPositions(linePositions.current)
-							}
-						}}
-					/>
+					<LineGeometry positions={linePositions.current} />
 				{:else if box.current}
 					{@const { x, y, z } = box.current ?? { x: 0, y: 0, z: 0 }}
 					<T.BoxGeometry
@@ -178,16 +175,20 @@
 					is={LineMaterial}
 					{color}
 					width={lineWidth.current ? lineWidth.current * 0.001 : 0.5}
+					depthTest={materialProps.current?.depthTest}
 				/>
 			{:else}
+				{@const currentOpacity = opacity.current ?? 0.7}
 				<T.MeshToonMaterial
 					{color}
 					side={geometryType === 'buffer' ? DoubleSide : FrontSide}
-					transparent={(opacity.current ?? 0.7) < 1}
-					opacity={opacity.current ?? 0.7}
+					transparent={currentOpacity < 1}
+					depthWrite={currentOpacity === 1}
+					opacity={currentOpacity}
+					depthTest={materialProps.current?.depthTest}
 				/>
 
-				{#if geo && renderMode.includes('colliders')}
+				{#if geo && (renderMode.includes('colliders') || !model)}
 					<T.LineSegments
 						raycast={() => null}
 						bvh={{ enabled: false }}

package/dist/components/Lasso/Debug.svelte

@@ -0,0 +1,72 @@
+<!--
+@component
+
+Shows all steps for querying points within a lasso selection
+-->
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { Box3, BufferAttribute, BufferGeometry, Vector3 } from 'three'
+	import { useTrait, traits } from '../../ecs'
+	import type { Entity } from 'koota'
+	import * as lassoTraits from './traits'
+
+	const box3 = new Box3()
+	const min = new Vector3()
+	const max = new Vector3()
+
+	interface Props {
+		lasso: Entity
+	}
+
+	let { lasso }: Props = $props()
+
+	const indices = useTrait(() => lasso, lassoTraits.Indices)
+	const positions = useTrait(() => lasso, traits.LinePositions)
+	const box = useTrait(() => lasso, lassoTraits.Box)
+	const boxes = useTrait(() => lasso, lassoTraits.Boxes)
+
+	const geometry = new BufferGeometry()
+
+	$effect(() => {
+		if (indices.current) {
+			geometry.setIndex(new BufferAttribute(indices.current, 1))
+		}
+
+		if (positions.current) {
+			geometry.setAttribute('position', new BufferAttribute(positions.current, 3))
+		}
+	})
+</script>
+
+{#if positions.current && indices.current}
+	<T.Mesh>
+		<T is={geometry} />
+		<T.MeshBasicMaterial
+			wireframe
+			color="green"
+		/>
+	</T.Mesh>
+{/if}
+
+{#if boxes.current}
+	{#each boxes.current as box (box)}
+		<T.Box3Helper
+			args={[
+				new Box3().set(min.set(box.minX, box.minY, 0), max.set(box.maxX, box.maxY, 0)),
+				'lightgreen',
+			]}
+		/>
+	{/each}
+{/if}
+
+{#if box.current}
+	<T.Box3Helper
+		args={[
+			box3.set(
+				min.set(box.current.minX, box.current.minY, 0),
+				max.set(box.current.maxX, box.current.maxY, 0)
+			),
+			'red',
+		]}
+	/>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { Entity } from 'koota';
+interface Props {
+    lasso: Entity;
+}
+/** Shows all steps for querying points within a lasso selection */
+declare const Debug: import("svelte").Component<Props, {}, "">;
+type Debug = ReturnType<typeof Debug>;
+export default Debug;

package/dist/components/Lasso/Lasso.svelte

@@ -1,153 +1,301 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
-	import type { IntersectionEvent } from '@threlte/extras'
-	import Line from './Line.svelte'
+	import { Raycaster, Box3, Vector3, Vector2, Plane, Triangle } from 'three'
+	import { useThrelte } from '@threlte/core'
+	import { Not } from 'koota'
 	import { useCameraControls } from '../../hooks/useControls.svelte'
 	import earcut from 'earcut'
-	import { Box3, BufferAttribute, Vector3 } from 'three'
+	import { traits, useQuery, useWorld } from '../../ecs'
+	import type { ShapecastCallbacks } from 'three-mesh-bvh'
+	import { createBufferGeometry } from '../../attribute'
+	import * as lassoTraits from './traits'
+	import Debug from './Debug.svelte'
 
 	interface Props {
 		debug?: boolean
 	}
 
-	let { debug = true }: Props = $props()
+	let { debug = false }: Props = $props()
 
+	const world = useWorld()
 	const controls = useCameraControls()
+	const { scene, dom, camera } = useThrelte()
 
 	const box3 = new Box3()
+	const min = new Vector3()
+	const max = new Vector3()
+
+	const triangle = new Triangle()
+	const triangleBox = new Box3()
 	const a = new Vector3()
 	const b = new Vector3()
 	const c = new Vector3()
 
+	let frameScheduled = false
 	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 raycaster = new Raycaster()
+	const mouse = new Vector2()
+	const plane = new Plane(new Vector3(0, 0, 1), 0)
+	const point = new Vector3()
 
-		const { x, y } = event.point
+	const raycast = (event: PointerEvent) => {
+		const element = event.target as HTMLElement
+		const rect = element.getBoundingClientRect()
+		mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
+		mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
 
-		lassos.push({
-			positions: [x, y, 0],
-			indices: new Uint16Array(),
-			boxes: [],
-			min: { x, y },
-			max: { x, y },
-		})
+		raycaster.setFromCamera(mouse, camera.current)
+		raycaster.ray.intersectPlane(plane, point)
+		return point
+	}
+
+	const onpointerdown = (event: PointerEvent) => {
+		if (!event.shiftKey) return
+
+		const { x, y } = raycast(event)
+
+		drawing = true
+
+		world.spawn(
+			traits.LinePositions(new Float32Array([x, y, 0])),
+			traits.LineWidth(1.5),
+			traits.RenderOrder(999),
+			traits.Material({ depthTest: false }),
+			traits.Color({ r: 1, g: 0, b: 0 }),
+			lassoTraits.Box({ minX: x, minY: y, maxX: x, maxY: y }),
+			lassoTraits.Lasso
+		)
 
 		if (controls.current) {
 			controls.current.enabled = false
 		}
 	}
 
-	const onpointermove = (event: IntersectionEvent<PointerEvent>) => {
-		event.point.toArray(position)
-
+	const onpointermove = (event: PointerEvent) => {
 		if (!drawing) return
 
-		let line = lassos.at(-1)
+		let lasso = world.query(lassoTraits.Lasso).at(-1)
+
+		if (!lasso) return
+
+		if (frameScheduled) return
+
+		frameScheduled = true
+
+		/**
+		 * pointermove can execute at a rate much higher than screen
+		 * refresh, creating huge polygon vertex counts, so we cap it.
+		 */
+		requestAnimationFrame(() => {
+			frameScheduled = false
+
+			const { x, y } = raycast(event)
+			const positions = lasso.get(traits.LinePositions)
+			const box = lasso.get(lassoTraits.Box)
 
-		if (!line) return
+			if (!positions || !box) return
 
-		const { x, y } = event.point
-		line.positions.push(x, y, 0)
+			const nextPositions = new Float32Array(positions.length + 3)
+			nextPositions.set(positions)
+			nextPositions[positions.length] = x
+			nextPositions[positions.length + 1] = y
+			lasso.set(traits.LinePositions, nextPositions)
 
-		if (x < line.min.x) line.min.x = x
-		else if (x > line.max.x) line.max.x = x
+			if (x < box.minX) box.minX = x
+			else if (x > box.maxX) box.maxX = x
 
-		if (y < line.min.y) line.min.y = y
-		else if (y > line.max.y) line.max.y = y
+			if (y < box.minY) box.minY = y
+			else if (y > box.maxY) box.maxY = y
+
+			lasso.set(lassoTraits.Box, box)
+		})
+	}
+
+	const onpointerleave = () => {
+		if (!drawing) return
+
+		onpointerup()
 	}
 
 	const onpointerup = () => {
+		if (!drawing) return
+
 		drawing = false
 
-		let lasso = lassos.at(-1)
+		let lasso = world.query(lassoTraits.Lasso).at(-1)
 
 		if (!lasso) return
 
-		const [x, y] = lasso.positions
+		let positions = lasso.get(traits.LinePositions)
+
+		if (!positions) return
+
+		const [startX, startY] = positions
 
 		if (controls.current) {
 			controls.current.enabled = true
 		}
 
 		// Close the loop
-		lasso.positions.push(x, y, 0)
-
-		const { positions } = lasso
+		const nextPositions = new Float32Array(positions.length + 3)
+		nextPositions.set(positions)
+		nextPositions[positions.length] = startX
+		nextPositions[positions.length + 1] = startY
+		lasso.set(traits.LinePositions, nextPositions)
+		positions = nextPositions
 
 		const indices = earcut(positions, undefined, 3)
-		lasso.indices = new Uint16Array(indices)
+		if (debug) {
+			lasso.add(lassoTraits.Indices(new Uint16Array(indices)))
+		}
 
-		for (let i = 0; i < indices.length; i += 6) {
+		const getTriangleFromIndex = (i: number, triangle: Triangle) => {
 			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])
+			triangle.set(a, b, c)
+		}
+
+		const boxes: lassoTraits.AABB[] = []
+		for (let i = 0, l = indices.length; i < l; i += 3) {
+			getTriangleFromIndex(i, triangle)
+			box3.setFromPoints([triangle.a, triangle.b, triangle.c])
+			boxes.push({ minX: box3.min.x, minY: box3.min.y, maxX: box3.max.x, maxY: box3.max.y })
+		}
+		if (debug) {
+			lasso.add(lassoTraits.Boxes(boxes))
+		}
+
+		const lassoBox = lasso.get(lassoTraits.Box)
+
+		if (!lassoBox) return
+
+		min.set(lassoBox.minX, lassoBox.minY, Number.NEGATIVE_INFINITY)
+		max.set(lassoBox.maxX, lassoBox.maxY, Number.POSITIVE_INFINITY)
+		box3.set(min, max)
+
+		const enclosedPoints: number[] = []
+
+		for (const pointsEntity of world.query(traits.Points, Not(lassoTraits.LassoEnclosedPoints))) {
+			const geometry = pointsEntity.get(traits.BufferGeometry)
+
+			if (!geometry) return
 
-			lasso.boxes.push(box3.clone())
+			const points = scene.getObjectByName(pointsEntity as unknown as string)
+
+			if (!points) {
+				return
+			}
+
+			geometry.boundsTree?.shapecast({
+				intersectsBounds: (box) => {
+					return box.intersectsBox(box3)
+				},
+
+				intersectsPoint: (point: Vector3) => {
+					for (let i = 0, j = 0, l = indices.length; i < l; i += 3, j += 1) {
+						const { minX, minY, maxX, maxY } = boxes[j]
+
+						min.set(minX, minY, Number.NEGATIVE_INFINITY)
+						max.set(maxX, maxY, Number.POSITIVE_INFINITY)
+						triangleBox.set(min, max)
+
+						if (triangleBox.containsPoint(point)) {
+							getTriangleFromIndex(i, triangle)
+
+							if (triangle.containsPoint(point)) {
+								enclosedPoints.push(point.x, point.y, point.z)
+							}
+						}
+					}
+				},
+				// intersectsPoint is not yet in typedef, this can be removed when it is added
+			} as ShapecastCallbacks)
 		}
+
+		const lassoResultGeometry = createBufferGeometry(new Float32Array(enclosedPoints))
+
+		world.spawn(
+			traits.Name('Lasso result'),
+			traits.BufferGeometry(lassoResultGeometry),
+			traits.Color({ r: 1, g: 0, b: 0 }),
+			traits.RenderOrder(999),
+			traits.Material({ depthTest: false }),
+			traits.Points,
+			traits.Removable,
+			lassoTraits.LassoEnclosedPoints,
+			lassoTraits.PointsCapturedBy(lasso)
+		)
 	}
+
+	const onkeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Shift') {
+			dom.style.cursor = 'crosshair'
+		}
+	}
+
+	const onkeyup = (event: KeyboardEvent) => {
+		if (event.key === 'Shift') {
+			dom.style.removeProperty('cursor')
+		}
+	}
+
+	$effect(() => {
+		window.addEventListener('keydown', onkeydown)
+		window.addEventListener('keyup', onkeyup)
+		dom.addEventListener('pointerdown', onpointerdown)
+		dom.addEventListener('pointermove', onpointermove)
+		dom.addEventListener('pointerup', onpointerup)
+		dom.addEventListener('pointerleave', onpointerleave)
+
+		return () => {
+			window.removeEventListener('keydown', onkeydown)
+			window.removeEventListener('keyup', onkeyup)
+			dom.removeEventListener('pointerdown', onpointerdown)
+			dom.removeEventListener('pointermove', onpointermove)
+			dom.removeEventListener('pointerup', onpointerup)
+			dom.removeEventListener('pointerleave', onpointerleave)
+		}
+	})
+
+	const lassos = useQuery(lassoTraits.Lasso)
+
+	$effect(() => {
+		if (!controls.current) return
+
+		const currentControls = controls.current
+
+		const { minPolarAngle, maxPolarAngle } = currentControls
+
+		// Locks the camera to top down while this component is mounted
+		currentControls.polarAngle = 0
+		currentControls.minPolarAngle = 0
+		currentControls.maxPolarAngle = 0
+
+		return () => {
+			currentControls.minPolarAngle = minPolarAngle
+			currentControls.maxPolarAngle = maxPolarAngle
+		}
+	})
+
+	// On unmount, destroy all lasso related entities
+	$effect(() => {
+		return () => {
+			for (const entity of world.query(lassoTraits.LassoEnclosedPoints)) {
+				if (world.has(entity)) {
+					entity.destroy()
+				}
+			}
+		}
+	})
 </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}
+{#if debug}
+	{#each lassos.current as lasso (lasso)}
+		<Debug {lasso} />
+	{/each}
+{/if}

package/dist/components/Lasso/Tool.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { Portal } from '@threlte/extras'
+	import { Button } from '@viamrobotics/prime-core'
+	import Lasso from './Lasso.svelte'
+	import DashboardButton from '../overlay/dashboard/Button.svelte'
+	import { useSettings } from '../../hooks/useSettings.svelte'
+	import FloatingPanel from '../overlay/FloatingPanel.svelte'
+	import { traits, useWorld } from '../../ecs'
+	import * as lassoTraits from './traits'
+	import { BufferGeometryUtils } from 'three/examples/jsm/Addons.js'
+	import { createBinaryPCD } from '../../pcd'
+	import type { BufferGeometry } from 'three'
+	import { useThrelte } from '@threlte/core'
+	import { ElementRect } from 'runed'
+
+	interface Props {
+		/** Whether to auto-enable lasso mode when the component mounts */
+		enabled?: boolean
+
+		/** Fires when the user has committed to a lasso selection */
+		onSelection: (pcd: Blob) => void
+	}
+
+	let { enabled = false, onSelection }: Props = $props()
+
+	const { dom } = useThrelte()
+	const world = useWorld()
+	const settings = useSettings()
+	const isLassoMode = $derived(settings.current.interactionMode === 'lasso')
+
+	const onCommitClick = () => {
+		const entities = world.query(lassoTraits.LassoEnclosedPoints)
+
+		const geometries: BufferGeometry[] = []
+		for (const entity of entities) {
+			const geometry = entity.get(traits.BufferGeometry)
+
+			if (geometry) {
+				geometries.push(geometry)
+			}
+		}
+
+		const mergedGeometry = BufferGeometryUtils.mergeGeometries(geometries)
+		const positions = mergedGeometry.getAttribute('position').array as Float32Array
+
+		const pcd = createBinaryPCD(positions)
+
+		onSelection(pcd)
+
+		for (const entity of entities) {
+			if (world.has(entity)) {
+				entity.destroy()
+			}
+		}
+	}
+
+	$effect(() => {
+		if (enabled) {
+			settings.current.interactionMode = 'lasso'
+		}
+	})
+
+	const rect = new ElementRect(() => dom)
+</script>
+
+<Portal id="dashboard">
+	<fieldset>
+		<DashboardButton
+			active={isLassoMode}
+			icon="selection-drag"
+			description="{isLassoMode ? 'Disable' : 'Enable'} lasso selection"
+			onclick={() => {
+				settings.current.interactionMode = isLassoMode ? 'navigate' : 'lasso'
+			}}
+		/>
+	</fieldset>
+</Portal>
+
+{#if isLassoMode && rect.height > 0 && rect.width > 0}
+	<Lasso />
+
+	<Portal id="dom">
+		<FloatingPanel
+			isOpen
+			exitable={false}
+			title="Lasso"
+			strategy="absolute"
+			defaultSize={{ width: 445, height: 100 }}
+			defaultPosition={{ x: rect.width / 2 - 200, y: rect.height - 10 - 100 }}
+		>
+			<div class="flex items-center gap-4 p-4 text-xs">
+				Shift + click and drag to make a lasso selection.
+				<Button
+					onclick={onCommitClick}
+					variant="success">Commit selection</Button
+				>
+			</div>
+		</FloatingPanel>
+	</Portal>
+{/if}

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

@@ -0,0 +1,9 @@
+interface Props {
+    /** Whether to auto-enable lasso mode when the component mounts */
+    enabled?: boolean;
+    /** Fires when the user has committed to a lasso selection */
+    onSelection: (pcd: Blob) => void;
+}
+declare const Tool: import("svelte").Component<Props, {}, "">;
+type Tool = ReturnType<typeof Tool>;
+export default Tool;

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

@@ -0,0 +1,21 @@
+export declare const Lasso: import("koota").Trait<() => boolean>;
+export declare const LassoEnclosedPoints: import("koota").Trait<() => boolean>;
+/**
+ * Captured points are removable, so we want to also destroy
+ * the source lasso every time a user deletes one.
+ */
+export declare const PointsCapturedBy: import("koota").Relation<import("koota").Trait<Record<string, never>>>;
+export interface AABB {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+export declare const Box: import("koota").Trait<{
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}>;
+export declare const Indices: import("koota").Trait<() => Uint16Array<ArrayBuffer>>;
+export declare const Boxes: import("koota").Trait<() => AABB[]>;

package/dist/components/Lasso/traits.js

@@ -0,0 +1,16 @@
+import { relation, trait } from 'koota';
+export const Lasso = trait(() => true);
+export const LassoEnclosedPoints = trait(() => true);
+/**
+ * Captured points are removable, so we want to also destroy
+ * the source lasso every time a user deletes one.
+ */
+export const PointsCapturedBy = relation({ autoDestroy: 'target' });
+export const Box = trait({
+    minX: 0,
+    minY: 0,
+    maxX: 0,
+    maxY: 0,
+});
+export const Indices = trait(() => new Uint16Array());
+export const Boxes = trait(() => []);

package/dist/components/LineGeometry.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { LineGeometry } from 'three/examples/jsm/Addons.js'
+	import { T } from '@threlte/core'
+	import { untrack } from 'svelte'
+
+	let { positions } = $props()
+
+	let geometry = $state.raw(new LineGeometry())
+
+	$effect(() => {
+		if (positions) {
+			untrack(() => {
+				geometry = new LineGeometry()
+				geometry.setPositions(positions)
+			})
+		}
+	})
+</script>
+
+<T is={geometry} />

package/dist/components/{Lasso/Line.svelte.d.ts → LineGeometry.svelte.d.ts}

@@ -1,11 +1,12 @@
-export default Line;
-type Line = {
+export default LineGeometry;
+type LineGeometry = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<$$ComponentProps>): void;
 };
-declare const Line: import("svelte").Component<{
+declare const LineGeometry: import("svelte").Component<{
     positions: any;
 }, {}, "">;
+import { LineGeometry } from 'three/examples/jsm/Addons.js';
 type $$ComponentProps = {
     positions: any;
 };

package/dist/components/MeasureTool/MeasureTool.svelte

@@ -21,7 +21,7 @@
 	let p1 = $state.raw<Vector3>()
 	let p2 = $state.raw<Vector3>()
 
-	const enabled = $derived(settings.current.enableMeasure)
+	const enabled = $derived(settings.current.interactionMode === 'measure')
 
 	const { onclick, onmove, raycaster } = useMouseRaycaster(() => ({
 		enabled,
@@ -85,7 +85,7 @@
 				icon="ruler"
 				description="{enabled ? 'Disable' : 'Enable'} measurement"
 				onclick={() => {
-					settings.current.enableMeasure = !settings.current.enableMeasure
+					settings.current.interactionMode = enabled ? 'navigate' : 'measure'
 				}}
 			/>
 			<Popover>

package/dist/components/PCD.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { parsePcdInWorker } from '../lib'
+	import { traits, useWorld } from '../ecs'
+	import { createBufferGeometry } from '../attribute'
+	import type { Entity } from 'koota'
+
+	interface Props {
+		data: Uint8Array
+	}
+
+	let { data }: Props = $props()
+
+	const world = useWorld()
+
+	let entity: Entity
+
+	$effect(() => {
+		parsePcdInWorker(data).then(({ positions, colors }) => {
+			const geometry = createBufferGeometry(positions, colors)
+
+			entity = world.spawn(
+				traits.Name('Random points'),
+				traits.Points,
+				traits.BufferGeometry(geometry)
+			)
+		})
+
+		return () => {
+			if (entity && world.has(entity)) {
+				entity.destroy()
+			}
+		}
+	})
+</script>

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

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

package/dist/components/PointerMissBox.svelte

@@ -12,7 +12,7 @@
 	const transformControls = useTransformControls()
 	const cameraDown = new Vector3()
 
-	const enabled = $derived(!settings.current.enableMeasure)
+	const enabled = $derived(settings.current.interactionMode === 'navigate')
 
 	const size = 1_000
 </script>

package/dist/components/Scene.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Vector3 } from 'three'
+	import { ShaderMaterial, Vector3 } from 'three'
 	import { T } from '@threlte/core'
 	import { Grid, interactivity, PerfMonitor, PortalTarget } from '@threlte/extras'
 	import Entities from './Entities.svelte'
@@ -40,7 +40,7 @@
 	})
 
 	$effect(() => {
-		enabled.set(!settings.current.enableMeasure)
+		enabled.set(settings.current.interactionMode === 'navigate')
 	})
 
 	bvh(raycaster, () => ({ helper: false }))
@@ -76,11 +76,16 @@
 
 		{#if !$isPresenting && settings.current.grid}
 			<Grid
+				oncreate={(ref) => {
+					const material = ref.material as ShaderMaterial
+					material.depthWrite = false
+				}}
 				raycast={() => null}
 				bvh={{ enabled: false }}
 				plane="xy"
 				sectionColor="#333"
 				infiniteGrid
+				renderOrder={999}
 				cellSize={settings.current.gridCellSize}
 				sectionSize={settings.current.gridSectionSize}
 				fadeOrigin={new Vector3()}

package/dist/components/overlay/FloatingPanel.svelte

@@ -8,6 +8,9 @@
 	interface Props {
 		title?: string
 		defaultSize?: { width: number; height: number }
+		defaultPosition?: { x: number; y: number }
+		exitable?: boolean
+		strategy?: 'absolute' | 'fixed'
 		isOpen?: boolean
 		children: Snippet
 	}
@@ -15,8 +18,10 @@
 	let {
 		title = '',
 		defaultSize = { width: 700, height: 500 },
+		exitable = true,
 		isOpen = $bindable(false),
 		children,
+		...props
 	}: Props = $props()
 
 	const id = $props.id()
@@ -26,6 +31,7 @@
 		resizable: false,
 		allowOverflow: false,
 		open: isOpen,
+		...props,
 	}))
 
 	const api = $derived(floatingPanel.connect(floatingPanelService, normalizeProps))
@@ -54,17 +60,19 @@
 					{title}
 				</p>
 
-				<div
-					{...api.getControlProps()}
-					class="flex gap-3"
-				>
-					<button
-						aria-label="Close connection configs panel"
-						onclick={() => (isOpen = false)}
+				{#if exitable}
+					<div
+						{...api.getControlProps()}
+						class="flex gap-3"
 					>
-						<Icon name="close" />
-					</button>
-				</div>
+						<button
+							aria-label="Close connection configs panel"
+							onclick={() => (isOpen = false)}
+						>
+							<Icon name="close" />
+						</button>
+					</div>
+				{/if}
 			</div>
 		</div>
 

package/dist/components/overlay/FloatingPanel.svelte.d.ts

@@ -5,6 +5,12 @@ interface Props {
         width: number;
         height: number;
     };
+    defaultPosition?: {
+        x: number;
+        y: number;
+    };
+    exitable?: boolean;
+    strategy?: 'absolute' | 'fixed';
     isOpen?: boolean;
     children: Snippet;
 }

package/dist/ecs/traits.d.ts

@@ -59,6 +59,7 @@ export declare const Instance: import("koota").Trait<{
     meshID: number;
     instanceID: number;
 }>;
+export declare const RenderOrder: import("koota").Trait<() => number>;
 export declare const Opacity: import("koota").Trait<() => number>;
 /**
  * The color of an object
@@ -69,6 +70,13 @@ export declare const Color: import("koota").Trait<{
     g: number;
     b: number;
 }>;
+/**
+ * Material properties
+ */
+export declare const Material: import("koota").Trait<{
+    depthTest: boolean;
+}>;
+export declare const DepthTest: import("koota").Trait<() => boolean>;
 export declare const Arrow: import("koota").Trait<() => boolean>;
 export declare const Positions: import("koota").Trait<() => Float32Array<ArrayBuffer>>;
 export declare const Colors: import("koota").Trait<() => Uint8Array<ArrayBuffer>>;

package/dist/ecs/traits.js

@@ -37,12 +37,20 @@ export const Instance = trait({
     meshID: -1,
     instanceID: -1,
 });
+export const RenderOrder = trait(() => 0);
 export const Opacity = trait(() => 1);
 /**
  * The color of an object
  * @default { r: 1, g: 0, b: 0 }
  */
 export const Color = trait({ r: 0, g: 0, b: 0 });
+/**
+ * Material properties
+ */
+export const Material = trait({
+    depthTest: false,
+});
+export const DepthTest = trait(() => true);
 export const Arrow = trait(() => true);
 export const Positions = trait(() => new Float32Array());
 export const Colors = trait(() => new Uint8Array());

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

@@ -8,8 +8,9 @@ interface CameraControlsContext {
     current: CameraControlsRef | undefined;
     set(current: CameraControlsRef): void;
     setPose(pose: CameraPose, animate?: boolean): void;
+    setInitialPose(): void;
 }
-export declare const provideCameraControls: (cameraPose: () => CameraPose | undefined) => void;
+export declare const provideCameraControls: (initialCameraPose: () => CameraPose | undefined) => void;
 export declare const useCameraControls: () => CameraControlsContext;
 interface TransformControlsContext {
     active: boolean;

package/dist/hooks/useControls.svelte.js

@@ -1,7 +1,7 @@
 import { getContext, setContext } from 'svelte';
 const TRANSFORM_CONTROLS_KEY = Symbol('tranform-controls-context');
 const CAMERA_CONTROLS_KEY = Symbol('camera-controls-context');
-export const provideCameraControls = (cameraPose) => {
+export const provideCameraControls = (initialCameraPose) => {
     let controls = $state.raw();
     const setPose = (pose, animate = false) => {
         const [x, y, z] = pose.position;
@@ -9,8 +9,12 @@ export const provideCameraControls = (cameraPose) => {
         controls?.setPosition(x, y, z, animate);
         controls?.setLookAt(x, y, z, lookAtX, lookAtY, lookAtZ, animate);
     };
+    const setInitialPose = () => {
+        const pose = initialCameraPose();
+        setPose(pose ?? { position: [3, 3, 3], lookAt: [0, 0, 0] }, true);
+    };
     $effect(() => {
-        const pose = cameraPose();
+        const pose = initialCameraPose();
         if (pose) {
             setPose(pose);
         }
@@ -23,6 +27,7 @@ export const provideCameraControls = (cameraPose) => {
             controls = current;
         },
         setPose,
+        setInitialPose,
     });
 };
 export const useCameraControls = () => {

package/dist/hooks/usePartConfig.svelte.js

@@ -277,7 +277,7 @@ class StandalonePartConfig {
                         if (!fragmentId) {
                             continue;
                         }
-                        const components = fragmentResponse?.fragment?.fields['components'].kind;
+                        const components = fragmentResponse?.fragment?.fields['components']?.kind;
                         if (components?.case === 'listValue') {
                             for (const component of components.value.values) {
                                 if (component.kind.case === 'structValue') {

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

@@ -12,7 +12,7 @@ export interface Settings {
     pointColor: string;
     lineWidth: number;
     lineDotSize: number;
-    enableMeasure: boolean;
+    interactionMode: 'navigate' | 'measure' | 'lasso';
     enableMeasureAxisX: boolean;
     enableMeasureAxisY: boolean;
     enableMeasureAxisZ: boolean;

package/dist/hooks/useSettings.svelte.js

@@ -15,7 +15,7 @@ const defaults = () => ({
     pointColor: '#333333',
     lineWidth: 0.005,
     lineDotSize: 0.01,
-    enableMeasure: false,
+    interactionMode: 'navigate',
     enableMeasureAxisX: true,
     enableMeasureAxisY: true,
     enableMeasureAxisZ: true,

package/dist/index.d.ts

@@ -1 +1,3 @@
 export { default as MotionTools } from './components/App.svelte';
+export { default as LassoTool } from './components/Lasso/Tool.svelte';
+export { default as PCD } from './components/PCD.svelte';

package/dist/index.js

@@ -1 +1,4 @@
 export { default as MotionTools } from './components/App.svelte';
+// Plugins
+export { default as LassoTool } from './components/Lasso/Tool.svelte';
+export { default as PCD } from './components/PCD.svelte';

package/dist/pcd.d.ts

@@ -0,0 +1 @@
+export declare const createBinaryPCD: (positions: Float32Array, colors?: Uint8Array) => Blob;

package/dist/pcd.js

@@ -0,0 +1,44 @@
+export const createBinaryPCD = (positions, colors) => {
+    const numPoints = positions.length / 3;
+    const hasColor = !!colors;
+    if (hasColor && colors.length !== numPoints * 3) {
+        throw new Error('Color array length must be numPoints * 3');
+    }
+    // 12 bytes xyz + optional 4 byte packed rgb
+    const stride = hasColor ? 16 : 12;
+    const header = `# .PCD v0.7 - Point Cloud Data file format
+VERSION 0.7
+FIELDS x y z${hasColor ? ' rgb' : ''}
+SIZE 4 4 4${hasColor ? ' 4' : ''}
+TYPE F F F${hasColor ? ' F' : ''}
+COUNT 1 1 1${hasColor ? ' 1' : ''}
+WIDTH ${numPoints}
+HEIGHT 1
+VIEWPOINT 0 0 0 1 0 0 0
+POINTS ${numPoints}
+DATA binary
+`;
+    const headerBytes = new TextEncoder().encode(header);
+    const bodyBuffer = new ArrayBuffer(numPoints * stride);
+    const view = new DataView(bodyBuffer);
+    for (let i = 0; i < numPoints; i++) {
+        const offset = i * stride;
+        const pi = i * 3;
+        // XYZ
+        view.setFloat32(offset + 0, positions[pi + 0], true);
+        view.setFloat32(offset + 4, positions[pi + 1], true);
+        view.setFloat32(offset + 8, positions[pi + 2], true);
+        if (hasColor) {
+            const r = colors[pi + 0];
+            const g = colors[pi + 1];
+            const b = colors[pi + 2];
+            // pack into uint32
+            const packed = (r << 16) | (g << 8) | b;
+            // write as float32
+            view.setUint32(offset + 12, packed, true);
+        }
+    }
+    return new Blob([headerBytes, bodyBuffer], {
+        type: 'application/octet-stream',
+    });
+};

package/dist/plugins/bvh.svelte.js

@@ -50,7 +50,12 @@ export const bvh = (raycaster, options) => {
                         ref.remove(helper);
                 };
             }
-            else if (isInstanceOf(ref, 'Mesh')) {
+            else if (isInstanceOf(ref, 'Mesh') &&
+                /**
+                 * (mp) Line2s sort of suck. Their buffer attribute design internally is much different
+                 * but they give no indication other than this that they are different.
+                 */
+                ref.geometry.attributes.position) {
                 ref.geometry.computeBoundsTree = computeBoundsTree;
                 ref.geometry.disposeBoundsTree = disposeBoundsTree;
                 ref.raycast = acceleratedRaycast;

package/dist/test/createRandomPcdBinary.d.ts

@@ -1 +1 @@
-export declare const createRandomPcdBinary: (numPoints?: number, scale?: number, axes?: string) => Uint8Array;
+export declare const createRandomPcdBinary: (numPoints?: number, scale?: number, axes?: string) => Promise<Uint8Array>;

package/dist/test/createRandomPcdBinary.js

@@ -1,31 +1,18 @@
-export const createRandomPcdBinary = (numPoints = 200, scale = 1, axes = 'xyz') => {
-    const header = `
-# .PCD v0.7 - Point Cloud Data file format
-VERSION 0.7
-FIELDS x y z rgb
-SIZE 4 4 4 4
-TYPE F F F F
-COUNT 1 1 1
-WIDTH ${numPoints}
-HEIGHT 1
-VIEWPOINT 0 0 0 1 0 0 0
-POINTS ${numPoints}
-DATA ascii
-`.trim();
+import { createBinaryPCD } from '../pcd';
+export const createRandomPcdBinary = async (numPoints = 200, scale = 1, axes = 'xyz') => {
     const doX = axes.includes('x');
     const doY = axes.includes('y');
     const doZ = axes.includes('z');
-    const points = Array.from({ length: numPoints }, () => {
-        const x = doX ? ((Math.random() - 0.5) * scale).toFixed(6) : '0.000000';
-        const y = doY ? ((Math.random() - 0.5) * scale).toFixed(6) : '0.000000';
-        const z = doZ ? ((Math.random() - 0.5) * scale).toFixed(6) : '0.000000';
-        const red = Math.floor(Math.random() * 256);
-        const green = Math.floor(Math.random() * 256);
-        const blue = Math.floor(Math.random() * 256);
-        const rgbInt = (red << 16) | (green << 8) | blue;
-        const rgbFloat = String(new Float32Array(new Uint32Array([rgbInt]).buffer)[0]);
-        return `${x} ${y} ${z} ${rgbFloat}`;
-    });
-    const encoder = new TextEncoder();
-    return encoder.encode(`${header}\n${points.join('\n')}`);
+    const positions = new Float32Array(numPoints * 3);
+    const colors = new Uint8Array(numPoints * 3);
+    for (let i = 0, l = positions.length; i < l; i += 1) {
+        positions[i] = doX ? (Math.random() - 0.5) * scale : 0;
+        positions[i + 1] = doY ? (Math.random() - 0.5) * scale : 0;
+        positions[i + 2] = doZ ? (Math.random() - 0.5) * scale : 0;
+        colors[i] = Math.floor(Math.random() * 256);
+        colors[i + 1] = Math.floor(Math.random() * 256);
+        colors[i + 2] = Math.floor(Math.random() * 256);
+    }
+    const buffer = await createBinaryPCD(positions, colors).arrayBuffer();
+    return new Uint8Array(buffer);
 };

package/package.json

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

package/dist/components/Lasso/Line.svelte

@@ -1,44 +0,0 @@
-<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>