@viamrobotics/motion-tools 1.13.1 → 1.15.0

package/dist/components/Entities/Geometry.svelte

@@ -1,206 +1,78 @@
+<!--
+@component
+
+Renders a Viam Geometry object
+-->
 <script lang="ts">
-	import { T, useThrelte, type Props as ThrelteProps } from '@threlte/core'
-	import { type Snippet } from 'svelte'
-	import { meshBounds } from '@threlte/extras'
-	import { BufferGeometry, Color, DoubleSide, FrontSide, Group, Mesh } from 'three'
-	import { Line2, LineMaterial } from 'three/examples/jsm/Addons.js'
-	import { CapsuleGeometry } from '../../three/CapsuleGeometry'
-	import { colors, darkenColor } from '../../color'
-	import AxesHelper from '../AxesHelper.svelte'
 	import type { Entity } from 'koota'
+	import type { Snippet } from 'svelte'
+
+	import { T, useThrelte } from '@threlte/core'
+	import { Portal } from '@threlte/extras'
+
 	import { traits, useTrait } from '../../ecs'
+	import { use3DModels } from '../../hooks/use3DModels.svelte'
+	import { useSettings } from '../../hooks/useSettings.svelte'
 	import { poseToObject3d } from '../../transform'
-	import type { Pose } from '@viamrobotics/sdk'
-	import LineGeometry from './LineGeometry.svelte'
 
-	interface Props extends ThrelteProps<Group> {
+	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
+	import Mesh from './Mesh.svelte'
+
+	interface Props {
 		entity: Entity
-		color?: string
-		model?: Group
-		pose?: Pose
-		renderMode?: 'model' | 'colliders' | 'colliders+model'
-		ref?: Group
-		children?: Snippet<[{ ref: Group }]>
+		children?: Snippet
 	}
 
-	let {
-		entity,
-		color: overrideColor,
-		model,
-		renderMode = 'colliders',
-		pose,
-		ref = $bindable(),
-		children,
-		...rest
-	}: Props = $props()
+	const { entity, children }: Props = $props()
 
-	const colorUtil = new Color()
+	const settings = useSettings()
 
 	const { invalidate } = useThrelte()
+	const models = use3DModels()
+
 	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 linePositions = useTrait(() => entity, traits.LinePositions)
-	const lineWidth = useTrait(() => entity, traits.LineWidth)
+	const parent = useTrait(() => entity, traits.Parent)
 	const center = useTrait(() => entity, traits.Center)
-	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
-	const materialProps = useTrait(() => entity, traits.Material)
-	const renderOrder = useTrait(() => entity, traits.RenderOrder)
-
-	const geometryType = $derived.by(() => {
-		if (box.current) return 'box'
-		if (capsule.current) return 'capsule'
-		if (sphere.current) return 'sphere'
-		if (bufferGeometry.current) return 'buffer'
-		if (linePositions.current) return 'line'
-	})
 
-	const color = $derived.by(() => {
-		if (overrideColor) {
-			return overrideColor
-		}
-		if (entityColor.current) {
-			return colorUtil
-				.setRGB(entityColor.current.r, entityColor.current.g, entityColor.current.b)
-				.getHexString()
+	const model = $derived.by(() => {
+		if (!settings.current.renderArmModels.includes('model')) {
+			return
 		}
-		return colors.default
-	})
 
-	const group = new Group()
-	ref = group
-
-	const mesh = $derived.by(() => {
-		if (geometryType === undefined) {
+		if (!name.current) {
 			return
 		}
 
-		const result = geometryType === 'line' ? new Line2() : new Mesh()
-
-		if (geometryType === 'line') {
-			result.raycast = meshBounds
+		const [componentName, id] = name.current.split(':')
+		if (!componentName || !id) {
+			return
 		}
 
-		return result
+		return models.current[componentName]?.[id].clone()
 	})
 
 	$effect.pre(() => {
-		if (mesh && center.current) {
-			poseToObject3d(center.current, mesh)
+		if (model && center.current) {
+			poseToObject3d(center.current, model)
 			invalidate()
 		}
 	})
 
-	const entityPose = useTrait(() => entity, traits.Pose)
-	const resolvedPose = $derived(pose ?? entityPose.current)
-	$effect.pre(() => {
-		if (resolvedPose) {
-			poseToObject3d(resolvedPose, group)
-			invalidate()
-		}
-	})
-
-	let geo = $state.raw<BufferGeometry>()
-
-	const oncreate = (bufferGeometry: BufferGeometry) => {
-		geo = bufferGeometry
-	}
-
-	$effect.pre(() => {
-		if (mesh && bufferGeometry.current) {
-			mesh.geometry = bufferGeometry.current
-			oncreate(bufferGeometry.current)
-
-			return () => {
-				geo = undefined
-				mesh?.geometry?.dispose()
-			}
-		}
-	})
+	const events = useEntityEvents(() => entity)
 </script>
 
-<T
-	is={group}
-	{...rest}
->
-	{#if geometryType}
-		{#if model && renderMode.includes('model')}
-			<T is={model} />
-		{/if}
-
-		{#if !model || renderMode.includes('colliders')}
-			<T
-				is={mesh}
-				name={entity}
-				userData.name={name}
-				renderOrder={renderOrder.current}
-			>
-				{#if linePositions.current}
-					<LineGeometry positions={linePositions.current} />
-				{:else 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}
-					/>
-				{/if}
-
-				{#if linePositions.current}
-					<T
-						is={LineMaterial}
-						{color}
-						width={lineWidth.current ? lineWidth.current * 0.001 : 0.5}
-						depthTest={materialProps.current?.depthTest ?? true}
-					/>
-				{:else}
-					{@const currentOpacity = opacity.current ?? 0.7}
-					<T.MeshToonMaterial
-						{color}
-						side={geometryType === 'buffer' ? DoubleSide : FrontSide}
-						transparent={currentOpacity < 1}
-						depthWrite={currentOpacity === 1}
-						opacity={currentOpacity}
-						depthTest={materialProps.current?.depthTest ?? true}
-					/>
-
-					{#if geo && (renderMode.includes('colliders') || !model)}
-						<T.LineSegments
-							raycast={() => null}
-							bvh={{ enabled: false }}
-						>
-							<T.EdgesGeometry args={[geo, 0]} />
-							<T.LineBasicMaterial color={darkenColor(color, 10)} />
-						</T.LineSegments>
-					{/if}
-				{/if}
-			</T>
-		{/if}
+<Portal id={parent.current}>
+	{#if model}
+		<T is={model} />
 	{/if}
 
-	{#if showAxesHelper.current}
-		<AxesHelper
-			name={entity}
-			width={3}
-			length={0.1}
-		/>
+	{#if settings.current.renderArmModels.includes('colliders') || !model}
+		<Mesh
+			{entity}
+			center={center.current}
+			{...events}
+		>
+			{@render children?.()}
+		</Mesh>
 	{/if}
-
-	{@render children?.({ ref: group })}
-</T>
+</Portal>

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

@@ -1,19 +1,10 @@
-import { type Props as ThrelteProps } from '@threlte/core';
-import { type Snippet } from 'svelte';
-import { Group } from 'three';
 import type { Entity } from 'koota';
-import type { Pose } from '@viamrobotics/sdk';
-interface Props extends ThrelteProps<Group> {
+import type { Snippet } from 'svelte';
+interface Props {
     entity: Entity;
-    color?: string;
-    model?: Group;
-    pose?: Pose;
-    renderMode?: 'model' | 'colliders' | 'colliders+model';
-    ref?: Group;
-    children?: Snippet<[{
-        ref: Group;
-    }]>;
+    children?: Snippet;
 }
-declare const Geometry: import("svelte").Component<Props, {}, "ref">;
+/** Renders a Viam Geometry object */
+declare const Geometry: import("svelte").Component<Props, {}, "">;
 type Geometry = ReturnType<typeof Geometry>;
 export default Geometry;

package/dist/components/Entities/Line.svelte

@@ -5,12 +5,20 @@
 </script>
 
 <script lang="ts">
-	import Frame from './Frame.svelte'
-	import type { Snippet } from 'svelte'
 	import type { Entity } from 'koota'
+	import type { Snippet } from 'svelte'
+
+	import { T, useThrelte } from '@threlte/core'
+	import { meshBounds, Portal, PortalTarget } from '@threlte/extras'
+	import { Line2, LineMaterial } from 'three/examples/jsm/Addons.js'
+
+	import { darkenColor } from '../../color'
 	import { traits, useTrait } from '../../ecs'
+	import { poseToObject3d } from '../../transform'
+
+	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
 	import LineDots from './LineDots.svelte'
-	import { darkenColor } from '../../color'
+	import LineGeometry from './LineGeometry.svelte'
 
 	interface Props {
 		entity: Entity
@@ -19,25 +27,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 mesh = new Line2()
 
-	const resolvedColor = $derived(
-		colorUtil
-			.setRGB(color.current?.r ?? 1, color.current?.g ?? 0, color.current?.b ?? 0)
-			.getHexString()
-	)
+	$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/Line.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Snippet } from 'svelte';
 import type { Entity } from 'koota';
+import type { Snippet } from 'svelte';
 interface Props {
     entity: Entity;
     children?: Snippet;

package/dist/components/Entities/LineDots.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
-	import { BatchedMesh, Matrix4, SphereGeometry, Vector3, type ColorRepresentation } from 'three'
+	import { BatchedMesh, type ColorRepresentation, Matrix4, SphereGeometry, Vector3 } from 'three'
 
 	interface Props {
 		color: ColorRepresentation

package/dist/components/Entities/LineGeometry.svelte

@@ -1,7 +1,7 @@
 <script>
-	import { LineGeometry } from 'three/examples/jsm/Addons.js'
 	import { T } from '@threlte/core'
 	import { untrack } from 'svelte'
+	import { LineGeometry } from 'three/examples/jsm/Addons.js'
 
 	let { positions } = $props()
 

package/dist/components/Entities/Mesh.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import type { Pose } from '@viamrobotics/sdk'
+	import type { Entity } from 'koota'
+
+	import { T, type Props as ThrelteProps, useThrelte } from '@threlte/core'
+	import { type Snippet } from 'svelte'
+	import { BufferGeometry, Color, DoubleSide, FrontSide, Mesh } from 'three'
+
+	import { colors, darkenColor } from '../../color'
+	import { traits, useTrait } from '../../ecs'
+	import { CapsuleGeometry } from '../../three/CapsuleGeometry'
+	import { poseToObject3d } from '../../transform'
+
+	import AxesHelper from '../AxesHelper.svelte'
+
+	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/Entities/Points.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-	import { Points, PointsMaterial, OrthographicCamera } from 'three'
+	import type { Entity } from 'koota'
+	import type { Snippet } from 'svelte'
+
 	import { T, useTask, useThrelte } from '@threlte/core'
 	import { Portal } from '@threlte/extras'
-	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
-	import { poseToObject3d } from '../../transform'
-	import { useSettings } from '../../hooks/useSettings.svelte'
-	import type { Snippet } from 'svelte'
-	import type { Entity } from 'koota'
+	import { OrthographicCamera, Points, PointsMaterial } from 'three'
+
 	import { traits, useTrait } from '../../ecs'
+	import { useSettings } from '../../hooks/useSettings.svelte'
+	import { poseToObject3d } from '../../transform'
+
+	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
 
 	interface Props {
 		entity: Entity

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

@@ -1,6 +1,6 @@
-import { Points } from 'three';
-import type { Snippet } from 'svelte';
 import type { Entity } from 'koota';
+import type { Snippet } from 'svelte';
+import { Points } from 'three';
 interface Props {
     entity: Entity;
     children?: Snippet;

package/dist/components/Entities/Pose.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { traits, useTrait } from '../../ecs'
-	import { usePose } from '../../hooks/usePose.svelte'
-	import { matrixToPose, poseToMatrix } from '../../transform'
 	import type { Pose } from '@viamrobotics/sdk'
 	import type { Entity } from 'koota'
 	import type { Snippet } from 'svelte'
 
+	import { traits, useTrait } from '../../ecs'
+	import { usePose } from '../../hooks/usePose.svelte'
+	import { matrixToPose, poseToMatrix } from '../../transform'
+
 	interface Props {
 		entity: Entity
 		children: Snippet<[{ pose: Pose | undefined }]>

package/dist/components/Entities/hooks/useEntityEvents.svelte.d.ts

@@ -1,5 +1,5 @@
-import { type IntersectionEvent } from '@threlte/extras';
 import type { Entity } from 'koota';
+import { type IntersectionEvent } from '@threlte/extras';
 export declare const useEntityEvents: (entity: () => Entity | undefined) => {
     readonly visible: boolean;
     onpointerenter: (event: IntersectionEvent<MouseEvent>) => void;

package/dist/components/Entities/hooks/useEntityEvents.svelte.js

@@ -1,8 +1,8 @@
 import { useCursor } from '@threlte/extras';
-import { useFocusedEntity, useSelectedEntity } from '../../../hooks/useSelection.svelte';
-import { useVisibility } from '../../../hooks/useVisibility.svelte';
 import { Vector2 } from 'three';
 import { traits } from '../../../ecs';
+import { useFocusedEntity, useSelectedEntity } from '../../../hooks/useSelection.svelte';
+import { useVisibility } from '../../../hooks/useVisibility.svelte';
 import { updateHoverInfo } from '../../../HoverUpdater.svelte';
 import { createPose, matrixToPose, poseToMatrix } from '../../../transform';
 export const useEntityEvents = (entity) => {

package/dist/components/FileDrop/FileDrop.svelte

@@ -1,13 +1,17 @@
 <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 { ToastVariant, useToast } from '@viamrobotics/prime-core'
+
+	import { createBufferGeometry } from '../../attribute'
 	import { traits } from '../../ecs'
-	import { spawnSnapshotEntities } from '../../snapshot'
+	import { useWorld } from '../../ecs/useWorld'
 	import { useCameraControls } from '../../hooks/useControls.svelte'
-	import { createBufferGeometry } from '../../attribute'
+	import { spawnSnapshotEntities } from '../../snapshot'
+
+	import type { FileDropperSuccess } from './file-dropper'
+
+	import { useFileDrop } from './useFileDrop.svelte'
 
 	const props: HTMLAttributes<HTMLDivElement> = $props()
 

package/dist/components/FileDrop/file-dropper.d.ts

@@ -1,6 +1,6 @@
+import type { BufferGeometry } from 'three';
 import type { Snapshot } from '../../buf/draw/v1/snapshot_pb';
 import type { SuccessMessage } from '../../loaders/pcd/messages';
-import type { BufferGeometry } from 'three';
 interface FileDropSuccess {
     success: true;
     name: string;

package/dist/components/FileDrop/pcd-dropper.js

@@ -1,6 +1,6 @@
 import { isArrayBuffer } from 'lodash-es';
-import { FileDropperError } from './file-dropper';
 import { parsePcdInWorker } from '../../loaders/pcd';
+import { FileDropperError } from './file-dropper';
 export const pcdDropper = async (params) => {
     const { name, content } = params;
     if (!isArrayBuffer(content)) {

package/dist/components/FileDrop/ply-dropper.js

@@ -1,6 +1,6 @@
 import { isArrayBuffer } from 'lodash-es';
-import { FileDropperError } from './file-dropper';
 import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader.js';
+import { FileDropperError } from './file-dropper';
 export const plyDropper = async (params) => {
     const { name, content } = params;
     if (!isArrayBuffer(content)) {

package/dist/components/FileDrop/snapshot-dropper.js

@@ -1,5 +1,5 @@
-import { Snapshot } from '../../buf/draw/v1/snapshot_pb';
 import { isArrayBuffer, isString } from 'lodash-es';
+import { Snapshot } from '../../buf/draw/v1/snapshot_pb';
 import { FileDropperError, } from './file-dropper';
 import { Extensions } from './file-names';
 const decodeJson = (params) => {