@viamrobotics/motion-tools 0.9.3 → 0.9.4

package/README.md

@@ -1,6 +1,6 @@
 ## motion-tools
 
-`motion-tools` is visualizer for motion-related monitoring, testing, and debugging.
+`motion-tools` aims to provide a visualization interface for any spatial information using Viam's APIs. This typically means motion-related monitoring, testing, and debugging.
 
 ### Getting started
 
@@ -30,6 +30,7 @@ VITE_CONFIGS='
     "signalingAddress": "https://app.viam.com:443"
   }
 }
+'
 ```
 
 ### Executing drawing commands

package/dist/components/App.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
 	import { Canvas } from '@threlte/core'
+	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+
 	import Scene from './Scene.svelte'
 	import TreeContainer from './Tree/TreeContainer.svelte'
 	import Details from './Details.svelte'
@@ -10,19 +12,31 @@
 	import { createPartIDContext } from '../hooks/usePartID.svelte'
 	import Dashboard from './dashboard/Dashboard.svelte'
 	import { domPortal } from '../portal'
+	import { provideSettings } from '../hooks/useSettings.svelte'
 
 	interface Props {
 		partID?: string
+		enableKeybindings?: boolean
 		children?: Snippet
 	}
 
-	let { partID = '', children: appChildren }: Props = $props()
+	let { partID = '', enableKeybindings = true, children: appChildren }: Props = $props()
+
+	const settings = provideSettings()
+
+	$effect(() => {
+		settings.current.enableKeybindings = enableKeybindings
+	})
 
 	createPartIDContext(() => partID)
 
 	let root = $state.raw<HTMLElement>()
 </script>
 
+{#if settings.current.enableQueryDevtools}
+	<SvelteQueryDevtools initialIsOpen />
+{/if}
+
 <div
 	class="relative h-full w-full overflow-hidden"
 	bind:this={root}

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     partID?: string;
+    enableKeybindings?: boolean;
     children?: Snippet;
 }
 declare const App: import("svelte").Component<Props, {}, "">;

package/dist/components/CameraControls.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
+	import { MathUtils } from 'three'
 	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'
 	import { useDrawAPI } from '../hooks/useDrawAPI.svelte'
+	import { useSettings } from '../hooks/useSettings.svelte'
 
+	const settings = useSettings()
 	const drawAPI = useDrawAPI()
 	const transformControls = useTransformControls()
 
+	const enableKeybindings = $derived(settings.current.enableKeybindings)
+
 	let ref = $state.raw<CameraControlsRef>()
 
 	$effect(() => {
@@ -22,6 +27,7 @@
 
 	$effect(() => {
 		if (ref) {
+			;(window as unknown as { MathUtils: typeof MathUtils }).MathUtils = MathUtils
 			;(window as unknown as { cameraControls: CameraControlsRef }).cameraControls = ref
 		}
 	})
@@ -45,7 +51,9 @@
 	enabled={!transformControls.active}
 >
 	{#snippet children({ ref }: { ref: CameraControlsRef })}
-		<KeyboardControls cameraControls={ref} />
+		{#if enableKeybindings}
+			<KeyboardControls cameraControls={ref} />
+		{/if}
 		<Gizmo />
 	{/snippet}
 </CameraControls>

package/dist/components/SceneProviders.svelte

@@ -13,7 +13,6 @@
 	import { provideObjects } from '../hooks/useObjects.svelte'
 	import { provideMotionClient } from '../hooks/useMotionClient.svelte'
 	import { provideLogs } from '../hooks/useLogs.svelte'
-	import { provideSettings } from '../hooks/useSettings.svelte'
 	import { provideOrigin } from './xr/useOrigin.svelte'
 
 	interface Props {
@@ -24,7 +23,6 @@
 
 	const partID = usePartID()
 
-	provideSettings()
 	provideTransformControls()
 	provideVisibility()
 	provideMachineSettings()

package/dist/components/Tree/Settings.svelte

@@ -155,6 +155,9 @@
 
 		<h3 class="pt-2 text-sm"><strong>Misc</strong></h3>
 		<div class="flex flex-col gap-2.5">
+			<label class="flex items-center justify-between gap-2">
+				Query devtools <Switch bind:on={settings.current.enableQueryDevtools} />
+			</label>
 			<label class="flex items-center justify-between gap-2">
 				Render stats <Switch bind:on={settings.current.renderStats} />
 			</label>

package/dist/components/portal/usePortalContext.svelte.js

@@ -1,8 +1,5 @@
-import { useThrelteUserContext } from '@threlte/core';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-const createPortalContext = () => {
-    return new SvelteMap();
-};
+const context = new SvelteMap();
 export const usePortalContext = () => {
-    return useThrelteUserContext('threlte-portals', createPortalContext());
+    return context;
 };

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

@@ -11,14 +11,16 @@ interface Settings {
     pointColor: string;
     lineWidth: number;
     lineDotSize: number;
-    enableXR: boolean;
     enableMeasure: boolean;
     enableLabels: boolean;
+    enableKeybindings: boolean;
+    enableQueryDevtools: boolean;
+    enableXR: boolean;
     renderStats: boolean;
 }
 interface Context {
     current: Settings;
 }
-export declare const provideSettings: () => void;
+export declare const provideSettings: () => Context;
 export declare const useSettings: () => Context;
 export {};

package/dist/hooks/useSettings.svelte.js

@@ -16,6 +16,8 @@ const defaults = () => ({
     lineDotSize: 0.01,
     enableMeasure: false,
     enableLabels: false,
+    enableKeybindings: true,
+    enableQueryDevtools: false,
     enableXR: false,
     renderStats: false,
 });
@@ -29,11 +31,13 @@ export const provideSettings = () => {
     $effect(() => {
         set('motion-tools-settings', $state.snapshot(settings));
     });
-    setContext(key, {
+    const context = {
         get current() {
             return settings;
         },
-    });
+    };
+    setContext(key, context);
+    return context;
 };
 export const useSettings = () => {
     return getContext(key);

package/package.json

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