@viamrobotics/motion-tools 0.5.6 → 0.6.1

package/dist/color.d.ts

@@ -7,18 +7,23 @@ import { Color, type ColorRepresentation } from 'three';
  */
 export declare const darkenColor: (value: ColorRepresentation, percent: number) => Color;
 export declare const colors: {
-    readonly selected: string;
     readonly default: string;
-    readonly arm: {
-        readonly selected: string;
-        readonly default: string;
-    };
-    readonly camera: {
-        readonly selected: string;
-        readonly default: string;
-    };
-    readonly gripper: {
-        readonly selected: string;
-        readonly default: string;
-    };
+};
+export declare const resourceColors: {
+    readonly arm: string;
+    readonly camera: string;
+    readonly base: string;
+    readonly board: string;
+    readonly button: string;
+    readonly encoder: string;
+    readonly gantry: string;
+    readonly gripper: string;
+    readonly motor: string;
+    readonly movement_sensor: string;
+    readonly pose_tracker: string;
+    readonly power_sensor: string;
+    readonly sensor: string;
+    readonly servo: string;
+    readonly switch: string;
+    readonly webcam: string;
 };

package/dist/color.js

@@ -51,19 +51,25 @@ export const darkenColor = (value, percent) => {
     hsl.l = Math.max(0, hsl.l * (1 - percent / 100));
     return new Color().setHSL(hsl.h, hsl.s, hsl.l);
 };
+const darkness = '600';
 export const colors = {
-    selected: oklchToHex(twColors.red['900']),
-    default: oklchToHex(twColors.red['500']),
-    arm: {
-        selected: oklchToHex(twColors.amber['900']),
-        default: oklchToHex(twColors.amber['500']),
-    },
-    camera: {
-        selected: oklchToHex(twColors.blue['900']),
-        default: oklchToHex(twColors.blue['500']),
-    },
-    gripper: {
-        selected: oklchToHex(twColors.cyan['900']),
-        default: oklchToHex(twColors.cyan['500']),
-    },
+    default: oklchToHex(twColors.red[darkness]),
+};
+export const resourceColors = {
+    arm: oklchToHex(twColors.amber[darkness]),
+    camera: oklchToHex(twColors.blue[darkness]),
+    base: oklchToHex(twColors.slate[darkness]),
+    board: oklchToHex(twColors.emerald[darkness]),
+    button: oklchToHex(twColors.gray[darkness]),
+    encoder: oklchToHex(twColors.lime[darkness]),
+    gantry: oklchToHex(twColors.purple[darkness]),
+    gripper: oklchToHex(twColors.cyan[darkness]),
+    motor: oklchToHex(twColors.orange[darkness]),
+    movement_sensor: oklchToHex(twColors.indigo[darkness]),
+    pose_tracker: oklchToHex(twColors.rose[darkness]),
+    power_sensor: oklchToHex(twColors.violet[darkness]),
+    sensor: oklchToHex(twColors.teal[darkness]),
+    servo: oklchToHex(twColors.yellow[darkness]),
+    switch: oklchToHex(twColors.stone[darkness]),
+    webcam: oklchToHex(twColors.sky[darkness]),
 };

package/dist/components/Frame.svelte

@@ -1,6 +1,11 @@
+<script module>
+	import { Color, type Object3D } from 'three'
+
+	const colorUtil = new Color()
+</script>
+
 <script lang="ts">
 	import type { Snippet } from 'svelte'
-	import type { Object3D } from 'three'
 	import type { WorldObject } from '../WorldObject'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
 	import Geometry from './Geometry.svelte'
@@ -20,13 +25,15 @@
 
 	const selected = useSelected()
 	const events = useObjectEvents(() => uuid)
+
+	const color = $derived(rest.metadata.color ?? colors.default)
 </script>
 
 <Geometry
 	{uuid}
 	color={selected.current === uuid
-		? `#${darkenColor(rest.metadata.color ?? colors.default, 75).getHexString()}`
-		: undefined}
+		? `#${darkenColor(color, 75).getHexString()}`
+		: `#${colorUtil.set(color).getHexString()}`}
 	{...events}
 	{...rest}
 />

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

@@ -1,5 +1,5 @@
+import { type Object3D } from 'three';
 import type { Snippet } from 'svelte';
-import type { Object3D } from 'three';
 import type { WorldObject } from '../WorldObject';
 interface Props {
     uuid: string;

package/dist/components/Geometry.svelte

@@ -48,7 +48,7 @@
 		poseToObject3d(pose, mesh)
 	})
 
-	let geo = $state<BufferGeometry>()
+	let geo = $state.raw<BufferGeometry>()
 
 	const oncreate = (ref: BufferGeometry) => {
 		geo = ref

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/useFrames.svelte.js

@@ -1,11 +1,13 @@
 import { getContext, setContext, untrack } from 'svelte';
-import { useRobotClient, createRobotQuery, useMachineStatus } from '@viamrobotics/svelte-sdk';
+import { useRobotClient, createRobotQuery, useMachineStatus, useResourceNames, } from '@viamrobotics/svelte-sdk';
 import { WorldObject } from '../WorldObject';
 import { useRefreshRates } from './useRefreshRates.svelte';
 import { observe } from '@threlte/core';
 import { useLogs } from './useLogs.svelte';
+import { resourceColors } from '../color';
 const key = Symbol('frames-context');
 export const provideFrames = (partID) => {
+    const resourceNames = useResourceNames(partID);
     const client = useRobotClient(partID);
     const machineStatus = useMachineStatus(partID);
     const logs = useLogs();
@@ -28,9 +30,15 @@ export const provideFrames = (partID) => {
             return objects;
         }
         for (const { frame } of query.current.data ?? []) {
-            if (frame) {
-                objects.push(new WorldObject(frame.referenceFrame ? frame.referenceFrame : 'Unnamed frame', frame.poseInObserverFrame?.pose, frame.poseInObserverFrame?.referenceFrame, frame.physicalObject?.geometryType));
+            if (frame === undefined) {
+                continue;
             }
+            const resourceName = resourceNames.current.find((item) => item.name === frame.referenceFrame);
+            objects.push(new WorldObject(frame.referenceFrame ? frame.referenceFrame : 'Unnamed frame', frame.poseInObserverFrame?.pose, frame.poseInObserverFrame?.referenceFrame, frame.physicalObject?.geometryType, resourceName
+                ? {
+                    color: resourceColors[resourceName.subtype],
+                }
+                : undefined));
         }
         return objects;
     });

package/dist/hooks/useGeometries.svelte.js

@@ -7,13 +7,15 @@ import { useRefreshRates } from './useRefreshRates.svelte';
 import { WorldObject } from '../WorldObject';
 import { usePersistentUUIDs } from './usePersistentUUIDs.svelte';
 import { useLogs } from './useLogs.svelte';
+import { resourceColors } from '../color';
 const key = Symbol('geometries-context');
 export const provideGeometries = (partID) => {
-    const logs = useLogs();
-    const refreshRates = useRefreshRates();
+    const resourceNames = useResourceNames(partID);
     const arms = useResourceNames(partID, 'arm');
     const cameras = useResourceNames(partID, 'camera');
     const grippers = useResourceNames(partID, 'gripper');
+    const logs = useLogs();
+    const refreshRates = useRefreshRates();
     const armClients = $derived(arms.current.map((arm) => createResourceClient(ArmClient, partID, () => arm.name)));
     const gripperClients = $derived(grippers.current.map((gripper) => createResourceClient(GripperClient, partID, () => gripper.name)));
     const cameraClients = $derived(cameras.current.map((camera) => createResourceClient(CameraClient, partID, () => camera.name)));
@@ -45,7 +47,10 @@ export const provideGeometries = (partID) => {
             if (!query.data)
                 continue;
             for (const { center, label, geometryType } of query.data.geometries) {
-                results.push(new WorldObject(label ? label : 'Unnamed geometry', center, query.data.name, geometryType));
+                const resourceName = resourceNames.current.find((item) => item.name === query.data.name);
+                results.push(new WorldObject(label ? label : 'Unnamed geometry', center, query.data.name, geometryType, resourceName
+                    ? { color: resourceColors[resourceName.subtype] }
+                    : undefined));
             }
         }
         updateUUIDs(results);

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.5.6",
+  "version": "0.6.1",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -11,38 +11,38 @@
     "@changesets/cli": "2.29.5",
     "@dimforge/rapier3d-compat": "0.17.3",
     "@eslint/compat": "1.3.1",
-    "@eslint/js": "9.30.1",
-    "@playwright/test": "1.53.2",
-    "@sentry/sveltekit": "9.35.0",
-    "@skeletonlabs/skeleton": "3.1.4",
-    "@skeletonlabs/skeleton-svelte": "1.2.4",
+    "@eslint/js": "9.31.0",
+    "@playwright/test": "1.54.1",
+    "@sentry/sveltekit": "9.39.0",
+    "@skeletonlabs/skeleton": "3.1.7",
+    "@skeletonlabs/skeleton-svelte": "1.3.0",
     "@sveltejs/adapter-static": "3.0.8",
-    "@sveltejs/kit": "2.22.2",
-    "@sveltejs/package": "2.3.12",
-    "@sveltejs/vite-plugin-svelte": "5.1.0",
+    "@sveltejs/kit": "2.24.0",
+    "@sveltejs/package": "2.4.0",
+    "@sveltejs/vite-plugin-svelte": "6.1.0",
     "@tailwindcss/forms": "0.5.10",
     "@tailwindcss/vite": "4.1.11",
-    "@tanstack/svelte-query": "5.81.5",
-    "@tanstack/svelte-query-devtools": "5.81.5",
+    "@tanstack/svelte-query": "5.83.0",
+    "@tanstack/svelte-query-devtools": "5.83.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/svelte": "5.2.8",
-    "@threlte/core": "8.1.2",
+    "@threlte/core": "8.1.3",
     "@threlte/extras": "9.4.2",
     "@threlte/rapier": "3.1.4",
     "@threlte/xr": "1.0.8",
     "@types/bun": "1.2.18",
     "@types/lodash-es": "4.17.12",
-    "@types/three": "0.178.0",
-    "@typescript-eslint/eslint-plugin": "8.36.0",
-    "@typescript-eslint/parser": "8.36.0",
+    "@types/three": "0.178.1",
+    "@typescript-eslint/eslint-plugin": "8.37.0",
+    "@typescript-eslint/parser": "8.37.0",
     "@viamrobotics/prime-core": "0.1.5",
     "@viamrobotics/sdk": "0.46.0",
-    "@viamrobotics/svelte-sdk": "0.4.1",
+    "@viamrobotics/svelte-sdk": "0.4.3",
     "@vitejs/plugin-basic-ssl": "2.1.0",
-    "@zag-js/svelte": "1.18.2",
-    "@zag-js/tree-view": "1.18.2",
-    "camera-controls": "2.10.1",
-    "eslint": "9.30.1",
+    "@zag-js/svelte": "1.18.3",
+    "@zag-js/tree-view": "1.18.3",
+    "camera-controls": "3.1.0",
+    "eslint": "9.31.0",
     "eslint-config-prettier": "10.1.5",
     "eslint-plugin-svelte": "3.10.1",
     "globals": "16.3.0",
@@ -52,10 +52,10 @@
     "lucide-svelte": "0.525.0",
     "prettier": "3.6.2",
     "prettier-plugin-svelte": "3.4.0",
-    "prettier-plugin-tailwindcss": "0.6.13",
+    "prettier-plugin-tailwindcss": "0.6.14",
     "publint": "0.3.12",
-    "runed": "0.30.0",
-    "svelte": "5.35.4",
+    "runed": "0.31.0",
+    "svelte": "5.36.1",
     "svelte-check": "4.2.2",
     "svelte-virtuallists": "1.4.2",
     "tailwindcss": "4.1.11",
@@ -63,9 +63,9 @@
     "threlte-uikit": "1.2.0",
     "tsx": "4.20.3",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.36.0",
+    "typescript-eslint": "8.37.0",
     "vite": "6.3.5",
-    "vite-plugin-devtools-json": "0.2.1",
+    "vite-plugin-devtools-json": "0.3.0",
     "vite-plugin-mkcert": "1.17.8",
     "vitest": "3.2.4"
   },