@viamrobotics/motion-tools 0.3.8 → 0.5.0

package/README.md

@@ -11,19 +11,19 @@ Open the machine config page (bottom right) and enter in connection details to v
 
 ## Todo
 
-- animated sequence
-- double click to set trackball center
-- Give error logs
-- default pointcloud color
-- remote IP access
-- ortho points are messed up size-wise
-- geometries parented to parent
-- end effector pose visualized
-- poses of all frames
+- animated sequence of motion plan
+- double click to set trackball center in object view
+- Give better fetching / connection state info
+- Set default pointcloud color in settings
+- remote IP access when custom drawing, to draw on remote computers
+- points are not sized right in ortho cam view
+- geometries need to be parented to parent
 - bounding boxes should include just the thing and not children
-- configure frames from here
+- configure frames in app
 - color pallet for resource to color
 
+- foxglove / rviz
+
 ## Env files
 
 To add a list of connection configs in an `.env.local` file, use the following format:

package/dist/components/App.svelte

@@ -11,6 +11,7 @@
 	import XR from './xr/XR.svelte'
 	import { World } from '@threlte/rapier'
 	import { createPartIDContext } from '../hooks/usePartID.svelte'
+	import Dashboard from './dashboard/Dashboard.svelte'
 
 	interface Props {
 		partID?: string
@@ -51,6 +52,7 @@
 					</Scene>
 
 					<DomPortal element={root}>
+						<Dashboard />
 						<Details />
 					</DomPortal>
 

package/dist/components/AxesHelper.svelte

@@ -1,17 +1,77 @@
 <script lang="ts">
 	import { T, type Props as ThrelteProps } from '@threlte/core'
-	import { AxesHelper } from '../three/AxesHelper'
-	import { meshBounds } from '@threlte/extras'
-	interface Props extends ThrelteProps<AxesHelper> {
-		size?: number
-		thickness?: number
+	import { Color } from 'three'
+	import { Line2 } from 'three/examples/jsm/lines/Line2.js'
+	import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
+	import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+
+	interface Props extends ThrelteProps<Line2> {
+		length?: number
+		width?: number
+		axesColors?: [x: string, y: string, z: string]
+		depthTest?: boolean
 	}
 
-	let { size, thickness, ...rest }: Props = $props()
+	const {
+		length = 1,
+		width = 0.1,
+		axesColors = ['red', 'green', 'blue'],
+		depthTest = true,
+		...rest
+	}: Props = $props()
+
+	const TOTAL_VERTICES = 9
+	const VERTEX_COMPONENTS = 3
+
+	const line = new Line2()
+	const material = $state(new LineMaterial())
+	const geometry = new LineGeometry()
+	const color = new Color()
+	const colors = $state(new Float32Array(TOTAL_VERTICES * VERTEX_COMPONENTS))
+	const positions = $state(new Float32Array(TOTAL_VERTICES * VERTEX_COMPONENTS))
+
+	// Assign colors per vertex
+	$effect.pre(() => {
+		for (let i = 0, l = axesColors.length; i < l; i += 1) {
+			const axis = axesColors[i]
+
+			color.set(axis)
+
+			const axisBufferStart = i * TOTAL_VERTICES
+			const axisBufferEnd = axisBufferStart + TOTAL_VERTICES
+
+			for (let j = axisBufferStart; j < axisBufferEnd; j += VERTEX_COMPONENTS) {
+				colors[j + 0] = color.r
+				colors[j + 1] = color.g
+				colors[j + 2] = color.b
+			}
+		}
+
+		geometry.setColors(colors)
+	})
+
+	const X_AXIS_X_COMPONENT_INDEX = 3
+	const Y_AXIS_Y_COMPONENT_INDEX = 13
+	const Z_AXIS_Z_COMPONENT_INDEX = 23
+
+	$effect.pre(() => {
+		positions[X_AXIS_X_COMPONENT_INDEX] = length
+		positions[Y_AXIS_Y_COMPONENT_INDEX] = length
+		positions[Z_AXIS_Z_COMPONENT_INDEX] = length
+		geometry.setPositions(positions)
+	})
 </script>
 
 <T
-	is={new AxesHelper(size, thickness)}
-	raycast={meshBounds}
+	is={line}
 	{...rest}
-/>
+	raycast={() => null}
+>
+	<T is={geometry} />
+	<T
+		is={material}
+		vertexColors
+		linewidth={width}
+		{depthTest}
+	/>
+</T>

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

@@ -1,4 +1,11 @@
-import { AxesHelper } from '../three/AxesHelper';
-declare const AxesHelper: any;
+import { type Props as ThrelteProps } from '@threlte/core';
+import { Line2 } from 'three/examples/jsm/lines/Line2.js';
+interface Props extends ThrelteProps<Line2> {
+    length?: number;
+    width?: number;
+    axesColors?: [x: string, y: string, z: string];
+    depthTest?: boolean;
+}
+declare const AxesHelper: import("svelte").Component<Props, {}, "">;
 type AxesHelper = ReturnType<typeof AxesHelper>;
 export default AxesHelper;

package/dist/components/Camera.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { PersistedState } from 'runed'
 	import { T } from '@threlte/core'
 	import { PerspectiveCamera, OrthographicCamera } from 'three'
+	import { useSettings } from '../hooks/useSettings.svelte'
 
 	let { children, ...rest } = $props()
 
-	const mode = new PersistedState<'perspective' | 'orthographic'>('camera-type', 'perspective')
+	const settings = useSettings()
+	const mode = $derived(settings.current.cameraMode)
 
 	const perspective = new PerspectiveCamera()
 	perspective.near = 0.01
@@ -18,15 +19,7 @@
 	orthographic.zoom = 200
 </script>
 
-<svelte:window
-	onkeydown={({ key }) => {
-		if (key.toLowerCase() === 'c') {
-			mode.current = mode.current === 'perspective' ? 'orthographic' : 'perspective'
-		}
-	}}
-/>
-
-{#if mode.current === 'perspective'}
+{#if mode === 'perspective'}
 	<T
 		is={perspective}
 		makeDefault
@@ -34,7 +27,7 @@
 	>
 		{@render children?.()}
 	</T>
-{:else if mode.current === 'orthographic'}
+{:else if mode === 'orthographic'}
 	<T
 		is={orthographic}
 		makeDefault

package/dist/components/CameraControls.svelte

@@ -14,14 +14,14 @@
 		Vector3,
 		Vector4,
 	} from 'three'
-	import Controls from 'camera-controls'
+	import CameraController from 'camera-controls'
 	import { T, useTask, useThrelte } from '@threlte/core'
 	import type { Snippet } from 'svelte'
 
 	let installed = false
 
 	const install = () => {
-		Controls.install({
+		CameraController.install({
 			THREE: {
 				Box3,
 				Matrix4,
@@ -40,7 +40,7 @@
 
 <script lang="ts">
 	interface Props {
-		ref?: Controls
+		ref?: CameraController
 		enabled?: boolean
 		children?: Snippet
 	}
@@ -53,7 +53,7 @@
 
 	const { camera, dom, invalidate } = useThrelte()
 
-	const controls = new Controls(camera.current as PerspectiveCamera, dom)
+	const controls = new CameraController(camera.current as PerspectiveCamera, dom)
 
 	$effect.pre(() => {
 		controls.camera = $camera as PerspectiveCamera

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

@@ -1,7 +1,7 @@
-import Controls from 'camera-controls';
+import CameraController from 'camera-controls';
 import type { Snippet } from 'svelte';
 interface Props {
-    ref?: Controls;
+    ref?: CameraController;
     enabled?: boolean;
     children?: Snippet;
 }

package/dist/components/Details.svelte

@@ -2,6 +2,7 @@
 	import { useSelectedObject, useFocusedObject, useFocused } from '../hooks/useSelection.svelte'
 	import { Check, Copy } from 'lucide-svelte'
 	import { Button, Icon } from '@viamrobotics/prime-core'
+	import { useDraggable } from '../hooks/useDraggable.svelte'
 
 	const focused = useFocused()
 	const selectedObject = useSelectedObject()
@@ -9,14 +10,22 @@
 	const object = $derived(focusedObject.current ?? selectedObject.current)
 
 	let copied = $state(false)
+
+	const draggable = useDraggable('details')
 </script>
 
 {#if object}
 	{@const { geometry, pose } = object}
-	<div class="border-medium bg-extralight absolute top-0 right-0 z-10 m-2 w-60 border p-2 text-xs">
+	<div
+		class="border-medium bg-extralight absolute top-0 right-0 z-10 m-2 w-60 border p-2 text-xs"
+		style:transform="translate({draggable.current.x}px, {draggable.current.y}px)"
+	>
 		<div class="flex items-center justify-between gap-2 pb-2">
 			<div class="flex items-center gap-1">
-				<button>
+				<button
+					onmousedown={draggable.onDragStart}
+					onmouseup={draggable.onDragEnd}
+				>
 					<Icon name="drag" />
 				</button>
 				{object.name}

package/dist/components/Focus.svelte

@@ -14,13 +14,11 @@
 	const vec = new Vector3()
 
 	let center = $state.raw<[number, number, number]>([0, 0, 0])
-	// let size = $state.raw<[number, number, number]>([0, 0, 0])
 
 	$effect(() => {
 		if (object3d) {
 			box.setFromObject(object3d)
 			center = box.getCenter(vec).toArray()
-			// size = box.getSize(vec).toArray()
 		}
 	})
 

package/dist/components/Geometry.svelte

@@ -80,7 +80,7 @@
 		/>
 	{:else}
 		<AxesHelper
-			width={5}
+			width={3}
 			length={0.1}
 		/>
 	{/if}

package/dist/components/Scene.svelte

@@ -65,7 +65,7 @@
 		{#if !$isPresenting}
 			<Grid
 				plane="xy"
-				sectionColor="lightgrey"
+				sectionColor="#333"
 				infiniteGrid
 				fadeOrigin={new Vector3()}
 				fadeDistance={25}

package/dist/components/SceneProviders.svelte

@@ -14,6 +14,7 @@
 	import { provideObjects } from '../hooks/useObjects.svelte'
 	import { provideMotionClient } from '../hooks/useMotionClient.svelte'
 	import { provideLogs } from '../hooks/useLogs.svelte'
+	import { provideSettings } from '../hooks/useSettings.svelte'
 
 	interface Props {
 		children: Snippet<[{ focus: boolean }]>
@@ -23,6 +24,7 @@
 
 	const partID = usePartID()
 
+	provideSettings()
 	provideTransformControls()
 	provideVisibility()
 	provideRefreshRates()

package/dist/components/Tree/Tree.svelte

@@ -8,6 +8,7 @@
 	import { useExpanded } from './useExpanded.svelte'
 	import { VirtualList } from 'svelte-virtuallists'
 	import { observe } from '@threlte/core'
+	import { Icon } from '@viamrobotics/prime-core'
 
 	const visibility = useVisibility()
 	const expanded = useExpanded()
@@ -16,9 +17,11 @@
 		rootNode: TreeNode
 		selections: string[]
 		onSelectionChange?: (event: tree.SelectionChangeDetails) => void
+		onDragStart?: (event: MouseEvent) => void
+		onDragEnd?: (event: MouseEvent) => void
 	}
 
-	let { rootNode, selections, onSelectionChange }: Props = $props()
+	let { rootNode, selections, onSelectionChange, onDragStart, onDragEnd }: Props = $props()
 
 	const collection = tree.collection<TreeNode>({
 		nodeToValue: (node) => node.id,
@@ -143,7 +146,13 @@
 
 <div class="root-node">
 	<div {...api.getRootProps() as object}>
-		<div class="border-medium border-b p-2">
+		<div class="border-medium flex items-center gap-1 border-b p-2">
+			<button
+				onmousedown={onDragStart}
+				onmouseup={onDragEnd}
+			>
+				<Icon name="drag" />
+			</button>
 			<h3 {...api.getLabelProps() as object}>{rootNode.name}</h3>
 		</div>
 

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

@@ -4,6 +4,8 @@ interface Props {
     rootNode: TreeNode;
     selections: string[];
     onSelectionChange?: (event: tree.SelectionChangeDetails) => void;
+    onDragStart?: (event: MouseEvent) => void;
+    onDragEnd?: (event: MouseEvent) => void;
 }
 declare const Tree: import("svelte").Component<Props, {}, "">;
 type Tree = ReturnType<typeof Tree>;

package/dist/components/Tree/TreeContainer.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
-	import { PersistedState } from 'runed'
 	import Tree from './Tree.svelte'
-	import { fly } from 'svelte/transition'
-	import { Keybindings } from '../../keybindings'
-	import { ListTree } from 'lucide-svelte'
+
 	import { buildTreeNodes, type TreeNode } from './buildTree'
 	import { useSelected } from '../../hooks/useSelection.svelte'
 	import { provideTreeExpandedContext } from './useExpanded.svelte'
@@ -11,13 +8,13 @@
 	import { useObjects } from '../../hooks/useObjects.svelte'
 	import Settings from './Settings.svelte'
 	import Logs from './Logs.svelte'
-
-	const showTreeview = new PersistedState('show-treeview', true)
+	import { useDraggable } from '../../hooks/useDraggable.svelte'
 
 	provideTreeExpandedContext()
 
 	const selected = useSelected()
 	const objects = useObjects()
+	const draggable = useDraggable('treeview')
 
 	let rootNode = $state<TreeNode>({
 		id: 'world',
@@ -35,38 +32,22 @@
 	})
 </script>
 
-<svelte:window
-	onkeydown={({ key }) => {
-		if (key === Keybindings.TREEVIEW) {
-			showTreeview.current = !showTreeview.current
-		}
-	}}
-/>
-
-<button
-	class="absolute top-2 left-2 p-2"
-	onclick={() => (showTreeview.current = !showTreeview.current)}
+<div
+	class="bg-extralight border-medium absolute top-0 left-0 m-2 overflow-y-auto border text-xs"
+	style:transform="translate({draggable.current.x}px, {draggable.current.y}px)"
 >
-	<ListTree />
-</button>
-
-{#if showTreeview.current}
-	<div
-		class="bg-extralight border-medium absolute top-0 left-0 m-2 overflow-y-auto border text-xs"
-		in:fly={{ duration: 250, x: -100 }}
-		out:fly={{ duration: 250, x: -100 }}
-	>
-		{#key rootNode}
-			<Tree
-				{rootNode}
-				selections={selected.current ? [selected.current] : []}
-				onSelectionChange={(event) => {
-					selected.set(event.selectedValue[0])
-				}}
-			/>
-		{/key}
-
-		<Logs />
-		<Settings />
-	</div>
-{/if}
+	{#key rootNode}
+		<Tree
+			{rootNode}
+			selections={selected.current ? [selected.current] : []}
+			onSelectionChange={(event) => {
+				selected.set(event.selectedValue[0])
+			}}
+			onDragStart={draggable.onDragStart}
+			onDragEnd={draggable.onDragEnd}
+		/>
+	{/key}
+
+	<Logs />
+	<Settings />
+</div>

package/dist/components/dashboard/Button.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Icon, type IconName, Tooltip } from '@viamrobotics/prime-core'
+
+	interface Props {
+		icon: IconName
+		active?: boolean
+		description: string
+		hotkey: string
+		class?: string
+		onclick?: () => void
+	}
+
+	let {
+		icon,
+		active = false,
+		description,
+		hotkey,
+		class: className = '',
+		onclick,
+	}: Props = $props()
+
+	const activeClasses = 'z-10 border-gray-5 bg-white text-gray-8'
+	const inactiveClasses = 'bg-light border-medium text-disabled'
+</script>
+
+<Tooltip
+	let:tooltipID
+	location="bottom"
+>
+	<label
+		class={[className, 'relative block border', active ? activeClasses : inactiveClasses]}
+		aria-describedby={tooltipID}
+	>
+		<button
+			class="p-1.5"
+			role="radio"
+			aria-label={description}
+			aria-checked={active}
+			{onclick}
+		>
+			<Icon name={icon} />
+		</button>
+	</label>
+	<p slot="description">
+		{description} <span class="text-gray-5 pl-1">{hotkey}</span>
+	</p>
+</Tooltip>

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

@@ -0,0 +1,12 @@
+import { type IconName } from '@viamrobotics/prime-core';
+interface Props {
+    icon: IconName;
+    active?: boolean;
+    description: string;
+    hotkey: string;
+    class?: string;
+    onclick?: () => void;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/dashboard/Dashboard.svelte

@@ -0,0 +1,77 @@
+<script>
+	import { useSettings } from '../../hooks/useSettings.svelte'
+	import Button from './Button.svelte'
+
+	const settings = useSettings()
+</script>
+
+<svelte:window
+	onkeydown={({ key }) => {
+		if (key.toLowerCase() === 'c') {
+			settings.current.cameraMode =
+				settings.current.cameraMode === 'perspective' ? 'orthographic' : 'perspective'
+		}
+	}}
+/>
+
+<div class="absolute top-2 flex w-full justify-center">
+	<!-- transform -->
+	<!-- <fieldset>
+    <Button
+      icon="cursor-move"
+      active={$transformMode === TransformModes.TRANSLATE}
+      description="Translate"
+      hotkey="T"
+      onclick={() => transformMode.set(TransformModes.TRANSLATE)}
+    />
+    <Button
+      icon="sync"
+      active={$transformMode === TransformModes.ROTATE}
+      description="Rotate"
+      hotkey="R"
+      class="-my-px"
+      onclick={() => transformMode.set(TransformModes.ROTATE)}
+    />
+    <Button
+      icon="resize"
+      active={$transformMode === TransformModes.SCALE}
+      description="Scale"
+      hotkey="S"
+      onclick={() => transformMode.set(TransformModes.SCALE)}
+    />
+  </fieldset> -->
+
+	<!-- snapping -->
+	<!-- <fieldset>
+    <Button
+      icon={$snapMode ? 'magnet' : 'magnet-off'}
+      active={$snapMode === true}
+      description="Snapping"
+      hotkey="Spacebar"
+      onClick={() => snapMode.set(!$snapMode)}
+    />
+  </fieldset> -->
+
+	<!-- 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>
+</div>

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

@@ -0,0 +1,26 @@
+export default Dashboard;
+type Dashboard = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Dashboard: $$__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/hooks/useDraggable.svelte.d.ts

@@ -1,2 +1,10 @@
-export declare const provideDraggables: () => void;
-export declare const useDraggable: (name: string) => void;
+interface Context {
+    onDragStart: (event: MouseEvent) => void;
+    onDragEnd: (event: MouseEvent) => void;
+    readonly current: {
+        x: number;
+        y: number;
+    };
+}
+export declare const useDraggable: (name: string) => Context;
+export {};