@viamrobotics/motion-tools 1.18.1 → 1.19.0

package/dist/attribute.d.ts

@@ -2,3 +2,5 @@ import { BufferGeometry } from 'three';
 import type { Metadata } from './metadata';
 export declare const createBufferGeometry: (positions: Float32Array, metadata?: Metadata) => BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>;
 export declare const updateBufferGeometry: (geometry: BufferGeometry, positions: Float32Array, metadata: Metadata) => void;
+export declare const preAllocateBufferGeometry: (total: number, size: number, metadata: Metadata) => BufferGeometry;
+export declare const writeBufferGeometryRange: (geometry: BufferGeometry, positions: Float32Array, start: number, metadata: Metadata) => void;

package/dist/attribute.js

@@ -1,5 +1,5 @@
 import { BufferAttribute, BufferGeometry } from 'three';
-import { colorStride } from './buffer';
+import { colorStride, STRIDE } from './buffer';
 export const createBufferGeometry = (positions, metadata) => {
     const geometry = new BufferGeometry();
     geometry.setAttribute('position', new BufferAttribute(positions, 3));
@@ -44,3 +44,49 @@ export const updateBufferGeometry = (geometry, positions, metadata) => {
         }
     }
 };
+export const preAllocateBufferGeometry = (total, size, metadata) => {
+    const geometry = new BufferGeometry();
+    const posAttr = new BufferAttribute(new Float32Array(total * size), size);
+    geometry.setAttribute('position', posAttr);
+    if (metadata.colors) {
+        const stride = colorStride(metadata.colorFormat) || STRIDE.COLORS_RGB;
+        const colorAttr = new BufferAttribute(new Uint8Array(total * stride), stride, true);
+        geometry.setAttribute('color', colorAttr);
+    }
+    if (metadata.opacities) {
+        const opacityAttr = new BufferAttribute(new Uint8Array(total), 1, true);
+        geometry.setAttribute('opacity', opacityAttr);
+    }
+    geometry.setDrawRange(0, 0);
+    return geometry;
+};
+export const writeBufferGeometryRange = (geometry, positions, start, metadata) => {
+    const chunkElements = positions.length / 3;
+    const posAttr = geometry.getAttribute('position');
+    posAttr.array.set(positions, start * 3);
+    posAttr.addUpdateRange(start * 3, chunkElements * 3);
+    posAttr.needsUpdate = true;
+    if (metadata.colors) {
+        const colorAttr = geometry.getAttribute('color');
+        if (colorAttr) {
+            const stride = colorAttr.itemSize;
+            colorAttr.array.set(metadata.colors, start * stride);
+            colorAttr.addUpdateRange(start * stride, chunkElements * stride);
+            colorAttr.needsUpdate = true;
+        }
+    }
+    if (metadata.opacities) {
+        const opacityAttr = geometry.getAttribute('opacity');
+        if (opacityAttr) {
+            ;
+            opacityAttr.array.set(metadata.opacities, start);
+            opacityAttr.addUpdateRange(start, chunkElements);
+            opacityAttr.needsUpdate = true;
+        }
+    }
+    const endPoint = start + chunkElements;
+    const currentEnd = geometry.drawRange.count;
+    if (endPoint > currentEnd) {
+        geometry.setDrawRange(0, endPoint);
+    }
+};

package/dist/buf/draw/v1/metadata_pb.d.ts

@@ -15,6 +15,39 @@ export declare enum ColorFormat {
      */
     RGB = 1
 }
+/**
+ * Chunks describes how a large entity is chunked for progressive delivery.
+ *
+ * @generated from message draw.v1.Chunks
+ */
+export declare class Chunks extends Message<Chunks> {
+    /**
+     * The number of elements per chunk.
+     *
+     * @generated from field: uint32 chunk_size = 1;
+     */
+    chunkSize: number;
+    /**
+     * The total number of elements across all chunks.
+     *
+     * @generated from field: uint32 total = 2;
+     */
+    total: number;
+    /**
+     * The number of bytes per element (e.g. 12 for float32 xyz positions).
+     *
+     * @generated from field: uint32 stride = 3;
+     */
+    stride: number;
+    constructor(data?: PartialMessage<Chunks>);
+    static readonly runtime: typeof proto3;
+    static readonly typeName = "draw.v1.Chunks";
+    static readonly fields: FieldList;
+    static fromBinary(bytes: Uint8Array, options?: Partial<BinaryReadOptions>): Chunks;
+    static fromJson(jsonValue: JsonValue, options?: Partial<JsonReadOptions>): Chunks;
+    static fromJsonString(jsonString: string, options?: Partial<JsonReadOptions>): Chunks;
+    static equals(a: Chunks | PlainMessage<Chunks> | undefined, b: Chunks | PlainMessage<Chunks> | undefined): boolean;
+}
 /**
  * @generated from message draw.v1.Metadata
  */
@@ -53,6 +86,12 @@ export declare class Metadata extends Message<Metadata> {
      * @generated from field: optional bool invisible = 5;
      */
     invisible?: boolean;
+    /**
+     * When present, indicates this drawing uses chunked delivery.
+     *
+     * @generated from field: optional draw.v1.Chunks chunks = 6;
+     */
+    chunks?: Chunks;
     constructor(data?: PartialMessage<Metadata>);
     static readonly runtime: typeof proto3;
     static readonly typeName = "draw.v1.Metadata";

package/dist/buf/draw/v1/metadata_pb.js

@@ -24,6 +24,54 @@ proto3.util.setEnumType(ColorFormat, "draw.v1.ColorFormat", [
     { no: 0, name: "COLOR_FORMAT_UNSPECIFIED" },
     { no: 1, name: "COLOR_FORMAT_RGB" },
 ]);
+/**
+ * Chunks describes how a large entity is chunked for progressive delivery.
+ *
+ * @generated from message draw.v1.Chunks
+ */
+export class Chunks extends Message {
+    /**
+     * The number of elements per chunk.
+     *
+     * @generated from field: uint32 chunk_size = 1;
+     */
+    chunkSize = 0;
+    /**
+     * The total number of elements across all chunks.
+     *
+     * @generated from field: uint32 total = 2;
+     */
+    total = 0;
+    /**
+     * The number of bytes per element (e.g. 12 for float32 xyz positions).
+     *
+     * @generated from field: uint32 stride = 3;
+     */
+    stride = 0;
+    constructor(data) {
+        super();
+        proto3.util.initPartial(data, this);
+    }
+    static runtime = proto3;
+    static typeName = "draw.v1.Chunks";
+    static fields = proto3.util.newFieldList(() => [
+        { no: 1, name: "chunk_size", kind: "scalar", T: 13 /* ScalarType.UINT32 */ },
+        { no: 2, name: "total", kind: "scalar", T: 13 /* ScalarType.UINT32 */ },
+        { no: 3, name: "stride", kind: "scalar", T: 13 /* ScalarType.UINT32 */ },
+    ]);
+    static fromBinary(bytes, options) {
+        return new Chunks().fromBinary(bytes, options);
+    }
+    static fromJson(jsonValue, options) {
+        return new Chunks().fromJson(jsonValue, options);
+    }
+    static fromJsonString(jsonString, options) {
+        return new Chunks().fromJsonString(jsonString, options);
+    }
+    static equals(a, b) {
+        return proto3.util.equals(Chunks, a, b);
+    }
+}
 /**
  * @generated from message draw.v1.Metadata
  */
@@ -62,6 +110,12 @@ export class Metadata extends Message {
      * @generated from field: optional bool invisible = 5;
      */
     invisible;
+    /**
+     * When present, indicates this drawing uses chunked delivery.
+     *
+     * @generated from field: optional draw.v1.Chunks chunks = 6;
+     */
+    chunks;
     constructor(data) {
         super();
         proto3.util.initPartial(data, this);
@@ -74,6 +128,7 @@ export class Metadata extends Message {
         { no: 3, name: "opacities", kind: "scalar", T: 12 /* ScalarType.BYTES */, opt: true },
         { no: 4, name: "show_axes_helper", kind: "scalar", T: 8 /* ScalarType.BOOL */, opt: true },
         { no: 5, name: "invisible", kind: "scalar", T: 8 /* ScalarType.BOOL */, opt: true },
+        { no: 6, name: "chunks", kind: "message", T: Chunks, opt: true },
     ]);
     static fromBinary(bytes, options) {
         return new Metadata().fromBinary(bytes, options);

package/dist/chunking.d.ts

@@ -0,0 +1,26 @@
+import type { Entity, World } from 'koota';
+import { ColorFormat } from './buf/draw/v1/metadata_pb';
+import { type Metadata } from './metadata';
+export interface EntityChunk {
+    /** Element offset (in points) where this chunk should be written. */
+    start: number;
+    /** Flat `[x, y, z, ...]` positions in meters. */
+    positions: Float32Array;
+    /** Optional colors aligned with `positions`. */
+    colors?: Uint8Array;
+    /** Optional per-vertex opacities aligned with `positions`. */
+    opacities?: Uint8Array;
+    /** `true` when the server has no more chunks for this entity. */
+    done: boolean;
+}
+export type ChunkFetcher = (uuid: string, start: number, signal: AbortSignal) => Promise<EntityChunk | null>;
+export interface ChunkLoaderOptions {
+    world: World;
+    invalidate: () => void;
+    fetchChunk: ChunkFetcher;
+    colorFormat?: ColorFormat;
+}
+export declare const createChunkLoader: ({ world, invalidate, fetchChunk, colorFormat, }: ChunkLoaderOptions) => {
+    start(uuid: string, entity: Entity, metadata: Metadata): void;
+    dispose(): void;
+};

package/dist/chunking.js

@@ -0,0 +1,59 @@
+import { writeBufferGeometryRange } from './attribute';
+import { ColorFormat } from './buf/draw/v1/metadata_pb';
+import { traits } from './ecs';
+import {} from './metadata';
+export const createChunkLoader = ({ world, invalidate, fetchChunk, colorFormat = ColorFormat.RGB, }) => {
+    const active = new Set();
+    const controller = new AbortController();
+    const pull = async (uuid, entity, total, firstChunkEnd) => {
+        if (active.has(uuid))
+            return;
+        active.add(uuid);
+        const { signal } = controller;
+        let nextStart = firstChunkEnd;
+        try {
+            while (!signal.aborted) {
+                const chunk = await fetchChunk(uuid, nextStart, signal);
+                if (signal.aborted || !chunk)
+                    break;
+                const buffer = entity.get(traits.BufferGeometry);
+                if (!buffer)
+                    break;
+                writeBufferGeometryRange(buffer, chunk.positions, chunk.start, {
+                    colorFormat,
+                    colors: chunk.colors,
+                    opacities: chunk.opacities,
+                });
+                const chunkElements = chunk.positions.length / 3;
+                nextStart = chunk.start + chunkElements;
+                entity.set(traits.ChunkProgress, { loaded: nextStart, total });
+                invalidate();
+                if (chunk.done)
+                    break;
+            }
+        }
+        catch (error) {
+            if (!signal.aborted) {
+                console.error(`Chunk pull failed for entity ${uuid}:`, error);
+            }
+        }
+        finally {
+            active.delete(uuid);
+            if (world.has(entity)) {
+                entity.remove(traits.ChunkProgress);
+            }
+        }
+    };
+    return {
+        start(uuid, entity, metadata) {
+            const chunks = metadata.chunks;
+            if (!chunks || chunks.total <= 0)
+                return;
+            entity.add(traits.ChunkProgress({ loaded: chunks.chunkSize, total: chunks.total }));
+            void pull(uuid, entity, chunks.total, chunks.chunkSize);
+        },
+        dispose() {
+            controller.abort();
+        },
+    };
+};

package/dist/color.d.ts

@@ -8,6 +8,7 @@ import { Color, type ColorRepresentation, type RGB } from 'three';
  */
 export declare const darkenColor: (value: ColorRepresentation, percent: number) => Color;
 export declare const resourceNameToColor: (resourceName?: ResourceName) => Color | undefined;
+export declare const subtypeToColor: (subtype?: string) => Color | undefined;
 export declare const colors: {
     readonly default: string;
 };

package/dist/color.js

@@ -55,9 +55,17 @@ export const darkenColor = (value, percent) => {
     return new Color().setHSL(hsl.h, hsl.s, hsl.l);
 };
 export const resourceNameToColor = (resourceName) => {
-    return resourceName
-        ? new Color(resourceColors[resourceName.subtype])
-        : undefined;
+    if (!resourceName)
+        return undefined;
+    return subtypeToColor(resourceName.subtype);
+};
+export const subtypeToColor = (subtype) => {
+    if (!subtype)
+        return undefined;
+    const colorValue = resourceColors[subtype];
+    if (!colorValue)
+        return undefined;
+    return new Color(colorValue);
 };
 const darkness = '600';
 export const colors = {

package/dist/components/Entities/Arrows/Arrows.svelte

@@ -48,7 +48,7 @@
 			is={arrows.headMesh}
 			bvh={{ enabled: false }}
 			raycast={() => null}
-			visible={invisible.current}
+			visible={invisible.current !== true}
 		/>
 		<T
 			is={arrows.shaftMesh}

package/dist/components/Entities/Mesh.svelte

@@ -4,7 +4,7 @@
 
 	import { T, type Props as ThrelteProps, useThrelte } from '@threlte/core'
 	import { type Snippet } from 'svelte'
-	import { BufferGeometry, Color, DoubleSide, FrontSide, Mesh } from 'three'
+	import { BufferGeometry, Color, DoubleSide, FrontSide, Material, Mesh } from 'three'
 
 	import { asColor } from '../../buffer'
 	import { colors, darkenColor } from '../../color'
@@ -56,8 +56,19 @@
 
 	const currentOpacity = $derived(opacity.current ?? 0.7)
 
-	const mesh = new Mesh()
+	let material = $state.raw<Material>(new Material())
+	$effect(() => {
+		const isTransparent = currentOpacity < 1
+		material.depthWrite = !isTransparent
+		material.opacity = currentOpacity
+		if (material.transparent !== isTransparent) {
+			material.transparent = isTransparent
+			material.needsUpdate = true
+			invalidate()
+		}
+	})
 
+	const mesh = new Mesh()
 	$effect.pre(() => {
 		if (center) {
 			poseToObject3d(center, mesh)
@@ -66,6 +77,11 @@
 	})
 
 	let geo = $state.raw<BufferGeometry>()
+	$effect.pre(() => {
+		if (!box.current && !sphere.current && !capsule.current && !bufferGeometry.current) {
+			geo = undefined
+		}
+	})
 
 	const oncreate = (bufferGeometry: BufferGeometry) => {
 		geo = bufferGeometry
@@ -108,10 +124,10 @@
 	<T.MeshToonMaterial
 		{color}
 		side={bufferGeometry.current ? DoubleSide : FrontSide}
-		transparent={currentOpacity < 1}
-		depthWrite={currentOpacity === 1}
-		opacity={currentOpacity}
 		depthTest={materialProps.current?.depthTest ?? true}
+		oncreate={(m) => {
+			material = m
+		}}
 	/>
 
 	<!-- 

package/dist/components/Entities/Pose.svelte

@@ -4,6 +4,7 @@
 	import type { Snippet } from 'svelte'
 
 	import { traits, useTrait } from '../../ecs'
+	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
 	import { usePose } from '../../hooks/usePose.svelte'
 	import { matrixToPose, poseToMatrix } from '../../transform'
 
@@ -13,6 +14,7 @@
 	}
 	let { entity, children }: Props = $props()
 
+	const partConfig = usePartConfig()
 	const name = useTrait(() => entity, traits.Name)
 	const parent = useTrait(() => entity, traits.Parent)
 	const editedPose = useTrait(() => entity, traits.EditedPose)
@@ -24,7 +26,7 @@
 	)
 
 	const resolvedPose = $derived.by(() => {
-		if (pose.current === undefined) {
+		if (pose.current === undefined || partConfig.hasPendingSave) {
 			return editedPose.current
 		}
 

package/dist/components/PCD.svelte

@@ -20,10 +20,13 @@
 
 	const world = useWorld()
 
-	let entity: Entity
-
 	$effect(() => {
+		let entity: Entity | undefined
+		let cancelled = false
+
 		parsePcdInWorker(data).then(({ positions, colors }) => {
+			if (cancelled) return
+
 			const geometry = createBufferGeometry(positions, { colors, colorFormat: ColorFormat.RGB })
 
 			const entityTraits: ConfigurableTrait[] = [
@@ -45,6 +48,7 @@
 		})
 
 		return () => {
+			cancelled = true
 			if (entity && world.has(entity)) {
 				entity.destroy()
 			}

package/dist/components/Scene.svelte

@@ -99,7 +99,6 @@
 	{/if}
 
 	<T.Group attach={focusedObject ? false : undefined}>
-		<PortalTarget id="world" />
 		<PortalTarget />
 
 		<Entities />

package/dist/components/overlay/Details.svelte

@@ -404,6 +404,8 @@
 						value: parent.current ?? 'world',
 						options: configFrames.getParentFrameOptions(name.current ?? ''),
 						onChange: (value) => {
+							if (value === parent.current) return
+							traits.setParentTrait(entity, value)
 							detailConfigUpdater.setFrameParent(entity, value)
 						},
 					})}

package/dist/components/overlay/left-pane/TreeNode.svelte

@@ -20,11 +20,33 @@
 
 	const name = useTrait(() => node.entity, traits.Name)
 	const invisible = useTrait(() => node.entity, traits.Invisible)
+	const chunkProgress = useTrait(() => node.entity, traits.ChunkProgress)
+	const loading = $derived(chunkProgress.current !== undefined)
+	const progress = $derived(
+		chunkProgress.current && chunkProgress.current.total > 0
+			? chunkProgress.current.loaded / chunkProgress.current.total
+			: 0
+	)
 
 	const nodeProps = $derived({ indexPath, node })
 	const nodeState = $derived(api.getNodeState(nodeProps))
 </script>
 
+{#snippet progressIndicator()}
+	{#if loading}
+		<span
+			role="progressbar"
+			aria-label="Loading {Math.round(progress * 100)}%"
+			aria-valuenow={Math.round(progress * 100)}
+			aria-valuemin={0}
+			aria-valuemax={100}
+			class="border-gray-6 size-3 rounded-full border"
+			style:background="conic-gradient(var(--color-gray-6, #9c9ca4) {progress * 100}%, transparent {progress *
+				100}%)"
+		></span>
+	{/if}
+{/snippet}
+
 {#if nodeState.isBranch}
 	{@const { expanded } = nodeState}
 	{@const { children = [] } = node}
@@ -52,25 +74,28 @@
 			>
 				{name.current}
 			</span>
-
-			<button
-				class="text-gray-6"
-				onclick={(event) => {
-					event.stopPropagation()
-
-					if (node.entity.has(traits.Invisible)) {
-						node.entity.remove(traits.Invisible)
-					} else {
-						node.entity.add(traits.Invisible)
-					}
-				}}
-			>
-				{#if invisible.current}
-					<EyeOff size={14} />
-				{:else}
-					<Eye size={14} />
-				{/if}
-			</button>
+			<div class="flex items-center justify-end gap-1">
+				{@render progressIndicator()}
+
+				<button
+					class="text-gray-6"
+					onclick={(event) => {
+						event.stopPropagation()
+
+						if (node.entity.has(traits.Invisible)) {
+							node.entity.remove(traits.Invisible)
+						} else {
+							node.entity.add(traits.Invisible)
+						}
+					}}
+				>
+					{#if invisible.current}
+						<EyeOff size={14} />
+					{:else}
+						<Eye size={14} />
+					{/if}
+				</button>
+			</div>
 		</div>
 		<div {...api.getBranchContentProps(nodeProps)}>
 			<div {...api.getBranchIndentGuideProps(nodeProps)}></div>
@@ -113,23 +138,27 @@
 			{node.entity.get(traits.Name)}
 		</span>
 
-		<button
-			class="text-gray-6"
-			onclick={(event) => {
-				event.stopPropagation()
-				if (node.entity.has(traits.Invisible)) {
-					node.entity.remove(traits.Invisible)
-				} else {
-					node.entity.add(traits.Invisible)
-				}
-			}}
-		>
-			{#if invisible.current}
-				<EyeOff size={14} />
-			{:else}
-				<Eye size={14} />
-			{/if}
-		</button>
+		<div class="flex items-center gap-1">
+			{@render progressIndicator()}
+
+			<button
+				class="text-gray-6"
+				onclick={(event) => {
+					event.stopPropagation()
+					if (node.entity.has(traits.Invisible)) {
+						node.entity.remove(traits.Invisible)
+					} else {
+						node.entity.add(traits.Invisible)
+					}
+				}}
+			>
+				{#if invisible.current}
+					<EyeOff size={14} />
+				{:else}
+					<Eye size={14} />
+				{/if}
+			</button>
+		</div>
 	</div>
 {/if}
 

package/dist/draw.d.ts

@@ -2,6 +2,7 @@ import type { TransformWithUUID } from '@viamrobotics/sdk';
 import type { Entity, Trait, World } from 'koota';
 import type { Transform as TransformProto } from './buf/common/v1/common_pb';
 import type { Drawing } from './buf/draw/v1/drawing_pb';
+import { type Metadata } from './metadata';
 export type Transform = TransformWithUUID | TransformProto;
 type Options = {
     removable?: boolean;
@@ -9,5 +10,10 @@ type Options = {
 export declare const drawTransform: (world: World, { referenceFrame, poseInObserverFrame, physicalObject, metadata }: Transform, api: Trait, options?: Options) => Entity;
 export declare const drawDrawing: (world: World, drawing: Drawing, api: Trait, options?: Options) => Entity[];
 export declare const updateTransform: (entity: Entity, { poseInObserverFrame, physicalObject, metadata }: Transform, options?: Options) => void;
+export declare const updateMetadata: (entity: Entity, metadata: Metadata, { pointCloud }?: {
+    pointCloud?: boolean;
+}) => void;
 export declare const updateDrawing: (world: World, entities: Entity[], drawing: Drawing, api: Trait, options?: Options) => Entity[];
+export declare const addColorTraits: (entity: Entity, colors: Uint8Array) => void;
+export declare const setColorTraits: (entity: Entity, colors: Uint8Array) => void;
 export {};