@viamrobotics/motion-tools 1.32.0 → 1.33.0

package/dist/components/xr/OriginMarker.svelte

@@ -1,151 +0,0 @@
-<script lang="ts">
-	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'
-	import { useOrigin } from './useOrigin.svelte'
-
-	const origin = useOrigin()
-	const anchors = useAnchors()
-
-	const anchorObject = new Group()
-
-	const leftPad = useGamepad({ xr: true, hand: 'left' })
-	const rightPad = useGamepad({ xr: true, hand: 'right' })
-
-	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
-		}
-
-		const { x: vx, y: vy } = value
-		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)
-	})
-
-	rightPad.thumbstick.on('change', ({ value }) => {
-		if (typeof value === 'number') {
-			return
-		}
-
-		const { x: vx, y: vy } = value
-		const [x, y, z] = origin.position
-		const r = origin.rotation
-
-		vec2.set(x, y).lerp(target.set(x + vx * speed, y + vy * speed), 0.5)
-
-		origin.set([vec2.x, vec2.y, z], r)
-	})
-
-	const vec3 = new Vector3()
-	const quaternion = new Quaternion()
-
-	$effect(() => {
-		vec3.fromArray(origin.position)
-
-		anchors.createAnchor(vec3, quaternion)?.then((anchor) => {
-			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>
-
-<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/XRControllerSettings.svelte

@@ -1,242 +0,0 @@
-<script lang="ts">
-	import { Select, Switch } from '@viamrobotics/prime-core'
-	import { useResourceNames } from '@viamrobotics/svelte-sdk'
-
-	import { useArmClient } from '../../hooks/useArmClient.svelte'
-	import { usePartID } from '../../hooks/usePartID.svelte'
-	import { useSettings } from '../../hooks/useSettings.svelte'
-
-	const settings = useSettings()
-	const armClient = useArmClient()
-	const partID = usePartID()
-	const resources = useResourceNames(() => partID.current, 'gripper')
-
-	const armNames = $derived(armClient.names || [])
-	const gripperNames = $derived(
-		resources.current
-			.filter((r) => r.subtype === 'gripper' && r.type === 'component')
-			.map((r) => r.name)
-	)
-
-	const config = $derived(settings.current.xrController)
-
-	// Filter available arms/grippers - exclude what the other controller has selected
-	const leftAvailableArms = $derived(
-		armNames.filter((name) => name === config.left.armName || name !== config.right.armName)
-	)
-	const rightAvailableArms = $derived(
-		armNames.filter((name) => name === config.right.armName || name !== config.left.armName)
-	)
-
-	const leftAvailableGrippers = $derived(
-		gripperNames.filter(
-			(name) => name === config.left.gripperName || name !== config.right.gripperName
-		)
-	)
-	const rightAvailableGrippers = $derived(
-		gripperNames.filter(
-			(name) => name === config.right.gripperName || name !== config.left.gripperName
-		)
-	)
-
-	function updateConfig(
-		hand: 'left' | 'right',
-		key: string,
-		value: string | number | boolean | undefined
-	) {
-		settings.current.xrController[hand] = {
-			...settings.current.xrController[hand],
-			[key]: value,
-		}
-	}
-</script>
-
-{#snippet SectionTitle(title: string)}
-	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>{title}</strong></h3>
-{/snippet}
-
-<div class="flex flex-col gap-2.5">
-	<label class="flex items-center justify-between gap-2">
-		Enable VR / AR mode <Switch bind:on={settings.current.enableXR} />
-	</label>
-
-	<!-- Left Controller -->
-	{@render SectionTitle('Left Controller')}
-
-	<label class="flex items-center justify-between gap-2">
-		Arm
-		<Select
-			value={config.left.armName || ''}
-			onchange={(event: Event) => {
-				if (event.target instanceof HTMLSelectElement) {
-					updateConfig('left', 'armName', event.target.value || undefined)
-				}
-			}}
-		>
-			<option value="">None</option>
-			{#each leftAvailableArms as armName (armName)}
-				<option value={armName}>{armName}</option>
-			{/each}
-		</Select>
-	</label>
-
-	<label class="flex items-center justify-between gap-2">
-		Gripper
-		<Select
-			value={config.left.gripperName || ''}
-			onchange={(event: Event) => {
-				if (event.target instanceof HTMLSelectElement) {
-					updateConfig('left', 'gripperName', event.target.value || undefined)
-				}
-			}}
-		>
-			<option value="">None</option>
-			{#each leftAvailableGrippers as gripperName (gripperName)}
-				<option value={gripperName}>{gripperName}</option>
-			{/each}
-		</Select>
-	</label>
-
-	<label class="flex items-center justify-between gap-2">
-		Scale: {config.left.scaleFactor.toFixed(1)}
-		<input
-			class="w-20"
-			type="range"
-			min="0.1"
-			max="3.0"
-			step="0.1"
-			value={config.left.scaleFactor}
-			style="--value: {((config.left.scaleFactor - 0.1) / (3 - 0.1)) * 100}%"
-			oninput={(e) => updateConfig('left', 'scaleFactor', Number.parseFloat(e.currentTarget.value))}
-		/>
-	</label>
-
-	<label class="flex items-center justify-between gap-2">
-		Rotation
-		<Switch
-			on={config.left.rotationEnabled}
-			on:change={(event) => {
-				updateConfig('left', 'rotationEnabled', event.detail)
-			}}
-		/>
-	</label>
-
-	<!-- Right Controller -->
-	{@render SectionTitle('Right Controller')}
-
-	<label class="flex items-center justify-between gap-2">
-		Arm
-		<Select
-			value={config.right.armName || ''}
-			onchange={(event: Event) => {
-				if (event.target instanceof HTMLSelectElement) {
-					updateConfig('right', 'armName', event.target.value || undefined)
-				}
-			}}
-		>
-			<option value="">None</option>
-			{#each rightAvailableArms as armName (armName)}
-				<option value={armName}>{armName}</option>
-			{/each}
-		</Select>
-	</label>
-
-	<label class="flex items-center justify-between gap-2">
-		Gripper
-		<Select
-			value={config.right.gripperName || ''}
-			onchange={(event: Event) => {
-				if (event.target instanceof HTMLSelectElement) {
-					updateConfig('right', 'gripperName', event.target.value || undefined)
-				}
-			}}
-		>
-			<option value="">None</option>
-			{#each rightAvailableGrippers as gripperName (gripperName)}
-				<option value={gripperName}>{gripperName}</option>
-			{/each}
-		</Select>
-	</label>
-
-	<label class="flex items-center justify-between gap-2">
-		Scale: {config.right.scaleFactor.toFixed(1)}
-		<input
-			class="w-20"
-			type="range"
-			min="0.1"
-			max="3.0"
-			step="0.1"
-			value={config.right.scaleFactor}
-			style="--value: {((config.right.scaleFactor - 0.1) / (3 - 0.1)) * 100}%"
-			oninput={(e) =>
-				updateConfig('right', 'scaleFactor', Number.parseFloat(e.currentTarget.value))}
-		/>
-	</label>
-
-	<label class="flex items-center justify-between gap-2">
-		Rotation
-		<Switch
-			on={config.right.rotationEnabled}
-			on:change={(event) => {
-				updateConfig('right', 'rotationEnabled', event.detail)
-			}}
-		/>
-	</label>
-</div>
-
-<style>
-	input[type='range'] {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 100%;
-		background: linear-gradient(
-			to right,
-			#3d7d3f 0%,
-			#3d7d3f var(--value),
-			#d1d5db var(--value),
-			#d1d5db 100%
-		);
-		border-radius: 0.25rem;
-		height: 0.5rem;
-		cursor: pointer;
-		outline: none;
-	}
-
-	/* Webkit browsers (Chrome, Safari, Edge) */
-	input[type='range']::-webkit-slider-track {
-		background: transparent;
-		height: 0.5rem;
-		border-radius: 0.25rem;
-	}
-
-	input[type='range']::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		background: #3d7d3f;
-		height: 1.25rem;
-		width: 1.25rem;
-		border-radius: 50%;
-		border: 2px solid white;
-	}
-
-	/* Firefox */
-	input[type='range']::-moz-range-track {
-		background: transparent;
-		height: 0.5rem;
-		border-radius: 0.25rem;
-	}
-
-	input[type='range']::-moz-range-thumb {
-		background: #3d7d3f;
-		height: 1.25rem;
-		width: 1.25rem;
-		border-radius: 50%;
-		border: 2px solid white;
-	}
-
-	input[type='range']::-moz-range-progress {
-		background: #3d7d3f;
-		height: 0.5rem;
-		border-radius: 0.25rem;
-	}
-</style>

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

@@ -1,3 +0,0 @@
-declare const XRControllerSettings: import("svelte").Component<Record<string, never>, {}, "">;
-type XRControllerSettings = ReturnType<typeof XRControllerSettings>;
-export default XRControllerSettings;

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

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

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

@@ -1,9 +0,0 @@
-import type { Vector3Tuple } from 'three';
-interface Context {
-    position: Vector3Tuple;
-    rotation: number;
-    set: (pos?: Vector3Tuple, rot?: number) => void;
-}
-export declare const provideOrigin: () => void;
-export declare const useOrigin: () => Context;
-export {};

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

@@ -1,27 +0,0 @@
-import { getContext, setContext } from 'svelte';
-const key = Symbol('origin-context');
-export const provideOrigin = () => {
-    const position = $state([0, 0, 0]);
-    let rotation = $state(0);
-    setContext(key, {
-        get position() {
-            return position;
-        },
-        get rotation() {
-            return rotation;
-        },
-        set(pos, rot) {
-            if (pos) {
-                position[0] = pos[0];
-                position[1] = pos[1];
-                position[2] = pos[2];
-            }
-            if (rot !== undefined) {
-                rotation = rot;
-            }
-        },
-    });
-};
-export const useOrigin = () => {
-    return getContext(key);
-};