@viamrobotics/motion-tools 1.32.0 → 1.33.1

package/dist/components/overlay/details/AxesHelperDetails.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Entity } from 'koota'
+
+	import { useThrelte } from '@threlte/core'
+	import { Switch } from '@viamrobotics/prime-core'
+
+	import { traits, useTrait } from '../../../ecs'
+
+	interface Props {
+		entity: Entity
+	}
+
+	const { entity }: Props = $props()
+
+	const { invalidate } = useThrelte()
+
+	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
+
+	const handleToggle = (next: boolean) => {
+		if (next) entity.add(traits.ShowAxesHelper)
+		else entity.remove(traits.ShowAxesHelper)
+		invalidate()
+	}
+</script>
+
+<div class="flex items-center justify-between">
+	<strong class="font-semibold">show axes helper</strong>
+	<Switch
+		on={showAxesHelper.current === true}
+		on:change={(event) => handleToggle(event.detail)}
+	/>
+</div>

package/dist/components/overlay/details/AxesHelperDetails.svelte.d.ts

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

package/dist/components/overlay/details/ColorDetails.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Entity } from 'koota'
+
+	import { useThrelte } from '@threlte/core'
+	import { Color, type ColorChangeEvent, type ColorValueRgbObject } from 'svelte-tweakpane-ui'
+
+	import { traits, useTrait } from '../../../ecs'
+
+	interface Props {
+		entity: Entity
+	}
+
+	const { entity }: Props = $props()
+
+	const { invalidate } = useThrelte()
+	const color = useTrait(() => entity, traits.Color)
+
+	const handleColorChange = (event: ColorChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		const next = event.detail.value as ColorValueRgbObject
+		entity.set(traits.Color, { r: next.r, g: next.g, b: next.b })
+		invalidate()
+	}
+</script>
+
+{#if color.current}
+	<div>
+		<strong class="font-semibold">color</strong>
+		<Color
+			value={color.current}
+			type="float"
+			on:change={handleColorChange}
+		/>
+	</div>
+{/if}

package/dist/components/overlay/details/ColorDetails.svelte.d.ts

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

package/dist/components/overlay/details/GeometryDetails.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { Entity } from 'koota'
+
+	import { useThrelte } from '@threlte/core'
+	import {
+		Point,
+		type PointChangeEvent,
+		type PointValue3dObject,
+		Slider,
+		type SliderChangeEvent,
+	} from 'svelte-tweakpane-ui'
+
+	import { traits, useTrait } from '../../../ecs'
+
+	interface Props {
+		entity: Entity
+	}
+
+	const { entity }: Props = $props()
+
+	const { invalidate } = useThrelte()
+	const box = useTrait(() => entity, traits.Box)
+	const sphere = useTrait(() => entity, traits.Sphere)
+	const capsule = useTrait(() => entity, traits.Capsule)
+
+	const handleBoxChange = (event: PointChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		const next = event.detail.value as PointValue3dObject
+		entity.set(traits.Box, { x: next.x, y: next.y, z: next.z })
+		invalidate()
+	}
+
+	const handleSphereRChange = (event: SliderChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		entity.set(traits.Sphere, { r: event.detail.value })
+		invalidate()
+	}
+
+	const handleCapsuleRChange = (event: SliderChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		const current = capsule.current
+		if (!current) return
+		entity.set(traits.Capsule, { r: event.detail.value, l: current.l })
+		invalidate()
+	}
+
+	const handleCapsuleLChange = (event: SliderChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		const current = capsule.current
+		if (!current) return
+		entity.set(traits.Capsule, { r: current.r, l: event.detail.value })
+		invalidate()
+	}
+</script>
+
+{#if box.current}
+	<div>
+		<strong class="font-semibold">dimensions</strong>
+		<span class="text-subtle-2">(box) (mm)</span>
+		<div aria-label="mutable box dimensions">
+			<Point
+				value={{
+					x: box.current.x,
+					y: box.current.y,
+					z: box.current.z,
+				}}
+				min={0}
+				on:change={handleBoxChange}
+			/>
+		</div>
+	</div>
+{:else if sphere.current}
+	<div>
+		<strong class="font-semibold">dimensions</strong>
+		<span class="text-subtle-2">(sphere) (mm)</span>
+		<div aria-label="mutable sphere dimensions">
+			<Slider
+				label="r"
+				value={sphere.current.r}
+				min={0}
+				on:change={handleSphereRChange}
+			/>
+		</div>
+	</div>
+{:else if capsule.current}
+	<div>
+		<strong class="font-semibold">dimensions</strong>
+		<span class="text-subtle-2">(capsule) (mm)</span>
+		<div aria-label="mutable capsule dimensions">
+			<Slider
+				label="r"
+				value={capsule.current.r}
+				min={0}
+				on:change={handleCapsuleRChange}
+			/>
+			<Slider
+				label="l"
+				value={capsule.current.l}
+				min={0}
+				on:change={handleCapsuleLChange}
+			/>
+		</div>
+	</div>
+{/if}

package/dist/components/overlay/details/GeometryDetails.svelte.d.ts

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

package/dist/components/overlay/details/LineDetails/LineDetails.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import type { Entity } from 'koota'
+
+	import { useThrelte } from '@threlte/core'
+	import {
+		Color,
+		type ColorChangeEvent,
+		type ColorValueRgbObject,
+		Point,
+		type PointValue3dObject,
+		Slider,
+		type SliderChangeEvent,
+	} from 'svelte-tweakpane-ui'
+
+	import { traits, useTrait } from '../../../../ecs'
+
+	import {
+		appendLinePosition as appendLinePositionPure,
+		removeLinePosition as removeLinePositionPure,
+		writeLinePosition as writeLinePositionPure,
+	} from './linePositions'
+
+	interface Props {
+		entity: Entity
+	}
+
+	const { entity }: Props = $props()
+
+	const { invalidate } = useThrelte()
+	const linePositions = useTrait(() => entity, traits.LinePositions)
+	const lineWidth = useTrait(() => entity, traits.LineWidth)
+	const lineColor = useTrait(() => entity, traits.Color)
+	const dotSize = useTrait(() => entity, traits.DotSize)
+	const dotColors = useTrait(() => entity, traits.DotColors)
+
+	const linePositionList = $derived.by<PointValue3dObject[]>(() => {
+		const positions = linePositions.current
+		if (!positions) return []
+		const out: PointValue3dObject[] = []
+		for (let i = 0; i + 2 < positions.length; i += 3) {
+			out.push({ x: positions[i]!, y: positions[i + 1]!, z: positions[i + 2]! })
+		}
+		return out
+	})
+
+	const dotColorValue = $derived.by<ColorValueRgbObject | undefined>(() => {
+		const colors = dotColors.current
+		if (!colors || colors.length < 3) return undefined
+		return { r: colors[0]! / 255, g: colors[1]! / 255, b: colors[2]! / 255 }
+	})
+
+	const writeLinePosition = (index: number, value: PointValue3dObject) => {
+		const current = linePositions.current
+		if (!current) return
+		entity.set(
+			traits.LinePositions,
+			writeLinePositionPure(current, index, value.x, value.y, value.z)
+		)
+		invalidate()
+	}
+
+	const appendLinePosition = () => {
+		entity.set(
+			traits.LinePositions,
+			appendLinePositionPure(linePositions.current ?? new Float32Array())
+		)
+		invalidate()
+	}
+
+	const removeLinePosition = (index: number) => {
+		const current = linePositions.current
+		if (!current) return
+		const next = removeLinePositionPure(current, index)
+		if (next === current) return
+		entity.set(traits.LinePositions, next)
+		invalidate()
+	}
+
+	const handleLineWidthChange = (event: SliderChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		entity.set(traits.LineWidth, event.detail.value)
+		invalidate()
+	}
+
+	const handleLineColorChange = (event: ColorChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		const next = event.detail.value as ColorValueRgbObject
+		entity.set(traits.Color, { r: next.r, g: next.g, b: next.b })
+		invalidate()
+	}
+
+	const handleDotSizeChange = (event: SliderChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		entity.set(traits.DotSize, event.detail.value)
+		invalidate()
+	}
+
+	const handleDotColorChange = (event: ColorChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		const next = event.detail.value as ColorValueRgbObject
+		entity.set(
+			traits.DotColors,
+			new Uint8Array([Math.round(next.r * 255), Math.round(next.g * 255), Math.round(next.b * 255)])
+		)
+		invalidate()
+	}
+</script>
+
+{#if linePositions.current}
+	<details>
+		<summary class="cursor-pointer select-none">
+			<strong class="font-semibold">line positions</strong>
+			<span class="text-subtle-2">(m, {linePositionList.length})</span>
+		</summary>
+		<div
+			aria-label="mutable line positions"
+			class="mt-1"
+		>
+			<div class="flex max-h-48 flex-col gap-1 overflow-y-auto">
+				{#each linePositionList as position, index (index)}
+					<div class="flex items-end gap-1">
+						<div class="flex-1">
+							<Point
+								value={position}
+								on:change={(event) => {
+									if (event.detail.origin !== 'internal') return
+									writeLinePosition(index, event.detail.value as PointValue3dObject)
+								}}
+							/>
+						</div>
+						<button
+							class="text-subtle-2 px-1 py-0.5 text-[10px] hover:text-red-500"
+							type="button"
+							aria-label={`remove position ${index + 1}`}
+							disabled={linePositionList.length <= 2}
+							onclick={() => removeLinePosition(index)}
+						>
+							×
+						</button>
+					</div>
+				{/each}
+			</div>
+			<button
+				class="border-medium hover:bg-light mt-1 border px-2 py-1 text-xs"
+				type="button"
+				onclick={appendLinePosition}
+			>
+				Add position
+			</button>
+		</div>
+	</details>
+
+	<div>
+		<strong class="font-semibold">line width</strong>
+		<Slider
+			value={lineWidth.current ?? 5}
+			min={0.1}
+			max={50}
+			step={0.1}
+			on:change={handleLineWidthChange}
+		/>
+	</div>
+
+	{#if lineColor.current}
+		<div>
+			<strong class="font-semibold">line color</strong>
+			<Color
+				value={lineColor.current}
+				type="float"
+				on:change={handleLineColorChange}
+			/>
+		</div>
+	{/if}
+
+	<div>
+		<strong class="font-semibold">dot size</strong>
+		<Slider
+			value={dotSize.current ?? 10}
+			min={0}
+			max={50}
+			step={0.1}
+			on:change={handleDotSizeChange}
+		/>
+	</div>
+
+	{#if dotColorValue}
+		<div>
+			<strong class="font-semibold">dot color</strong>
+			<Color
+				value={dotColorValue}
+				type="float"
+				on:change={handleDotColorChange}
+			/>
+		</div>
+	{/if}
+{/if}

package/dist/components/overlay/details/LineDetails/LineDetails.svelte.d.ts

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

package/dist/components/overlay/details/LineDetails/linePositions.d.ts

@@ -0,0 +1,3 @@
+export declare const writeLinePosition: (source: Float32Array, index: number, x: number, y: number, z: number) => Float32Array;
+export declare const appendLinePosition: (source: Float32Array) => Float32Array;
+export declare const removeLinePosition: (source: Float32Array, index: number) => Float32Array;

package/dist/components/overlay/details/LineDetails/linePositions.js

@@ -0,0 +1,30 @@
+export const writeLinePosition = (source, index, x, y, z) => {
+    if (index * 3 + 2 >= source.length)
+        return new Float32Array(source);
+    const next = new Float32Array(source);
+    next[index * 3 + 0] = x;
+    next[index * 3 + 1] = y;
+    next[index * 3 + 2] = z;
+    return next;
+};
+export const appendLinePosition = (source) => {
+    const next = new Float32Array(source.length + 3);
+    next.set(source);
+    const lastIndex = source.length - 3;
+    if (lastIndex >= 0) {
+        next[source.length + 0] = source[lastIndex] + 0.1;
+        next[source.length + 1] = source[lastIndex + 1];
+        next[source.length + 2] = source[lastIndex + 2];
+    }
+    return next;
+};
+export const removeLinePosition = (source, index) => {
+    if (source.length <= 6)
+        return source;
+    if (index * 3 + 2 >= source.length)
+        return source;
+    const next = new Float32Array(source.length - 3);
+    next.set(source.subarray(0, index * 3), 0);
+    next.set(source.subarray((index + 1) * 3), index * 3);
+    return next;
+};

package/dist/components/overlay/details/OpacityDetails.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Entity } from 'koota'
+
+	import { useThrelte } from '@threlte/core'
+	import { Slider, type SliderChangeEvent } from 'svelte-tweakpane-ui'
+
+	import { traits, useTrait } from '../../../ecs'
+
+	interface Props {
+		entity: Entity
+	}
+
+	const { entity }: Props = $props()
+
+	const { invalidate } = useThrelte()
+
+	const opacity = useTrait(() => entity, traits.Opacity)
+	const opacityValue = $derived(opacity.current ?? 0.7)
+
+	const handleOpacityChange = (event: SliderChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		const next = event.detail.value
+		if (entity.has(traits.Opacity)) {
+			entity.set(traits.Opacity, next)
+		} else {
+			entity.add(traits.Opacity(next))
+		}
+		invalidate()
+	}
+</script>
+
+<div>
+	<strong class="font-semibold">opacity</strong>
+	<div aria-label="mutable opacity">
+		<Slider
+			value={opacityValue}
+			min={0}
+			max={1}
+			step={0.01}
+			format={(v) => v.toFixed(2)}
+			on:change={handleOpacityChange}
+		/>
+	</div>
+</div>

package/dist/components/overlay/details/OpacityDetails.svelte.d.ts

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

package/dist/components/overlay/details/PoseDetails.svelte

@@ -0,0 +1,189 @@
+<script
+	module
+	lang="ts"
+>
+	import { Euler, MathUtils, Quaternion } from 'three'
+
+	import { OrientationVector } from '../../../three/OrientationVector'
+
+	const quaternionUtil = new Quaternion()
+	const ovUtil = new OrientationVector()
+	const eulerUtil = new Euler()
+</script>
+
+<script lang="ts">
+	import type { Pose } from '@viamrobotics/sdk'
+	import type { Entity } from 'koota'
+
+	import { useThrelte } from '@threlte/core'
+	import {
+		List,
+		type ListChangeEvent,
+		Point,
+		type PointChangeEvent,
+		type PointValue3dObject,
+		type PointValue4dObject,
+		RotationEuler,
+		type RotationEulerChangeEvent,
+		type RotationEulerValueObject,
+		TabGroup,
+		TabPage,
+	} from 'svelte-tweakpane-ui'
+
+	import { traits, useParentName, useTrait } from '../../../ecs'
+	import { createPose, matrixToPose } from '../../../transform'
+
+	interface Props {
+		entity: Entity
+		parentOptions: Array<{ value: string; text: string }>
+		onPoseChange: (patch: Partial<Pose>) => void
+		onParentChange: (parent: string) => void
+	}
+
+	const { entity, parentOptions, onPoseChange, onParentChange }: Props = $props()
+
+	const { invalidate } = useThrelte()
+
+	const matrix = useTrait(() => entity, traits.Matrix)
+	const editedMatrix = useTrait(() => entity, traits.EditedMatrix)
+	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
+	const center = useTrait(() => entity, traits.Center)
+	const parent = useParentName(() => entity)
+
+	const localPose = $derived.by<Pose | undefined>(() => {
+		const source = editedMatrix.current ?? matrix.current
+		if (source) return matrixToPose(source, createPose())
+		if (center.current) return createPose(center.current)
+		return undefined
+	})
+
+	const worldPose = $derived.by<Pose | undefined>(() => {
+		if (!worldMatrix.current) return
+		return matrixToPose(worldMatrix.current, createPose())
+	})
+
+	const eulerValue = $derived.by<RotationEulerValueObject>(() => {
+		if (!localPose) return { x: 0, y: 0, z: 0 }
+		ovUtil.set(localPose.oX, localPose.oY, localPose.oZ, MathUtils.degToRad(localPose.theta))
+		ovUtil.toEuler(eulerUtil)
+		return {
+			x: MathUtils.radToDeg(eulerUtil.x),
+			y: MathUtils.radToDeg(eulerUtil.y),
+			z: MathUtils.radToDeg(eulerUtil.z),
+		}
+	})
+
+	const applyLocal = (patch: Partial<Pose>) => {
+		onPoseChange(patch)
+		invalidate()
+	}
+
+	const handlePositionChange = (event: PointChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		const next = event.detail.value as PointValue3dObject
+		applyLocal({ x: next.x, y: next.y, z: next.z })
+	}
+
+	const handleOrientationOVChange = (event: PointChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		const next = event.detail.value as PointValue4dObject
+		applyLocal({ oX: next.x, oY: next.y, oZ: next.z, theta: next.w })
+	}
+
+	const handleParentChange = (event: ListChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		const value = event.detail.value as string
+		if (value === parent.current) return
+		onParentChange(value)
+		invalidate()
+	}
+
+	const handleOrientationEulerChange = (event: RotationEulerChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		const next = event.detail.value as RotationEulerValueObject
+		eulerUtil.set(
+			MathUtils.degToRad(next.x),
+			MathUtils.degToRad(next.y),
+			MathUtils.degToRad(next.z),
+			'ZYX'
+		)
+		quaternionUtil.setFromEuler(eulerUtil)
+		ovUtil.setFromQuaternion(quaternionUtil)
+		applyLocal({ oX: ovUtil.x, oY: ovUtil.y, oZ: ovUtil.z, theta: MathUtils.radToDeg(ovUtil.th) })
+	}
+</script>
+
+<div class="flex flex-col gap-2.5 text-xs">
+	<div>
+		<strong class="font-semibold">parent</strong>
+		{#key entity}
+			<div aria-label="mutable parent">
+				<List
+					options={parentOptions}
+					value={parent.current ?? 'world'}
+					on:change={handleParentChange}
+				/>
+			</div>
+		{/key}
+	</div>
+
+	<div>
+		<strong class="font-semibold">world position</strong>
+		<span class="text-subtle-2">(mm)</span>
+		<div class="flex gap-3">
+			<div><span class="text-subtle-2">x</span> {(worldPose?.x ?? 0).toFixed(2)}</div>
+			<div><span class="text-subtle-2">y</span> {(worldPose?.y ?? 0).toFixed(2)}</div>
+			<div><span class="text-subtle-2">z</span> {(worldPose?.z ?? 0).toFixed(2)}</div>
+		</div>
+	</div>
+
+	<div>
+		<strong class="font-semibold">world orientation</strong>
+		<span class="text-subtle-2">(deg)</span>
+		<div class="flex gap-3">
+			<div><span class="text-subtle-2">x</span> {(worldPose?.oX ?? 0).toFixed(2)}</div>
+			<div><span class="text-subtle-2">y</span> {(worldPose?.oY ?? 0).toFixed(2)}</div>
+			<div><span class="text-subtle-2">z</span> {(worldPose?.oZ ?? 0).toFixed(2)}</div>
+			<div><span class="text-subtle-2">th</span> {(worldPose?.theta ?? 0).toFixed(2)}</div>
+		</div>
+	</div>
+
+	{#if localPose}
+		<div>
+			<strong class="font-semibold">local position</strong>
+			<span class="text-subtle-2">(mm)</span>
+			<div aria-label="mutable local position">
+				<Point
+					value={{ x: localPose.x, y: localPose.y, z: localPose.z }}
+					on:change={handlePositionChange}
+				/>
+			</div>
+		</div>
+
+		<div>
+			<strong class="font-semibold">local orientation</strong>
+			<div aria-label="mutable local orientation">
+				<TabGroup>
+					<TabPage title="OV (deg)">
+						<Point
+							value={{
+								x: localPose.oX,
+								y: localPose.oY,
+								z: localPose.oZ,
+								w: localPose.theta,
+							}}
+							on:change={handleOrientationOVChange}
+						/>
+					</TabPage>
+					<TabPage title="Euler">
+						<RotationEuler
+							value={eulerValue}
+							unit="deg"
+							on:change={handleOrientationEulerChange}
+						/>
+					</TabPage>
+				</TabGroup>
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/components/overlay/details/PoseDetails.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Pose } from '@viamrobotics/sdk';
+import type { Entity } from 'koota';
+interface Props {
+    entity: Entity;
+    parentOptions: Array<{
+        value: string;
+        text: string;
+    }>;
+    onPoseChange: (patch: Partial<Pose>) => void;
+    onParentChange: (parent: string) => void;
+}
+declare const PoseDetails: import("svelte").Component<Props, {}, "">;
+type PoseDetails = ReturnType<typeof PoseDetails>;
+export default PoseDetails;