@viamrobotics/motion-tools 0.6.0 → 0.6.2

package/dist/components/CameraControls.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { CameraControls, type CameraControlsRef, Gizmo } from '@threlte/extras'
+	import { useTransformControls } from '../hooks/useControls.svelte'
+	import KeyboardControls from './KeyboardControls.svelte'
+	import Portal from './portal/Portal.svelte'
+	import Button from './dashboard/Button.svelte'
+
+	const transformControls = useTransformControls()
+
+	let ref = $state.raw<CameraControlsRef>()
+</script>
+
+<Portal id="dashboard">
+	<fieldset>
+		<Button
+			active
+			icon="camera-outline"
+			description="Reset camera"
+			onclick={() => {
+				ref?.reset(true)
+			}}
+		/>
+	</fieldset>
+</Portal>
+
+<CameraControls
+	bind:ref
+	enabled={!transformControls.active}
+>
+	{#snippet children({ ref }: { ref: CameraControlsRef })}
+		<KeyboardControls cameraControls={ref} />
+		<Gizmo />
+	{/snippet}
+</CameraControls>

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

@@ -0,0 +1,4 @@
+import { CameraControls } from '@threlte/extras';
+declare const CameraControls: import("svelte").Component<Record<string, never>, {}, "">;
+type CameraControls = ReturnType<typeof CameraControls>;
+export default CameraControls;

package/dist/components/KeyboardControls.svelte

@@ -16,6 +16,7 @@
 	const settings = useSettings()
 
 	const keys = new PressedKeys()
+	const meta = $derived(keys.has('meta'))
 	const w = $derived(keys.has('w'))
 	const s = $derived(keys.has('s'))
 	const a = $derived(keys.has('a'))
@@ -27,11 +28,15 @@
 	const down = $derived(keys.has('arrowdown'))
 	const right = $derived(keys.has('arrowright'))
 	const any = $derived(w || s || a || d || r || f || up || left || down || right)
-
 	const { start, stop } = useTask(
 		(delta) => {
 			const dt = delta * 1000
 
+			// Disallow keyboard navigation if the user is holding down the meta key
+			if (meta) {
+				return
+			}
+
 			if (a) {
 				cameraControls.truck(-0.01 * dt, 0, true)
 			}

package/dist/components/Pointcloud.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
-	import { Points, BufferAttribute, BufferGeometry, PointsMaterial } from 'three'
+	import {
+		Points,
+		BufferAttribute,
+		BufferGeometry,
+		PointsMaterial,
+		OrthographicCamera,
+	} from 'three'
 
-	import { T } from '@threlte/core'
+	import { T, useTask, useThrelte } from '@threlte/core'
 	import type { WorldObject } from '../WorldObject'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
 	import { meshBounds } from '@threlte/extras'
 	import { poseToObject3d } from '../transform'
+	import { useSettings } from '../hooks/useSettings.svelte'
 
 	interface Props {
 		object: WorldObject<{ case: 'points'; value: Float32Array<ArrayBuffer> }>
@@ -13,15 +20,25 @@
 
 	let { object }: Props = $props()
 
+	const { camera } = useThrelte()
+	const settings = useSettings()
+
 	const colors = $derived(object.metadata.colors)
+	const pointSize = $derived(object.metadata.pointSize ?? settings.current.pointSize)
 	const positions = $derived(object.geometry?.value ?? new Float32Array())
+	const orthographic = $derived(settings.current.cameraMode === 'orthographic')
 
 	const points = new Points()
 	const geometry = new BufferGeometry()
 	const material = new PointsMaterial()
+	material.toneMapped = false
+
+	$effect.pre(() => {
+		material.size = pointSize
+	})
 
 	$effect.pre(() => {
-		material.size = object.metadata.pointSize ?? 0.01
+		material.color.set(colors ? 0xffffff : (object.metadata.color ?? settings.current.pointColor))
 	})
 
 	$effect.pre(() => {
@@ -30,9 +47,7 @@
 
 	$effect.pre(() => {
 		material.vertexColors = colors !== undefined
-		material.color.set(colors ? 0xffffff : (object.metadata.color ?? '#888888'))
 
-		material.toneMapped = false
 		if (colors) {
 			geometry.setAttribute('color', new BufferAttribute(colors, 3))
 			geometry.attributes.color.needsUpdate = true
@@ -44,6 +59,24 @@
 	})
 
 	const events = useObjectEvents(() => object.uuid)
+
+	const { start, stop } = useTask(
+		() => {
+			// If using an orthographic camera, points need to be
+			// resized to half zoom to take up the same screen space.
+			material.size = pointSize * ((camera.current as OrthographicCamera).zoom / 2)
+		},
+		{ autoStart: false }
+	)
+
+	$effect(() => {
+		if (orthographic) {
+			start()
+		} else {
+			stop()
+			material.size = pointSize
+		}
+	})
 </script>
 
 <T

package/dist/components/Scene.svelte

@@ -1,13 +1,7 @@
 <script lang="ts">
-	import { Color, Vector3 } from 'three'
+	import { Vector3 } from 'three'
 	import { T } from '@threlte/core'
-	import {
-		CameraControls,
-		type CameraControlsRef,
-		Gizmo,
-		Grid,
-		interactivity,
-	} from '@threlte/extras'
+	import { Grid, interactivity, PerfMonitor } from '@threlte/extras'
 	import { PortalTarget } from './portal'
 	import Frames from './Frames.svelte'
 	import Pointclouds from './Pointclouds.svelte'
@@ -19,9 +13,10 @@
 	import { useFocusedObject3d } from '../hooks/useSelection.svelte'
 	import type { Snippet } from 'svelte'
 	import { useXR } from '@threlte/xr'
-	import { useTransformControls } from '../hooks/useControls.svelte'
-	import KeyboardControls from './KeyboardControls.svelte'
+
 	import { useOrigin } from './xr/useOrigin.svelte'
+	import { useSettings } from '../hooks/useSettings.svelte'
+	import CameraControls from './CameraControls.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -39,8 +34,8 @@
 		},
 	})
 
+	const settings = useSettings()
 	const focusedObject3d = useFocusedObject3d()
-	const transformControls = useTransformControls()
 	const origin = useOrigin()
 
 	const object3d = $derived(focusedObject3d.current)
@@ -48,10 +43,9 @@
 	const { isPresenting } = useXR()
 </script>
 
-<T.Color
-	attach="background"
-	args={[new Color('white')]}
-/>
+{#if settings.current.renderStats}
+	<PerfMonitor anchorX="right" />
+{/if}
 
 <T.Group
 	position={origin.position}
@@ -63,12 +57,7 @@
 	{:else}
 		{#if !$isPresenting}
 			<Camera position={[3, 3, 3]}>
-				<CameraControls enabled={!transformControls.active}>
-					{#snippet children({ ref }: { ref: CameraControlsRef })}
-						<KeyboardControls cameraControls={ref} />
-						<Gizmo />
-					{/snippet}
-				</CameraControls>
+				<CameraControls />
 			</Camera>
 		{/if}
 
@@ -81,15 +70,15 @@
 
 		<Selected />
 
-		{#if !$isPresenting}
+		{#if !$isPresenting && settings.current.grid}
 			<Grid
 				plane="xy"
 				sectionColor="#333"
 				infiniteGrid
-				cellSize={0.5}
-				sectionSize={10}
+				cellSize={settings.current.gridCellSize}
+				sectionSize={settings.current.gridSectionSize}
 				fadeOrigin={new Vector3()}
-				fadeDistance={25}
+				fadeDistance={settings.current.gridFadeDistance}
 			/>
 		{/if}
 	{/if}

package/dist/components/StaticGeometries.svelte

@@ -23,6 +23,12 @@
 
 	keys.onKeys('=', () => geometries.add())
 	keys.onKeys('-', () => geometries.remove(selected.current ?? ''))
+
+	$effect(() => {
+		settings.current.transforming = geometries.current.some(
+			(geometry) => selected.current === geometry.uuid
+		)
+	})
 </script>
 
 {#each geometries.current as object (object.uuid)}
@@ -39,6 +45,9 @@
 					<TransformControls
 						object={ref}
 						{mode}
+						translationSnap={settings.current.snapping ? 0.1 : undefined}
+						rotationSnap={settings.current.snapping ? Math.PI / 24 : undefined}
+						scaleSnap={settings.current.snapping ? 0.1 : undefined}
 						onmouseDown={() => {
 							transformControls.setActive(true)
 						}}

package/dist/components/Tree/Settings.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-	import { Select } from '@viamrobotics/prime-core'
+	import { Select, Switch, Input } from '@viamrobotics/prime-core'
 	import RefreshRate from '../RefreshRate.svelte'
 	import { useMotionClient } from '../../hooks/useMotionClient.svelte'
 	import Drawer from './Drawer.svelte'
+	import { useSettings } from '../../hooks/useSettings.svelte'
 
+	const settings = useSettings()
 	const motionClient = useMotionClient()
 </script>
 
@@ -11,7 +13,9 @@
 	name="Settings"
 	defaultOpen
 >
-	<div class="flex flex-col gap-2 p-3">
+	<div class="flex h-100 flex-col gap-2 overflow-scroll p-3">
+		<h3 class="text-base"><strong>Refresh rates</strong></h3>
+
 		<RefreshRate name="Frames">
 			<option value="0">Do not fetch</option>
 			<option value="1">Fetch on reconfigure</option>
@@ -20,8 +24,10 @@
 		<RefreshRate name="Geometries" />
 		<RefreshRate name="Poses" />
 
+		<h3 class="text-base"><strong>Motion</strong></h3>
+
 		<label class="flex flex-col gap-1">
-			Motion client
+			Client
 			<Select
 				onchange={(event: InputEvent) => {
 					if (event.target instanceof HTMLSelectElement) {
@@ -35,5 +41,78 @@
 				{/each}
 			</Select>
 		</label>
+
+		<h3 class="text-base"><strong>Pointclouds</strong></h3>
+		<div class="flex flex-col gap-2.5">
+			<label class="flex items-center justify-between gap-2">
+				Default point size
+
+				<div class="w-20">
+					<Input
+						bind:value={settings.current.pointSize}
+						on:keydown={(event) => event.stopImmediatePropagation()}
+					/>
+				</div>
+			</label>
+
+			<label class="flex items-center justify-between gap-2">
+				Default point color
+
+				<div class="w-20">
+					<Input
+						type="color"
+						bind:value={settings.current.pointColor}
+						on:keydown={(event) => event.stopImmediatePropagation()}
+					/>
+				</div>
+			</label>
+		</div>
+
+		<h3 class="text-base"><strong>Grid</strong></h3>
+		<div class="flex flex-col gap-2.5">
+			<label class="flex items-center justify-between gap-2">
+				Enabled <Switch bind:on={settings.current.grid} />
+			</label>
+
+			<label class="flex items-center justify-between gap-2">
+				Cell size (m)
+
+				<div class="w-20">
+					<Input
+						bind:value={settings.current.gridCellSize}
+						on:keydown={(event) => event.stopImmediatePropagation()}
+					/>
+				</div>
+			</label>
+
+			<label class="flex items-center justify-between gap-2">
+				Section size (m)
+
+				<div class="w-20">
+					<Input
+						bind:value={settings.current.gridSectionSize}
+						on:keydown={(event) => event.stopImmediatePropagation()}
+					/>
+				</div>
+			</label>
+
+			<label class="flex items-center justify-between gap-2">
+				Fade distance (m)
+
+				<div class="w-20">
+					<Input
+						bind:value={settings.current.gridFadeDistance}
+						on:keydown={(event) => event.stopImmediatePropagation()}
+					/>
+				</div>
+			</label>
+		</div>
+
+		<h3 class="text-base"><strong>Misc</strong></h3>
+		<div class="flex flex-col gap-2.5">
+			<label class="flex items-center justify-between gap-2">
+				Render stats <Switch bind:on={settings.current.renderStats} />
+			</label>
+		</div>
 	</div>
 </Drawer>

package/dist/components/dashboard/Button.svelte

@@ -5,7 +5,7 @@
 		icon: IconName
 		active?: boolean
 		description: string
-		hotkey: string
+		hotkey?: string
 		class?: string
 		onclick?: () => void
 	}
@@ -14,7 +14,7 @@
 		icon,
 		active = false,
 		description,
-		hotkey,
+		hotkey = '',
 		class: className = '',
 		onclick,
 	}: Props = $props()

package/dist/components/dashboard/Button.svelte.d.ts

@@ -3,7 +3,7 @@ interface Props {
     icon: IconName;
     active?: boolean;
     description: string;
-    hotkey: string;
+    hotkey?: string;
     class?: string;
     onclick?: () => void;
 }

package/dist/components/dashboard/Dashboard.svelte

@@ -1,48 +1,12 @@
 <script>
 	import { useSettings } from '../../hooks/useSettings.svelte'
+	import PortalTarget from '../portal/PortalTarget.svelte'
 	import Button from './Button.svelte'
 
 	const settings = useSettings()
 </script>
 
-<div class="absolute top-2 flex w-full justify-center">
-	<!-- transform -->
-	<!-- <fieldset>
-    <Button
-      icon="cursor-move"
-      active={$transformMode === TransformModes.TRANSLATE}
-      description="Translate"
-      hotkey="T"
-      onclick={() => transformMode.set(TransformModes.TRANSLATE)}
-    />
-    <Button
-      icon="sync"
-      active={$transformMode === TransformModes.ROTATE}
-      description="Rotate"
-      hotkey="R"
-      class="-my-px"
-      onclick={() => transformMode.set(TransformModes.ROTATE)}
-    />
-    <Button
-      icon="resize"
-      active={$transformMode === TransformModes.SCALE}
-      description="Scale"
-      hotkey="S"
-      onclick={() => transformMode.set(TransformModes.SCALE)}
-    />
-  </fieldset> -->
-
-	<!-- snapping -->
-	<!-- <fieldset>
-    <Button
-      icon={$snapMode ? 'magnet' : 'magnet-off'}
-      active={$snapMode === true}
-      description="Snapping"
-      hotkey="Spacebar"
-      onClick={() => snapMode.set(!$snapMode)}
-    />
-  </fieldset> -->
-
+<div class="absolute top-2 flex w-full justify-center gap-2">
 	<!-- camera view -->
 	<fieldset class="flex">
 		<Button
@@ -65,4 +29,53 @@
 			}}
 		/>
 	</fieldset>
+
+	<!-- transform -->
+	{#if settings.current.transforming}
+		<fieldset class="flex">
+			<Button
+				icon="cursor-move"
+				active={settings.current.transformMode === 'translate'}
+				description="Translate"
+				hotkey="1"
+				onclick={() => {
+					settings.current.transformMode = 'translate'
+				}}
+			/>
+			<Button
+				icon="sync"
+				active={settings.current.transformMode === 'rotate'}
+				description="Rotate"
+				hotkey="2"
+				class="-ml-px"
+				onclick={() => {
+					settings.current.transformMode = 'rotate'
+				}}
+			/>
+			<Button
+				icon="resize"
+				active={settings.current.transformMode === 'scale'}
+				description="Scale"
+				hotkey="3"
+				class="-ml-px"
+				onclick={() => {
+					settings.current.transformMode = 'scale'
+				}}
+			/>
+		</fieldset>
+
+		<!-- snapping -->
+		<fieldset class="flex">
+			<Button
+				icon={settings.current.snapping ? 'magnet' : 'magnet-off'}
+				active={settings.current.snapping}
+				description="Snapping"
+				onclick={() => {
+					settings.current.snapping = !settings.current.snapping
+				}}
+			/>
+		</fieldset>
+	{/if}
+
+	<PortalTarget id="dashboard" />
 </div>

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

@@ -1,7 +1,16 @@
 interface Settings {
     cameraMode: 'orthographic' | 'perspective';
+    transforming: boolean;
+    snapping: boolean;
     transformMode: 'translate' | 'rotate' | 'scale';
+    grid: boolean;
+    gridCellSize: number;
+    gridSectionSize: number;
+    gridFadeDistance: number;
+    pointSize: number;
+    pointColor: string;
     enableXR: boolean;
+    renderStats: boolean;
 }
 interface Context {
     current: Settings;

package/dist/hooks/useSettings.svelte.js

@@ -3,8 +3,17 @@ import { getContext, setContext } from 'svelte';
 const key = Symbol('dashboard-context');
 const defaults = () => ({
     cameraMode: 'perspective',
+    transforming: false,
+    snapping: false,
     transformMode: 'translate',
+    grid: true,
+    gridCellSize: 0.5,
+    gridSectionSize: 10,
+    gridFadeDistance: 25,
+    pointSize: 0.01,
+    pointColor: '#333',
     enableXR: false,
+    renderStats: false,
 });
 export const provideSettings = () => {
     let settings = $state(defaults());

package/dist/hooks/useShapes.svelte.js

@@ -162,17 +162,16 @@ export const provideShapes = () => {
             }
             return colors;
         };
-        const pointSize = 0.01;
         const metadata = nColors > 0
             ? {
                 colors: getColors(),
                 color: new Color(r, g, b).convertLinearToSRGB(),
-                pointSize,
             }
-            : {
-                color: new Color(r, g, b).convertLinearToSRGB(),
-                pointSize,
-            };
+            : r === -1
+                ? undefined
+                : {
+                    color: new Color(r, g, b).convertLinearToSRGB(),
+                };
         points.push(new WorldObject(label ?? `points ${++pointsIndex}`, undefined, undefined, {
             case: 'points',
             value: positions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -13,11 +13,11 @@
     "@eslint/compat": "1.3.1",
     "@eslint/js": "9.31.0",
     "@playwright/test": "1.54.1",
-    "@sentry/sveltekit": "9.39.0",
+    "@sentry/sveltekit": "9.40.0",
     "@skeletonlabs/skeleton": "3.1.7",
-    "@skeletonlabs/skeleton-svelte": "1.3.0",
+    "@skeletonlabs/skeleton-svelte": "1.3.1",
     "@sveltejs/adapter-static": "3.0.8",
-    "@sveltejs/kit": "2.24.0",
+    "@sveltejs/kit": "2.25.1",
     "@sveltejs/package": "2.4.0",
     "@sveltejs/vite-plugin-svelte": "6.1.0",
     "@tailwindcss/forms": "0.5.10",
@@ -37,10 +37,10 @@
     "@typescript-eslint/parser": "8.37.0",
     "@viamrobotics/prime-core": "0.1.5",
     "@viamrobotics/sdk": "0.46.0",
-    "@viamrobotics/svelte-sdk": "0.4.3",
+    "@viamrobotics/svelte-sdk": "0.4.4",
     "@vitejs/plugin-basic-ssl": "2.1.0",
-    "@zag-js/svelte": "1.18.3",
-    "@zag-js/tree-view": "1.18.3",
+    "@zag-js/svelte": "1.18.4",
+    "@zag-js/tree-view": "1.18.4",
     "camera-controls": "3.1.0",
     "eslint": "9.31.0",
     "eslint-config-prettier": "10.1.5",
@@ -55,8 +55,8 @@
     "prettier-plugin-tailwindcss": "0.6.14",
     "publint": "0.3.12",
     "runed": "0.31.0",
-    "svelte": "5.36.1",
-    "svelte-check": "4.2.2",
+    "svelte": "5.36.7",
+    "svelte-check": "4.3.0",
     "svelte-virtuallists": "1.4.2",
     "tailwindcss": "4.1.11",
     "three": "0.178.0",