@viamrobotics/motion-tools 1.15.3 → 1.15.5

package/dist/components/KeyboardControls.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { CameraControlsRef } from '@threlte/extras'
 
-	import { useTask } from '@threlte/core'
+	import { isInstanceOf, useTask } from '@threlte/core'
 	import { PressedKeys } from 'runed'
-	import { MathUtils } from 'three'
+	import { MathUtils, Vector3 } from 'three'
 
 	import { useFocusedEntity, useSelectedEntity } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
@@ -35,7 +35,36 @@
 	const left = $derived(keys.has('arrowleft'))
 	const down = $derived(keys.has('arrowdown'))
 	const right = $derived(keys.has('arrowright'))
-	const any = $derived(w || s || a || d || r || f || up || left || down || right)
+	const anyKeysPressed = $derived(w || s || a || d || r || f || up || left || down || right)
+
+	const target = new Vector3()
+
+	const PERSPECTIVE_DISTANCE_FACTOR = 0.0001
+	const PERSPECTIVE_MIN_SPEED = 0.00001
+
+	const ORTHOGRAPHIC_ZOOM_FACTOR = 0.1
+	const ORTHOGRAPHIC_MIN_SPEED = 0.00005
+
+	const FALLBACK_SPEED = 0.001
+
+	const getMovementScale = () => {
+		const camera = cameraControls.camera
+
+		if (isInstanceOf(camera, 'PerspectiveCamera')) {
+			cameraControls.getTarget(target)
+
+			const distance = camera.position.distanceTo(target)
+			const scaled = distance * PERSPECTIVE_DISTANCE_FACTOR
+			return Math.max(scaled, PERSPECTIVE_MIN_SPEED)
+		}
+
+		if (isInstanceOf(camera, 'OrthographicCamera')) {
+			const scaled = ORTHOGRAPHIC_ZOOM_FACTOR / camera.zoom
+			return Math.max(scaled, ORTHOGRAPHIC_MIN_SPEED)
+		}
+
+		return FALLBACK_SPEED
+	}
 
 	const { start, stop } = useTask(
 		(delta) => {
@@ -46,44 +75,58 @@
 				return
 			}
 
+			const moveSpeed = getMovementScale() * dt
+			const rotateSpeed = 0.1 * MathUtils.DEG2RAD * dt
+			const tiltSpeed = 0.05 * MathUtils.DEG2RAD * dt
+			const dollySpeed = 0.005 * dt
+			const zoomSpeed = 0.5 * dt
+
 			if (a) {
-				cameraControls.truck(-0.01 * dt, 0, true)
+				cameraControls.truck(-moveSpeed * dt, 0, true)
 			}
 
 			if (d) {
-				cameraControls.truck(0.01 * dt, 0, true)
+				cameraControls.truck(moveSpeed * dt, 0, true)
 			}
 
 			if (w) {
-				cameraControls.forward(0.01 * dt, true)
+				cameraControls.forward(moveSpeed * dt, true)
 			}
 
 			if (s) {
-				cameraControls.forward(-0.01 * dt, true)
+				cameraControls.forward(-moveSpeed * dt, true)
 			}
 
 			if (r) {
-				cameraControls.dolly(0.01 * dt, true)
+				if (isInstanceOf(cameraControls.camera, 'PerspectiveCamera')) {
+					cameraControls.dolly(dollySpeed, true)
+				} else {
+					cameraControls.zoom(zoomSpeed, true)
+				}
 			}
 
 			if (f) {
-				cameraControls.dolly(-0.01 * dt, true)
+				if (isInstanceOf(cameraControls.camera, 'PerspectiveCamera')) {
+					cameraControls.dolly(-dollySpeed, true)
+				} else {
+					cameraControls.zoom(-zoomSpeed, true)
+				}
 			}
 
 			if (left) {
-				cameraControls.rotate(-0.1 * MathUtils.DEG2RAD * dt, 0, true)
+				cameraControls.rotate(-rotateSpeed, 0, true)
 			}
 
 			if (right) {
-				cameraControls.rotate(0.1 * MathUtils.DEG2RAD * dt, 0, true)
+				cameraControls.rotate(rotateSpeed, 0, true)
 			}
 
 			if (up) {
-				cameraControls.rotate(0, -0.05 * MathUtils.DEG2RAD * dt, true)
+				cameraControls.rotate(0, -tiltSpeed, true)
 			}
 
 			if (down) {
-				cameraControls.rotate(0, 0.05 * MathUtils.DEG2RAD * dt, true)
+				cameraControls.rotate(0, tiltSpeed, true)
 			}
 		},
 		{
@@ -93,7 +136,7 @@
 	)
 
 	$effect.pre(() => {
-		if (any) {
+		if (anyKeysPressed) {
 			start()
 		} else {
 			stop()

package/dist/components/MeasureTool/MeasureTool.svelte

@@ -35,7 +35,7 @@
 		intersection = event.intersections[0]
 
 		// Only handle axis restrictions if a first point has been placed
-		if (!p1) {
+		if (!p1 || !intersection) {
 			return
 		}
 
@@ -127,7 +127,7 @@
 {#if enabled}
 	{#if intersection && step !== 'p2'}
 		<MeasurePoint
-			position={intersection?.point.toArray()}
+			position={intersection.point.toArray()}
 			opacity={0.5}
 		/>
 	{/if}

package/dist/components/xr/OriginMarker.svelte

@@ -51,7 +51,7 @@
 	})
 	leftPad.trigger.on('up', () => (dragging = false))
 
-	const dragTask = useTask(
+	useTask(
 		() => {
 			if (!$left || !rigidBody) return
 
@@ -62,11 +62,11 @@
 			rigidBody.setNextKinematicTranslation({ x: position.x, y: position.y, z: position.z })
 		},
 		{
-			autoStart: false,
+			running: () => dragging,
 		}
 	)
 
-	const rotateTask = useTask(
+	useTask(
 		() => {
 			if (!$right || !rigidBody) return
 
@@ -80,24 +80,8 @@
 
 			rigidBody.setNextKinematicRotation(quaternion.setFromEuler(euler))
 		},
-		{ autoStart: false }
+		{ running: () => rotating }
 	)
-
-	$effect.pre(() => {
-		if (dragging) {
-			dragTask.start()
-		} else {
-			dragTask.stop()
-		}
-	})
-
-	$effect.pre(() => {
-		if (rotating) {
-			rotateTask.start()
-		} else {
-			rotateTask.stop()
-		}
-	})
 </script>
 
 <T

package/dist/components/xr/XRConfigPanel.svelte

@@ -18,13 +18,7 @@
 	const settings = useSettings()
 	const armClient = useArmClient()
 	const partID = usePartID()
-
-	let resources: ReturnType<typeof useResourceNames> | undefined
-	try {
-		resources = useResourceNames(() => partID.current)
-	} catch (error) {
-		console.warn('Failed to get resources, robot may not be connected yet:', error)
-	}
+	let resources = useResourceNames(() => partID.current)
 
 	// Get available arms and grippers
 	const armNames = $derived(armClient.names || [])

package/dist/components/xr/useAnchors.svelte.d.ts

@@ -1,2 +1,9 @@
+import { type Object3D, type Quaternion, type Vector3 } from 'three';
+interface Context {
+    createAnchor: (position: Vector3, orientation: Quaternion) => Promise<XRAnchor> | undefined;
+    bindAnchorObject: (anchor: XRAnchor, object: Object3D) => void;
+    unbindAnchorObject: (anchor: XRAnchor) => void;
+}
 export declare const provideAnchors: () => void;
-export declare const useAnchors: () => void;
+export declare const useAnchors: () => Context;
+export {};

package/dist/components/xr/useAnchors.svelte.js

@@ -1,28 +1,32 @@
-import { useTask, useThrelte, watch } from '@threlte/core';
+import { useTask, useThrelte } from '@threlte/core';
 import { useXR } from '@threlte/xr';
 import { getContext, setContext } from 'svelte';
-import { Matrix4 } from 'three';
+import { fromStore } from 'svelte/store';
+import {} from 'three';
 const key = Symbol('anchors-context');
 export const provideAnchors = () => {
-    const matrix4 = new Matrix4();
     const { renderer } = useThrelte();
-    const { isPresenting } = useXR();
+    const { isPresenting: isPresentingStore } = useXR();
+    const isPresenting = fromStore(isPresentingStore);
     const map = new WeakMap();
-    let space = renderer.xr.getReferenceSpace();
-    const createAnchor = (position, orientation) => {
-        space ??= renderer.xr.getReferenceSpace();
-        if (space === null)
+    const createAnchor = (position, quaternion) => {
+        const space = renderer.xr.getReferenceSpace();
+        const frame = renderer.xr.getFrame();
+        if (!space || !frame)
             return;
-        const pose = new XRRigidTransform(position, orientation);
-        return renderer.xr.getFrame().createAnchor?.(pose, space);
+        const pose = new XRRigidTransform({ x: position.x, y: position.y, z: position.z }, { x: quaternion.x, y: quaternion.y, z: quaternion.z, w: quaternion.w });
+        return frame.createAnchor?.(pose, space);
     };
-    const { start, stop } = useTask(() => {
-        space ??= renderer.xr.getReferenceSpace();
-        if (!space) {
-            return;
-        }
+    const bindAnchorObject = (anchor, object) => {
+        map.set(anchor, object);
+    };
+    const unbindAnchorObject = (anchor) => {
+        map.delete(anchor);
+    };
+    useTask(() => {
+        const space = renderer.xr.getReferenceSpace();
         const frame = renderer.xr.getFrame();
-        if (!frame.trackedAnchors) {
+        if (!space || !frame?.trackedAnchors) {
             return;
         }
         for (const anchor of frame.trackedAnchors) {
@@ -34,22 +38,18 @@ export const provideAnchors = () => {
             if (!anchorPose) {
                 continue;
             }
-            matrix4.fromArray(anchorPose.transform.matrix);
-            object3d.applyMatrix4(matrix4);
-        }
-    });
-    watch(isPresenting, ($isPresenting) => {
-        if ($isPresenting) {
-            start();
-        }
-        else {
-            stop();
+            object3d.matrixAutoUpdate = false;
+            object3d.matrix.fromArray(anchorPose.transform.matrix);
         }
+    }, {
+        running: () => isPresenting.current,
     });
     setContext(key, {
         createAnchor,
+        bindAnchorObject,
+        unbindAnchorObject,
     });
 };
 export const useAnchors = () => {
-    getContext(key);
+    return getContext(key);
 };

package/dist/hooks/useFrames.svelte.js

@@ -20,8 +20,10 @@ export const provideFrames = (partID) => {
     const connectionStatus = useConnectionStatus(partID);
     const machineStatus = useMachineStatus(partID);
     const logs = useLogs();
+    let didRecentlyEdit = $state(false);
     const isEditMode = $derived(environment.current.viewerMode === 'edit');
     const query = createRobotQuery(client, 'frameSystemConfig', () => ({
+        refetchOnWindowFocus: false,
         enabled: partID() !== '' && !isEditMode,
     }));
     const revision = $derived(machineStatus.current?.config?.revision);
@@ -41,7 +43,8 @@ export const provideFrames = (partID) => {
             }
             frames[frame.referenceFrame] = frame;
         }
-        if (isEditMode || connectionStatus.current === MachineConnectionEvent.DISCONNECTED) {
+        // Let config frames take priority if the user has made edits
+        if (didRecentlyEdit || connectionStatus.current === MachineConnectionEvent.DISCONNECTED) {
             const mergedFrames = {
                 ...frames,
                 ...configFrames.current,
@@ -56,9 +59,8 @@ export const provideFrames = (partID) => {
             return mergedFrames;
         }
         /**
-         * If we're not in edit mode and we have a robot connection,
+         * If we haven't edited and we have a robot connection,
          * we only use frames reported by the machine
-         *
          */
         return frames;
     });
@@ -69,6 +71,11 @@ export const provideFrames = (partID) => {
             untrack(() => query.refetch());
         }
     });
+    $effect(() => {
+        if (isEditMode) {
+            didRecentlyEdit = true;
+        }
+    });
     $effect.pre(() => {
         const currentResourcesByName = resourceByName.current;
         const currentPartID = partID();
@@ -136,11 +143,19 @@ export const provideFrames = (partID) => {
                 if (!active[entityKey]) {
                     entity?.destroy();
                     entities.delete(entityKey);
-                    continue;
                 }
             }
         });
     });
+    // Clear all entities on unmount
+    $effect(() => {
+        return () => {
+            for (const [, entity] of entities) {
+                entity?.destroy();
+            }
+            entities.clear();
+        };
+    });
     setContext(key, {
         get current() {
             return current;

package/dist/hooks/useGeometries.svelte.js

@@ -117,14 +117,24 @@ export const provideGeometries = (partID) => {
             if (!activeQueryKeys.has(queryKey)) {
                 for (const key of keys) {
                     const entity = entities.get(key);
-                    if (entity && world.has(entity))
+                    if (entity && world.has(entity)) {
                         entity.destroy();
+                    }
                     entities.delete(key);
                 }
                 queryEntityKeys.delete(queryKey);
             }
         }
     });
+    // Clear all entities on unmount
+    $effect(() => {
+        return () => {
+            for (const [, entity] of entities) {
+                entity?.destroy();
+            }
+            entities.clear();
+        };
+    });
     setContext(key, {
         refetch() {
             for (const [, query] of queries) {

package/dist/hooks/usePointcloudObjects.svelte.js

@@ -194,6 +194,14 @@ export const providePointcloudObjects = (partID) => {
             }
         }
     });
+    $effect(() => {
+        return () => {
+            for (const [, entity] of entities) {
+                entity.destroy();
+            }
+            entities.clear();
+        };
+    });
     setContext(key, {
         refetch() {
             for (const [, query] of queries) {

package/dist/hooks/usePointclouds.svelte.js

@@ -133,6 +133,14 @@ export const providePointclouds = (partID) => {
             }
         }
     });
+    $effect(() => {
+        return () => {
+            for (const [, entity] of entities) {
+                entity.destroy();
+            }
+            entities.clear();
+        };
+    });
     setContext(key, {
         refetch() {
             for (const [, query] of queries) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.15.3",
+  "version": "1.15.5",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -38,7 +38,6 @@
     "@viamrobotics/prime-core": "0.1.5",
     "@viamrobotics/sdk": "0.58.0",
     "@viamrobotics/svelte-sdk": "1.0.1",
-    "@vitejs/plugin-basic-ssl": "2.1.0",
     "@vitest/coverage-v8": "^3.2.4",
     "@zag-js/collapsible": "1.22.1",
     "@zag-js/floating-panel": "1.22.1",
@@ -145,6 +144,7 @@
   },
   "scripts": {
     "dev": "tsx server/check-bun && bun run server/server.ts",
+    "dev:https": "vite dev -- --https",
     "build": "vite build && npm run prepack",
     "build:workers": "node scripts/build-workers.js",
     "preview": "vite preview",