@viamrobotics/motion-tools 1.0.2 → 1.1.0

package/dist/components/App.svelte

@@ -13,7 +13,7 @@
 	import Dashboard from './dashboard/Dashboard.svelte'
 	import { domPortal } from '../portal'
 	import { provideSettings } from '../hooks/useSettings.svelte'
-	import FileDrop from './FileDrop.svelte'
+	import FileDrop from './FileDrop/FileDrop.svelte'
 	import { provideWeblabs } from '../hooks/useWeblabs.svelte'
 	import { providePartConfig } from '../hooks/usePartConfig.svelte'
 	import { useViamClient } from '@viamrobotics/svelte-sdk'

package/dist/components/Entities.svelte

@@ -13,6 +13,7 @@
 	const points = useQuery(traits.PointsGeometry)
 	const lines = useQuery(traits.LineGeometry)
 	const gltfs = useQuery(traits.GLTF)
+	const droppedMeshes = useQuery(traits.DroppedFile, traits.BufferGeometry)
 	const drawnMeshes = useQuery(
 		traits.DrawAPI,
 		Or(traits.Box, traits.Capsule, traits.Sphere, traits.BufferGeometry, traits.ReferenceFrame)
@@ -35,6 +36,12 @@
 	</Frame>
 {/each}
 
+{#each droppedMeshes.current as entity (entity)}
+	<Frame {entity}>
+		<Label text={entity.get(traits.Name)} />
+	</Frame>
+{/each}
+
 {#each points.current as entity (entity)}
 	<Pointcloud {entity}>
 		<Label text={entity.get(traits.Name)} />

package/dist/components/FileDrop/FileDrop.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements'
+	import { useToast, ToastVariant } from '@viamrobotics/prime-core'
+	import { useFileDrop } from './useFileDrop.svelte'
+	import { useWorld } from '../../ecs/useWorld'
+	import type { FileDropperSuccess } from './file-dropper'
+	import { traits } from '../../ecs'
+	import { parseMetadata } from '../../WorldObject.svelte'
+	import type { Snapshot } from '../../draw/v1/snapshot_pb'
+
+	const props: HTMLAttributes<HTMLDivElement> = $props()
+
+	const world = useWorld()
+	const toast = useToast()
+
+	const addSnapshotToWorld = (snapshot: Snapshot) => {
+		for (const transform of snapshot.transforms) {
+			const entity = world.spawn(
+				traits.Name(transform.referenceFrame),
+				traits.Pose(transform.poseInObserverFrame?.pose),
+				traits.Parent(transform.poseInObserverFrame?.referenceFrame)
+			)
+
+			if (transform.physicalObject) {
+				entity.add(traits.Geometry(transform.physicalObject))
+			}
+
+			if (transform.metadata) {
+				const metadata = parseMetadata(transform.metadata.fields)
+				if (metadata.color) {
+					entity.add(traits.Color(metadata.color))
+				}
+			}
+		}
+
+		for (const drawing of snapshot.drawings) {
+			world.spawn(
+				traits.Name(drawing.referenceFrame),
+				traits.Pose(drawing.poseInObserverFrame?.pose),
+				traits.Parent(drawing.poseInObserverFrame?.referenceFrame)
+				// TODO: Add shape
+			)
+
+			if (drawing.metadata) {
+				// add shape colors
+			}
+		}
+	}
+
+	const fileDrop = useFileDrop(
+		(result: FileDropperSuccess) => {
+			switch (result.type) {
+				case 'snapshot': {
+					addSnapshotToWorld(result.snapshot)
+					break
+				}
+				case 'pcd':
+					world.spawn(
+						traits.Name(result.name),
+						traits.PointsGeometry(result.pcd.positions),
+						result.pcd.colors ? traits.VertexColors(result.pcd.colors) : traits.Color,
+						traits.DroppedFile
+					)
+					break
+				case 'ply':
+					world.spawn(
+						traits.Name(result.name),
+						traits.BufferGeometry(result.ply),
+						traits.DroppedFile
+					)
+					break
+			}
+
+			toast({ message: `${result.name} loaded.`, variant: ToastVariant.Success })
+		},
+		(message) => toast({ message, variant: ToastVariant.Danger })
+	)
+</script>
+
+<svelte:window
+	ondragenter={fileDrop.ondragenter}
+	ondragleave={fileDrop.ondragleave}
+	ondragover={fileDrop.ondragover}
+/>
+
+<div
+	class={{
+		'fixed inset-0 z-9999': true,
+		'pointer-events-none': fileDrop.dropState === 'inactive',
+		'bg-black/10': fileDrop.dropState !== 'inactive',
+	}}
+	role="region"
+	aria-label="File drop zone"
+	ondrop={fileDrop.ondrop}
+	{...props}
+></div>

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

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const FileDrop: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+type FileDrop = ReturnType<typeof FileDrop>;
+export default FileDrop;

package/dist/components/FileDrop/file-dropper.d.ts

@@ -0,0 +1,36 @@
+import type { Snapshot } from '../../draw/v1/snapshot_pb';
+import type { SuccessMessage } from '../../loaders/pcd/worker';
+import type { BufferGeometry } from 'three';
+interface FileDropSuccess {
+    success: true;
+    name: string;
+}
+export interface SnapshotFileDropSuccess extends FileDropSuccess {
+    type: 'snapshot';
+    snapshot: Snapshot;
+}
+export interface PointcloudFileDropSuccess extends FileDropSuccess {
+    type: 'pcd';
+    pcd: SuccessMessage;
+}
+export interface PlyFileDropSuccess extends FileDropSuccess {
+    type: 'ply';
+    ply: BufferGeometry;
+}
+export declare class FileDropperError extends Error {
+    constructor(message: string, options?: ErrorOptions);
+}
+export type FileDropperSuccess = SnapshotFileDropSuccess | PointcloudFileDropSuccess | PlyFileDropSuccess;
+export interface FileDropperFailure {
+    success: false;
+    error: FileDropperError;
+}
+export type FileDropperResult = FileDropperSuccess | FileDropperFailure;
+export type FileDropperParams = {
+    name: string;
+    extension: string;
+    prefix: string | undefined;
+    content: string | ArrayBuffer | null | undefined;
+};
+export type FileDropper = (params: FileDropperParams) => Promise<FileDropperResult>;
+export {};

package/dist/components/FileDrop/file-dropper.js

@@ -0,0 +1,6 @@
+export class FileDropperError extends Error {
+    constructor(message, options) {
+        super(message, options);
+        this.name = 'FileDropperError';
+    }
+}

package/dist/components/FileDrop/file-names.d.ts

@@ -0,0 +1,27 @@
+import type { ValueOf } from 'type-fest';
+export declare const Extensions: {
+    readonly JSON: "json";
+    readonly PCD: "pcd";
+    readonly PLY: "ply";
+    readonly PB: "pb";
+    readonly PB_GZ: "pb.gz";
+};
+export declare const Prefixes: {
+    readonly Snapshot: "snapshot";
+};
+declare class FileNameError extends Error {
+    constructor(message: string, options?: ErrorOptions);
+}
+interface ParseFileSuccess {
+    success: true;
+    extension: ValueOf<typeof Extensions>;
+    prefix: ValueOf<typeof Prefixes> | undefined;
+}
+interface ParseFileError {
+    success: false;
+    error: FileNameError;
+}
+type ParseFileResult = ParseFileSuccess | ParseFileError;
+export declare const parseFileName: (filename: string) => ParseFileResult;
+export declare const readFile: (file: File, reader: FileReader, extension: ValueOf<typeof Extensions> | undefined) => void;
+export {};

package/dist/components/FileDrop/file-names.js

@@ -0,0 +1,85 @@
+export const Extensions = {
+    JSON: 'json',
+    PCD: 'pcd',
+    PLY: 'ply',
+    PB: 'pb',
+    PB_GZ: 'pb.gz',
+};
+export const Prefixes = {
+    Snapshot: 'snapshot',
+};
+class FileNameError extends Error {
+    constructor(message, options) {
+        super(message, options);
+        this.name = 'FileNameError';
+    }
+}
+const isExtension = (extension) => {
+    return Object.values(Extensions).includes(extension);
+};
+const isPrefix = (prefix) => {
+    if (!prefix)
+        return false;
+    return Object.values(Prefixes).includes(prefix);
+};
+const validatePrefix = (extension, prefix) => {
+    switch (prefix) {
+        case Prefixes.Snapshot:
+            if (extension !== Extensions.JSON &&
+                extension !== Extensions.PB &&
+                extension !== Extensions.PB_GZ) {
+                return new FileNameError(`Only ${Extensions.JSON}, ${Extensions.PB} and ${Extensions.PB_GZ} snapshot files are supported.`);
+            }
+            break;
+    }
+    return undefined;
+};
+export const parseFileName = (filename) => {
+    const [name, ...extensions] = filename.split('.');
+    const suffix = extensions.at(-1);
+    if (!suffix) {
+        return {
+            success: false,
+            error: new FileNameError('Could not determine file extension.'),
+        };
+    }
+    const nested = extensions.at(-2);
+    let extension = suffix;
+    if (nested) {
+        const nestedExtension = `${nested}.${suffix}`;
+        if (isExtension(nestedExtension)) {
+            extension = nestedExtension;
+        }
+    }
+    if (!isExtension(extension)) {
+        return {
+            success: false,
+            error: new FileNameError(`Only ${Object.values(Extensions).join(', ')} files are supported.`),
+        };
+    }
+    const prefix = name.split('_').at(0);
+    if (isPrefix(prefix)) {
+        const error = validatePrefix(extension, prefix);
+        if (error) {
+            return {
+                success: false,
+                error,
+            };
+        }
+        return { success: true, extension, prefix };
+    }
+    return { success: true, extension, prefix: undefined };
+};
+export const readFile = (file, reader, extension) => {
+    if (!extension)
+        return;
+    switch (extension) {
+        case Extensions.JSON:
+            return reader.readAsText(file);
+        case Extensions.PCD:
+        case Extensions.PLY:
+        case Extensions.PB:
+        case Extensions.PB_GZ:
+            return reader.readAsArrayBuffer(file);
+    }
+};

package/dist/components/FileDrop/pcd-dropper.d.ts

@@ -0,0 +1,2 @@
+import { type FileDropper } from './file-dropper';
+export declare const pcdDropper: FileDropper;

package/dist/components/FileDrop/pcd-dropper.js

@@ -0,0 +1,27 @@
+import { isArrayBuffer } from 'lodash-es';
+import { FileDropperError } from './file-dropper';
+import { parsePcdInWorker } from '../../loaders/pcd';
+export const pcdDropper = async (params) => {
+    const { name, content } = params;
+    if (!isArrayBuffer(content)) {
+        return {
+            success: false,
+            error: new FileDropperError(`${name} failed to load.`),
+        };
+    }
+    try {
+        const result = await parsePcdInWorker(new Uint8Array(content));
+        return {
+            success: true,
+            name,
+            type: 'pcd',
+            pcd: result,
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            error: new FileDropperError(`${name} failed to parse.`, { cause: error }),
+        };
+    }
+};

package/dist/components/FileDrop/ply-dropper.d.ts

@@ -0,0 +1,2 @@
+import { type FileDropper } from './file-dropper';
+export declare const plyDropper: FileDropper;

package/dist/components/FileDrop/ply-dropper.js

@@ -0,0 +1,27 @@
+import { isArrayBuffer } from 'lodash-es';
+import { FileDropperError } from './file-dropper';
+import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader.js';
+export const plyDropper = async (params) => {
+    const { name, content } = params;
+    if (!isArrayBuffer(content)) {
+        return {
+            success: false,
+            error: new FileDropperError(`${name} failed to load.`),
+        };
+    }
+    try {
+        const geometry = new PLYLoader().parse(new TextDecoder().decode(content));
+        return {
+            success: true,
+            name,
+            type: 'ply',
+            ply: geometry,
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            error: new FileDropperError(`${name} failed to parse.`, { cause: error }),
+        };
+    }
+};

package/dist/components/FileDrop/snapshot-dropper.d.ts

@@ -0,0 +1,2 @@
+import { type FileDropper } from './file-dropper';
+export declare const snapshotDropper: FileDropper;

package/dist/components/FileDrop/snapshot-dropper.js

@@ -0,0 +1,96 @@
+import { Snapshot } from '../../draw/v1/snapshot_pb';
+import { isArrayBuffer, isString } from 'lodash-es';
+import { FileDropperError, } from './file-dropper';
+import { Extensions } from './file-names';
+const decodeJson = (params) => {
+    const { name, content } = params;
+    if (!isString(content)) {
+        return {
+            success: false,
+            error: new FileDropperError(`${name} failed to load.`),
+        };
+    }
+    try {
+        const snapshot = Snapshot.fromJsonString(content);
+        return {
+            success: true,
+            name,
+            type: 'snapshot',
+            snapshot,
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            error: new FileDropperError(`${name} failed to parse.`, { cause: error }),
+        };
+    }
+};
+const decodeBinary = (params) => {
+    const { name, content } = params;
+    if (!isArrayBuffer(content)) {
+        return {
+            success: false,
+            error: new FileDropperError(`${name} failed to load.`),
+        };
+    }
+    try {
+        const snapshot = Snapshot.fromBinary(new Uint8Array(content));
+        return {
+            success: true,
+            name,
+            type: 'snapshot',
+            snapshot,
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            error: new FileDropperError(`${name} failed to parse.`, { cause: error }),
+        };
+    }
+};
+const decodeGzip = async (params) => {
+    const { name, content } = params;
+    if (!isArrayBuffer(content)) {
+        return {
+            success: false,
+            error: new FileDropperError(`${name} failed to load.`),
+        };
+    }
+    try {
+        const decompressor = new DecompressionStream('gzip');
+        const blob = new Blob([content]);
+        const stream = blob.stream().pipeThrough(decompressor);
+        const response = await new Response(stream).blob();
+        const buffer = await response.arrayBuffer();
+        const snapshot = Snapshot.fromBinary(new Uint8Array(buffer));
+        return {
+            success: true,
+            name,
+            type: 'snapshot',
+            snapshot,
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            error: new FileDropperError(`${name} failed to parse.`, { cause: error }),
+        };
+    }
+};
+export const snapshotDropper = async (params) => {
+    switch (params.extension) {
+        case 'json':
+            return decodeJson(params);
+        case 'pb':
+            return decodeBinary(params);
+        case 'pb.gz':
+            return decodeGzip(params);
+        default:
+            return {
+                success: false,
+                error: new FileDropperError(`Only ${Extensions.JSON}, ${Extensions.PB} and ${Extensions.PB_GZ} snapshot files are supported.`),
+            };
+    }
+};

package/dist/components/FileDrop/useFileDrop.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { FileDropperSuccess } from './file-dropper';
+export type DropStates = 'inactive' | 'hovering' | 'loading';
+export declare const useFileDrop: (onSuccess: (result: FileDropperSuccess) => void, onError: (message: string) => void) => {
+    readonly dropState: DropStates;
+    ondrop: (event: DragEvent) => void;
+    ondragenter: (event: DragEvent) => void;
+    ondragover: (event: DragEvent) => void;
+    ondragleave: (event: DragEvent) => void;
+};

package/dist/components/FileDrop/useFileDrop.svelte.js

@@ -0,0 +1,97 @@
+import { Extensions, parseFileName, Prefixes, readFile } from './file-names';
+import { pcdDropper } from './pcd-dropper';
+import { plyDropper } from './ply-dropper';
+import { snapshotDropper } from './snapshot-dropper';
+const createFileDropper = (extension, prefix) => {
+    switch (prefix) {
+        case Prefixes.Snapshot:
+            return snapshotDropper;
+    }
+    switch (extension) {
+        case Extensions.PCD:
+            return pcdDropper;
+        case Extensions.PLY:
+            return plyDropper;
+    }
+    return undefined;
+};
+export const useFileDrop = (onSuccess, onError) => {
+    let dropState = $state('inactive');
+    // prevent default to allow drop
+    const ondragenter = (event) => {
+        event.preventDefault();
+        dropState = 'hovering';
+    };
+    // prevent default to allow drop
+    const ondragover = (event) => {
+        event.preventDefault();
+    };
+    const ondragleave = (event) => {
+        // only deactivate if really leaving the window
+        if (event.relatedTarget === null) {
+            dropState = 'inactive';
+        }
+    };
+    const handleError = (error) => {
+        onError(error);
+        dropState = 'inactive';
+    };
+    const ondrop = (event) => {
+        event.preventDefault();
+        if (event.dataTransfer === null)
+            return;
+        const { files } = event.dataTransfer;
+        let completed = 0;
+        for (const file of files) {
+            const fileName = parseFileName(file.name);
+            if (!fileName.success) {
+                handleError(fileName.error.message);
+                continue;
+            }
+            const { extension, prefix } = fileName;
+            const reader = new FileReader();
+            reader.addEventListener('loadend', () => {
+                completed += 1;
+                if (completed === files.length) {
+                    dropState = 'inactive';
+                }
+            });
+            reader.addEventListener('error', (event) => {
+                const error = event.target?.error?.message;
+                console.error(`${file.name} failed to load.`, error);
+                handleError(`${file.name} failed to load.`);
+            });
+            reader.addEventListener('load', async (event) => {
+                const content = event.target?.result;
+                const dropper = createFileDropper(extension, prefix);
+                if (!dropper) {
+                    handleError(`${file.name} is not a supported file type.`);
+                    return;
+                }
+                const result = await dropper({
+                    name: file.name,
+                    extension,
+                    prefix,
+                    content,
+                });
+                if (!result.success) {
+                    handleError(result.error.message);
+                }
+                else {
+                    onSuccess(result);
+                }
+            });
+            readFile(file, reader, extension);
+            dropState = 'loading';
+        }
+    };
+    return {
+        get dropState() {
+            return dropState;
+        },
+        ondrop,
+        ondragenter,
+        ondragover,
+        ondragleave,
+    };
+};

package/dist/components/GLTF.svelte

@@ -20,8 +20,8 @@
 	const objectProps = useObjectEvents(() => entity)
 </script>
 
-{#if gltf.current?.scene}
-	<Portal id={parent.current}>
+<Portal id={parent.current}>
+	{#if gltf.current?.scene}
 		<T
 			is={gltf.current.scene as Object3D}
 			name={name.current}
@@ -32,5 +32,5 @@
 
 			<PortalTarget id={name.current} />
 		</T>
-	</Portal>
-{/if}
+	{/if}
+</Portal>

package/dist/components/Geometry2.svelte

@@ -48,7 +48,6 @@
 	const sphere = useTrait(() => entity, traits.Sphere)
 	const bufferGeometry = useTrait(() => entity, traits.BufferGeometry)
 	const lineGeometry = useTrait(() => entity, traits.LineGeometry)
-	const pointsGeometry = useTrait(() => entity, traits.PointsGeometry)
 	const center = useTrait(() => entity, traits.Center)
 
 	const geometryType = $derived.by(() => {
@@ -57,7 +56,6 @@
 		if (sphere.current) return 'sphere'
 		if (bufferGeometry.current) return 'buffer'
 		if (lineGeometry.current) return 'line'
-		if (pointsGeometry.current) return 'points'
 	})
 
 	const color = $derived.by(() => {
@@ -80,7 +78,7 @@
 
 		const result = new Mesh()
 
-		if (geometryType === 'buffer' || geometryType === 'points' || geometryType === 'line') {
+		if (geometryType === 'line') {
 			result.raycast = meshBounds
 		}
 
@@ -108,6 +106,18 @@
 	const oncreate = (ref: BufferGeometry) => {
 		geo = ref
 	}
+
+	$effect.pre(() => {
+		if (mesh && bufferGeometry.current) {
+			mesh.geometry = bufferGeometry.current
+			oncreate(bufferGeometry.current)
+
+			return () => {
+				geo = undefined
+				mesh.geometry.dispose()
+			}
+		}
+	})
 </script>
 
 <Portal id={parent.current}>
@@ -124,19 +134,14 @@
 			<T
 				is={mesh}
 				name={name.current}
-				bvh={{ enabled: bufferGeometry.current !== undefined }}
+				bvh={{ enabled: geometryType === 'buffer' }}
 			>
 				{#if model && renderMode.includes('model')}
 					<T is={model} />
 				{/if}
 
 				{#if !model || renderMode.includes('colliders')}
-					{#if bufferGeometry.current}
-						<T
-							is={bufferGeometry.current}
-							{oncreate}
-						/>
-					{:else if lineGeometry.current}
+					{#if lineGeometry.current}
 						<MeshLineGeometry points={lineGeometry.current} />
 					{:else if box.current}
 						{@const { x, y, z } = box.current ?? { x: 0, y: 0, z: 0 }}

package/dist/components/Line.svelte

@@ -22,7 +22,11 @@
 <Frame {entity} />
 
 {#if dotColor.current && points.current}
-	<InstancedMesh frustumCulled={false}>
+	<InstancedMesh
+		frustumCulled={false}
+		bvh={{ enabled: false }}
+		raycast={() => null}
+	>
 		<T.SphereGeometry />
 		<T.MeshBasicMaterial color={[dotColor.current.r, dotColor.current.g, dotColor.current.b]} />
 

package/dist/components/Tree/Tree.svelte

@@ -1,27 +1,26 @@
 <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'
 	import { Icon } from '@viamrobotics/prime-core'
 	import { traits } from '../../ecs'
+	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
+	import { SvelteSet } from 'svelte/reactivity'
 
+	const selected = useSelectedEntity()
 	const visibility = useVisibility()
-	const expanded = useExpanded()
 
 	interface Props {
 		rootNode: TreeNode
-		selections: string[]
+		nodeMap: Record<string, TreeNode | undefined>
 		dragElement?: HTMLElement
 		onSelectionChange?: (event: tree.SelectionChangeDetails) => void
 	}
 
-	let { rootNode, selections, onSelectionChange, dragElement = $bindable() }: Props = $props()
+	let { rootNode, nodeMap, onSelectionChange, dragElement = $bindable() }: Props = $props()
 
 	const collection = $derived(
 		tree.collection<TreeNode>({
@@ -31,39 +30,47 @@
 		})
 	)
 
+	const selectedValue = $derived(selected.current ? [`${selected.current}`] : [])
+	const expandedValues = new SvelteSet<string>()
+
+	$effect(() => {
+		let name = selected.current?.get(traits.Name)
+		let node = nodeMap[name ?? '']
+		while (node) {
+			expandedValues.add(`${node.entity}`)
+			node = node.parent
+		}
+	})
+
 	const id = $props.id()
-	const service = useMachine(tree.machine, {
+	const service = useMachine(tree.machine, () => ({
 		id,
-		get collection() {
-			return collection
-		},
+		collection,
+		selectedValue,
+		expandedValue: [...expandedValues],
 		onSelectionChange(details) {
 			onSelectionChange?.(details)
 		},
 		onExpandedChange(details) {
-			expanded.clear()
+			expandedValues.clear()
 			for (const value of details.expandedValue) {
-				expanded.add(value)
+				expandedValues.add(value)
 			}
 		},
-	})
+	}))
 
 	const api = $derived(tree.connect(service, normalizeProps))
+	const rootChildren = $derived(collection.rootNode.children ?? [])
 
-	observe(
-		() => [selections],
-		() =>
-			untrack(() => {
-				api.setSelectedValue(selections)
-			})
-	)
-
-	observe(
-		() => [expanded],
-		() => untrack(() => api.setExpandedValue([...expanded]))
-	)
+	$effect(() => {
+		const element = document.querySelector(
+			`[data-scope="tree-view"][data-value="${selected.current}"]`
+		)
 
-	const rootChildren = $derived(collection.rootNode.children ?? [])
+		requestAnimationFrame(() => {
+			element?.scrollIntoView({ block: 'nearest' })
+		})
+	})
 </script>
 
 {#snippet treeNode({

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

@@ -2,7 +2,7 @@ import * as tree from '@zag-js/tree-view';
 import type { TreeNode } from './buildTree';
 interface Props {
     rootNode: TreeNode;
-    selections: string[];
+    nodeMap: Record<string, TreeNode | undefined>;
     dragElement?: HTMLElement;
     onSelectionChange?: (event: tree.SelectionChangeDetails) => void;
 }

package/dist/components/Tree/TreeContainer.svelte

@@ -35,14 +35,17 @@
 
 	const worldEntity = world.spawn(IsExcluded, traits.Name('World'))
 
-	let children = $state<TreeNode[]>([])
+	let children = $state.raw<TreeNode[]>([])
+	let nodeMap = $state.raw<Record<string, TreeNode | undefined>>({})
 
 	let pending = false
 	const flush = () => {
 		if (pending) return
 		pending = true
 		window.setTimeout(() => {
-			children = buildTreeNodes(world.query(traits.Name))
+			const results = buildTreeNodes(world.query(traits.Name))
+			children = results.rootNodes
+			nodeMap = results.nodeMap
 			pending = false
 		})
 	}
@@ -86,8 +89,8 @@
 	>
 		<Tree
 			{rootNode}
+			{nodeMap}
 			bind:dragElement
-			selections={selectedEntity.current ? [`${selectedEntity.current}`] : []}
 			onSelectionChange={(event) => {
 				const value = event.selectedValue[0]
 

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

@@ -1,9 +1,13 @@
 import type { Entity, QueryResult, Trait } from 'koota';
 export interface TreeNode {
     entity: Entity;
+    parent?: TreeNode;
     children?: TreeNode[];
 }
 /**
  * Creates a tree representing parent child / relationships from a set of frames.
  */
-export declare const buildTreeNodes: (entities: QueryResult<[Trait]>) => TreeNode[];
+export declare const buildTreeNodes: (entities: QueryResult<[Trait]>) => {
+    rootNodes: TreeNode[];
+    nodeMap: Record<string, TreeNode | undefined>;
+};

package/dist/components/Tree/buildTree.js

@@ -3,14 +3,14 @@ import { traits } from '../../ecs';
  * Creates a tree representing parent child / relationships from a set of frames.
  */
 export const buildTreeNodes = (entities) => {
-    const nodeMap = new Map();
+    const nodeMap = {};
     const rootNodes = [];
     const childNodes = [];
     for (const entity of entities) {
         const parent = entity.get(traits.Parent);
         const name = entity.get(traits.Name) ?? '';
         const node = { entity };
-        nodeMap.set(name, node);
+        nodeMap[name] = node;
         if (!parent || parent === 'world') {
             rootNodes.push(node);
         }
@@ -21,12 +21,13 @@ export const buildTreeNodes = (entities) => {
     for (const node of childNodes) {
         const parent = node.entity.get(traits.Parent);
         if (parent) {
-            const parentNode = nodeMap.get(parent);
+            const parentNode = nodeMap[parent];
+            node.parent = parentNode;
             if (parentNode) {
                 parentNode.children ??= [];
                 parentNode.children?.push(node);
             }
         }
     }
-    return rootNodes;
+    return { rootNodes, nodeMap };
 };

package/dist/ecs/traits.d.ts

@@ -83,6 +83,10 @@ export declare const GLTF: import("koota").Trait<() => ThreeGltf>;
 export declare const DrawAPI: import("koota").TagTrait;
 export declare const GeometriesAPI: import("koota").TagTrait;
 export declare const WorldStateStoreAPI: import("koota").TagTrait;
+/**
+ * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
+ */
+export declare const DroppedFile: import("koota").TagTrait;
 /**
  * An entity with data from the FrameSystemConfig() API
  */

package/dist/ecs/traits.js

@@ -44,6 +44,10 @@ export const GLTF = trait(() => ({}));
 export const DrawAPI = trait();
 export const GeometriesAPI = trait();
 export const WorldStateStoreAPI = trait();
+/**
+ * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
+ */
+export const DroppedFile = trait();
 /**
  * An entity with data from the FrameSystemConfig() API
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -138,6 +138,7 @@
     "test": "pnpm test:unit -- --run",
     "test:coverage": "npx vitest run --coverage",
     "test:e2e": "playwright test",
+    "test:e2e-ui": "playwright test --ui",
     "model-pipeline:run": "node scripts/model-pipeline.js",
     "release": "changeset publish"
   }

package/dist/components/FileDrop.svelte

@@ -1,144 +0,0 @@
-<script lang="ts">
-	import { traits, useWorld } from '../ecs'
-	import { parsePcdInWorker } from '../lib'
-	import { useToast, ToastVariant } from '@viamrobotics/prime-core'
-	import { PLYLoader } from 'three/examples/jsm/Addons.js'
-
-	let { ...rest } = $props()
-
-	const world = useWorld()
-
-	type DropStates = 'inactive' | 'hovering' | 'loading'
-
-	let dropState = $state<DropStates>('inactive')
-
-	// prevent default to allow drop
-	const ondragenter = (event: DragEvent) => {
-		event.preventDefault()
-		dropState = 'hovering'
-	}
-
-	// prevent default to allow drop
-	const ondragover = (event: DragEvent) => {
-		event.preventDefault()
-	}
-
-	const ondragleave = (event: DragEvent) => {
-		// only deactivate if really leaving the window
-		if (event.relatedTarget === null) {
-			dropState = 'inactive'
-		}
-	}
-
-	const toast = useToast()
-
-	const extensions = {
-		PCD: 'pcd',
-		PLY: 'ply',
-	}
-	const supportedFiles = [extensions.PCD, extensions.PLY]
-
-	const ondrop = (event: DragEvent) => {
-		event.preventDefault()
-
-		if (event.dataTransfer === null) {
-			return
-		}
-
-		let completed = 0
-
-		const { files } = event.dataTransfer
-
-		for (const file of files) {
-			const ext = file.name.split('.').at(-1)
-
-			if (!ext) {
-				toast({
-					message: `Could not determine file extension.`,
-					variant: ToastVariant.Danger,
-				})
-
-				continue
-			}
-
-			if (!supportedFiles.includes(ext)) {
-				toast({
-					message: `Only ${supportedFiles.map((file) => `.${file}`).join(', ')} files are supported.`,
-					variant: ToastVariant.Danger,
-				})
-
-				continue
-			}
-
-			const reader = new FileReader()
-
-			reader.addEventListener('loadend', () => {
-				completed += 1
-
-				if (completed === files.length) {
-					dropState = 'inactive'
-				}
-			})
-
-			reader.addEventListener('error', () => {
-				toast({
-					message: `${file.name} failed to load.`,
-					variant: ToastVariant.Danger,
-				})
-			})
-
-			reader.addEventListener('load', async (event) => {
-				const arrayBuffer = event.target?.result
-
-				if (!arrayBuffer || typeof arrayBuffer === 'string') {
-					toast({
-						message: `${file.name} failed to load.`,
-						variant: ToastVariant.Danger,
-					})
-
-					return
-				}
-
-				if (ext === extensions.PCD) {
-					const result = await parsePcdInWorker(new Uint8Array(arrayBuffer))
-
-					world.spawn(
-						traits.Name(file.name),
-						traits.PointsGeometry(result.positions),
-						result.colors ? traits.VertexColors(result.colors) : traits.Color
-					)
-
-					toast({ message: `Loaded ${file.name}`, variant: ToastVariant.Success })
-				} else if (ext === extensions.PLY) {
-					const bufferGeometry = new PLYLoader().parse(arrayBuffer)
-
-					world.spawn(traits.Name(file.name), traits.BufferGeometry(bufferGeometry))
-
-					toast({ message: `Loaded ${file.name}`, variant: ToastVariant.Success })
-				}
-			})
-
-			reader.readAsArrayBuffer(file)
-
-			dropState = 'loading'
-		}
-	}
-</script>
-
-<svelte:window
-	{ondragenter}
-	{ondragleave}
-	{ondragover}
-/>
-
-<div
-	class={{
-		'fixed inset-0 z-9999 ': true,
-		'pointer-events-none': dropState === 'inactive',
-		'bg-black/10': dropState !== 'inactive',
-	}}
-	role="region"
-	aria-label="File drop zone"
-	{ondrop}
-	{...rest}
-></div>

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

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