@viamrobotics/motion-tools 0.15.4 → 0.16.0

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

@@ -93,7 +93,10 @@
 				worldOrientation.th = ov.th
 			}
 		},
-		{ autoStart: false }
+		{
+			autoStart: false,
+			autoInvalidate: false,
+		}
 	)
 
 	$effect.pre(() => {

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,7 @@ import { WorldObject } from '../WorldObject.svelte';
 import { useArrows } from './useArrows.svelte';
 import { createGeometry } from '../geometry';
 import { createPose, createPoseFromFrame } from '../transform';
+import { useCameraControls } from './useControls.svelte';
 const key = Symbol('draw-api-context-key');
 const tryParse = (json) => {
     try {
@@ -49,6 +50,7 @@ class Float32Reader {
     }
 }
 export const provideDrawAPI = () => {
+    const cameraControls = useCameraControls();
     let pointsIndex = 0;
     let geometryIndex = 0;
     let poseIndex = 0;
@@ -62,7 +64,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();
@@ -394,11 +395,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 +456,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.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",