@viamrobotics/motion-tools 1.31.0 → 1.33.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 { type Component, onMount, type Snippet } from 'svelte'
 	import { ThemeUtils } from 'svelte-tweakpane-ui'
 
 	import type { FragmentInfo } from '../hooks/usePartConfig.svelte'
@@ -17,8 +17,7 @@
 	import Details from './overlay/Details.svelte'
 	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'
@@ -51,7 +50,20 @@
 		localConfigProps?: LocalConfigProps
 
 		/**
-		 * Snippet for THREE objects
+		 * Allows adding additional tabs to the settings panel
+		 */
+		settingsTabs?: {
+			label: string
+			component: Component
+		}[]
+
+		/**
+		 * Allows setting the initial camera pose
+		 */
+		cameraPose?: CameraPose
+
+		/**
+		 * Snippet for Three.js objects
 		 */
 		children?: Snippet
 
@@ -64,11 +76,6 @@
 		 * Snippet to inject items into the details panel
 		 */
 		details?: Snippet<[{ entity: Entity }]>
-
-		/**
-		 * Allows setting the initial camera pose
-		 */
-		cameraPose?: CameraPose
 	}
 
 	let {
@@ -76,6 +83,7 @@
 		inputBindingsEnabled = true,
 		localConfigProps,
 		cameraPose,
+		settingsTabs,
 		children: appChildren,
 		dashboard,
 		details,
@@ -107,9 +115,11 @@
 		environment.current.isStandalone = !localConfigProps
 	})
 
-	$effect(() => {
+	onMount(() => {
 		ThemeUtils.setGlobalDefaultTheme(primeTheme)
 	})
+
+	const selected = useQuery(traits.Selected)
 </script>
 
 <div
@@ -118,53 +128,54 @@
 >
 	<Canvas renderMode="on-demand">
 		<SceneProviders>
-			{#snippet children({ focus })}
-				<Scene>
-					{@render appChildren?.()}
-				</Scene>
+			<Scene>
+				{@render appChildren?.()}
+			</Scene>
+
+			{#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 {settingsTabs} />
+				<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 Component, type Snippet } from 'svelte';
 import type { FragmentInfo } from '../hooks/usePartConfig.svelte';
 import { type CameraPose } from '../hooks/useControls.svelte';
 interface LocalConfigProps {
@@ -14,7 +14,18 @@ interface Props {
     inputBindingsEnabled?: boolean;
     localConfigProps?: LocalConfigProps;
     /**
-     * Snippet for THREE objects
+     * Allows adding additional tabs to the settings panel
+     */
+    settingsTabs?: {
+        label: string;
+        component: Component;
+    }[];
+    /**
+     * Allows setting the initial camera pose
+     */
+    cameraPose?: CameraPose;
+    /**
+     * Snippet for Three.js objects
      */
     children?: Snippet;
     /**
@@ -27,11 +38,7 @@ interface Props {
     details?: Snippet<[{
         entity: Entity;
     }]>;
-    /**
-     * Allows setting the initial camera pose
-     */
-    cameraPose?: CameraPose;
 }
-declare const App: import("svelte").Component<Props, {}, "">;
+declare const App: Component<Props, {}, "">;
 type App = ReturnType<typeof App>;
 export default App;

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,24 +4,21 @@
 	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'
 
 	interface Props {
 		children?: Snippet
@@ -31,8 +28,6 @@
 
 	const threlte = useThrelte()
 	const settings = useSettings()
-	const focusedObject3d = useFocusedObject3d()
-	const origin = useOrigin()
 
 	// @ts-expect-error This is for debugging
 	globalThis.__threlte__ = threlte
@@ -59,8 +54,6 @@
 
 	bvh(raycaster, () => ({ helper: false, enabled: bvhEnabled }))
 
-	const focusedObject = $derived(focusedObject3d.current)
-
 	const { isPresenting } = useXR()
 </script>
 
@@ -68,57 +61,46 @@
 	<PerfMonitor anchorX="right" />
 {/if}
 
+<KeyboardBindings />
 <Environment url={hdrImage} />
 
-<T.Group
-	position={origin.position}
-	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}
-	{/if}
-
-	<T.Group attach={focusedObject ? false : undefined}>
-		<PortalTarget />
-
-		<Entities />
-		<BatchedArrows />
-	</T.Group>
-
-	{@render children?.()}
-
-	<T.DirectionalLight position={[3, 3, 3]} />
-	<T.AmbientLight />
-</T.Group>
+<PointerMissBox />
+<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}
+
+<StaticGeometries />
+<Selected />
+
+<PortalTarget />
+
+<Entities />
+<BatchedArrows />
+
+{@render children?.()}
+
+<T.DirectionalLight position={[3, 3, 3]} />
+<T.AmbientLight />

package/dist/components/SceneProviders.svelte

@@ -19,13 +19,10 @@
 	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()
@@ -38,7 +35,6 @@
 	provideHierarchy()
 	provideWorldMatrix()
 	provideInheritedInvisible()
-	provideOrigin()
 
 	provideRelationships()
 
@@ -55,8 +51,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>;