@viamrobotics/motion-tools 1.12.2 → 1.13.0

package/dist/components/App.svelte

@@ -17,7 +17,6 @@
 	import FileDrop from './FileDrop/FileDrop.svelte'
 	import { provideWeblabs } from '../hooks/useWeblabs.svelte'
 	import { providePartConfig } from '../hooks/usePartConfig.svelte'
-	import { useViamClient } from '@viamrobotics/svelte-sdk'
 	import LiveUpdatesBanner from './overlay/LiveUpdatesBanner.svelte'
 	import ArmPositions from './overlay/widgets/ArmPositions.svelte'
 	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
@@ -31,12 +30,13 @@
 	import HoveredEntities from './hover/HoveredEntities.svelte'
 	import Settings from './overlay/settings/Settings.svelte'
 	import { useXR } from '@threlte/xr'
+	import Logs from './overlay/Logs.svelte'
 
 	interface LocalConfigProps {
-		getLocalPartConfig: () => Struct
+		current: Struct
+		isDirty: boolean
+		componentToFragId: Record<string, string>
 		setLocalPartConfig: (config: Struct) => void
-		isDirty: () => boolean
-		getComponentToFragId: () => Record<string, string>
 	}
 
 	interface Props {
@@ -65,7 +65,6 @@
 
 	provideWorld()
 
-	const appClient = useViamClient()
 	const settings = provideSettings()
 	const environment = provideEnvironment()
 	const currentRobotCameraWidgets = $derived(settings.current.openCameraWidgets[partID] || [])
@@ -82,25 +81,10 @@
 
 	let root = $state.raw<HTMLElement>()
 
-	providePartConfig(() => {
-		if (localConfigProps) {
-			return {
-				appEmbeddedPartConfigProps: {
-					isDirty: () => localConfigProps.isDirty(),
-					getLocalPartConfig: () => localConfigProps.getLocalPartConfig(),
-					setLocalPartConfig: (config: Struct) => localConfigProps.setLocalPartConfig(config),
-					getComponentToFragId: () => localConfigProps.getComponentToFragId(),
-				},
-			}
-		} else {
-			return {
-				standalonePartConfigProps: {
-					viamClient: () => appClient?.current,
-					partID: () => partID,
-				},
-			}
-		}
-	})
+	providePartConfig(
+		() => partID,
+		() => localConfigProps
+	)
 
 	$effect.pre(() => {
 		if (localConfigProps) {
@@ -137,7 +121,6 @@
 					<FileDrop />
 					<Dashboard {dashboard} />
 					<Details />
-					<Settings />
 
 					{#if environment.current.isStandalone}
 						<LiveUpdatesBanner />
@@ -158,6 +141,9 @@
 					{/if}
 
 					<PortalTarget id="dom" />
+
+					<Settings />
+					<Logs />
 				</div>
 			{/snippet}
 		</SceneProviders>

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

@@ -3,10 +3,10 @@ import type { Struct } from '@viamrobotics/sdk';
 import type { CameraPose } from '../hooks/useControls.svelte';
 import { type DrawConnectionConfig } from '../hooks/useDrawConnectionConfig.svelte';
 interface LocalConfigProps {
-    getLocalPartConfig: () => Struct;
+    current: Struct;
+    isDirty: boolean;
+    componentToFragId: Record<string, string>;
     setLocalPartConfig: (config: Struct) => void;
-    isDirty: () => boolean;
-    getComponentToFragId: () => Record<string, string>;
 }
 interface Props {
     partID?: string;

package/dist/components/Geometry.svelte

@@ -135,17 +135,17 @@
 			/>
 		{/if}
 
-		<T
-			is={mesh}
-			name={entity}
-			userData.name={name}
-			renderOrder={renderOrder.current}
-		>
-			{#if model && renderMode.includes('model')}
-				<T is={model} />
-			{/if}
-
-			{#if !model || renderMode.includes('colliders')}
+		{#if model && renderMode.includes('model')}
+			<T is={model} />
+		{/if}
+
+		{#if !model || renderMode.includes('colliders')}
+			<T
+				is={mesh}
+				name={entity}
+				userData.name={name}
+				renderOrder={renderOrder.current}
+			>
 				{#if linePositions.current}
 					<LineGeometry positions={linePositions.current} />
 				{:else if box.current}
@@ -168,40 +168,40 @@
 						{oncreate}
 					/>
 				{/if}
-			{/if}
-
-			{#if linePositions.current}
-				<T
-					is={LineMaterial}
-					{color}
-					width={lineWidth.current ? lineWidth.current * 0.001 : 0.5}
-					depthTest={materialProps.current?.depthTest}
-				/>
-			{:else}
-				{@const currentOpacity = opacity.current ?? 0.7}
-				<T.MeshToonMaterial
-					{color}
-					side={geometryType === 'buffer' ? DoubleSide : FrontSide}
-					transparent={currentOpacity < 1}
-					depthWrite={currentOpacity === 1}
-					opacity={currentOpacity}
-					depthTest={materialProps.current?.depthTest}
-				/>
-
-				{#if geo && (renderMode.includes('colliders') || !model)}
-					<T.LineSegments
-						raycast={() => null}
-						bvh={{ enabled: false }}
-					>
-						<T.EdgesGeometry args={[geo, 0]} />
-						<T.LineBasicMaterial color={darkenColor(color, 10)} />
-					</T.LineSegments>
+
+				{#if linePositions.current}
+					<T
+						is={LineMaterial}
+						{color}
+						width={lineWidth.current ? lineWidth.current * 0.001 : 0.5}
+						depthTest={materialProps.current?.depthTest ?? true}
+					/>
+				{:else}
+					{@const currentOpacity = opacity.current ?? 0.7}
+					<T.MeshToonMaterial
+						{color}
+						side={geometryType === 'buffer' ? DoubleSide : FrontSide}
+						transparent={currentOpacity < 1}
+						depthWrite={currentOpacity === 1}
+						opacity={currentOpacity}
+						depthTest={materialProps.current?.depthTest ?? true}
+					/>
+
+					{#if geo && (renderMode.includes('colliders') || !model)}
+						<T.LineSegments
+							raycast={() => null}
+							bvh={{ enabled: false }}
+						>
+							<T.EdgesGeometry args={[geo, 0]} />
+							<T.LineBasicMaterial color={darkenColor(color, 10)} />
+						</T.LineSegments>
+					{/if}
 				{/if}
-			{/if}
-		</T>
+			</T>
+		{/if}
 	{:else if showAxesHelper.current}
 		<AxesHelper
-			name={name.current}
+			name={entity}
 			width={3}
 			length={0.1}
 		/>

package/dist/components/Scene.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ShaderMaterial, Vector3 } from 'three'
 	import { T } from '@threlte/core'
-	import { Grid, interactivity, PerfMonitor, PortalTarget } from '@threlte/extras'
+	import { Environment, Grid, interactivity, PerfMonitor, PortalTarget } from '@threlte/extras'
 	import Entities from './Entities.svelte'
 	import Selected from './Selected.svelte'
 	import Focus from './Focus.svelte'
@@ -18,6 +18,7 @@
 	import PointerMissBox from './PointerMissBox.svelte'
 	import BatchedArrows from './BatchedArrows.svelte'
 	import Arrows from './Arrows/ArrowGroups.svelte'
+	import hdrImage from '../assets/ferndale_studio_11_1k.hdr'
 
 	interface Props {
 		children?: Snippet
@@ -54,6 +55,8 @@
 	<PerfMonitor anchorX="right" />
 {/if}
 
+<Environment url={hdrImage} />
+
 <T.Group
 	position={origin.position}
 	rotation.x={$isPresenting ? -Math.PI / 2 : 0}

package/dist/components/SceneProviders.svelte

@@ -23,6 +23,7 @@
 	import { provide3DModels } from '../hooks/use3DModels.svelte'
 	import { providePointcloudObjects } from '../hooks/usePointcloudObjects.svelte'
 	import { provideLinkedEntities } from '../hooks/useLinked.svelte'
+	import { provideConfigFrames } from '../hooks/useConfigFrames.svelte'
 
 	interface Props {
 		cameraPose?: CameraPose
@@ -43,6 +44,7 @@
 	provideDrawAPI()
 
 	provideResourceByName(() => partID.current)
+	provideConfigFrames()
 	provideFrames(() => partID.current)
 	provideGeometries(() => partID.current)
 	provide3DModels(() => partID.current)

package/dist/components/Selected.svelte

@@ -15,19 +15,17 @@
 	const selectedObject3d = useSelectedObject3d()
 
 	const object = $derived.by(() => {
-		if (!isInstanceOf(selectedObject3d.current, 'Mesh')) {
-			return selectedObject3d.current
+		if (!selectedObject3d.current) {
+			return
 		}
 
 		// Create a clone in the case of meshes, which could be frames with geometries,
 		// so that our bounding box doesn't include children
-		const result = selectedObject3d.current?.clone(false)
-
-		if (result) {
-			selectedObject3d.current?.getWorldPosition(result.position)
-			selectedObject3d.current?.getWorldQuaternion(result.quaternion)
-			return result
+		if (isInstanceOf(selectedObject3d.current, 'Mesh')) {
+			return selectedObject3d.current?.clone(false)
 		}
+
+		return selectedObject3d.current
 	})
 
 	const { start, stop } = useTask(
@@ -44,7 +42,9 @@
 				mesh.getBoundingBoxAt(selectedEntity.instance, box3)
 				obb.fromBox3(box3)
 				obbHelper.setFromOBB(obb)
-			} else {
+			} else if (isInstanceOf(selectedObject3d.current, 'Mesh')) {
+				selectedObject3d.current?.getWorldPosition(object.position)
+				selectedObject3d.current?.getWorldQuaternion(object.quaternion)
 				obbHelper.setFromObject(object)
 			}
 

package/dist/components/StaticGeometries.svelte

@@ -39,7 +39,7 @@
 		const entity = world.spawn(
 			traits.Name(`custom geometry ${++index}`),
 			traits.Pose,
-			traits.Box({ x: 0.1, y: 0.1, z: 0.1 }),
+			traits.Box({ x: 100, y: 100, z: 100 }),
 			traits.Removable
 		)
 
@@ -87,7 +87,10 @@
 								ref.quaternion.copy(quaternion)
 								entity.set(traits.Pose, pose)
 							} else if (box && mode === 'scale') {
-								entity.set(traits.Box, ref.scale)
+								box.x *= ref.scale.x
+								box.y *= ref.scale.y
+								box.z *= ref.scale.z
+								entity.set(traits.Box, box)
 								ref.scale.setScalar(1)
 							}
 						}}

package/dist/components/overlay/Details.svelte

@@ -21,7 +21,7 @@
 		useFocusedObject3d,
 		useSelectedObject3d,
 	} from '../../hooks/useSelection.svelte'
-	import { useFrames } from '../../hooks/useFrames.svelte'
+	import { useConfigFrames } from '../../hooks/useConfigFrames.svelte'
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
 	import { FrameConfigUpdater } from '../../FrameConfigUpdater.svelte'
 	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
@@ -37,7 +37,7 @@
 	const world = useWorld()
 	const controls = useCameraControls()
 	const resourceByName = useResourceByName()
-	const frames = useFrames()
+	const configFrames = useConfigFrames()
 	const partConfig = usePartConfig()
 	const selectedEntity = useSelectedEntity()
 	const selectedObject3d = useSelectedObject3d()
@@ -402,7 +402,7 @@
 					{@render ParentFrame({
 						ariaLabel: 'parent frame name',
 						value: parent.current ?? 'world',
-						options: frames.getParentFrameOptions(name.current ?? ''),
+						options: configFrames.getParentFrameOptions(name.current ?? ''),
 						onChange: (value) => {
 							detailConfigUpdater.setFrameParent(entity, value)
 						},

package/dist/components/overlay/FloatingPanel.svelte

@@ -10,6 +10,7 @@
 		defaultSize?: { width: number; height: number }
 		defaultPosition?: { x: number; y: number }
 		exitable?: boolean
+		persistRect?: boolean
 		strategy?: 'absolute' | 'fixed'
 		isOpen?: boolean
 		children: Snippet
@@ -19,6 +20,7 @@
 		title = '',
 		defaultSize = { width: 700, height: 500 },
 		exitable = true,
+		persistRect = true,
 		isOpen = $bindable(false),
 		children,
 		...props
@@ -30,6 +32,7 @@
 		defaultSize,
 		resizable: false,
 		allowOverflow: false,
+		persistRect,
 		open: isOpen,
 		...props,
 	}))

package/dist/components/overlay/FloatingPanel.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
         y: number;
     };
     exitable?: boolean;
+    persistRect?: boolean;
     strategy?: 'absolute' | 'fixed';
     isOpen?: boolean;
     children: Snippet;

package/dist/components/overlay/LiveUpdatesBanner.svelte

@@ -17,7 +17,7 @@
 			if (event.key.toLowerCase() === 's') {
 				event.preventDefault()
 				event.stopImmediatePropagation()
-				partConfig.saveLocalPartConfig()
+				partConfig.save()
 			}
 		}
 	}}
@@ -43,7 +43,7 @@
 				<Button
 					class="cursor-pointer text-blue-600"
 					onclick={() => {
-						partConfig.resetLocalPartConfig()
+						partConfig.discardChanges()
 					}}
 				>
 					Discard
@@ -54,7 +54,7 @@
 					aria-label="Save"
 					class="cursor-pointer text-blue-600"
 					onclick={() => {
-						partConfig.saveLocalPartConfig()
+						partConfig.save()
 					}}
 				>
 					<div class="flex gap-2">

package/dist/components/overlay/Logs.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { Portal } from '@threlte/extras'
+	import { useLogs } from '../../hooks/useLogs.svelte'
+	import FloatingPanel from './FloatingPanel.svelte'
+	import DashboardButton from './dashboard/Button.svelte'
+	import { PersistedState } from 'runed'
+
+	const logs = useLogs()
+
+	const isOpen = new PersistedState('logs-is-open', false)
+</script>
+
+<Portal id="dashboard">
+	<fieldset class="relative">
+		<DashboardButton
+			active
+			icon="article"
+			description="Logs"
+			onclick={() => {
+				isOpen.current = !isOpen.current
+			}}
+		/>
+		{#if logs.warnings.length > 0}
+			<span
+				class="absolute z-4 -mt-1.5 -ml-1.5 h-4 w-4 rounded-full bg-yellow-700 text-center text-[10px] text-white"
+			>
+				{logs.warnings.length}
+			</span>
+		{/if}
+
+		{#if logs.errors.length > 0}
+			<span
+				class="absolute z-4 -mt-1.5 -ml-1.5 h-4 rounded-full bg-red-700 px-1.25 text-center text-[10px] text-white"
+			>
+				{logs.errors.length}
+			</span>
+		{/if}
+	</fieldset>
+</Portal>
+
+<FloatingPanel
+	title="Logs"
+	bind:isOpen={isOpen.current}
+	defaultSize={{ width: 240, height: 315 }}
+>
+	<div class="flex h-70 flex-col gap-2 overflow-auto p-3 text-xs">
+		{#each logs.current as log (log.uuid)}
+			<div>
+				<div class="flex flex-wrap items-center gap-1.5">
+					<div
+						class={[
+							'h-2 w-2 rounded-full',
+							{
+								'bg-danger-dark': log.level === 'error',
+								'bg-amber-300': log.level === 'warn',
+								'bg-blue-400': log.level === 'info',
+							},
+						]}
+					></div>
+					<div class="text-subtle-2">{log.timestamp}</div>
+				</div>
+				<div>
+					{#if log.count > 1}
+						<span class="mr-1 rounded bg-green-700 px-1 py-0.5 text-xs text-white">
+							{log.count}
+						</span>
+					{/if}
+					{log.message}
+				</div>
+			</div>
+		{:else}
+			No logs
+		{/each}
+	</div>
+</FloatingPanel>

package/dist/components/overlay/__tests__/__fixtures__/resource.d.ts

@@ -7,8 +7,17 @@ export declare const resource: {
             y: number;
             z: number;
         };
+        orientation: {
+            type: "ov_degrees";
+            value: {
+                x: number;
+                y: number;
+                z: number;
+                th: number;
+            };
+        };
         geometry: {
-            type: string;
+            type: "box";
             x: number;
             y: number;
             z: number;

package/dist/components/overlay/__tests__/__fixtures__/resource.js

@@ -3,6 +3,7 @@ export const resource = {
     frame: {
         parent: 'parent_frame',
         translation: { x: 10, y: 20, z: 30 },
+        orientation: { type: 'ov_degrees', value: { x: 0, y: 0, z: 1, th: 0 } },
         geometry: {
             type: 'box',
             x: 10,

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

@@ -9,7 +9,7 @@
 </script>
 
 <div
-	class="absolute top-2 z-4 flex w-full justify-center gap-2"
+	class="absolute top-2 z-4 flex w-full items-center justify-center gap-2"
 	{...rest}
 >
 	<!-- camera view -->

package/dist/components/overlay/left-pane/TreeContainer.svelte

@@ -3,7 +3,6 @@
 	import Tree from './Tree.svelte'
 	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
 	import { provideTreeExpandedContext } from './useExpanded.svelte'
-	import Logs from './Logs.svelte'
 	import AddFrames from './AddFrames.svelte'
 	import { useEnvironment } from '../../../hooks/useEnvironment.svelte'
 	import { usePartID } from '../../../hooks/usePartID.svelte'
@@ -82,6 +81,4 @@
 	{#if environment.current.isStandalone && partID.current && partConfig.hasEditPermissions}
 		<AddFrames />
 	{/if}
-
-	<Logs />
 </div>

package/dist/hooks/use3DModels.svelte.js

@@ -4,6 +4,7 @@ import { getContext, setContext } from 'svelte';
 import { useSettings } from './useSettings.svelte';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+import { isInstanceOf } from '@threlte/core';
 const gltfLoader = new GLTFLoader();
 const dracoLoader = new DRACOLoader();
 dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
@@ -38,6 +39,15 @@ export const provide3DModels = (partID) => {
                         const arrayBuffer = model.mesh.buffer.slice(model.mesh.byteOffset, model.mesh.byteOffset + model.mesh.byteLength);
                         const gltfModel = await gltfLoader.parseAsync(arrayBuffer, '');
                         next[prefix][id] = gltfModel.scene;
+                        gltfModel.scene.traverse((object) => {
+                            if (isInstanceOf(object, 'Mesh')) {
+                                const { material } = object;
+                                if (isInstanceOf(material, 'MeshStandardMaterial')) {
+                                    material.roughness = 0.3;
+                                    material.metalness = 0.1;
+                                }
+                            }
+                        });
                     }
                     current = next;
                 }

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

@@ -0,0 +1,9 @@
+import { Transform } from '@viamrobotics/sdk';
+interface ConfigFramesContext {
+    unsetFrames: string[];
+    current: Record<string, Transform>;
+    getParentFrameOptions: (componentName: string) => string[];
+}
+export declare const provideConfigFrames: () => void;
+export declare const useConfigFrames: () => ConfigFramesContext;
+export {};

package/dist/hooks/useConfigFrames.svelte.js

@@ -0,0 +1,92 @@
+import { useEnvironment } from './useEnvironment.svelte';
+import { usePartConfig } from './usePartConfig.svelte';
+import { createTransformFromFrame } from '../frame';
+import { Transform } from '@viamrobotics/sdk';
+import { getContext, setContext } from 'svelte';
+const key = Symbol('config-frames-context');
+export const provideConfigFrames = () => {
+    const environment = useEnvironment();
+    const partConfig = usePartConfig();
+    $effect(() => {
+        if (partConfig.isDirty) {
+            environment.current.viewerMode = 'edit';
+        }
+        else {
+            environment.current.viewerMode = 'monitor';
+        }
+    });
+    const [configFrames, configUnsetFrameNames] = $derived.by(() => {
+        const { components } = partConfig.current;
+        const results = {};
+        const unsetResults = [];
+        for (const { name, frame } of components ?? []) {
+            if (!frame) {
+                unsetResults.push(name);
+                continue;
+            }
+            results[name] = createTransformFromFrame(name, frame);
+        }
+        return [results, unsetResults];
+    });
+    const [fragmentFrames, fragmentUnsetFrameNames] = $derived.by(() => {
+        const { fragment_mods: fragmentMods = [] } = partConfig.current;
+        const fragmentDefinedComponents = Object.keys(partConfig.componentNameToFragmentId);
+        const results = {};
+        const unsetResults = [];
+        // deal with fragment defined components
+        for (const fragmentComponentName of fragmentDefinedComponents || []) {
+            const fragmentId = partConfig.componentNameToFragmentId[fragmentComponentName];
+            const fragmentMod = fragmentMods?.find((mod) => mod.fragment_id === fragmentId);
+            if (!fragmentMod) {
+                continue;
+            }
+            const setComponentModIndex = fragmentMod.mods.findLastIndex((mod) => mod['$set']?.[`components.${fragmentComponentName}.frame`] !== undefined);
+            const unsetComponentModIndex = fragmentMod.mods.findLastIndex((mod) => mod['$unset']?.[`components.${fragmentComponentName}.frame`] !== undefined);
+            if (setComponentModIndex < unsetComponentModIndex) {
+                unsetResults.push(fragmentComponentName);
+            }
+            else if (unsetComponentModIndex < setComponentModIndex) {
+                const frameData = fragmentMod.mods[setComponentModIndex]['$set'][`components.${fragmentComponentName}.frame`];
+                results[fragmentComponentName] = createTransformFromFrame(fragmentComponentName, frameData);
+            }
+        }
+        return [results, unsetResults];
+    });
+    const frames = $derived.by(() => {
+        const result = {
+            ...configFrames,
+            ...fragmentFrames,
+        };
+        return result;
+    });
+    const frameValues = $derived(Object.values(frames));
+    const getParentFrameOptions = (componentName) => {
+        const validFrames = new Set(frameValues.map((frame) => frame.referenceFrame));
+        validFrames.add('world');
+        const frameNameQueue = [componentName];
+        while (frameNameQueue.length > 0) {
+            const frameName = frameNameQueue.shift();
+            if (frameName) {
+                validFrames.delete(frameName);
+                const filteredFrames = frameValues.filter((frame) => frame.poseInObserverFrame?.referenceFrame === frameName);
+                for (const frame of filteredFrames) {
+                    frameNameQueue.push(frame.referenceFrame);
+                }
+            }
+        }
+        return Array.from(validFrames);
+    };
+    const unsetFrames = $derived([...new Set([...configUnsetFrameNames, ...fragmentUnsetFrameNames])]);
+    setContext(key, {
+        getParentFrameOptions,
+        get unsetFrames() {
+            return unsetFrames;
+        },
+        get current() {
+            return frames;
+        },
+    });
+};
+export const useConfigFrames = () => {
+    return getContext(key);
+};

package/dist/hooks/useFramelessComponents.svelte.js

@@ -6,13 +6,13 @@ export const provideFramelessComponents = () => {
     const partConfig = usePartConfig();
     const frames = useFrames();
     const current = $derived.by(() => {
-        const components = partConfig.localPartConfig.toJson()?.components;
+        const { components } = partConfig.current;
         const partComponentsWIthNoFrame = components
             ?.filter((component) => component.frame === undefined)
             .map((component) => component.name) ?? [];
         const fragmentComponentsWithNoFrame = [];
         for (const fragmentComponentName of Object.keys(partConfig.componentNameToFragmentId)) {
-            if (frames.current.find((frame) => frame.transform.referenceFrame === fragmentComponentName)) {
+            if (frames.current.find((frame) => frame.referenceFrame === fragmentComponentName)) {
                 continue;
             }
             fragmentComponentsWithNoFrame.push(fragmentComponentName);