@viamrobotics/motion-tools 1.15.8 → 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/{Lasso → Selection}/Debug.svelte

@@ -1,7 +1,7 @@
 <!--
 @component
 
-Shows all steps for querying points within a lasso selection
+Shows all steps for querying points within a selection
 -->
 <script lang="ts">
 	import type { Entity } from 'koota'
@@ -11,22 +11,22 @@ Shows all steps for querying points within a lasso selection
 
 	import { traits, useTrait } from '../../ecs'
 
-	import * as lassoTraits from './traits'
+	import * as selectionTraits from './traits'
 
 	const box3 = new Box3()
 	const min = new Vector3()
 	const max = new Vector3()
 
 	interface Props {
-		lasso: Entity
+		selection: Entity
 	}
 
-	let { lasso }: Props = $props()
+	let { selection }: Props = $props()
 
-	const indices = useTrait(() => lasso, lassoTraits.Indices)
-	const positions = useTrait(() => lasso, traits.LinePositions)
-	const box = useTrait(() => lasso, lassoTraits.Box)
-	const boxes = useTrait(() => lasso, lassoTraits.Boxes)
+	const indices = useTrait(() => selection, selectionTraits.Indices)
+	const positions = useTrait(() => selection, traits.LinePositions)
+	const box = useTrait(() => selection, selectionTraits.Box)
+	const boxes = useTrait(() => selection, selectionTraits.Boxes)
 
 	const geometry = new BufferGeometry()
 

package/dist/components/{Lasso → Selection}/Debug.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Entity } from 'koota';
 interface Props {
-    lasso: Entity;
+    selection: Entity;
 }
-/** Shows all steps for querying points within a lasso selection */
+/** Shows all steps for querying points within a selection */
 declare const Debug: import("svelte").Component<Props, {}, "">;
 type Debug = ReturnType<typeof Debug>;
 export default Debug;