@viamrobotics/motion-tools 0.9.2 → 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/Camera.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
+	import { T, useThrelte } from '@threlte/core'
 	import { useSettings } from '../hooks/useSettings.svelte'
+	import type { Camera } from 'three'
 
 	let { children, ...rest } = $props()
 
+	const { camera } = useThrelte()
 	const settings = useSettings()
 	const mode = $derived(settings.current.cameraMode)
+
+	$effect(() => {
+		;(window as unknown as { camera: Camera }).camera = $camera
+	})
 </script>
 
 {#if mode === 'perspective'}

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

@@ -1,3 +1,4 @@
+import type { Camera } from 'three';
 declare const Camera: import("svelte").Component<{
     children: any;
 } & Record<string, any>, {}, "">;

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(() => {
@@ -19,6 +24,13 @@
 			drawAPI.clearCamera()
 		}
 	})
+
+	$effect(() => {
+		if (ref) {
+			;(window as unknown as { MathUtils: typeof MathUtils }).MathUtils = MathUtils
+			;(window as unknown as { cameraControls: CameraControlsRef }).cameraControls = ref
+		}
+	})
 </script>
 
 <Portal id="dashboard">
@@ -39,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/PointerMissBox.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { BackSide, Vector3 } from 'three'
+	import { T, useThrelte } from '@threlte/core'
+	import { MeshDiscardMaterial } from '@threlte/extras'
+	import { useSelected } from '../hooks/useSelection.svelte'
+	import { useTransformControls } from '../hooks/useControls.svelte'
+
+	const { camera } = useThrelte()
+	const selected = useSelected()
+	const transformControls = useTransformControls()
+	const cameraDown = new Vector3()
+
+	const size = 1_000
+</script>
+
+<T.Mesh
+	onpointerdown={() => {
+		cameraDown.copy(camera.current.position)
+	}}
+	onpointerup={() => {
+		if (transformControls.active) {
+			return
+		}
+
+		if (cameraDown.distanceToSquared(camera.current.position) > 0.2) {
+			return
+		}
+
+		selected.set()
+	}}
+>
+	<T.BoxGeometry args={[size, size, size]} />
+	<MeshDiscardMaterial side={BackSide} />
+</T.Mesh>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PointerMissBox: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PointerMissBox = InstanceType<typeof PointerMissBox>;
+export default PointerMissBox;

package/dist/components/Scene.svelte

@@ -16,6 +16,7 @@
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import CameraControls from './CameraControls.svelte'
 	import MeasureTool from './MeasureTool.svelte'
+	import PointerMissBox from './PointerMissBox.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -66,6 +67,7 @@
 		<StaticGeometries />
 
 		<WorldObjects />
+		<PointerMissBox />
 
 		<Selected />
 

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

@@ -1,48 +1,56 @@
 <script lang="ts">
 	import { Box3, Object3D } from 'three'
-	import { T, useTask, useThrelte } from '@threlte/core'
-	import { useSelectedObject } from '../hooks/useSelection.svelte'
+	import { T, useTask } from '@threlte/core'
+	import { useSelectedObject, useSelectedObject3d } from '../hooks/useSelection.svelte'
 	import { BoxHelper } from '../three/BoxHelper'
 
-	const { scene } = useThrelte()
-
+	const box3 = new Box3()
 	const box = new BoxHelper(new Object3D(), 0x000000)
 	const selected = useSelectedObject()
+	const selectedObject3d = useSelectedObject3d()
 
-	const { start, stop } = useTask(() => box.update(), { autoStart: false })
+	// Create a clone so that our bounding box doesn't include children
+	const clone = $derived.by(() => {
+		if (selected.current?.metadata.batched) {
+			return
+		}
 
-	const box3 = new Box3()
+		return selectedObject3d.current?.clone(false)
+	})
+
+	const { start, stop } = useTask(
+		() => {
+			if (selected.current === undefined) {
+				return
+			}
+
+			if (selected.current.metadata.batched) {
+				selected.current.metadata.getBoundingBoxAt?.(box3)
+				box.setFromBox3(box3)
+				return
+			}
+
+			if (clone) {
+				selectedObject3d.current?.getWorldPosition(clone.position)
+				selectedObject3d.current?.getWorldQuaternion(clone.quaternion)
+				box.setFromObject(clone)
+			}
+		},
+		{ autoStart: false }
+	)
 
 	$effect.pre(() => {
 		if (selected.current) {
 			start()
+			box.visible = true
 		} else {
 			stop()
-		}
-	})
-
-	$effect.pre(() => {
-		if (!selected.current) {
 			box.visible = false
-			return
-		}
-
-		box.visible = true
-
-		if (selected.current.metadata.batched) {
-			selected.current.metadata.getBoundingBoxAt?.(box3)
-			box.setFromBox3(box3)
-		} else {
-			const object3d = scene.getObjectByProperty('uuid', selected.current.uuid)
-			if (object3d) {
-				// Create a clone so that our bounding box doesn't include children
-				const clone = object3d.clone(false)
-				object3d.getWorldPosition(clone.position)
-				object3d.getWorldQuaternion(clone.quaternion)
-				box.setFromObject(clone)
-			}
 		}
 	})
 </script>
 
-<T is={box} />
+<T
+	is={box}
+	raycast={() => null}
+/>

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/useObjectEvents.svelte.d.ts

@@ -6,5 +6,4 @@ export declare const useObjectEvents: (uuid: () => string) => {
     ondblclick: (event: IntersectionEvent<MouseEvent>) => void;
     onpointerdown: (event: IntersectionEvent<MouseEvent>) => void;
     onclick: (event: IntersectionEvent<MouseEvent>) => void;
-    onpointermissed: () => void;
 };

package/dist/hooks/useObjectEvents.svelte.js

@@ -44,11 +44,5 @@ export const useObjectEvents = (uuid) => {
                 selected.set(uuid());
             }
         },
-        onpointermissed: () => {
-            if (measuring) {
-                return;
-            }
-            selected.set();
-        },
     };
 };

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.2",
+  "version": "0.9.4",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -87,7 +87,6 @@
     "svelte": ">=5",
     "svelte-virtuallists": ">=1"
   },
-  "packageManager": "pnpm@8.15.6+sha256.01c01eeb990e379b31ef19c03e9d06a14afa5250b82e81303f88721c99ff2e6f",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {