@viamrobotics/motion-tools 1.12.3 → 1.13.1

package/dist/components/{Points.svelte → Entities/Points.svelte}

@@ -2,12 +2,12 @@
 	import { Points, PointsMaterial, OrthographicCamera } from 'three'
 	import { T, useTask, useThrelte } from '@threlte/core'
 	import { Portal } from '@threlte/extras'
-	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
-	import { poseToObject3d } from '../transform'
-	import { useSettings } from '../hooks/useSettings.svelte'
+	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 { traits, useTrait } from '../ecs'
+	import { traits, useTrait } from '../../ecs'
 
 	interface Props {
 		entity: Entity
@@ -93,7 +93,7 @@
 		}
 	})
 
-	const events = useObjectEvents(() => entity)
+	const events = useEntityEvents(() => entity)
 
 	const { start, stop } = useTask(
 		() => {

package/dist/components/{Pose.svelte → Entities/Pose.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { traits, useTrait } from '../ecs'
-	import { usePose } from '../hooks/usePose.svelte'
-	import { matrixToPose, poseToMatrix } from '../transform'
+	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'

package/dist/{hooks/useObjectEvents.svelte.d.ts → components/Entities/hooks/useEntityEvents.svelte.d.ts}

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

package/dist/{hooks/useObjectEvents.svelte.js → components/Entities/hooks/useEntityEvents.svelte.js}

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

package/dist/components/FileDrop/file-names.js

@@ -26,13 +26,14 @@ const hasPrefix = (name) => {
 };
 const validatePrefix = (extension, prefix) => {
     switch (prefix) {
-        case Prefixes.Snapshot:
+        case Prefixes.Snapshot: {
             if (extension !== Extensions.JSON &&
                 extension !== Extensions.PB &&
                 extension !== Extensions.PB_GZ) {
                 return new FileNameError(`Only ${Extensions.JSON}, ${Extensions.PB} and ${Extensions.PB_GZ} snapshot files are supported.`);
             }
             break;
+        }
     }
     return undefined;
 };
@@ -76,12 +77,14 @@ export const readFile = (file, reader, extension) => {
     if (!extension)
         return;
     switch (extension) {
-        case Extensions.JSON:
+        case Extensions.JSON: {
             return reader.readAsText(file);
+        }
         case Extensions.PCD:
         case Extensions.PLY:
         case Extensions.PB:
-        case Extensions.PB_GZ:
+        case Extensions.PB_GZ: {
             return reader.readAsArrayBuffer(file);
+        }
     }
 };

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

@@ -81,16 +81,20 @@ const decodeGzip = async (params) => {
 };
 export const snapshotDropper = async (params) => {
     switch (params.extension) {
-        case 'json':
+        case 'json': {
             return decodeJson(params);
-        case 'pb':
+        }
+        case 'pb': {
             return decodeBinary(params);
-        case 'pb.gz':
+        }
+        case 'pb.gz': {
             return decodeGzip(params);
-        default:
+        }
+        default: {
             return {
                 success: false,
                 error: new FileDropperError(`Only ${Extensions.JSON}, ${Extensions.PB} and ${Extensions.PB_GZ} snapshot files are supported.`),
             };
+        }
     }
 };

package/dist/components/FileDrop/useFileDrop.svelte.js

@@ -4,14 +4,17 @@ import { plyDropper } from './ply-dropper';
 import { snapshotDropper } from './snapshot-dropper';
 const createFileDropper = (extension, prefix) => {
     switch (prefix) {
-        case Prefixes.Snapshot:
+        case Prefixes.Snapshot: {
             return snapshotDropper;
+        }
     }
     switch (extension) {
-        case Extensions.PCD:
+        case Extensions.PCD: {
             return pcdDropper;
-        case Extensions.PLY:
+        }
+        case Extensions.PLY: {
             return plyDropper;
+        }
     }
     return undefined;
 };
@@ -74,11 +77,11 @@ export const useFileDrop = (onSuccess, onError) => {
                     prefix,
                     content,
                 });
-                if (!result.success) {
-                    handleError(result.error.message);
+                if (result.success) {
+                    onSuccess(result);
                 }
                 else {
-                    onSuccess(result);
+                    handleError(result.error.message);
                 }
             });
             readFile(file, reader, extension);

package/dist/components/Lasso/Lasso.svelte

@@ -245,16 +245,16 @@
 	}
 
 	$effect(() => {
-		window.addEventListener('keydown', onkeydown)
-		window.addEventListener('keyup', onkeyup)
+		globalThis.addEventListener('keydown', onkeydown)
+		globalThis.addEventListener('keyup', onkeyup)
 		dom.addEventListener('pointerdown', onpointerdown)
 		dom.addEventListener('pointermove', onpointermove)
 		dom.addEventListener('pointerup', onpointerup)
 		dom.addEventListener('pointerleave', onpointerleave)
 
 		return () => {
-			window.removeEventListener('keydown', onkeydown)
-			window.removeEventListener('keyup', onkeyup)
+			globalThis.removeEventListener('keydown', onkeydown)
+			globalThis.removeEventListener('keyup', onkeyup)
 			dom.removeEventListener('pointerdown', onpointerdown)
 			dom.removeEventListener('pointermove', onpointermove)
 			dom.removeEventListener('pointerup', onpointerup)

package/dist/components/PCD.svelte

@@ -2,13 +2,15 @@
 	import { parsePcdInWorker } from '../lib'
 	import { traits, useWorld } from '../ecs'
 	import { createBufferGeometry } from '../attribute'
-	import type { Entity } from 'koota'
+	import type { ConfigurableTrait, Entity } from 'koota'
 
 	interface Props {
 		data: Uint8Array
+		name?: string
+		renderOrder?: number
 	}
 
-	let { data }: Props = $props()
+	let { data, name, renderOrder }: Props = $props()
 
 	const world = useWorld()
 
@@ -18,11 +20,17 @@
 		parsePcdInWorker(data).then(({ positions, colors }) => {
 			const geometry = createBufferGeometry(positions, colors)
 
-			entity = world.spawn(
-				traits.Name('Random points'),
+			const entityTraits: ConfigurableTrait[] = [
+				traits.Name(name ?? 'Random points'),
 				traits.Points,
-				traits.BufferGeometry(geometry)
-			)
+				traits.BufferGeometry(geometry),
+			]
+
+			if (renderOrder) {
+				entityTraits.push(traits.RenderOrder(renderOrder))
+			}
+
+			entity = world.spawn(...entityTraits)
 		})
 
 		return () => {

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

@@ -1,5 +1,7 @@
 interface Props {
     data: Uint8Array;
+    name?: string;
+    renderOrder?: number;
 }
 declare const PCD: import("svelte").Component<Props, {}, "">;
 type PCD = ReturnType<typeof PCD>;

package/dist/components/Scene.svelte

@@ -2,7 +2,7 @@
 	import { ShaderMaterial, Vector3 } from 'three'
 	import { T } from '@threlte/core'
 	import { Environment, Grid, interactivity, PerfMonitor, PortalTarget } from '@threlte/extras'
-	import Entities from './Entities.svelte'
+	import Entities from './Entities/Entities.svelte'
 	import Selected from './Selected.svelte'
 	import Focus from './Focus.svelte'
 	import StaticGeometries from './StaticGeometries.svelte'
@@ -17,7 +17,6 @@
 	import MeasureTool from './MeasureTool/MeasureTool.svelte'
 	import PointerMissBox from './PointerMissBox.svelte'
 	import BatchedArrows from './BatchedArrows.svelte'
-	import Arrows from './Arrows/ArrowGroups.svelte'
 	import hdrImage from '../assets/ferndale_studio_11_1k.hdr'
 
 	interface Props {
@@ -103,7 +102,6 @@
 
 		<Entities />
 		<BatchedArrows />
-		<Arrows />
 	</T.Group>
 
 	{@render children?.()}

package/dist/components/SceneProviders.svelte

@@ -23,6 +23,7 @@
 	import { provide3DModels } from '../hooks/use3DModels.svelte'
 	import { providePointcloudObjects } from '../hooks/usePointcloudObjects.svelte'
 	import { provideLinkedEntities } from '../hooks/useLinked.svelte'
+	import { provideConfigFrames } from '../hooks/useConfigFrames.svelte'
 
 	interface Props {
 		cameraPose?: CameraPose
@@ -43,6 +44,7 @@
 	provideDrawAPI()
 
 	provideResourceByName(() => partID.current)
+	provideConfigFrames()
 	provideFrames(() => partID.current)
 	provideGeometries(() => partID.current)
 	provide3DModels(() => partID.current)

package/dist/components/Selected.svelte

@@ -15,19 +15,17 @@
 	const selectedObject3d = useSelectedObject3d()
 
 	const object = $derived.by(() => {
-		if (!isInstanceOf(selectedObject3d.current, 'Mesh')) {
-			return selectedObject3d.current
+		if (!selectedObject3d.current) {
+			return
 		}
 
 		// Create a clone in the case of meshes, which could be frames with geometries,
 		// so that our bounding box doesn't include children
-		const result = selectedObject3d.current?.clone(false)
-
-		if (result) {
-			selectedObject3d.current?.getWorldPosition(result.position)
-			selectedObject3d.current?.getWorldQuaternion(result.quaternion)
-			return result
+		if (isInstanceOf(selectedObject3d.current, 'Mesh')) {
+			return selectedObject3d.current?.clone(false)
 		}
+
+		return selectedObject3d.current
 	})
 
 	const { start, stop } = useTask(
@@ -44,7 +42,9 @@
 				mesh.getBoundingBoxAt(selectedEntity.instance, box3)
 				obb.fromBox3(box3)
 				obbHelper.setFromOBB(obb)
-			} else {
+			} else if (isInstanceOf(selectedObject3d.current, 'Mesh')) {
+				selectedObject3d.current?.getWorldPosition(object.position)
+				selectedObject3d.current?.getWorldQuaternion(object.quaternion)
 				obbHelper.setFromObject(object)
 			}
 

package/dist/components/StaticGeometries.svelte

@@ -12,7 +12,7 @@
 	import { PressedKeys } from 'runed'
 	import { quaternionToPose, vector3ToPose } from '../transform'
 	import { Quaternion, Vector3 } from 'three'
-	import Frame from './Frame.svelte'
+	import Frame from './Entities/Frame.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import { useWorld, traits } from '../ecs'
 	import type { Entity } from 'koota'
@@ -39,7 +39,7 @@
 		const entity = world.spawn(
 			traits.Name(`custom geometry ${++index}`),
 			traits.Pose,
-			traits.Box({ x: 0.1, y: 0.1, z: 0.1 }),
+			traits.Box({ x: 100, y: 100, z: 100 }),
 			traits.Removable
 		)
 
@@ -87,7 +87,10 @@
 								ref.quaternion.copy(quaternion)
 								entity.set(traits.Pose, pose)
 							} else if (box && mode === 'scale') {
-								entity.set(traits.Box, ref.scale)
+								box.x *= ref.scale.x
+								box.y *= ref.scale.y
+								box.z *= ref.scale.z
+								entity.set(traits.Box, box)
 								ref.scale.setScalar(1)
 							}
 						}}

package/dist/components/overlay/AddRelationship.svelte

@@ -17,7 +17,7 @@
 		return allEntities.current
 			.map((e: Entity) => e.get(traits.Name))
 			.filter((n: string | undefined): n is string => n !== undefined && n !== currentEntityName)
-			.sort()
+			.toSorted()
 	})
 
 	let showRelationshipOptions = $state(false)

package/dist/components/overlay/Details.svelte

@@ -21,7 +21,7 @@
 		useFocusedObject3d,
 		useSelectedObject3d,
 	} from '../../hooks/useSelection.svelte'
-	import { useFrames } from '../../hooks/useFrames.svelte'
+	import { useConfigFrames } from '../../hooks/useConfigFrames.svelte'
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
 	import { FrameConfigUpdater } from '../../FrameConfigUpdater.svelte'
 	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
@@ -37,7 +37,7 @@
 	const world = useWorld()
 	const controls = useCameraControls()
 	const resourceByName = useResourceByName()
-	const frames = useFrames()
+	const configFrames = useConfigFrames()
 	const partConfig = usePartConfig()
 	const selectedEntity = useSelectedEntity()
 	const selectedObject3d = useSelectedObject3d()
@@ -402,7 +402,7 @@
 					{@render ParentFrame({
 						ariaLabel: 'parent frame name',
 						value: parent.current ?? 'world',
-						options: frames.getParentFrameOptions(name.current ?? ''),
+						options: configFrames.getParentFrameOptions(name.current ?? ''),
 						onChange: (value) => {
 							detailConfigUpdater.setFrameParent(entity, value)
 						},

package/dist/components/overlay/FloatingPanel.svelte

@@ -10,6 +10,7 @@
 		defaultSize?: { width: number; height: number }
 		defaultPosition?: { x: number; y: number }
 		exitable?: boolean
+		persistRect?: boolean
 		strategy?: 'absolute' | 'fixed'
 		isOpen?: boolean
 		children: Snippet
@@ -19,6 +20,7 @@
 		title = '',
 		defaultSize = { width: 700, height: 500 },
 		exitable = true,
+		persistRect = true,
 		isOpen = $bindable(false),
 		children,
 		...props
@@ -30,6 +32,7 @@
 		defaultSize,
 		resizable: false,
 		allowOverflow: false,
+		persistRect,
 		open: isOpen,
 		...props,
 	}))

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

@@ -10,6 +10,7 @@ interface Props {
         y: number;
     };
     exitable?: boolean;
+    persistRect?: boolean;
     strategy?: 'absolute' | 'fixed';
     isOpen?: boolean;
     children: Snippet;

package/dist/components/overlay/LiveUpdatesBanner.svelte

@@ -13,12 +13,10 @@
 
 <svelte:window
 	onkeydown={(event) => {
-		if (event.metaKey) {
-			if (event.key.toLowerCase() === 's') {
-				event.preventDefault()
-				event.stopImmediatePropagation()
-				partConfig.save()
-			}
+		if (event.metaKey && event.key.toLowerCase() === 's') {
+			event.preventDefault()
+			event.stopImmediatePropagation()
+			partConfig.save()
 		}
 	}}
 />

package/dist/components/overlay/Logs.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { Portal } from '@threlte/extras'
+	import { useLogs } from '../../hooks/useLogs.svelte'
+	import FloatingPanel from './FloatingPanel.svelte'
+	import DashboardButton from './dashboard/Button.svelte'
+	import { PersistedState } from 'runed'
+
+	const logs = useLogs()
+
+	const isOpen = new PersistedState('logs-is-open', false)
+</script>
+
+<Portal id="dashboard">
+	<fieldset class="relative">
+		<DashboardButton
+			active
+			icon="article"
+			description="Logs"
+			onclick={() => {
+				isOpen.current = !isOpen.current
+			}}
+		/>
+		{#if logs.warnings.length > 0}
+			<span
+				class="absolute z-4 -mt-1.5 -ml-1.5 h-4 w-4 rounded-full bg-yellow-700 text-center text-[10px] text-white"
+			>
+				{logs.warnings.length}
+			</span>
+		{/if}
+
+		{#if logs.errors.length > 0}
+			<span
+				class="absolute z-4 -mt-1.5 -ml-1.5 h-4 rounded-full bg-red-700 px-1.25 text-center text-[10px] text-white"
+			>
+				{logs.errors.length}
+			</span>
+		{/if}
+	</fieldset>
+</Portal>
+
+<FloatingPanel
+	title="Logs"
+	bind:isOpen={isOpen.current}
+	defaultSize={{ width: 240, height: 315 }}
+>
+	<div class="flex h-70 flex-col gap-2 overflow-auto p-3 text-xs">
+		{#each logs.current as log (log.uuid)}
+			<div>
+				<div class="flex flex-wrap items-center gap-1.5">
+					<div
+						class={[
+							'h-2 w-2 rounded-full',
+							{
+								'bg-danger-dark': log.level === 'error',
+								'bg-amber-300': log.level === 'warn',
+								'bg-blue-400': log.level === 'info',
+							},
+						]}
+					></div>
+					<div class="text-subtle-2">{log.timestamp}</div>
+				</div>
+				<div>
+					{#if log.count > 1}
+						<span class="mr-1 rounded bg-green-700 px-1 py-0.5 text-xs text-white">
+							{log.count}
+						</span>
+					{/if}
+					{log.message}
+				</div>
+			</div>
+		{:else}
+			No logs
+		{/each}
+	</div>
+</FloatingPanel>

package/dist/components/overlay/left-pane/TreeContainer.svelte

@@ -3,7 +3,6 @@
 	import Tree from './Tree.svelte'
 	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
 	import { provideTreeExpandedContext } from './useExpanded.svelte'
-	import Logs from './Logs.svelte'
 	import AddFrames from './AddFrames.svelte'
 	import { useEnvironment } from '../../../hooks/useEnvironment.svelte'
 	import { usePartID } from '../../../hooks/usePartID.svelte'
@@ -82,6 +81,4 @@
 	{#if environment.current.isStandalone && partID.current && partConfig.hasEditPermissions}
 		<AddFrames />
 	{/if}
-
-	<Logs />
 </div>

package/dist/components/overlay/settings/Settings.svelte

@@ -285,19 +285,17 @@
 				<Switch
 					on={isWidgetOpen}
 					on:change={(event) => {
-						if (event.detail) {
-							settings.current.openCameraWidgets = {
-								...settings.current.openCameraWidgets,
-								[partID.current]: [...currentRobotCameraWidgets, camera.name],
-							}
-						} else {
-							settings.current.openCameraWidgets = {
-								...settings.current.openCameraWidgets,
-								[partID.current]: currentRobotCameraWidgets.filter(
-									(widget) => widget !== camera.name
-								),
-							}
-						}
+						settings.current.openCameraWidgets = event.detail
+							? {
+									...settings.current.openCameraWidgets,
+									[partID.current]: [...currentRobotCameraWidgets, camera.name],
+								}
+							: {
+									...settings.current.openCameraWidgets,
+									[partID.current]: currentRobotCameraWidgets.filter(
+										(widget) => widget !== camera.name
+									),
+								}
 					}}
 				/>
 			</div>

package/dist/components/overlay/widgets/Camera.svelte

@@ -31,12 +31,14 @@
 	let fpsInterval: ReturnType<typeof setInterval> | undefined
 	let fpsCounterActive = false
 
+	const cleanup = () => {
+		if (fpsInterval) clearInterval(fpsInterval)
+		fpsCounterActive = false
+	}
+
 	// Cleanup on destroy
 	$effect(() => {
-		return () => {
-			if (fpsInterval) clearInterval(fpsInterval)
-			fpsCounterActive = false
-		}
+		return cleanup
 	})
 
 	const onMediaLoad = (e: Event) => {
@@ -89,8 +91,8 @@
 					resolutions = options.map((opt) => ({ width: opt.width, height: opt.height }))
 					isLoading = false
 				})
-				.catch((e) => {
-					error = e instanceof Error ? e.message : 'Failed to get stream options'
+				.catch((error_) => {
+					error = error_ instanceof Error ? error_.message : 'Failed to get stream options'
 					isLoading = false
 				})
 		}
@@ -101,13 +103,13 @@
 		if (!target.value || !streamClient) return
 
 		const [w, h] = target.value.split('x').map(Number)
-		if (isNaN(w) || isNaN(h)) return
+		if (Number.isNaN(w) || Number.isNaN(h)) return
 
 		try {
 			await streamClient.setOptions(name, w, h)
 			error = undefined
-		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to set resolution'
+		} catch (error_) {
+			error = error_ instanceof Error ? error_.message : 'Failed to set resolution'
 		}
 	}
 </script>