@viamrobotics/motion-tools 0.19.2 → 1.0.2

package/dist/hooks/useResourceByName.svelte.js

@@ -1,7 +1,7 @@
 import { useResourceNames } from '@viamrobotics/svelte-sdk';
 import { getContext, setContext } from 'svelte';
-const key = Symbol('resource-by-name-context');
-export const provideResourceByName = (partID) => {
+export const RESOURCE_BY_NAME_CONTEXT_KEY = Symbol('resource-by-name-context');
+export const createResourceByName = (partID) => {
     const resourceNames = useResourceNames(partID);
     const resourceByName = $derived.by(() => {
         const results = {};
@@ -10,12 +10,15 @@ export const provideResourceByName = (partID) => {
         }
         return results;
     });
-    setContext(key, {
+    return {
         get current() {
             return resourceByName;
         },
-    });
+    };
+};
+export const provideResourceByName = (partID) => {
+    setContext(RESOURCE_BY_NAME_CONTEXT_KEY, createResourceByName(partID));
 };
 export const useResourceByName = () => {
-    return getContext(key);
+    return getContext(RESOURCE_BY_NAME_CONTEXT_KEY);
 };

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

@@ -1,35 +1,25 @@
 import { Object3D } from 'three';
-import type { WorldObject } from '../WorldObject.svelte';
-interface SelectionContext {
-    readonly current: string | undefined;
-    set(value?: string): void;
+import type { Entity } from 'koota';
+interface SelectedEntityContext {
+    readonly current: Entity | undefined;
+    set(entity?: Entity): void;
 }
-interface FocusContext {
-    readonly current: string | undefined;
-    set(value?: string): void;
+interface FocusedEntityContext {
+    readonly current: Entity | undefined;
+    set(entity?: Entity): void;
 }
 export declare const provideSelection: () => {
     selection: {
-        readonly current: string | undefined;
-        set(value?: string): void;
+        readonly current: Entity | undefined;
+        set(entity: Entity): void;
     };
     focus: {
-        readonly current: string | undefined;
-        set(value?: string): void;
+        readonly current: Entity | undefined;
+        set(entity: Entity): void;
     };
-    hover: {
-        readonly current: string | undefined;
-        set(value?: string): void;
-    };
-};
-export declare const useSelected: () => SelectionContext;
-export declare const useFocused: () => FocusContext;
-export declare const useFocusedObject: () => {
-    current: WorldObject | undefined;
-};
-export declare const useSelectedObject: () => {
-    current: WorldObject | undefined;
 };
+export declare const useFocusedEntity: () => FocusedEntityContext;
+export declare const useSelectedEntity: () => SelectedEntityContext;
 export declare const useFocusedObject3d: () => {
     current: Object3D | undefined;
 };

package/dist/hooks/useSelection.svelte.js

@@ -1,65 +1,47 @@
 import { isInstanceOf, useThrelte } from '@threlte/core';
 import { getContext, setContext } from 'svelte';
-import { Matrix4, Object3D } from 'three';
-import { useObjects } from './useObjects.svelte';
-const hoverKey = Symbol('hover-context');
-const selectionKey = Symbol('selection-context');
-const focusKey = Symbol('focus-context');
-const selectedObjectKey = Symbol('selected-frame-context');
-const focusedObjectKey = Symbol('focused-frame-context');
+import { BatchedMesh, Matrix4, Object3D } from 'three';
+import { traits, useTrait, useWorld } from '../ecs';
+const selectedKey = Symbol('selected-frame-context');
+const focusedKey = Symbol('focused-frame-context');
 const focusedObject3dKey = Symbol('focused-object-3d-context');
 export const provideSelection = () => {
-    let selected = $state();
-    let focused = $state();
-    let hovered = $state();
-    const selectionContext = {
+    const world = useWorld();
+    const { scene } = useThrelte();
+    let selected = $state.raw();
+    let focused = $state.raw();
+    $effect(() => {
+        return world.onRemove(traits.Name, (entity) => {
+            if (entity === selected)
+                selected = undefined;
+            if (entity === focused)
+                focused = undefined;
+        });
+    });
+    const selectedEntityContext = {
         get current() {
             return selected;
         },
-        set(value) {
-            selected = value;
+        set(entity) {
+            selected = entity;
         },
     };
-    setContext(selectionKey, selectionContext);
-    const focusContext = {
+    setContext(selectedKey, selectedEntityContext);
+    const focusedEntityContext = {
         get current() {
             return focused;
         },
-        set(value) {
-            focused = value;
-        },
-    };
-    setContext(focusKey, focusContext);
-    const hoverContext = {
-        get current() {
-            return hovered;
-        },
-        set(value) {
-            hovered = value;
-        },
-    };
-    setContext(hoverKey, hoverContext);
-    const objects = useObjects();
-    const selectedObject = $derived(objects.current.find((object) => object.uuid === selected));
-    const selectedObjectContext = {
-        get current() {
-            return selectedObject;
+        set(entity) {
+            focused = entity;
         },
     };
-    setContext(selectedObjectKey, selectedObjectContext);
-    const focusedObject = $derived(objects.current.find((object) => object.uuid === focused));
-    const focusedObjectContext = {
-        get current() {
-            return focusedObject;
-        },
-    };
-    setContext(focusedObjectKey, focusedObjectContext);
-    const { scene } = useThrelte();
-    const uuid = $derived(focusedObject?.uuid);
+    setContext(focusedKey, focusedEntityContext);
     const focusedObject3d = $derived.by(() => {
-        if (!uuid)
+        const name = focused?.get(traits.Name);
+        if (!name) {
             return;
-        const object = scene.getObjectByProperty('uuid', uuid)?.clone();
+        }
+        const object = scene.getObjectByName(name)?.clone();
         object?.traverse((child) => {
             if (isInstanceOf(child, 'LineSegments')) {
                 child.raycast = () => null;
@@ -73,42 +55,40 @@ export const provideSelection = () => {
         },
     });
     return {
-        selection: selectionContext,
-        focus: focusContext,
-        hover: hoverContext,
+        selection: selectedEntityContext,
+        focus: focusedEntityContext,
     };
 };
-export const useSelected = () => {
-    return getContext(selectionKey);
+export const useFocusedEntity = () => {
+    return getContext(focusedKey);
 };
-export const useFocused = () => {
-    return getContext(focusKey);
-};
-export const useFocusedObject = () => {
-    return getContext(focusedObjectKey);
-};
-export const useSelectedObject = () => {
-    return getContext(selectedObjectKey);
+export const useSelectedEntity = () => {
+    return getContext(selectedKey);
 };
 export const useFocusedObject3d = () => {
     return getContext(focusedObject3dKey);
 };
 const matrix = new Matrix4();
 export const useSelectedObject3d = () => {
-    const selectedObject = useSelectedObject();
+    const selectedEntity = useSelectedEntity();
     const { scene } = useThrelte();
+    const name = useTrait(() => selectedEntity.current, traits.Name);
+    const instance = useTrait(() => selectedEntity.current, traits.Instance);
     const object = $derived.by(() => {
-        if (!selectedObject.current) {
+        if (!selectedEntity.current) {
             return;
         }
-        if (selectedObject.current.metadata.batched) {
+        if (instance.current) {
             const proxy = new Object3D();
-            const { id, object } = selectedObject.current.metadata.batched;
-            object.getMatrixAt(id, matrix);
+            const mesh = scene.getObjectById(instance.current.meshID);
+            mesh?.getMatrixAt(instance.current.instanceID, matrix);
             proxy.applyMatrix4(matrix);
             return proxy;
         }
-        return scene.getObjectByProperty('uuid', selectedObject.current.uuid);
+        if (!name.current) {
+            return;
+        }
+        return scene.getObjectByName(name.current);
     });
     return {
         get current() {

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

@@ -1,5 +1,6 @@
+import type { Entity } from 'koota';
 import { SvelteMap } from 'svelte/reactivity';
-type Context = SvelteMap<string, boolean>;
+type Context = SvelteMap<Entity, boolean>;
 export declare const provideVisibility: () => void;
 export declare const useVisibility: () => Context;
 export {};

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

@@ -1,5 +1,4 @@
 export declare const WEBLABS_EXPERIMENTS: {
-    readonly MOTION_TOOLS_EDIT_FRAME: "MOTION_TOOLS_EDIT_FRAME";
     readonly MOTION_TOOLS_RENDER_ARM_MODELS: "MOTION_TOOLS_RENDER_ARM_MODELS";
 };
 export declare const WEBLABS_CONTEXT_KEY: unique symbol;

package/dist/hooks/useWeblabs.svelte.js

@@ -1,7 +1,6 @@
 import { getContext, setContext } from 'svelte';
 import { SvelteSet } from 'svelte/reactivity';
 export const WEBLABS_EXPERIMENTS = {
-    MOTION_TOOLS_EDIT_FRAME: 'MOTION_TOOLS_EDIT_FRAME',
     MOTION_TOOLS_RENDER_ARM_MODELS: 'MOTION_TOOLS_RENDER_ARM_MODELS',
 };
 export const WEBLABS_CONTEXT_KEY = Symbol('weblabs-context');

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

@@ -0,0 +1,9 @@
+import { type TransformChangeEvent, type TransformWithUUID } from '@viamrobotics/sdk';
+export type ChangeMessage = {
+    type: 'change';
+    events: TransformChangeEvent[];
+};
+export type TransformEvent = TransformChangeEvent & {
+    transform: TransformWithUUID;
+};
+export declare const provideWorldStates: () => void;

package/dist/hooks/useWorldState.svelte.js

@@ -1,85 +1,125 @@
-import { WorldStateStoreClient, TransformChangeType, ResourceName, } from '@viamrobotics/sdk';
+import { WorldStateStoreClient, TransformChangeType, } from '@viamrobotics/sdk';
 import { createResourceClient, createResourceQuery, createResourceStream, useResourceNames, } from '@viamrobotics/svelte-sdk';
-import { fromTransform } from '../WorldObject.svelte';
+import { parseMetadata } from '../WorldObject.svelte';
 import { usePartID } from './usePartID.svelte';
-import { setInUnsafe } from '@thi.ng/paths';
-import { getContext, setContext } from 'svelte';
-const key = Symbol('world-state-context');
-const worker = new Worker(new URL('../workers/worldStateWorker', import.meta.url), {
-    type: 'module',
-});
+import { traits, useWorld } from '../ecs';
+import { createPose } from '../transform';
+import { useThrelte } from '@threlte/core';
+import { createBox, createCapsule, createSphere } from '../geometry';
+import { parsePlyInput } from '../ply';
 export const provideWorldStates = () => {
     const partID = usePartID();
     const resourceNames = useResourceNames(() => partID.current, 'world_state_store');
-    const current = $derived.by(() => Object.fromEntries(resourceNames.current.map(({ name }) => [
-        name,
-        createWorldState(() => partID.current, () => name),
-    ])));
-    setContext(key, {
-        get names() {
-            return resourceNames.current;
-        },
-        get current() {
-            return current;
-        },
+    const clients = $derived(resourceNames.current.map(({ name }) => createResourceClient(WorldStateStoreClient, () => partID.current, () => name)));
+    $effect(() => {
+        const cleanups = [];
+        for (const client of clients) {
+            cleanups.push(createWorldState(client));
+        }
+        return () => {
+            for (const cleanup of cleanups) {
+                cleanup();
+            }
+        };
     });
 };
-export const useWorldStates = () => {
-    return getContext(key);
-};
-export const useWorldState = (resourceName) => {
-    return useWorldStates().current[resourceName()];
-};
-const createWorldState = (partID, resourceName) => {
-    const client = createResourceClient(WorldStateStoreClient, partID, resourceName);
-    let initialized = $state(false);
-    let transforms = $state.raw({});
-    const transformsList = $derived.by(() => Object.values(transforms));
-    const worldObjectsList = $derived.by(() => transformsList.map(fromTransform));
-    let pendingEvents = [];
+const createWorldState = (client) => {
+    const { invalidate } = useThrelte();
+    const world = useWorld();
+    const entities = new Map();
+    const spawnEntity = (transform) => {
+        if (entities.has(transform.uuidString)) {
+            return;
+        }
+        const metadata = parseMetadata(transform.metadata?.fields);
+        const pose = createPose(transform.poseInObserverFrame?.pose);
+        const entityTraits = [];
+        const parent = transform.poseInObserverFrame?.referenceFrame;
+        if (parent && parent !== 'world') {
+            entityTraits.push(traits.Parent(parent));
+        }
+        if (metadata.color) {
+            entityTraits.push(traits.Color(metadata.color));
+        }
+        if (metadata.colors) {
+            entityTraits.push(traits.VertexColors(metadata.colors));
+        }
+        if (transform.physicalObject) {
+            entityTraits.push(traits.Geometry(transform.physicalObject));
+        }
+        if (metadata.shape === 'line' && metadata.points) {
+            entityTraits.push(traits.LineGeometry(metadata.points), traits.DottedLineColor(metadata.lineDotColor));
+        }
+        if (metadata.gltf) {
+            entityTraits.push(traits.GLTF(metadata.gltf));
+        }
+        if (metadata.shape === 'arrow') {
+            entityTraits.push(traits.Arrow);
+        }
+        entityTraits.push(traits.Name(transform.referenceFrame), traits.Pose(pose), traits.WorldStateStoreAPI);
+        const entity = world.spawn(...entityTraits);
+        entities.set(transform.uuidString, entity);
+    };
+    const destroyEntity = (uuid) => {
+        const entity = entities.get(uuid);
+        if (!entity)
+            return;
+        entity.destroy();
+        entities.delete(uuid);
+    };
+    const updateEntity = (transform, changes) => {
+        const entity = entities.get(transform.uuidString);
+        if (!entity)
+            return;
+        for (const path of changes) {
+            if (typeof path === 'string') {
+                if (path.startsWith('poseInObserverFrame.pose')) {
+                    entity.set(traits.Pose, transform.poseInObserverFrame?.pose ?? createPose());
+                }
+                else if (path.startsWith('physicalObject') && transform.physicalObject) {
+                    const { geometryType } = transform.physicalObject;
+                    if (geometryType.case === 'box') {
+                        entity.set(traits.Box, createBox(geometryType.value));
+                    }
+                    else if (geometryType.case === 'capsule') {
+                        entity.set(traits.Capsule, createCapsule(geometryType.value));
+                    }
+                    else if (geometryType.case === 'sphere') {
+                        entity.set(traits.Sphere, createSphere(geometryType.value));
+                    }
+                    else if (geometryType.case === 'mesh') {
+                        entity.set(traits.BufferGeometry, parsePlyInput(geometryType.value.mesh));
+                    }
+                }
+            }
+        }
+    };
+    let initialized = false;
     let flushScheduled = false;
+    let pendingEvents = [];
     const listUUIDs = createResourceQuery(client, 'listUUIDs');
-    const getTransforms = $derived(listUUIDs.data?.map((uuid) => {
+    const getTransformQueries = $derived(listUUIDs.data?.map((uuid) => {
         return createResourceQuery(client, 'getTransform', () => [uuid], () => ({ refetchInterval: false }));
     }));
     const changeStream = createResourceStream(client, 'streamTransformChanges', {
         refetchMode: 'replace',
     });
-    const initialize = (initial) => {
-        const next = { ...transforms };
-        for (const transform of initial) {
-            next[transform.uuidString] = transform;
-        }
-        transforms = next;
-        initialized = true;
-    };
     const applyEvents = (events) => {
-        if (events.length === 0)
-            return;
-        const next = { ...transforms };
         for (const event of events) {
-            switch (event.type) {
-                case TransformChangeType.ADDED:
-                    next[event.uuidString] = event.transform;
-                    break;
-                case TransformChangeType.REMOVED:
-                    delete next[event.uuidString];
-                    break;
-                case TransformChangeType.UPDATED: {
-                    if (event.changes.length === 0)
-                        continue;
-                    let toUpdate = next[event.uuidString];
-                    if (!toUpdate)
-                        continue;
-                    for (const [path, value] of event.changes) {
-                        toUpdate = setInUnsafe(toUpdate, path, value);
-                    }
-                    next[event.uuidString] = toUpdate;
-                    break;
-                }
+            if (event.changeType === TransformChangeType.ADDED) {
+                spawnEntity(event.transform);
+            }
+            else if (event.changeType === TransformChangeType.REMOVED) {
+                destroyEntity(event.transform.uuidString);
+            }
+            else if (event.changeType === TransformChangeType.UPDATED) {
+                updateEntity(event.transform, event.updatedFields?.paths ?? []);
+            }
+            else {
+                console.error('Unspecified change type.', event);
             }
         }
-        transforms = next;
+        invalidate();
     };
     const scheduleFlush = () => {
         if (flushScheduled)
@@ -87,64 +127,75 @@ const createWorldState = (partID, resourceName) => {
         flushScheduled = true;
         requestAnimationFrame(() => {
             const toApply = pendingEvents;
-            if (toApply.length === 0)
-                return;
             applyEvents(toApply);
             flushScheduled = false;
             pendingEvents = [];
         });
     };
     $effect(() => {
-        if (!getTransforms)
+        if (!getTransformQueries)
             return;
         if (initialized)
             return;
-        if (getTransforms.some((query) => query?.isLoading))
+        if (getTransformQueries.some((query) => query?.isLoading))
             return;
-        const data = getTransforms
-            .flatMap((query) => query?.data ?? [])
+        const transforms = getTransformQueries
+            .flatMap((query) => query?.data)
             .filter((transform) => transform !== undefined);
-        if (data.length === 0)
-            return;
-        initialize(data);
+        for (const transform of transforms) {
+            spawnEntity(transform);
+        }
+        invalidate();
+        initialized = true;
     });
     $effect(() => {
-        worker.onmessage = (e) => {
-            if (e.data.type !== 'process')
-                return;
-            const { events } = e.data ?? { events: [] };
-            if (events.length === 0)
-                return;
-            pendingEvents.push(...events);
-            scheduleFlush();
-        };
-        return () => {
-            worker.terminate();
-        };
-    });
-    $effect.pre(() => {
         if (changeStream?.data === undefined)
             return;
-        const events = changeStream.data.filter((event) => event.transform !== undefined);
-        if (events.length === 0)
-            return;
-        worker.postMessage({ type: 'change', events });
+        const eventsByUUID = new Map();
+        for (const event of changeStream.data) {
+            if (!event.transform) {
+                continue;
+            }
+            const uuid = event.transform.uuidString;
+            const existing = eventsByUUID.get(uuid);
+            if (!existing) {
+                eventsByUUID.set(uuid, event);
+                continue;
+            }
+            switch (event.changeType) {
+                case TransformChangeType.REMOVED:
+                    eventsByUUID.set(uuid, event);
+                    break;
+                case TransformChangeType.ADDED:
+                    if (existing.changeType !== TransformChangeType.REMOVED) {
+                        eventsByUUID.set(uuid, event);
+                    }
+                    break;
+                case TransformChangeType.UPDATED:
+                    // merge with existing updated event
+                    if (existing.changeType === TransformChangeType.UPDATED) {
+                        existing.updatedFields ??= { paths: [] };
+                        const paths = event.updatedFields?.paths ?? [];
+                        for (const path of paths) {
+                            if (existing.updatedFields.paths.includes(path)) {
+                                continue;
+                            }
+                            existing.updatedFields.paths.push(path);
+                        }
+                        existing.transform = event.transform;
+                    }
+                    else {
+                        eventsByUUID.set(uuid, event);
+                    }
+                    break;
+            }
+        }
+        pendingEvents.push(...eventsByUUID.values());
+        scheduleFlush();
     });
-    return {
-        get name() {
-            return resourceName();
-        },
-        get transforms() {
-            return transformsList;
-        },
-        get worldObjects() {
-            return worldObjectsList;
-        },
-        get listUUIDs() {
-            return listUUIDs;
-        },
-        get getTransforms() {
-            return getTransforms;
-        },
+    return () => {
+        for (const [, entity] of entities) {
+            entity.destroy();
+        }
     };
 };

package/dist/lib.d.ts

@@ -1,5 +1,6 @@
 export { default as Geometry } from './components/Geometry.svelte';
 export { default as AxesHelper } from './components/AxesHelper.svelte';
+export { Snapshot } from './draw/v1/snapshot_pb';
 export { BatchedArrow } from './three/BatchedArrow';
 export { CapsuleGeometry } from './three/CapsuleGeometry';
 export { OrientationVector } from './three/OrientationVector';

package/dist/lib.js

@@ -3,6 +3,8 @@
 // ensure you write a corresponding unit test to assert the component works in absence of parent providers in /src/lib/__tests__/PureComponents.svelte.spec.ts
 export { default as Geometry } from './components/Geometry.svelte';
 export { default as AxesHelper } from './components/AxesHelper.svelte';
+// Draw
+export { Snapshot } from './draw/v1/snapshot_pb';
 // Classes
 export { BatchedArrow } from './three/BatchedArrow';
 export { CapsuleGeometry } from './three/CapsuleGeometry';

package/dist/three/BatchedArrow.d.ts

@@ -7,10 +7,9 @@ export declare class BatchedArrow {
     _ids: Set<number>;
     _max: number;
     constructor();
-    addArrow(direction: Vector3, origin: Vector3, length?: number, color?: Color, arrowHeadAtPose?: boolean): number;
+    addArrow(direction: Vector3, origin: Vector3, color?: Color): number;
     removeArrow(instanceId: number): void;
     clear(): void;
     getBoundingBoxAt(instanceId: number, target: OBB): OBB;
-    updateArrow(instanceId: number, origin: Vector3, direction: Vector3, length: number, color: Color, arrowHeadAtPose: boolean): import("three").Quaternion | undefined;
-    get object3d(): BatchedMesh;
+    updateArrow(instanceId: number, origin: Vector3, direction: Vector3, color?: Color): import("three").Quaternion | undefined;
 }

package/dist/three/BatchedArrow.js

@@ -3,7 +3,6 @@ import { createArrowGeometry } from './arrow';
 const black = new Color('black');
 const axis = new Vector3();
 const object3d = new Object3D();
-const vec3 = new Vector3();
 const box1 = new Box3();
 const col = new Color();
 let index = 0;
@@ -23,14 +22,14 @@ export class BatchedArrow {
         this.mesh.frustumCulled = false;
         this._geometryId = this.mesh.addGeometry(geometry);
     }
-    addArrow(direction, origin, length = 0.1, color = black, arrowHeadAtPose = true) {
+    addArrow(direction, origin, color = black) {
         if (this.mesh.instanceCount >= this._max) {
             this._max += 20_000;
             this.mesh.setInstanceCount(this._max);
         }
         const instanceId = this._pool.pop() ?? this.mesh.addInstance(this._geometryId);
         this._ids.add(instanceId);
-        this.updateArrow(instanceId, origin, direction, length, color, arrowHeadAtPose);
+        this.updateArrow(instanceId, origin, direction, color);
         return instanceId;
     }
     removeArrow(instanceId) {
@@ -50,11 +49,7 @@ export class BatchedArrow {
         }
         return target;
     }
-    updateArrow(instanceId, origin, direction, length, color, arrowHeadAtPose) {
-        if (arrowHeadAtPose) {
-            // Compute the base position so the arrow ends at the origin
-            origin.sub(vec3.copy(direction).multiplyScalar(length));
-        }
+    updateArrow(instanceId, origin, direction, color) {
         direction.normalize();
         object3d.position.copy(origin);
         if (direction.y > 0.99999)
@@ -72,7 +67,4 @@ export class BatchedArrow {
         }
         this.mesh.setVisibleAt(instanceId, true);
     }
-    get object3d() {
-        return this.mesh;
-    }
 }

package/dist/three/CapsuleGeometry.d.ts

@@ -6,5 +6,5 @@ import { LatheGeometry } from 'three';
  */
 export declare class CapsuleGeometry extends LatheGeometry {
     type: string;
-    constructor(radius?: number, length?: number, capSegments?: number, radialSegments?: number);
+    constructor(r?: number, l?: number, capSegments?: number, radialSegments?: number);
 }