@viamrobotics/motion-tools 1.15.5 → 1.15.7

package/dist/components/overlay/left-pane/TreeNode.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import type { Api } from '@zag-js/tree-view'
+
+	import { ChevronRight, Eye, EyeOff } from 'lucide-svelte'
+	import { VirtualList } from 'svelte-virtuallists'
+
+	import { traits, useTrait } from '../../../ecs'
+
+	import type { TreeNode } from './buildTree'
+
+	import Self from './TreeNode.svelte'
+
+	interface Props {
+		node: TreeNode
+		indexPath: number[]
+		api: Api
+	}
+
+	let { node, indexPath, api }: Props = $props()
+
+	const name = useTrait(() => node.entity, traits.Name)
+	const invisible = useTrait(() => node.entity, traits.Invisible)
+
+	const nodeProps = $derived({ indexPath, node })
+	const nodeState = $derived(api.getNodeState(nodeProps))
+</script>
+
+{#if nodeState.isBranch}
+	{@const { expanded } = nodeState}
+	{@const { children = [] } = node}
+	<div
+		{...api.getBranchProps(nodeProps)}
+		class={[
+			'w-full',
+			{
+				'text-disabled': invisible.current,
+				'bg-medium': nodeState.selected,
+				sticky: true,
+			},
+		]}
+	>
+		<div {...api.getBranchControlProps(nodeProps)}>
+			<span
+				{...api.getBranchIndicatorProps(nodeProps)}
+				class={{ 'rotate-90': expanded }}
+			>
+				<ChevronRight size={14} />
+			</span>
+			<span
+				class="flex items-center overflow-hidden text-ellipsis"
+				{...api.getBranchTextProps(nodeProps)}
+			>
+				{name.current}
+			</span>
+
+			<button
+				class="text-gray-6"
+				onclick={(event) => {
+					event.stopPropagation()
+
+					if (node.entity.has(traits.Invisible)) {
+						node.entity.remove(traits.Invisible)
+					} else {
+						node.entity.add(traits.Invisible)
+					}
+				}}
+			>
+				{#if invisible.current}
+					<EyeOff size={14} />
+				{:else}
+					<Eye size={14} />
+				{/if}
+			</button>
+		</div>
+		<div {...api.getBranchContentProps(nodeProps)}>
+			<div {...api.getBranchIndentGuideProps(nodeProps)}></div>
+
+			{#if children.length > 200}
+				<VirtualList
+					class="w-full"
+					style="height:{Math.min(8, Math.max(children.length, 5)) * 32}px;"
+					items={children}
+				>
+					{#snippet vl_slot({ index, item: node })}
+						<Self
+							{node}
+							indexPath={[...indexPath, Number(index)]}
+							{api}
+						/>
+					{/snippet}
+				</VirtualList>
+			{:else}
+				{#each children as node, index (node.entity)}
+					<Self
+						{node}
+						indexPath={[...indexPath, Number(index)]}
+						{api}
+					/>
+				{/each}
+			{/if}
+		</div>
+	</div>
+{:else}
+	<div
+		class={{
+			'flex justify-between': true,
+			'text-disabled': invisible.current,
+			'bg-medium': nodeState.selected,
+		}}
+		{...api.getItemProps(nodeProps)}
+	>
+		<span class="flex items-center gap-1.5 overflow-hidden text-nowrap text-ellipsis">
+			{node.entity.get(traits.Name)}
+		</span>
+
+		<button
+			class="text-gray-6"
+			onclick={(event) => {
+				event.stopPropagation()
+				if (node.entity.has(traits.Invisible)) {
+					node.entity.remove(traits.Invisible)
+				} else {
+					node.entity.add(traits.Invisible)
+				}
+			}}
+		>
+			{#if invisible.current}
+				<EyeOff size={14} />
+			{:else}
+				<Eye size={14} />
+			{/if}
+		</button>
+	</div>
+{/if}
+
+<style>
+	:global(:root) {
+		[data-scope='tree-view'][data-part='item'],
+		[data-scope='tree-view'][data-part='branch-control'] {
+			user-select: none;
+			--padding-inline: 16px;
+			padding-inline-start: calc(var(--depth) * var(--padding-inline));
+			padding-inline-end: var(--padding-inline);
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			min-height: 32px;
+		}
+
+		[data-scope='tree-view'][data-part='item-text'],
+		[data-scope='tree-view'][data-part='branch-text'] {
+			flex: 1;
+		}
+
+		[data-scope='tree-view'][data-part='branch-content'] {
+			position: relative;
+			isolation: isolate;
+		}
+
+		[data-scope='tree-view'][data-part='branch-indent-guide'] {
+			position: absolute;
+			content: '';
+			border-left: 1px solid #eee;
+			height: 100%;
+			translate: calc(var(--depth) * 1.25rem);
+			z-index: 1;
+		}
+	}
+</style>

package/dist/components/overlay/left-pane/TreeNode.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Api } from '@zag-js/tree-view';
+import type { TreeNode } from './buildTree';
+interface Props {
+    node: TreeNode;
+    indexPath: number[];
+    api: Api;
+}
+declare const TreeNode: import("svelte").Component<Props, {}, "">;
+type TreeNode = ReturnType<typeof TreeNode>;
+export default TreeNode;

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/ecs/traits.d.ts

@@ -51,6 +51,7 @@ export declare const WorldPose: import("koota").Trait<{
     theta: number;
 }>;
 export declare const Hovered: import("koota").Trait<() => boolean>;
+export declare const Invisible: import("koota").Trait<() => boolean>;
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances

package/dist/ecs/traits.js

@@ -28,6 +28,7 @@ export const WorldPose = trait({
     theta: 0,
 });
 export const Hovered = trait(() => true);
+export const Invisible = trait(() => true);
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances

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/useFramelessComponents.svelte.js

@@ -10,14 +10,14 @@ export const provideFramelessComponents = () => {
         const partComponentsWIthNoFrame = components
             ?.filter((component) => component.frame === undefined)
             .map((component) => component.name) ?? [];
-        const fragmentComponentsWithNoFrame = [];
+        const fragmentComponentsWithNoFrame = new Set(partComponentsWIthNoFrame);
         for (const fragmentComponentName of Object.keys(partConfig.componentNameToFragmentId)) {
             if (frames.current.some((frame) => frame.referenceFrame === fragmentComponentName)) {
                 continue;
             }
-            fragmentComponentsWithNoFrame.push(fragmentComponentName);
+            fragmentComponentsWithNoFrame.add(fragmentComponentName);
         }
-        return [...partComponentsWIthNoFrame, ...fragmentComponentsWithNoFrame];
+        return [...fragmentComponentsWithNoFrame];
     });
     setContext(key, {
         get current() {

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.5",
+  "version": "1.15.7",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -62,7 +62,7 @@
     "prettier-plugin-tailwindcss": "0.6.14",
     "publint": "0.3.12",
     "runed": "0.31.1",
-    "svelte": "5.53.13",
+    "svelte": "5.55.0",
     "svelte-check": "4.4.5",
     "svelte-virtuallists": "1.4.2",
     "tailwindcss": "4.1.13",
@@ -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",