@viamrobotics/motion-tools 1.27.0 → 1.28.0

package/dist/components/App.svelte

@@ -8,15 +8,16 @@
 	import { PortalTarget } from '@threlte/extras'
 	import { useXR } from '@threlte/xr'
 	import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
+	import { ThemeUtils } from 'svelte-tweakpane-ui'
 
-	import type { CameraPose } from '../hooks/useControls.svelte'
-
+	import Controls from './overlay/controls/Controls.svelte'
 	import Dashboard from './overlay/dashboard/Dashboard.svelte'
 	import Details from './overlay/Details.svelte'
 	import TreeContainer from './overlay/left-pane/TreeContainer.svelte'
 	import Settings from './overlay/settings/Settings.svelte'
 	import XR from './xr/XR.svelte'
 	import { provideWorld } from '../ecs'
+	import { type CameraPose, provideCameraControls } from '../hooks/useControls.svelte'
 	import {
 		type DrawConnectionConfig,
 		provideDrawConnectionConfig,
@@ -35,6 +36,7 @@
 	import Logs from './overlay/Logs.svelte'
 	import ArmPositions from './overlay/widgets/ArmPositions.svelte'
 	import Camera from './overlay/widgets/Camera.svelte'
+	import FramePov from './overlay/widgets/FramePov.svelte'
 	import Scene from './Scene.svelte'
 	import SceneProviders from './SceneProviders.svelte'
 
@@ -88,12 +90,10 @@
 	const settings = provideSettings()
 	const environment = provideEnvironment()
 	const currentRobotCameraWidgets = $derived(settings.current.openCameraWidgets[partID] || [])
+	const currentFramePovWidgets = $derived(settings.current.openFramePovWidgets[partID] || [])
 	const { isPresenting } = useXR()
 
-	$effect(() => {
-		environment.current.inputBindingsEnabled = inputBindingsEnabled
-	})
-
+	provideCameraControls(() => cameraPose)
 	createPartIDContext(() => partID)
 	provideDrawConnectionConfig(() => drawConnectionConfig)
 	provideWeblabs()
@@ -106,9 +106,18 @@
 		() => localConfigProps
 	)
 
-	$effect.pre(() => {
+	$effect(() => {
+		environment.current.inputBindingsEnabled = inputBindingsEnabled
 		environment.current.isStandalone = !localConfigProps
 	})
+
+	$effect(() => {
+		ThemeUtils.setGlobalDefaultTheme({
+			...ThemeUtils.presets.light,
+			baseBackgroundColor: '#fbfbfc',
+			baseShadowColor: 'transparent',
+		})
+	})
 </script>
 
 {#if settings.current.enableQueryDevtools}
@@ -123,7 +132,7 @@
 		renderMode="on-demand"
 		dpr={[1, 2]}
 	>
-		<SceneProviders {cameraPose}>
+		<SceneProviders>
 			{#snippet children({ focus })}
 				<Scene>
 					{@render appChildren?.()}
@@ -139,6 +148,7 @@
 				<div {@attach domPortal(root)}>
 					<FileDrop />
 					<Dashboard {dashboard} />
+					<Controls />
 					<Details {details} />
 
 					{#if environment.current.isStandalone}
@@ -157,6 +167,10 @@
 						{#each currentRobotCameraWidgets as cameraName (cameraName)}
 							<Camera name={cameraName} />
 						{/each}
+
+						{#each currentFramePovWidgets as povFrameName (povFrameName)}
+							<FramePov frameName={povFrameName} />
+						{/each}
 					{/if}
 
 					<PortalTarget id="dom" />

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

@@ -1,7 +1,7 @@
 import type { Struct } from '@viamrobotics/sdk';
 import type { Entity } from 'koota';
 import type { Snippet } from 'svelte';
-import type { CameraPose } from '../hooks/useControls.svelte';
+import { type CameraPose } from '../hooks/useControls.svelte';
 import { type DrawConnectionConfig } from '../hooks/useDrawConnectionConfig.svelte';
 interface LocalConfigProps {
     current: Struct;

package/dist/components/Camera.svelte

@@ -12,7 +12,7 @@
 {#if mode === 'perspective'}
 	<T.PerspectiveCamera
 		makeDefault
-		near={0.01}
+		near={0.001}
 		up={[0, 0, 1]}
 		oncreate={(ref) => {
 			ref.lookAt(0, 0, 0)

package/dist/components/CameraControls.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { CameraControls, type CameraControlsRef, Gizmo, Portal } from '@threlte/extras'
+	import { CameraControls, type CameraControlsRef, Gizmo } from '@threlte/extras'
 	import { MathUtils } from 'three'
 
-	import Button from './overlay/dashboard/Button.svelte'
 	import { useCameraControls, useTransformControls } from '../hooks/useControls.svelte'
 	import { useEnvironment } from '../hooks/useEnvironment.svelte'
 
@@ -15,19 +14,6 @@
 	const inputBindingsEnabled = $derived(environment.current.inputBindingsEnabled)
 </script>
 
-<Portal id="dashboard">
-	<fieldset>
-		<Button
-			active
-			icon="camera-outline"
-			description="Reset camera"
-			onclick={() => {
-				cameraControls.setInitialPose()
-			}}
-		/>
-	</fieldset>
-</Portal>
-
 <CameraControls
 	enabled={!transformControls.active}
 	oncreate={(ref) => {

package/dist/components/Focus.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
-	import { Gizmo, Portal, TrackballControls } from '@threlte/extras'
+	import { Gizmo, TrackballControls } from '@threlte/extras'
 	import { Box3, type Object3D, Vector3 } from 'three'
-	import { TrackballControls as ThreeTrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
 
-	import Button from './overlay/dashboard/Button.svelte'
+	import { useCameraControls } from '../hooks/useControls.svelte'
 
 	import Camera from './Camera.svelte'
 
@@ -14,14 +13,14 @@
 
 	let { object3d }: Props = $props()
 
+	const cameraControls = useCameraControls()
+
 	const box = new Box3()
 	const vec = new Vector3()
 
 	let center = $state.raw<[number, number, number]>([0, 0, 0])
 	let size = $state.raw<[number, number, number]>([0, 0, 0])
 
-	let controls = $state.raw<ThreeTrackballControls>()
-
 	$effect.pre(() => {
 		box.setFromObject(object3d)
 		size = box.getSize(vec).toArray()
@@ -29,23 +28,10 @@
 	})
 </script>
 
-<Portal id="dashboard">
-	<fieldset>
-		<Button
-			active
-			icon="camera-outline"
-			description="Reset camera"
-			onclick={() => {
-				controls?.reset()
-			}}
-		/>
-	</fieldset>
-</Portal>
-
 <Camera position={[size[0] + 1, size[0] + 1, size[0] + 1]}>
 	<TrackballControls
-		bind:ref={controls}
 		target={center}
+		oncreate={(ref) => cameraControls.set(ref)}
 	>
 		<Gizmo placement="bottom-right" />
 	</TrackballControls>

package/dist/components/MeasureTool/MeasureTool.svelte

@@ -84,6 +84,7 @@
 		<div class="flex">
 			<Button
 				active={enabled}
+				class="rounded-r-none"
 				icon="ruler"
 				description="{enabled ? 'Disable' : 'Enable'} measurement"
 				onclick={() => {
@@ -95,7 +96,7 @@
 					<Button
 						{...triggerProps}
 						active={enabled}
-						class="border-l-0"
+						class="rounded-l-none border-l-0"
 						icon="filter-sliders"
 						description="Measurement settings"
 					/>

package/dist/components/Scene.svelte

@@ -12,9 +12,9 @@
 	import Selected from './Selected.svelte'
 	import SelectedTransformControls from './SelectedTransformControls.svelte'
 	import StaticGeometries from './StaticGeometries.svelte'
+	import { bvh } from '../hooks/plugins/bvh.svelte'
 	import { useFocusedObject3d } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
-	import { bvh } from '../plugins/bvh.svelte'
 
 	import hdrImage from '../assets/ferndale_studio_11_1k.hdr'
 	import BatchedArrows from './BatchedArrows.svelte'

package/dist/components/SceneProviders.svelte

@@ -6,11 +6,7 @@
 	import { provideArmClient } from '../hooks/useArmClient.svelte'
 	import { provideArmKinematics } from '../hooks/useArmKinematics.svelte'
 	import { provideConfigFrames } from '../hooks/useConfigFrames.svelte'
-	import {
-		type CameraPose,
-		provideCameraControls,
-		provideTransformControls,
-	} from '../hooks/useControls.svelte'
+	import { provideTransformControls } from '../hooks/useControls.svelte'
 	import { provideDrawAPI } from '../hooks/useDrawAPI.svelte'
 	import { provideDrawService } from '../hooks/useDrawService.svelte'
 	import { provideFrameEditSession } from '../hooks/useFrameEditSession.svelte'
@@ -30,15 +26,13 @@
 	import { provideOrigin } from './xr/useOrigin.svelte'
 
 	interface Props {
-		cameraPose?: CameraPose
 		children: Snippet<[{ focus: boolean }]>
 	}
 
-	let { cameraPose, children }: Props = $props()
+	let { children }: Props = $props()
 
 	const partID = usePartID()
 
-	provideCameraControls(() => cameraPose)
 	provideTransformControls()
 	provideLogs()
 

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

@@ -1,7 +1,5 @@
 import type { Snippet } from 'svelte';
-import { type CameraPose } from '../hooks/useControls.svelte';
 interface Props {
-    cameraPose?: CameraPose;
     children: Snippet<[{
         focus: boolean;
     }]>;

package/dist/components/Selection/Ellipse.svelte

@@ -263,16 +263,18 @@
 
 		const currentControls = controls.current
 
-		const { minPolarAngle, maxPolarAngle } = currentControls
+		if ('minPolarAngle' in currentControls) {
+			const { minPolarAngle, maxPolarAngle } = currentControls
 
-		// Locks the camera to top down while this component is mounted
-		currentControls.polarAngle = 0
-		currentControls.minPolarAngle = 0
-		currentControls.maxPolarAngle = 0
+			// Locks the camera to top down while this component is mounted
+			currentControls.polarAngle = 0
+			currentControls.minPolarAngle = 0
+			currentControls.maxPolarAngle = 0
 
-		return () => {
-			currentControls.minPolarAngle = minPolarAngle
-			currentControls.maxPolarAngle = maxPolarAngle
+			return () => {
+				currentControls.minPolarAngle = minPolarAngle
+				currentControls.maxPolarAngle = maxPolarAngle
+			}
 		}
 	})
 

package/dist/components/Selection/Lasso.svelte

@@ -244,16 +244,18 @@
 
 		const currentControls = controls.current
 
-		const { minPolarAngle, maxPolarAngle } = currentControls
+		if ('minPolarAngle' in currentControls) {
+			const { minPolarAngle, maxPolarAngle } = currentControls
 
-		// Locks the camera to top down while this component is mounted
-		currentControls.polarAngle = 0
-		currentControls.minPolarAngle = 0
-		currentControls.maxPolarAngle = 0
+			// Locks the camera to top down while this component is mounted
+			currentControls.polarAngle = 0
+			currentControls.minPolarAngle = 0
+			currentControls.maxPolarAngle = 0
 
-		return () => {
-			currentControls.minPolarAngle = minPolarAngle
-			currentControls.maxPolarAngle = maxPolarAngle
+			return () => {
+				currentControls.minPolarAngle = minPolarAngle
+				currentControls.maxPolarAngle = maxPolarAngle
+			}
 		}
 	})
 

package/dist/components/overlay/Details.svelte

@@ -2,7 +2,6 @@
 	module
 	lang="ts"
 >
-	import { ThemeUtils } from 'svelte-tweakpane-ui'
 	import { BufferAttribute, Euler, MathUtils, Quaternion } from 'three'
 
 	import { OrientationVector } from '../../three/OrientationVector'
@@ -46,6 +45,7 @@
 	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
 	import { useLinkedEntities } from '../../hooks/useLinked.svelte'
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
+	import { usePartID } from '../../hooks/usePartID.svelte'
 	import { useResourceByName } from '../../hooks/useResourceByName.svelte'
 	import {
 		useFocusedEntity,
@@ -53,6 +53,7 @@
 		useSelectedEntity,
 		useSelectedObject3d,
 	} from '../../hooks/useSelection.svelte'
+	import { useSettings } from '../../hooks/useSettings.svelte'
 	import { createPose, matrixToPose } from '../../transform'
 
 	interface Props {
@@ -68,6 +69,8 @@
 	const resourceByName = useResourceByName()
 	const configFrames = useConfigFrames()
 	const partConfig = usePartConfig()
+	const partID = usePartID()
+	const settings = useSettings()
 	const selectedEntity = useSelectedEntity()
 	const selectedObject3d = useSelectedObject3d()
 	const environment = useEnvironment()
@@ -280,12 +283,6 @@
 			2
 		)
 	}
-
-	ThemeUtils.setGlobalDefaultTheme({
-		...ThemeUtils.presets.light,
-		baseBackgroundColor: '#fbfbfc',
-		baseShadowColor: 'transparent',
-	})
 </script>
 
 {#snippet ImmutableField({
@@ -338,11 +335,13 @@
 						onclick={() => {
 							const padding = 0.4
 
-							if (!controls.current) return
+							const currentControls = controls.current
+
+							if (!currentControls || !('fitToBox' in currentControls)) return
 
-							const { azimuthAngle, polarAngle } = controls.current
+							const { azimuthAngle, polarAngle } = currentControls
 
-							controls.current.fitToBox(object3d, true, {
+							currentControls.fitToBox(object3d, true, {
 								paddingTop: padding,
 								paddingBottom: padding,
 								paddingLeft: padding,
@@ -350,8 +349,8 @@
 							})
 
 							// Preserve previous rotation
-							controls.current?.rotateAzimuthTo(azimuthAngle, true)
-							controls.current?.rotatePolarTo(polarAngle, true)
+							currentControls.rotateAzimuthTo(azimuthAngle, true)
+							currentControls.rotatePolarTo(polarAngle, true)
 						}}
 					>
 						<Icon name="image-filter-center-focus" />
@@ -360,6 +359,32 @@
 				</Tooltip>
 			{/if}
 
+			{#if name.current}
+				<Tooltip
+					let:tooltipID
+					location="bottom"
+				>
+					<button
+						class="text-subtle-2"
+						aria-describedby={tooltipID}
+						aria-label="Open view from this frame"
+						onclick={() => {
+							const frameName = name.current
+							if (!frameName) return
+							const list = settings.current.openFramePovWidgets[partID.current] ?? []
+							if (list.includes(frameName)) return
+							settings.current.openFramePovWidgets = {
+								...settings.current.openFramePovWidgets,
+								[partID.current]: [...list, frameName],
+							}
+						}}
+					>
+						<Icon name="camera-outline" />
+					</button>
+					<p slot="description">View from this frame</p>
+				</Tooltip>
+			{/if}
+
 			{#if removable.current}
 				<Tooltip
 					let:tooltipID

package/dist/components/overlay/FloatingPanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
+	import type { ClassValue } from 'svelte/elements'
 
 	import { useThrelte } from '@threlte/core'
 	import { Icon } from '@viamrobotics/prime-core'
@@ -14,6 +15,9 @@
 		resizable?: boolean
 		persistRect?: boolean
 		isOpen?: boolean
+		bodyClass?: ClassValue
+		onPositionChange?: (details: floatingPanel.PositionChangeDetails) => void
+		onSizeChange?: (details: floatingPanel.SizeChangeDetails) => void
 		children: Snippet
 	}
 
@@ -25,6 +29,7 @@
 		resizable = false,
 		persistRect = true,
 		isOpen = $bindable(false),
+		bodyClass = 'bg-white',
 		children,
 		...props
 	}: Props = $props()
@@ -56,7 +61,7 @@
 >
 	<div
 		{...api.getContentProps()}
-		class="border-medium border-1 bg-white dark:text-black"
+		class="border-medium border-1 dark:text-black"
 	>
 		<div
 			{...api.getDragTriggerProps()}
@@ -64,7 +69,7 @@
 		>
 			<div
 				{...api.getHeaderProps()}
-				class="border-medium flex items-center justify-between border-b p-2"
+				class="border-medium flex items-center justify-between border-b bg-white p-2"
 			>
 				<h3
 					{...api.getTitleProps()}
@@ -97,7 +102,7 @@
 		-->
 		<div
 			{...api.getBodyProps()}
-			class="relative h-[calc(100%-33px)]"
+			class={['relative h-[calc(100%-33px)]', bodyClass]}
 		>
 			{#if isOpen}
 				{@render children()}

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

@@ -1,4 +1,6 @@
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+import * as floatingPanel from '@zag-js/floating-panel';
 interface Props {
     title?: string;
     defaultSize?: {
@@ -13,6 +15,9 @@ interface Props {
     resizable?: boolean;
     persistRect?: boolean;
     isOpen?: boolean;
+    bodyClass?: ClassValue;
+    onPositionChange?: (details: floatingPanel.PositionChangeDetails) => void;
+    onSizeChange?: (details: floatingPanel.SizeChangeDetails) => void;
     children: Snippet;
 }
 declare const FloatingPanel: import("svelte").Component<Props, {}, "isOpen">;

package/dist/components/overlay/controls/Controls.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { PortalTarget } from '@threlte/extras'
+
+	import Button from '../dashboard/Button.svelte'
+	import { useCameraControls } from '../../../hooks/useControls.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+
+	const settings = useSettings()
+	const cameraControls = useCameraControls()
+
+	const isOrthographic = $derived(settings.current.cameraMode === 'orthographic')
+</script>
+
+<div class="absolute right-2 bottom-26 z-4 flex flex-col items-end gap-2">
+	<PortalTarget id="controls" />
+
+	<fieldset class="flex flex-col">
+		<Button
+			active
+			class="rounded-b-none"
+			icon="camera-outline"
+			description="Reset camera"
+			tooltipLocation="left"
+			onclick={() => {
+				cameraControls.setInitialPose()
+			}}
+		/>
+		<Button
+			active
+			class="-my-0.5 rounded-t-none"
+			icon={isOrthographic ? 'grid-orthographic' : 'grid-perspective'}
+			description={isOrthographic ? 'Switch to perspective view' : 'Switch to orthographic view'}
+			hotkey="C"
+			tooltipLocation="left"
+			onclick={() => {
+				settings.current.cameraMode = isOrthographic ? 'perspective' : 'orthographic'
+			}}
+		/>
+	</fieldset>
+</div>

package/dist/components/overlay/controls/Controls.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Controls: import("svelte").Component<Record<string, never>, {}, "">;
+type Controls = ReturnType<typeof Controls>;
+export default Controls;

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

@@ -10,7 +10,7 @@
 		description: string
 		hotkey?: string
 		class?: ClassValue | null | undefined
-		tooltipLocation?: 'bottom' | 'right'
+		tooltipLocation?: 'bottom' | 'right' | 'left' | 'top'
 		onclick?: MouseEventHandler<HTMLButtonElement> | null | undefined
 	}
 
@@ -33,13 +33,13 @@
 	<label
 		class={[
 			className,
-			'relative block border',
+			'relative block rounded-md border',
 			active ? 'border-gray-5 text-gray-8 z-4 bg-white' : 'bg-light border-medium text-disabled',
 		]}
 		aria-describedby={tooltipID}
 	>
 		<button
-			class="p-1.5"
+			class=" p-1.5"
 			role="radio"
 			aria-label={description}
 			aria-checked={active}

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

@@ -6,7 +6,7 @@ interface Props extends HTMLButtonAttributes {
     description: string;
     hotkey?: string;
     class?: ClassValue | null | undefined;
-    tooltipLocation?: 'bottom' | 'right';
+    tooltipLocation?: 'bottom' | 'right' | 'left' | 'top';
     onclick?: MouseEventHandler<HTMLButtonElement> | null | undefined;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;

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

@@ -14,33 +14,11 @@
 	class="absolute top-2 z-4 flex w-full items-center justify-center gap-2"
 	{...rest}
 >
-	<!-- camera view -->
-	<fieldset class="flex">
-		<Button
-			icon="grid-orthographic"
-			active={settings.current.cameraMode === 'orthographic'}
-			description="Orthographic view"
-			hotkey="C"
-			onclick={() => {
-				settings.current.cameraMode = 'orthographic'
-			}}
-		/>
-		<Button
-			icon="grid-perspective"
-			active={settings.current.cameraMode === 'perspective'}
-			description="Perspective view"
-			hotkey="C"
-			class="-ml-px"
-			onclick={() => {
-				settings.current.cameraMode = 'perspective'
-			}}
-		/>
-	</fieldset>
-
 	<!-- transform -->
 	<fieldset class="flex">
 		<Button
 			icon="mouse-pointer"
+			class="rounded-r-none"
 			active={settings.current.transformMode === 'none'}
 			description="No transform controls"
 			hotkey="0"
@@ -50,30 +28,30 @@
 		/>
 		<Button
 			icon="cursor-move"
+			class="-ml-px rounded-none"
 			active={settings.current.transformMode === 'translate'}
 			description="Translate"
 			hotkey="1"
-			class="-ml-px"
 			onclick={() => {
 				settings.current.transformMode = 'translate'
 			}}
 		/>
 		<Button
 			icon="sync"
+			class="-ml-px rounded-none"
 			active={settings.current.transformMode === 'rotate'}
 			description="Rotate"
 			hotkey="2"
-			class="-ml-px"
 			onclick={() => {
 				settings.current.transformMode = 'rotate'
 			}}
 		/>
 		<Button
 			icon="resize"
+			class="-ml-px rounded-l-none"
 			active={settings.current.transformMode === 'scale'}
 			description="Scale"
 			hotkey="3"
-			class="-ml-px"
 			onclick={() => {
 				settings.current.transformMode = 'scale'
 			}}
@@ -81,18 +59,17 @@
 	</fieldset>
 
 	<!-- snapping -->
-	{#if settings.current.transformMode !== 'none'}
-		<fieldset class="flex">
-			<Button
-				icon={settings.current.snapping ? 'magnet' : 'magnet-off'}
-				active={settings.current.snapping}
-				description="Snapping"
-				onclick={() => {
-					settings.current.snapping = !settings.current.snapping
-				}}
-			/>
-		</fieldset>
-	{/if}
+
+	<fieldset class="flex">
+		<Button
+			icon={settings.current.snapping ? 'magnet' : 'magnet-off'}
+			active={settings.current.snapping}
+			description="Snapping"
+			onclick={() => {
+				settings.current.snapping = !settings.current.snapping
+			}}
+		/>
+	</fieldset>
 
 	<PortalTarget id="dashboard" />