@viamrobotics/motion-tools 0.1.0

package/dist/components/Tree/useExpanded.svelte.js

@@ -0,0 +1,21 @@
+import { get, set } from 'idb-keyval';
+import { getContext, setContext } from 'svelte';
+import { SvelteSet } from 'svelte/reactivity';
+const key = Symbol('tree-item-expanded-context');
+export const provideTreeExpandedContext = () => {
+    const expanded = new SvelteSet();
+    get('tree-item-expanded').then((stored) => {
+        if (stored) {
+            for (const value of stored) {
+                expanded.add(value);
+            }
+        }
+    });
+    $effect(() => {
+        set('tree-item-expanded', [...expanded]);
+    });
+    setContext(key, expanded);
+};
+export const useExpanded = () => {
+    return getContext(key);
+};

package/dist/components/WorldObject.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { T, type Props as ThrelteProps } from '@threlte/core'
+	import type { Snippet } from 'svelte'
+	import type { Object3D } from 'three'
+	import type { WorldObject } from '../WorldObject'
+	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
+
+	interface Props extends ThrelteProps<Object3D> {
+		object: WorldObject
+		children?: Snippet
+	}
+
+	let { object, children, ...rest }: Props = $props()
+
+	const objectProps = useObjectEvents(() => object.uuid)
+</script>
+
+{#if object.metadata.gltf?.scene}
+	<T
+		is={object.metadata.gltf.scene}
+		name={object.name}
+		{...objectProps}
+		{...rest}
+	>
+		{@render children?.()}
+	</T>
+{/if}

package/dist/components/WorldObject.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Props as ThrelteProps } from '@threlte/core';
+import type { Snippet } from 'svelte';
+import type { Object3D } from 'three';
+import type { WorldObject } from '../WorldObject';
+interface Props extends ThrelteProps<Object3D> {
+    object: WorldObject;
+    children?: Snippet;
+}
+declare const WorldObject: import("svelte").Component<Props, {}, "">;
+type WorldObject = ReturnType<typeof WorldObject>;
+export default WorldObject;

package/dist/components/XR.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { useXR, XR } from '@threlte/xr'
+	import OriginMarker from './xr/OriginMarker.svelte'
+	import { useThrelte } from '@threlte/core'
+
+	const { renderer } = useThrelte()
+	const { isPresenting } = useXR()
+
+	$effect.pre(() => {
+		if ($isPresenting) {
+			const [left, right] = renderer.xr.getCamera().cameras
+
+			console.log(left, right)
+		}
+	})
+</script>
+
+<XR>
+	<OriginMarker />
+</XR>

package/dist/components/XR.svelte.d.ts

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

package/dist/components/models/README.md

@@ -0,0 +1,5 @@
+# Threlte Model Pipeline Components
+
+This directory holds automatically generated Threlte components from GLTF models.
+
+Place your models in `static/models` and run `npm run model-pipeline:run` to generate the components.

package/dist/components/null-states/Connection.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Connection;
+type Connection = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Connection: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/portal/Portal.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import { usePortalContext } from './usePortalContext.svelte'
+	import { SvelteSet } from 'svelte/reactivity'
+
+	interface Props {
+		id?: string
+		children?: Snippet
+	}
+
+	let { id = 'default', children }: Props = $props()
+
+	const portals = usePortalContext()
+
+	$effect.pre(() => {
+		if (!children) return
+
+		if (!portals.has(id)) {
+			portals.set(id, new SvelteSet())
+		}
+
+		portals.get(id)?.add(children)
+		return () => portals.get(id)?.delete(children)
+	})
+</script>

package/dist/components/portal/Portal.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id?: string;
+    children?: Snippet;
+}
+declare const Portal: import("svelte").Component<Props, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;

package/dist/components/portal/PortalTarget.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { usePortalContext } from './usePortalContext.svelte'
+
+	interface Props {
+		id?: string
+	}
+
+	let { id = 'default' }: Props = $props()
+
+	const portals = usePortalContext()
+	const childArray = $derived(portals.get(id))
+</script>
+
+{#if childArray}
+	{#each childArray as children (children)}
+		{@render children?.()}
+	{/each}
+{/if}

package/dist/components/portal/PortalTarget.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    id?: string;
+}
+declare const PortalTarget: import("svelte").Component<Props, {}, "">;
+type PortalTarget = ReturnType<typeof PortalTarget>;
+export default PortalTarget;

package/dist/components/portal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Portal } from './Portal.svelte';
+export { default as PortalTarget } from './PortalTarget.svelte';

package/dist/components/portal/index.js

@@ -0,0 +1,2 @@
+export { default as Portal } from './Portal.svelte';
+export { default as PortalTarget } from './PortalTarget.svelte';

package/dist/components/portal/usePortalContext.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+type PortalContext = SvelteMap<string, SvelteSet<Snippet>>;
+export declare const usePortalContext: () => PortalContext;
+export {};

package/dist/components/portal/usePortalContext.svelte.js

@@ -0,0 +1,8 @@
+import { useThrelteUserContext } from '@threlte/core';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+const createPortalContext = () => {
+    return new SvelteMap();
+};
+export const usePortalContext = () => {
+    return useThrelteUserContext('threlte-portals', createPortalContext());
+};

package/dist/components/xr/CameraFeed.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { T, useTask } from '@threlte/core'
+	import { createStreamClient } from '@viamrobotics/svelte-sdk'
+	import BentPlaneGeometry from '../BentPlaneGeometry.svelte'
+	import { useHeadset } from '@threlte/xr'
+	import { Euler, Group, Mesh, Vector3, Quaternion, VideoTexture } from 'three'
+	import { usePartID } from '../../hooks/usePartID.svelte'
+
+	interface CameraFeedProps {
+		resourceName: string
+	}
+
+	let { resourceName }: CameraFeedProps = $props()
+
+	const partID = usePartID()
+	const streamClient = createStreamClient(
+		() => partID.current,
+		() => resourceName
+	)
+
+	let video = document.createElement('video')
+	let aspect = $state(1)
+	let ready = $state(false)
+
+	video.addEventListener('canplaythrough', () => {
+		aspect = video.videoWidth / video.videoHeight
+		video.play()
+	})
+
+	$effect.pre(() => {
+		video.srcObject = streamClient.mediaStream
+		ready = true
+	})
+
+	const headset = useHeadset()
+
+	let group = new Group()
+	let mesh = new Mesh()
+	let euler = new Euler()
+	let quaternion = new Quaternion()
+	let direction = new Vector3()
+
+	const { start, stop } = useTask(
+		(delta) => {
+			group.position.lerp(headset.position, delta * 5)
+
+			headset.getWorldDirection(direction)
+			euler.set(0, Math.atan2(direction.x, direction.z), 0)
+			quaternion.setFromEuler(euler)
+			group.quaternion.slerp(quaternion, delta * 5)
+
+			mesh.lookAt(headset.position)
+		},
+		{ autoStart: false }
+	)
+
+	$effect(() => {
+		if (ready) {
+			start()
+		} else {
+			stop()
+		}
+	})
+
+	const texture = new VideoTexture(video)
+</script>
+
+{#if ready}
+	<T is={group}>
+		<T.Group>
+			<T
+				is={mesh}
+				position={[0, 0, -1.5]}
+				scale={0.7}
+			>
+				<BentPlaneGeometry args={[0.1, aspect, 1, 20, 20]} />
+				<T.MeshBasicMaterial map={texture} />
+			</T>
+		</T.Group>
+	</T>
+{/if}

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

@@ -0,0 +1,6 @@
+interface CameraFeedProps {
+    resourceName: string;
+}
+declare const CameraFeed: import("svelte").Component<CameraFeedProps, {}, "">;
+type CameraFeed = ReturnType<typeof CameraFeed>;
+export default CameraFeed;

package/dist/components/xr/Controllers.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { Controller } from '@threlte/xr'
+	import { useGamepad } from '@threlte/extras'
+
+	import { BaseClient } from '@viamrobotics/sdk'
+
+	import { RigidBody } from '@threlte/rapier'
+	import HandCollider from './HandCollider.svelte'
+	import { usePartID } from '../../hooks/usePartID.svelte'
+	import { useResourceNames, useRobotClient } from '@viamrobotics/svelte-sdk'
+
+	const gamepadLeft = useGamepad({ xr: true, hand: 'left' })
+
+	const partID = usePartID()
+	const resources = useResourceNames(() => partID.current)
+	const robotClient = useRobotClient(() => partID.current)
+	const resource = $derived(resources.current.find((r) => r.subtype === 'base'))
+	const baseClient = $derived(
+		robotClient.current && resource ? new BaseClient(robotClient.current, resource.name) : undefined
+	)
+
+	const linear = { x: 0, y: 0, z: 0 }
+	const angular = { x: 0, y: 0, z: 0 }
+
+	gamepadLeft.squeeze.on('change', (event) => {
+		linear.y = -event.value
+		baseClient?.setPower(linear, angular)
+	})
+
+	gamepadLeft.trigger.on('change', (event) => {
+		if (typeof event.value === 'number') {
+			linear.y = event.value
+			baseClient?.setPower(linear, angular)
+		}
+	})
+
+	gamepadLeft.thumbstick.on('change', (event) => {
+		if (typeof event.value === 'object') {
+			angular.z = event.value.x
+			baseClient?.setPower(linear, angular)
+		}
+	})
+
+	const onselectstart = () => {}
+
+	const onselectend = () => {}
+</script>
+
+<Controller
+	left
+	{onselectstart}
+	{onselectend}
+>
+	{#snippet grip()}
+		<RigidBody type="kinematicPosition">
+			<HandCollider />
+		</RigidBody>
+	{/snippet}
+</Controller>
+
+<Controller
+	right
+	{onselectstart}
+	{onselectend}
+>
+	{#snippet grip()}
+		<RigidBody type="kinematicPosition">
+			<HandCollider />
+		</RigidBody>
+	{/snippet}
+</Controller>

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

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

package/dist/components/xr/Draggable.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { T, useTask } from '@threlte/core'
+	import { useGamepad } from '@threlte/extras'
+	import { useController } from '@threlte/xr'
+	import { RigidBody as RigidBodyType } from '@dimforge/rapier3d-compat'
+	import type { Snippet } from 'svelte'
+	import { Group, Vector3 } from 'three'
+	import { AutoColliders, RigidBody } from '@threlte/rapier'
+
+	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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { useParent, useTask } from '@threlte/core'
+	import { Collider, useRigidBody } from '@threlte/rapier'
+	import type { Group } from 'three'
+
+	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]}
+/>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const HandCollider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type HandCollider = InstanceType<typeof HandCollider>;
+export default HandCollider;

package/dist/components/xr/Hands.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Hand } from '@threlte/xr'
+
+	console.log('hands')
+	const onpinchstart = () => {
+		console.log('start')
+	}
+
+	const onpinchend = () => {
+		console.log('end')
+	}
+</script>
+
+<Hand
+	left
+	{onpinchstart}
+	{onpinchend}
+></Hand>
+
+<Hand
+	right
+	{onpinchstart}
+	{onpinchend}
+></Hand>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Hands: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Hands = InstanceType<typeof Hands>;
+export default Hands;

package/dist/components/xr/OriginMarker.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { T, useTask } from '@threlte/core'
+	import { Grid, useGamepad } from '@threlte/extras'
+	import { Collider, RigidBody } from '@threlte/rapier'
+	import { RigidBody as RigidBodyType } from '@dimforge/rapier3d-compat'
+	import { useController } from '@threlte/xr'
+	import { Group, Mesh, Quaternion, Vector3 } from 'three'
+
+	const height = 0.1
+	const radius = 0.05
+
+	const group = new Group()
+	const mesh = new Mesh()
+
+	const vec3 = new Vector3()
+	const quaternion = new Quaternion()
+
+	const offset = new Vector3()
+	const position = new Vector3()
+
+	let hovering = $state(false)
+	let dragging = $state(false)
+	let rotating = $state(false)
+
+	let rigidBody: RigidBodyType | undefined = $state()
+
+	const left = useController('left')
+	const leftPad = useGamepad({ xr: true, hand: 'left' })
+
+	leftPad.trigger.on('down', () => {
+		dragging = true
+		mesh.getWorldPosition(vec3)
+		offset.copy($left!.grip.position).sub(vec3)
+	})
+	leftPad.trigger.on('up', () => (dragging = false))
+
+	leftPad.squeeze.on('down', () => {
+		rotating = true
+		mesh.getWorldQuaternion(quaternion)
+	})
+	leftPad.squeeze.on('up', () => (rotating = false))
+
+	const onsensorenter = () => (hovering = true)
+	const onsensorexit = () => (hovering = false)
+
+	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>
+
+{#if rotating}
+	<!-- TODO -->
+{/if}
+
+<T
+	is={group}
+	position={[0, 0.05, 0]}
+>
+	<RigidBody
+		bind:rigidBody
+		type="kinematicPosition"
+	>
+		<Collider
+			sensor
+			shape="cone"
+			args={[height / 2, radius]}
+			{onsensorenter}
+			{onsensorexit}
+		>
+			<T is={mesh}>
+				<T.ConeGeometry
+					args={[radius, height]}
+					oncreate={(ref) => {
+						ref.rotateX(-Math.PI / 2)
+						ref.translate(0, 0, height / 2)
+					}}
+				/>
+				<T.MeshStandardMaterial color={hovering ? 'hotpink' : 'red'} />
+
+				<Grid
+					plane="xy"
+					position.y={0.05}
+					fadeDistance={1}
+					cellSize={0.1}
+					cellColor="#fff"
+					sectionColor="#fff"
+				/>
+			</T>
+		</Collider>
+	</RigidBody>
+</T>

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

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