@viamrobotics/motion-tools 0.5.5 → 0.5.6

package/dist/components/Details.svelte

@@ -1,5 +1,16 @@
-<script lang="ts">
+<script
+	module
+	lang="ts"
+>
+	import { OrientationVector } from '../three/OrientationVector'
 	import { Quaternion, Vector3 } from 'three'
+
+	const vec3 = new Vector3()
+	const quaternion = new Quaternion()
+	const ov = new OrientationVector()
+</script>
+
+<script lang="ts">
 	import { Check, Copy } from 'lucide-svelte'
 	import { Button, Icon } from '@viamrobotics/prime-core'
 	import {
@@ -10,7 +21,7 @@
 		useSelectedObject3d,
 	} from '../hooks/useSelection.svelte'
 	import { useDraggable } from '../hooks/useDraggable.svelte'
-	import { OrientationVector } from '../three/OrientationVector'
+	import { useTask } from '@threlte/core'
 
 	const focused = useFocused()
 	const focusedObject = useFocusedObject()
@@ -21,15 +32,42 @@
 
 	const object = $derived(focusedObject.current ?? selectedObject.current)
 	const object3d = $derived(focusedObject3d.current ?? selectedObject3d.current)
-	const worldPosition = $derived(object3d?.getWorldPosition(new Vector3()))
-	const worldQuaternion = $derived(object3d?.getWorldQuaternion(new Quaternion()))
-	const worldOrientation = $derived(
-		worldQuaternion ? new OrientationVector().setFromQuaternion(worldQuaternion) : undefined
-	)
+	const worldPosition = $state({ x: 0, y: 0, z: 0 })
+	const worldOrientation = $state({ x: 0, y: 0, z: 1, th: 0 })
 
 	let copied = $state(false)
 
 	const draggable = useDraggable('details')
+
+	const { start, stop } = useTask(
+		() => {
+			object3d?.getWorldPosition(vec3)
+			if (!vec3.equals(worldPosition)) {
+				worldPosition.x = vec3.x
+				worldPosition.y = vec3.y
+				worldPosition.z = vec3.z
+			}
+
+			object3d?.getWorldQuaternion(quaternion)
+			ov.setFromQuaternion(quaternion)
+
+			if (!ov.equals(worldOrientation)) {
+				worldOrientation.x = ov.x
+				worldOrientation.y = ov.y
+				worldOrientation.z = ov.z
+				worldOrientation.th = ov.th
+			}
+		},
+		{ autoStart: false }
+	)
+
+	$effect.pre(() => {
+		if (object3d) {
+			start()
+		} else {
+			stop()
+		}
+	})
 </script>
 
 {#if object}

package/dist/components/Focus.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
 	import { TrackballControls, Gizmo } from '@threlte/extras'
-	import { useFocusedObject3d } from '../hooks/useSelection.svelte'
-	import { Box3, Vector3 } from 'three'
+	import { Box3, type Object3D, Vector3 } from 'three'
 	import Camera from './Camera.svelte'
 
-	const focusedObject = useFocusedObject3d()
-	const object3d = $derived(focusedObject.current)
+	interface Props {
+		object3d: Object3D
+	}
+
+	let { object3d }: Props = $props()
 
 	const box = new Box3()
 	const vec = new Vector3()
@@ -14,22 +16,18 @@
 	let center = $state.raw<[number, number, number]>([0, 0, 0])
 	let size = $state.raw<[number, number, number]>([0, 0, 0])
 
-	$effect(() => {
-		if (object3d) {
-			box.setFromObject(object3d)
-			size = box.getSize(vec).toArray()
-			center = box.getCenter(vec).toArray()
-		}
+	$effect.pre(() => {
+		box.setFromObject(object3d)
+		size = box.getSize(vec).toArray()
+		center = box.getCenter(vec).toArray()
 	})
 </script>
 
-<Camera position={[size[0], 0, 0]}>
+<Camera position={[0, 0, size[0] + 1]}>
 	<TrackballControls target={center}>
 		<Gizmo />
 	</TrackballControls>
 </Camera>
 
-{#if object3d}
-	<T is={object3d} />
-	<T.BoxHelper args={[object3d, 'red']} />
-{/if}
+<T is={object3d} />
+<T.BoxHelper args={[object3d, 'red']} />

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

@@ -1,3 +1,7 @@
-declare const Focus: import("svelte").Component<Record<string, never>, {}, "">;
+import { type Object3D } from 'three';
+interface Props {
+    object3d: Object3D;
+}
+declare const Focus: import("svelte").Component<Props, {}, "">;
 type Focus = ReturnType<typeof Focus>;
 export default Focus;

package/dist/components/Scene.svelte

@@ -16,7 +16,7 @@
 	import StaticGeometries from './StaticGeometries.svelte'
 	import Shapes from './Shapes.svelte'
 	import Camera from './Camera.svelte'
-	import { useFocused } from '../hooks/useSelection.svelte'
+	import { useFocusedObject3d } from '../hooks/useSelection.svelte'
 	import type { Snippet } from 'svelte'
 	import { useXR } from '@threlte/xr'
 	import { useTransformControls } from '../hooks/useControls.svelte'
@@ -39,10 +39,12 @@
 		},
 	})
 
-	const focused = useFocused()
+	const focusedObject3d = useFocusedObject3d()
 	const transformControls = useTransformControls()
 	const origin = useOrigin()
 
+	const object3d = $derived(focusedObject3d.current)
+
 	const { isPresenting } = useXR()
 </script>
 
@@ -56,7 +58,9 @@
 	rotation.x={$isPresenting ? -Math.PI / 2 : 0}
 	rotation.z={origin.rotation}
 >
-	{#if focused.current === undefined}
+	{#if object3d}
+		<Focus {object3d} />
+	{:else}
 		{#if !$isPresenting}
 			<Camera position={[3, 3, 3]}>
 				<CameraControls enabled={!transformControls.active}>
@@ -88,8 +92,6 @@
 				fadeDistance={25}
 			/>
 		{/if}
-	{:else}
-		<Focus />
 	{/if}
 
 	{@render children?.()}

package/dist/components/StaticGeometries.svelte

@@ -39,7 +39,9 @@
 					<TransformControls
 						object={ref}
 						{mode}
-						onmouseDown={() => transformControls.setActive(true)}
+						onmouseDown={() => {
+							transformControls.setActive(true)
+						}}
 						onmouseUp={() => {
 							transformControls.setActive(false)
 

package/dist/hooks/useObjectEvents.svelte.js

@@ -33,6 +33,8 @@ export const useObjectEvents = (uuid) => {
                 selected.set(uuid());
             }
         },
-        onpointermissed: () => selected.set(),
+        onpointermissed: () => {
+            selected.set();
+        },
     };
 };

package/dist/hooks/useSelection.svelte.js

@@ -7,6 +7,7 @@ const selectionKey = Symbol('selection-context');
 const focusKey = Symbol('focus-context');
 const selectedObjectKey = Symbol('selected-frame-context');
 const focusedObjectKey = Symbol('focused-frame-context');
+const focusedObject3dKey = Symbol('focused-object-3d-context');
 export const provideSelection = () => {
     let selected = $state();
     let focused = $state();
@@ -46,13 +47,21 @@ export const provideSelection = () => {
         },
     };
     setContext(selectedObjectKey, selectedObjectContext);
-    const focusedFrame = $derived(objects.current.find((object) => object.uuid === focused));
-    const focusedFrameContext = {
+    const focusedObject = $derived(objects.current.find((object) => object.uuid === focused));
+    const focusedObjectContext = {
         get current() {
-            return focusedFrame;
+            return focusedObject;
         },
     };
-    setContext(focusedObjectKey, focusedFrameContext);
+    setContext(focusedObjectKey, focusedObjectContext);
+    const { scene } = useThrelte();
+    const uuid = $derived(focusedObject?.uuid);
+    const focusedObject3d = $derived(uuid ? scene.getObjectByProperty('uuid', uuid)?.clone() : undefined);
+    setContext(focusedObject3dKey, {
+        get current() {
+            return focusedObject3d;
+        },
+    });
     return {
         selection: selectionContext,
         focus: focusContext,
@@ -72,16 +81,7 @@ export const useSelectedObject = () => {
     return getContext(selectedObjectKey);
 };
 export const useFocusedObject3d = () => {
-    const focusedObject = useFocusedObject();
-    const { scene } = useThrelte();
-    const object = $derived(focusedObject.current
-        ? scene.getObjectByProperty('uuid', focusedObject.current.uuid)?.clone()
-        : undefined);
-    return {
-        get current() {
-            return object;
-        },
-    };
+    return getContext(focusedObject3dKey);
 };
 const matrix = new Matrix4();
 export const useSelectedObject3d = () => {

package/dist/three/OrientationVector.d.ts

@@ -1,5 +1,11 @@
 import { Euler, Quaternion } from 'three';
 export declare const EPSILON = 0.0001;
+type OrientationVectorLike = OrientationVector | {
+    x: number;
+    y: number;
+    z: number;
+    th: number;
+};
 /**
  * Golang: https://github.com/viamrobotics/rdk/blob/main/spatialmath/orientationVector.go
  * Rust:   https://github.com/viamrobotics/rust-utils/blob/main/src/spatialmath/utils.rs
@@ -62,6 +68,7 @@ export declare class OrientationVector {
      * Copies value of ov to this orientation vector.
      */
     copy(ov: OrientationVector): this;
+    equals(orientationVector: OrientationVectorLike): boolean;
     fromArray(array: number[], offset?: number): this;
     toArray(array?: number[], offset?: number): number[];
     toJson(): number[];
@@ -69,3 +76,4 @@ export declare class OrientationVector {
     toQuaternion(dest: Quaternion): Quaternion;
     toEuler(dest: Euler): Euler;
 }
+export {};

package/dist/three/OrientationVector.js

@@ -151,6 +151,12 @@ export class OrientationVector {
         this.#onChangeCallback?.();
         return this;
     }
+    equals(orientationVector) {
+        return (this.x === orientationVector.x &&
+            this.y === orientationVector.y &&
+            this.z === orientationVector.z &&
+            this.th === orientationVector.th);
+    }
     fromArray(array, offset = 0) {
         this.#vec.set(array[offset] ?? 0, array[offset + 1] ?? 0, array[offset + 2] ?? 0);
         this.th = array[offset + 3] ?? 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -13,9 +13,9 @@
     "@eslint/compat": "1.3.1",
     "@eslint/js": "9.30.1",
     "@playwright/test": "1.53.2",
-    "@sentry/sveltekit": "9.34.0",
-    "@skeletonlabs/skeleton": "3.1.3",
-    "@skeletonlabs/skeleton-svelte": "1.2.3",
+    "@sentry/sveltekit": "9.35.0",
+    "@skeletonlabs/skeleton": "3.1.4",
+    "@skeletonlabs/skeleton-svelte": "1.2.4",
     "@sveltejs/adapter-static": "3.0.8",
     "@sveltejs/kit": "2.22.2",
     "@sveltejs/package": "2.3.12",
@@ -26,21 +26,21 @@
     "@tanstack/svelte-query-devtools": "5.81.5",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/svelte": "5.2.8",
-    "@threlte/core": "8.0.5",
-    "@threlte/extras": "9.4.0",
+    "@threlte/core": "8.1.2",
+    "@threlte/extras": "9.4.2",
     "@threlte/rapier": "3.1.4",
     "@threlte/xr": "1.0.8",
-    "@types/bun": "1.2.17",
+    "@types/bun": "1.2.18",
     "@types/lodash-es": "4.17.12",
     "@types/three": "0.178.0",
-    "@typescript-eslint/eslint-plugin": "8.35.1",
-    "@typescript-eslint/parser": "8.35.1",
+    "@typescript-eslint/eslint-plugin": "8.36.0",
+    "@typescript-eslint/parser": "8.36.0",
     "@viamrobotics/prime-core": "0.1.5",
-    "@viamrobotics/sdk": "0.45.0",
+    "@viamrobotics/sdk": "0.46.0",
     "@viamrobotics/svelte-sdk": "0.4.1",
     "@vitejs/plugin-basic-ssl": "2.1.0",
-    "@zag-js/svelte": "1.18.1",
-    "@zag-js/tree-view": "1.18.1",
+    "@zag-js/svelte": "1.18.2",
+    "@zag-js/tree-view": "1.18.2",
     "camera-controls": "2.10.1",
     "eslint": "9.30.1",
     "eslint-config-prettier": "10.1.5",
@@ -54,8 +54,8 @@
     "prettier-plugin-svelte": "3.4.0",
     "prettier-plugin-tailwindcss": "0.6.13",
     "publint": "0.3.12",
-    "runed": "0.29.1",
-    "svelte": "5.34.8",
+    "runed": "0.30.0",
+    "svelte": "5.35.4",
     "svelte-check": "4.2.2",
     "svelte-virtuallists": "1.4.2",
     "tailwindcss": "4.1.11",
@@ -63,7 +63,7 @@
     "threlte-uikit": "1.2.0",
     "tsx": "4.20.3",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.35.1",
+    "typescript-eslint": "8.36.0",
     "vite": "6.3.5",
     "vite-plugin-devtools-json": "0.2.1",
     "vite-plugin-mkcert": "1.17.8",