@viamrobotics/motion-tools 1.13.1 → 1.15.0

package/dist/three/OBBHelper.js

@@ -1,4 +1,7 @@
-import { LineSegments, LineBasicMaterial, EdgesGeometry, BoxGeometry, Vector3, Quaternion, Matrix4, Object3D, Mesh, BufferGeometry, Matrix3, } from 'three';
+import { BoxGeometry, BufferGeometry, EdgesGeometry, Matrix3, Matrix4, Mesh, Object3D, Quaternion, Vector3, } from 'three';
+import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
+import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2.js';
+import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
 const center = new Vector3();
 const half = new Vector3();
 const size = new Vector3();
@@ -6,13 +9,22 @@ const quaternion = new Quaternion();
 const scale = new Vector3();
 const absScale = new Vector3();
 const worldCenter = new Vector3();
-export class OBBHelper extends LineSegments {
-    constructor(color = 0x000000, linewidth = 1) {
-        const geometry = new EdgesGeometry(new BoxGeometry());
-        const material = new LineBasicMaterial({ color, linewidth });
+export class OBBHelper extends LineSegments2 {
+    constructor(color = 0x000000, linewidth = 2) {
+        const edges = new EdgesGeometry(new BoxGeometry());
+        const geometry = new LineSegmentsGeometry();
+        geometry.setPositions(edges.getAttribute('position').array);
+        const material = new LineMaterial({
+            color,
+            linewidth,
+            depthTest: false,
+            depthWrite: false,
+            transparent: true,
+        });
         super(geometry, material);
         this.matrixAutoUpdate = false;
         this.frustumCulled = false;
+        this.renderOrder = 999;
     }
     setFromOBB(obb) {
         // position/rotation

package/dist/three/OrientationVector.js

@@ -1,4 +1,4 @@
-import { Euler, Quaternion, Vector3, MathUtils } from 'three';
+import { Euler, MathUtils, Quaternion, Vector3 } from 'three';
 export const EPSILON = 0.0001;
 const xAxis = new Quaternion(-1, 0, 0, 0);
 const zAxis = new Quaternion(0, 0, +1, 0);

package/dist/transform.js

@@ -1,5 +1,5 @@
-import { OrientationVector } from './three/OrientationVector';
 import { Euler, MathUtils, Matrix4, Quaternion, Vector3 } from 'three';
+import { OrientationVector } from './three/OrientationVector';
 const quaternion = new Quaternion();
 const euler = new Euler();
 const ov = new OrientationVector();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.13.1",
+  "version": "1.15.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -51,6 +51,7 @@
     "esbuild": "^0.27.3",
     "eslint": "10.0.2",
     "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-perfectionist": "^5.6.0",
     "eslint-plugin-svelte": "3.15.0",
     "eslint-plugin-unicorn": "^63.0.0",
     "globals": "16.3.0",
@@ -149,7 +150,7 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && pnpm build:workers && svelte-check --tsconfig ./tsconfig.json && pnpm vet",
     "check:watch": "svelte-kit sync && pnpm build:workers && svelte-check --tsconfig ./tsconfig.json --watch",
-    "format": "prettier --write .",
+    "format": "prettier --write . && eslint . --fix",
     "lint:draw": "golangci-lint run ./draw/...",
     "lint:client": "golangci-lint run ./client/...",
     "lint:prettier": "prettier --check .",

package/dist/WorldObject.svelte.d.ts

@@ -1,27 +0,0 @@
-import type { PlainMessage, Struct } from '@viamrobotics/sdk';
-import { BatchedMesh, Color, Vector3 } from 'three';
-import type { GLTF } from 'three/examples/jsm/Addons.js';
-import type { OBB } from 'three/addons/math/OBB.js';
-declare enum SupportedShapes {
-    points = "points",
-    line = "line",
-    arrow = "arrow"
-}
-type Metadata = {
-    colors?: Float32Array<ArrayBufferLike>;
-    color?: Color;
-    opacity?: number;
-    gltf?: GLTF;
-    points?: Vector3[];
-    pointSize?: number;
-    lineWidth?: number;
-    lineDotColor?: Color;
-    batched?: {
-        id: number;
-        object: BatchedMesh;
-    };
-    shape?: SupportedShapes;
-    getBoundingBoxAt?: (box: OBB) => void;
-};
-export declare const parseMetadata: (fields?: PlainMessage<Struct>["fields"]) => Metadata;
-export {};

package/dist/WorldObject.svelte.js

@@ -1,127 +0,0 @@
-import { BatchedMesh, Color, Vector3 } from 'three';
-import { isColorRepresentation, isRGB, parseColor, parseOpacity, parseRGB } from './color';
-var SupportedShapes;
-(function (SupportedShapes) {
-    SupportedShapes["points"] = "points";
-    SupportedShapes["line"] = "line";
-    SupportedShapes["arrow"] = "arrow";
-})(SupportedShapes || (SupportedShapes = {}));
-const METADATA_KEYS = [
-    'colors',
-    'color',
-    'opacity',
-    'gltf',
-    'points',
-    'pointSize',
-    'lineWidth',
-    'lineDotColor',
-    'batched',
-    'shape',
-];
-const isMetadataKey = (key) => {
-    return METADATA_KEYS.includes(key);
-};
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const unwrapValue = (value) => {
-    if (!value?.kind)
-        return value;
-    switch (value.kind.case) {
-        case 'numberValue':
-        case 'stringValue':
-        case 'boolValue': {
-            return value.kind.value;
-        }
-        case 'structValue': {
-            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;
-        }
-        case 'listValue': {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            return value.kind.value.values?.map((value) => unwrapValue(value)) || [];
-        }
-        case 'nullValue': {
-            return null;
-        }
-        default: {
-            return value.kind.value;
-        }
-    }
-};
-export const parseMetadata = (fields = {}) => {
-    const json = {};
-    for (const [k, v] of Object.entries(fields)) {
-        if (!isMetadataKey(k))
-            continue;
-        const unwrappedValue = unwrapValue(v);
-        switch (k) {
-            case 'color':
-            case 'lineDotColor': {
-                json[k] = readColor(unwrappedValue);
-                break;
-            }
-            case 'colors': {
-                let colorBytes;
-                // Handle base64-encoded string (from protobuf Struct)
-                if (typeof unwrappedValue === 'string') {
-                    const binary = atob(unwrappedValue);
-                    colorBytes = new Uint8Array(binary.length);
-                    for (let i = 0; i < binary.length; i++) {
-                        colorBytes[i] = binary.charCodeAt(i);
-                    }
-                }
-                else if (Array.isArray(unwrappedValue)) {
-                    colorBytes = unwrappedValue;
-                }
-                if (colorBytes && colorBytes.length >= 3) {
-                    const r = (colorBytes[0] ?? 0) / 255;
-                    const g = (colorBytes[1] ?? 0) / 255;
-                    const b = (colorBytes[2] ?? 0) / 255;
-                    const a = colorBytes.length >= 4 ? (colorBytes[3] ?? 255) / 255 : 1;
-                    json.color = new Color(r, g, b);
-                    json.opacity = a;
-                }
-                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');
-};

package/dist/hooks/__tests__/fixtures/ResizableTestWrapper.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-	import { useResizable } from '../../useResizable.svelte'
-
-	interface Props {
-		name: string
-	}
-
-	let { name }: Props = $props()
-
-	const resizable = useResizable(() => name)
-
-	let container = $state<HTMLDivElement>()
-
-	$effect(() => {
-		if (container) {
-			resizable.observe(container)
-		}
-	})
-</script>
-
-<div data-testid="status">
-	{#if resizable.isLoaded}
-		loaded
-	{:else}
-		loading
-	{/if}
-</div>
-
-<div data-testid="dimensions">
-	{resizable.current.width}x{resizable.current.height}
-</div>
-
-<div
-	bind:this={container}
-	data-testid="container"
-	class="resize"
-	style:width={`${resizable.current.width}px`}
-	style:height={`${resizable.current.height}px`}
->
-	Resizable container
-</div>

package/dist/hooks/__tests__/fixtures/ResizableTestWrapper.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    name: string;
-}
-declare const ResizableTestWrapper: import("svelte").Component<Props, {}, "">;
-type ResizableTestWrapper = ReturnType<typeof ResizableTestWrapper>;
-export default ResizableTestWrapper;

package/dist/hooks/useResizable.svelte.d.ts

@@ -1,12 +0,0 @@
-interface Dimensions {
-    width: number;
-    height: number;
-}
-interface Context {
-    readonly current: Dimensions;
-    readonly isLoaded: boolean;
-    observe: (target: HTMLElement) => void;
-}
-export declare const MIN_DIMENSIONS: Dimensions;
-export declare const useResizable: (name: () => string, defaultDimensions?: () => Dimensions) => Context;
-export {};

package/dist/hooks/useResizable.svelte.js

@@ -1,46 +0,0 @@
-import { get, set } from 'idb-keyval';
-export const MIN_DIMENSIONS = { width: 240, height: 320 };
-export const useResizable = (name, defaultDimensions) => {
-    const key = $derived(`${name()}-resizable`);
-    let dimensions = $derived(defaultDimensions?.() ?? MIN_DIMENSIONS);
-    let loaded = $state(false);
-    let observer;
-    $effect(() => {
-        get(key).then((saved) => {
-            if (saved) {
-                dimensions = saved;
-            }
-            loaded = true;
-        });
-    });
-    const observe = (target) => {
-        // Disconnect previous observer if any
-        observer?.disconnect();
-        observer = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            if (!entry)
-                return;
-            const next = {
-                width: Math.max(entry.contentRect.width, MIN_DIMENSIONS.width),
-                height: Math.max(entry.contentRect.height, MIN_DIMENSIONS.height),
-            };
-            set(key, next);
-        });
-        observer.observe(target);
-    };
-    const disconnect = () => {
-        observer?.disconnect();
-    };
-    $effect(() => {
-        return disconnect;
-    });
-    return {
-        get current() {
-            return dimensions;
-        },
-        get isLoaded() {
-            return loaded;
-        },
-        observe,
-    };
-};