@viamrobotics/motion-tools 1.31.0 → 1.32.0

package/dist/components/App.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { Struct } from '@viamrobotics/sdk'
 	import type { Entity } from 'koota'
-	import type { Snippet } from 'svelte'
 
 	import { Canvas } from '@threlte/core'
 	import { PortalTarget } from '@threlte/extras'
 	import { useXR } from '@threlte/xr'
 	import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
 	import { primeTheme } from '@viamrobotics/tweakpane-config'
+	import { onMount, type Snippet } from 'svelte'
 	import { ThemeUtils } from 'svelte-tweakpane-ui'
 
 	import type { FragmentInfo } from '../hooks/usePartConfig.svelte'
@@ -18,7 +18,7 @@
 	import TreeContainer from './overlay/left-pane/TreeContainer.svelte'
 	import Settings from './overlay/settings/Settings.svelte'
 	import XR from './xr/XR.svelte'
-	import { provideWorld } from '../ecs'
+	import { provideWorld, traits, useQuery } from '../ecs'
 	import { type CameraPose, provideCameraControls } from '../hooks/useControls.svelte'
 	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
 	import { providePartConfig } from '../hooks/usePartConfig.svelte'
@@ -107,9 +107,11 @@
 		environment.current.isStandalone = !localConfigProps
 	})
 
-	$effect(() => {
+	onMount(() => {
 		ThemeUtils.setGlobalDefaultTheme(primeTheme)
 	})
+
+	const selected = useQuery(traits.Selected)
 </script>
 
 <div
@@ -118,53 +120,56 @@
 >
 	<Canvas renderMode="on-demand">
 		<SceneProviders>
-			{#snippet children({ focus })}
-				<Scene>
-					{@render appChildren?.()}
-				</Scene>
+			<Scene>
+				{@render appChildren?.()}
+			</Scene>
+
+			<XR {@attach domPortal(root)} />
+
+			{#if settings.current.renderSubEntityHoverDetail}
+				<HoveredEntities />
+			{/if}
+
+			<!-- Overlays that need Threlte context -->
+			<div {@attach domPortal(root)}>
+				<FileDrop />
+				<Dashboard {dashboard} />
+				<Controls />
+
+				{#each selected.current as entity, index (entity)}
+					<Details
+						{entity}
+						{details}
+						style="transform: translate(0, {index * 40}px)"
+					/>
+				{/each}
+
+				{#if environment.current.isStandalone}
+					<LiveUpdatesBanner />
+				{/if}
 
-				<XR {@attach domPortal(root)} />
+				<TreeContainer />
 
-				{#if settings.current.renderSubEntityHoverDetail}
-					<HoveredEntities />
+				{#if settings.current.enableArmPositionsWidget}
+					<ArmPositions />
 				{/if}
 
-				<!-- Overlays that need Threlte context -->
-				<div {@attach domPortal(root)}>
-					<FileDrop />
-					<Dashboard {dashboard} />
-					<Controls />
-					<Details {details} />
-
-					{#if environment.current.isStandalone}
-						<LiveUpdatesBanner />
-					{/if}
-
-					{#if !focus}
-						<TreeContainer />
-					{/if}
-
-					{#if !focus && settings.current.enableArmPositionsWidget}
-						<ArmPositions />
-					{/if}
-
-					{#if !focus && !$isPresenting}
-						{#each currentRobotCameraWidgets as cameraName (cameraName)}
-							<Camera name={cameraName} />
-						{/each}
-
-						{#each currentFramePovWidgets as povFrameName (povFrameName)}
-							<FramePov frameName={povFrameName} />
-						{/each}
-					{/if}
-
-					<PortalTarget id="dom" />
-
-					<Settings />
-					<Logs />
-					<AddFrames />
-				</div>
-			{/snippet}
+				{#if !$isPresenting}
+					{#each currentRobotCameraWidgets as cameraName (cameraName)}
+						<Camera name={cameraName} />
+					{/each}
+
+					{#each currentFramePovWidgets as povFrameName (povFrameName)}
+						<FramePov frameName={povFrameName} />
+					{/each}
+				{/if}
+
+				<PortalTarget id="dom" />
+
+				<Settings />
+				<Logs />
+				<AddFrames />
+			</div>
 		</SceneProviders>
 	</Canvas>
 

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

@@ -1,6 +1,6 @@
 import type { Struct } from '@viamrobotics/sdk';
 import type { Entity } from 'koota';
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import type { FragmentInfo } from '../hooks/usePartConfig.svelte';
 import { type CameraPose } from '../hooks/useControls.svelte';
 interface LocalConfigProps {

package/dist/components/Entities/Arrows/Arrows.svelte

@@ -7,8 +7,7 @@
 
 	import AxesHelper from '../../AxesHelper.svelte'
 	import { useEntityEvents } from '../hooks/useEntityEvents.svelte'
-	import { traits, useTrait } from '../../../ecs'
-	import { useFocusedEntity, useSelectedEntity } from '../../../hooks/useSelection.svelte'
+	import { traits, useTag, useTrait } from '../../../ecs'
 	import { meshBoundsRaycast, raycast } from '../../../three/InstancedArrows/raycast'
 
 	interface Props {
@@ -20,19 +19,17 @@
 
 	const { invalidate } = useThrelte()
 	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
+	const selected = useTag(() => entity, traits.Selected)
 	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 
 	const events = useEntityEvents(() => entity)
-	const selectedEntity = useSelectedEntity()
-	const focusedEntity = useFocusedEntity()
-
-	const displayEntity = $derived(selectedEntity.current ?? focusedEntity.current)
 
 	const raycastFunction = $derived.by(() => {
-		if (displayEntity) {
+		if (selected.current) {
 			return raycast
 		}
+
 		return meshBoundsRaycast
 	})
 

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

@@ -4,7 +4,6 @@ export declare const useEntityEvents: (entity: () => Entity | undefined) => {
     onpointerenter: (event: IntersectionEvent<MouseEvent>) => void;
     onpointermove: (event: IntersectionEvent<MouseEvent>) => void;
     onpointerleave: (event: IntersectionEvent<MouseEvent>) => void;
-    ondblclick: (event: IntersectionEvent<MouseEvent>) => void;
     onpointerdown: (event: IntersectionEvent<MouseEvent>) => void;
     onclick: (event: IntersectionEvent<MouseEvent>) => void;
 };

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

@@ -1,7 +1,6 @@
 import { useCursor } from '@threlte/extras';
 import { MathUtils, Matrix4, Quaternion, Vector2 } from 'three';
-import { traits, useTrait } from '../../../ecs';
-import { useFocusedEntity, useSelectedEntity } from '../../../hooks/useSelection.svelte';
+import { traits, useTrait, useWorld } from '../../../ecs';
 import { updateHoverInfo } from '../../../HoverUpdater.svelte';
 import { OrientationVector } from '../../../three/OrientationVector';
 const tempHoverMatrix = new Matrix4();
@@ -15,8 +14,7 @@ const infoToLocalMatrix = (info, out) => {
 };
 export const useEntityEvents = (entity) => {
     const down = new Vector2();
-    const selectedEntity = useSelectedEntity();
-    const focusedEntity = useFocusedEntity();
+    const world = useWorld();
     const cursor = useCursor();
     const invisible = useTrait(entity, traits.InheritedInvisible);
     const onpointerenter = (event) => {
@@ -80,25 +78,42 @@ export const useEntityEvents = (entity) => {
             currentEntity.remove(traits.InstancedMatrix);
         }
     };
-    const ondblclick = (event) => {
-        if (invisible.current)
-            return;
-        event.stopPropagation();
-        const currentEntity = entity();
-        focusedEntity.set(currentEntity, event.instanceId ?? event.batchId);
-    };
     const onpointerdown = (event) => {
         if (invisible.current)
             return;
         down.copy(event.pointer);
     };
     const onclick = (event) => {
-        if (invisible.current)
+        if (invisible.current) {
             return;
+        }
         event.stopPropagation();
-        if (down.distanceToSquared(event.pointer) < 0.1) {
-            const currentEntity = entity();
-            selectedEntity.set(currentEntity, event.instanceId ?? event.batchId);
+        if (down.distanceToSquared(event.pointer) >= 0.1) {
+            return;
+        }
+        const currentEntity = entity();
+        if (!currentEntity)
+            return;
+        if (event.nativeEvent.shiftKey) {
+            if (currentEntity.has(traits.Selected)) {
+                currentEntity.remove(traits.Selected);
+            }
+            else {
+                currentEntity.add(traits.Selected);
+            }
+        }
+        else {
+            for (const entity of world.query(traits.Selected)) {
+                if (entity !== currentEntity) {
+                    entity.remove(traits.Selected);
+                }
+            }
+            if (!currentEntity.has(traits.Selected)) {
+                currentEntity.add(traits.Selected);
+            }
+        }
+        if (event.instanceId || event.batchId) {
+            currentEntity.add(traits.InstanceId(event.instanceId ?? event.batchId));
         }
     };
     $effect(() => {
@@ -117,7 +132,6 @@ export const useEntityEvents = (entity) => {
         onpointerenter,
         onpointermove,
         onpointerleave,
-        ondblclick,
         onpointerdown,
         onclick,
     };

package/dist/components/InputBindings.svelte

@@ -3,26 +3,14 @@
 
 	import { isInstanceOf, useTask } from '@threlte/core'
 	import { useGamepad, useInputMap, useKeyboard } from '@threlte/extras'
-	import { PressedKeys } from 'runed'
 	import { MathUtils, Vector3 } from 'three'
 
-	import { traits } from '../ecs'
-	import { useFocusedEntity, useSelectedEntity } from '../hooks/useSelection.svelte'
-	import { useSettings } from '../hooks/useSettings.svelte'
-
 	interface Props {
 		cameraControls: CameraControlsRef
 	}
 
 	let { cameraControls }: Props = $props()
 
-	const focusedEntity = useFocusedEntity()
-	const selectedEntity = useSelectedEntity()
-
-	const entity = $derived(focusedEntity.current ?? selectedEntity.current)
-
-	const settings = useSettings()
-
 	const keyboard = useKeyboard()
 	const gamepad = useGamepad()
 	const input = useInputMap(
@@ -125,35 +113,4 @@
 			autoInvalidate: false,
 		}
 	)
-
-	const keys = new PressedKeys()
-
-	keys.onKeys('escape', () => {
-		focusedEntity.set()
-	})
-
-	keys.onKeys('c', () => {
-		settings.current.cameraMode =
-			settings.current.cameraMode === 'perspective' ? 'orthographic' : 'perspective'
-	})
-
-	keys.onKeys('1', () => {
-		settings.current.transformMode = 'translate'
-	})
-
-	keys.onKeys('2', () => {
-		settings.current.transformMode = 'rotate'
-	})
-
-	keys.onKeys('3', () => {
-		settings.current.transformMode = 'scale'
-	})
-
-	keys.onKeys('h', () => {
-		if (entity?.has(traits.Invisible)) {
-			entity.remove(traits.Invisible)
-		} else {
-			entity?.add(traits.Invisible)
-		}
-	})
 </script>

package/dist/components/KeyboardBindings.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { PressedKeys } from 'runed'
+
+	import { traits, useQuery } from '../ecs'
+	import { useSettings } from '../hooks/useSettings.svelte'
+
+	const selected = useQuery(traits.Selected)
+
+	const settings = useSettings()
+	const keys = new PressedKeys()
+
+	keys.onKeys('c', () => {
+		settings.current.cameraMode =
+			settings.current.cameraMode === 'perspective' ? 'orthographic' : 'perspective'
+	})
+
+	keys.onKeys('1', () => {
+		settings.current.transformMode = 'translate'
+	})
+
+	keys.onKeys('2', () => {
+		settings.current.transformMode = 'rotate'
+	})
+
+	keys.onKeys('3', () => {
+		settings.current.transformMode = 'scale'
+	})
+
+	keys.onKeys('h', () => {
+		for (const entity of selected.current) {
+			if (entity?.has(traits.Invisible)) {
+				entity.remove(traits.Invisible)
+			} else {
+				entity?.add(traits.Invisible)
+			}
+		}
+	})
+</script>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const KeyboardBindings: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type KeyboardBindings = InstanceType<typeof KeyboardBindings>;
+export default KeyboardBindings;

package/dist/components/PointerMissBox.svelte

@@ -3,14 +3,15 @@
 	import { MeshDiscardMaterial } from '@threlte/extras'
 	import { BackSide, Mesh, Vector3 } from 'three'
 
+	import { traits, useQuery } from '../ecs'
 	import { useTransformControls } from '../hooks/useControls.svelte'
-	import { useSelectedEntity } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 
 	const { camera } = useThrelte()
 	const settings = useSettings()
-	const selectedEntity = useSelectedEntity()
 	const transformControls = useTransformControls()
+	const selected = useQuery(traits.Selected)
+
 	const cameraDown = new Vector3()
 
 	const enabled = $derived(settings.current.interactionMode === 'navigate')
@@ -32,7 +33,9 @@
 			return
 		}
 
-		selectedEntity.set()
+		for (const entity of selected.current) {
+			entity.remove(traits.Selected)
+		}
 	}}
 >
 	<T.BoxGeometry args={[size, size, size]} />

package/dist/components/Scene.svelte

@@ -4,22 +4,20 @@
 	import { T, useThrelte } from '@threlte/core'
 	import { Environment, Grid, interactivity, PerfMonitor, PortalTarget } from '@threlte/extras'
 	import { useXR } from '@threlte/xr'
-	import { ShaderMaterial, Vector3 } from 'three'
+	import { ShaderMaterial } from 'three'
 
 	import Camera from './Camera.svelte'
 	import Entities from './Entities/Entities.svelte'
-	import Focus from './Focus.svelte'
 	import Selected from './Selected.svelte'
 	import SelectedTransformControls from './SelectedTransformControls.svelte'
 	import StaticGeometries from './StaticGeometries.svelte'
 	import { bvh } from '../hooks/plugins/bvh.svelte'
-	import { useFocusedObject3d } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 
 	import hdrImage from '../assets/ferndale_studio_11_1k.hdr'
 	import BatchedArrows from './BatchedArrows.svelte'
 	import CameraControls from './CameraControls.svelte'
-	import MeasureTool from './MeasureTool/MeasureTool.svelte'
+	import KeyboardBindings from './KeyboardBindings.svelte'
 	import PointerMissBox from './PointerMissBox.svelte'
 	import { useOrigin } from './xr/useOrigin.svelte'
 
@@ -31,7 +29,6 @@
 
 	const threlte = useThrelte()
 	const settings = useSettings()
-	const focusedObject3d = useFocusedObject3d()
 	const origin = useOrigin()
 
 	// @ts-expect-error This is for debugging
@@ -59,8 +56,6 @@
 
 	bvh(raycaster, () => ({ helper: false, enabled: bvhEnabled }))
 
-	const focusedObject = $derived(focusedObject3d.current)
-
 	const { isPresenting } = useXR()
 </script>
 
@@ -68,6 +63,7 @@
 	<PerfMonitor anchorX="right" />
 {/if}
 
+<KeyboardBindings />
 <Environment url={hdrImage} />
 
 <T.Group
@@ -75,47 +71,40 @@
 	rotation.z={origin.rotation}
 >
 	<PointerMissBox />
-	<MeasureTool />
-
-	{#if focusedObject}
-		<Focus object3d={focusedObject} />
-	{:else}
-		{#if !$isPresenting}
-			<Camera position={[3, 3, 3]}>
-				<CameraControls />
-			</Camera>
-		{/if}
-
-		<StaticGeometries />
-		<Selected />
-		<SelectedTransformControls />
-
-		{#if !$isPresenting && settings.current.grid}
-			<Grid
-				oncreate={(ref) => {
-					const material = ref.material as ShaderMaterial
-					material.depthWrite = false
-				}}
-				raycast={() => null}
-				bvh={{ enabled: false }}
-				plane="xy"
-				sectionColor="#333"
-				infiniteGrid
-				renderOrder={999}
-				cellSize={settings.current.gridCellSize}
-				sectionSize={settings.current.gridSectionSize}
-				fadeOrigin={new Vector3()}
-				fadeDistance={settings.current.gridFadeDistance}
-			/>
-		{/if}
+	<SelectedTransformControls />
+
+	{#if !$isPresenting && settings.current.grid}
+		<Grid
+			oncreate={(ref) => {
+				const material = ref.material as ShaderMaterial
+				material.depthWrite = false
+			}}
+			raycast={() => null}
+			bvh={{ enabled: false }}
+			plane="xy"
+			sectionColor="#333"
+			infiniteGrid
+			renderOrder={999}
+			cellSize={settings.current.gridCellSize}
+			sectionSize={settings.current.gridSectionSize}
+			fadeOrigin={[0, 0, 0]}
+			fadeDistance={settings.current.gridFadeDistance}
+		/>
+	{/if}
+
+	{#if !$isPresenting}
+		<Camera position={[3, 3, 3]}>
+			<CameraControls />
+		</Camera>
 	{/if}
 
-	<T.Group attach={focusedObject ? false : undefined}>
-		<PortalTarget />
+	<StaticGeometries />
+	<Selected />
+
+	<PortalTarget />
 
-		<Entities />
-		<BatchedArrows />
-	</T.Group>
+	<Entities />
+	<BatchedArrows />
 
 	{@render children?.()}
 

package/dist/components/SceneProviders.svelte

@@ -19,13 +19,12 @@
 	import { providePointclouds } from '../hooks/usePointclouds.svelte'
 	import { provideRelationships } from '../hooks/useRelationships.svelte'
 	import { provideResourceByName } from '../hooks/useResourceByName.svelte'
-	import { provideSelection } from '../hooks/useSelection.svelte'
 	import { provideWorldStates } from '../hooks/useWorldState.svelte'
 
 	import { provideOrigin } from './xr/useOrigin.svelte'
 
 	interface Props {
-		children: Snippet<[{ focus: boolean }]>
+		children: Snippet
 	}
 
 	let { children }: Props = $props()
@@ -55,8 +54,7 @@
 	provideWorldStates()
 	provideFramelessComponents()
 
-	const { focus } = provideSelection()
 	provideLinkedEntities()
 </script>
 
-{@render children({ focus: focus.current !== undefined })}
+{@render children()}

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

@@ -1,8 +1,6 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    children: Snippet<[{
-        focus: boolean;
-    }]>;
+    children: Snippet;
 }
 declare const SceneProviders: import("svelte").Component<Props, {}, "">;
 type SceneProviders = ReturnType<typeof SceneProviders>;

package/dist/components/Selected.svelte

@@ -1,55 +1,48 @@
 <script lang="ts">
-	import { isInstanceOf, T, useTask, useThrelte } from '@threlte/core'
+	import { T, useTask, useThrelte } from '@threlte/core'
 	import { BatchedMesh, Box3 } from 'three'
 	import { OBB } from 'three/addons/math/OBB.js'
 
-	import type { InstancedArrows } from '../three/InstancedArrows/InstancedArrows'
-
-	import { useSelectedEntity, useSelectedObject3d } from '../hooks/useSelection.svelte'
+	import { traits, useQuery } from '../ecs'
 	import { OBBHelper } from '../three/OBBHelper'
 
 	const box3 = new Box3()
 	const obb = new OBB()
-	const obbHelper = new OBBHelper()
 
-	const { invalidate } = useThrelte()
-	const selectedEntity = useSelectedEntity()
-	const selectedObject3d = useSelectedObject3d()
+	const { scene, invalidate } = useThrelte()
+	const selected = useQuery(traits.Selected)
 
-	const object = $derived(selectedObject3d.current)
+	const obbHelpers = $derived(selected.current.map((entity) => [entity, new OBBHelper()] as const))
 
 	useTask(
 		() => {
-			if (object === undefined) {
-				return
-			}
-
-			if (
-				selectedEntity.instance &&
-				(isInstanceOf(object, 'BatchedMesh') || (object as InstancedArrows).isInstancedArrows)
-			) {
-				const mesh = object as BatchedMesh | InstancedArrows
-				mesh.getBoundingBoxAt(selectedEntity.instance, box3)
-				obb.fromBox3(box3)
-				obbHelper.setFromOBB(obb)
-			} else {
-				obbHelper.setFromObject(object)
+			for (const [entity, obbHelper] of obbHelpers) {
+				const object = scene.getObjectByName(entity as unknown as string)
+				if (!object) continue
+
+				const instance = entity.get(traits.InstanceId)
+				if (instance !== undefined && instance >= 0) {
+					;(object as BatchedMesh).getBoundingBoxAt(instance, box3)
+					obb.fromBox3(box3)
+					obbHelper.setFromOBB(obb)
+				} else {
+					obbHelper.setFromObject(object)
+				}
 			}
 
 			invalidate()
 		},
 		{
-			running: () => selectedEntity.current !== undefined,
+			running: () => selected.current.length > 0,
 			autoInvalidate: false,
 		}
 	)
 </script>
 
-{#if selectedEntity.current}
+{#each obbHelpers as [entity, obbHelper] (entity)}
 	<T
 		is={obbHelper}
-		dispose={false}
 		raycast={() => null}
 		bvh={{ enabled: false }}
 	/>
-{/if}
+{/each}