@viamrobotics/motion-tools 0.6.0 → 0.6.1

package/dist/components/Scene.svelte

@@ -22,6 +22,7 @@
 	import { useTransformControls } from '../hooks/useControls.svelte'
 	import KeyboardControls from './KeyboardControls.svelte'
 	import { useOrigin } from './xr/useOrigin.svelte'
+	import { useSettings } from '../hooks/useSettings.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -39,6 +40,7 @@
 		},
 	})
 
+	const settings = useSettings()
 	const focusedObject3d = useFocusedObject3d()
 	const transformControls = useTransformControls()
 	const origin = useOrigin()
@@ -81,15 +83,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,45 @@
 				{/each}
 			</Select>
 		</label>
+
+		<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>
 	</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

@@ -5,44 +5,7 @@
 	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 +28,51 @@
 			}}
 		/>
 	</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}
 </div>

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

@@ -1,6 +1,12 @@
 interface Settings {
     cameraMode: 'orthographic' | 'perspective';
+    transforming: boolean;
+    snapping: boolean;
     transformMode: 'translate' | 'rotate' | 'scale';
+    grid: boolean;
+    gridCellSize: number;
+    gridSectionSize: number;
+    gridFadeDistance: number;
     enableXR: boolean;
 }
 interface Context {

package/dist/hooks/useSettings.svelte.js

@@ -3,7 +3,13 @@ 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,
     enableXR: false,
 });
 export const provideSettings = () => {

package/package.json

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