@viamrobotics/motion-tools 1.15.7 → 1.16.0

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/Snapshot.svelte

@@ -66,6 +66,14 @@ Renders a Snapshot protobuf by spawning its transforms and drawings as entities
 				position: [x * 0.001, y * 0.001, z * 0.001],
 				lookAt: [lx * 0.001, ly * 0.001, lz * 0.001],
 			})
+
+			if (sceneCamera.cameraType.case === 'orthographicCamera') {
+				const orthographicCamera = sceneCamera.cameraType.value as { zoom?: number }
+				const zoom = orthographicCamera.zoom
+				if (zoom !== undefined) {
+					cameraControls.setZoom(zoom)
+				}
+			}
 		}
 	})
 

package/dist/components/overlay/RefreshRate.svelte

@@ -20,10 +20,10 @@
 
 	import { IconButton, Select } from '@viamrobotics/prime-core'
 
-	import { useMachineSettings } from '../../hooks/useMachineSettings.svelte'
+	import { useSettings } from '../../hooks/useSettings.svelte'
 
 	interface Props {
-		id: string
+		id: 'poses' | 'pointclouds' | 'vision'
 		label: string
 		allowLive?: boolean
 		onManualRefetch: () => void
@@ -32,8 +32,9 @@
 
 	let { id, label, allowLive = false, onManualRefetch, children }: Props = $props()
 
-	const { refreshRates } = useMachineSettings()
-	const rate = $derived(refreshRates.get(id) ?? RefetchRates.MANUAL)
+	const settings = useSettings()
+	const { refreshRates } = $derived(settings.current)
+	const rate = $derived(refreshRates[id] ?? RefetchRates.MANUAL)
 </script>
 
 <label class="flex flex-col gap-1">
@@ -48,7 +49,7 @@
 			onchange={(event: InputEvent) => {
 				if (event.target instanceof HTMLSelectElement) {
 					const { value } = event.target
-					refreshRates.set(id, Number.parseInt(value, 10))
+					refreshRates[id] = Number.parseInt(value, 10)
 				}
 			}}
 			value={String(rate)}
@@ -87,7 +88,7 @@
 				variant="secondary"
 				cx="border-light border"
 				onclick={() => {
-					refreshRates.set(id, RefetchRates.MANUAL)
+					refreshRates[id] = RefetchRates.MANUAL
 				}}
 			/>
 		{/if}

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

@@ -11,7 +11,7 @@ export declare const RefetchRates: {
 };
 import type { Snippet } from 'svelte';
 interface Props {
-    id: string;
+    id: 'poses' | 'pointclouds' | 'vision';
     label: string;
     allowLive?: boolean;
     onManualRefetch: () => void;

package/dist/components/overlay/settings/Settings.svelte

@@ -9,11 +9,11 @@
 	import DashboardButton from '../dashboard/Button.svelte'
 	import XRControllerSettings from '../../xr/XRControllerSettings.svelte'
 	import { useGeometries } from '../../../hooks/useGeometries.svelte'
-	import { RefreshRates, useMachineSettings } from '../../../hooks/useMachineSettings.svelte'
 	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { usePointcloudObjects } from '../../../hooks/usePointcloudObjects.svelte'
 	import { usePointClouds } from '../../../hooks/usePointclouds.svelte'
 	import { useRefetchPoses } from '../../../hooks/useRefetchPoses'
-	import { useSettings } from '../../../hooks/useSettings.svelte'
+	import { RefreshRates, useSettings } from '../../../hooks/useSettings.svelte'
 	import { useWeblabs, WEBLABS_EXPERIMENTS } from '../../../hooks/useWeblabs.svelte'
 
 	import FloatingPanel from '../FloatingPanel.svelte'
@@ -26,9 +26,10 @@
 	const cameras = useResourceNames(() => partID.current, 'camera')
 	const visionServices = useResourceNames(() => partID.current, 'vision')
 	const settings = useSettings()
-	const { disabledCameras, disabledVisionServices } = useMachineSettings()
+	const { disabledCameras, disabledVisionServices } = $derived(settings.current)
 	const geometries = useGeometries()
 	const pointclouds = usePointClouds()
+	const pointcloudObjects = usePointcloudObjects()
 	const { refetchPoses } = useRefetchPoses()
 	const weblabs = useWeblabs()
 	const knownWeblabs = Object.keys(WEBLABS_EXPERIMENTS)
@@ -87,11 +88,18 @@
 		/>
 		<RefreshRate
 			id={RefreshRates.pointclouds}
-			label="Pointclouds"
+			label="Pointclouds from cameras"
 			onManualRefetch={() => {
 				pointclouds.refetch()
 			}}
 		/>
+		<RefreshRate
+			id={RefreshRates.vision}
+			label="Vision service pointcloud segments and objects"
+			onManualRefetch={() => {
+				pointcloudObjects.refetch()
+			}}
+		/>
 	</div>
 {/snippet}
 
@@ -126,9 +134,9 @@
 			<div class="flex items-center justify-between py-0.5 text-xs">
 				{camera.name}
 				<Switch
-					on={disabledCameras.get(camera.name) !== true}
+					on={disabledCameras[camera.name] !== true}
 					on:change={(event) => {
-						disabledCameras.set(camera.name, !event.detail)
+						disabledCameras[camera.name] = !event.detail
 					}}
 				/>
 			</div>
@@ -146,9 +154,9 @@
 			<div class="flex items-center justify-between py-0.5">
 				{visionService.name}
 				<Switch
-					on={disabledVisionServices.get(visionService.name) !== true}
+					on={disabledVisionServices[visionService.name] !== true}
 					on:change={(event) => {
-						disabledVisionServices.set(visionService.name, !event.detail)
+						disabledVisionServices[visionService.name] = !event.detail
 					}}
 				/>
 			</div>