@viamrobotics/motion-tools 0.19.2 → 1.0.2

package/dist/components/Entities.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import Pose from './Pose.svelte'
+	import Frame from './Frame.svelte'
+	import Line from './Line.svelte'
+	import Pointcloud from './Pointcloud.svelte'
+	import GLTF from './GLTF.svelte'
+	import Label from './Label.svelte'
+	import { traits, useQuery } from '../ecs'
+	import { Or } from 'koota'
+
+	const frames = useQuery(traits.FramesAPI)
+	const geometries = useQuery(traits.GeometriesAPI)
+	const points = useQuery(traits.PointsGeometry)
+	const lines = useQuery(traits.LineGeometry)
+	const gltfs = useQuery(traits.GLTF)
+	const drawnMeshes = useQuery(
+		traits.DrawAPI,
+		Or(traits.Box, traits.Capsule, traits.Sphere, traits.BufferGeometry, traits.ReferenceFrame)
+	)
+	const worldStateMeshes = useQuery(
+		traits.WorldStateStoreAPI,
+		Or(traits.Box, traits.Capsule, traits.Sphere, traits.BufferGeometry, traits.ReferenceFrame)
+	)
+</script>
+
+{#each drawnMeshes.current as entity (entity)}
+	<Frame {entity}>
+		<Label text={entity.get(traits.Name)} />
+	</Frame>
+{/each}
+
+{#each worldStateMeshes.current as entity (entity)}
+	<Frame {entity}>
+		<Label text={entity.get(traits.Name)} />
+	</Frame>
+{/each}
+
+{#each points.current as entity (entity)}
+	<Pointcloud {entity}>
+		<Label text={entity.get(traits.Name)} />
+	</Pointcloud>
+{/each}
+
+{#each frames.current as entity (entity)}
+	<Pose {entity}>
+		{#snippet children({ pose })}
+			<Frame
+				{pose}
+				{entity}
+			>
+				<Label text={entity.get(traits.Name)} />
+			</Frame>
+		{/snippet}
+	</Pose>
+{/each}
+
+{#each geometries.current as entity (entity)}
+	<Frame {entity}>
+		<Label text={entity.get(traits.Name)} />
+	</Frame>
+{/each}
+
+{#each lines.current as entity (entity)}
+	<Line {entity}>
+		<Label text={entity.get(traits.Name)} />
+	</Line>
+{/each}
+
+{#each gltfs.current as entity (entity)}
+	<GLTF {entity}>
+		<Label text={entity.get(traits.Name)} />
+	</GLTF>
+{/each}

package/dist/components/{WorldObjects.svelte.d.ts → Entities.svelte.d.ts}

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const WorldObjects: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Entities: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type WorldObjects = InstanceType<typeof WorldObjects>;
-export default WorldObjects;
+type Entities = InstanceType<typeof Entities>;
+export default Entities;

package/dist/components/FileDrop.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { useDrawAPI } from '../hooks/useDrawAPI.svelte'
-	import { parsePcdInWorker, WorldObject } from '../lib'
+	import { traits, useWorld } from '../ecs'
+	import { parsePcdInWorker } from '../lib'
 	import { useToast, ToastVariant } from '@viamrobotics/prime-core'
 	import { PLYLoader } from 'three/examples/jsm/Addons.js'
 
 	let { ...rest } = $props()
 
-	const { addPoints, addMesh } = useDrawAPI()
+	const world = useWorld()
 
 	type DropStates = 'inactive' | 'hovering' | 'loading'
 
@@ -102,31 +102,17 @@
 				if (ext === extensions.PCD) {
 					const result = await parsePcdInWorker(new Uint8Array(arrayBuffer))
 
-					addPoints(
-						new WorldObject(
-							file.name,
-							undefined,
-							undefined,
-							{
-								center: undefined,
-								geometryType: {
-									case: 'points',
-									value: result.positions,
-								},
-							},
-							result.colors ? { colors: result.colors } : undefined
-						)
+					world.spawn(
+						traits.Name(file.name),
+						traits.PointsGeometry(result.positions),
+						result.colors ? traits.VertexColors(result.colors) : traits.Color
 					)
 
 					toast({ message: `Loaded ${file.name}`, variant: ToastVariant.Success })
 				} else if (ext === extensions.PLY) {
-					const result = new PLYLoader().parse(arrayBuffer)
-					const worldObject = new WorldObject(file.name, undefined, undefined, {
-						center: undefined,
-						geometryType: { case: 'bufferGeometry', value: result },
-					})
+					const bufferGeometry = new PLYLoader().parse(arrayBuffer)
 
-					addMesh(worldObject)
+					world.spawn(traits.Name(file.name), traits.BufferGeometry(bufferGeometry))
 
 					toast({ message: `Loaded ${file.name}`, variant: ToastVariant.Success })
 				}

package/dist/components/Focus.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
-	import { TrackballControls, Gizmo } from '@threlte/extras'
+	import { TrackballControls, Gizmo, Portal } from '@threlte/extras'
 	import { Box3, type Object3D, Vector3 } from 'three'
 	import { TrackballControls as ThreeTrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
 	import Camera from './Camera.svelte'
-	import Portal from './portal/Portal.svelte'
 	import Button from './dashboard/Button.svelte'
 
 	interface Props {
@@ -46,7 +45,7 @@
 		bind:ref={controls}
 		target={center}
 	>
-		<Gizmo />
+		<Gizmo placement="bottom-right" />
 	</TrackballControls>
 </Camera>
 

package/dist/components/Frame.svelte

@@ -1,45 +1,64 @@
-<script module>
-	const colorUtil = new Color()
-</script>
-
 <script lang="ts">
 	import type { Snippet } from 'svelte'
-	import type { WorldObject } from '../WorldObject.svelte'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
 	import { Color, type Object3D } from 'three'
-	import Geometry from './Geometry.svelte'
+	import Geometry from './Geometry2.svelte'
 	import { useWeblabs } from '../hooks/useWeblabs.svelte'
-	import { useSelected } from '../hooks/useSelection.svelte'
+	import { useSelectedEntity } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import { use3DModels } from '../hooks/use3DModels.svelte'
-	import { colors, darkenColor } from '../color'
+	import { colors, darkenColor, resourceColors } from '../color'
 	import { WEBLABS_EXPERIMENTS } from '../hooks/useWeblabs.svelte'
+	import type { Entity } from 'koota'
+	import { traits, useTrait } from '../ecs'
+	import type { Pose } from '@viamrobotics/sdk'
+	import { useResourceByName } from '../hooks/useResourceByName.svelte'
 
 	interface Props {
-		uuid: string
-		name: string
-		geometry?: WorldObject['geometry']
-		pose: WorldObject['pose']
-		metadata: WorldObject['metadata']
+		entity: Entity
+		pose?: Pose
 		children?: Snippet<[{ ref: Object3D }]>
 	}
 
-	let { uuid, name, ...rest }: Props = $props()
+	let { entity, pose, children }: Props = $props()
 
+	const colorUtil = new Color()
 	const settings = useSettings()
 	const componentModels = use3DModels()
-	const selected = useSelected()
+	const selectedEntity = useSelectedEntity()
+	const resourceByName = useResourceByName()
 	const weblabs = useWeblabs()
-	const events = useObjectEvents(() => uuid)
+	const name = useTrait(() => entity, traits.Name)
+	const entityColor = useTrait(() => entity, traits.Color)
+	const events = useObjectEvents(() => entity)
+	const resourceColor = $derived.by(() => {
+		if (!name.current) {
+			return undefined
+		}
+		const subtype = resourceByName.current[name.current]?.subtype
+		return resourceColors[subtype as keyof typeof resourceColors]
+	})
 
-	const color = $derived(rest.metadata.color ?? colors.default)
+	const color = $derived.by(() => {
+		if (entityColor.current) {
+			return colorUtil.set(entityColor.current.r, entityColor.current.g, entityColor.current.b)
+		}
+		if (resourceColor) {
+			return resourceColor
+		}
+		return colors.default
+	})
 
 	const model = $derived.by(() => {
 		if (!weblabs.isActive(WEBLABS_EXPERIMENTS.MOTION_TOOLS_RENDER_ARM_MODELS)) {
 			return
 		}
 
-		const [componentName, id] = name.split(':')
+		if (!name.current) {
+			return
+		}
+
+		const [componentName, id] = name.current.split(':')
 		if (!componentName || !id) {
 			return
 		}
@@ -48,13 +67,13 @@
 </script>
 
 <Geometry
-	{uuid}
-	{name}
+	{entity}
 	{model}
+	{pose}
+	{children}
 	renderMode={settings.current.renderArmModels}
-	color={selected.current === uuid
+	color={selectedEntity.current === entity
 		? `#${darkenColor(color, 75).getHexString()}`
 		: `#${colorUtil.set(color).getHexString()}`}
 	{...events}
-	{...rest}
 />

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

@@ -1,12 +1,10 @@
 import type { Snippet } from 'svelte';
-import type { WorldObject } from '../WorldObject.svelte';
 import { type Object3D } from 'three';
+import type { Entity } from 'koota';
+import type { Pose } from '@viamrobotics/sdk';
 interface Props {
-    uuid: string;
-    name: string;
-    geometry?: WorldObject['geometry'];
-    pose: WorldObject['pose'];
-    metadata: WorldObject['metadata'];
+    entity: Entity;
+    pose?: Pose;
     children?: Snippet<[{
         ref: Object3D;
     }]>;

package/dist/components/GLTF.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { T, type Props as ThrelteProps } from '@threlte/core'
+	import { Portal, PortalTarget } from '@threlte/extras'
+	import type { Snippet } from 'svelte'
+	import type { Object3D } from 'three'
+	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
+	import type { Entity } from 'koota'
+	import { traits, useTrait } from '../ecs'
+
+	interface Props extends ThrelteProps<Object3D> {
+		entity: Entity
+		children?: Snippet
+	}
+
+	let { entity, children, ...rest }: Props = $props()
+
+	const name = useTrait(() => entity, traits.Name)
+	const parent = useTrait(() => entity, traits.Parent)
+	const gltf = useTrait(() => entity, traits.GLTF)
+	const objectProps = useObjectEvents(() => entity)
+</script>
+
+{#if gltf.current?.scene}
+	<Portal id={parent.current}>
+		<T
+			is={gltf.current.scene as Object3D}
+			name={name.current}
+			{...objectProps}
+			{...rest}
+		>
+			{@render children?.()}
+
+			<PortalTarget id={name.current} />
+		</T>
+	</Portal>
+{/if}

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

@@ -0,0 +1,11 @@
+import { type Props as ThrelteProps } from '@threlte/core';
+import type { Snippet } from 'svelte';
+import type { Object3D } from 'three';
+import type { Entity } from 'koota';
+interface Props extends ThrelteProps<Object3D> {
+    entity: Entity;
+    children?: Snippet;
+}
+declare const GLTF: import("svelte").Component<Props, {}, "">;
+type GLTF = ReturnType<typeof GLTF>;
+export default GLTF;

package/dist/components/Geometry2.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import { T, useThrelte, type Props as ThrelteProps } from '@threlte/core'
+	import { type Snippet } from 'svelte'
+	import {
+		meshBounds,
+		MeshLineMaterial,
+		MeshLineGeometry,
+		Portal,
+		PortalTarget,
+	} from '@threlte/extras'
+	import { BufferGeometry, Color, DoubleSide, FrontSide, Group, 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<Group> {
+		entity: Entity
+		color?: string
+		model?: Group
+		pose?: Pose
+		renderMode?: 'model' | 'colliders' | 'colliders+model'
+		children?: Snippet<[{ ref: Group }]>
+	}
+
+	let {
+		entity,
+		color: overrideColor,
+		model,
+		renderMode = 'colliders',
+		pose,
+		children,
+		...rest
+	}: Props = $props()
+
+	const colorUtil = new Color()
+
+	const { invalidate } = useThrelte()
+	const name = useTrait(() => entity, traits.Name)
+	const parent = useTrait(() => entity, traits.Parent)
+	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 lineGeometry = useTrait(() => entity, traits.LineGeometry)
+	const pointsGeometry = useTrait(() => entity, traits.PointsGeometry)
+	const center = useTrait(() => entity, traits.Center)
+
+	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 (lineGeometry.current) return 'line'
+		if (pointsGeometry.current) return 'points'
+	})
+
+	const color = $derived.by(() => {
+		if (overrideColor) {
+			return overrideColor
+		}
+		if (entityColor.current) {
+			return colorUtil
+				.setRGB(entityColor.current.r, entityColor.current.g, entityColor.current.b)
+				.getHexString()
+		}
+		return colors.default
+	})
+
+	const group = new Group()
+	const mesh = $derived.by(() => {
+		if (geometryType === undefined) {
+			return
+		}
+
+		const result = new Mesh()
+
+		if (geometryType === 'buffer' || geometryType === 'points' || geometryType === 'line') {
+			result.raycast = meshBounds
+		}
+
+		return result
+	})
+
+	$effect.pre(() => {
+		if (mesh && center.current) {
+			poseToObject3d(center.current, mesh)
+			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 = (ref: BufferGeometry) => {
+		geo = ref
+	}
+</script>
+
+<Portal id={parent.current}>
+	<T
+		is={group}
+		{...rest}
+	>
+		{#if geometryType}
+			<AxesHelper
+				width={3}
+				length={0.1}
+			/>
+
+			<T
+				is={mesh}
+				name={name.current}
+				bvh={{ enabled: bufferGeometry.current !== undefined }}
+			>
+				{#if model && renderMode.includes('model')}
+					<T is={model} />
+				{/if}
+
+				{#if !model || renderMode.includes('colliders')}
+					{#if bufferGeometry.current}
+						<T
+							is={bufferGeometry.current}
+							{oncreate}
+						/>
+					{:else if lineGeometry.current}
+						<MeshLineGeometry points={lineGeometry.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}
+
+				{#if lineGeometry.current}
+					<MeshLineMaterial
+						{color}
+						width={0.005}
+					/>
+				{:else}
+					<T.MeshToonMaterial
+						{color}
+						side={geometryType === 'buffer' ? DoubleSide : FrontSide}
+						transparent
+						opacity={opacity.current ?? 0.7}
+					/>
+
+					{#if geo}
+						<T.LineSegments
+							raycast={() => null}
+							bvh={{ enabled: false }}
+						>
+							<T.EdgesGeometry args={[geo, 0]} />
+							<T.LineBasicMaterial color={darkenColor(color, 10)} />
+						</T.LineSegments>
+					{/if}
+				{/if}
+			</T>
+		{:else}
+			<AxesHelper
+				name={name.current}
+				width={3}
+				length={0.1}
+			/>
+		{/if}
+
+		{@render children?.({ ref: group })}
+
+		{#if name.current}
+			<PortalTarget id={name.current} />
+		{/if}
+	</T>
+</Portal>

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

@@ -0,0 +1,18 @@
+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> {
+    entity: Entity;
+    color?: string;
+    model?: Group;
+    pose?: Pose;
+    renderMode?: 'model' | 'colliders' | 'colliders+model';
+    children?: Snippet<[{
+        ref: Group;
+    }]>;
+}
+declare const Geometry2: import("svelte").Component<Props, {}, "">;
+type Geometry2 = ReturnType<typeof Geometry2>;
+export default Geometry2;

package/dist/components/KeyboardControls.svelte

@@ -3,7 +3,7 @@
 	import { useTask } from '@threlte/core'
 	import type { CameraControlsRef } from '@threlte/extras'
 	import { PressedKeys } from 'runed'
-	import { useFocused } from '../hooks/useSelection.svelte'
+	import { useFocusedEntity } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 
 	interface Props {
@@ -12,7 +12,7 @@
 
 	let { cameraControls }: Props = $props()
 
-	const focus = useFocused()
+	const focusedEntity = useFocusedEntity()
 	const settings = useSettings()
 
 	const keys = new PressedKeys()
@@ -93,7 +93,7 @@
 
 	keys.onKeys('escape', () => {
 		if (keys.has('escape')) {
-			focus.set(undefined)
+			focusedEntity.set()
 		}
 	})
 

package/dist/components/Line.svelte

@@ -2,34 +2,31 @@
 	import { T } from '@threlte/core'
 	import { Instance, InstancedMesh } from '@threlte/extras'
 	import Frame from './Frame.svelte'
-	import type { WorldObject } from '../WorldObject.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import type { Snippet } from 'svelte'
+	import type { Entity } from 'koota'
+	import { traits, useTrait } from '../ecs'
 
 	interface Props {
-		object: WorldObject
+		entity: Entity
 		children?: Snippet
 	}
 
-	let { object, children }: Props = $props()
+	let { entity, children }: Props = $props()
 
 	const settings = useSettings()
+	const points = useTrait(() => entity, traits.LineGeometry)
+	const dotColor = useTrait(() => entity, traits.DottedLineColor)
 </script>
 
-<Frame
-	{...object}
-	metadata={{
-		...object.metadata,
-		lineWidth: settings.current.lineWidth,
-	}}
-/>
+<Frame {entity} />
 
-{#if object.metadata.lineDotColor && object.metadata.points}
+{#if dotColor.current && points.current}
 	<InstancedMesh frustumCulled={false}>
 		<T.SphereGeometry />
-		<T.MeshBasicMaterial color={object.metadata.lineDotColor} />
+		<T.MeshBasicMaterial color={[dotColor.current.r, dotColor.current.g, dotColor.current.b]} />
 
-		{#each object.metadata.points as { x, y, z }, i (i)}
+		{#each points.current as { x, y, z }, i (i)}
 			<Instance
 				position.x={x}
 				position.y={y}

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

@@ -1,7 +1,7 @@
-import type { WorldObject } from '../WorldObject.svelte';
 import type { Snippet } from 'svelte';
+import type { Entity } from 'koota';
 interface Props {
-    object: WorldObject;
+    entity: Entity;
     children?: Snippet;
 }
 declare const Line: import("svelte").Component<Props, {}, "">;