@viamrobotics/motion-tools 0.12.0 → 0.14.0

package/dist/Detail.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { WorldObject } from './lib';
+import type { Geometries } from './WorldObject.svelte';
+import type { Pose } from '@viamrobotics/sdk';
+type UpdateFrameCallback = {
+    (componentName: string, referenceFrame: string, pose: Pose, geometry?: {
+        type: 'none' | 'box' | 'sphere' | 'capsule';
+        r?: number;
+        l?: number;
+        x?: number;
+        y?: number;
+        z?: number;
+    }): void;
+};
+type RemoveFrameCallback = {
+    (componentName: string): void;
+};
+export declare class DetailConfigUpdater {
+    private object;
+    private referenceFrame;
+    private updateFrame;
+    private removeFrame;
+    constructor(object: () => WorldObject<Geometries> | undefined, updateFrame: UpdateFrameCallback, removeFrame: RemoveFrameCallback, referenceFrame: () => string);
+    updateLocalPosition: ({ x, y, z }: {
+        x?: number;
+        y?: number;
+        z?: number;
+    }) => void;
+    updateLocalOrientation: ({ oX, oY, oZ, theta, }: {
+        oX?: number;
+        oY?: number;
+        oZ?: number;
+        theta?: number;
+    }) => void;
+    updateGeometry: (geometry: {
+        type: "none" | "box" | "sphere" | "capsule";
+        r?: number;
+        l?: number;
+        x?: number;
+        y?: number;
+        z?: number;
+    }) => void;
+    setFrameParent: (parentName: string) => void;
+    deleteFrame: () => void;
+    setGeometryType: (type: "none" | "box" | "sphere" | "capsule") => void;
+}
+export {};

package/dist/Detail.svelte.js

@@ -0,0 +1,155 @@
+export class DetailConfigUpdater {
+    object;
+    referenceFrame;
+    updateFrame;
+    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();
+        if (!object)
+            return;
+        object.localEditedPose.x = x ?? object.localEditedPose.x;
+        object.localEditedPose.y = y ?? object.localEditedPose.y;
+        object.localEditedPose.z = z ?? object.localEditedPose.z;
+        this.updateFrame(object.name ?? '', this.referenceFrame(), {
+            x: x ?? object.localEditedPose.x,
+            y: y ?? object.localEditedPose.y,
+            z: z ?? object.localEditedPose.z,
+            oX: object.localEditedPose.oX,
+            oY: object.localEditedPose.oY,
+            oZ: object.localEditedPose.oZ,
+            theta: object.localEditedPose.theta,
+        });
+    };
+    updateLocalOrientation = ({ oX, oY, oZ, theta, }) => {
+        const object = this.object();
+        if (!object)
+            return;
+        object.localEditedPose.oX = oX ?? object.localEditedPose.oX;
+        object.localEditedPose.oY = oY ?? object.localEditedPose.oY;
+        object.localEditedPose.oZ = oZ ?? object.localEditedPose.oZ;
+        object.localEditedPose.theta = theta ?? object.localEditedPose.theta;
+        this.updateFrame(object.name ?? '', this.referenceFrame(), {
+            oX: oX ?? object.localEditedPose.oX,
+            oY: oY ?? object.localEditedPose.oY,
+            oZ: oZ ?? object.localEditedPose.oZ,
+            theta: theta ?? object.localEditedPose.theta,
+            x: object.localEditedPose.x,
+            y: object.localEditedPose.y,
+            z: object.localEditedPose.z,
+        });
+    };
+    updateGeometry = (geometry) => {
+        const object = this.object();
+        if (!object)
+            return;
+        let geometryObject;
+        if (geometry.type === 'box') {
+            const currentGeometry = object.geometry?.geometryType.value;
+            geometryObject = {
+                type: 'box',
+                x: geometry.x ?? currentGeometry?.dimsMm?.x,
+                y: geometry.y ?? currentGeometry?.dimsMm?.y,
+                z: geometry.z ?? currentGeometry?.dimsMm?.z,
+            };
+        }
+        else if (geometry.type === 'sphere') {
+            const currentGeometry = object.geometry?.geometryType.value;
+            geometryObject = {
+                type: 'sphere',
+                r: geometry.r ?? currentGeometry?.radiusMm,
+            };
+        }
+        else if (geometry.type === 'capsule') {
+            const currentGeometry = object.geometry?.geometryType.value;
+            geometryObject = {
+                type: 'capsule',
+                r: geometry.r ?? currentGeometry?.radiusMm,
+                l: geometry.l ?? currentGeometry?.lengthMm,
+            };
+        }
+        this.updateFrame(object.name ?? '', this.referenceFrame(), {
+            x: object.localEditedPose.x,
+            y: object.localEditedPose.y,
+            z: object.localEditedPose.z,
+            oX: object.localEditedPose.oX,
+            oY: object.localEditedPose.oY,
+            oZ: object.localEditedPose.oZ,
+            theta: object.localEditedPose.theta,
+        }, { ...geometryObject });
+    };
+    setFrameParent = (parentName) => {
+        const object = this.object();
+        if (!object)
+            return;
+        this.updateFrame(object.name ?? '', parentName, {
+            x: object.localEditedPose.x,
+            y: object.localEditedPose.y,
+            z: object.localEditedPose.z,
+            oX: object.localEditedPose.oX,
+            oY: object.localEditedPose.oY,
+            oZ: object.localEditedPose.oZ,
+            theta: object.localEditedPose.theta,
+        });
+    };
+    deleteFrame = () => {
+        const object = this.object();
+        if (!object)
+            return;
+        this.removeFrame(object.name ?? '');
+    };
+    setGeometryType = (type) => {
+        const object = this.object();
+        if (!object)
+            return;
+        if (type === 'none') {
+            this.updateFrame(object.name ?? '', this.referenceFrame(), {
+                x: object.localEditedPose.x,
+                y: object.localEditedPose.y,
+                z: object.localEditedPose.z,
+                oX: object.localEditedPose.oX,
+                oY: object.localEditedPose.oY,
+                oZ: object.localEditedPose.oZ,
+                theta: object.localEditedPose.theta,
+            }, { type: 'none' });
+        }
+        else if (type === 'box') {
+            this.updateFrame(object.name ?? '', this.referenceFrame(), {
+                x: object.localEditedPose.x,
+                y: object.localEditedPose.y,
+                z: object.localEditedPose.z,
+                oX: object.localEditedPose.oX,
+                oY: object.localEditedPose.oY,
+                oZ: object.localEditedPose.oZ,
+                theta: object.localEditedPose.theta,
+            }, { type: 'box', x: 100, y: 100, z: 100 });
+        }
+        else if (type === 'sphere') {
+            this.updateFrame(object.name ?? '', this.referenceFrame(), {
+                x: object.localEditedPose.x,
+                y: object.localEditedPose.y,
+                z: object.localEditedPose.z,
+                oX: object.localEditedPose.oX,
+                oY: object.localEditedPose.oY,
+                oZ: object.localEditedPose.oZ,
+                theta: object.localEditedPose.theta,
+            }, { type: 'sphere', r: 100 });
+        }
+        else if (type === 'capsule') {
+            this.updateFrame(object.name ?? '', this.referenceFrame(), {
+                x: object.localEditedPose.x,
+                y: object.localEditedPose.y,
+                z: object.localEditedPose.z,
+                oX: object.localEditedPose.oX,
+                oY: object.localEditedPose.oY,
+                oZ: object.localEditedPose.oZ,
+                theta: object.localEditedPose.theta,
+            }, { type: 'capsule', r: 20, l: 100 });
+        }
+    };
+}

package/dist/WorldObject.svelte.d.ts

@@ -1,5 +1,7 @@
-import type { Geometry, Pose, TransformWithUUID } from '@viamrobotics/sdk';
-import { BatchedMesh, Box3, 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;
     geometryType: {
@@ -15,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;
@@ -25,20 +32,25 @@ export type Metadata = {
     points?: Vector3[];
     pointSize?: number;
     lineWidth?: number;
-    lineDotColor?: ColorRepresentation;
+    lineDotColor?: Color;
     batched?: {
         id: number;
         object: BatchedMesh;
     };
-    getBoundingBoxAt?: (box: Box3) => void;
+    shape?: ValueOf<typeof SupportedShapes>;
+    getBoundingBoxAt?: (box: OBB) => void;
 };
+export declare const isMetadataKey: (key: string) => key is keyof Metadata;
 export declare class WorldObject<T extends Geometries = Geometries> {
     uuid: string;
     name: string;
-    referenceFrame: string;
-    pose: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Pose>;
+    referenceFrame: string | undefined;
+    pose: PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Pose>;
     geometry?: T;
     metadata: Metadata;
+    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,23 +1,49 @@
-import { BatchedMesh, Box3, Color, MathUtils, Object3D, Vector3, } from 'three';
-import { createPose } from './transform';
+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;
     name;
-    referenceFrame;
+    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;
@@ -27,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;
@@ -42,26 +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;
 };
+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);
+    }
+};

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

@@ -3,6 +3,7 @@
 	import { Canvas } from '@threlte/core'
 	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 	import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
+	import type { Struct } from '@viamrobotics/sdk'
 
 	import Scene from './Scene.svelte'
 	import TreeContainer from './Tree/TreeContainer.svelte'
@@ -16,16 +17,36 @@
 	import { provideSettings } from '../hooks/useSettings.svelte'
 	import FileDrop from './FileDrop.svelte'
 	import WeblabProvider from './weblab/WeblabProvider.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 { provideEnvironment } from '../hooks/useEnvironment.svelte'
+
+	interface LocalConfigProps {
+		getLocalPartConfig: () => Struct
+		setLocalPartConfig: (config: Struct) => void
+		isDirty: () => boolean
+		getComponentToFragId: () => Record<string, string>
+	}
+
 	interface Props {
 		partID?: string
 		enableKeybindings?: boolean
 		children?: Snippet
+		localConfigProps?: LocalConfigProps
 	}
 
-	let { partID = '', enableKeybindings = true, children: appChildren }: Props = $props()
+	let {
+		partID = '',
+		enableKeybindings = true,
+		children: appChildren,
+		localConfigProps,
+	}: Props = $props()
 
+	const appClient = useViamClient()
 	const settings = provideSettings()
+	const environment = provideEnvironment()
 
 	$effect(() => {
 		settings.current.enableKeybindings = enableKeybindings
@@ -36,6 +57,26 @@
 	provideToast()
 
 	let root = $state.raw<HTMLElement>()
+
+	if (localConfigProps) {
+		environment.current.isStandalone = false
+		providePartConfig({
+			appEmbeddedPartConfigProps: {
+				isDirty: () => localConfigProps.isDirty(),
+				getLocalPartConfig: () => localConfigProps.getLocalPartConfig(),
+				setLocalPartConfig: (config: Struct) => localConfigProps.setLocalPartConfig(config),
+				getComponentToFragId: () => localConfigProps.getComponentToFragId(),
+			},
+		})
+	} else {
+		environment.current.isStandalone = true
+		providePartConfig({
+			standalonePartConfigProps: {
+				viamClient: () => appClient?.current,
+				partID: () => partID,
+			},
+		})
+	}
 </script>
 
 {#if settings.current.enableQueryDevtools}
@@ -59,6 +100,9 @@
 
 						<Dashboard {@attach domPortal(root)} />
 						<Details {@attach domPortal(root)} />
+						{#if environment.current.isStandalone}
+							<LiveUpdatesBanner {@attach domPortal(root)} />
+						{/if}
 
 						{#if !focus}
 							<TreeContainer {@attach domPortal(root)} />

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

@@ -1,8 +1,16 @@
 import type { Snippet } from 'svelte';
+import type { Struct } from '@viamrobotics/sdk';
+interface LocalConfigProps {
+    getLocalPartConfig: () => Struct;
+    setLocalPartConfig: (config: Struct) => void;
+    isDirty: () => boolean;
+    getComponentToFragId: () => Record<string, string>;
+}
 interface Props {
     partID?: string;
     enableKeybindings?: boolean;
     children?: Snippet;
+    localConfigProps?: LocalConfigProps;
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;