@viamrobotics/motion-tools 0.9.1 → 0.9.3

package/README.md

@@ -1,15 +1,21 @@
-## Getting started
+## motion-tools
+
+`motion-tools` is visualizer for motion-related monitoring, testing, and debugging.
+
+### Getting started
 
 1. [Install pnpm](https://pnpm.io/installation)
 2. [Install bun](https://bun.sh/docs/installation)
 3. Install dependencies: `pnpm i`
 4. Run local app server: `pnpm dev`
 
+### Running the visualizer
+
 To visit the visualizer, go to `http://localhost:5173/`
 
-Open the machine config page (bottom right) and enter in connection details to visualize a specific machine.
+Open the machine config page (bottom right) and enter in connection details to visualize a specific machine. You can also add machine configs from an env file (see below).
 
-## Env files
+### Env files for machine configs
 
 To add a list of connection configs in an `.env.local` file, use the following format:
 
@@ -25,3 +31,9 @@ VITE_CONFIGS='
   }
 }
 ```
+
+### Executing drawing commands
+
+The visualizer includes a golang package that allows executing commands to the visualizer.
+
+The list of available commands [can be found here](https://pkg.go.dev/github.com/viam-labs/motion-tools@v0.9.0/client/client).

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

@@ -19,6 +19,12 @@
 			drawAPI.clearCamera()
 		}
 	})
+
+	$effect(() => {
+		if (ref) {
+			;(window as unknown as { cameraControls: CameraControlsRef }).cameraControls = ref
+		}
+	})
 </script>
 
 <Portal id="dashboard">

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "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": {