@viamrobotics/motion-tools 1.15.6 → 1.15.7

package/dist/components/Scene.svelte

@@ -61,7 +61,6 @@
 
 <T.Group
 	position={origin.position}
-	rotation.x={$isPresenting ? -Math.PI / 2 : 0}
 	rotation.z={origin.rotation}
 >
 	<PointerMissBox />

package/dist/components/hover/LinkedHoveredEntity.svelte

@@ -1,15 +1,8 @@
-<script
-	lang="ts"
-	module
->
-	import { Parser } from 'expr-eval'
-
-	export const parser = new Parser()
-</script>
-
 <script lang="ts">
 	import type { Entity } from 'koota'
 
+	import { compileExpression } from 'filtrex'
+
 	import { relations, traits } from '../../ecs'
 	import { useTrait } from '../../ecs'
 	import { SubEntityLinkType } from '../../ecs/relations'
@@ -39,11 +32,12 @@
 			if (linkType !== SubEntityLinkType.HoverLink) {
 				return
 			}
-			// Index  Mapping is a formula with the variable 'index' in it, available operations can be found here: https://github.com/silentmatt/expr-eval/tree/master
+			// Index mapping is a formula with the variable 'index' in it.
+			// Supported operations: https://github.com/cshaa/filtrex#expressions
 			const indexMapping =
 				displayEntity?.get(relations.SubEntityLink(linkedEntity))?.indexMapping ?? 'index'
-			const expression = parser.parse(indexMapping)
-			const resolvedIndex = expression.evaluate({ index: displayedHoverInfo.current.index })
+			const evaluate = compileExpression(indexMapping)
+			const resolvedIndex = evaluate({ index: displayedHoverInfo.current.index })
 			const linkedHoverInfo = getLinkedHoverInfo(resolvedIndex, linkedEntity)
 			hoverInfo = linkedHoverInfo
 		} else {

package/dist/components/hover/LinkedHoveredEntity.svelte.d.ts

@@ -1,5 +1,3 @@
-import { Parser } from 'expr-eval';
-export declare const parser: Parser;
 import type { Entity } from 'koota';
 interface Props {
     linkedEntity: Entity;

package/dist/components/xr/OriginMarker.svelte

@@ -1,113 +1,74 @@
 <script lang="ts">
-	import { RigidBody as RigidBodyType } from '@dimforge/rapier3d-compat'
-	import { T, useTask } from '@threlte/core'
+	import { T } from '@threlte/core'
 	import { Grid, useGamepad } from '@threlte/extras'
-	import { Collider, RigidBody } from '@threlte/rapier'
-	import { useController } from '@threlte/xr'
-	import { Euler, Group, Quaternion, Vector3 } from 'three'
+	import { Group, Quaternion, Vector2, Vector3 } from 'three'
 
+	import { useAnchors } from './useAnchors.svelte'
 	import { useOrigin } from './useOrigin.svelte'
 
 	const origin = useOrigin()
-
-	const height = 0.1
-	const radius = 0.05
+	const anchors = useAnchors()
 
 	const group = new Group()
-	const innerGroup = new Group()
-
-	const vec3 = new Vector3()
-
-	const quaternion = new Quaternion()
-	const euler = new Euler()
-
-	const offset = new Vector3()
-
-	const position = new Vector3()
-
-	let dragging = $state(false)
-	let rotating = $state(false)
-
-	let currentDistance = 0
-	const rotateDown = new Vector3()
-
-	let rigidBody = $state<RigidBodyType>()
-
-	const left = useController('left')
-	const right = useController('right')
+	const anchorObject = new Group()
 
 	const leftPad = useGamepad({ xr: true, hand: 'left' })
+	const rightPad = useGamepad({ xr: true, hand: 'right' })
 
-	leftPad.trigger.on('down', () => {
-		const grip = $left?.grip
+	const speed = 0.05
 
-		if (!grip) {
+	const vec2 = new Vector2()
+	const target = new Vector2()
+
+	leftPad.thumbstick.on('change', ({ value }) => {
+		if (typeof value === 'number') {
 			return
 		}
 
-		dragging = true
-		innerGroup.getWorldPosition(vec3)
-		offset.copy($left!.grip.position).sub(vec3)
-	})
-	leftPad.trigger.on('up', () => (dragging = false))
+		const { x: vx, y: vy } = value
+		const [x, y, z] = origin.position
+		const r = origin.rotation
 
-	useTask(
-		() => {
-			if (!$left || !rigidBody) return
+		origin.set([x, y, z + vy * speed], r + vx * speed)
+	})
 
-			position.copy($left.grip.position).sub(offset)
+	rightPad.thumbstick.on('change', ({ value }) => {
+		if (typeof value === 'number') {
+			return
+		}
 
-			origin.set([position.x, position.y, position.z])
+		const { x: vx, y: vy } = value
+		const [x, y, z] = origin.position
+		const r = origin.rotation
 
-			rigidBody.setNextKinematicTranslation({ x: position.x, y: position.y, z: position.z })
-		},
-		{
-			running: () => dragging,
-		}
-	)
+		vec2.set(x, y).lerp(target.set(x + vx * speed, y + vy * speed), 0.5)
 
-	useTask(
-		() => {
-			if (!$right || !rigidBody) return
+		origin.set([vec2.x, vec2.y, z], r)
+	})
 
-			const distance = rotateDown.distanceToSquared($right.grip.position)
+	const vec3 = new Vector3()
+	const quaternion = new Quaternion()
 
-			const rotation = rigidBody.rotation()
-			quaternion.copy(rotation)
-			euler.setFromQuaternion(quaternion)
-			euler.z = distance + currentDistance
-			origin.set(undefined, euler.z)
+	$effect(() => {
+		vec3.fromArray(origin.position)
 
-			rigidBody.setNextKinematicRotation(quaternion.setFromEuler(euler))
-		},
-		{ running: () => rotating }
-	)
+		anchors.createAnchor(vec3, quaternion)?.then((anchor) => {
+			anchors.bindAnchorObject(anchor, anchorObject)
+		})
+	})
 </script>
 
 <T
 	is={group}
 	position={[0, 0.05, 0]}
 >
-	<RigidBody
-		bind:rigidBody
-		type="kinematicPosition"
-	>
-		<Collider
-			sensor
-			shape="cone"
-			args={[height / 2, radius]}
-		>
-			<T is={innerGroup}>
-				<Grid
-					plane="xy"
-					position.y={0.05}
-					fadeDistance={5}
-					fadeOrigin={new Vector3()}
-					cellSize={0.1}
-					cellColor="#fff"
-					sectionColor="#fff"
-				/>
-			</T>
-		</Collider>
-	</RigidBody>
+	<Grid
+		plane="xy"
+		position.y={0.05}
+		fadeDistance={5}
+		fadeOrigin={new Vector3()}
+		cellSize={0.1}
+		cellColor="#fff"
+		sectionColor="#fff"
+	/>
 </T>

package/dist/components/xr/PointDistance.svelte

@@ -3,8 +3,6 @@
 	import { Billboard, Text } from '@threlte/extras'
 	import { Mesh, Vector3 } from 'three'
 
-	import Draggable from './Draggable.svelte'
-
 	const mesh1 = new Mesh()
 	const mesh2 = new Mesh()
 	const distance = new Vector3()
@@ -29,12 +27,10 @@
 </script>
 
 <T.Group position={[-1, 1, 0]}>
-	<Draggable onPointerEnter={() => null}>
-		<T is={mesh1}>
-			<T.SphereGeometry args={[0.05]} />
-			<T.MeshStandardMaterial />
-		</T>
-	</Draggable>
+	<T is={mesh1}>
+		<T.SphereGeometry args={[0.05]} />
+		<T.MeshStandardMaterial />
+	</T>
 </T.Group>
 
 <T.Group position={textPosition}>
@@ -44,10 +40,8 @@
 </T.Group>
 
 <T.Group position={[-1.5, 1, 0]}>
-	<Draggable>
-		<T is={mesh2}>
-			<T.SphereGeometry args={[0.05]} />
-			<T.MeshStandardMaterial />
-		</T>
-	</Draggable>
+	<T is={mesh2}>
+		<T.SphereGeometry args={[0.05]} />
+		<T.MeshStandardMaterial />
+	</T>
 </T.Group>

package/dist/components/xr/XR.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
-	import { World } from '@threlte/rapier'
+	import { useThrelte } from '@threlte/core'
 	import { useXR, XR, XRButton } from '@threlte/xr'
 	import { SvelteMap } from 'svelte/reactivity'
+	import { Quaternion } from 'three'
 
 	import { usePartID } from '../../hooks/usePartID.svelte'
 	import { useSettings } from '../../hooks/useSettings.svelte'
 
 	import CameraFeed from './CameraFeed.svelte'
-	import Controllers from './Controllers.svelte'
+	import FrameConfigureControllers from './frame-configure/Controllers.svelte'
 	import JointLimitsWidget from './JointLimitsWidget.svelte'
 	import OriginMarker from './OriginMarker.svelte'
+	import TeleopControllers from './teleop/Controllers.svelte'
+	import { provideAnchors } from './useAnchors.svelte'
 	import { useOrigin } from './useOrigin.svelte'
 	import XRToast from './XRToast.svelte'
 
@@ -19,6 +21,7 @@
 	const { isPresenting } = useXR()
 	const settings = useSettings()
 	const origin = useOrigin()
+	provideAnchors()
 	const enableXR = $derived(settings.current.enableXR)
 
 	const partID = usePartID()
@@ -44,6 +47,26 @@
 	const controllerConfig = $derived(settings.current.xrController)
 	const leftArmName = $derived(controllerConfig.left.armName)
 	const rightArmName = $derived(controllerConfig.right.armName)
+
+	const { renderer } = useThrelte()
+
+	// Move into Viam's coordinate system. This basically accomplishes
+	// the same thing as setting z up in the Camera component.
+	$effect(() => {
+		if ($isPresenting) {
+			const q = new Quaternion().setFromAxisAngle({ x: 1, y: 0, z: 0 }, -Math.PI / 2)
+
+			// after the XR session has started and a reference space exists:
+			const baseRefSpace = renderer.xr.getReferenceSpace()
+			if (baseRefSpace) {
+				const rotatedRefSpace = baseRefSpace.getOffsetReferenceSpace(
+					new XRRigidTransform({ x: 0, y: 0, z: 0, w: 1 }, { x: q.x, y: q.y, z: q.z, w: q.w })
+				)
+
+				renderer.xr.setReferenceSpace(rotatedRefSpace)
+			}
+		}
+	})
 </script>
 
 {#if enableXR}
@@ -93,15 +116,13 @@
 
 		<XRToast />
 
-		<World>
-			<Controllers />
+		{#if settings.current.xrMode === 'arm-teleop'}
+			<TeleopControllers />
+		{:else if settings.current.xrMode === 'frame-configure'}
+			<FrameConfigureControllers />
+		{/if}
 
-			<T.Group position.z={-2}>
-				<T.Group rotation.x={$isPresenting ? -Math.PI / 2 : 0}>
-					<OriginMarker />
-				</T.Group>
-			</T.Group>
-		</World>
+		<OriginMarker />
 	</XR>
 
 	<XRButton

package/dist/components/xr/frame-configure/Controllers.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { Controller } from '@threlte/xr'
+</script>
+
+<Controller left />
+<Controller right />

package/dist/components/xr/{HandCollider.svelte.d.ts → frame-configure/Controllers.svelte.d.ts}

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const HandCollider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Controllers: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type HandCollider = InstanceType<typeof HandCollider>;
-export default HandCollider;
+type Controllers = InstanceType<typeof Controllers>;
+export default Controllers;

package/dist/components/xr/{Controllers.svelte → teleop/Controllers.svelte}

@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { RigidBody } from '@threlte/rapier'
 	import { Controller } from '@threlte/xr'
 
-	import { useSettings } from '../../hooks/useSettings.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
 
-	import ArmTeleop from './ArmTeleop.svelte'
-	import HandCollider from './HandCollider.svelte'
+	import ArmTeleop from '../ArmTeleop.svelte'
 
 	const settings = useSettings()
 
@@ -25,21 +23,8 @@
 	const rightRotationEnabled = $derived(config.right.rotationEnabled)
 </script>
 
-<Controller left>
-	{#snippet grip()}
-		<RigidBody type="kinematicPosition">
-			<HandCollider />
-		</RigidBody>
-	{/snippet}
-</Controller>
-
-<Controller right>
-	{#snippet grip()}
-		<RigidBody type="kinematicPosition">
-			<HandCollider />
-		</RigidBody>
-	{/snippet}
-</Controller>
+<Controller left />
+<Controller right />
 
 <!-- Left Controller Arm Teleop -->
 {#if leftArmName}

package/dist/hooks/use3DModels.svelte.js

@@ -57,7 +57,7 @@ export const provide3DModels = (partID) => {
         }
     };
     $effect(() => {
-        const shouldFetchModels = settings.current.isLoaded && settings.current.renderArmModels.includes('model');
+        const shouldFetchModels = settings.isLoaded && settings.current.renderArmModels.includes('model');
         if (shouldFetchModels) {
             fetch3DModels();
         }

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

@@ -1,5 +1,4 @@
 export interface Settings {
-    isLoaded: boolean;
     cameraMode: 'orthographic' | 'perspective';
     transforming: boolean;
     snapping: boolean;
@@ -19,12 +18,13 @@ export interface Settings {
     enableLabels: boolean;
     enableKeybindings: boolean;
     enableQueryDevtools: boolean;
-    enableXR: boolean;
     enableArmPositionsWidget: boolean;
     openCameraWidgets: Record<string, string[]>;
     renderStats: boolean;
     renderArmModels: 'colliders' | 'colliders+model' | 'model';
     renderSubEntityHoverDetail: boolean;
+    enableXR: boolean;
+    xrMode: 'frame-configure' | 'arm-teleop';
     xrController: {
         left: {
             armName?: string;
@@ -42,6 +42,8 @@ export interface Settings {
 }
 interface Context {
     current: Settings;
+    isLoaded: boolean;
+    merge(value: Settings): void;
 }
 export declare const provideSettings: () => Context;
 export declare const useSettings: () => Context;

package/dist/hooks/useSettings.svelte.js

@@ -2,7 +2,6 @@ import { get, set } from 'idb-keyval';
 import { getContext, setContext } from 'svelte';
 const key = Symbol('dashboard-context');
 const defaults = () => ({
-    isLoaded: false,
     cameraMode: 'perspective',
     transforming: false,
     snapping: false,
@@ -22,12 +21,13 @@ const defaults = () => ({
     enableLabels: false,
     enableKeybindings: true,
     enableQueryDevtools: false,
-    enableXR: false,
     enableArmPositionsWidget: false,
     openCameraWidgets: {},
     renderStats: false,
     renderArmModels: 'colliders+model',
     renderSubEntityHoverDetail: false,
+    enableXR: false,
+    xrMode: 'frame-configure',
     xrController: {
         left: {
             scaleFactor: 1,
@@ -40,17 +40,19 @@ const defaults = () => ({
     },
 });
 export const provideSettings = () => {
+    let isLoaded = $state(false);
     let settings = $state(defaults());
-    let settingsLoaded = $state(false);
-    get('motion-tools-settings').then((response) => {
+    get('motion-tools-settings')
+        .then((response) => {
         if (response) {
             settings = { ...settings, ...response };
         }
-        settingsLoaded = true;
-        settings.isLoaded = true;
+    })
+        .finally(() => {
+        isLoaded = true;
     });
     $effect(() => {
-        if (settingsLoaded) {
+        if (isLoaded) {
             set('motion-tools-settings', $state.snapshot(settings));
         }
     });
@@ -61,6 +63,12 @@ export const provideSettings = () => {
         set current(value) {
             settings = value;
         },
+        get isLoaded() {
+            return isLoaded;
+        },
+        merge(value) {
+            settings = { ...settings, ...value };
+        },
     };
     setContext(key, context);
     return context;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.15.6",
+  "version": "1.15.7",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -136,7 +136,7 @@
     "@neodrag/svelte": "^2.3.3",
     "@tanstack/svelte-query-devtools": "^6.0.2",
     "earcut": "^3.0.2",
-    "expr-eval": "^2.0.2",
+    "filtrex": "^3.1.0",
     "koota": "0.6.5",
     "lodash-es": "4.17.23",
     "three-mesh-bvh": "^0.9.8",

package/dist/components/xr/Draggable.svelte

@@ -1,102 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte'
-
-	import { RigidBody as RigidBodyType } from '@dimforge/rapier3d-compat'
-	import { T, useTask } from '@threlte/core'
-	import { useGamepad } from '@threlte/extras'
-	import { AutoColliders, RigidBody } from '@threlte/rapier'
-	import { useController } from '@threlte/xr'
-	import { Group, Vector3 } from 'three'
-
-	interface Props {
-		children: Snippet
-		onPointerEnter?: () => void
-		onPointerLeave?: () => void
-		onPointerDown?: () => void
-		onPointerUp?: () => void
-	}
-
-	let { onPointerEnter, onPointerLeave, onPointerDown, onPointerUp, children }: Props = $props()
-
-	let hovering = $state(false)
-
-	let dragging = $state(false)
-	let rigidBody: RigidBodyType | undefined = $state()
-
-	const group = new Group()
-	const vec3 = new Vector3()
-	const offset = new Vector3()
-	const position = new Vector3()
-
-	const left = useController('left')
-	const right = useController('right')
-	const leftPad = useGamepad({ xr: true, hand: 'left' })
-	const rightPad = useGamepad({ xr: true, hand: 'right' })
-
-	leftPad.trigger.on('down', () => {
-		if (!$left) return
-
-		dragging = true
-		group.getWorldPosition(vec3)
-		offset.copy($left.grip.position).sub(vec3)
-		onPointerDown?.()
-	})
-
-	leftPad.trigger.on('up', () => {
-		dragging = false
-		onPointerUp?.()
-	})
-
-	rightPad.trigger.on('down', () => {
-		if (!$right) return
-
-		dragging = true
-		group.getWorldPosition(vec3)
-		offset.copy($right.grip.position).sub(vec3)
-		onPointerDown?.()
-	})
-
-	rightPad.trigger.on('up', () => {
-		dragging = true
-		onPointerUp?.()
-	})
-
-	const onsensorenter = () => {
-		hovering = true
-		onPointerEnter?.()
-	}
-
-	const onsensorexit = () => {
-		hovering = false
-		onPointerLeave?.()
-	}
-
-	const { start, stop } = useTask(
-		() => {
-			if (!$left || !rigidBody) return
-
-			position.copy($left.grip.position).sub(offset)
-
-			rigidBody.setNextKinematicTranslation({ x: position.x, y: position.y, z: position.z })
-		},
-		{ autoStart: false }
-	)
-
-	$effect(() => (hovering && dragging ? start() : stop()))
-</script>
-
-<T is={group}>
-	<RigidBody
-		bind:rigidBody
-		type="kinematicPosition"
-	>
-		<AutoColliders
-			sensor
-			shape="convexHull"
-			{onsensorenter}
-			{onsensorexit}
-		>
-			{@render children?.()}
-		</AutoColliders>
-	</RigidBody>
-</T>

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

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    children: Snippet;
-    onPointerEnter?: () => void;
-    onPointerLeave?: () => void;
-    onPointerDown?: () => void;
-    onPointerUp?: () => void;
-}
-declare const Draggable: import("svelte").Component<Props, {}, "">;
-type Draggable = ReturnType<typeof Draggable>;
-export default Draggable;

package/dist/components/xr/HandCollider.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import type { Group } from 'three'
-
-	import { useParent, useTask } from '@threlte/core'
-	import { Collider, useRigidBody } from '@threlte/rapier'
-
-	const parent = useParent()
-	const rb = useRigidBody()
-
-	useTask(() => {
-		const { position } = $parent as Group
-		rb?.setNextKinematicTranslation({ x: position.x, y: position.y, z: position.z })
-	})
-</script>
-
-<Collider
-	sensor
-	shape="ball"
-	args={[0.1]}
-/>