@viamrobotics/motion-tools 0.19.2 → 1.0.3

package/dist/components/Entities.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import Pose from './Pose.svelte'
+	import Frame from './Frame.svelte'
+	import Line from './Line.svelte'
+	import Pointcloud from './Pointcloud.svelte'
+	import GLTF from './GLTF.svelte'
+	import Label from './Label.svelte'
+	import { traits, useQuery } from '../ecs'
+	import { Or } from 'koota'
+
+	const frames = useQuery(traits.FramesAPI)
+	const geometries = useQuery(traits.GeometriesAPI)
+	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)
+	)
+	const worldStateMeshes = useQuery(
+		traits.WorldStateStoreAPI,
+		Or(traits.Box, traits.Capsule, traits.Sphere, traits.BufferGeometry, traits.ReferenceFrame)
+	)
+</script>
+
+{#each drawnMeshes.current as entity (entity)}
+	<Frame {entity}>
+		<Label text={entity.get(traits.Name)} />
+	</Frame>
+{/each}
+
+{#each worldStateMeshes.current as entity (entity)}
+	<Frame {entity}>
+		<Label text={entity.get(traits.Name)} />
+	</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)} />
+	</Pointcloud>
+{/each}
+
+{#each frames.current as entity (entity)}
+	<Pose {entity}>
+		{#snippet children({ pose })}
+			<Frame
+				{pose}
+				{entity}
+			>
+				<Label text={entity.get(traits.Name)} />
+			</Frame>
+		{/snippet}
+	</Pose>
+{/each}
+
+{#each geometries.current as entity (entity)}
+	<Frame {entity}>
+		<Label text={entity.get(traits.Name)} />
+	</Frame>
+{/each}
+
+{#each lines.current as entity (entity)}
+	<Line {entity}>
+		<Label text={entity.get(traits.Name)} />
+	</Line>
+{/each}
+
+{#each gltfs.current as entity (entity)}
+	<GLTF {entity}>
+		<Label text={entity.get(traits.Name)} />
+	</GLTF>
+{/each}

package/dist/components/{WorldObjects.svelte.d.ts → Entities.svelte.d.ts}

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const WorldObjects: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Entities: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type WorldObjects = InstanceType<typeof WorldObjects>;
-export default WorldObjects;
+type Entities = InstanceType<typeof Entities>;
+export default Entities;

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/Focus.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
-	import { TrackballControls, Gizmo } from '@threlte/extras'
+	import { TrackballControls, Gizmo, Portal } from '@threlte/extras'
 	import { Box3, type Object3D, Vector3 } from 'three'
 	import { TrackballControls as ThreeTrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
 	import Camera from './Camera.svelte'
-	import Portal from './portal/Portal.svelte'
 	import Button from './dashboard/Button.svelte'
 
 	interface Props {
@@ -46,7 +45,7 @@
 		bind:ref={controls}
 		target={center}
 	>
-		<Gizmo />
+		<Gizmo placement="bottom-right" />
 	</TrackballControls>
 </Camera>