@viamrobotics/motion-tools 1.15.8 → 1.16.0

package/dist/components/{Lasso → Selection}/Debug.svelte

@@ -1,7 +1,7 @@
 <!--
 @component
 
-Shows all steps for querying points within a lasso selection
+Shows all steps for querying points within a selection
 -->
 <script lang="ts">
 	import type { Entity } from 'koota'
@@ -11,22 +11,22 @@ Shows all steps for querying points within a lasso selection
 
 	import { traits, useTrait } from '../../ecs'
 
-	import * as lassoTraits from './traits'
+	import * as selectionTraits from './traits'
 
 	const box3 = new Box3()
 	const min = new Vector3()
 	const max = new Vector3()
 
 	interface Props {
-		lasso: Entity
+		selection: Entity
 	}
 
-	let { lasso }: Props = $props()
+	let { selection }: 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 indices = useTrait(() => selection, selectionTraits.Indices)
+	const positions = useTrait(() => selection, traits.LinePositions)
+	const box = useTrait(() => selection, selectionTraits.Box)
+	const boxes = useTrait(() => selection, selectionTraits.Boxes)
 
 	const geometry = new BufferGeometry()
 

package/dist/components/{Lasso → Selection}/Debug.svelte.d.ts

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

package/dist/components/Selection/Ellipse.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">
+	import type { ShapecastCallbacks } from 'three-mesh-bvh'
+
+	import { useThrelte } from '@threlte/core'
+	import earcut from 'earcut'
+	import { Not } from 'koota'
+	import { Box3, Triangle, Vector3 } from 'three'
+
+	import { createBufferGeometry } from '../../attribute'
+	import { traits, useQuery, useWorld } from '../../ecs'
+	import { useCameraControls } from '../../hooks/useControls.svelte'
+
+	import Debug from './Debug.svelte'
+	import * as selectionTraits from './traits'
+	import { getTriangleBoxesFromIndices, getTriangleFromIndex, raycast } from './utils'
+
+	interface Props {
+		active?: boolean
+		debug?: boolean
+	}
+
+	let { active = false, 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()
+
+	let frameScheduled = false
+	let drawing = false
+
+	const onpointerdown = (event: PointerEvent) => {
+		if (!event.shiftKey || !active) return
+
+		const { x, y } = raycast(event, camera.current)
+
+		drawing = true
+
+		world.spawn(
+			traits.LinePositions(new Float32Array([x, y, 0])),
+			selectionTraits.StartPoint({ x, y }),
+			traits.LineWidth(1.5),
+			traits.RenderOrder(999),
+			traits.Material({ depthTest: false }),
+			traits.Color({ r: 1, g: 0, b: 0 }),
+			selectionTraits.Box({ minX: x, minY: y, maxX: x, maxY: y }),
+			selectionTraits.Ellipse
+		)
+
+		if (controls.current) {
+			controls.current.enabled = false
+		}
+	}
+
+	const onpointermove = (event: PointerEvent) => {
+		if (!drawing || !active) return
+
+		let ellipse = world.query(selectionTraits.Ellipse).at(-1)
+
+		if (!ellipse) 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, camera.current)
+			const positions = ellipse.get(traits.LinePositions)
+			const startPoint = ellipse.get(selectionTraits.StartPoint)
+			const box = ellipse.get(selectionTraits.Box)
+
+			if (!positions || !box || !startPoint) return
+
+			let minX = startPoint.x
+			let minY = startPoint.y
+			let maxX = startPoint.x
+			let maxY = startPoint.y
+
+			if (x < minX) minX = x
+			else if (x > maxX) maxX = x
+
+			if (y < minY) minY = y
+			else if (y > maxY) maxY = y
+
+			const nextPositions = ellipsePoints(minX, maxX, minY, maxY, 100)
+
+			ellipse.set(traits.LinePositions, new Float32Array(nextPositions))
+			ellipse.set(selectionTraits.Box, { minX, minY, maxX, maxY })
+		})
+	}
+
+	const ellipsePoints = (
+		minX: number,
+		maxX: number,
+		minY: number,
+		maxY: number,
+		numPoints: number
+	): Float32Array => {
+		const cx = (minX + maxX) / 2
+		const cy = (minY + maxY) / 2
+		const rx = (maxX - minX) / 2
+		const ry = (maxY - minY) / 2
+
+		const points = new Float32Array(numPoints * 3)
+
+		for (let i = 0; i < numPoints; i++) {
+			const t = (i / numPoints) * 2 * Math.PI
+
+			points[i * 3] = cx + rx * Math.cos(t)
+			points[i * 3 + 1] = cy + ry * Math.sin(t)
+			points[i * 3 + 2] = 0
+		}
+
+		return points
+	}
+
+	const onpointerleave = () => {
+		if (!drawing || !active) return
+
+		onpointerup()
+	}
+
+	const onpointerup = () => {
+		if (!drawing || !active) return
+
+		drawing = false
+
+		let ellipse = world.query(selectionTraits.Ellipse).at(-1)
+
+		if (!ellipse) return
+
+		let positions = ellipse.get(traits.LinePositions)
+
+		if (!positions) return
+
+		if (controls.current) {
+			controls.current.enabled = true
+		}
+
+		const indices = earcut(positions, undefined, 3)
+		if (debug) {
+			ellipse.add(selectionTraits.Indices(new Uint16Array(indices)))
+		}
+
+		const boxes: selectionTraits.AABB[] = getTriangleBoxesFromIndices(indices, positions)
+		if (debug) {
+			ellipse.add(selectionTraits.Boxes(boxes))
+		}
+
+		const ellipseBox = ellipse.get(selectionTraits.Box)
+
+		if (!ellipseBox) return
+
+		min.set(ellipseBox.minX, ellipseBox.minY, Number.NEGATIVE_INFINITY)
+		max.set(ellipseBox.maxX, ellipseBox.maxY, Number.POSITIVE_INFINITY)
+		box3.set(min, max)
+
+		const enclosedPoints: number[] = []
+
+		for (const pointsEntity of world.query(
+			traits.Points,
+			Not(selectionTraits.SelectionEnclosedPoints)
+		)) {
+			const geometry = pointsEntity.get(traits.BufferGeometry)
+
+			if (!geometry) return
+
+			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, indices, positions, 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 ellipseResultGeometry = createBufferGeometry(new Float32Array(enclosedPoints))
+
+		world.spawn(
+			traits.Name('Ellipse result'),
+			traits.BufferGeometry(ellipseResultGeometry),
+			traits.Color({ r: 1, g: 0, b: 0 }),
+			traits.RenderOrder(999),
+			traits.Material({ depthTest: false }),
+			traits.Points,
+			traits.Removable,
+			selectionTraits.SelectionEnclosedPoints,
+			selectionTraits.PointsCapturedBy(ellipse)
+		)
+	}
+
+	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(() => {
+		globalThis.addEventListener('keydown', onkeydown)
+		globalThis.addEventListener('keyup', onkeyup)
+		dom.addEventListener('pointerdown', onpointerdown)
+		dom.addEventListener('pointermove', onpointermove)
+		dom.addEventListener('pointerup', onpointerup)
+		dom.addEventListener('pointerleave', onpointerleave)
+
+		return () => {
+			globalThis.removeEventListener('keydown', onkeydown)
+			globalThis.removeEventListener('keyup', onkeyup)
+			dom.removeEventListener('pointerdown', onpointerdown)
+			dom.removeEventListener('pointermove', onpointermove)
+			dom.removeEventListener('pointerup', onpointerup)
+			dom.removeEventListener('pointerleave', onpointerleave)
+		}
+	})
+
+	const ellipses = useQuery(selectionTraits.Ellipse)
+
+	$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(selectionTraits.SelectionEnclosedPoints)) {
+				if (world.has(entity)) {
+					entity.destroy()
+				}
+			}
+		}
+	})
+</script>
+
+{#if debug}
+	{#each ellipses.current as ellipse (ellipse)}
+		<Debug selection={ellipse} />
+	{/each}
+{/if}

package/dist/components/Selection/Ellipse.svelte.d.ts

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

package/dist/components/{Lasso → Selection}/Lasso.svelte

@@ -4,20 +4,22 @@
 	import { useThrelte } from '@threlte/core'
 	import earcut from 'earcut'
 	import { Not } from 'koota'
-	import { Box3, Plane, Raycaster, Triangle, Vector2, Vector3 } from 'three'
+	import { Box3, Triangle, Vector3 } from 'three'
 
 	import { createBufferGeometry } from '../../attribute'
 	import { traits, useQuery, useWorld } from '../../ecs'
 	import { useCameraControls } from '../../hooks/useControls.svelte'
 
 	import Debug from './Debug.svelte'
-	import * as lassoTraits from './traits'
+	import * as selectionTraits from './traits'
+	import { getTriangleBoxesFromIndices, getTriangleFromIndex, raycast } from './utils'
 
 	interface Props {
+		active?: boolean
 		debug?: boolean
 	}
 
-	let { debug = false }: Props = $props()
+	let { active = false, debug = false }: Props = $props()
 
 	const world = useWorld()
 	const controls = useCameraControls()
@@ -29,33 +31,14 @@
 
 	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
 
-	const raycaster = new Raycaster()
-	const mouse = new Vector2()
-	const plane = new Plane(new Vector3(0, 0, 1), 0)
-	const point = new Vector3()
-
-	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
-
-		raycaster.setFromCamera(mouse, camera.current)
-		raycaster.ray.intersectPlane(plane, point)
-		return point
-	}
-
 	const onpointerdown = (event: PointerEvent) => {
-		if (!event.shiftKey) return
+		if (!event.shiftKey || !active) return
 
-		const { x, y } = raycast(event)
+		const { x, y } = raycast(event, camera.current)
 
 		drawing = true
 
@@ -65,8 +48,8 @@
 			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
+			selectionTraits.Box({ minX: x, minY: y, maxX: x, maxY: y }),
+			selectionTraits.Lasso
 		)
 
 		if (controls.current) {
@@ -75,9 +58,9 @@
 	}
 
 	const onpointermove = (event: PointerEvent) => {
-		if (!drawing) return
+		if (!drawing || !active) return
 
-		let lasso = world.query(lassoTraits.Lasso).at(-1)
+		let lasso = world.query(selectionTraits.Lasso).at(-1)
 
 		if (!lasso) return
 
@@ -92,9 +75,9 @@
 		requestAnimationFrame(() => {
 			frameScheduled = false
 
-			const { x, y } = raycast(event)
+			const { x, y } = raycast(event, camera.current)
 			const positions = lasso.get(traits.LinePositions)
-			const box = lasso.get(lassoTraits.Box)
+			const box = lasso.get(selectionTraits.Box)
 
 			if (!positions || !box) return
 
@@ -110,22 +93,22 @@
 			if (y < box.minY) box.minY = y
 			else if (y > box.maxY) box.maxY = y
 
-			lasso.set(lassoTraits.Box, box)
+			lasso.set(selectionTraits.Box, box)
 		})
 	}
 
 	const onpointerleave = () => {
-		if (!drawing) return
+		if (!drawing || !active) return
 
 		onpointerup()
 	}
 
 	const onpointerup = () => {
-		if (!drawing) return
+		if (!drawing || !active) return
 
 		drawing = false
 
-		let lasso = world.query(lassoTraits.Lasso).at(-1)
+		let lasso = world.query(selectionTraits.Lasso).at(-1)
 
 		if (!lasso) return
 
@@ -149,31 +132,15 @@
 
 		const indices = earcut(positions, undefined, 3)
 		if (debug) {
-			lasso.add(lassoTraits.Indices(new Uint16Array(indices)))
+			lasso.add(selectionTraits.Indices(new Uint16Array(indices)))
 		}
 
-		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])
-			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 })
-		}
+		const boxes: selectionTraits.AABB[] = getTriangleBoxesFromIndices(indices, positions)
 		if (debug) {
-			lasso.add(lassoTraits.Boxes(boxes))
+			lasso.add(selectionTraits.Boxes(boxes))
 		}
 
-		const lassoBox = lasso.get(lassoTraits.Box)
+		const lassoBox = lasso.get(selectionTraits.Box)
 
 		if (!lassoBox) return
 
@@ -183,7 +150,10 @@
 
 		const enclosedPoints: number[] = []
 
-		for (const pointsEntity of world.query(traits.Points, Not(lassoTraits.LassoEnclosedPoints))) {
+		for (const pointsEntity of world.query(
+			traits.Points,
+			Not(selectionTraits.SelectionEnclosedPoints)
+		)) {
 			const geometry = pointsEntity.get(traits.BufferGeometry)
 
 			if (!geometry) return
@@ -208,7 +178,7 @@
 						triangleBox.set(min, max)
 
 						if (triangleBox.containsPoint(point)) {
-							getTriangleFromIndex(i, triangle)
+							getTriangleFromIndex(i, indices, positions, triangle)
 
 							if (triangle.containsPoint(point)) {
 								enclosedPoints.push(point.x, point.y, point.z)
@@ -230,8 +200,8 @@
 			traits.Material({ depthTest: false }),
 			traits.Points,
 			traits.Removable,
-			lassoTraits.LassoEnclosedPoints,
-			lassoTraits.PointsCapturedBy(lasso)
+			selectionTraits.SelectionEnclosedPoints,
+			selectionTraits.PointsCapturedBy(lasso)
 		)
 	}
 
@@ -265,7 +235,7 @@
 		}
 	})
 
-	const lassos = useQuery(lassoTraits.Lasso)
+	const lassos = useQuery(selectionTraits.Lasso)
 
 	$effect(() => {
 		if (!controls.current) return
@@ -288,7 +258,7 @@
 	// On unmount, destroy all lasso related entities
 	$effect(() => {
 		return () => {
-			for (const entity of world.query(lassoTraits.LassoEnclosedPoints)) {
+			for (const entity of world.query(selectionTraits.SelectionEnclosedPoints)) {
 				if (world.has(entity)) {
 					entity.destroy()
 				}
@@ -299,6 +269,6 @@
 
 {#if debug}
 	{#each lassos.current as lasso (lasso)}
-		<Debug {lasso} />
+		<Debug selection={lasso} />
 	{/each}
 {/if}

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

@@ -1,4 +1,5 @@
 interface Props {
+    active?: boolean;
     debug?: boolean;
 }
 declare const Lasso: import("svelte").Component<Props, {}, "">;

package/dist/components/{Lasso → Selection}/Tool.svelte

@@ -13,8 +13,11 @@
 	import { createBinaryPCD } from '../../pcd'
 
 	import FloatingPanel from '../overlay/FloatingPanel.svelte'
+	import Popover from '../overlay/Popover.svelte'
+	import ToggleGroup from '../overlay/ToggleGroup.svelte'
+	import Ellipse from './Ellipse.svelte'
 	import Lasso from './Lasso.svelte'
-	import * as lassoTraits from './traits'
+	import * as selectionTraits from './traits'
 
 	interface Props {
 		/** Whether to auto-enable lasso mode when the component mounts */
@@ -24,15 +27,18 @@
 		onSelection: (pcd: Blob) => void
 	}
 
+	type SelectionType = 'lasso' | 'ellipse'
+
 	let { enabled = false, onSelection }: Props = $props()
 
 	const { dom } = useThrelte()
 	const world = useWorld()
 	const settings = useSettings()
-	const isLassoMode = $derived(settings.current.interactionMode === 'lasso')
+	const isSelectionMode = $derived(settings.current.interactionMode === 'select')
+	let selectionType = $state<SelectionType>('lasso')
 
 	const onCommitClick = () => {
-		const entities = world.query(lassoTraits.LassoEnclosedPoints)
+		const entities = world.query(selectionTraits.SelectionEnclosedPoints)
 
 		const geometries: BufferGeometry[] = []
 		for (const entity of entities) {
@@ -58,14 +64,14 @@
 	}
 
 	$effect(() => {
-		if (isLassoMode) {
+		if (isSelectionMode) {
 			settings.current.cameraMode = 'orthographic'
 		}
 	})
 
 	$effect(() => {
 		if (enabled) {
-			settings.current.interactionMode = 'lasso'
+			settings.current.interactionMode = 'select'
 		}
 	})
 
@@ -74,19 +80,48 @@
 
 <Portal id="dashboard">
 	<fieldset>
-		<DashboardButton
-			active={isLassoMode}
-			icon="selection-drag"
-			description="{isLassoMode ? 'Disable' : 'Enable'} lasso selection"
-			onclick={() => {
-				settings.current.interactionMode = isLassoMode ? 'navigate' : 'lasso'
-			}}
-		/>
+		<div class="flex">
+			<DashboardButton
+				active={isSelectionMode}
+				icon="selection-drag"
+				description="{isSelectionMode ? 'Disable' : 'Enable'} selection"
+				onclick={() => {
+					settings.current.interactionMode = isSelectionMode ? 'navigate' : 'select'
+				}}
+			/>
+			<Popover>
+				{#snippet trigger(triggerProps)}
+					<DashboardButton
+						{...triggerProps}
+						active={isSelectionMode}
+						class="border-l-0"
+						icon="filter-sliders"
+						description="Selection settings"
+					/>
+				{/snippet}
+
+				<div class="border-medium m-2 border bg-white p-2 text-xs">
+					<div class="flex items-center gap-2">
+						Selection type
+						<ToggleGroup
+							options={[
+								{ label: 'Lasso', selected: selectionType === 'lasso' },
+								{ label: 'Ellipse', selected: selectionType === 'ellipse' },
+							]}
+							onSelect={(details) => {
+								selectionType = details.includes('Lasso') ? 'lasso' : 'ellipse'
+							}}
+						/>
+					</div>
+				</div>
+			</Popover>
+		</div>
 	</fieldset>
 </Portal>
 
-{#if isLassoMode && rect.height > 0 && rect.width > 0}
-	<Lasso />
+{#if isSelectionMode && rect.height > 0 && rect.width > 0}
+	<Ellipse active={selectionType === 'ellipse'} />
+	<Lasso active={selectionType === 'lasso'} />
 
 	<Portal id="dom">
 		<FloatingPanel

package/dist/components/{Lasso → Selection}/traits.d.ts

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

package/dist/components/{Lasso → Selection}/traits.js

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

package/dist/components/Selection/utils.d.ts

@@ -0,0 +1,5 @@
+import { Camera, Triangle, Vector3 } from 'three';
+import type * as selectionTraits from './traits';
+export declare const raycast: (event: PointerEvent, camera: Camera) => Vector3;
+export declare const getTriangleFromIndex: (i: number, indices: number[], positions: Float32Array, outTriangle: Triangle) => void;
+export declare const getTriangleBoxesFromIndices: (indices: number[], positions: Float32Array) => selectionTraits.AABB[];

package/dist/components/Selection/utils.js

@@ -0,0 +1,38 @@
+import { Box3, Camera, Plane, Raycaster, Triangle, Vector2, Vector3 } from 'three';
+const raycaster = new Raycaster();
+const mouse = new Vector2();
+const plane = new Plane(new Vector3(0, 0, 1), 0);
+const point = new Vector3();
+const triangle = new Triangle();
+const box3 = new Box3();
+const a = new Vector3();
+const b = new Vector3();
+const c = new Vector3();
+export const raycast = (event, camera) => {
+    const element = event.target;
+    const rect = element.getBoundingClientRect();
+    mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+    mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+    raycaster.setFromCamera(mouse, camera);
+    raycaster.ray.intersectPlane(plane, point);
+    return point;
+};
+export const getTriangleFromIndex = (i, indices, positions, outTriangle) => {
+    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]);
+    outTriangle.set(a, b, c);
+};
+export const getTriangleBoxesFromIndices = (indices, positions) => {
+    const boxes = [];
+    for (let i = 0, l = indices.length; i < l; i += 3) {
+        getTriangleFromIndex(i, indices, positions, 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 });
+    }
+    return boxes;
+};

package/dist/components/xr/OriginMarker.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
+	import { useTask, useThrelte } from '@threlte/core'
 	import { Grid, useGamepad } from '@threlte/extras'
+	import { Hand, useHand, useXR } from '@threlte/xr'
 	import { Group, Quaternion, Vector2, Vector3 } from 'three'
 
 	import { useAnchors } from './useAnchors.svelte'
@@ -9,17 +10,20 @@
 	const origin = useOrigin()
 	const anchors = useAnchors()
 
-	const group = new Group()
 	const anchorObject = new Group()
 
 	const leftPad = useGamepad({ xr: true, hand: 'left' })
 	const rightPad = useGamepad({ xr: true, hand: 'right' })
 
-	const speed = 0.05
+	let speed = $state(0.05)
 
 	const vec2 = new Vector2()
 	const target = new Vector2()
 
+	leftPad.squeeze.on('change', () => {
+		speed = leftPad.squeeze.pressed ? 0.005 : 0.05
+	})
+
 	leftPad.thumbstick.on('change', ({ value }) => {
 		if (typeof value === 'number') {
 			return
@@ -29,6 +33,8 @@
 		const [x, y, z] = origin.position
 		const r = origin.rotation
 
+		vec2.set(z, r).lerp(target.set(z + vy * speed, r + vx * speed), 0.5)
+
 		origin.set([x, y, z + vy * speed], r + vx * speed)
 	})
 
@@ -56,19 +62,90 @@
 			anchors.bindAnchorObject(anchor, anchorObject)
 		})
 	})
+
+	let startLeftPinchTranslation = new Vector3()
+	let leftPinchTranslation = new Vector3()
+	let startRightPinchTranslation = new Vector3()
+	let rightPinchTranslation = new Vector3()
+
+	const leftHand = useHand('left')
+	const rightHand = useHand('right')
+
+	let translating = $state(false)
+	let rotating = $state(false)
+
+	const { renderer } = useThrelte()
+	const { isPresenting } = useXR()
+
+	$effect(() => {
+		if (!$isPresenting) {
+			return
+		}
+		renderer.xr.getHand(0).addEventListener('pinchstart', () => {
+			if (leftHand.current?.targetRay.position) {
+				translating = true
+				startLeftPinchTranslation.copy(leftHand.current.targetRay.position)
+			}
+		})
+	})
+
+	useTask(
+		() => {
+			if (leftHand.current?.targetRay && translating) {
+				leftPinchTranslation
+					.copy(leftHand.current.targetRay.position)
+					.sub(startLeftPinchTranslation)
+				origin.set(leftPinchTranslation.toArray(), origin.rotation)
+			}
+		},
+		{
+			running: () => translating,
+		}
+	)
+
+	useTask(
+		() => {
+			if (rightHand.current?.targetRay && rotating) {
+				rightPinchTranslation.copy(rightHand.current.targetRay.position)
+				const rotation =
+					origin.rotation + rightPinchTranslation.distanceTo(startRightPinchTranslation)
+				origin.set(leftPinchTranslation.toArray(), rotation)
+			}
+		},
+		{
+			running: () => rotating,
+		}
+	)
 </script>
 
-<T
-	is={group}
-	position={[0, 0.05, 0]}
->
-	<Grid
-		plane="xy"
-		position.y={0.05}
-		fadeDistance={5}
-		fadeOrigin={new Vector3()}
-		cellSize={0.1}
-		cellColor="#fff"
-		sectionColor="#fff"
-	/>
-</T>
+<Grid
+	plane="xy"
+	fadeDistance={5}
+	fadeOrigin={new Vector3()}
+	cellSize={0.1}
+	cellColor="#fff"
+	sectionColor="#fff"
+/>
+
+<Hand
+	left
+	onpinchstart={() => {
+		console.log('pinchstart')
+		if (leftHand.current?.targetRay.position) {
+			translating = true
+			startLeftPinchTranslation.copy(leftHand.current.targetRay.position)
+		}
+	}}
+	onpinchend={() => (translating = false)}
+/>
+
+<Hand
+	right
+	onpinchstart={() => {
+		if (rightHand.current?.targetRay.position) {
+			rotating = true
+			startRightPinchTranslation.copy(rightHand.current.targetRay.position)
+		}
+	}}
+	onpinchend={() => (rotating = false)}
+/>

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

@@ -1,6 +1,6 @@
 export interface Settings {
     cameraMode: 'orthographic' | 'perspective';
-    interactionMode: 'navigate' | 'measure' | 'lasso';
+    interactionMode: 'navigate' | 'measure' | 'select';
     refreshRates: {
         poses: number;
         pointclouds: number;

package/dist/hooks/useSettings.svelte.js

@@ -65,7 +65,7 @@ export const provideSettings = () => {
     });
     $effect(() => {
         if (isLoaded) {
-            set('motion-tools-settings', $state.snapshot(settings));
+            set('motion-tools-settings', $state.snapshot({ ...settings, interactionMode: 'navigate' }));
         }
     });
     const context = {

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

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