@viamrobotics/motion-tools 1.32.0 → 1.33.1

package/dist/components/App.svelte

@@ -7,7 +7,7 @@
 	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 { type Component, onMount, type Snippet } from 'svelte'
 	import { ThemeUtils } from 'svelte-tweakpane-ui'
 
 	import type { FragmentInfo } from '../hooks/usePartConfig.svelte'
@@ -17,7 +17,6 @@
 	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, traits, useQuery } from '../ecs'
 	import { type CameraPose, provideCameraControls } from '../hooks/useControls.svelte'
 	import { provideEnvironment } from '../hooks/useEnvironment.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,
@@ -124,8 +132,6 @@
 				{@render appChildren?.()}
 			</Scene>
 
-			<XR {@attach domPortal(root)} />
-
 			{#if settings.current.renderSubEntityHoverDetail}
 				<HoveredEntities />
 			{/if}
@@ -166,7 +172,7 @@
 
 				<PortalTarget id="dom" />
 
-				<Settings />
+				<Settings {settingsTabs} />
 				<Logs />
 				<AddFrames />
 			</div>

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/Entities.svelte

@@ -2,12 +2,13 @@
 	import { Not, Or } from 'koota'
 
 	import { traits, useQuery } from '../../ecs'
+	import { useSettings } from '../../hooks/useSettings.svelte'
 
 	import Arrows from './Arrows/ArrowGroups.svelte'
 	import Frame from './Frame.svelte'
 	import Geometry from './Geometry.svelte'
 	import GLTF from './GLTF.svelte'
-	import Label from './Label.svelte'
+	import Labels from './Labels.svelte'
 	import Line from './Line.svelte'
 	import Points from './Points.svelte'
 	import Pose from './Pose.svelte'
@@ -60,56 +61,48 @@
 	const points = useQuery(traits.Points)
 	const lines = useQuery(traits.LinePositions)
 	const gltfs = useQuery(traits.GLTF)
+
+	const settings = useSettings()
+
+	const enableLabels = $derived(settings.current.enableLabels)
 </script>
 
 {#each machineFramesEntities.current as entity (entity)}
 	<Pose {entity}>
-		<Frame {entity}>
-			<Label text={entity.get(traits.Name)} />
-		</Frame>
+		<Frame {entity} />
 	</Pose>
 {/each}
 
 {#each resourceGeometriesEntities.current as entity (entity)}
-	<Geometry {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</Geometry>
+	<Geometry {entity} />
 {/each}
 
 {#each worldStateEntities.current as entity (entity)}
-	<Frame {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</Frame>
+	<Frame {entity} />
 {/each}
 
 {#each drawServiceEntities.current as entity (entity)}
-	<Frame {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</Frame>
+	<Frame {entity} />
 {/each}
 
 {#each meshEntities.current as entity (entity)}
-	<Frame {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</Frame>
+	<Frame {entity} />
 {/each}
 
 {#each points.current as entity (entity)}
-	<Points {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</Points>
+	<Points {entity} />
 {/each}
 
 {#each lines.current as entity (entity)}
-	<Line {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</Line>
+	<Line {entity} />
 {/each}
 
 {#each gltfs.current as entity (entity)}
-	<GLTF {entity}>
-		<Label text={entity.get(traits.Name)} />
-	</GLTF>
+	<GLTF {entity} />
 {/each}
 
 <Arrows />
+
+{#if enableLabels}
+	<Labels />
+{/if}

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

@@ -1,18 +1,3 @@
-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 Entities: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Entities = InstanceType<typeof Entities>;
+declare const Entities: import("svelte").Component<Record<string, never>, {}, "">;
+type Entities = ReturnType<typeof Entities>;
 export default Entities;

package/dist/components/Entities/Label.svelte

@@ -1,25 +1,91 @@
 <script lang="ts">
+	import type { Entity } from 'koota'
+
+	import { useThrelte } from '@threlte/core'
 	import { HTML } from '@threlte/extras'
+	import { untrack } from 'svelte'
+	import { Group } from 'three'
+
+	import { traits, useTag, useTrait } from '../../ecs'
 
-	import { useSettings } from '../../hooks/useSettings.svelte'
+	import { labels } from './labelLayout/labelStore.svelte'
 
 	interface Props {
-		text?: string
+		entity: Entity
 	}
 
-	let { text }: Props = $props()
+	let { entity }: Props = $props()
+
+	const { invalidate } = useThrelte()
+
+	const matrix = useTrait(() => entity, traits.WorldMatrix)
+	const name = useTrait(() => entity, traits.Name)
+	const color = useTrait(() => entity, traits.Color)
+	const selected = useTag(() => entity, traits.Selected)
+
+	let element = $state.raw<HTMLElement>()
+
+	$effect(() => {
+		const el = element
+
+		if (!el) return
+
+		return untrack(() => {
+			labels.add(el)
+			return () => labels.remove(el)
+		})
+	})
+
+	// Re-measure when the label text changes (its width drives slot geometry).
+	$effect(() => {
+		if (name.current) {
+			untrack(() => labels.touch())
+		}
+	})
 
-	const settings = useSettings()
+	let ref = $state<Group>()
 
-	const labels = $derived(settings.current.enableLabels)
+	$effect(() => {
+		if (matrix.current && ref) {
+			ref.matrix.copy(matrix.current)
+			ref.updateMatrixWorld()
+			invalidate()
+		}
+	})
 </script>
 
-{#if labels && text}
-	<HTML
-		center
-		zIndexRange={[3, 0]}
-		class="border-gray-7 border bg-white px-2 py-1 text-xs"
+<HTML
+	center
+	zIndexRange={[3, 0]}
+	matrixAutoUpdate={false}
+	bind:ref
+>
+	<div
+		class="label relative h-0 w-0"
+		bind:this={element}
 	>
-		{text}
-	</HTML>
-{/if}
+		<svg class="link pointer-events-none absolute top-0 left-0 overflow-visible">
+			<line class="stroke-gray-9 stroke-1" />
+		</svg>
+		<div
+			class="dot border-gray-9 pointer-events-none absolute -top-1 -left-0 z-1 h-2 w-2 -translate-1/2 rounded-full border"
+		></div>
+		<button
+			class={[
+				'border-gray-9 text absolute z-2 border px-2 py-1 text-xs text-nowrap',
+				{
+					'bg-gray-9 text-white': selected.current,
+					'bg-white': !selected.current,
+				},
+			]}
+			style={color.current
+				? `border-color-left: rgb(${color.current.r}, ${color.current.g}, ${color.current.b})`
+				: undefined}
+			onclick={() => {
+				entity.add(traits.Selected)
+			}}
+		>
+			{name.current}
+		</button>
+	</div>
+</HTML>

package/dist/components/Entities/Label.svelte.d.ts

@@ -1,5 +1,6 @@
+import type { Entity } from 'koota';
 interface Props {
-    text?: string;
+    entity: Entity;
 }
 declare const Label: import("svelte").Component<Props, {}, "">;
 type Label = ReturnType<typeof Label>;

package/dist/components/Entities/Labels.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { useTask, useThrelte } from '@threlte/core'
+
+	import { traits, useQuery } from '../../ecs'
+
+	import Label from './Label.svelte'
+	import { createLabelLayout } from './labelLayout/createLabelLayout'
+	import { labels } from './labelLayout/labelStore.svelte'
+
+	const { camera, invalidate, size } = useThrelte()
+
+	const entities = useQuery(traits.Name)
+
+	const layout = createLabelLayout({ camera, size, invalidate, labels })
+
+	// Wake the on-demand render loop when labels are added/removed or their text
+	// changes, so the engine re-solves even while the camera is still. Reading
+	// `version` registers the reactive dependency.
+	$effect(() => {
+		if (labels.version >= 0) invalidate()
+	})
+
+	// `autoInvalidate: false` — the engine drives its own invalidation (camera
+	// motion, the version effect above, and while animating), so the task can run
+	// without pinning the on-demand Canvas to render every frame.
+	useTask(
+		(delta) => {
+			layout.frame(delta)
+		},
+		{ autoInvalidate: false }
+	)
+</script>
+
+{#each entities.current as entity (entity)}
+	<Label {entity} />
+{/each}

package/dist/components/Entities/Labels.svelte.d.ts

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

package/dist/components/Entities/LineDots.svelte

@@ -41,9 +41,15 @@
 
 	$effect(() => {
 		if (!positions) return
+		// Track the IDs `addInstance` returns rather than assuming they're a
+		// sequential 0..N-1 range — when positions changes (e.g. a line gizmo
+		// being placed), cleanup-by-index would target slots that were never
+		// allocated for this effect run and throw "Invalid instanceId".
+		const instances: number[] = []
 		for (let i = 0, l = positions.length; i < l; i += 3) {
 			const dotIndex = i / 3
 			const instance = mesh.addInstance(geometryID)
+			instances.push(instance)
 			matrix.makeTranslation(positions[i + 0], positions[i + 1], positions[i + 2])
 			matrix.scale(vec3.setScalar(scale))
 			mesh.setMatrixAt(instance, matrix)
@@ -55,9 +61,8 @@
 		}
 
 		return () => {
-			if (!positions) return
-			for (let i = 0, l = positions.length / 3; i < l; i += 1) {
-				mesh.deleteInstance(i)
+			for (const instance of instances) {
+				mesh.deleteInstance(instance)
 			}
 		}
 	})

package/dist/components/Entities/labelLayout/applyTeleports.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Post-solve teleport handling: decides which nodes snap to their solved target
+ * this frame versus ease toward it. A big camera jump (large median anchor
+ * displacement) or a brand-new node (no prior anchor) places labels in their
+ * final spot rather than gliding across the screen; everything else eases.
+ * Always rolls each node's prevAx/prevAy forward for the next solve's comparison.
+ */
+import type { LabelNode, SolverConfig } from './types';
+export declare const applyTeleports: (nodes: LabelNode[], width: number, height: number, config: SolverConfig) => void;

package/dist/components/Entities/labelLayout/applyTeleports.js

@@ -0,0 +1,39 @@
+/**
+ * Post-solve teleport handling: decides which nodes snap to their solved target
+ * this frame versus ease toward it. A big camera jump (large median anchor
+ * displacement) or a brand-new node (no prior anchor) places labels in their
+ * final spot rather than gliding across the screen; everything else eases.
+ * Always rolls each node's prevAx/prevAy forward for the next solve's comparison.
+ */
+/** The radius of a node's outermost slot (0 if it has none). */
+const maxSlotRadius = (node) => {
+    const last = node.slots.at(-1);
+    return last ? last.radius : 0;
+};
+export const applyTeleports = (nodes, width, height, config) => {
+    const diag = Math.hypot(width, height);
+    const displacements = [];
+    for (const node of nodes) {
+        if (!Number.isNaN(node.prevAx)) {
+            displacements.push(Math.hypot(node.ax - node.prevAx, node.ay - node.prevAy));
+        }
+    }
+    let snapAll = displacements.length === 0;
+    if (!snapAll) {
+        displacements.sort((a, b) => a - b);
+        const median = displacements[displacements.length >> 1];
+        if (median > config.teleportFrac * diag)
+            snapAll = true;
+    }
+    for (const node of nodes) {
+        const ownJump = !Number.isNaN(node.prevAx) &&
+            Math.hypot(node.ax - node.prevAx, node.ay - node.prevAy) > maxSlotRadius(node) * 3;
+        if (snapAll || ownJump) {
+            node.cx = node.tx;
+            node.cy = node.ty;
+            node.settled = true;
+        }
+        node.prevAx = node.ax;
+        node.prevAy = node.ay;
+    }
+};

package/dist/components/Entities/labelLayout/buildNeighborhood.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Builds each node's pruned, symmetric interaction set for one solve. The cell
+ * size is chosen so any two labels whose boxes could possibly interact share or
+ * border a cell, so the 3x3 query around each node finds every candidate.
+ */
+import type { SpatialHash } from './spatialHash';
+import type { LabelNode, SolverConfig } from './types';
+export declare const buildNeighborhood: (grid: SpatialHash, nodes: LabelNode[], config: SolverConfig) => void;

package/dist/components/Entities/labelLayout/buildNeighborhood.js

@@ -0,0 +1,26 @@
+/**
+ * Builds each node's pruned, symmetric interaction set for one solve. The cell
+ * size is chosen so any two labels whose boxes could possibly interact share or
+ * border a cell, so the 3x3 query around each node finds every candidate.
+ */
+export const buildNeighborhood = (grid, nodes, config) => {
+    const maxRingMult = Math.max(...config.ringRadiiCrowded);
+    // Cell size so any two labels whose boxes could interact share/border a cell.
+    let cell = 1;
+    for (const node of nodes) {
+        const halfDiag = Math.hypot(node.w / 2, node.h / 2);
+        const support = Math.max(node.w, node.h) / 2;
+        const outer = (support + node.dotR + config.dotPadding) * maxRingMult;
+        cell = Math.max(cell, 2 * (halfDiag + outer));
+    }
+    grid.build(nodes, cell);
+    // Symmetric neighbourhoods so the solver's incremental bookkeeping stays exact.
+    for (const node of nodes)
+        node.neighbors = grid.queryNeighbors(node, config.maxNeighbors);
+    for (const a of nodes) {
+        for (const b of a.neighbors) {
+            if (!b.neighbors.includes(a))
+                b.neighbors.push(a);
+        }
+    }
+};

package/dist/components/Entities/labelLayout/cameraHash.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A cheap, exact change-signal for the camera. Hashing the view + projection
+ * matrices (as raw float bits) plus the viewport size catches every pan, orbit,
+ * dolly, zoom, resize, and perspective/orthographic swap with no epsilon to tune.
+ * Computed every frame; the layout only re-solves when the hash changes.
+ */
+import type { Camera } from 'three';
+export declare function cameraMatrixHash(camera: Camera, width: number, height: number): number;

package/dist/components/Entities/labelLayout/cameraHash.js

@@ -0,0 +1,25 @@
+/**
+ * A cheap, exact change-signal for the camera. Hashing the view + projection
+ * matrices (as raw float bits) plus the viewport size catches every pan, orbit,
+ * dolly, zoom, resize, and perspective/orthographic swap with no epsilon to tune.
+ * Computed every frame; the layout only re-solves when the hash changes.
+ */
+const f32 = new Float32Array(1);
+const i32 = new Int32Array(f32.buffer);
+function bits(value) {
+    f32[0] = value;
+    return i32[0];
+}
+export function cameraMatrixHash(camera, width, height) {
+    camera.updateMatrixWorld();
+    const view = camera.matrixWorldInverse.elements;
+    const proj = camera.projectionMatrix.elements;
+    let h = 2166136261 >>> 0;
+    for (let i = 0; i < 16; i++)
+        h = Math.imul(h ^ bits(view[i]), 16777619) >>> 0;
+    for (let i = 0; i < 16; i++)
+        h = Math.imul(h ^ bits(proj[i]), 16777619) >>> 0;
+    h = Math.imul(h ^ bits(width), 16777619) >>> 0;
+    h = Math.imul(h ^ bits(height), 16777619) >>> 0;
+    return h >>> 0;
+}

package/dist/components/Entities/labelLayout/cost.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Cost function for a candidate label placement. Lower is better.
+ *
+ * The hierarchy `lineBox >> boxDot > boxBox > lineLine >> stick > spread > len`
+ * is near-lexicographic: a single leader passing under another label always
+ * outranks fixing every overlap a node could have against its <=24 neighbors,
+ * so the optimizer eliminates crossings first (the user's top priority), then
+ * dot coverage, then box overlaps, then tidies the radial fan.
+ */
+import type { LabelNode, SolverConfig } from './types';
+export declare const W: {
+    /** DOMINANT — a leader passing under ANOTHER label's box. Requirement #1. */
+    lineBox: number;
+    /** Our box covering another node's dot. Worse than a box overlap. Requirement #4. */
+    boxDot: number;
+    /** Two label boxes overlapping. Requirement #2. */
+    boxBox: number;
+    /** Two leaders crossing — thin lines, mild. Supports the radial fan. */
+    lineLine: number;
+    /** Sticky bonus for staying on the previous slot (anti flip-flop). Requirement #6. */
+    stick: number;
+    /** Penalty when a slot's angle nearly coincides with a neighbor's leader angle. */
+    spread: number;
+    /** Outward-fan preference: cheaper to point away from the local cluster. Requirement #3. */
+    radial: number;
+    /** Leader length — keep labels close to their dot. Small. */
+    len: number;
+};
+/**
+ * The geometric "bad" terms only (leader-under-box, box-over-dot, box-box,
+ * leader-leader, angular spread) for placing `node` at slot `si` against its
+ * committed neighbors. This is the local-search objective AND its termination
+ * guard — exactly 0 when the node has no crossings/overlaps. The solver both
+ * selects and accepts moves on this value so it can never lock a node at a
+ * placement whose conflict another available slot would reduce.
+ */
+export declare function evalConflict(node: LabelNode, si: number, neighbors: LabelNode[], config: SolverConfig): number;
+/**
+ * Conflict-independent "tidiness" of a slot: short leaders, pointing away from
+ * the local cluster centroid (radial fan-out), with a bonus for staying put.
+ * Used only as a tie-break among slots of equal conflict, never to override a
+ * conflict reduction.
+ */
+export declare function placementBias(node: LabelNode, si: number): number;