@viamrobotics/motion-tools 1.15.8 → 1.18.0

package/dist/components/Selection/useSelectionPlugin.svelte.js

@@ -0,0 +1,24 @@
+import { getContext, setContext } from 'svelte';
+import { useQuery, useWorld } from '../../ecs';
+import * as selectionTraits from './traits';
+const key = Symbol('selection-plugin-context');
+export const provideSelectionPlugin = () => {
+    const world = useWorld();
+    const entities = useQuery(selectionTraits.SelectionEnclosedPoints);
+    const ctx = setContext(key, {
+        get current() {
+            return entities.current;
+        },
+        clearSelections() {
+            for (const entity of world.query(selectionTraits.SelectionEnclosedPoints)) {
+                if (world.has(entity)) {
+                    entity.destroy();
+                }
+            }
+        },
+    });
+    return ctx;
+};
+export const useSelectionPlugin = () => {
+    return getContext(key);
+};

package/dist/components/Selection/utils.d.ts

@@ -0,0 +1,5 @@
+import { Camera, Triangle, Vector3 } from 'three';
+import type * as selectionTraits from './traits';
+export declare const raycast: (event: PointerEvent, camera: Camera) => Vector3;
+export declare const getTriangleFromIndex: (i: number, indices: number[], positions: Float32Array, outTriangle: Triangle) => void;
+export declare const getTriangleBoxesFromIndices: (indices: number[], positions: Float32Array) => selectionTraits.AABB[];

package/dist/components/Selection/utils.js

@@ -0,0 +1,38 @@
+import { Box3, Camera, Plane, Raycaster, Triangle, Vector2, Vector3 } from 'three';
+const raycaster = new Raycaster();
+const mouse = new Vector2();
+const plane = new Plane(new Vector3(0, 0, 1), 0);
+const point = new Vector3();
+const triangle = new Triangle();
+const box3 = new Box3();
+const a = new Vector3();
+const b = new Vector3();
+const c = new Vector3();
+export const raycast = (event, camera) => {
+    const element = event.target;
+    const rect = element.getBoundingClientRect();
+    mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+    mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+    raycaster.setFromCamera(mouse, camera);
+    raycaster.ray.intersectPlane(plane, point);
+    return point;
+};
+export const getTriangleFromIndex = (i, indices, positions, outTriangle) => {
+    const stride = 3;
+    const ia = indices[i + 0] * stride;
+    const ib = indices[i + 1] * stride;
+    const ic = indices[i + 2] * stride;
+    a.set(positions[ia + 0], positions[ia + 1], positions[ia + 2]);
+    b.set(positions[ib + 0], positions[ib + 1], positions[ib + 2]);
+    c.set(positions[ic + 0], positions[ic + 1], positions[ic + 2]);
+    outTriangle.set(a, b, c);
+};
+export const getTriangleBoxesFromIndices = (indices, positions) => {
+    const boxes = [];
+    for (let i = 0, l = indices.length; i < l; i += 3) {
+        getTriangleFromIndex(i, indices, positions, triangle);
+        box3.setFromPoints([triangle.a, triangle.b, triangle.c]);
+        boxes.push({ minX: box3.min.x, minY: box3.min.y, maxX: box3.max.x, maxY: box3.max.y });
+    }
+    return boxes;
+};

package/dist/components/Snapshot.svelte

@@ -24,7 +24,7 @@ Renders a Snapshot protobuf by spawning its transforms and drawings as entities
 	import { useWorld } from '../ecs'
 	import { useCameraControls } from '../hooks/useControls.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
-	import { applySceneMetadata, destroyEntities, spawnSnapshotEntities } from '../snapshot'
+	import { applySceneMetadata, spawnSnapshotEntities } from '../snapshot'
 
 	interface Props {
 		snapshot: SnapshotProto
@@ -78,6 +78,8 @@ Renders a Snapshot protobuf by spawning its transforms and drawings as entities
 	})
 
 	onDestroy(() => {
-		destroyEntities(world, entities)
+		for (const entity of entities) {
+			if (world.has(entity)) entity.destroy()
+		}
 	})
 </script>

package/dist/components/overlay/AddRelationship.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { Entity } from 'koota'
-
 	import { Button, Input, Select } from '@viamrobotics/prime-core'
+	import { type Entity } from 'koota'
 
 	import { relations, traits, useQuery, useTrait } from '../../ecs'
 	import { SubEntityLinkType } from '../../ecs/relations'

package/dist/components/overlay/AddRelationship.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Entity } from 'koota';
+import { type Entity } from 'koota';
 interface Props {
     entity: Entity | undefined;
 }

package/dist/components/overlay/Details.svelte

@@ -12,6 +12,9 @@
 </script>
 
 <script lang="ts">
+	import type { Entity } from 'koota'
+	import type { Snippet } from 'svelte'
+
 	import { draggable } from '@neodrag/svelte'
 	import { isInstanceOf, useTask } from '@threlte/core'
 	import { Button, Icon, Input, Select, Tooltip } from '@viamrobotics/prime-core'
@@ -34,7 +37,11 @@
 	} from '../../hooks/useSelection.svelte'
 	import { createPose } from '../../transform'
 
-	const { ...rest } = $props()
+	interface Props {
+		details?: Snippet<[{ entity: Entity }]>
+	}
+
+	const { details }: Props = $props()
 
 	const world = useWorld()
 	const controls = useCameraControls()
@@ -94,7 +101,7 @@
 		}
 	}
 
-	const { start, stop } = useTask(
+	useTask(
 		() => {
 			object3d?.getWorldPosition(vec3)
 			if (!vec3.equals(worldPosition)) {
@@ -114,19 +121,11 @@
 			}
 		},
 		{
-			autoStart: false,
 			autoInvalidate: false,
+			running: () => object3d !== undefined,
 		}
 	)
 
-	$effect.pre(() => {
-		if (object3d) {
-			start()
-		} else {
-			stop()
-		}
-	})
-
 	$effect(() => {
 		if (entity) {
 			const worldPose = createPose({
@@ -266,7 +265,6 @@
 			bounds: 'body',
 			handle: dragElement,
 		}}
-		{...rest}
 	>
 		<div
 			class="flex cursor-move items-center justify-between gap-2 pb-2"
@@ -662,6 +660,8 @@
 			</div>
 		{/if}
 
+		{@render details?.({ entity })}
+
 		<h3 class="text-subtle-2 pt-3 pb-2">Actions</h3>
 
 		{#if focusedEntity.current}

package/dist/components/overlay/Details.svelte.d.ts

@@ -1,3 +1,10 @@
-declare const Details: import("svelte").Component<Record<string, any>, {}, "">;
+import type { Entity } from 'koota';
+import type { Snippet } from 'svelte';
+interface Props {
+    details?: Snippet<[{
+        entity: Entity;
+    }]>;
+}
+declare const Details: import("svelte").Component<Props, {}, "">;
 type Details = ReturnType<typeof Details>;
 export default Details;

package/dist/components/overlay/settings/Settings.svelte

@@ -5,6 +5,7 @@
 	import { useResourceNames } from '@viamrobotics/svelte-sdk'
 	import { PersistedState } from 'runed'
 	import { onMount } from 'svelte'
+	import { Color } from 'three'
 
 	import DashboardButton from '../dashboard/Button.svelte'
 	import XRControllerSettings from '../../xr/XRControllerSettings.svelte'
@@ -54,6 +55,8 @@
 
 	const isOpen = new PersistedState('settings-is-open', false)
 	const activeTab = new PersistedState('settings-active-tab', 'Connection')
+
+	const colorHex = $derived(`#${new Color(settings.current.pointColor).getHexString()}`)
 </script>
 
 <Portal id="dashboard">
@@ -122,7 +125,11 @@
 			<div class="w-20">
 				<Input
 					type="color"
-					bind:value={settings.current.pointColor}
+					value={colorHex}
+					on:change={(event) => {
+						const value = (event.target as HTMLInputElement).value
+						settings.current.pointColor = value
+					}}
 					on:keydown={(event) => event.stopImmediatePropagation()}
 				/>
 			</div>

package/dist/components/xr/OriginMarker.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
+	import { useTask, useThrelte } from '@threlte/core'
 	import { Grid, useGamepad } from '@threlte/extras'
+	import { Hand, useHand, useXR } from '@threlte/xr'
 	import { Group, Quaternion, Vector2, Vector3 } from 'three'
 
 	import { useAnchors } from './useAnchors.svelte'
@@ -9,17 +10,20 @@
 	const origin = useOrigin()
 	const anchors = useAnchors()
 
-	const group = new Group()
 	const anchorObject = new Group()
 
 	const leftPad = useGamepad({ xr: true, hand: 'left' })
 	const rightPad = useGamepad({ xr: true, hand: 'right' })
 
-	const speed = 0.05
+	let speed = $state(0.05)
 
 	const vec2 = new Vector2()
 	const target = new Vector2()
 
+	leftPad.squeeze.on('change', () => {
+		speed = leftPad.squeeze.pressed ? 0.005 : 0.05
+	})
+
 	leftPad.thumbstick.on('change', ({ value }) => {
 		if (typeof value === 'number') {
 			return
@@ -29,6 +33,8 @@
 		const [x, y, z] = origin.position
 		const r = origin.rotation
 
+		vec2.set(z, r).lerp(target.set(z + vy * speed, r + vx * speed), 0.5)
+
 		origin.set([x, y, z + vy * speed], r + vx * speed)
 	})
 
@@ -56,19 +62,90 @@
 			anchors.bindAnchorObject(anchor, anchorObject)
 		})
 	})
+
+	let startLeftPinchTranslation = new Vector3()
+	let leftPinchTranslation = new Vector3()
+	let startRightPinchTranslation = new Vector3()
+	let rightPinchTranslation = new Vector3()
+
+	const leftHand = useHand('left')
+	const rightHand = useHand('right')
+
+	let translating = $state(false)
+	let rotating = $state(false)
+
+	const { renderer } = useThrelte()
+	const { isPresenting } = useXR()
+
+	$effect(() => {
+		if (!$isPresenting) {
+			return
+		}
+		renderer.xr.getHand(0).addEventListener('pinchstart', () => {
+			if (leftHand.current?.targetRay.position) {
+				translating = true
+				startLeftPinchTranslation.copy(leftHand.current.targetRay.position)
+			}
+		})
+	})
+
+	useTask(
+		() => {
+			if (leftHand.current?.targetRay && translating) {
+				leftPinchTranslation
+					.copy(leftHand.current.targetRay.position)
+					.sub(startLeftPinchTranslation)
+				origin.set(leftPinchTranslation.toArray(), origin.rotation)
+			}
+		},
+		{
+			running: () => translating,
+		}
+	)
+
+	useTask(
+		() => {
+			if (rightHand.current?.targetRay && rotating) {
+				rightPinchTranslation.copy(rightHand.current.targetRay.position)
+				const rotation =
+					origin.rotation + rightPinchTranslation.distanceTo(startRightPinchTranslation)
+				origin.set(leftPinchTranslation.toArray(), rotation)
+			}
+		},
+		{
+			running: () => rotating,
+		}
+	)
 </script>
 
-<T
-	is={group}
-	position={[0, 0.05, 0]}
->
-	<Grid
-		plane="xy"
-		position.y={0.05}
-		fadeDistance={5}
-		fadeOrigin={new Vector3()}
-		cellSize={0.1}
-		cellColor="#fff"
-		sectionColor="#fff"
-	/>
-</T>
+<Grid
+	plane="xy"
+	fadeDistance={5}
+	fadeOrigin={new Vector3()}
+	cellSize={0.1}
+	cellColor="#fff"
+	sectionColor="#fff"
+/>
+
+<Hand
+	left
+	onpinchstart={() => {
+		console.log('pinchstart')
+		if (leftHand.current?.targetRay.position) {
+			translating = true
+			startLeftPinchTranslation.copy(leftHand.current.targetRay.position)
+		}
+	}}
+	onpinchend={() => (translating = false)}
+/>
+
+<Hand
+	right
+	onpinchstart={() => {
+		if (rightHand.current?.targetRay.position) {
+			rotating = true
+			startRightPinchTranslation.copy(rightHand.current.targetRay.position)
+		}
+	}}
+	onpinchend={() => (rotating = false)}
+/>

package/dist/components/xr/XR.svelte

@@ -72,7 +72,7 @@
 {#if enableXR}
 	<XR
 		onsessionstart={() => {
-			origin.set([0, 0, -2])
+			origin.set([-1, -1, 0])
 		}}
 		onsessionend={() => {
 			origin.set([0, 0, 0])

package/dist/draw.d.ts

@@ -0,0 +1,13 @@
+import type { TransformWithUUID } from '@viamrobotics/sdk';
+import type { Entity, Trait, World } from 'koota';
+import type { Transform as TransformProto } from './buf/common/v1/common_pb';
+import type { Drawing } from './buf/draw/v1/drawing_pb';
+export type Transform = TransformWithUUID | TransformProto;
+type Options = {
+    removable?: boolean;
+};
+export declare const drawTransform: (world: World, { referenceFrame, poseInObserverFrame, physicalObject, metadata }: Transform, api: Trait, options?: Options) => Entity;
+export declare const drawDrawing: (world: World, drawing: Drawing, api: Trait, options?: Options) => Entity[];
+export declare const updateTransform: (entity: Entity, { poseInObserverFrame, physicalObject, metadata }: Transform, options?: Options) => void;
+export declare const updateDrawing: (world: World, entities: Entity[], drawing: Drawing, api: Trait, options?: Options) => Entity[];
+export {};