@viamrobotics/motion-tools 0.15.4 → 0.16.1

package/dist/components/App.svelte

@@ -9,7 +9,6 @@
 	import Details from './Details.svelte'
 	import SceneProviders from './SceneProviders.svelte'
 	import XR from './xr/XR.svelte'
-	import { World } from '@threlte/rapier'
 	import { createPartIDContext } from '../hooks/usePartID.svelte'
 	import Dashboard from './dashboard/Dashboard.svelte'
 	import { domPortal } from '../portal'
@@ -21,6 +20,7 @@
 	import LiveUpdatesBanner from './LiveUpdatesBanner.svelte'
 	import ArmPositions from './widgets/ArmPositions.svelte'
 	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
+	import type { CameraPose } from '../hooks/useControls.svelte'
 
 	interface LocalConfigProps {
 		getLocalPartConfig: () => Struct
@@ -34,6 +34,11 @@
 		enableKeybindings?: boolean
 		children?: Snippet
 		localConfigProps?: LocalConfigProps
+
+		/**
+		 * Allows setting the initial camera pose
+		 */
+		cameraPose?: CameraPose
 	}
 
 	let {
@@ -41,6 +46,7 @@
 		enableKeybindings = true,
 		children: appChildren,
 		localConfigProps,
+		cameraPose,
 	}: Props = $props()
 
 	const appClient = useViamClient()
@@ -87,34 +93,32 @@
 	class="relative h-full w-full overflow-hidden"
 	bind:this={root}
 >
-	<Canvas renderMode="always">
-		<World>
-			<SceneProviders>
-				{#snippet children({ focus })}
-					<Scene>
-						{@render appChildren?.()}
-					</Scene>
-
-					<XR {@attach domPortal(root)} />
-
-					<Dashboard {@attach domPortal(root)} />
-					<Details {@attach domPortal(root)} />
-					{#if environment.current.isStandalone}
-						<LiveUpdatesBanner {@attach domPortal(root)} />
-					{/if}
-
-					{#if !focus}
-						<TreeContainer {@attach domPortal(root)} />
-					{/if}
-
-					{#if !focus && settings.current.enableArmPositionsWidget}
-						<ArmPositions {@attach domPortal(root)} />
-					{/if}
-
-					<FileDrop {@attach domPortal(root)} />
-				{/snippet}
-			</SceneProviders>
-		</World>
+	<Canvas renderMode="on-demand">
+		<SceneProviders {cameraPose}>
+			{#snippet children({ focus })}
+				<Scene>
+					{@render appChildren?.()}
+				</Scene>
+
+				<XR {@attach domPortal(root)} />
+
+				<Dashboard {@attach domPortal(root)} />
+				<Details {@attach domPortal(root)} />
+				{#if environment.current.isStandalone}
+					<LiveUpdatesBanner {@attach domPortal(root)} />
+				{/if}
+
+				{#if !focus}
+					<TreeContainer {@attach domPortal(root)} />
+				{/if}
+
+				{#if !focus && settings.current.enableArmPositionsWidget}
+					<ArmPositions {@attach domPortal(root)} />
+				{/if}
+
+				<FileDrop {@attach domPortal(root)} />
+			{/snippet}
+		</SceneProviders>
 	</Canvas>
 
 	<ToastContainer />

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

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { Struct } from '@viamrobotics/sdk';
+import type { CameraPose } from '../hooks/useControls.svelte';
 interface LocalConfigProps {
     getLocalPartConfig: () => Struct;
     setLocalPartConfig: (config: Struct) => void;
@@ -11,6 +12,10 @@ interface Props {
     enableKeybindings?: boolean;
     children?: Snippet;
     localConfigProps?: LocalConfigProps;
+    /**
+     * Allows setting the initial camera pose
+     */
+    cameraPose?: CameraPose;
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/CameraControls.svelte

@@ -1,36 +1,17 @@
 <script lang="ts">
 	import { MathUtils } from 'three'
 	import { CameraControls, type CameraControlsRef, Gizmo } from '@threlte/extras'
-	import { useTransformControls } from '../hooks/useControls.svelte'
+	import { useCameraControls, 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 cameraControls = useCameraControls()
 	const settings = useSettings()
-	const drawAPI = useDrawAPI()
 	const transformControls = useTransformControls()
 
 	const enableKeybindings = $derived(settings.current.enableKeybindings)
-
-	let ref = $state.raw<CameraControlsRef>()
-
-	$effect(() => {
-		if (drawAPI.camera) {
-			const { position, lookAt, animate } = drawAPI.camera
-			ref?.setPosition(position.x, position.y, position.z, animate)
-			ref?.setLookAt(position.x, position.y, position.z, lookAt.x, lookAt.y, lookAt.z, animate)
-			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">
@@ -40,15 +21,19 @@
 			icon="camera-outline"
 			description="Reset camera"
 			onclick={() => {
-				ref?.reset(true)
+				cameraControls.current?.reset(true)
 			}}
 		/>
 	</fieldset>
 </Portal>
 
 <CameraControls
-	bind:ref
 	enabled={!transformControls.active}
+	oncreate={(ref) => {
+		cameraControls.set(ref)
+		;(window as unknown as { MathUtils: typeof MathUtils }).MathUtils = MathUtils
+		;(window as unknown as { cameraControls: CameraControlsRef }).cameraControls = ref
+	}}
 >
 	{#snippet children({ ref }: { ref: CameraControlsRef })}
 		{#if enableKeybindings}

package/dist/components/Details.svelte

@@ -3,7 +3,7 @@
 	lang="ts"
 >
 	import { OrientationVector } from '../three/OrientationVector'
-	import { Quaternion, Vector3 } from 'three'
+	import { Quaternion, Vector3, MathUtils } from 'three'
 
 	const vec3 = new Vector3()
 	const quaternion = new Quaternion()
@@ -29,6 +29,7 @@
 	import { useWeblabs } from '../hooks/useWeblabs.svelte'
 	import { WEBLABS_EXPERIMENTS } from '../hooks/useWeblabs.svelte'
 	import { useEnvironment } from '../hooks/useEnvironment.svelte'
+
 	const { ...rest } = $props()
 
 	const focused = useFocused()
@@ -93,7 +94,10 @@
 				worldOrientation.th = ov.th
 			}
 		},
-		{ autoStart: false }
+		{
+			autoStart: false,
+			autoInvalidate: false,
+		}
 	)
 
 	$effect.pre(() => {
@@ -262,19 +266,20 @@
 			{#if worldPosition}
 				<div>
 					<strong class="font-semibold">world position</strong>
+					<span class="text-subtle-2">(m)</span>
 
 					<div class="flex gap-3">
 						<div>
 							<span class="text-subtle-2">x</span>
-							{(worldPosition.x * 1000).toFixed(2)}
+							{worldPosition.x.toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">y</span>
-							{(worldPosition.y * 1000).toFixed(2)}
+							{worldPosition.y.toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">z</span>
-							{(worldPosition.z * 1000).toFixed(2)}
+							{worldPosition.z.toFixed(2)}
 						</div>
 					</div>
 				</div>
@@ -283,6 +288,7 @@
 			{#if worldOrientation}
 				<div>
 					<strong class="font-semibold">world orientation</strong>
+					<span class="text-subtle-2">(deg)</span>
 					<div class="flex gap-3">
 						<div>
 							<span class="text-subtle-2">x</span>
@@ -298,7 +304,7 @@
 						</div>
 						<div>
 							<span class="text-subtle-2">th</span>
-							{worldOrientation.th.toFixed(2)}
+							{MathUtils.radToDeg(worldOrientation.th).toFixed(2)}
 						</div>
 					</div>
 				</div>
@@ -323,6 +329,7 @@
 					{@const PoseAttribute = showEditFrameOptions ? MutableField : ImmutableField}
 					<div>
 						<strong class="font-semibold">local position</strong>
+						<span class="text-subtle-2">(m)</span>
 
 						<div class="flex gap-3">
 							{@render PoseAttribute({
@@ -351,6 +358,7 @@
 
 					<div>
 						<strong class="font-semibold">local orientation</strong>
+						<span class="text-subtle-2">(deg)</span>
 						<div class="flex {showEditFrameOptions ? 'gap-2' : 'gap-3'}">
 							{@render PoseAttribute({
 								label: 'x',

package/dist/components/KeyboardControls.svelte

@@ -77,7 +77,10 @@
 				cameraControls.rotate(0, 0.05 * MathUtils.DEG2RAD * dt, true)
 			}
 		},
-		{ autoStart: false, autoInvalidate: false }
+		{
+			autoStart: false,
+			autoInvalidate: false,
+		}
 	)
 
 	$effect.pre(() => {

package/dist/components/Pointcloud.svelte

@@ -66,7 +66,10 @@
 			// resized to half zoom to take up the same screen space.
 			material.size = pointSize * ((camera.current as OrthographicCamera).zoom / 2)
 		},
-		{ autoStart: false }
+		{
+			autoStart: false,
+			autoInvalidate: false,
+		}
 	)
 
 	$effect(() => {

package/dist/components/SceneProviders.svelte

@@ -9,7 +9,11 @@
 	import { provideVisibility } from '../hooks/useVisibility.svelte'
 	import { provideDrawAPI } from '../hooks/useDrawAPI.svelte'
 	import { provideMachineSettings } from '../hooks/useMachineSettings.svelte'
-	import { provideTransformControls } from '../hooks/useControls.svelte'
+	import {
+		provideCameraControls,
+		provideTransformControls,
+		type CameraPose,
+	} from '../hooks/useControls.svelte'
 	import { provideObjects } from '../hooks/useObjects.svelte'
 	import { provideMotionClient } from '../hooks/useMotionClient.svelte'
 	import { provideLogs } from '../hooks/useLogs.svelte'
@@ -19,14 +23,17 @@
 	import { provideArrows } from '../hooks/useArrows.svelte'
 	import { provideFramelessComponents } from '../hooks/useFramelessComponents.svelte'
 	import { provideResourceByName } from '../hooks/useResourceByName.svelte'
+
 	interface Props {
+		cameraPose?: CameraPose
 		children: Snippet<[{ focus: boolean }]>
 	}
 
-	let { children }: Props = $props()
+	let { cameraPose, children }: Props = $props()
 
 	const partID = usePartID()
 
+	provideCameraControls(() => cameraPose)
 	provideTransformControls()
 	provideVisibility()
 	provideMachineSettings()

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

@@ -1,5 +1,7 @@
 import type { Snippet } from 'svelte';
+import { type CameraPose } from '../hooks/useControls.svelte';
 interface Props {
+    cameraPose?: CameraPose;
     children: Snippet<[{
         focus: boolean;
     }]>;

package/dist/components/Selected.svelte

@@ -36,7 +36,10 @@
 				obbHelper.setFromObject(clone)
 			}
 		},
-		{ autoStart: false }
+		{
+			autoStart: false,
+			autoInvalidate: false,
+		}
 	)
 
 	$effect.pre(() => {

package/dist/components/xr/CameraFeed.svelte

@@ -51,7 +51,9 @@
 
 			mesh.lookAt(headset.position)
 		},
-		{ autoStart: false }
+		{
+			autoStart: false,
+		}
 	)
 
 	$effect(() => {

package/dist/components/xr/OriginMarker.svelte

@@ -74,7 +74,9 @@
 
 			rigidBody.setNextKinematicTranslation({ x: position.x, y: position.y, z: position.z })
 		},
-		{ autoStart: false }
+		{
+			autoStart: false,
+		}
 	)
 
 	const rotateTask = useTask(

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

@@ -1,7 +1,20 @@
-interface Context {
+import type { CameraControlsRef } from '@threlte/extras';
+import type { Vector3Tuple } from 'three';
+export interface CameraPose {
+    position: Vector3Tuple;
+    lookAt: Vector3Tuple;
+}
+interface CameraControlsContext {
+    current: CameraControlsRef | undefined;
+    set(current: CameraControlsRef): void;
+    setPose(pose: CameraPose, animate?: boolean): void;
+}
+export declare const provideCameraControls: (cameraPose: () => CameraPose | undefined) => void;
+export declare const useCameraControls: () => CameraControlsContext;
+interface TransformControlsContext {
     active: boolean;
     setActive: (value: boolean) => void;
 }
 export declare const provideTransformControls: () => void;
-export declare const useTransformControls: () => Context;
+export declare const useTransformControls: () => TransformControlsContext;
 export {};

package/dist/hooks/useControls.svelte.js

@@ -1,8 +1,36 @@
 import { getContext, setContext } from 'svelte';
-const key = Symbol('tranform-controls-context');
+const TRANSFORM_CONTROLS_KEY = Symbol('tranform-controls-context');
+const CAMERA_CONTROLS_KEY = Symbol('camera-controls-context');
+export const provideCameraControls = (cameraPose) => {
+    let controls = $state.raw();
+    const setPose = (pose, animate = false) => {
+        const [x, y, z] = pose.position;
+        const [lookAtX, lookAtY, lookAtZ] = pose.lookAt;
+        controls?.setPosition(x, y, z, animate);
+        controls?.setLookAt(x, y, z, lookAtX, lookAtY, lookAtZ, animate);
+    };
+    $effect(() => {
+        const pose = cameraPose();
+        if (pose) {
+            setPose(pose);
+        }
+    });
+    setContext(CAMERA_CONTROLS_KEY, {
+        get current() {
+            return controls;
+        },
+        set(current) {
+            controls = current;
+        },
+        setPose,
+    });
+};
+export const useCameraControls = () => {
+    return getContext(CAMERA_CONTROLS_KEY);
+};
 export const provideTransformControls = () => {
     let active = $state(false);
-    setContext(key, {
+    setContext(TRANSFORM_CONTROLS_KEY, {
         get active() {
             return active;
         },
@@ -12,5 +40,5 @@ export const provideTransformControls = () => {
     });
 };
 export const useTransformControls = () => {
-    return getContext(key);
+    return getContext(TRANSFORM_CONTROLS_KEY);
 };

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

@@ -1,4 +1,3 @@
-import { Vector3 } from 'three';
 import { WorldObject, type PointsGeometry } from '../WorldObject.svelte';
 type ConnectionStatus = 'connecting' | 'open' | 'closed';
 interface Context {
@@ -10,14 +9,8 @@ interface Context {
     nurbs: WorldObject[];
     models: WorldObject[];
     connectionStatus: ConnectionStatus;
-    camera: {
-        position: Vector3;
-        lookAt: Vector3;
-        animate: boolean;
-    } | undefined;
     addPoints(worldObject: WorldObject<PointsGeometry>): void;
     addMesh(worldObject: WorldObject): void;
-    clearCamera: () => void;
 }
 export declare const provideDrawAPI: () => void;
 export declare const useDrawAPI: () => Context;

package/dist/hooks/useDrawAPI.svelte.js

@@ -7,6 +7,8 @@ import { WorldObject } from '../WorldObject.svelte';
 import { useArrows } from './useArrows.svelte';
 import { createGeometry } from '../geometry';
 import { createPose, createPoseFromFrame } from '../transform';
+import { useCameraControls } from './useControls.svelte';
+import { useThrelte } from '@threlte/core';
 const key = Symbol('draw-api-context-key');
 const tryParse = (json) => {
     try {
@@ -49,6 +51,8 @@ class Float32Reader {
     }
 }
 export const provideDrawAPI = () => {
+    const cameraControls = useCameraControls();
+    const { invalidate } = useThrelte();
     let pointsIndex = 0;
     let geometryIndex = 0;
     let poseIndex = 0;
@@ -62,7 +66,6 @@ export const provideDrawAPI = () => {
     const poses = $state([]);
     const nurbs = $state([]);
     const models = $state([]);
-    let camera = $state.raw();
     let connectionStatus = $state('connecting');
     const color = new Color();
     const direction = new Vector3();
@@ -166,7 +169,14 @@ export const provideDrawAPI = () => {
             direction.set(nextPoses[i + 3], nextPoses[i + 4], nextPoses[i + 5]);
             color.set(colors[j], colors[j + 1], colors[j + 2]);
             const arrowId = batchedArrow.addArrow(direction, origin, length, color, arrowHeadAtPose === 1);
-            poses.push(new WorldObject(`pose ${++poseIndex}`, undefined, undefined, undefined, {
+            const pose = createPose();
+            pose.x = origin.x;
+            pose.y = origin.y;
+            pose.z = origin.z;
+            pose.oX = direction.x;
+            pose.oY = direction.y;
+            pose.oZ = direction.z;
+            poses.push(new WorldObject(`pose ${++poseIndex}`, pose, 'world', undefined, {
                 getBoundingBoxAt(box3) {
                     return batchedArrow.getBoundingBoxAt(arrowId, box3);
                 },
@@ -176,6 +186,7 @@ export const provideDrawAPI = () => {
                 },
             }));
         }
+        invalidate();
     };
     const drawPoints = async (reader) => {
         // Read label length
@@ -394,11 +405,11 @@ export const provideDrawAPI = () => {
         if (!data)
             return;
         if ('setCameraPose' in data) {
-            camera = {
-                position: new Vector3(data.Position.X, data.Position.Y, data.Position.Z),
-                lookAt: new Vector3(data.LookAt.X, data.LookAt.Y, data.LookAt.Z),
-                animate: data.Animate,
-            };
+            cameraControls.setPose({
+                position: [data.Position.X, data.Position.Y, data.Position.Z],
+                lookAt: [data.LookAt.X, data.LookAt.Y, data.LookAt.Z],
+            }, data.Animate);
+            return;
         }
         if ('geometries' in data) {
             return drawGeometries(data.geometries, data.colors, data.parent);
@@ -455,18 +466,12 @@ export const provideDrawAPI = () => {
         get connectionStatus() {
             return connectionStatus;
         },
-        get camera() {
-            return camera;
-        },
         addPoints(worldObject) {
             points.push(worldObject);
         },
         addMesh(worldObject) {
             meshes.push(worldObject);
         },
-        clearCamera: () => {
-            camera = undefined;
-        },
     });
 };
 export const useDrawAPI = () => {

package/package.json

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