@viamrobotics/motion-tools 1.13.1 → 1.14.0

package/dist/components/Entities/Line.svelte

@@ -5,12 +5,17 @@
 </script>
 
 <script lang="ts">
-	import Frame from './Frame.svelte'
 	import type { Snippet } from 'svelte'
+	import { T, useThrelte } from '@threlte/core'
+	import { meshBounds, Portal, PortalTarget } from '@threlte/extras'
 	import type { Entity } from 'koota'
 	import { traits, useTrait } from '../../ecs'
 	import LineDots from './LineDots.svelte'
 	import { darkenColor } from '../../color'
+	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
+	import { Line2, LineMaterial } from 'three/examples/jsm/Addons.js'
+	import LineGeometry from './LineGeometry.svelte'
+	import { poseToObject3d } from '../../transform'
 
 	interface Props {
 		entity: Entity
@@ -19,25 +24,67 @@
 
 	let { entity, children }: Props = $props()
 
-	const linePositions = useTrait(() => entity, traits.LinePositions)
+	const { invalidate } = useThrelte()
+	const name = useTrait(() => entity, traits.Name)
+	const parent = useTrait(() => entity, traits.Parent)
+	const pose = useTrait(() => entity, traits.Pose)
 	const color = useTrait(() => entity, traits.Color)
 	const pointSize = useTrait(() => entity, traits.PointSize)
+	const linePositions = useTrait(() => entity, traits.LinePositions)
+	const lineWidth = useTrait(() => entity, traits.LineWidth)
+	const opacity = useTrait(() => entity, traits.Opacity)
+	const materialProps = useTrait(() => entity, traits.Material)
+	const renderOrder = useTrait(() => entity, traits.RenderOrder)
+
+	const events = useEntityEvents(() => entity)
+
+	const currentOpacity = $derived(opacity.current ?? 0.7)
 
-	const resolvedColor = $derived(
-		colorUtil
-			.setRGB(color.current?.r ?? 1, color.current?.g ?? 0, color.current?.b ?? 0)
-			.getHexString()
-	)
+	const mesh = new Line2()
+
+	$effect.pre(() => {
+		if (pose.current) {
+			poseToObject3d(pose.current, mesh)
+			invalidate()
+		}
+	})
 </script>
 
-<Frame {entity}>
+<Portal id={parent.current}>
+	<T
+		is={mesh}
+		name={entity}
+		userData.name={name}
+		raycast={meshBounds}
+		renderOrder={renderOrder.current}
+		{...events}
+	>
+		<LineGeometry positions={linePositions.current} />
+		<T
+			is={LineMaterial}
+			color={[color.current?.r ?? 1, color.current?.g ?? 0, color.current?.b ?? 0]}
+			transparent={currentOpacity < 1}
+			depthWrite={currentOpacity === 1}
+			opacity={currentOpacity}
+			width={lineWidth.current ? lineWidth.current * 0.001 : 0.5}
+			depthTest={materialProps.current?.depthTest ?? true}
+		/>
+	</T>
+
+	{#if linePositions.current && pointSize.current}
+		<LineDots
+			color={darkenColor(
+				colorUtil.setRGB(color.current?.r ?? 1, color.current?.g ?? 0, color.current?.b ?? 0),
+				10
+			)}
+			positions={linePositions.current}
+			scale={pointSize.current * 0.001}
+		/>
+	{/if}
+
+	{#if name.current}
+		<PortalTarget id={name.current} />
+	{/if}
+
 	{@render children?.()}
-</Frame>
-
-{#if linePositions.current && pointSize.current}
-	<LineDots
-		color={darkenColor(resolvedColor, 10)}
-		positions={linePositions.current}
-		scale={pointSize.current * 0.001}
-	/>
-{/if}
+</Portal>

package/dist/components/Entities/Mesh.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { T, useThrelte, type Props as ThrelteProps } from '@threlte/core'
+	import { type Snippet } from 'svelte'
+	import { BufferGeometry, Color, DoubleSide, FrontSide, Mesh } from 'three'
+	import { CapsuleGeometry } from '../../three/CapsuleGeometry'
+	import { colors, darkenColor } from '../../color'
+	import AxesHelper from '../AxesHelper.svelte'
+	import type { Entity } from 'koota'
+	import { traits, useTrait } from '../../ecs'
+	import { poseToObject3d } from '../../transform'
+	import type { Pose } from '@viamrobotics/sdk'
+
+	interface Props extends ThrelteProps<Mesh> {
+		entity: Entity
+		color?: string
+		center?: Pose
+		children?: Snippet
+	}
+
+	let { entity, color: overrideColor, center, children, ...rest }: Props = $props()
+
+	const colorUtil = new Color()
+
+	const { invalidate } = useThrelte()
+	const name = useTrait(() => entity, traits.Name)
+	const entityColor = useTrait(() => entity, traits.Color)
+	const opacity = useTrait(() => entity, traits.Opacity)
+	const box = useTrait(() => entity, traits.Box)
+	const capsule = useTrait(() => entity, traits.Capsule)
+	const sphere = useTrait(() => entity, traits.Sphere)
+	const bufferGeometry = useTrait(() => entity, traits.BufferGeometry)
+	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
+	const materialProps = useTrait(() => entity, traits.Material)
+	const renderOrder = useTrait(() => entity, traits.RenderOrder)
+
+	const color = $derived.by(() => {
+		if (overrideColor) {
+			return overrideColor
+		}
+
+		if (entityColor.current) {
+			return colorUtil.setRGB(entityColor.current.r, entityColor.current.g, entityColor.current.b)
+		}
+
+		return colors.default
+	})
+
+	const mesh = new Mesh()
+
+	$effect.pre(() => {
+		if (center) {
+			poseToObject3d(center, mesh)
+			invalidate()
+		}
+	})
+
+	let geo = $state.raw<BufferGeometry>()
+
+	const oncreate = (bufferGeometry: BufferGeometry) => {
+		geo = bufferGeometry
+	}
+</script>
+
+<T
+	is={mesh}
+	name={entity}
+	userData.name={name}
+	renderOrder={renderOrder.current}
+	{...rest}
+>
+	{#if box.current}
+		{@const { x, y, z } = box.current ?? { x: 0, y: 0, z: 0 }}
+		<T.BoxGeometry
+			args={[x * 0.001, y * 0.001, z * 0.001]}
+			{oncreate}
+		/>
+	{:else if sphere.current}
+		{@const { r } = sphere.current ?? { r: 0 }}
+		<T.SphereGeometry
+			args={[r * 0.001]}
+			{oncreate}
+		/>
+	{:else if capsule.current}
+		{@const { r, l } = capsule.current ?? { r: 0, l: 0 }}
+		<T
+			is={CapsuleGeometry}
+			args={[r * 0.001, l * 0.001]}
+			{oncreate}
+		/>
+	{:else if bufferGeometry.current}
+		<T
+			is={bufferGeometry.current}
+			{oncreate}
+		/>
+	{/if}
+
+	{@const currentOpacity = opacity.current ?? 0.7}
+	<T.MeshToonMaterial
+		{color}
+		side={bufferGeometry.current ? DoubleSide : FrontSide}
+		transparent={currentOpacity < 1}
+		depthWrite={currentOpacity === 1}
+		opacity={currentOpacity}
+		depthTest={materialProps.current?.depthTest ?? true}
+	/>
+
+	<!-- 
+		TODO(mp) currently some bufferGeometries are coming in empty, 
+		this is a quick fix but this should be handled upstream
+	-->
+	{#if geo && geo.getAttribute('position').array.length > 0}
+		<T.LineSegments
+			raycast={() => null}
+			bvh={{ enabled: false }}
+		>
+			<T.EdgesGeometry args={[geo, 0]} />
+			<T.LineBasicMaterial color={darkenColor(color, 10)} />
+		</T.LineSegments>
+	{/if}
+
+	{@render children?.()}
+</T>
+
+{#if showAxesHelper.current}
+	<AxesHelper
+		name={entity}
+		width={3}
+		length={0.1}
+	/>
+{/if}

package/dist/components/Entities/Mesh.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Mesh } from 'three';
+declare const Mesh: any;
+type Mesh = ReturnType<typeof Mesh>;
+export default Mesh;

package/dist/components/Selected.svelte

@@ -46,6 +46,8 @@
 				selectedObject3d.current?.getWorldPosition(object.position)
 				selectedObject3d.current?.getWorldQuaternion(object.quaternion)
 				obbHelper.setFromObject(object)
+			} else {
+				obbHelper.setFromObject(object)
 			}
 
 			invalidate()

package/dist/components/overlay/left-pane/buildTree.js

@@ -1,4 +1,7 @@
 import { traits } from '../../../ecs';
+function sortNodes(nodes) {
+    nodes.sort((a, b) => a.entity.get(traits.Name)?.localeCompare(b.entity.get(traits.Name) ?? '') ?? 0);
+}
 /**
  * Creates a tree representing parent child / relationships from a set of frames.
  */
@@ -29,5 +32,17 @@ export const buildTreeNodes = (entities) => {
             }
         }
     }
+    for (const node of rootNodes) {
+        if (!node.children)
+            continue;
+        sortNodes(node.children);
+    }
+    for (const node of childNodes) {
+        if (!node.children)
+            continue;
+        sortNodes(node.children);
+    }
+    sortNodes(rootNodes);
+    sortNodes(childNodes);
     return { rootNodes, nodeMap };
 };

package/dist/ecs/traits.d.ts

@@ -1,4 +1,5 @@
 import type { GLTF as ThreeGltf } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { type Entity } from 'koota';
 import { BufferGeometry as ThreeBufferGeometry } from 'three';
 import { Geometry as ViamGeometry } from '@viamrobotics/sdk';
 export declare const Name: import("koota").Trait<() => string>;
@@ -178,22 +179,4 @@ export declare const Geometry: (geometry: ViamGeometry) => import("koota").Trait
 }>, Partial<{
     r: number;
 }>] | [import("koota").Trait<() => ThreeBufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>>, ThreeBufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>];
-export declare const updateGeometry: (geometry: ViamGeometry) => (ThreeBufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap> | import("koota").Trait<() => ThreeBufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>>)[] | ({
-    x: number;
-    y: number;
-    z: number;
-} | import("koota").Trait<{
-    x: number;
-    y: number;
-    z: number;
-}>)[] | ({
-    r: number;
-    l: number;
-} | import("koota").Trait<{
-    l: number;
-    r: number;
-}>)[] | ({
-    r: number;
-} | import("koota").Trait<{
-    r: number;
-}>)[];
+export declare const updateGeometryTrait: (entity: Entity, geometry?: ViamGeometry) => void;

package/dist/ecs/traits.js

@@ -126,18 +126,45 @@ export const Geometry = (geometry) => {
     }
     return ReferenceFrame;
 };
-export const updateGeometry = (geometry) => {
+export const updateGeometryTrait = (entity, geometry) => {
+    if (!geometry) {
+        entity.remove(Box, Capsule, Sphere, BufferGeometry);
+        return;
+    }
     if (geometry.geometryType.case === 'box') {
-        return [Box, createBox(geometry.geometryType.value)];
+        if (entity.has(Box)) {
+            entity.set(Box, createBox(geometry.geometryType.value));
+        }
+        else {
+            entity.remove(Capsule, Sphere, BufferGeometry);
+            entity.add(Box(createBox(geometry.geometryType.value)));
+        }
     }
     else if (geometry.geometryType.case === 'capsule') {
-        return [Capsule, createCapsule(geometry.geometryType.value)];
+        if (entity.has(Capsule)) {
+            entity.set(Capsule, createCapsule(geometry.geometryType.value));
+        }
+        else {
+            entity.remove(Box, Sphere, BufferGeometry);
+            entity.add(Capsule(createCapsule(geometry.geometryType.value)));
+        }
     }
     else if (geometry.geometryType.case === 'sphere') {
-        return [Sphere, createSphere(geometry.geometryType.value)];
+        if (entity.has(Sphere)) {
+            entity.set(Sphere, createSphere(geometry.geometryType.value));
+        }
+        else {
+            entity.remove(Box, Capsule, BufferGeometry);
+            entity.add(Sphere(createSphere(geometry.geometryType.value)));
+        }
     }
     else if (geometry.geometryType.case === 'mesh') {
-        return [BufferGeometry, parsePlyInput(geometry.geometryType.value.mesh)];
+        if (entity.has(BufferGeometry)) {
+            entity.set(BufferGeometry, parsePlyInput(geometry.geometryType.value.mesh));
+        }
+        else {
+            entity.remove(Box, Sphere, Capsule);
+            entity.add(BufferGeometry(parsePlyInput(geometry.geometryType.value.mesh)));
+        }
     }
-    return [];
 };

package/dist/hooks/use3DModels.svelte.js

@@ -57,9 +57,7 @@ export const provide3DModels = (partID) => {
         }
     };
     $effect(() => {
-        const shouldFetchModels = settings.current.isLoaded &&
-            (settings.current.renderArmModels === 'model' ||
-                settings.current.renderArmModels === 'colliders+model');
+        const shouldFetchModels = settings.current.isLoaded && settings.current.renderArmModels.includes('model');
         if (shouldFetchModels) {
             fetch3DModels();
         }

package/dist/hooks/useFrames.svelte.js

@@ -9,6 +9,7 @@ import { createPose } from '../transform';
 import { useResourceByName } from './useResourceByName.svelte';
 import { traits, useWorld } from '../ecs';
 import { useConfigFrames } from './useConfigFrames.svelte';
+import { updateGeometryTrait } from '../ecs/traits';
 const key = Symbol('frames-context');
 export const provideFrames = (partID) => {
     const configFrames = useConfigFrames();
@@ -69,15 +70,17 @@ export const provideFrames = (partID) => {
         }
     });
     $effect.pre(() => {
-        if (current.length === 0)
-            return;
         const currentResourcesByName = resourceByName.current;
+        const currentPartID = partID();
         // We only want to update whenever "current" or "resourceByName.current" changes
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        current.length;
         untrack(() => {
             const active = {};
             for (const frame of current) {
                 const name = frame.referenceFrame;
-                active[name] = true;
+                const entityKey = `${currentPartID}:${name}`;
+                active[entityKey] = true;
                 const parent = frame.poseInObserverFrame?.referenceFrame;
                 const pose = createPose(frame.poseInObserverFrame?.pose);
                 const center = frame.physicalObject?.center
@@ -85,7 +88,7 @@ export const provideFrames = (partID) => {
                     : undefined;
                 const resourceName = currentResourcesByName[frame.referenceFrame];
                 const color = resourceNameToColor(resourceName);
-                const existing = entities.get(name);
+                const existing = entities.get(entityKey);
                 if (existing) {
                     if (!parent || parent === 'world') {
                         existing.remove(traits.Parent);
@@ -102,11 +105,7 @@ export const provideFrames = (partID) => {
                     if (center) {
                         existing.set(traits.Center, center);
                     }
-                    existing.remove(traits.Box, traits.Sphere, traits.BufferGeometry, traits.Capsule);
-                    if (frame.physicalObject) {
-                        const geometry = traits.Geometry(frame.physicalObject);
-                        existing.add(geometry);
-                    }
+                    updateGeometryTrait(existing, frame.physicalObject);
                     existing.set(traits.EditedPose, pose);
                     continue;
                 }
@@ -130,13 +129,13 @@ export const provideFrames = (partID) => {
                     entityTraits.push(traits.Geometry(frame.physicalObject));
                 }
                 const entity = world.spawn(...entityTraits);
-                entities.set(name, entity);
+                entities.set(entityKey, entity);
             }
             // Clean up non-active entities
-            for (const [name, entity] of entities) {
-                if (!active[name]) {
+            for (const [entityKey, entity] of entities) {
+                if (!active[entityKey]) {
                     entity?.destroy();
-                    entities.delete(name);
+                    entities.delete(entityKey);
                     continue;
                 }
             }

package/dist/hooks/useGeometries.svelte.js

@@ -11,6 +11,7 @@ import {} from 'koota';
 import { createPose } from '../transform';
 import { RefetchRates } from '../components/overlay/RefreshRate.svelte';
 import { useEnvironment } from './useEnvironment.svelte';
+import { updateGeometryTrait } from '../ecs/traits';
 const key = Symbol('geometries-context');
 const colorUtil = new Color();
 export const provideGeometries = (partID) => {
@@ -39,6 +40,7 @@ export const provideGeometries = (partID) => {
     const gripperQueries = $derived(gripperClients.map((client) => [client.current?.name, createResourceQuery(client, 'getGeometries', () => options)]));
     const cameraQueries = $derived(cameraClients.map((client) => [client.current?.name, createResourceQuery(client, 'getGeometries', () => options)]));
     const gantryQueries = $derived(gantryClients.map((client) => [client.current?.name, createResourceQuery(client, 'getGeometries', () => options)]));
+    const queries = $derived([...armQueries, ...gripperQueries, ...cameraQueries, ...gantryQueries]);
     $effect(() => {
         if (interval === RefetchRates.FPS_30 || interval === RefetchRates.FPS_60) {
             return logs.add(`Fetching geometries every ${interval}ms...`);
@@ -56,49 +58,70 @@ export const provideGeometries = (partID) => {
             });
         }
     });
-    const queries = $derived([...armQueries, ...gripperQueries, ...cameraQueries, ...gantryQueries]);
     const entities = new Map();
+    const queryEntityKeys = new Map();
     $effect(() => {
-        const active = {};
+        const activeQueryKeys = new Set();
+        const currentPartID = partID();
         for (const [name, query] of queries) {
-            untrack(() => {
-                $effect(() => {
-                    if (name && query.data) {
-                        let index = 0;
-                        for (const geometry of query.data) {
-                            index += 1;
-                            const resourceName = resources.current[name];
-                            const label = geometry.label || `${name} geometry ${index}`;
-                            active[`${name}:${label}`] = true;
-                            const pose = createPose(geometry.center);
-                            const subtype = resourceName?.subtype;
-                            const existing = entities.get(`${name}:${label}`);
-                            if (existing) {
-                                existing.set(traits.Pose, pose);
-                                continue;
-                            }
-                            const entityTraits = [
-                                traits.Parent(name),
-                                traits.Name(label),
-                                traits.Pose(pose),
-                                traits.GeometriesAPI,
-                                traits.Geometry(geometry),
-                            ];
-                            if (subtype) {
-                                entityTraits.push(traits.Color(subtype ? colorUtil.set(resourceColors[subtype]) : undefined));
-                            }
-                            const entity = world.spawn(...entityTraits);
-                            entities.set(`${name}:${label}`, entity);
+            if (!name) {
+                continue;
+            }
+            const queryKey = `${currentPartID}:${name}`;
+            activeQueryKeys.add(queryKey);
+            $effect(() => {
+                const nextKeys = new Set();
+                const resourceName = resources.current[name];
+                const subtype = resourceName?.subtype;
+                if (query.data) {
+                    let index = 0;
+                    for (const geometry of query.data) {
+                        index += 1;
+                        const label = geometry.label || `${name} geometry ${index}`;
+                        const entityKey = `${currentPartID}:${name}:${label}`;
+                        nextKeys.add(entityKey);
+                        const center = createPose(geometry.center);
+                        const existing = entities.get(entityKey);
+                        if (existing) {
+                            existing.set(traits.Center, center);
+                            updateGeometryTrait(existing, geometry);
+                            continue;
+                        }
+                        const entityTraits = [
+                            traits.Parent(name),
+                            traits.Name(label),
+                            traits.Center(center),
+                            traits.GeometriesAPI,
+                            traits.Geometry(geometry),
+                        ];
+                        if (subtype) {
+                            entityTraits.push(traits.Color(subtype ? colorUtil.set(resourceColors[subtype]) : undefined));
                         }
+                        const entity = world.spawn(...entityTraits);
+                        entities.set(entityKey, entity);
                     }
-                });
+                }
+                const prevKeys = queryEntityKeys.get(queryKey) ?? new Set();
+                // Remove entities no longer present for this specific query
+                for (const key of prevKeys) {
+                    if (!nextKeys.has(key)) {
+                        entities.get(key)?.destroy();
+                        entities.delete(key);
+                    }
+                }
+                queryEntityKeys.set(queryKey, nextKeys);
             });
         }
-        // Clean up non-active entities
-        for (const [label, entity] of entities) {
-            if (!active[label]) {
-                entity?.destroy();
-                entities.delete(label);
+        // Clean up owners whose queries disappeared entirely
+        for (const [queryKey, keys] of queryEntityKeys) {
+            if (!activeQueryKeys.has(queryKey)) {
+                for (const key of keys) {
+                    const entity = entities.get(key);
+                    if (entity && world.has(entity))
+                        entity.destroy();
+                    entities.delete(key);
+                }
+                queryEntityKeys.delete(queryKey);
             }
         }
     });