@viamrobotics/motion-tools 0.13.0 → 0.14.1

package/dist/Detail.svelte.d.ts

@@ -11,11 +11,15 @@ type UpdateFrameCallback = {
         z?: number;
     }): void;
 };
+type RemoveFrameCallback = {
+    (componentName: string): void;
+};
 export declare class DetailConfigUpdater {
     private object;
     private referenceFrame;
     private updateFrame;
-    constructor(object: () => WorldObject<Geometries> | undefined, updateFrame: UpdateFrameCallback, referenceFrame: () => string);
+    private removeFrame;
+    constructor(object: () => WorldObject<Geometries> | undefined, updateFrame: UpdateFrameCallback, removeFrame: RemoveFrameCallback, referenceFrame: () => string);
     updateLocalPosition: ({ x, y, z }: {
         x?: number;
         y?: number;
@@ -36,6 +40,7 @@ export declare class DetailConfigUpdater {
         z?: number;
     }) => void;
     setFrameParent: (parentName: string) => void;
+    deleteFrame: () => void;
     setGeometryType: (type: "none" | "box" | "sphere" | "capsule") => void;
 }
 export {};

package/dist/Detail.svelte.js

@@ -2,10 +2,12 @@ export class DetailConfigUpdater {
     object;
     referenceFrame;
     updateFrame;
-    constructor(object, updateFrame, referenceFrame) {
+    removeFrame;
+    constructor(object, updateFrame, removeFrame, referenceFrame) {
         this.referenceFrame = referenceFrame;
         this.object = object;
         this.updateFrame = updateFrame;
+        this.removeFrame = removeFrame;
     }
     updateLocalPosition = ({ x, y, z }) => {
         const object = this.object();
@@ -95,6 +97,12 @@ export class DetailConfigUpdater {
             theta: object.localEditedPose.theta,
         });
     };
+    deleteFrame = () => {
+        const object = this.object();
+        if (!object)
+            return;
+        this.removeFrame(object.name ?? '');
+    };
     setGeometryType = (type) => {
         const object = this.object();
         if (!object)

package/dist/WorldObject.svelte.d.ts

@@ -1,5 +1,6 @@
-import type { Geometry, Pose, TransformWithUUID } from '@viamrobotics/sdk';
-import { BatchedMesh, Object3D, Vector3, type ColorRepresentation } from 'three';
+import type { Geometry, PlainMessage, Pose, Struct, TransformWithUUID } from '@viamrobotics/sdk';
+import { BatchedMesh, Color, Object3D, Vector3 } from 'three';
+import type { ValueOf } from 'type-fest';
 import type { OBB } from 'three/addons/math/OBB.js';
 export type PointsGeometry = {
     center: undefined;
@@ -16,9 +17,14 @@ export type LinesGeometry = {
     };
 };
 export type Geometries = Geometry | PointsGeometry | LinesGeometry;
+export declare const SupportedShapes: {
+    readonly points: "points";
+    readonly line: "line";
+    readonly arrow: "arrow";
+};
 export type Metadata = {
     colors?: Float32Array;
-    color?: ColorRepresentation;
+    color?: Color;
     opacity?: number;
     gltf?: {
         scene: Object3D;
@@ -26,22 +32,25 @@ export type Metadata = {
     points?: Vector3[];
     pointSize?: number;
     lineWidth?: number;
-    lineDotColor?: ColorRepresentation;
+    lineDotColor?: Color;
     batched?: {
         id: number;
         object: BatchedMesh;
     };
+    shape?: ValueOf<typeof SupportedShapes>;
     getBoundingBoxAt?: (box: OBB) => void;
 };
-export declare const determinePose: (object: WorldObject, pose: WorldObject["pose"] | undefined) => WorldObject["pose"];
+export declare const isMetadataKey: (key: string) => key is keyof Metadata;
 export declare class WorldObject<T extends Geometries = Geometries> {
     uuid: string;
     name: string;
     referenceFrame: string | undefined;
-    pose: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Pose>;
+    pose: PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Pose>;
     geometry?: T;
     metadata: Metadata;
-    localEditedPose: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Pose>;
+    localEditedPose: PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Pose>;
     constructor(name: string, pose?: Pose, parent?: string, geometry?: T, metadata?: Metadata);
 }
-export declare const fromTransform: (transform: TransformWithUUID) => WorldObject<import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Geometry>>;
+export declare const parseMetadata: (fields?: PlainMessage<Struct>["fields"]) => Metadata;
+export declare const fromTransform: (transform: TransformWithUUID) => WorldObject<PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Geometry>>;
+export declare const determinePose: (object: WorldObject, pose: Pose | undefined) => Pose;

package/dist/WorldObject.svelte.js

@@ -1,17 +1,25 @@
-import { BatchedMesh, Color, MathUtils, Matrix4, Object3D, Quaternion, Vector3, } from 'three';
-import { createPose } from './transform';
-export const determinePose = (object, pose) => {
-    if (pose === undefined) {
-        return object.localEditedPose;
-    }
-    else {
-        const poseNetwork = poseToMatrix(object.pose);
-        const poseUsePose = poseToMatrix(pose);
-        const poseLocalEditedPose = poseToMatrix(object.localEditedPose);
-        const poseNetworkInverse = poseNetwork.invert();
-        const resultMatrix = poseUsePose.multiply(poseNetworkInverse).multiply(poseLocalEditedPose);
-        return matrixToPose(resultMatrix);
-    }
+import { BatchedMesh, Color, MathUtils, Object3D, Vector3 } from 'three';
+import { createPose, matrixToPose, poseToMatrix } from './transform';
+import { isColorRepresentation, isRGB, parseColor, parseOpacity, parseRGB } from './color';
+export const SupportedShapes = {
+    points: 'points',
+    line: 'line',
+    arrow: 'arrow',
+};
+const METADATA_KEYS = [
+    'colors',
+    'color',
+    'opacity',
+    'gltf',
+    'points',
+    'pointSize',
+    'lineWidth',
+    'lineDotColor',
+    'batched',
+    'shape',
+];
+export const isMetadataKey = (key) => {
+    return METADATA_KEYS.includes(key);
 };
 export class WorldObject {
     uuid;
@@ -19,20 +27,23 @@ export class WorldObject {
     referenceFrame = $state.raw();
     pose = $state.raw(createPose());
     geometry;
-    metadata;
+    metadata = $state({});
     localEditedPose = $state.raw(createPose());
     constructor(name, pose, parent = 'world', geometry, metadata) {
         this.uuid = MathUtils.generateUUID();
         this.name = name;
         this.referenceFrame = parent;
         this.geometry = geometry;
-        this.metadata = metadata ?? {};
+        if (metadata) {
+            this.metadata = metadata;
+        }
         if (pose) {
             this.pose = pose;
             this.localEditedPose = { ...pose };
         }
     }
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const unwrapValue = (value) => {
     if (!value?.kind)
         return value;
@@ -42,9 +53,9 @@ const unwrapValue = (value) => {
         case 'boolValue':
             return value.kind.value;
         case 'structValue': {
-            // Recursively unwrap nested struct
             const result = {};
             for (const [key, val] of Object.entries(value.kind.value.fields || {})) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 result[key] = unwrapValue(val);
             }
             return result;
@@ -57,56 +68,65 @@ const unwrapValue = (value) => {
             return value.kind.value;
     }
 };
-const parseMetadata = (metadata) => {
-    let json = {};
-    for (const [k, v] of Object.entries(metadata)) {
+export const parseMetadata = (fields = {}) => {
+    const json = {};
+    for (const [k, v] of Object.entries(fields)) {
+        if (!isMetadataKey(k))
+            continue;
         const unwrappedValue = unwrapValue(v);
-        // TODO: Remove special case and add better handling for metadata
-        if (k === 'color' && unwrappedValue && typeof unwrappedValue === 'object') {
-            const { r, g, b } = unwrappedValue;
-            json[k] = new Color().setRGB(r / 255, g / 255, b / 255);
-        }
-        else {
-            json = { ...json, [k]: unwrappedValue };
+        switch (k) {
+            case 'color':
+            case 'lineDotColor':
+                json[k] = readColor(unwrappedValue);
+                break;
+            case 'opacity':
+                json[k] = parseOpacity(unwrappedValue);
+                break;
+            case 'gltf':
+                json[k] = unwrappedValue;
+                break;
+            case 'points':
+                json[k] = unwrappedValue;
+                break;
+            case 'pointSize':
+                json[k] = unwrappedValue;
+                break;
+            case 'lineWidth':
+                json[k] = unwrappedValue;
+                break;
+            case 'batched':
+                json[k] = unwrappedValue;
+                break;
+            case 'shape':
+                json[k] = unwrappedValue;
+                break;
         }
     }
     return json;
 };
+const readColor = (color) => {
+    if (isColorRepresentation(color))
+        return parseColor(color);
+    if (isRGB(color))
+        return parseRGB(color);
+    return new Color('black');
+};
 export const fromTransform = (transform) => {
-    const metadata = transform.metadata
-        ? parseMetadata(transform.metadata.fields)
-        : {};
+    const metadata = transform.metadata ? parseMetadata(transform.metadata.fields) : {};
     const worldObject = new WorldObject(transform.referenceFrame, transform.poseInObserverFrame?.pose, transform.poseInObserverFrame?.referenceFrame, transform.physicalObject, metadata);
     worldObject.uuid = transform.uuidString;
     return worldObject;
 };
-const poseToMatrix = (pose) => {
-    const matrix = new Matrix4();
-    const poseQuaternion = new Quaternion().setFromAxisAngle(new Vector3(pose.oX, pose.oY, pose.oZ), pose.theta * (Math.PI / 180));
-    matrix.makeRotationFromQuaternion(poseQuaternion);
-    matrix.setPosition(new Vector3(pose.x, pose.y, pose.z));
-    return matrix;
-};
-const matrixToPose = (matrix) => {
-    const pose = createPose();
-    const translation = new Vector3();
-    const quaternion = new Quaternion();
-    matrix.decompose(translation, quaternion, new Vector3());
-    pose.x = translation.x;
-    pose.y = translation.y;
-    pose.z = translation.z;
-    const s = Math.sqrt(1 - quaternion.w * quaternion.w);
-    if (s < 0.000001) {
-        pose.oX = 0;
-        pose.oY = 0;
-        pose.oZ = 1;
-        pose.theta = 0;
+export const determinePose = (object, pose) => {
+    if (pose === undefined) {
+        return object.localEditedPose;
     }
     else {
-        pose.oX = quaternion.x / s;
-        pose.oY = quaternion.y / s;
-        pose.oZ = quaternion.z / s;
-        pose.theta = Math.acos(quaternion.w) * 2 * (180 / Math.PI);
+        const poseNetwork = poseToMatrix(object.pose);
+        const poseUsePose = poseToMatrix(pose);
+        const poseLocalEditedPose = poseToMatrix(object.localEditedPose);
+        const poseNetworkInverse = poseNetwork.invert();
+        const resultMatrix = poseUsePose.multiply(poseNetworkInverse).multiply(poseLocalEditedPose);
+        return matrixToPose(resultMatrix);
     }
-    return pose;
 };

package/dist/color.d.ts

@@ -1,4 +1,4 @@
-import { Color, type ColorRepresentation } from 'three';
+import { Color, type ColorRepresentation, type RGB } from 'three';
 /**
  * Darkens a THREE.Color by a given percentage while preserving hue.
  * @param color The original THREE.Color instance.
@@ -27,3 +27,8 @@ export declare const resourceColors: {
     readonly switch: string;
     readonly webcam: string;
 };
+export declare const isColorRepresentation: (color: unknown) => color is ColorRepresentation;
+export declare const parseColor: (color: unknown, defaultColor?: ColorRepresentation) => Color;
+export declare const isRGB: (color: unknown) => color is RGB;
+export declare const parseRGB: (color: unknown, defaultColor?: RGB) => Color;
+export declare const parseOpacity: (opacity: unknown, defaultOpacity?: number) => number;

package/dist/color.js

@@ -1,5 +1,6 @@
 import { Color } from 'three';
 import twColors from 'tailwindcss/colors';
+import { isNumber } from 'lodash-es';
 // Step 3: linear sRGB → sRGB
 const linearToSrgb = (x) => {
     return x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055;
@@ -73,3 +74,62 @@ export const resourceColors = {
     switch: oklchToHex(twColors.stone[darkness]),
     webcam: oklchToHex(twColors.sky[darkness]),
 };
+export const isColorRepresentation = (color) => {
+    if (!color)
+        return false;
+    if (isColorString(color))
+        return true;
+    if (isColorHex(color))
+        return true;
+    if (isColor(color))
+        return true;
+    return false;
+};
+export const parseColor = (color, defaultColor = 'black') => {
+    if (!isColorRepresentation(color))
+        return new Color(defaultColor);
+    return new Color(color);
+};
+export const isRGB = (color) => {
+    if (!color ||
+        typeof color !== 'object' ||
+        !('r' in color) ||
+        !('g' in color) ||
+        !('b' in color)) {
+        return false;
+    }
+    return isNumber(color.r) && isNumber(color.g) && isNumber(color.b);
+};
+export const parseRGB = (color, defaultColor = { r: 0, g: 0, b: 0 }) => {
+    if (!isRGB(color))
+        return new Color().setRGB(defaultColor.r, defaultColor.g, defaultColor.b);
+    return new Color().setRGB(color.r, color.g, color.b);
+};
+export const parseOpacity = (opacity, defaultOpacity = 1) => {
+    if (!isNumber(opacity))
+        return defaultOpacity;
+    return opacity > 1 ? opacity / 100 : opacity;
+};
+const isColor = (color) => {
+    if (!color)
+        return false;
+    return color instanceof Color;
+};
+const isColorString = (color) => {
+    if (!color)
+        return false;
+    if (typeof color === 'string') {
+        const parsed = new Color(color);
+        return parsed.isColor;
+    }
+    return false;
+};
+const isColorHex = (color) => {
+    if (!color)
+        return false;
+    if (typeof color === 'number') {
+        const parsed = new Color(color);
+        return parsed.isColor;
+    }
+    return false;
+};

package/dist/components/App.svelte

@@ -21,6 +21,7 @@
 	import { useViamClient } from '@viamrobotics/svelte-sdk'
 	import LiveUpdatesBanner from './LiveUpdatesBanner.svelte'
 	import ArmPositions from './widgets/ArmPositions.svelte'
+	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
 
 	interface LocalConfigProps {
 		getLocalPartConfig: () => Struct
@@ -45,6 +46,7 @@
 
 	const appClient = useViamClient()
 	const settings = provideSettings()
+	const environment = provideEnvironment()
 
 	$effect(() => {
 		settings.current.enableKeybindings = enableKeybindings
@@ -55,10 +57,9 @@
 	provideToast()
 
 	let root = $state.raw<HTMLElement>()
-	let isStandalone = $state(false)
 
 	if (localConfigProps) {
-		isStandalone = false
+		environment.current.isStandalone = false
 		providePartConfig({
 			appEmbeddedPartConfigProps: {
 				isDirty: () => localConfigProps.isDirty(),
@@ -68,7 +69,7 @@
 			},
 		})
 	} else {
-		isStandalone = true
+		environment.current.isStandalone = true
 		providePartConfig({
 			standalonePartConfigProps: {
 				viamClient: () => appClient?.current,
@@ -99,7 +100,7 @@
 
 						<Dashboard {@attach domPortal(root)} />
 						<Details {@attach domPortal(root)} />
-						{#if isStandalone}
+						{#if environment.current.isStandalone}
 							<LiveUpdatesBanner {@attach domPortal(root)} />
 						{/if}
 

package/dist/components/Details.svelte

@@ -13,7 +13,7 @@
 <script lang="ts">
 	import { Check, Copy } from 'lucide-svelte'
 	import { useTask } from '@threlte/core'
-	import { Button, Icon } from '@viamrobotics/prime-core'
+	import { Button, Icon, Select, Input } from '@viamrobotics/prime-core'
 	import {
 		useSelectedObject,
 		useFocusedObject,
@@ -60,6 +60,7 @@
 	const detailConfigUpdater: DetailConfigUpdater = new DetailConfigUpdater(
 		() => object,
 		partConfig.updateFrame,
+		partConfig.deleteFrame,
 		() => referenceFrame
 	)
 
@@ -105,15 +106,18 @@
 	value,
 	ariaLabel,
 }: {
-	label: string
+	label?: string
 	value: string
 	ariaLabel: string
 })}
 	<div>
 		<span
 			class="text-subtle-2"
-			aria-label={`immutable ${ariaLabel}`}>{label}</span
+			aria-label={`immutable ${ariaLabel}`}
 		>
+			{label}
+		</span>
+
 		{value}
 	</div>
 {/snippet}
@@ -129,14 +133,16 @@
 	ariaLabel: string
 	onInput: (value: string) => void
 })}
-	<span class="text-subtle-2">{label}</span>
-	<input
-		type="number"
-		aria-label={`mutable ${ariaLabel}`}
-		class="max-w-24 min-w-0 flex-1 rounded border px-1 py-0.5 text-xs"
-		{value}
-		oninput={(e) => onInput((e.target as HTMLInputElement).value)}
-	/>
+	<div class="flex items-center gap-1">
+		<span class="text-subtle-2">{label}</span>
+		<Input
+			type="number"
+			aria-label={`mutable ${ariaLabel}`}
+			class="max-w-24 min-w-0 flex-1 rounded border px-1 py-0.5 text-xs"
+			{value}
+			on:input={(event) => onInput((event.target as HTMLInputElement).value)}
+		/>
+	</div>
 {/snippet}
 
 {#snippet DropDownField({
@@ -150,16 +156,15 @@
 	options: string[]
 	onChange: (value: string) => void
 })}
-	<select
+	<Select
 		aria-label={`dropdown ${ariaLabel}`}
-		class="w-full rounded border border-gray-300 px-2 py-1 text-sm"
 		{value}
-		onchange={(e) => onChange((e.target as HTMLSelectElement).value)}
+		on:input={(event) => onChange((event.target as HTMLSelectElement).value)}
 	>
 		{#each options as option (option)}
 			<option value={option}>{option}</option>
 		{/each}
-	</select>
+	</Select>
 {/snippet}
 
 {#if object}
@@ -258,7 +263,6 @@
 					<strong class="font-semibold">parent frame</strong>
 					<div class="flex gap-3">
 						{@render ParentFrame({
-							label: 'name',
 							ariaLabel: 'parent frame name',
 							value: referenceFrame,
 							options: referenceFrameOptions,
@@ -511,5 +515,15 @@
 				Enter object view
 			</Button>
 		{/if}
+
+		<WeblabActive experiment="MOTION_TOOLS_EDIT_FRAME">
+			{#if isFrameNode}
+				<Button
+					variant="danger"
+					class="mt-2 w-full"
+					onclick={() => detailConfigUpdater.deleteFrame()}>Delete Frame</Button
+				>
+			{/if}
+		</WeblabActive>
 	</div>
 {/if}

package/dist/components/LiveUpdatesBanner.svelte

@@ -19,18 +19,18 @@
 			</p>
 
 			<p class="text-sm">
-				<a
+				<button
 					class="cursor-pointer text-blue-600"
 					onclick={() => {
 						partConfig.saveLocalPartConfig()
-					}}>Save</a
+					}}>Save</button
 				>
 				or
-				<a
+				<button
 					class="cursor-pointer text-blue-600"
 					onclick={() => {
 						partConfig.resetLocalPartConfig()
-					}}>Discard</a
+					}}>Discard</button
 				>
 				to resume.
 			</p>

package/dist/components/SceneProviders.svelte

@@ -17,6 +17,7 @@
 	import { provideWorldStates } from '../hooks/useWorldState.svelte'
 	import { provideArmClient } from '../hooks/useArmClient.svelte'
 	import { provideArrows } from '../hooks/useArrows.svelte'
+	import { provideFramelessComponents } from '../hooks/useFramelessComponents.svelte'
 	interface Props {
 		children: Snippet<[{ focus: boolean }]>
 	}
@@ -42,6 +43,7 @@
 	provideObjects()
 	provideWorldStates()
 	provideArmClient(() => partID.current)
+	provideFramelessComponents()
 
 	const { focus } = provideSelection()
 </script>

package/dist/components/Tree/AddFrames.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { IconButton } from '@viamrobotics/prime-core'
+	import Drawer from './Drawer.svelte'
+	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
+	import { useFramelessComponents } from '../../hooks/useFramelessComponents.svelte'
+
+	const framelessComponents = useFramelessComponents()
+	const partConfig = usePartConfig()
+</script>
+
+<Drawer name="Add frames">
+	<div class="flex h-64 w-60 flex-col gap-2 overflow-auto p-3">
+		{#if framelessComponents.current.length > 0}
+			<ul class="space-y-1">
+				{#each framelessComponents.current as component (component)}
+					<li class="flex items-center gap-2 text-xs text-gray-700">
+						{component}
+						<IconButton
+							label="Add frame"
+							icon="plus"
+							onclick={() => partConfig.createFrame(component)}
+						/>
+					</li>
+				{/each}
+			</ul>
+		{:else}
+			No components without frames
+		{/if}
+	</div>
+</Drawer>

package/dist/components/Tree/AddFrames.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 AddFrames: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AddFrames = InstanceType<typeof AddFrames>;
+export default AddFrames;

package/dist/components/Tree/Tree.svelte

@@ -156,10 +156,7 @@
 			<h3 {...api.getLabelProps() as object}>{rootNode.name}</h3>
 		</div>
 
-		<div
-			{...api.getTreeProps()}
-			class="w-60"
-		>
+		<div {...api.getTreeProps()}>
 			{#if rootChildren.length === 0}
 				<p class="text-subtle-2 px-2 py-4">No objects displayed</p>
 			{:else if rootChildren.length > 200}

package/dist/components/Tree/TreeContainer.svelte

@@ -11,7 +11,8 @@
 	import { useDraggable } from '../../hooks/useDraggable.svelte'
 	import { useWorldStates } from '../../hooks/useWorldState.svelte'
 	import Widgets from './Widgets.svelte'
-
+	import AddFrames from './AddFrames.svelte'
+	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
 	const { ...rest } = $props()
 
 	provideTreeExpandedContext()
@@ -20,6 +21,7 @@
 	const objects = useObjects()
 	const draggable = useDraggable('treeview')
 	const worldStates = useWorldStates()
+	const environment = useEnvironment()
 
 	let rootNode = $state<TreeNode>({
 		id: 'world',
@@ -54,6 +56,9 @@
 		/>
 	{/key}
 
+	{#if environment.current.isStandalone}
+		<AddFrames />
+	{/if}
 	<Logs />
 	<Settings />
 	<Widgets />