@viamrobotics/motion-tools 1.1.4 → 1.1.6

package/dist/components/App.svelte

@@ -22,6 +22,10 @@
 	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
 	import type { CameraPose } from '../hooks/useControls.svelte'
 	import { provideWorld } from '../ecs'
+	import {
+		provideDrawConnectionConfig,
+		type DrawConnectionConfig,
+	} from '../hooks/useDrawConnectionConfig.svelte'
 
 	interface LocalConfigProps {
 		getLocalPartConfig: () => Struct
@@ -36,6 +40,7 @@
 		children?: Snippet
 		dashboard?: Snippet
 		localConfigProps?: LocalConfigProps
+		drawConnectionConfig?: DrawConnectionConfig
 
 		/**
 		 * Allows setting the initial camera pose
@@ -48,6 +53,7 @@
 		enableKeybindings = true,
 		localConfigProps,
 		cameraPose,
+		drawConnectionConfig,
 		children: appChildren,
 		dashboard,
 	}: Props = $props()
@@ -63,7 +69,7 @@
 	})
 
 	createPartIDContext(() => partID)
-
+	provideDrawConnectionConfig(() => drawConnectionConfig)
 	provideWeblabs()
 	provideToast()
 

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { Struct } from '@viamrobotics/sdk';
 import type { CameraPose } from '../hooks/useControls.svelte';
+import { type DrawConnectionConfig } from '../hooks/useDrawConnectionConfig.svelte';
 interface LocalConfigProps {
     getLocalPartConfig: () => Struct;
     setLocalPartConfig: (config: Struct) => void;
@@ -13,6 +14,7 @@ interface Props {
     children?: Snippet;
     dashboard?: Snippet;
     localConfigProps?: LocalConfigProps;
+    drawConnectionConfig?: DrawConnectionConfig;
     /**
      * Allows setting the initial camera pose
      */

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

@@ -0,0 +1,26 @@
+export default BatchedGeometry;
+type BatchedGeometry = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const BatchedGeometry: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/components/Frame.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
-	import { Color, type Object3D } from 'three'
+	import { Color, Group, type Object3D } from 'three'
 	import Geometry from './Geometry2.svelte'
 	import { useWeblabs } from '../hooks/useWeblabs.svelte'
 	import { useSelectedEntity } from '../hooks/useSelection.svelte'
@@ -13,6 +13,7 @@
 	import { traits, useTrait } from '../ecs'
 	import type { Pose } from '@viamrobotics/sdk'
 	import { useResourceByName } from '../hooks/useResourceByName.svelte'
+	import { Portal, PortalTarget } from '@threlte/extras'
 
 	interface Props {
 		entity: Entity
@@ -22,14 +23,20 @@
 
 	let { entity, pose, children }: Props = $props()
 
+	let ref = $state<Group>()
+
 	const colorUtil = new Color()
+
 	const settings = useSettings()
 	const componentModels = use3DModels()
 	const selectedEntity = useSelectedEntity()
 	const resourceByName = useResourceByName()
 	const weblabs = useWeblabs()
+
 	const name = useTrait(() => entity, traits.Name)
+	const parent = useTrait(() => entity, traits.Parent)
 	const entityColor = useTrait(() => entity, traits.Color)
+
 	const events = useObjectEvents(() => entity)
 	const resourceColor = $derived.by(() => {
 		if (!name.current) {
@@ -66,14 +73,24 @@
 	})
 </script>
 
-<Geometry
-	{entity}
-	{model}
-	{pose}
-	{children}
-	renderMode={settings.current.renderArmModels}
-	color={selectedEntity.current === entity
-		? `#${darkenColor(color, 75).getHexString()}`
-		: `#${colorUtil.set(color).getHexString()}`}
-	{...events}
-/>
+<Portal id={parent.current}>
+	<Geometry
+		bind:ref
+		{entity}
+		{model}
+		{pose}
+		renderMode={settings.current.renderArmModels}
+		color={selectedEntity.current === entity
+			? `#${darkenColor(color, 75).getHexString()}`
+			: `#${colorUtil.set(color).getHexString()}`}
+		{...events}
+	>
+		{#if name.current}
+			<PortalTarget id={name.current} />
+		{/if}
+
+		{#if ref}
+			{@render children?.({ ref })}
+		{/if}
+	</Geometry>
+</Portal>

package/dist/components/Geometry2.svelte

@@ -1,13 +1,7 @@
 <script lang="ts">
 	import { T, useThrelte, type Props as ThrelteProps } from '@threlte/core'
 	import { type Snippet } from 'svelte'
-	import {
-		meshBounds,
-		MeshLineMaterial,
-		MeshLineGeometry,
-		Portal,
-		PortalTarget,
-	} from '@threlte/extras'
+	import { meshBounds, MeshLineMaterial, MeshLineGeometry } from '@threlte/extras'
 	import { BufferGeometry, Color, DoubleSide, FrontSide, Group, Mesh } from 'three'
 	import { CapsuleGeometry } from '../three/CapsuleGeometry'
 	import { colors, darkenColor } from '../color'
@@ -23,6 +17,7 @@
 		model?: Group
 		pose?: Pose
 		renderMode?: 'model' | 'colliders' | 'colliders+model'
+		ref?: Group
 		children?: Snippet<[{ ref: Group }]>
 	}
 
@@ -32,6 +27,7 @@
 		model,
 		renderMode = 'colliders',
 		pose,
+		ref = $bindable(),
 		children,
 		...rest
 	}: Props = $props()
@@ -40,7 +36,6 @@
 
 	const { invalidate } = useThrelte()
 	const name = useTrait(() => entity, traits.Name)
-	const parent = useTrait(() => entity, traits.Parent)
 	const entityColor = useTrait(() => entity, traits.Color)
 	const opacity = useTrait(() => entity, traits.Opacity)
 	const box = useTrait(() => entity, traits.Box)
@@ -71,6 +66,8 @@
 	})
 
 	const group = new Group()
+	ref = group
+
 	const mesh = $derived.by(() => {
 		if (geometryType === undefined) {
 			return
@@ -103,8 +100,8 @@
 
 	let geo = $state.raw<BufferGeometry>()
 
-	const oncreate = (ref: BufferGeometry) => {
-		geo = ref
+	const oncreate = (bufferGeometry: BufferGeometry) => {
+		geo = bufferGeometry
 	}
 
 	$effect.pre(() => {
@@ -120,87 +117,81 @@
 	})
 </script>
 
-<Portal id={parent.current}>
-	<T
-		is={group}
-		{...rest}
-	>
-		{#if geometryType}
-			<AxesHelper
-				width={3}
-				length={0.1}
-			/>
-
-			<T
-				is={mesh}
-				name={name.current}
-				bvh={{ enabled: geometryType === 'buffer' }}
-			>
-				{#if model && renderMode.includes('model')}
-					<T is={model} />
-				{/if}
-
-				{#if !model || renderMode.includes('colliders')}
-					{#if lineGeometry.current}
-						<MeshLineGeometry points={lineGeometry.current} />
-					{:else if box.current}
-						{@const { x, y, z } = box.current ?? { x: 0, y: 0, z: 0 }}
-						<T.BoxGeometry
-							args={[x * 0.001, y * 0.001, z * 0.001]}
-							{oncreate}
-						/>
-					{:else if sphere.current}
-						{@const { r } = sphere.current ?? { r: 0 }}
-						<T.SphereGeometry
-							args={[r * 0.001]}
-							{oncreate}
-						/>
-					{:else if capsule.current}
-						{@const { r, l } = capsule.current ?? { r: 0, l: 0 }}
-						<T
-							is={CapsuleGeometry}
-							args={[r * 0.001, l * 0.001]}
-							{oncreate}
-						/>
-					{/if}
-				{/if}
-
+<T
+	is={group}
+	{...rest}
+>
+	{#if geometryType}
+		<AxesHelper
+			width={3}
+			length={0.1}
+		/>
+
+		<T
+			is={mesh}
+			name={name.current}
+			bvh={{ enabled: geometryType === 'buffer' }}
+		>
+			{#if model && renderMode.includes('model')}
+				<T is={model} />
+			{/if}
+
+			{#if !model || renderMode.includes('colliders')}
 				{#if lineGeometry.current}
-					<MeshLineMaterial
-						{color}
-						width={0.005}
+					<MeshLineGeometry points={lineGeometry.current} />
+				{:else if box.current}
+					{@const { x, y, z } = box.current ?? { x: 0, y: 0, z: 0 }}
+					<T.BoxGeometry
+						args={[x * 0.001, y * 0.001, z * 0.001]}
+						{oncreate}
 					/>
-				{:else}
-					<T.MeshToonMaterial
-						{color}
-						side={geometryType === 'buffer' ? DoubleSide : FrontSide}
-						transparent
-						opacity={opacity.current ?? 0.7}
+				{:else if sphere.current}
+					{@const { r } = sphere.current ?? { r: 0 }}
+					<T.SphereGeometry
+						args={[r * 0.001]}
+						{oncreate}
 					/>
-
-					{#if geo}
-						<T.LineSegments
-							raycast={() => null}
-							bvh={{ enabled: false }}
-						>
-							<T.EdgesGeometry args={[geo, 0]} />
-							<T.LineBasicMaterial color={darkenColor(color, 10)} />
-						</T.LineSegments>
-					{/if}
+				{:else if capsule.current}
+					{@const { r, l } = capsule.current ?? { r: 0, l: 0 }}
+					<T
+						is={CapsuleGeometry}
+						args={[r * 0.001, l * 0.001]}
+						{oncreate}
+					/>
+				{/if}
+			{/if}
+
+			{#if lineGeometry.current}
+				<MeshLineMaterial
+					{color}
+					width={0.005}
+				/>
+			{:else}
+				<T.MeshToonMaterial
+					{color}
+					side={geometryType === 'buffer' ? DoubleSide : FrontSide}
+					transparent
+					opacity={opacity.current ?? 0.7}
+				/>
+
+				{#if geo}
+					<T.LineSegments
+						raycast={() => null}
+						bvh={{ enabled: false }}
+					>
+						<T.EdgesGeometry args={[geo, 0]} />
+						<T.LineBasicMaterial color={darkenColor(color, 10)} />
+					</T.LineSegments>
 				{/if}
-			</T>
-		{:else}
-			<AxesHelper
-				name={name.current}
-				width={3}
-				length={0.1}
-			/>
-		{/if}
-
-		{@render children?.({ ref: group })}
-
-		{#if name.current}
-			<PortalTarget id={name.current} />
-		{/if}
-	</T>
-</Portal>
+			{/if}
+		</T>
+	{:else}
+		<AxesHelper
+			name={name.current}
+			width={3}
+			length={0.1}
+		/>
+	{/if}
+
+	{@render children?.({ ref: group })}
+</T>

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

@@ -9,10 +9,11 @@ interface Props extends ThrelteProps<Group> {
     model?: Group;
     pose?: Pose;
     renderMode?: 'model' | 'colliders' | 'colliders+model';
+    ref?: Group;
     children?: Snippet<[{
         ref: Group;
     }]>;
 }
-declare const Geometry2: import("svelte").Component<Props, {}, "">;
+declare const Geometry2: import("svelte").Component<Props, {}, "ref">;
 type Geometry2 = ReturnType<typeof Geometry2>;
 export default Geometry2;

package/dist/components/Tree/TreeContainer.svelte

@@ -69,41 +69,39 @@
 	})
 </script>
 
-{#if resizable.isLoaded}
-	<div
-		bind:this={container}
-		class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 resize overflow-y-auto border text-xs"
-		style:min-width="{MIN_DIMENSIONS.width}px"
-		style:min-height="{MIN_DIMENSIONS.height}px"
-		style:width={resizable.current ? `${resizable.current.width}px` : undefined}
-		style:height={resizable.current ? `${resizable.current.height}px` : undefined}
-		use:draggable={{
-			bounds: 'body',
-			handle: dragElement,
-			defaultPosition: dragPosition.current,
-			onDragEnd(data) {
-				dragPosition.current = { x: data.offsetX, y: data.offsetY }
-			},
-		}}
-		{...rest}
-	>
-		<Tree
-			{rootNode}
-			{nodeMap}
-			bind:dragElement
-			onSelectionChange={(event) => {
-				const value = event.selectedValue[0]
+<div
+	bind:this={container}
+	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 resize overflow-y-auto border text-xs"
+	style:min-width="{MIN_DIMENSIONS.width}px"
+	style:min-height="{MIN_DIMENSIONS.height}px"
+	style:width={resizable.current ? `${resizable.current.width}px` : undefined}
+	style:height={resizable.current ? `${resizable.current.height}px` : undefined}
+	use:draggable={{
+		bounds: 'body',
+		handle: dragElement,
+		defaultPosition: dragPosition.current,
+		onDragEnd(data) {
+			dragPosition.current = { x: Math.max(data.offsetX, 0), y: Math.max(data.offsetY, 0) }
+		},
+	}}
+	{...rest}
+>
+	<Tree
+		{rootNode}
+		{nodeMap}
+		bind:dragElement
+		onSelectionChange={(event) => {
+			const value = event.selectedValue[0]
 
-				selectedEntity.set(value ? (Number(value) as Entity) : undefined)
-			}}
-		/>
+			selectedEntity.set(value ? (Number(value) as Entity) : undefined)
+		}}
+	/>
 
-		{#if environment.current.isStandalone && partID.current && partConfig.hasEditPermissions}
-			<AddFrames />
-		{/if}
+	{#if environment.current.isStandalone && partID.current && partConfig.hasEditPermissions}
+		<AddFrames />
+	{/if}
 
-		<Logs />
-		<Settings />
-		<Widgets />
-	</div>
-{/if}
+	<Logs />
+	<Settings />
+	<Widgets />
+</div>

package/dist/components/dashboard/Button.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { Icon, type IconName, Tooltip } from '@viamrobotics/prime-core'
 	import { Ruler } from 'lucide-svelte'
+	import type { ClassValue, MouseEventHandler } from 'svelte/elements'
 
 	interface Props {
 		icon: IconName | 'ruler'
 		active?: boolean
 		description: string
 		hotkey?: string
-		class?: string
-		onclick?: () => void
+		class?: ClassValue | null | undefined
+		onclick?: MouseEventHandler<HTMLButtonElement> | null | undefined
 	}
 
 	let {

package/dist/components/dashboard/Button.svelte.d.ts

@@ -1,11 +1,12 @@
 import { type IconName } from '@viamrobotics/prime-core';
+import type { ClassValue, MouseEventHandler } from 'svelte/elements';
 interface Props {
     icon: IconName | 'ruler';
     active?: boolean;
     description: string;
     hotkey?: string;
-    class?: string;
-    onclick?: () => void;
+    class?: ClassValue | null | undefined;
+    onclick?: MouseEventHandler<HTMLButtonElement> | null | undefined;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/defines.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Variables that are string-replaced by vite.
+ *
+ * These should not be imported into `$lib`,
+ * due to them not being replaced when shipped to NPM.
+ */
+export declare const backendIP: any;
+export declare const websocketPort: any;

package/dist/defines.js

@@ -0,0 +1,8 @@
+/**
+ * Variables that are string-replaced by vite.
+ *
+ * These should not be imported into `$lib`,
+ * due to them not being replaced when shipped to NPM.
+ */
+export const backendIP = BACKEND_IP;
+export const websocketPort = WS_PORT;

package/dist/hooks/useDrawAPI.svelte.js

@@ -12,6 +12,7 @@ import {} from 'koota';
 import { parsePlyInput } from '../ply';
 import { useLogs } from './useLogs.svelte';
 import { createBox, createCapsule, createSphere } from '../geometry';
+import { useDrawConnectionConfig } from './useDrawConnectionConfig.svelte';
 const colorUtil = new Color();
 const bufferTypes = {
     DRAW_POINTS: 0,
@@ -70,6 +71,9 @@ export const provideDrawAPI = () => {
     const logs = useLogs();
     const cameraControls = useCameraControls();
     const { invalidate } = useThrelte();
+    const drawConnectionConfig = useDrawConnectionConfig();
+    const backendIP = $derived(drawConnectionConfig.current?.backendIP);
+    const websocketPort = $derived(drawConnectionConfig.current?.websocketPort);
     let pointsIndex = 0;
     let geometryIndex = 0;
     let poseIndex = 0;
@@ -82,7 +86,7 @@ export const provideDrawAPI = () => {
     const loader = new GLTFLoader();
     const entities = new Map();
     const sendResponse = (response) => {
-        ws.send(JSON.stringify(response));
+        ws?.send(JSON.stringify(response));
     };
     const drawFrames = async (data) => {
         for (const rawFrame of data) {
@@ -286,6 +290,7 @@ export const provideDrawAPI = () => {
             for (const entity of world.query(traits.DrawAPI)) {
                 if (entity.get(traits.Name) === name) {
                     entity.destroy();
+                    entities.delete(name);
                 }
             }
         }
@@ -294,21 +299,27 @@ export const provideDrawAPI = () => {
         for (const entity of world.query(traits.DrawAPI)) {
             entity.destroy();
         }
+        entities.clear();
         pointsIndex = 0;
         geometryIndex = 0;
         poseIndex = 0;
     };
     const scheduleReconnect = () => {
         setTimeout(() => {
-            reconnectDelay = Math.min(reconnectDelay * 2, maxReconnectDelay);
-            logs.add(`Reconnecting to drawing server in ${reconnectDelay / 1000} seconds...`, 'warn');
-            connect();
+            if (backendIP && websocketPort) {
+                reconnectDelay = Math.min(reconnectDelay * 2, maxReconnectDelay);
+                logs.add(`Reconnecting to drawing server in ${reconnectDelay / 1000} seconds...`, 'warn');
+                connect(backendIP, websocketPort);
+            }
+            else {
+                logs.add('No provided backend IP or websocket port', 'error');
+            }
         }, reconnectDelay);
     };
     const onOpen = () => {
         connectionStatus = 'open';
         reconnectDelay = 1000;
-        logs.add(`Connected to drawing server at ${BACKEND_IP}:${WS_PORT}`);
+        logs.add(`Connected to drawing server at ${backendIP}:${websocketPort}`);
     };
     const onClose = () => {
         connectionStatus = 'closed';
@@ -317,7 +328,7 @@ export const provideDrawAPI = () => {
     };
     const onError = (event) => {
         const stringified = JSON.stringify(event);
-        ws.close();
+        ws?.close();
         if (stringified === '{"isTrusted":true}') {
             return;
         }
@@ -409,17 +420,31 @@ export const provideDrawAPI = () => {
         }
         invalidate();
     };
-    const connect = () => {
-        if (BACKEND_IP && WS_PORT) {
-            const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-            ws = new WebSocket(`${protocol}://${BACKEND_IP}:${WS_PORT}/ws`);
-            ws.onclose = onClose;
-            ws.onerror = onError;
-            ws.onopen = onOpen;
-            ws.onmessage = onMessage;
-        }
+    const connect = (backendIP, websocketPort) => {
+        const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+        ws = new WebSocket(`${protocol}://${backendIP}:${websocketPort}/ws`);
+        ws.onclose = onClose;
+        ws.onerror = onError;
+        ws.onopen = onOpen;
+        ws.onmessage = onMessage;
+    };
+    const disconnect = () => {
+        ws?.removeEventListener('close', onClose);
+        ws?.removeEventListener('error', onError);
+        ws?.removeEventListener('open', onOpen);
+        ws?.removeEventListener('message', onMessage);
+        ws?.close();
+        ws = undefined;
     };
-    connect();
+    $effect(() => {
+        if (!backendIP || !websocketPort) {
+            return;
+        }
+        connect(backendIP, websocketPort);
+        return () => {
+            disconnect();
+        };
+    });
     setContext(key, {
         get connectionStatus() {
             return connectionStatus;

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

@@ -0,0 +1,10 @@
+export interface DrawConnectionConfig {
+    backendIP: string;
+    websocketPort: string;
+}
+interface Context {
+    current: DrawConnectionConfig | undefined;
+}
+export declare const provideDrawConnectionConfig: (args: () => DrawConnectionConfig | undefined) => void;
+export declare const useDrawConnectionConfig: () => Context;
+export {};

package/dist/hooks/useDrawConnectionConfig.svelte.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from 'svelte';
+const key = Symbol('draw-connection-config-key');
+export const provideDrawConnectionConfig = (args) => {
+    const current = $derived(args());
+    setContext(key, {
+        get current() {
+            return current;
+        },
+    });
+};
+export const useDrawConnectionConfig = () => {
+    return getContext(key);
+};

package/dist/hooks/useFrames.svelte.js

@@ -18,7 +18,7 @@ export const provideFrames = (partID) => {
     const machineStatus = useMachineStatus(partID);
     const logs = useLogs();
     const query = createRobotQuery(client, 'frameSystemConfig', () => ({
-        enabled: environment.current.viewerMode === 'monitor',
+        enabled: partID() !== '' && environment.current.viewerMode === 'monitor',
     }));
     const revision = $derived(machineStatus.current?.config?.revision);
     const partConfig = usePartConfig();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -39,6 +39,8 @@
     "@viamrobotics/svelte-sdk": "1.0.1",
     "@vitejs/plugin-basic-ssl": "2.1.0",
     "@vitest/coverage-v8": "^3.2.4",
+    "@zag-js/collapsible": "1.22.1",
+    "@zag-js/floating-panel": "1.22.1",
     "@zag-js/svelte": "1.22.1",
     "@zag-js/tree-view": "1.22.1",
     "camera-controls": "3.1.0",
@@ -78,6 +80,8 @@
     "@viamrobotics/prime-core": ">=0.1",
     "@viamrobotics/sdk": ">=0.38",
     "@viamrobotics/svelte-sdk": ">=0.1",
+    "@zag-js/collapsible": ">=1",
+    "@zag-js/floating-panel": ">=1",
     "@zag-js/svelte": ">=1",
     "@zag-js/tree-view": ">=1",
     "camera-controls": ">=3",