@viamrobotics/motion-tools 1.1.4 → 1.1.5

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/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) {
@@ -300,15 +304,20 @@ export const provideDrawAPI = () => {
     };
     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 +326,7 @@ export const provideDrawAPI = () => {
     };
     const onError = (event) => {
         const stringified = JSON.stringify(event);
-        ws.close();
+        ws?.close();
         if (stringified === '{"isTrusted":true}') {
             return;
         }
@@ -409,17 +418,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.5",
   "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",