@viamrobotics/motion-tools 1.16.0 → 1.18.0

package/dist/components/Entities/LineDots.svelte

@@ -1,34 +1,60 @@
+<script
+	lang="ts"
+	module
+>
+	const matrix = new Matrix4()
+	const vec3 = new Vector3()
+	const threeColor = new Color()
+	const rgb = { r: 0, g: 0, b: 0 }
+</script>
+
 <script lang="ts">
 	import { T } from '@threlte/core'
-	import { BatchedMesh, type ColorRepresentation, Matrix4, SphereGeometry, Vector3 } from 'three'
+	import { BatchedMesh, Color, Matrix4, SphereGeometry, Vector3 } from 'three'
+
+	import { asColor, asRGB, isSingleColor, isVertexColors, STRIDE } from '../../buffer'
 
 	interface Props {
-		color: ColorRepresentation
+		colors: Uint8Array
+		opacity: number
 		positions: Float32Array
 		scale: number
 	}
 
-	let { color, positions, scale }: Props = $props()
+	let { colors, opacity, positions, scale }: Props = $props()
 
-	const geometry = new SphereGeometry(1, 16, 16)
+	const geometry = new SphereGeometry(0.5, 16, 16)
 	const vertexCount = geometry.getAttribute('position').count
 	const indexCount = geometry.index?.count ?? vertexCount
 	const mesh = new BatchedMesh(5000, vertexCount, indexCount)
-	const matrix = new Matrix4()
-	const vec3 = new Vector3()
 
 	const geometryID = mesh.addGeometry(geometry)
 
+	const isPerDot = $derived(isVertexColors(colors))
+
+	const meshColor = $derived.by<[number, number, number]>(() => {
+		if (isPerDot) return [1, 1, 1]
+		if (!isSingleColor(colors)) return [0, 0, 0.55]
+		asRGB(colors, rgb)
+		return [rgb.r, rgb.g, rgb.b]
+	})
+
 	$effect(() => {
 		for (let i = 0, l = positions.length; i < l; i += 3) {
+			const dotIndex = i / 3
 			const instance = mesh.addInstance(geometryID)
 			matrix.makeTranslation(positions[i + 0], positions[i + 1], positions[i + 2])
 			matrix.scale(vec3.setScalar(scale))
 			mesh.setMatrixAt(instance, matrix)
+
+			if (isPerDot) {
+				asColor(colors, threeColor, dotIndex * STRIDE.COLORS_RGB)
+				mesh.setColorAt(instance, threeColor)
+			}
 		}
 
 		return () => {
-			for (let i = 0, l = positions.length; i < l; i += 1) {
+			for (let i = 0, l = positions.length / 3; i < l; i += 1) {
 				mesh.deleteInstance(i)
 			}
 		}
@@ -41,5 +67,9 @@
 	bvh={{ enabled: false }}
 	raycast={() => null}
 >
-	<T.MeshBasicMaterial {color} />
+	<T.MeshBasicMaterial
+		color={meshColor}
+		transparent={opacity < 1}
+		{opacity}
+	/>
 </T>

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

@@ -1,6 +1,6 @@
-import { type ColorRepresentation } from 'three';
 interface Props {
-    color: ColorRepresentation;
+    colors: Uint8Array;
+    opacity: number;
     positions: Float32Array;
     scale: number;
 }

package/dist/components/Entities/LineGeometry.svelte

@@ -3,7 +3,7 @@
 	import { untrack } from 'svelte'
 	import { LineGeometry } from 'three/examples/jsm/Addons.js'
 
-	let { positions } = $props()
+	let { positions, colors } = $props()
 
 	let geometry = $state.raw(new LineGeometry())
 
@@ -12,6 +12,7 @@
 			untrack(() => {
 				geometry = new LineGeometry()
 				geometry.setPositions(positions)
+				if (colors) geometry.setColors(colors)
 			})
 		}
 	})

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

@@ -5,8 +5,10 @@ type LineGeometry = {
 };
 declare const LineGeometry: import("svelte").Component<{
     positions: any;
+    colors: any;
 }, {}, "">;
 import { LineGeometry } from 'three/examples/jsm/Addons.js';
 type $$ComponentProps = {
     positions: any;
+    colors: any;
 };

package/dist/components/Entities/Mesh.svelte

@@ -6,6 +6,7 @@
 	import { type Snippet } from 'svelte'
 	import { BufferGeometry, Color, DoubleSide, FrontSide, Mesh } from 'three'
 
+	import { asColor } from '../../buffer'
 	import { colors, darkenColor } from '../../color'
 	import { traits, useTrait } from '../../ecs'
 	import { CapsuleGeometry } from '../../three/CapsuleGeometry'
@@ -26,6 +27,7 @@
 
 	const { invalidate } = useThrelte()
 	const name = useTrait(() => entity, traits.Name)
+	const entityColors = useTrait(() => entity, traits.Colors)
 	const entityColor = useTrait(() => entity, traits.Color)
 	const opacity = useTrait(() => entity, traits.Opacity)
 	const box = useTrait(() => entity, traits.Box)
@@ -41,6 +43,10 @@
 			return overrideColor
 		}
 
+		if (entityColors.current) {
+			return asColor(entityColors.current, colorUtil)
+		}
+
 		if (entityColor.current) {
 			return colorUtil.setRGB(entityColor.current.r, entityColor.current.g, entityColor.current.b)
 		}
@@ -48,6 +54,8 @@
 		return colors.default
 	})
 
+	const currentOpacity = $derived(opacity.current ?? 0.7)
+
 	const mesh = new Mesh()
 
 	$effect.pre(() => {
@@ -97,7 +105,6 @@
 		/>
 	{/if}
 
-	{@const currentOpacity = opacity.current ?? 0.7}
 	<T.MeshToonMaterial
 		{color}
 		side={bufferGeometry.current ? DoubleSide : FrontSide}

package/dist/components/Entities/Points.svelte

@@ -6,10 +6,12 @@
 	import { Portal } from '@threlte/extras'
 	import { OrthographicCamera, Points, PointsMaterial } from 'three'
 
+	import { asColor, isSingleColor } from '../../buffer'
 	import { traits, useTrait } from '../../ecs'
 	import { useSettings } from '../../hooks/useSettings.svelte'
 	import { poseToObject3d } from '../../transform'
 
+	import AxesHelper from '../AxesHelper.svelte'
 	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
 
 	interface Props {
@@ -25,10 +27,12 @@
 	const parent = useTrait(() => entity, traits.Parent)
 	const pose = useTrait(() => entity, traits.Pose)
 	const geometry = useTrait(() => entity, traits.BufferGeometry)
-	const color = useTrait(() => entity, traits.Color)
-	const opacity = useTrait(() => entity, traits.Opacity)
+	const entityColor = useTrait(() => entity, traits.Color)
+	const colors = useTrait(() => entity, traits.Colors)
 	const entityPointSize = useTrait(() => entity, traits.PointSize)
+	const opacity = useTrait(() => entity, traits.Opacity)
 	const invisible = useTrait(() => entity, traits.Invisible)
+	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 
 	const pointSize = $derived(
 		entityPointSize.current ? entityPointSize.current * 0.001 : settings.current.pointSize
@@ -46,8 +50,11 @@
 	$effect.pre(() => {
 		if (geometry.current?.getAttribute('color')) {
 			material.color.set(0xffffff)
-		} else if (color.current) {
-			material.color.setRGB(color.current.r, color.current.g, color.current.b)
+		} else if (entityColor.current) {
+			const { r, g, b } = entityColor.current
+			material.color.setRGB(r, g, b)
+		} else if (colors.current && isSingleColor(colors.current)) {
+			asColor(colors.current, material.color, 0)
 		} else {
 			material.color.set(settings.current.pointColor)
 		}
@@ -57,7 +64,7 @@
 	 * Points transparancy is very costly for the GPU, so we turn it on conservatively
 	 */
 	$effect.pre(() => {
-		if (opacity.current && opacity.current < 1) {
+		if (opacity.current !== undefined && opacity.current < 1) {
 			material.transparent = true
 			material.opacity = opacity.current
 
@@ -99,23 +106,20 @@
 
 	const events = useEntityEvents(() => entity)
 
-	const { start, stop } = useTask(
+	useTask(
 		() => {
 			// If using an orthographic camera, points need to be
 			// resized to half zoom to take up the same screen space.
 			material.size = pointSize * ((camera.current as OrthographicCamera).zoom / 2)
 		},
 		{
-			autoStart: false,
+			running: () => orthographic,
 			autoInvalidate: false,
 		}
 	)
 
 	$effect(() => {
-		if (orthographic) {
-			start()
-		} else {
-			stop()
+		if (!orthographic) {
 			material.size = pointSize
 		}
 	})
@@ -132,6 +136,13 @@
 		>
 			<T is={geometry.current} />
 			<T is={material} />
+			{#if showAxesHelper.current}
+				<AxesHelper
+					name={entity}
+					width={3}
+					length={0.1}
+				/>
+			{/if}
 			{@render children?.()}
 		</T>
 	</Portal>

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

@@ -9,10 +9,10 @@ export const useEntityEvents = (entity) => {
     const selectedEntity = useSelectedEntity();
     const focusedEntity = useFocusedEntity();
     const cursor = useCursor();
-    const currentEntity = $derived(entity());
     const onpointerenter = (event) => {
         event.stopPropagation();
         cursor.onPointerEnter();
+        const currentEntity = entity();
         if (currentEntity && !currentEntity.has(traits.Hovered)) {
             const hoverInfo = updateHoverInfo(currentEntity, event);
             if (hoverInfo) {
@@ -32,7 +32,8 @@ export const useEntityEvents = (entity) => {
     };
     const onpointermove = (event) => {
         event.stopPropagation();
-        if (currentEntity && currentEntity.has(traits.Hovered)) {
+        const currentEntity = entity();
+        if (currentEntity?.has(traits.Hovered)) {
             const hoverInfo = updateHoverInfo(currentEntity, event);
             const hoverPose = createPose(hoverInfo
                 ? {
@@ -67,6 +68,7 @@ export const useEntityEvents = (entity) => {
     const onpointerleave = (event) => {
         event.stopPropagation();
         cursor.onPointerLeave();
+        const currentEntity = entity();
         if (currentEntity?.has(traits.Hovered)) {
             currentEntity.remove(traits.Hovered);
         }
@@ -76,6 +78,7 @@ export const useEntityEvents = (entity) => {
     };
     const ondblclick = (event) => {
         event.stopPropagation();
+        const currentEntity = entity();
         focusedEntity.set(currentEntity, event.instanceId ?? event.batchId);
     };
     const onpointerdown = (event) => {
@@ -84,6 +87,7 @@ export const useEntityEvents = (entity) => {
     const onclick = (event) => {
         event.stopPropagation();
         if (down.distanceToSquared(event.pointer) < 0.1) {
+            const currentEntity = entity();
             selectedEntity.set(currentEntity, event.instanceId ?? event.batchId);
         }
     };

package/dist/components/FileDrop/FileDrop.svelte

@@ -4,6 +4,7 @@
 	import { ToastVariant, useToast } from '@viamrobotics/prime-core'
 
 	import { createBufferGeometry } from '../../attribute'
+	import { ColorFormat } from '../../buf/draw/v1/metadata_pb'
 	import { traits } from '../../ecs'
 	import { useWorld } from '../../ecs/useWorld'
 	import { useCameraControls } from '../../hooks/useControls.svelte'
@@ -40,7 +41,10 @@
 					break
 				}
 				case 'pcd': {
-					const geometry = createBufferGeometry(result.pcd.positions, result.pcd.colors)
+					const geometry = createBufferGeometry(result.pcd.positions, {
+						colors: result.pcd.colors,
+						colorFormat: ColorFormat.RGB,
+					})
 
 					world.spawn(
 						traits.Name(result.name),

package/dist/components/KeyboardControls.svelte

@@ -65,7 +65,7 @@
 		return FALLBACK_SPEED
 	}
 
-	const { start, stop } = useTask(
+	useTask(
 		(delta) => {
 			const dt = delta * 1000
 
@@ -129,19 +129,11 @@
 			}
 		},
 		{
-			autoStart: false,
+			running: () => anyKeysPressed,
 			autoInvalidate: false,
 		}
 	)
 
-	$effect.pre(() => {
-		if (anyKeysPressed) {
-			start()
-		} else {
-			stop()
-		}
-	})
-
 	keys.onKeys('escape', () => {
 		if (keys.has('escape')) {
 			focusedEntity.set()

package/dist/components/PCD.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
 	import type { ConfigurableTrait, Entity } from 'koota'
 
+	import type { InteractionLayerValue } from '../ecs/traits'
+
 	import { createBufferGeometry } from '../attribute'
+	import { ColorFormat } from '../buf/draw/v1/metadata_pb'
 	import { traits, useWorld } from '../ecs'
 	import { parsePcdInWorker } from '../lib'
 
@@ -9,10 +12,11 @@
 		data: Uint8Array
 		name?: string
 		renderOrder?: number
-		oncreate?: (positions: Float32Array, colors: Uint8Array | null) => void
+		interactionLayers?: InteractionLayerValue[]
+		oncreate?: (positions: Float32Array, colors: Uint8Array | undefined) => void
 	}
 
-	let { data, name, renderOrder, oncreate }: Props = $props()
+	let { data, name, renderOrder, interactionLayers, oncreate }: Props = $props()
 
 	const world = useWorld()
 
@@ -20,7 +24,7 @@
 
 	$effect(() => {
 		parsePcdInWorker(data).then(({ positions, colors }) => {
-			const geometry = createBufferGeometry(positions, colors)
+			const geometry = createBufferGeometry(positions, { colors, colorFormat: ColorFormat.RGB })
 
 			const entityTraits: ConfigurableTrait[] = [
 				traits.Name(name ?? 'Random points'),
@@ -31,10 +35,13 @@
 			if (renderOrder) {
 				entityTraits.push(traits.RenderOrder(renderOrder))
 			}
+			if (interactionLayers?.includes('selectTool')) {
+				entityTraits.push(traits.SelectToolInteractionLayer)
+			}
 
 			entity = world.spawn(...entityTraits)
 
-			oncreate?.(positions, colors)
+			oncreate?.(positions, colors ?? undefined)
 		})
 
 		return () => {

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

@@ -1,8 +1,10 @@
+import type { InteractionLayerValue } from '../ecs/traits';
 interface Props {
     data: Uint8Array;
     name?: string;
     renderOrder?: number;
-    oncreate?: (positions: Float32Array, colors: Uint8Array | null) => void;
+    interactionLayers?: InteractionLayerValue[];
+    oncreate?: (positions: Float32Array, colors: Uint8Array | undefined) => void;
 }
 declare const PCD: import("svelte").Component<Props, {}, "">;
 type PCD = ReturnType<typeof PCD>;

package/dist/components/SceneProviders.svelte

@@ -11,6 +11,7 @@
 		provideTransformControls,
 	} from '../hooks/useControls.svelte'
 	import { provideDrawAPI } from '../hooks/useDrawAPI.svelte'
+	import { provideDrawService } from '../hooks/useDrawService.svelte'
 	import { provideFramelessComponents } from '../hooks/useFramelessComponents.svelte'
 	import { provideFrames } from '../hooks/useFrames.svelte'
 	import { provideGeometries } from '../hooks/useGeometries.svelte'
@@ -40,6 +41,7 @@
 
 	provideOrigin()
 	provideDrawAPI()
+	provideDrawService()
 
 	provideResourceByName(() => partID.current)
 	provideConfigFrames()

package/dist/components/Selected.svelte

@@ -18,7 +18,7 @@
 
 	const object = $derived(selectedObject3d.current)
 
-	const { start, stop } = useTask(
+	useTask(
 		() => {
 			if (object === undefined) {
 				return
@@ -39,20 +39,10 @@
 			invalidate()
 		},
 		{
-			autoStart: false,
+			running: () => selectedEntity.current !== undefined,
 			autoInvalidate: false,
 		}
 	)
-
-	$effect.pre(() => {
-		if (selectedEntity.current) {
-			start()
-		} else {
-			stop()
-		}
-
-		invalidate()
-	})
 </script>
 
 {#if selectedEntity.current}

package/dist/components/Selection/Ellipse.svelte

@@ -171,6 +171,7 @@
 
 		for (const pointsEntity of world.query(
 			traits.Points,
+			traits.SelectToolInteractionLayer,
 			Not(selectionTraits.SelectionEnclosedPoints)
 		)) {
 			const geometry = pointsEntity.get(traits.BufferGeometry)

package/dist/components/Selection/Lasso.svelte

@@ -45,6 +45,7 @@
 		world.spawn(
 			traits.LinePositions(new Float32Array([x, y, 0])),
 			traits.LineWidth(1.5),
+			traits.ScreenSpace,
 			traits.RenderOrder(999),
 			traits.Material({ depthTest: false }),
 			traits.Color({ r: 1, g: 0, b: 0 }),
@@ -152,6 +153,7 @@
 
 		for (const pointsEntity of world.query(
 			traits.Points,
+			traits.SelectToolInteractionLayer,
 			Not(selectionTraits.SelectionEnclosedPoints)
 		)) {
 			const geometry = pointsEntity.get(traits.BufferGeometry)

package/dist/components/Selection/Tool.svelte

@@ -1,67 +1,35 @@
 <script lang="ts">
-	import type { BufferGeometry } from 'three'
+	import type { Snippet } from 'svelte'
 
 	import { useThrelte } from '@threlte/core'
 	import { Portal } from '@threlte/extras'
-	import { Button } from '@viamrobotics/prime-core'
 	import { ElementRect } from 'runed'
-	import { BufferGeometryUtils } from 'three/examples/jsm/Addons.js'
 
 	import DashboardButton from '../overlay/dashboard/Button.svelte'
-	import { traits, useWorld } from '../../ecs'
 	import { useSettings } from '../../hooks/useSettings.svelte'
-	import { createBinaryPCD } from '../../pcd'
 
-	import FloatingPanel from '../overlay/FloatingPanel.svelte'
 	import Popover from '../overlay/Popover.svelte'
 	import ToggleGroup from '../overlay/ToggleGroup.svelte'
 	import Ellipse from './Ellipse.svelte'
 	import Lasso from './Lasso.svelte'
-	import * as selectionTraits from './traits'
+	import { provideSelectionPlugin } from './useSelectionPlugin.svelte'
 
 	interface Props {
 		/** Whether to auto-enable lasso mode when the component mounts */
 		enabled?: boolean
-
-		/** Fires when the user has committed to a lasso selection */
-		onSelection: (pcd: Blob) => void
+		children?: Snippet
 	}
 
 	type SelectionType = 'lasso' | 'ellipse'
 
-	let { enabled = false, onSelection }: Props = $props()
+	let { enabled = false, children }: Props = $props()
 
 	const { dom } = useThrelte()
-	const world = useWorld()
 	const settings = useSettings()
 	const isSelectionMode = $derived(settings.current.interactionMode === 'select')
-	let selectionType = $state<SelectionType>('lasso')
-
-	const onCommitClick = () => {
-		const entities = world.query(selectionTraits.SelectionEnclosedPoints)
-
-		const geometries: BufferGeometry[] = []
-		for (const entity of entities) {
-			const geometry = entity.get(traits.BufferGeometry)
-
-			if (geometry) {
-				geometries.push(geometry)
-			}
-		}
-
-		const mergedGeometry = BufferGeometryUtils.mergeGeometries(geometries)
-		const positions = mergedGeometry.getAttribute('position').array as Float32Array
 
-		const pcd = createBinaryPCD(positions)
-
-		onSelection(pcd)
-
-		for (const entity of entities) {
-			if (world.has(entity)) {
-				entity.destroy()
-			}
-		}
-	}
+	provideSelectionPlugin()
+	let selectionType = $state<SelectionType>('lasso')
 
 	$effect(() => {
 		if (isSelectionMode) {
@@ -122,22 +90,5 @@
 {#if isSelectionMode && rect.height > 0 && rect.width > 0}
 	<Ellipse active={selectionType === 'ellipse'} />
 	<Lasso active={selectionType === 'lasso'} />
-
-	<Portal id="dom">
-		<FloatingPanel
-			isOpen
-			exitable={false}
-			title="Lasso"
-			defaultSize={{ width: 445, height: 100 }}
-			defaultPosition={{ x: rect.width / 2 - 200, y: rect.height - 10 - 100 }}
-		>
-			<div class="flex items-center gap-4 p-4 text-xs">
-				Shift + click and drag to make a lasso selection.
-				<Button
-					onclick={onCommitClick}
-					variant="success">Commit selection</Button
-				>
-			</div>
-		</FloatingPanel>
-	</Portal>
+	{@render children?.()}
 {/if}

package/dist/components/Selection/Tool.svelte.d.ts

@@ -1,8 +1,8 @@
+import type { Snippet } from 'svelte';
 interface Props {
     /** Whether to auto-enable lasso mode when the component mounts */
     enabled?: boolean;
-    /** Fires when the user has committed to a lasso selection */
-    onSelection: (pcd: Blob) => void;
+    children?: Snippet;
 }
 declare const Tool: import("svelte").Component<Props, {}, "">;
 type Tool = ReturnType<typeof Tool>;

package/dist/components/Selection/useSelectionPlugin.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { QueryResult, Trait } from 'koota';
+interface SelectionPluginContext {
+    current: QueryResult<[Trait<() => boolean>]>;
+    clearSelections: () => void;
+}
+export declare const provideSelectionPlugin: () => SelectionPluginContext;
+export declare const useSelectionPlugin: () => SelectionPluginContext;
+export {};

package/dist/components/Selection/useSelectionPlugin.svelte.js

@@ -0,0 +1,24 @@
+import { getContext, setContext } from 'svelte';
+import { useQuery, useWorld } from '../../ecs';
+import * as selectionTraits from './traits';
+const key = Symbol('selection-plugin-context');
+export const provideSelectionPlugin = () => {
+    const world = useWorld();
+    const entities = useQuery(selectionTraits.SelectionEnclosedPoints);
+    const ctx = setContext(key, {
+        get current() {
+            return entities.current;
+        },
+        clearSelections() {
+            for (const entity of world.query(selectionTraits.SelectionEnclosedPoints)) {
+                if (world.has(entity)) {
+                    entity.destroy();
+                }
+            }
+        },
+    });
+    return ctx;
+};
+export const useSelectionPlugin = () => {
+    return getContext(key);
+};

package/dist/components/Snapshot.svelte

@@ -24,7 +24,7 @@ Renders a Snapshot protobuf by spawning its transforms and drawings as entities
 	import { useWorld } from '../ecs'
 	import { useCameraControls } from '../hooks/useControls.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
-	import { applySceneMetadata, destroyEntities, spawnSnapshotEntities } from '../snapshot'
+	import { applySceneMetadata, spawnSnapshotEntities } from '../snapshot'
 
 	interface Props {
 		snapshot: SnapshotProto
@@ -78,6 +78,8 @@ Renders a Snapshot protobuf by spawning its transforms and drawings as entities
 	})
 
 	onDestroy(() => {
-		destroyEntities(world, entities)
+		for (const entity of entities) {
+			if (world.has(entity)) entity.destroy()
+		}
 	})
 </script>

package/dist/components/overlay/AddRelationship.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { Entity } from 'koota'
-
 	import { Button, Input, Select } from '@viamrobotics/prime-core'
+	import { type Entity } from 'koota'
 
 	import { relations, traits, useQuery, useTrait } from '../../ecs'
 	import { SubEntityLinkType } from '../../ecs/relations'

package/dist/components/overlay/AddRelationship.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Entity } from 'koota';
+import { type Entity } from 'koota';
 interface Props {
     entity: Entity | undefined;
 }