@viamrobotics/motion-tools 1.29.1 → 1.31.0

package/dist/components/App.svelte

@@ -3,7 +3,6 @@
 	import type { Entity } from 'koota'
 	import type { Snippet } from 'svelte'
 
-	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 	import { Canvas } from '@threlte/core'
 	import { PortalTarget } from '@threlte/extras'
 	import { useXR } from '@threlte/xr'
@@ -11,6 +10,8 @@
 	import { primeTheme } from '@viamrobotics/tweakpane-config'
 	import { ThemeUtils } from 'svelte-tweakpane-ui'
 
+	import type { FragmentInfo } from '../hooks/usePartConfig.svelte'
+
 	import Controls from './overlay/controls/Controls.svelte'
 	import Dashboard from './overlay/dashboard/Dashboard.svelte'
 	import Details from './overlay/Details.svelte'
@@ -40,7 +41,7 @@
 	interface LocalConfigProps {
 		current: Struct
 		isDirty: boolean
-		componentToFragId: Record<string, string>
+		componentNameToFragmentInfo: Record<string, FragmentInfo>
 		setLocalPartConfig: (config: Struct) => void
 	}
 
@@ -111,18 +112,11 @@
 	})
 </script>
 
-{#if settings.current.enableQueryDevtools}
-	<SvelteQueryDevtools initialIsOpen />
-{/if}
-
 <div
 	class="relative h-full w-full overflow-hidden dark:bg-white"
 	bind:this={root}
 >
-	<Canvas
-		renderMode="on-demand"
-		dpr={[1, 2]}
-	>
+	<Canvas renderMode="on-demand">
 		<SceneProviders>
 			{#snippet children({ focus })}
 				<Scene>

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

@@ -1,11 +1,12 @@
 import type { Struct } from '@viamrobotics/sdk';
 import type { Entity } from 'koota';
 import type { Snippet } from 'svelte';
+import type { FragmentInfo } from '../hooks/usePartConfig.svelte';
 import { type CameraPose } from '../hooks/useControls.svelte';
 interface LocalConfigProps {
     current: Struct;
     isDirty: boolean;
-    componentToFragId: Record<string, string>;
+    componentNameToFragmentInfo: Record<string, FragmentInfo>;
     setLocalPartConfig: (config: Struct) => void;
 }
 interface Props {

package/dist/components/SelectedTransformControls.svelte

@@ -8,6 +8,7 @@
 	import { useTransformControls } from '../hooks/useControls.svelte'
 	import { useEnvironment } from '../hooks/useEnvironment.svelte'
 	import { useFrameEditSession } from '../hooks/useFrameEditSession.svelte'
+	import { usePartConfig } from '../hooks/usePartConfig.svelte'
 	import { useSelectedEntity, useSelectedObject3d } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import {
@@ -21,6 +22,7 @@
 
 	const settings = useSettings()
 	const environment = useEnvironment()
+	const partConfig = usePartConfig()
 	const transformControls = useTransformControls()
 	const selectedEntity = useSelectedEntity()
 	const selectedObject3d = useSelectedObject3d()
@@ -29,14 +31,21 @@
 	const mode = $derived(settings.current.transformMode)
 	const entity = $derived(selectedEntity.current)
 	const transformable = useTrait(() => entity, traits.Transformable)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 	const configMatrix = useTrait(() => entity, traits.Matrix)
 	const liveMatrix = useTrait(() => entity, traits.LiveMatrix)
 	const box = useTrait(() => entity, traits.Box)
 	const sphere = useTrait(() => entity, traits.Sphere)
 	const capsule = useTrait(() => entity, traits.Capsule)
+	const name = useTrait(() => entity, traits.Name)
 	const hasScalableGeometry = $derived(
 		box.current !== undefined || sphere.current !== undefined || capsule.current !== undefined
 	)
+	const isFragmentComponentWithVariables = $derived(
+		name.current &&
+			Object.keys(partConfig.componentNameToFragmentInfo?.[name.current]?.variables ?? {}).length >
+				0
+	)
 
 	// Mesh sets name={entity} on its inner mesh, so useSelectedObject3d resolves
 	// to that mesh — not the parent Frame Group we actually want to drive. Walk
@@ -241,7 +250,7 @@
 	}
 </script>
 
-{#if ref && entity && activeMode}
+{#if ref && entity && activeMode && !isFragmentComponentWithVariables && !invisible.current}
 	{#key entity}
 		<TransformControls
 			object={ref}

package/dist/components/overlay/AddFrames.svelte

@@ -22,7 +22,7 @@
 	<Portal id="dashboard">
 		<fieldset>
 			<DashboardButton
-				active
+				active={isOpen}
 				icon="axis-arrow"
 				description="Add frames"
 				onclick={() => {

package/dist/components/overlay/Details.svelte

@@ -109,7 +109,14 @@
 
 	const isFrameNode = $derived(!!framesAPI.current)
 	const isGeometry = $derived(!!geometriesAPI.current)
-	const showEditFrameOptions = $derived(isFrameNode && partConfig.hasEditPermissions)
+	const isFragmentComponentWithVariables = $derived(
+		name.current &&
+			Object.keys(partConfig.componentNameToFragmentInfo?.[name.current]?.variables ?? {}).length >
+				0
+	)
+	const showEditFrameOptions = $derived(
+		isFrameNode && partConfig.hasEditPermissions && !isFragmentComponentWithVariables
+	)
 	const showRelationshipOptions = $derived(points.current || arrows.current)
 	const resourceName = $derived(name.current ? resourceByName.current[name.current] : undefined)
 	const displayType = $derived(isFrameNode ? resourceName?.subtype : isGeometry ? 'geometry' : '')
@@ -406,6 +413,16 @@
 
 		<div class="border-medium -mx-2 w-[100%+0.5rem] border-b"></div>
 
+		{#if isFragmentComponentWithVariables}
+			<p
+				class="mt-2 rounded border-l-4 border-yellow-600 bg-yellow-50 px-2 py-1.5 text-yellow-900"
+				data-testid="fragment-variables-warning"
+				role="status"
+			>
+				This component is from a fragment with variables, editing frames in 3D scene is disabled
+			</p>
+		{/if}
+
 		<h3
 			class="text-subtle-2 flex justify-between py-2"
 			data-testid="details-header"

package/dist/components/overlay/Logs.svelte

@@ -21,7 +21,7 @@
 <Portal id="dashboard">
 	<fieldset class="relative">
 		<DashboardButton
-			active
+			active={isOpen.current}
 			icon="article"
 			description="Logs"
 			onclick={() => {

package/dist/components/overlay/dashboard/Button.svelte

@@ -34,7 +34,7 @@
 		class={[
 			className,
 			'relative block rounded-md border',
-			active ? 'border-gray-5 text-gray-8 z-4 bg-white' : 'bg-light border-medium text-disabled',
+			active ? 'z-4 border-[#666] bg-[#666] text-white' : 'border-gray-5 text-gray-8 bg-white',
 		]}
 		aria-describedby={tooltipID}
 	>

package/dist/components/overlay/settings/Settings.svelte

@@ -62,7 +62,7 @@
 <Portal id="dashboard">
 	<fieldset>
 		<DashboardButton
-			active
+			active={isOpen.current}
 			icon="cog"
 			description="Settings"
 			onclick={() => {
@@ -278,10 +278,6 @@
 
 {#snippet Stats()}
 	<div class="flex w-full flex-col gap-2.5 text-xs">
-		<label class="flex items-center justify-between gap-2">
-			Query devtools <Switch bind:on={settings.current.enableQueryDevtools} />
-		</label>
-
 		<label class="flex items-center justify-between gap-2">
 			Render stats <Switch bind:on={settings.current.renderStats} />
 		</label>

package/dist/hooks/useConfigFrames.svelte.js

@@ -25,12 +25,12 @@ export const provideConfigFrames = () => {
     });
     const [fragmentFrames, fragmentUnsetFrameNames] = $derived.by(() => {
         const { fragment_mods: fragmentMods = [] } = partConfig.current;
-        const fragmentDefinedComponents = Object.keys(partConfig.componentNameToFragmentId);
+        const fragmentDefinedComponents = Object.keys(partConfig.componentNameToFragmentInfo ?? {});
         const results = {};
         const unsetResults = [];
         // deal with fragment defined components
         for (const fragmentComponentName of fragmentDefinedComponents || []) {
-            const fragmentId = partConfig.componentNameToFragmentId[fragmentComponentName];
+            const fragmentId = partConfig.componentNameToFragmentInfo[fragmentComponentName].id;
             const fragmentMod = fragmentMods?.find((mod) => mod.fragment_id === fragmentId);
             if (!fragmentMod) {
                 continue;
@@ -64,7 +64,7 @@ export const provideConfigFrames = () => {
          * any whose frame the user has $unset.
          */
         const unsetFragmentNames = new Set(fragmentUnsetFrameNames);
-        for (const name of Object.keys(partConfig.componentNameToFragmentId)) {
+        for (const name of Object.keys(partConfig.componentNameToFragmentInfo)) {
             if (!unsetFragmentNames.has(name)) {
                 validFrames.add(name);
             }

package/dist/hooks/useFramelessComponents.svelte.js

@@ -11,7 +11,7 @@ export const provideFramelessComponents = () => {
             ?.filter((component) => component.frame === undefined)
             .map((component) => component.name) ?? [];
         const fragmentComponentsWithNoFrame = new Set(partComponentsWIthNoFrame);
-        for (const fragmentComponentName of Object.keys(partConfig.componentNameToFragmentId)) {
+        for (const fragmentComponentName of Object.keys(partConfig.componentNameToFragmentInfo)) {
             if (frames.current.some((frame) => frame.referenceFrame === fragmentComponentName)) {
                 continue;
             }

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

@@ -11,12 +11,16 @@ export interface PartConfig {
         mods: any[];
     }[];
 }
+export type FragmentInfo = {
+    id: string;
+    variables: Record<string, string>;
+};
 interface PartConfigContext {
     current: PartConfig;
     isDirty: boolean;
     hasPendingSave: boolean;
     hasEditPermissions: boolean;
-    componentNameToFragmentId: Record<string, string>;
+    componentNameToFragmentInfo: Record<string, FragmentInfo>;
     updateFrame: (componentName: string, referenceFrame: string, pose: Pose, geometry?: Frame['geometry']) => void;
     deleteFrame: (componentName: string) => void;
     createFrame: (componentName: string) => void;
@@ -30,7 +34,7 @@ export declare const usePartConfig: () => PartConfigContext;
 interface AppEmbeddedPartConfigProps {
     current: Struct;
     isDirty: boolean;
-    componentToFragId: Record<string, string>;
+    componentNameToFragmentInfo: Record<string, FragmentInfo>;
     setLocalPartConfig: (config: Struct) => void;
 }
 export {};

package/dist/hooks/usePartConfig.svelte.js

@@ -155,8 +155,8 @@ export const providePartConfig = (partID, params) => {
         get current() {
             return current;
         },
-        get componentNameToFragmentId() {
-            return config.componentNameToFragmentId;
+        get componentNameToFragmentInfo() {
+            return config.componentNameToFragmentInfo;
         },
         get isDirty() {
             return config.isDirty;
@@ -168,7 +168,7 @@ export const providePartConfig = (partID, params) => {
             return config.hasEditPermissions;
         },
         updateFrame: (componentName, referenceFrame, framePosition, frameGeometry) => {
-            const fragmentId = config.componentNameToFragmentId[componentName];
+            const fragmentId = config.componentNameToFragmentInfo[componentName]?.id;
             if (fragmentId === undefined) {
                 updatePartFrame(componentName, referenceFrame, framePosition, frameGeometry);
             }
@@ -177,7 +177,7 @@ export const providePartConfig = (partID, params) => {
             }
         },
         deleteFrame: (componentName) => {
-            const fragmentId = config.componentNameToFragmentId[componentName];
+            const fragmentId = config.componentNameToFragmentInfo[componentName]?.id;
             if (fragmentId === undefined) {
                 deletePartFrame(componentName);
             }
@@ -186,7 +186,7 @@ export const providePartConfig = (partID, params) => {
             }
         },
         createFrame: (componentName) => {
-            const fragmentId = config.componentNameToFragmentId[componentName];
+            const fragmentId = config.componentNameToFragmentInfo[componentName]?.id;
             if (fragmentId === undefined) {
                 createPartFrame(componentName);
             }
@@ -244,8 +244,8 @@ const useEmbeddedPartConfig = (props) => {
         get current() {
             return props.current ?? new Struct();
         },
-        get componentNameToFragmentId() {
-            return props.componentToFragId;
+        get componentNameToFragmentInfo() {
+            return props.componentNameToFragmentInfo;
         },
         set(config) {
             const struct = Struct.fromJson(config);
@@ -287,7 +287,16 @@ const useStandalonePartConfig = (partID) => {
         const id = typeof fragmentId === 'string' ? fragmentId : fragmentId.id;
         return createAppQuery('getFragment', () => [id], { refetchInterval: false });
     }));
-    const componentNameToFragmentId = $derived.by(() => {
+    const fragmentIdToVariables = $derived.by(() => {
+        const results = {};
+        for (const fragment of configJSON?.fragments ?? []) {
+            const id = typeof fragment === 'string' ? fragment : fragment.id;
+            const variables = typeof fragment === 'string' ? {} : fragment.variables;
+            results[id] = variables;
+        }
+        return results;
+    });
+    const componentNameToFragmentInfo = $derived.by(() => {
         const results = {};
         for (const query of fragmentQueries) {
             if (!query.data) {
@@ -300,7 +309,10 @@ const useStandalonePartConfig = (partID) => {
                     if (component.kind.case === 'structValue') {
                         const componentName = component.kind.value.fields['name']?.kind;
                         if (componentName.case === 'stringValue') {
-                            results[componentName.value] = fragmentId;
+                            results[componentName.value] = {
+                                id: fragmentId,
+                                variables: fragmentIdToVariables[fragmentId] ?? {},
+                            };
                         }
                     }
                 }
@@ -340,8 +352,8 @@ const useStandalonePartConfig = (partID) => {
         get hasEditPermissions() {
             return hasEditPermissions;
         },
-        get componentNameToFragmentId() {
-            return componentNameToFragmentId;
+        get componentNameToFragmentInfo() {
+            return componentNameToFragmentInfo;
         },
         set(config) {
             current = Struct.fromJson(config);

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

@@ -23,7 +23,6 @@ export interface Settings {
     enableMeasureAxisY: boolean;
     enableMeasureAxisZ: boolean;
     enableLabels: boolean;
-    enableQueryDevtools: boolean;
     enableArmPositionsWidget: boolean;
     openCameraWidgets: Record<string, string[]>;
     openFramePovWidgets: Record<string, string[]>;

package/dist/hooks/useSettings.svelte.js

@@ -30,7 +30,6 @@ const defaults = () => ({
     enableMeasureAxisY: true,
     enableMeasureAxisZ: true,
     enableLabels: false,
-    enableQueryDevtools: false,
     enableArmPositionsWidget: false,
     openCameraWidgets: {},
     openFramePovWidgets: {},

package/dist/lib.d.ts

@@ -7,3 +7,4 @@ export { OrientationVector } from './three/OrientationVector';
 export { parsePcdInWorker } from './loaders/pcd';
 export { createBinaryPCD } from './pcd';
 export { metadataFromStruct } from './metadata';
+export { decodeDrawnSnapshotPointClouds } from './snapshot';

package/dist/lib.js

@@ -13,3 +13,4 @@ export { OrientationVector } from './three/OrientationVector';
 export { parsePcdInWorker } from './loaders/pcd';
 export { createBinaryPCD } from './pcd';
 export { metadataFromStruct } from './metadata';
+export { decodeDrawnSnapshotPointClouds } from './snapshot';