@viamrobotics/motion-tools 1.9.1 → 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

@@ -27,7 +27,8 @@
 		type DrawConnectionConfig,
 	} from '../hooks/useDrawConnectionConfig.svelte'
 	import Camera from './overlay/widgets/Camera.svelte'
-	import HoveredEntities from './HoveredEntities.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/MeasureTool/MeasurePoint.svelte

@@ -28,21 +28,21 @@
 		<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

@@ -104,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')
@@ -168,7 +168,7 @@
 				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;

package/dist/components/overlay/AddRelationship.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import type { Entity } from 'koota'
+	import { Button, Select, Input } from '@viamrobotics/prime-core'
+	import { traits, useQuery, relations, useTrait } from '../../ecs'
+	import { SubEntityLinkType } from '../../ecs/relations'
+
+	interface Props {
+		entity: Entity | undefined
+	}
+
+	const { entity }: Props = $props()
+
+	const allEntities = useQuery(traits.Name)
+	const name = useTrait(() => entity, traits.Name)
+	const entityNames = $derived.by(() => {
+		const currentEntityName = name.current
+		return allEntities.current
+			.map((e: Entity) => e.get(traits.Name))
+			.filter((n: string | undefined): n is string => n !== undefined && n !== currentEntityName)
+			.sort()
+	})
+
+	let showRelationshipOptions = $state(false)
+	let selectedRelationshipType = $state<string>('')
+	let selectedRelationshipEntity = $state<string>('')
+	let relationshipFormula = $state('index')
+
+	const linkType = $derived.by(() => {
+		return selectedRelationshipType === SubEntityLinkType.HoverLink
+			? SubEntityLinkType.HoverLink
+			: null
+	})
+
+	function resetForm() {
+		selectedRelationshipType = ''
+		selectedRelationshipEntity = ''
+		relationshipFormula = 'index'
+	}
+
+	function handleAdd() {
+		if (!entity || !relationshipFormula.includes('index')) return
+		const selectedEntity = allEntities.current.find(
+			(e: Entity) => e.get(traits.Name) === selectedRelationshipEntity
+		)
+		if (selectedEntity) {
+			entity.add(
+				relations.SubEntityLink(selectedEntity, {
+					indexMapping: relationshipFormula,
+					type: linkType,
+				})
+			)
+		}
+		showRelationshipOptions = false
+		resetForm()
+	}
+</script>
+
+<Button
+	class="mt-2 w-full"
+	icon={showRelationshipOptions ? undefined : 'plus'}
+	variant={showRelationshipOptions ? 'dark' : 'primary'}
+	onclick={() => {
+		if (showRelationshipOptions) {
+			resetForm()
+		}
+		showRelationshipOptions = !showRelationshipOptions
+	}}>{showRelationshipOptions ? 'Cancel' : 'Add Relationship'}</Button
+>
+
+{#if showRelationshipOptions}
+	<div class="mt-2 flex flex-col gap-2">
+		<div>
+			<label
+				for="relationship-type-select"
+				class="text-subtle-2 mb-1 block text-xs">Relationship type</label
+			>
+			<Select
+				id="relationship-type-select"
+				aria-label="Select relationship type"
+				value={selectedRelationshipType}
+				onchange={(event: InputEvent) => {
+					selectedRelationshipType = (event.target as HTMLSelectElement).value as 'HoverLink'
+				}}
+			>
+				<option value="">Select a relationship type...</option>
+				<option value="HoverLink">HoverLink</option>
+			</Select>
+		</div>
+		<div>
+			<label
+				for="relationship-entity-select"
+				class="text-subtle-2 mb-1 block text-xs">Entity</label
+			>
+			<Select
+				id="relationship-entity-select"
+				aria-label="Select entity for relationship"
+				value={selectedRelationshipEntity}
+				onchange={(event: InputEvent) => {
+					selectedRelationshipEntity = (event.target as HTMLSelectElement).value
+				}}
+			>
+				<option value="">Select an entity...</option>
+				{#each entityNames as entityName (entityName)}
+					<option value={entityName}>{entityName}</option>
+				{/each}
+			</Select>
+		</div>
+		<div>
+			<label
+				for="relationship-formula-input"
+				class="text-subtle-2 mb-1 block text-xs">Index mapping</label
+			>
+			<Input
+				on:keydown={(e) => e.stopPropagation()}
+				id="relationship-formula-input"
+				aria-label="Math formula for index mapping"
+				bind:value={relationshipFormula}
+				placeholder="index"
+			/>
+		</div>
+		<div>
+			<Button
+				class="w-full"
+				variant="primary"
+				onclick={handleAdd}
+			>
+				Add
+			</Button>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { Entity } from 'koota';
+interface Props {
+    entity: Entity | undefined;
+}
+declare const AddRelationship: import("svelte").Component<Props, {}, "">;
+type AddRelationship = ReturnType<typeof AddRelationship>;
+export default AddRelationship;