@viamrobotics/motion-tools 0.6.3 → 0.7.0

package/dist/components/App.svelte

@@ -5,11 +5,11 @@
 	import TreeContainer from './Tree/TreeContainer.svelte'
 	import Details from './Details.svelte'
 	import SceneProviders from './SceneProviders.svelte'
-	import DomPortal from './DomPortal.svelte'
 	import XR from './xr/XR.svelte'
 	import { World } from '@threlte/rapier'
 	import { createPartIDContext } from '../hooks/usePartID.svelte'
 	import Dashboard from './dashboard/Dashboard.svelte'
+	import { domPortal } from '../portal'
 
 	interface Props {
 		partID?: string
@@ -35,17 +35,13 @@
 						{@render appChildren?.()}
 					</Scene>
 
-					<XR />
+					<XR {@attach domPortal(root)} />
 
-					<DomPortal element={root}>
-						<Dashboard />
-						<Details />
-					</DomPortal>
+					<Dashboard {@attach domPortal(root)} />
+					<Details {@attach domPortal(root)} />
 
 					{#if !focus}
-						<DomPortal element={root}>
-							<TreeContainer />
-						</DomPortal>
+						<TreeContainer {@attach domPortal(root)} />
 					{/if}
 				{/snippet}
 			</SceneProviders>

package/dist/components/Details.svelte

@@ -12,6 +12,7 @@
 
 <script lang="ts">
 	import { Check, Copy } from 'lucide-svelte'
+	import { useTask } from '@threlte/core'
 	import { Button, Icon } from '@viamrobotics/prime-core'
 	import {
 		useSelectedObject,
@@ -21,7 +22,8 @@
 		useSelectedObject3d,
 	} from '../hooks/useSelection.svelte'
 	import { useDraggable } from '../hooks/useDraggable.svelte'
-	import { useTask } from '@threlte/core'
+
+	const { ...rest } = $props()
 
 	const focused = useFocused()
 	const focusedObject = useFocusedObject()
@@ -75,6 +77,7 @@
 	<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)"
+		{...rest}
 	>
 		<div class="flex items-center justify-between gap-2 pb-2">
 			<div class="flex items-center gap-1">

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

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

package/dist/components/DotSprite.svelte

@@ -0,0 +1,44 @@
+<script
+	module
+	lang="ts"
+>
+	import { T, type Props as ThrelteProps } from '@threlte/core'
+	import { CanvasTexture, type Sprite, type ColorRepresentation } from 'three'
+
+	const size = 128
+	const canvas = new OffscreenCanvas(size, size)
+	const ctx = canvas.getContext('2d')
+
+	if (ctx) {
+		ctx.clearRect(0, 0, size, size)
+		ctx.beginPath()
+		ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2)
+		ctx.fillStyle = 'white'
+		ctx.fill()
+	}
+
+	const map = new CanvasTexture(canvas)
+</script>
+
+<script lang="ts">
+	interface Props extends ThrelteProps<typeof Sprite> {
+		color?: ColorRepresentation
+		opacity?: number
+	}
+
+	let { color, opacity = 1, ref = $bindable(), ...rest }: Props = $props()
+</script>
+
+<T.Sprite
+	bind:ref
+	scale={0.05}
+	{...rest}
+>
+	<T.SpriteMaterial
+		transparent
+		depthTest={false}
+		{map}
+		{opacity}
+		color={color ?? 'black'}
+	/>
+</T.Sprite>

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

@@ -0,0 +1,9 @@
+import { type Props as ThrelteProps } from '@threlte/core';
+import { type Sprite, type ColorRepresentation } from 'three';
+interface Props extends ThrelteProps<typeof Sprite> {
+    color?: ColorRepresentation;
+    opacity?: number;
+}
+declare const DotSprite: import("svelte").Component<Props, {}, "ref">;
+type DotSprite = ReturnType<typeof DotSprite>;
+export default DotSprite;

package/dist/components/KeyboardControls.svelte

@@ -111,7 +111,7 @@
 		settings.current.transformMode = 'scale'
 	})
 
-	keys.onKeys(['ctrl', 'x'], () => {
+	keys.onKeys('x', () => {
 		settings.current.enableXR = !settings.current.enableXR
 	})
 </script>

package/dist/components/MeasureTool.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { untrack } from 'svelte'
+	import { Raycaster, Vector2, Vector3, type Intersection } from 'three'
+	import { T, useThrelte, useTask } from '@threlte/core'
+	import { HTML, MeshLineGeometry, MeshLineMaterial, useInteractivity } from '@threlte/extras'
+	import { useSettings } from '../hooks/useSettings.svelte'
+	import Button from './dashboard/Button.svelte'
+	import Portal from './portal/Portal.svelte'
+	import DotSprite from './DotSprite.svelte'
+
+	const settings = useSettings()
+	const { camera } = useThrelte()
+	const interactivity = useInteractivity()
+	const raycaster = new Raycaster()
+
+	const htmlPosition = new Vector3()
+	const pointerDown = new Vector2()
+	const pointerUp = new Vector2()
+
+	let step: 'idle' | 'p1' | 'p2' = 'idle'
+
+	let intersection: Intersection | undefined
+	let p1 = $state.raw<Vector3>()
+	let p2 = $state.raw<Vector3>()
+
+	const enabled = $derived(settings.current.enableMeasure)
+
+	const onpointerdown = (event: PointerEvent) => {
+		pointerDown.set(event.clientX, event.clientY)
+	}
+
+	const onpointerup = (event: PointerEvent) => {
+		pointerUp.set(event.clientX, event.clientY)
+
+		if (pointerDown.distanceToSquared(pointerUp) > 0.1) {
+			return
+		}
+
+		if (step === 'idle' && intersection) {
+			p1 = intersection.point.clone()
+			step = 'p1'
+		} else if (step === 'p1' && intersection) {
+			p2 = intersection.point.clone()
+			step = 'p2'
+		} else if (step === 'p2') {
+			p1 = undefined
+			p2 = undefined
+			step = 'idle'
+		}
+	}
+
+	const { start, stop } = useTask(
+		() => {
+			if (interactivity.hovered.size === 0) {
+				return
+			}
+
+			for (const [, event] of interactivity.hovered) {
+				raycaster.setFromCamera(interactivity.pointer.current, camera.current)
+				intersection = raycaster.intersectObject(event.object)[0]
+			}
+		},
+		{ autoStart: false }
+	)
+
+	$effect(() => {
+		if (!enabled) {
+			untrack(() => {
+				p1 = undefined
+				p2 = undefined
+				step = 'idle'
+			})
+		}
+	})
+
+	$effect(() => {
+		if (enabled) {
+			start()
+		} else {
+			stop()
+		}
+	})
+</script>
+
+<Portal id="dashboard">
+	<fieldset>
+		<Button
+			active
+			icon="ruler"
+			class={enabled ? '' : 'text-gray-4!'}
+			description="{enabled ? 'Disable' : 'Enable'} measurement"
+			onclick={() => {
+				settings.current.enableMeasure = !settings.current.enableMeasure
+			}}
+		/>
+	</fieldset>
+</Portal>
+
+<svelte:window
+	onpointerdown={enabled ? onpointerdown : undefined}
+	onpointerup={enabled ? onpointerup : undefined}
+/>
+
+{#if enabled}
+	{#if p1}
+		<DotSprite position={p1.toArray()} />
+	{/if}
+
+	{#if p2}
+		<DotSprite position={p2.toArray()} />
+	{/if}
+
+	{#if p1 && p2}
+		<T.Mesh>
+			<MeshLineGeometry points={[p1, p2]} />
+			<MeshLineMaterial
+				width={0.015}
+				depthTest={false}
+				color="black"
+			/>
+		</T.Mesh>
+		<HTML
+			center
+			position={htmlPosition.lerpVectors(p1, p2, 0.5).toArray()}
+		>
+			<div class="border border-black bg-white px-1 py-0.5 text-xs">
+				{p1.distanceTo(p2).toFixed(2)}m
+			</div>
+		</HTML>
+	{/if}
+{/if}

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

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

package/dist/components/Scene.svelte

@@ -17,6 +17,7 @@
 	import { useOrigin } from './xr/useOrigin.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import CameraControls from './CameraControls.svelte'
+	import MeasureTool from './MeasureTool.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -63,6 +64,7 @@
 
 		<PortalTarget id="world" />
 
+		<MeasureTool />
 		<StaticGeometries />
 		<Frames />
 		<Pointclouds />

package/dist/components/Tree/TreeContainer.svelte

@@ -10,6 +10,8 @@
 	import Logs from './Logs.svelte'
 	import { useDraggable } from '../../hooks/useDraggable.svelte'
 
+	const { ...rest } = $props()
+
 	provideTreeExpandedContext()
 
 	const selected = useSelected()
@@ -35,6 +37,7 @@
 <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)"
+	{...rest}
 >
 	{#key rootNode}
 		<Tree

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

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

package/dist/components/dashboard/Button.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { Icon, type IconName, Tooltip } from '@viamrobotics/prime-core'
+	import { Ruler } from 'lucide-svelte'
 
 	interface Props {
-		icon: IconName
+		icon: IconName | 'ruler'
 		active?: boolean
 		description: string
 		hotkey?: string
@@ -39,7 +40,11 @@
 			aria-checked={active}
 			{onclick}
 		>
-			<Icon name={icon} />
+			{#if icon === 'ruler'}
+				<Ruler size="16" />
+			{:else}
+				<Icon name={icon} />
+			{/if}
 		</button>
 	</label>
 	<p slot="description">

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

@@ -1,6 +1,6 @@
 import { type IconName } from '@viamrobotics/prime-core';
 interface Props {
-    icon: IconName;
+    icon: IconName | 'ruler';
     active?: boolean;
     description: string;
     hotkey?: string;

package/dist/components/dashboard/Dashboard.svelte

@@ -3,10 +3,15 @@
 	import PortalTarget from '../portal/PortalTarget.svelte'
 	import Button from './Button.svelte'
 
+	let { ...rest } = $props()
+
 	const settings = useSettings()
 </script>
 
-<div class="absolute top-2 flex w-full justify-center gap-2">
+<div
+	class="absolute top-2 flex w-full justify-center gap-2"
+	{...rest}
+>
 	<!-- camera view -->
 	<fieldset class="flex">
 		<Button

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

@@ -1,26 +1,6 @@
 export default Dashboard;
-type Dashboard = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type Dashboard = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, any>>): void;
 };
-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;
-}
+declare const Dashboard: import("svelte").Component<Record<string, any>, {}, "">;

package/dist/components/xr/XR.svelte

@@ -2,10 +2,11 @@
 	import { T } from '@threlte/core'
 	import { useXR, XR, XRButton } from '@threlte/xr'
 	import OriginMarker from './OriginMarker.svelte'
-	import DomPortal from '../DomPortal.svelte'
 	import { useSettings } from '../../hooks/useSettings.svelte'
 	import Controllers from './Controllers.svelte'
 
+	const { ...rest } = $props()
+
 	const { isPresenting } = useXR()
 	const settings = useSettings()
 	const enableXR = $derived(settings.current.enableXR)
@@ -20,7 +21,8 @@
 		<Controllers />
 	</XR>
 
-	<DomPortal>
-		<XRButton mode="immersive-ar" />
-	</DomPortal>
+	<XRButton
+		mode="immersive-ar"
+		{...rest}
+	/>
 {/if}

package/dist/components/xr/XR.svelte.d.ts

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

package/dist/hooks/useGeometries.svelte.js

@@ -48,9 +48,10 @@ export const provideGeometries = (partID) => {
                 continue;
             for (const { center, label, geometryType } of query.data.geometries) {
                 const resourceName = resourceNames.current.find((item) => item.name === query.data.name);
-                results.push(new WorldObject(label ? label : 'Unnamed geometry', center, query.data.name, geometryType, resourceName
+                const worldObject = new WorldObject(label ? label : 'Unnamed geometry', center, query.data.name, geometryType, resourceName
                     ? { color: resourceColors[resourceName.subtype] }
-                    : undefined));
+                    : undefined);
+                results.push(worldObject);
             }
         }
         updateUUIDs(results);

package/dist/hooks/useObjectEvents.svelte.js

@@ -2,26 +2,34 @@ import { useCursor } from '@threlte/extras';
 import { useFocused, useSelected } from './useSelection.svelte';
 import { useVisibility } from './useVisibility.svelte';
 import { Vector2 } from 'three';
+import { useSettings } from './useSettings.svelte';
 export const useObjectEvents = (uuid) => {
-    const { onPointerEnter, onPointerLeave } = useCursor();
+    const settings = useSettings();
     const selected = useSelected();
     const focused = useFocused();
     const visibility = useVisibility();
     const down = new Vector2();
+    const measureCursor = useCursor('crosshair');
+    const hoverCursor = useCursor();
+    const measuring = $derived(settings.current.enableMeasure);
+    const cursor = $derived(measuring ? measureCursor : hoverCursor);
     return {
         get visible() {
             return visibility.get(uuid());
         },
         onpointerenter: (event) => {
             event.stopPropagation();
-            onPointerEnter();
+            cursor.onPointerEnter();
         },
         onpointerleave: (event) => {
             event.stopPropagation();
-            onPointerLeave();
+            cursor.onPointerLeave();
         },
         ondblclick: (event) => {
             event.stopPropagation();
+            if (measuring) {
+                return;
+            }
             focused.set(uuid());
         },
         onpointerdown: (event) => {
@@ -29,11 +37,17 @@ export const useObjectEvents = (uuid) => {
         },
         onclick: (event) => {
             event.stopPropagation();
+            if (measuring) {
+                return;
+            }
             if (down.distanceToSquared(event.pointer) < 0.1) {
                 selected.set(uuid());
             }
         },
         onpointermissed: () => {
+            if (measuring) {
+                return;
+            }
             selected.set();
         },
     };

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

@@ -10,6 +10,7 @@ interface Settings {
     pointSize: number;
     pointColor: string;
     enableXR: boolean;
+    enableMeasure: boolean;
     renderStats: boolean;
 }
 interface Context {

package/dist/hooks/useSettings.svelte.js

@@ -12,6 +12,7 @@ const defaults = () => ({
     gridFadeDistance: 25,
     pointSize: 0.01,
     pointColor: '#333',
+    enableMeasure: false,
     enableXR: false,
     renderStats: false,
 });

package/dist/portal.d.ts

@@ -0,0 +1,2 @@
+import type { Attachment } from 'svelte/attachments';
+export declare const domPortal: (target?: HTMLElement) => Attachment;

package/dist/portal.js

@@ -0,0 +1,9 @@
+export const domPortal = (target) => {
+    return (element) => {
+        const finalTarget = target ?? document.body;
+        finalTarget.append(element);
+        return () => {
+            element.remove();
+        };
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -37,7 +37,7 @@
     "@typescript-eslint/parser": "8.38.0",
     "@viamrobotics/prime-core": "0.1.5",
     "@viamrobotics/sdk": "0.46.0",
-    "@viamrobotics/svelte-sdk": "0.4.4",
+    "@viamrobotics/svelte-sdk": "0.4.3",
     "@vitejs/plugin-basic-ssl": "2.1.0",
     "@zag-js/svelte": "1.19.0",
     "@zag-js/tree-view": "1.19.0",

package/dist/components/DomPortal.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte'
-
-	interface Props {
-		element?: HTMLElement
-		children: Snippet
-	}
-
-	let { children, element }: Props = $props()
-
-	let div: HTMLDivElement
-
-	$effect(() => {
-		const parent = element ?? document.body
-		parent.append(div)
-		return () => {
-			// eslint-disable-next-line svelte/no-dom-manipulating
-			div.remove()
-		}
-	})
-</script>
-
-<div
-	style="display: contents"
-	bind:this={div}
->
-	{@render children()}
-</div>

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

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    element?: HTMLElement;
-    children: Snippet;
-}
-declare const DomPortal: import("svelte").Component<Props, {}, "">;
-type DomPortal = ReturnType<typeof DomPortal>;
-export default DomPortal;