@viamrobotics/motion-tools 0.19.2 → 1.0.2

package/dist/three/CapsuleGeometry.js

@@ -6,7 +6,9 @@ import { LatheGeometry, Path } from 'three';
  */
 export class CapsuleGeometry extends LatheGeometry {
     type = 'CapsuleGeometry';
-    constructor(radius = 1, length = 1, capSegments = 4, radialSegments = 8) {
+    constructor(r = 1, l = 1, capSegments = 4, radialSegments = 8) {
+        const radius = Math.max(0.0001, r);
+        const length = Math.max(0.0001, l);
         const path = new Path();
         const midsectionLength = length - 2 * radius;
         path.absarc(0, -midsectionLength / 2, radius, Math.PI * 1.5, 0);

package/dist/transform.js

@@ -83,21 +83,6 @@ export const poseToDirection = (pose) => {
     ov.set(pose.oX, pose.oY, pose.oZ, MathUtils.degToRad(pose.theta));
     return new Vector3(ov.x, ov.y, ov.z);
 };
-export const scaleToDimensions = (scale, geometry) => {
-    if (geometry.case === 'box') {
-        geometry.value.dimsMm ??= { x: 0, y: 0, z: 0 };
-        geometry.value.dimsMm.x *= scale.x;
-        geometry.value.dimsMm.y *= scale.y;
-        geometry.value.dimsMm.z *= scale.z;
-    }
-    else if (geometry.case === 'capsule') {
-        geometry.value.radiusMm *= scale.x;
-        geometry.value.lengthMm *= scale.y;
-    }
-    else if (geometry.case === 'sphere') {
-        geometry.value.radiusMm *= scale.x;
-    }
-};
 export const poseToMatrix = (pose) => {
     ov.set(pose.oX, pose.oY, pose.oZ, MathUtils.degToRad(pose.theta));
     ov.toQuaternion(quaternion);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.19.2",
+  "version": "1.0.2",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -24,14 +24,15 @@
     "@tailwindcss/vite": "4.1.13",
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/svelte": "5.2.8",
+    "@testing-library/user-event": "^14.6.1",
     "@thi.ng/paths": "5.2.21",
-    "@threlte/core": "8.1.5",
-    "@threlte/extras": "9.5.4",
-    "@threlte/rapier": "3.1.5",
+    "@threlte/core": "8.3.0",
+    "@threlte/extras": "9.7.0",
+    "@threlte/rapier": "3.2.0",
     "@threlte/xr": "1.0.8",
     "@types/bun": "1.2.21",
     "@types/lodash-es": "4.17.12",
-    "@types/three": "0.179.0",
+    "@types/three": "0.181.0",
     "@typescript-eslint/eslint-plugin": "8.42.0",
     "@typescript-eslint/parser": "8.42.0",
     "@viamrobotics/prime-core": "0.1.5",
@@ -48,6 +49,7 @@
     "globals": "16.3.0",
     "idb-keyval": "6.2.2",
     "jsdom": "26.1.0",
+    "koota": "^0.5.3",
     "lodash-es": "4.17.21",
     "lucide-svelte": "0.542.0",
     "prettier": "3.6.2",
@@ -55,11 +57,11 @@
     "prettier-plugin-tailwindcss": "0.6.14",
     "publint": "0.3.12",
     "runed": "0.31.1",
-    "svelte": "5.43.0",
+    "svelte": "5.45.9",
     "svelte-check": "4.3.1",
     "svelte-virtuallists": "1.4.2",
     "tailwindcss": "4.1.13",
-    "three": "0.180.0",
+    "three": "0.182.0",
     "three-mesh-bvh": "^0.9.1",
     "threlte-uikit": "1.2.1",
     "tsx": "4.20.5",
@@ -117,6 +119,8 @@
     "!dist/**/*.spec.*"
   ],
   "dependencies": {
+    "@bufbuild/protobuf": "1.10.1",
+    "@neodrag/svelte": "^2.3.3",
     "@tanstack/svelte-query-devtools": "^6.0.2",
     "uuid-tool": "^2.0.3"
   },
@@ -130,6 +134,7 @@
     "lint": "prettier --check . && eslint .",
     "test:unit": "vitest",
     "test:client": "go test ./client/... -count=1",
+    "test:draw": "go test ./draw/... -count=1",
     "test": "pnpm test:unit -- --run",
     "test:coverage": "npx vitest run --coverage",
     "test:e2e": "playwright test",

package/dist/components/WorldObject.svelte

@@ -1,28 +0,0 @@
-<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.svelte'
-	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}
-		uuid={object.uuid}
-		name={object.name}
-		{...objectProps}
-		{...rest}
-	>
-		{@render children?.()}
-	</T>
-{/if}

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

@@ -1,11 +0,0 @@
-import { type Props as ThrelteProps } from '@threlte/core';
-import type { Snippet } from 'svelte';
-import type { Object3D } from 'three';
-import type { WorldObject } from '../WorldObject.svelte';
-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/WorldObjects.svelte

@@ -1,159 +0,0 @@
-<script lang="ts">
-	import { T } from '@threlte/core'
-	import { Portal, PortalTarget } from './portal'
-	import { useFrames } from '../hooks/useFrames.svelte'
-	import { useGeometries } from '../hooks/useGeometries.svelte'
-	import { usePointClouds } from '../hooks/usePointclouds.svelte'
-	import { useDrawAPI } from '../hooks/useDrawAPI.svelte'
-	import { useWorldStates } from '../hooks/useWorldState.svelte'
-	import { useArrows } from '../hooks/useArrows.svelte'
-	import Pose from './Pose.svelte'
-	import Frame from './Frame.svelte'
-	import Line from './Line.svelte'
-	import Pointcloud from './Pointcloud.svelte'
-	import Model from './WorldObject.svelte'
-	import Label from './Label.svelte'
-	import WorldState from './WorldState.svelte'
-	import { determinePose } from '../WorldObject.svelte'
-	import { useWeblabs } from '../hooks/useWeblabs.svelte'
-	import type { WorldObject } from '../WorldObject.svelte'
-	import type { Pose as ViamPose } from '@viamrobotics/sdk'
-	import { WEBLABS_EXPERIMENTS } from '../hooks/useWeblabs.svelte'
-	const points = usePointClouds()
-	const drawAPI = useDrawAPI()
-	const frames = useFrames()
-	const geometries = useGeometries()
-	const worldStates = useWorldStates()
-	const batchedArrow = useArrows()
-	const weblabs = useWeblabs()
-
-	const weblabedDeterminePose = (object: WorldObject, pose: ViamPose | undefined) => {
-		if (weblabs.isActive(WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME)) {
-			return determinePose(object, pose)
-		}
-		return pose ?? object.pose
-	}
-</script>
-
-{#each frames.current as object (object.uuid)}
-	<Pose
-		name={object.name}
-		parent={object.referenceFrame}
-	>
-		{#snippet children({ pose })}
-			{@const framePose = weblabedDeterminePose(object, pose)}
-			<Portal id={object.referenceFrame}>
-				<Frame
-					uuid={object.uuid}
-					name={object.name}
-					pose={framePose}
-					geometry={object.geometry}
-					metadata={object.metadata}
-				>
-					<PortalTarget id={object.name} />
-					<Label text={object.name} />
-				</Frame>
-			</Portal>
-		{/snippet}
-	</Pose>
-{/each}
-
-{#each geometries.current 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} />
-			<Label text={object.name} />
-		</Frame>
-	</Portal>
-{/each}
-
-{#each worldStates.names as { name } (name)}
-	<WorldState worldObjects={worldStates.current[name].worldObjects} />
-{/each}
-
-{#each points.current as object (object.uuid)}
-	<Portal id={object.referenceFrame}>
-		<Pointcloud {object}>
-			<Label text={object.name} />
-		</Pointcloud>
-	</Portal>
-{/each}
-
-{#each drawAPI.frames 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} />
-			<Label text={object.name} />
-		</Frame>
-	</Portal>
-{/each}
-
-{#each drawAPI.points as object (object.uuid)}
-	<Portal id={object.referenceFrame}>
-		<Pointcloud {object}>
-			<Label text={object.name} />
-		</Pointcloud>
-	</Portal>
-{/each}
-
-<T
-	name={batchedArrow.object3d.name}
-	is={batchedArrow.object3d}
-	dispose={false}
-	bvh={{ enabled: false }}
-/>
-
-{#each drawAPI.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} />
-			<Label text={object.name} />
-		</Frame>
-	</Portal>
-{/each}
-
-{#each drawAPI.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} />
-			<Label text={object.name} />
-		</Frame>
-	</Portal>
-{/each}
-
-{#each drawAPI.models as object (object.uuid)}
-	<Model {object}>
-		<PortalTarget id={object.name} />
-		<Label text={object.name} />
-	</Model>
-{/each}
-
-{#each drawAPI.lines as object (object.uuid)}
-	<Line {object}>
-		<Label text={object.name} />
-	</Line>
-{/each}

package/dist/components/WorldState.svelte

@@ -1,92 +0,0 @@
-<script lang="ts">
-	import { Color, Vector3 } from 'three'
-
-	import Frame from './Frame.svelte'
-	import Label from './Label.svelte'
-	import Portal from './portal/Portal.svelte'
-	import PortalTarget from './portal/PortalTarget.svelte'
-	import { WorldObject } from '../WorldObject.svelte'
-	import { poseToDirection } from '../transform'
-	import { BatchedArrow } from '../three/BatchedArrow'
-	import { T } from '@threlte/core'
-
-	interface Props {
-		worldObjects: WorldObject[]
-	}
-
-	let { worldObjects }: Props = $props()
-
-	const currentArrows: Record<string, { id: number; arrow: WorldObject }> = {}
-	const arrowBatches = $state<Record<string, BatchedArrow>>({})
-
-	const arrows = $derived(worldObjects.filter((object) => object.metadata?.shape === 'arrow'))
-	const objects = $derived(worldObjects.filter((object) => object.metadata?.shape !== 'arrow'))
-
-	const getArrows = () => ({ ...currentArrows })
-	const getArrow = (referenceFrame: string, uuid: string) =>
-		currentArrows[`${referenceFrame}:${uuid}`]
-
-	const removeArrow = (referenceFrame: string, uuid: string) => {
-		delete currentArrows[`${referenceFrame}:${uuid}`]
-	}
-
-	const setArrow = (arrow: WorldObject) => {
-		const referenceFrame = arrow.referenceFrame ?? 'world'
-		const currentArrow = getArrow(referenceFrame, arrow.uuid)
-		const color = arrow.metadata?.color ?? new Color('yellow')
-		const direction = poseToDirection(arrow.pose)
-		const position = new Vector3(arrow.pose.x, arrow.pose.y, arrow.pose.z)
-
-		arrowBatches[referenceFrame] ??= new BatchedArrow()
-		const batchedArrow = arrowBatches[referenceFrame]
-
-		if (currentArrow) {
-			batchedArrow.updateArrow(currentArrow.id, direction, position, 0.1, color, true)
-			currentArrows[`${referenceFrame}:${arrow.uuid}`] = { id: currentArrow.id, arrow }
-		} else {
-			const id = batchedArrow.addArrow(direction, position, 0.1, color, true)
-			currentArrows[`${referenceFrame}:${arrow.uuid}`] = { id, arrow }
-		}
-	}
-
-	$effect(() => {
-		const toRemove = getArrows()
-		arrows.forEach((arrow) => {
-			setArrow(arrow)
-			const referenceFrame = arrow.referenceFrame ?? 'world'
-			delete toRemove[`${referenceFrame}:${arrow.uuid}`]
-		})
-
-		Object.values(toRemove).forEach(({ id, arrow }) => {
-			const referenceFrame = arrow.referenceFrame ?? 'world'
-			arrowBatches[referenceFrame].removeArrow(id)
-			removeArrow(referenceFrame, arrow.uuid)
-		})
-	})
-</script>
-
-{#each Object.entries(arrowBatches) as [referenceFrame, batch] (referenceFrame)}
-	<Portal id={referenceFrame}>
-		<T
-			name={batch.object3d.name}
-			is={batch.object3d}
-			dispose={false}
-			bvh={{ enabled: false }}
-		/>
-	</Portal>
-{/each}
-
-{#each objects 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} />
-			<Label text={object.name} />
-		</Frame>
-	</Portal>
-{/each}

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

@@ -1,7 +0,0 @@
-import { WorldObject } from '../WorldObject.svelte';
-interface Props {
-    worldObjects: WorldObject[];
-}
-declare const WorldState: import("svelte").Component<Props, {}, "">;
-type WorldState = ReturnType<typeof WorldState>;
-export default WorldState;

package/dist/components/__tests__/__fixtures__/worldObject.svelte.d.ts

@@ -1,2 +0,0 @@
-import { WorldObject } from '../../../WorldObject.svelte';
-export declare const createWorldObjectFixture: () => WorldObject<import("../../../WorldObject.svelte").Geometries>;

package/dist/components/__tests__/__fixtures__/worldObject.svelte.js

@@ -1,35 +0,0 @@
-import { WorldObject } from '../../../WorldObject.svelte';
-export const createWorldObjectFixture = () => {
-    const object = new WorldObject();
-    object.name = 'Test Object';
-    object.uuid = '1234-5678';
-    object.referenceFrame = 'parent_frame';
-    object.pose = {
-        x: 10,
-        y: 20,
-        z: 30,
-        oX: 0.1,
-        oY: 0.2,
-        oZ: 0.3,
-        theta: 0.4,
-    };
-    object.geometry = {
-        label: 'my geometry',
-        geometryType: {
-            case: 'box',
-            value: {
-                dimsMm: { x: 10, y: 20, z: 30 },
-            },
-        },
-    };
-    object.localEditedPose = {
-        x: 10,
-        y: 20,
-        z: 30,
-        oX: 0.1,
-        oY: 0.2,
-        oZ: 0.3,
-        theta: 0.4,
-    };
-    return object;
-};

package/dist/components/portal/Portal.svelte

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

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

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

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

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

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

package/dist/components/portal/index.js

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

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

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

@@ -1,5 +0,0 @@
-import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-const context = new SvelteMap();
-export const usePortalContext = () => {
-    return context;
-};

package/dist/hooks/useArrows.svelte.d.ts

@@ -1,3 +0,0 @@
-import { BatchedArrow } from '../lib';
-export declare const provideArrows: () => void;
-export declare const useArrows: () => BatchedArrow;

package/dist/hooks/useArrows.svelte.js

@@ -1,9 +0,0 @@
-import { BatchedArrow } from '../lib';
-import { getContext, setContext } from 'svelte';
-const key = Symbol('arrow-context');
-export const provideArrows = () => {
-    setContext(key, new BatchedArrow());
-};
-export const useArrows = () => {
-    return getContext(key);
-};

package/dist/hooks/useDraggable.svelte.d.ts

@@ -1,10 +0,0 @@
-interface Context {
-    onDragStart: (event: MouseEvent) => void;
-    onDragEnd: (event: MouseEvent) => void;
-    readonly current: {
-        x: number;
-        y: number;
-    };
-}
-export declare const useDraggable: (name: string) => Context;
-export {};

package/dist/hooks/useDraggable.svelte.js

@@ -1,36 +0,0 @@
-import { get, set } from 'idb-keyval';
-export const useDraggable = (name) => {
-    const down = { x: 0, y: 0 };
-    const last = { x: 0, y: 0 };
-    let translate = $state({ x: 0, y: 0 });
-    const onDragMove = (event) => {
-        translate.x = event.clientX - down.x + last.x;
-        translate.y = event.clientY - down.y + last.y;
-    };
-    const onDragStart = (event) => {
-        down.x = event.clientX;
-        down.y = event.clientY;
-        last.x = translate.x;
-        last.y = translate.y;
-        window.addEventListener('pointermove', onDragMove, { passive: true });
-    };
-    const onDragEnd = () => {
-        set(`${name}-draggable`, $state.snapshot(translate));
-        window.removeEventListener('pointermove', onDragMove);
-    };
-    get(`${name}-draggable`).then((response) => {
-        if (response) {
-            translate = response;
-        }
-    });
-    $effect(() => {
-        return () => window.removeEventListener('pointermove', onDragMove);
-    });
-    return {
-        onDragStart,
-        onDragEnd,
-        get current() {
-            return translate;
-        },
-    };
-};

package/dist/hooks/useObjects.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { WorldObject } from '../WorldObject.svelte';
-interface Context {
-    current: WorldObject[];
-}
-export declare const provideObjects: () => void;
-export declare const useObjects: () => Context;
-export {};

package/dist/hooks/useObjects.svelte.js

@@ -1,35 +0,0 @@
-import { getContext, setContext } from 'svelte';
-import { useFrames } from './useFrames.svelte';
-import { useGeometries } from './useGeometries.svelte';
-import { useStaticGeometries } from './useStaticGeometries.svelte';
-import { useDrawAPI } from './useDrawAPI.svelte';
-import { usePointClouds } from './usePointclouds.svelte';
-const key = Symbol('objects-context');
-export const provideObjects = () => {
-    const frames = useFrames();
-    const geometries = useGeometries();
-    const statics = useStaticGeometries();
-    const drawAPI = useDrawAPI();
-    const points = usePointClouds();
-    const objects = $derived([
-        ...frames.current,
-        ...geometries.current,
-        ...points.current,
-        ...statics.current,
-        ...drawAPI.frames,
-        ...drawAPI.meshes,
-        ...drawAPI.models,
-        ...drawAPI.nurbs,
-        ...drawAPI.points,
-        ...drawAPI.lines,
-        ...drawAPI.poses,
-    ]);
-    setContext(key, {
-        get current() {
-            return objects;
-        },
-    });
-};
-export const useObjects = () => {
-    return getContext(key);
-};

package/dist/hooks/usePersistentUUIDs.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { WorldObject } from '../WorldObject.svelte';
-export declare const usePersistentUUIDs: () => {
-    uuids: Map<string, string>;
-    updateUUIDs: (objects: WorldObject[]) => void;
-};

package/dist/hooks/usePersistentUUIDs.svelte.js

@@ -1,13 +0,0 @@
-export const usePersistentUUIDs = () => {
-    const uuids = new Map();
-    const updateUUIDs = (objects) => {
-        for (const object of objects) {
-            const ref = `${object.referenceFrame}-${object.name}`;
-            if (uuids.has(ref) === false) {
-                uuids.set(ref, object.uuid);
-            }
-            object.uuid = uuids.get(ref) ?? object.uuid;
-        }
-    };
-    return { uuids, updateUUIDs };
-};

package/dist/hooks/useResourceByName.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { ResourceName } from '@viamrobotics/sdk';
-interface Context {
-    current: Record<string, ResourceName | undefined>;
-}
-export declare const provideResourceByName: (partID: () => string) => void;
-export declare const useResourceByName: () => Context;
-export {};