@viamrobotics/motion-tools 0.1.0

package/dist/components/SceneProviders.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { provideFrames } from '../hooks/useFrames.svelte'
+	import { provideGeometries } from '../hooks/useGeometries.svelte'
+	import { providePointclouds } from '../hooks/usePointclouds.svelte'
+	import { providePoses } from '../hooks/usePoses.svelte'
+	import { usePartID } from '../hooks/usePartID.svelte'
+	import { provideSelection } from '../hooks/useSelection.svelte'
+	import { provideStaticGeometries } from '../hooks/useStaticGeometries.svelte'
+	import { provideVisibility } from '../hooks/useVisibility.svelte'
+	import { provideShapes } from '../hooks/useShapes.svelte'
+	import { provideRefreshRates } from '../hooks/useRefreshRates.svelte'
+	import { provideTransformControls } from '../hooks/useControls.svelte'
+	import type { Snippet } from 'svelte'
+	import { provideObjects } from '../hooks/useObjects.svelte'
+	import { provideMotionClient } from '../hooks/useMotionClient.svelte'
+
+	interface Props {
+		children: Snippet<[{ focus: boolean }]>
+	}
+
+	let { children }: Props = $props()
+
+	const partID = usePartID()
+
+	provideTransformControls()
+	provideVisibility()
+	provideRefreshRates()
+
+	provideStaticGeometries()
+	provideShapes()
+	provideFrames(() => partID.current)
+	providePoses(() => partID.current)
+	provideGeometries(() => partID.current)
+	providePointclouds(() => partID.current)
+	provideMotionClient(() => partID.current)
+	provideObjects()
+
+	const { focus } = provideSelection()
+</script>
+
+{@render children({ focus: focus.current !== undefined })}

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet<[{
+        focus: boolean;
+    }]>;
+}
+declare const SceneProviders: import("svelte").Component<Props, {}, "">;
+type SceneProviders = ReturnType<typeof SceneProviders>;
+export default SceneProviders;

package/dist/components/Selected.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Box3, Object3D } from 'three'
+	import { T, useTask, useThrelte } from '@threlte/core'
+	import { useSelectedObject } from '../hooks/useSelection.svelte'
+	import { BoxHelper } from '../three/BoxHelper'
+
+	const { scene } = useThrelte()
+
+	const box = new BoxHelper(new Object3D(), 0x000000)
+	const selected = useSelectedObject()
+
+	const { start, stop } = useTask(() => box.update(), { autoStart: false })
+
+	const box3 = new Box3()
+
+	$effect.pre(() => {
+		if (selected.current) {
+			start()
+		} else {
+			stop()
+		}
+	})
+
+	$effect.pre(() => {
+		if (!selected.current) {
+			box.visible = false
+			return
+		}
+
+		box.visible = true
+
+		if (selected.current.metadata.batched) {
+			selected.current.metadata.getBoundingBoxAt?.(box3)
+			box.setFromBox3(box3)
+		} else {
+			const object3d = scene.getObjectByProperty('uuid', selected.current.uuid)
+			if (object3d) {
+				box.setFromObject(object3d)
+			}
+		}
+	})
+</script>
+
+<T is={box} />

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

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

package/dist/components/Shapes.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { Portal, PortalTarget } from './portal'
+	import { useShapes } from '../hooks/useShapes.svelte'
+	import WorldObject from './WorldObject.svelte'
+	import Frame from './Frame.svelte'
+
+	const shapes = useShapes()
+</script>
+
+<T
+	name={shapes.object3ds.batchedArrow.object3d.name}
+	is={shapes.object3ds.batchedArrow.object3d}
+	dispose={false}
+/>
+
+{#each shapes.meshes as object (object.uuid)}
+	<Portal id={object.referenceFrame}>
+		<Frame
+			uuid={object.uuid}
+			name={object.name}
+			pose={object.pose}
+			geometry={object.geometry}
+			metadata={object.metadata}
+		>
+			<PortalTarget id={object.name} />
+		</Frame>
+	</Portal>
+{/each}
+
+{#each shapes.nurbs as object (object.uuid)}
+	<Portal id={object.referenceFrame}>
+		<Frame
+			uuid={object.uuid}
+			name={object.name}
+			pose={object.pose}
+			geometry={object.geometry}
+			metadata={object.metadata}
+		>
+			<PortalTarget id={object.name} />
+		</Frame>
+	</Portal>
+{/each}
+
+{#each shapes.models as object (object.uuid)}
+	<WorldObject {object}>
+		<PortalTarget id={object.name} />
+	</WorldObject>
+{/each}

package/dist/components/Shapes.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 Shapes: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Shapes = InstanceType<typeof Shapes>;
+export default Shapes;

package/dist/components/StaticGeometries.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { TransformControls } from '@threlte/extras'
+	import { useSelected } from '../hooks/useSelection.svelte'
+	import { useStaticGeometries } from '../hooks/useStaticGeometries.svelte'
+	import { useTransformControls } from '../hooks/useControls.svelte'
+	import { Keybindings } from '../keybindings'
+	import { PersistedState } from 'runed'
+	import { quaternionToPose, scaleToDimensions, vector3ToPose } from '../transform'
+	import { Quaternion, Vector3 } from 'three'
+	import Frame from './Frame.svelte'
+
+	type Modes = 'translate' | 'rotate' | 'scale'
+
+	const transformControls = useTransformControls()
+	const geometries = useStaticGeometries()
+	const selected = useSelected()
+
+	let mode = new PersistedState<Modes>('transform-mode', 'translate')
+
+	const quaternion = new Quaternion()
+	const vector3 = new Vector3()
+</script>
+
+<svelte:window
+	onkeydown={(event) => {
+		if (event.metaKey || event.ctrlKey) {
+			return
+		}
+
+		const key = event.key.toLowerCase()
+
+		if (key === Keybindings.ADD_GEOMETRY) {
+			geometries.add()
+		} else if (key === Keybindings.REMOVE_GEOMETRY) {
+			geometries.remove(selected.current ?? '')
+		} else if (key === Keybindings.TRANSLATE) {
+			mode.current = 'translate'
+		} else if (key === Keybindings.ROTATE) {
+			mode.current = 'rotate'
+		} else if (key === Keybindings.SCALE) {
+			mode.current = 'scale'
+		}
+	}}
+/>
+
+{#each geometries.current as object (object.uuid)}
+	<Frame
+		uuid={object.uuid}
+		name={object.name}
+		pose={object.pose}
+		geometry={object.geometry}
+		metadata={object.metadata}
+	>
+		{#snippet children({ ref })}
+			{#if selected.current === ref.uuid}
+				{#key mode.current}
+					<TransformControls
+						object={ref}
+						mode={mode.current}
+						onmouseDown={() => transformControls.setActive(true)}
+						onmouseUp={() => {
+							transformControls.setActive(false)
+
+							if (mode.current === 'translate') {
+								vector3ToPose(ref.getWorldPosition(vector3), object.pose)
+							} else if (mode.current === 'rotate') {
+								quaternionToPose(ref.getWorldQuaternion(quaternion), object.pose)
+								ref.quaternion.copy(quaternion)
+							} else if (mode.current === 'scale' && object.geometry?.case === 'box') {
+								scaleToDimensions(ref.scale, object.geometry)
+								ref.scale.setScalar(1)
+							}
+						}}
+					/>
+				{/key}
+			{/if}
+		{/snippet}
+	</Frame>
+{/each}

package/dist/components/StaticGeometries.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 StaticGeometries: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type StaticGeometries = InstanceType<typeof StaticGeometries>;
+export default StaticGeometries;

package/dist/components/Tree/Settings.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { PersistedState } from 'runed'
+	import { Icon, Select } from '@viamrobotics/prime-core'
+	import RefreshRate from '../RefreshRate.svelte'
+	import { useMotionClient } from '../../hooks/useMotionClient.svelte'
+
+	const showSettings = new PersistedState('show-settings', false)
+
+	const motionClient = useMotionClient()
+</script>
+
+<button
+	class="border-medium w-full border-t p-2 text-left"
+	onclick={() => (showSettings.current = !showSettings.current)}
+>
+	<h3 class="text-default flex items-center gap-1.5">
+		<Icon
+			name={showSettings.current ? 'unfold-more-horizontal' : 'unfold-less-horizontal'}
+			label="unfold more icon"
+			variant="ghost"
+			cx="size-6"
+			on:click={() => (showSettings.current = !showSettings.current)}
+		/>
+		Settings
+	</h3>
+</button>
+
+{#if showSettings.current}
+	<div class="border-medium flex flex-col gap-2 border-t p-3">
+		<RefreshRate name="Frames">
+			<option value="0">Do not fetch</option>
+			<option value="1">Fetch on reconfigure</option>
+		</RefreshRate>
+		<RefreshRate name="Pointclouds" />
+		<RefreshRate name="Geometries" />
+		<RefreshRate name="Poses" />
+
+		<label class="flex flex-col gap-1">
+			Motion client
+			<Select
+				onchange={(event: InputEvent) => {
+					if (event.target instanceof HTMLSelectElement) {
+						motionClient.set(event.target.value)
+					}
+				}}
+				value={motionClient.current}
+			>
+				{#each motionClient.names as name (name)}
+					<option>{name}</option>
+				{/each}
+			</Select>
+		</label>
+	</div>
+{/if}

package/dist/components/Tree/Settings.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 Settings: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Settings = InstanceType<typeof Settings>;
+export default Settings;

package/dist/components/Tree/Tree.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	import * as tree from '@zag-js/tree-view'
+	import { useMachine, normalizeProps } from '@zag-js/svelte'
+	import { untrack } from 'svelte'
+	import { ChevronRight, Eye, EyeOff } from 'lucide-svelte'
+	import { useVisibility } from '../../hooks/useVisibility.svelte'
+	import type { TreeNode } from './buildTree'
+	import { useExpanded } from './useExpanded.svelte'
+	import { VirtualList } from 'svelte-virtuallists'
+	import { observe } from '@threlte/core'
+
+	const visibility = useVisibility()
+	const expanded = useExpanded()
+
+	interface Props {
+		rootNode: TreeNode
+		selections: string[]
+		onSelectionChange?: (event: tree.SelectionChangeDetails) => void
+	}
+
+	let { rootNode, selections, onSelectionChange }: Props = $props()
+
+	const collection = tree.collection<TreeNode>({
+		nodeToValue: (node) => node.id,
+		nodeToString: (node) => node.name,
+		rootNode,
+	})
+
+	const service = useMachine(tree.machine, {
+		collection,
+		onSelectionChange(details) {
+			onSelectionChange?.(details)
+		},
+		onExpandedChange(details) {
+			expanded.clear()
+			for (const value of details.expandedValue) {
+				expanded.add(value)
+			}
+		},
+	})
+
+	const api = $derived(tree.connect(service, normalizeProps))
+
+	observe(
+		() => [selections],
+		() => untrack(() => api.setSelectedValue(selections))
+	)
+
+	observe(
+		() => [expanded],
+		() => untrack(() => api.setExpandedValue([...expanded]))
+	)
+
+	const rootChildren = $derived(collection.rootNode.children ?? [])
+</script>
+
+{#snippet treeNode({
+	node,
+	indexPath,
+	api,
+}: {
+	node: TreeNode
+	indexPath: number[]
+	api: tree.Api
+})}
+	{@const nodeProps = { indexPath, node }}
+	{@const nodeState = api.getNodeState(nodeProps)}
+	{@const isVisible = visibility.get(node.id) ?? true}
+	{@const { selected } = nodeState}
+
+	{#if nodeState.isBranch}
+		{@const { expanded } = nodeState}
+		{@const { children = [] } = node}
+		<div
+			{...api.getBranchProps(nodeProps)}
+			class={{
+				'text-disabled': !isVisible,
+				'bg-medium': selected,
+				sticky: true,
+			}}
+		>
+			<div {...api.getBranchControlProps(nodeProps)}>
+				<span
+					{...api.getBranchIndicatorProps(nodeProps)}
+					class={{ 'rotate-90': expanded }}
+				>
+					<ChevronRight size={14} />
+				</span>
+				<span
+					class="flex items-center"
+					{...api.getBranchTextProps(nodeProps)}
+				>
+					{node.name}
+				</span>
+
+				<button
+					class="text-gray-6"
+					onclick={(event) => {
+						event.stopPropagation()
+						visibility.set(node.id, !isVisible)
+					}}
+				>
+					{#if isVisible}
+						<Eye size={14} />
+					{:else}
+						<EyeOff size={14} />
+					{/if}
+				</button>
+			</div>
+			<div {...api.getBranchContentProps(nodeProps)}>
+				<div {...api.getBranchIndentGuideProps(nodeProps)}></div>
+
+				{#each children as node, index (node.id)}
+					{@render treeNode({ node, indexPath: [...indexPath, index], api })}
+				{/each}
+			</div>
+		</div>
+	{:else}
+		<div
+			class={{ 'flex justify-between': true, 'text-disabled': !isVisible, 'bg-medium': selected }}
+			{...api.getItemProps(nodeProps)}
+		>
+			<span class="flex items-center gap-1.5">
+				{node.name}
+			</span>
+
+			<button
+				class="text-gray-6"
+				onclick={(event) => {
+					event.stopPropagation()
+					visibility.set(node.id, !isVisible)
+				}}
+			>
+				{#if isVisible}
+					<Eye size={14} />
+				{:else}
+					<EyeOff size={14} />
+				{/if}
+			</button>
+		</div>
+	{/if}
+{/snippet}
+
+<div class="root-node">
+	<div {...api.getRootProps() as object}>
+		<div class="border-medium border-b p-2">
+			<h3 {...api.getLabelProps() as object}>{rootNode.name}</h3>
+		</div>
+
+		<div
+			{...api.getTreeProps()}
+			class="w-[240px]"
+		>
+			{#if rootChildren.length === 0}
+				<p class="text-subtle-2 px-2 py-4">No objects displayed</p>
+			{:else}
+				<VirtualList
+					class="w-full"
+					style="height:{Math.min(8, Math.max(rootChildren.length, 5)) * 32}px;"
+					items={rootChildren}
+				>
+					{#snippet vl_slot({ index, item })}
+						{@render treeNode({ node: item, indexPath: [Number(index)], api })}
+					{/snippet}
+				</VirtualList>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<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/Tree/Tree.svelte.d.ts

@@ -0,0 +1,10 @@
+import * as tree from '@zag-js/tree-view';
+import type { TreeNode } from './buildTree';
+interface Props {
+    rootNode: TreeNode;
+    selections: string[];
+    onSelectionChange?: (event: tree.SelectionChangeDetails) => void;
+}
+declare const Tree: import("svelte").Component<Props, {}, "">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;

package/dist/components/Tree/TreeContainer.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { PersistedState } from 'runed'
+	import Tree from './Tree.svelte'
+	import { fly } from 'svelte/transition'
+	import { Keybindings } from '../../keybindings'
+	import { ListTree } from 'lucide-svelte'
+	import { buildTreeNodes, type TreeNode } from './buildTree'
+	import { useSelected } from '../../hooks/useSelection.svelte'
+	import { provideTreeExpandedContext } from './useExpanded.svelte'
+	import { isEqual } from 'lodash-es'
+	import { useObjects } from '../../hooks/useObjects.svelte'
+	import Settings from './Settings.svelte'
+
+	const showTreeview = new PersistedState('show-treeview', true)
+
+	provideTreeExpandedContext()
+
+	const selected = useSelected()
+	const objects = useObjects()
+
+	let rootNode = $state<TreeNode>({
+		id: 'world',
+		name: 'World',
+		children: [],
+		href: '/',
+	})
+
+	const nodes = $derived(buildTreeNodes(objects.current))
+
+	$effect.pre(() => {
+		if (!isEqual(rootNode.children, nodes)) {
+			rootNode.children = nodes
+		}
+	})
+</script>
+
+<svelte:window
+	onkeydown={({ key }) => {
+		if (key === Keybindings.TREEVIEW) {
+			showTreeview.current = !showTreeview.current
+		}
+	}}
+/>
+
+<button
+	class="fixed top-2 left-2 p-2"
+	onclick={() => (showTreeview.current = !showTreeview.current)}
+>
+	<ListTree />
+</button>
+
+{#if showTreeview.current}
+	<div
+		class="bg-extralight border-medium fixed top-0 left-0 m-2 overflow-y-auto border text-xs"
+		in:fly={{ duration: 250, x: -100 }}
+		out:fly={{ duration: 250, x: -100 }}
+	>
+		{#key rootNode}
+			<Tree
+				{rootNode}
+				selections={selected.current ? [selected.current] : []}
+				onSelectionChange={(event) => {
+					selected.set(event.selectedValue[0])
+				}}
+			/>
+		{/key}
+
+		<Settings />
+	</div>
+{/if}

package/dist/components/Tree/TreeContainer.svelte.d.ts

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

package/dist/components/Tree/buildTree.d.ts

@@ -0,0 +1,11 @@
+import type { WorldObject } from '../../WorldObject';
+export interface TreeNode {
+    id: string;
+    name: string;
+    children?: TreeNode[];
+    href: string;
+}
+/**
+ * Creates a tree representing parent child / relationships from a set of frames.
+ */
+export declare const buildTreeNodes: (objects: WorldObject[]) => TreeNode[];

package/dist/components/Tree/buildTree.js

@@ -0,0 +1,29 @@
+/**
+ * Creates a tree representing parent child / relationships from a set of frames.
+ */
+export const buildTreeNodes = (objects) => {
+    const nodeMap = new Map();
+    const rootNodes = [];
+    for (const object of objects) {
+        const node = {
+            name: object.name,
+            id: object.uuid,
+            children: [],
+            href: `/selection/${object.name}`,
+        };
+        nodeMap.set(object.name, node);
+        if (object.referenceFrame === 'world') {
+            rootNodes.push(node);
+        }
+    }
+    for (const object of objects) {
+        if (object.referenceFrame !== 'world') {
+            const parentNode = nodeMap.get(object.referenceFrame);
+            const child = nodeMap.get(object.name);
+            if (parentNode && child) {
+                parentNode.children?.push(child);
+            }
+        }
+    }
+    return rootNodes;
+};

package/dist/components/Tree/useExpanded.svelte.d.ts

@@ -0,0 +1,5 @@
+import { SvelteSet } from 'svelte/reactivity';
+type Context = SvelteSet<string>;
+export declare const provideTreeExpandedContext: () => void;
+export declare const useExpanded: () => Context;
+export {};