@viamrobotics/motion-tools 1.9.0 → 1.10.0

package/dist/HoverUpdater.svelte.d.ts

@@ -0,0 +1,19 @@
+import { Vector3 } from 'three';
+import type { Entity } from 'koota';
+import type { IntersectionEvent } from '@threlte/extras';
+export interface HoverInfo {
+    index: number;
+    x: number;
+    y: number;
+    z: number;
+    oX: number;
+    oY: number;
+    oZ: number;
+    theta: number;
+}
+export declare const getClosestArrow: (positions: Float32Array, point: Vector3) => HoverInfo;
+export declare const getClosestPoint: (positions: Float32Array, point: Vector3) => HoverInfo;
+export declare const getPointAtIndex: (positions: Float32Array, index: number) => HoverInfo | null;
+export declare const getArrowAtIndex: (positions: Float32Array, index: number) => HoverInfo | null;
+export declare const updateHoverInfo: (entity: Entity, hoverEvent: IntersectionEvent<MouseEvent>) => HoverInfo | null;
+export declare const getLinkedHoverInfo: (index: number, linkedEntity: Entity) => HoverInfo | null;

package/dist/HoverUpdater.svelte.js

@@ -0,0 +1,120 @@
+import { Vector3 } from 'three';
+import { traits } from './ecs';
+const hoverPosition = new Vector3();
+export const getClosestArrow = (positions, point) => {
+    let smallestDistance = Infinity;
+    let index = -1;
+    for (let i = 0; i < positions.length; i += 6) {
+        const x = positions[i] / 1000;
+        const y = positions[i + 1] / 1000;
+        const z = positions[i + 2] / 1000;
+        const distance = point.distanceToSquared({ x, y, z });
+        if (distance < smallestDistance) {
+            smallestDistance = distance;
+            index = i;
+        }
+    }
+    return {
+        index: Math.floor(index / 6),
+        x: positions[index] / 1000,
+        y: positions[index + 1] / 1000,
+        z: positions[index + 2] / 1000,
+        oX: positions[index + 3],
+        oY: positions[index + 4],
+        oZ: positions[index + 5],
+        theta: 0,
+    };
+};
+export const getClosestPoint = (positions, point) => {
+    let smallestDistance = Infinity;
+    let index = -1;
+    for (let i = 0; i < positions.length; i += 3) {
+        const x = positions[i];
+        const y = positions[i + 1];
+        const z = positions[i + 2];
+        const distance = point.distanceToSquared({ x, y, z });
+        if (distance < smallestDistance) {
+            smallestDistance = distance;
+            index = i;
+        }
+    }
+    return {
+        index: Math.floor(index / 3),
+        x: positions[index],
+        y: positions[index + 1],
+        z: positions[index + 2],
+        oX: 0,
+        oY: 0,
+        oZ: 0,
+        theta: 0,
+    };
+};
+export const getPointAtIndex = (positions, index) => {
+    if (index < 0 || index >= positions.length / 3) {
+        return null;
+    }
+    return {
+        index,
+        x: positions[index * 3],
+        y: positions[index * 3 + 1],
+        z: positions[index * 3 + 2],
+        oX: 0,
+        oY: 0,
+        oZ: 0,
+        theta: 0,
+    };
+};
+export const getArrowAtIndex = (positions, index) => {
+    if (index < 0 || index >= positions.length / 6) {
+        return null;
+    }
+    return {
+        index,
+        x: positions[index * 6] / 1000,
+        y: positions[index * 6 + 1] / 1000,
+        z: positions[index * 6 + 2] / 1000,
+        oX: positions[index * 6 + 3],
+        oY: positions[index * 6 + 4],
+        oZ: positions[index * 6 + 5],
+        theta: 0,
+    };
+};
+export const updateHoverInfo = (entity, hoverEvent) => {
+    const { index, point } = hoverEvent;
+    if (index === -1) {
+        return null;
+    }
+    hoverPosition.set(point.x, point.y, point.z);
+    let hoverInfo = null;
+    if (entity.has(traits.Arrows)) {
+        const closestArrow = getClosestArrow(entity.get(traits.Positions), hoverPosition);
+        if (closestArrow) {
+            hoverInfo = closestArrow;
+        }
+    }
+    else if (entity.has(traits.Points)) {
+        const positions = entity.get(traits.BufferGeometry)?.attributes.position.array;
+        const closestPoint = getClosestPoint(positions, hoverPosition);
+        if (closestPoint) {
+            hoverInfo = closestPoint;
+        }
+    }
+    return hoverInfo;
+};
+export const getLinkedHoverInfo = (index, linkedEntity) => {
+    if (linkedEntity.has(traits.Arrows)) {
+        const closestArrow = getArrowAtIndex(linkedEntity.get(traits.Positions), index);
+        if (closestArrow) {
+            return closestArrow;
+        }
+    }
+    else if (linkedEntity.has(traits.Points)) {
+        const positions = linkedEntity.get(traits.BufferGeometry)?.attributes.position
+            .array;
+        const closestPoint = getPointAtIndex(positions, index);
+        if (closestPoint) {
+            return closestPoint;
+        }
+    }
+    return null;
+};

package/dist/components/App.svelte

@@ -5,20 +5,20 @@
 	import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
 	import type { Struct } from '@viamrobotics/sdk'
 	import Scene from './Scene.svelte'
-	import TreeContainer from './Tree/TreeContainer.svelte'
-	import Details from './Details.svelte'
+	import TreeContainer from './overlay/left-pane/TreeContainer.svelte'
+	import Details from './overlay/Details.svelte'
 	import SceneProviders from './SceneProviders.svelte'
 	import XR from './xr/XR.svelte'
 	import { createPartIDContext } from '../hooks/usePartID.svelte'
-	import Dashboard from './dashboard/Dashboard.svelte'
+	import Dashboard from './overlay/dashboard/Dashboard.svelte'
 	import { domPortal } from '../portal'
 	import { provideSettings } from '../hooks/useSettings.svelte'
 	import FileDrop from './FileDrop/FileDrop.svelte'
 	import { provideWeblabs } from '../hooks/useWeblabs.svelte'
 	import { providePartConfig } from '../hooks/usePartConfig.svelte'
 	import { useViamClient } from '@viamrobotics/svelte-sdk'
-	import LiveUpdatesBanner from './LiveUpdatesBanner.svelte'
-	import ArmPositions from './widgets/ArmPositions.svelte'
+	import LiveUpdatesBanner from './overlay/LiveUpdatesBanner.svelte'
+	import ArmPositions from './overlay/widgets/ArmPositions.svelte'
 	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
 	import type { CameraPose } from '../hooks/useControls.svelte'
 	import { provideWorld } from '../ecs'
@@ -26,8 +26,9 @@
 		provideDrawConnectionConfig,
 		type DrawConnectionConfig,
 	} from '../hooks/useDrawConnectionConfig.svelte'
-	import Camera from './widgets/Camera.svelte'
-	import HoveredEntities from './HoveredEntities.svelte'
+	import Camera from './overlay/widgets/Camera.svelte'
+	import HoveredEntities from './hover/HoveredEntities.svelte'
+	import Settings from './overlay/settings/Settings.svelte'
 
 	interface LocalConfigProps {
 		getLocalPartConfig: () => Struct
@@ -125,37 +126,35 @@
 
 				<XR {@attach domPortal(root)} />
 
-				<Dashboard
-					{@attach domPortal(root)}
-					{dashboard}
-				/>
-
 				{#if settings.current.renderSubEntityHoverDetail}
-					<HoveredEntities {@attach domPortal(root)} />
-				{/if}
-				<Details {@attach domPortal(root)} />
-				{#if environment.current.isStandalone}
-					<LiveUpdatesBanner {@attach domPortal(root)} />
-				{/if}
-
-				{#if !focus}
-					<TreeContainer {@attach domPortal(root)} />
-				{/if}
-
-				{#if !focus && settings.current.enableArmPositionsWidget}
-					<ArmPositions {@attach domPortal(root)} />
-				{/if}
-
-				{#if !focus}
-					{#each currentRobotCameraWidgets as cameraName (cameraName)}
-						<Camera
-							name={cameraName}
-							{@attach domPortal(root)}
-						/>
-					{/each}
+					<HoveredEntities />
 				{/if}
 
-				<FileDrop {@attach domPortal(root)} />
+				<!-- Overlays that need Threlte context -->
+				<div {@attach domPortal(root)}>
+					<FileDrop />
+					<Dashboard {dashboard} />
+					<Details />
+					<Settings />
+
+					{#if environment.current.isStandalone}
+						<LiveUpdatesBanner />
+					{/if}
+
+					{#if !focus}
+						<TreeContainer />
+					{/if}
+
+					{#if !focus && settings.current.enableArmPositionsWidget}
+						<ArmPositions />
+					{/if}
+
+					{#if !focus}
+						{#each currentRobotCameraWidgets as cameraName (cameraName)}
+							<Camera name={cameraName} />
+						{/each}
+					{/if}
+				</div>
 			{/snippet}
 		</SceneProviders>
 	</Canvas>

package/dist/components/CameraControls.svelte

@@ -3,7 +3,7 @@
 	import { CameraControls, type CameraControlsRef, Gizmo, Portal } from '@threlte/extras'
 	import { useCameraControls, useTransformControls } from '../hooks/useControls.svelte'
 	import KeyboardControls from './KeyboardControls.svelte'
-	import Button from './dashboard/Button.svelte'
+	import Button from './overlay/dashboard/Button.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 
 	const cameraControls = useCameraControls()

package/dist/components/Focus.svelte

@@ -4,7 +4,7 @@
 	import { Box3, type Object3D, Vector3 } from 'three'
 	import { TrackballControls as ThreeTrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
 	import Camera from './Camera.svelte'
-	import Button from './dashboard/Button.svelte'
+	import Button from './overlay/dashboard/Button.svelte'
 
 	interface Props {
 		object3d: Object3D

package/dist/components/Frame.svelte

@@ -62,7 +62,7 @@
 		if (!componentName || !id) {
 			return
 		}
-		return componentModels.current?.[componentName]?.[id]
+		return componentModels.current?.[componentName]?.[id].clone()
 	})
 </script>
 

package/dist/components/Geometry2.svelte

@@ -46,6 +46,7 @@
 	const linePositions = useTrait(() => entity, traits.LinePositions)
 	const lineWidth = useTrait(() => entity, traits.LineWidth)
 	const center = useTrait(() => entity, traits.Center)
+	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 
 	const geometryType = $derived.by(() => {
 		if (box.current) return 'box'
@@ -124,10 +125,12 @@
 	{...rest}
 >
 	{#if geometryType}
-		<AxesHelper
-			width={3}
-			length={0.1}
-		/>
+		{#if showAxesHelper.current}
+			<AxesHelper
+				width={3}
+				length={0.1}
+			/>
+		{/if}
 
 		<T
 			is={mesh}
@@ -196,7 +199,7 @@
 				{/if}
 			{/if}
 		</T>
-	{:else}
+	{:else if showAxesHelper.current}
 		<AxesHelper
 			name={name.current}
 			width={3}

package/dist/components/Label.svelte

@@ -17,7 +17,7 @@
 {#if labels && text}
 	<HTML
 		center
-		zIndexRange={[100, 0]}
+		zIndexRange={[3, 0]}
 		class="border-gray-7 border bg-white px-2 py-1 text-xs"
 	>
 		{text}

package/dist/components/MeasureTool/MeasurePoint.svelte

@@ -17,30 +17,32 @@
 >
 	<HTML
 		center
+		zIndexRange={[3, 0]}
 		class="h-2.5 w-2.5 rounded-full bg-black/70"
 	/>
 
 	<HTML
 		class="pointer-events-none mb-2 w-16 -translate-x-1/2 -translate-y-[calc(100%+10px)] border border-black bg-white px-1 py-0.5 text-xs text-wrap"
+		zIndexRange={[3, 0]}
 	>
 		<div class="flex justify-between">
 			<span class="text-subtle-2">x</span>
 			<div>
-				{position[0].toFixed(2)}<span class="text-subtle-2">m</span>
+				{position[0].toFixed(3)}<span class="text-subtle-2">m</span>
 			</div>
 		</div>
 
 		<div class="flex justify-between">
 			<span class="text-subtle-2">y</span>
 			<div>
-				{position[1].toFixed(2)}<span class="text-subtle-2">m</span>
+				{position[1].toFixed(3)}<span class="text-subtle-2">m</span>
 			</div>
 		</div>
 
 		<div class="flex justify-between">
 			<span class="text-subtle-2">z</span>
 			<div>
-				{position[2].toFixed(2)}<span class="text-subtle-2">m</span>
+				{position[2].toFixed(3)}<span class="text-subtle-2">m</span>
 			</div>
 		</div>
 	</HTML>

package/dist/components/MeasureTool/MeasureTool.svelte

@@ -4,20 +4,19 @@
 	import { T } from '@threlte/core'
 	import { HTML, MeshLineGeometry, MeshLineMaterial, Portal } from '@threlte/extras'
 	import { useSettings } from '../../hooks/useSettings.svelte'
-	import Button from '../dashboard/Button.svelte'
+	import Button from '../overlay/dashboard/Button.svelte'
 	import MeasurePoint from './MeasurePoint.svelte'
 	import { useMouseRaycaster } from '../../hooks/useMouseRaycaster.svelte'
 	import { useFocusedEntity } from '../../hooks/useSelection.svelte'
-	import ToggleGroup from '../Overlay/ToggleGroup.svelte'
-	import Popover from '../Overlay/Popover.svelte'
+	import ToggleGroup from '../overlay/ToggleGroup.svelte'
+	import Popover from '../overlay/Popover.svelte'
 
 	const focusedEntity = useFocusedEntity()
 	const settings = useSettings()
 
 	const htmlPosition = new Vector3()
 
-	let step: 'idle' | 'p1' | 'p2' = 'idle'
-
+	let step = $state<'idle' | 'p1' | 'p2'>('idle')
 	let intersection = $state<Intersection>()
 	let p1 = $state.raw<Vector3>()
 	let p2 = $state.raw<Vector3>()
@@ -105,12 +104,12 @@
 						Enabled axes
 						<ToggleGroup
 							multiple
-							buttons={[
-								{ value: 'x', on: settings.current.enableMeasureAxisX },
-								{ value: 'y', on: settings.current.enableMeasureAxisY },
-								{ value: 'z', on: settings.current.enableMeasureAxisZ },
+							options={[
+								{ label: 'x', selected: settings.current.enableMeasureAxisX },
+								{ label: 'y', selected: settings.current.enableMeasureAxisY },
+								{ label: 'z', selected: settings.current.enableMeasureAxisZ },
 							]}
-							onclick={(details) => {
+							onSelect={(details) => {
 								settings.current.enableMeasureAxisX = details.includes('x')
 								settings.current.enableMeasureAxisY = details.includes('y')
 								settings.current.enableMeasureAxisZ = details.includes('z')
@@ -166,9 +165,10 @@
 			<HTML
 				center
 				position={htmlPosition.lerpVectors(p1, p2, 0.5).toArray()}
+				zIndexRange={[3, 0]}
 			>
 				<div class="border border-black bg-white px-1 py-0.5 text-xs">
-					{p1.distanceTo(p2).toFixed(2)}<span class="text-subtle-2">m</span>
+					{p1.distanceTo(p2).toFixed(3)}<span class="text-subtle-2">m</span>
 				</div>
 			</HTML>
 		{/if}

package/dist/components/SceneProviders.svelte

@@ -21,6 +21,7 @@
 	import { provideResourceByName } from '../hooks/useResourceByName.svelte'
 	import { provide3DModels } from '../hooks/use3DModels.svelte'
 	import { providePointcloudObjects } from '../hooks/usePointcloudObjects.svelte'
+	import { provideLinkedEntities } from '../hooks/useLinked.svelte'
 
 	interface Props {
 		cameraPose?: CameraPose
@@ -51,6 +52,7 @@
 	provideFramelessComponents()
 
 	const { focus } = provideSelection()
+	provideLinkedEntities()
 </script>
 
 {@render children({ focus: focus.current !== undefined })}

package/dist/components/hover/HoveredEntities.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { traits, useTrait } from '../../ecs'
+	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
+	import { useFocusedEntity } from '../../hooks/useSelection.svelte'
+	import HoveredEntity from './HoveredEntity.svelte'
+	import LinkedHoveredEntity from './LinkedHoveredEntity.svelte'
+	import { useLinkedEntities } from '../../hooks/useLinked.svelte'
+
+	const selectedEntity = useSelectedEntity()
+	const focusedEntity = useFocusedEntity()
+	const linkedEntities = useLinkedEntities()
+
+	const displayEntity = $derived(selectedEntity.current ?? focusedEntity.current)
+	const isHovered = useTrait(() => displayEntity, traits.Hovered)
+</script>
+
+{#if isHovered}
+	<HoveredEntity />
+
+	{#each linkedEntities.current as entity (entity)}
+		<LinkedHoveredEntity linkedEntity={entity} />
+	{/each}
+{/if}

package/dist/components/hover/HoveredEntity.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { traits, useTrait } from '../../ecs'
+	import HoveredEntityTooltip from './HoveredEntityTooltip.svelte'
+	import { useFocusedEntity, useSelectedEntity } from '../../hooks/useSelection.svelte'
+
+	const selectedEntity = useSelectedEntity()
+	const focusedEntity = useFocusedEntity()
+
+	const displayEntity = $derived(selectedEntity.current ?? focusedEntity.current)
+	const hoverInfo = useTrait(() => displayEntity, traits.InstancedPose)
+</script>
+
+{#if hoverInfo.current}
+	<HoveredEntityTooltip hoverInfo={hoverInfo.current} />
+{/if}

package/dist/components/hover/HoveredEntity.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const HoveredEntity: import("svelte").Component<Record<string, never>, {}, "">;
+type HoveredEntity = ReturnType<typeof HoveredEntity>;
+export default HoveredEntity;

package/dist/components/hover/HoveredEntityTooltip.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { HTML } from '@threlte/extras'
+	import { type HoverInfo } from '../../HoverUpdater.svelte'
+
+	interface Props {
+		hoverInfo: HoverInfo
+	}
+
+	let { hoverInfo }: Props = $props()
+</script>
+
+{#if hoverInfo}
+	<HTML
+		position={[hoverInfo.x, hoverInfo.y, hoverInfo.z]}
+		class="pointer-events-none"
+		zIndexRange={[3, 0]}
+	>
+		<div
+			class="border-medium pointer-events-none relative -mb-2 -translate-x-1/2 -translate-y-full border bg-white px-3 py-2.5 text-xs shadow-md"
+		>
+			<!-- Arrow -->
+			<div
+				class="border-medium absolute -bottom-[5px] left-1/2 size-2.5 -translate-x-1/2 rotate-45 border-r border-b bg-white"
+			></div>
+
+			<div class="flex flex-col gap-2.5">
+				<div>
+					<div class="mb-1"><strong class="font-semibold">index</strong></div>
+					<div>{hoverInfo.index}</div>
+				</div>
+
+				<div>
+					<div class="mb-1">
+						<strong class="font-semibold">world position</strong>
+						<span class="text-subtle-2"> (m)</span>
+					</div>
+					<div class="flex gap-3">
+						<div>
+							<span class="text-subtle-2 mr-1">x </span>{hoverInfo.x.toFixed(2)}
+						</div>
+						<div>
+							<span class="text-subtle-2 mr-1">y </span>{hoverInfo.y.toFixed(2)}
+						</div>
+						<div>
+							<span class="text-subtle-2 mr-1">z </span>{hoverInfo.z.toFixed(2)}
+						</div>
+					</div>
+				</div>
+
+				<div>
+					<div class="mb-1">
+						<strong class="font-semibold">world orientation</strong>
+						<span class="text-subtle-2"> (deg)</span>
+					</div>
+					<div class="flex gap-3">
+						<div>
+							<span class="text-subtle-2 mr-1">x </span>{hoverInfo.oX.toFixed(2)}
+						</div>
+						<div>
+							<span class="text-subtle-2 mr-1">y </span>{hoverInfo.oY.toFixed(2)}
+						</div>
+						<div>
+							<span class="text-subtle-2 mr-1">z </span>{hoverInfo.oZ.toFixed(2)}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</HTML>
+{/if}

package/dist/components/{HoveredEntityTooltip.svelte.d.ts → hover/HoveredEntityTooltip.svelte.d.ts}

@@ -1,6 +1,6 @@
-import type { Entity } from 'koota';
+import { type HoverInfo } from '../../HoverUpdater.svelte';
 interface Props {
-    hoveredEntity: Entity;
+    hoverInfo: HoverInfo;
 }
 declare const HoveredEntityTooltip: import("svelte").Component<Props, {}, "">;
 type HoveredEntityTooltip = ReturnType<typeof HoveredEntityTooltip>;

package/dist/components/hover/LinkedHoveredEntity.svelte

@@ -0,0 +1,55 @@
+<script
+	lang="ts"
+	module
+>
+	import { Parser } from 'expr-eval'
+
+	export const parser = new Parser()
+</script>
+
+<script lang="ts">
+	import { relations, traits } from '../../ecs'
+	import type { Entity } from 'koota'
+	import HoveredEntityTooltip from './HoveredEntityTooltip.svelte'
+	import { getLinkedHoverInfo, type HoverInfo } from '../../HoverUpdater.svelte'
+	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
+	import { useFocusedEntity } from '../../hooks/useSelection.svelte'
+	import { useTrait } from '../../ecs'
+	import { SubEntityLinkType } from '../../ecs/relations'
+
+	interface Props {
+		linkedEntity: Entity
+	}
+
+	let { linkedEntity }: Props = $props()
+
+	const selectedEntity = useSelectedEntity()
+	const focusedEntity = useFocusedEntity()
+	const displayEntity = $derived(selectedEntity.current ?? focusedEntity.current)
+
+	const displayedHoverInfo = useTrait(() => displayEntity, traits.InstancedPose)
+
+	let hoverInfo = $state.raw<HoverInfo | null>(null)
+
+	$effect(() => {
+		if (displayEntity && displayedHoverInfo.current) {
+			const linkType = displayEntity?.get(relations.SubEntityLink(linkedEntity))?.type
+			if (linkType !== SubEntityLinkType.HoverLink) {
+				return
+			}
+			// Index  Mapping is a formula with the variable 'index' in it, available operations can be found here: https://github.com/silentmatt/expr-eval/tree/master
+			const indexMapping =
+				displayEntity?.get(relations.SubEntityLink(linkedEntity))?.indexMapping ?? 'index'
+			const expression = parser.parse(indexMapping)
+			const resolvedIndex = expression.evaluate({ index: displayedHoverInfo.current.index })
+			const linkedHoverInfo = getLinkedHoverInfo(resolvedIndex, linkedEntity)
+			hoverInfo = linkedHoverInfo
+		} else {
+			hoverInfo = null
+		}
+	})
+</script>
+
+{#if hoverInfo}
+	<HoveredEntityTooltip {hoverInfo} />
+{/if}

package/dist/components/hover/LinkedHoveredEntity.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Parser } from 'expr-eval';
+export declare const parser: Parser;
+import type { Entity } from 'koota';
+interface Props {
+    linkedEntity: Entity;
+}
+declare const LinkedHoveredEntity: import("svelte").Component<Props, {}, "">;
+type LinkedHoveredEntity = ReturnType<typeof LinkedHoveredEntity>;
+export default LinkedHoveredEntity;