@viamrobotics/motion-tools 0.6.3 → 0.8.0

package/dist/WorldObject.d.ts

@@ -17,6 +17,8 @@ export type Metadata = {
     };
     points?: Vector3[];
     pointSize?: number;
+    lineWidth?: number;
+    lineDotColor?: ColorRepresentation;
     batched?: {
         id: number;
         object: BatchedMesh;

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/CameraControls.svelte

@@ -4,10 +4,20 @@
 	import KeyboardControls from './KeyboardControls.svelte'
 	import Portal from './portal/Portal.svelte'
 	import Button from './dashboard/Button.svelte'
+	import { useShapes } from '../hooks/useShapes.svelte'
 
+	const shapes = useShapes()
 	const transformControls = useTransformControls()
 
 	let ref = $state.raw<CameraControlsRef>()
+
+	$effect(() => {
+		if (shapes.camera) {
+			const { position, lookAt, animate } = shapes.camera
+			ref?.setPosition(position.x, position.y, position.z, animate)
+			ref?.setLookAt(position.x, position.y, position.z, lookAt.x, lookAt.y, lookAt.z, animate)
+		}
+	})
 </script>
 
 <Portal id="dashboard">

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/Geometry.svelte

@@ -101,7 +101,7 @@
 	{#if geometry?.case === 'line'}
 		<MeshLineMaterial
 			{color}
-			width={0.005}
+			width={metadata.lineWidth ?? 0.005}
 		/>
 	{:else if geometry}
 		<T.MeshToonMaterial

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/Line.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { Instance, InstancedMesh } from '@threlte/extras'
+	import Frame from './Frame.svelte'
+	import type { WorldObject } from '../WorldObject'
+	import { useSettings } from '../hooks/useSettings.svelte'
+
+	interface Props {
+		object: WorldObject
+	}
+
+	let { object }: Props = $props()
+
+	const settings = useSettings()
+	$inspect(object.metadata.points)
+</script>
+
+<Frame
+	{...object}
+	metadata={{
+		...object.metadata,
+		lineWidth: settings.current.lineWidth,
+	}}
+/>
+
+{#if object.metadata.lineDotColor && object.metadata.points}
+	<InstancedMesh frustumCulled={false}>
+		<T.SphereGeometry />
+		<T.MeshBasicMaterial color={object.metadata.lineDotColor} />
+
+		{#each object.metadata.points as { x, y, z }, i (i)}
+			<Instance
+				position.x={x}
+				position.y={y}
+				position.z={z}
+				scale={Number(settings.current.lineDotSize)}
+			/>
+		{/each}
+	</InstancedMesh>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { WorldObject } from '../WorldObject';
+interface Props {
+    object: WorldObject;
+}
+declare const Line: import("svelte").Component<Props, {}, "">;
+type Line = ReturnType<typeof Line>;
+export default Line;

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/Shapes.svelte

@@ -4,6 +4,7 @@
 	import { useShapes } from '../hooks/useShapes.svelte'
 	import WorldObject from './WorldObject.svelte'
 	import Frame from './Frame.svelte'
+	import Line from './Line.svelte'
 
 	const shapes = useShapes()
 </script>
@@ -47,3 +48,7 @@
 		<PortalTarget id={object.name} />
 	</WorldObject>
 {/each}
+
+{#each shapes.lines as object (object.uuid)}
+	<Line {object} />
+{/each}

package/dist/components/Tree/Settings.svelte

@@ -108,6 +108,31 @@
 			</label>
 		</div>
 
+		<h3 class="text-base"><strong>Lines</strong></h3>
+		<div class="flex flex-col gap-2.5">
+			<label class="flex items-center justify-between gap-2">
+				Thickness
+
+				<div class="w-20">
+					<Input
+						bind:value={settings.current.lineWidth}
+						on:keydown={(event) => event.stopImmediatePropagation()}
+					/>
+				</div>
+			</label>
+
+			<label class="flex items-center justify-between gap-2">
+				Dot size
+
+				<div class="w-20">
+					<Input
+						bind:value={settings.current.lineDotSize}
+						on:keydown={(event) => event.stopImmediatePropagation()}
+					/>
+				</div>
+			</label>
+		</div>
+
 		<h3 class="text-base"><strong>Misc</strong></h3>
 		<div class="flex flex-col gap-2.5">
 			<label class="flex items-center justify-between gap-2">

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/useObjects.svelte.js

@@ -19,6 +19,7 @@ export const provideObjects = () => {
         ...shapes.models,
         ...shapes.nurbs,
         ...shapes.points,
+        ...shapes.lines,
         ...statics.current,
         ...shapes.poses,
     ]);

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

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

package/dist/hooks/useSettings.svelte.js

@@ -11,7 +11,10 @@ const defaults = () => ({
     gridSectionSize: 10,
     gridFadeDistance: 25,
     pointSize: 0.01,
-    pointColor: '#333',
+    pointColor: '#333333',
+    lineWidth: 0.005,
+    lineDotSize: 0.01,
+    enableMeasure: false,
     enableXR: false,
     renderStats: false,
 });

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

@@ -1,8 +1,10 @@
+import { Vector3 } from 'three';
 import { BatchedArrow } from '../three/BatchedArrow';
 import { WorldObject, type PointsGeometry } from '../WorldObject';
 type ConnectionStatus = 'connecting' | 'open' | 'closed';
 interface Context {
     points: WorldObject<PointsGeometry>[];
+    lines: WorldObject[];
     meshes: WorldObject[];
     poses: WorldObject[];
     nurbs: WorldObject[];
@@ -11,6 +13,11 @@ interface Context {
     object3ds: {
         batchedArrow: BatchedArrow;
     };
+    camera: {
+        position: Vector3;
+        lookAt: Vector3;
+        animate: boolean;
+    } | undefined;
 }
 export declare const provideShapes: () => void;
 export declare const useShapes: () => Context;

package/dist/hooks/useShapes.svelte.js

@@ -39,10 +39,12 @@ export const provideShapes = () => {
     const maxReconnectDelay = 5_000;
     let ws;
     const points = $state([]);
+    const lines = $state([]);
     const meshes = $state([]);
     const poses = $state([]);
     const nurbs = $state([]);
     const models = $state([]);
+    let camera = $state();
     let connectionStatus = $state('connecting');
     const color = new Color();
     const direction = new Vector3();
@@ -177,6 +179,40 @@ export const provideShapes = () => {
             value: positions,
         }, metadata));
     };
+    const addLine = async (reader) => {
+        // Read label length
+        const labelLen = reader.read();
+        let label = '';
+        for (let i = 0; i < labelLen; i++) {
+            label += String.fromCharCode(reader.read());
+        }
+        // Read counts
+        const nPoints = reader.read();
+        // Read default color
+        const lineR = reader.read();
+        const lineG = reader.read();
+        const lineB = reader.read();
+        const dotR = reader.read();
+        const dotG = reader.read();
+        const dotB = reader.read();
+        // Read positions
+        const positions = new Float32Array(nPoints * 3);
+        for (let i = 0; i < nPoints * 3; i++) {
+            positions[i] = reader.read();
+        }
+        const points = [];
+        for (let i = 0; i < positions.length; i += 3) {
+            points.push(new Vector3(positions[i], positions[i + 1], positions[i + 2]));
+        }
+        lines.push(new WorldObject(label, undefined, undefined, {
+            case: 'line',
+            value: positions,
+        }, {
+            points,
+            color: lineR === -1 ? undefined : new Color().setRGB(lineR, lineG, lineB),
+            lineDotColor: dotR === -1 ? undefined : new Color().setRGB(dotR, dotG, dotB),
+        }));
+    };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const addGeometries = (geometries, colors, parent) => {
         let i = 0;
@@ -224,10 +260,16 @@ export const provideShapes = () => {
                 models.splice(index, 1);
                 continue;
             }
+            index = lines.findIndex((m) => m.name === name);
+            if (index !== -1) {
+                lines.splice(index, 1);
+                continue;
+            }
         }
     };
     const removeAll = () => {
         points.splice(0, points.length);
+        lines.splice(0, lines.length);
         meshes.splice(0, meshes.length);
         nurbs.splice(0, nurbs.length);
         models.splice(0, models.length);
@@ -270,6 +312,9 @@ export const provideShapes = () => {
                 return addPoses(reader);
             }
             else if (type === 2) {
+                return addLine(reader);
+            }
+            else if (type === 3) {
                 return addPCD(reader.buffer);
             }
             else {
@@ -279,6 +324,13 @@ export const provideShapes = () => {
         const data = tryParse(event.data);
         if (!data)
             return;
+        if ('setCameraPose' in data) {
+            camera = {
+                position: new Vector3(data.Position.X, data.Position.Y, data.Position.Z),
+                lookAt: new Vector3(data.LookAt.X, data.LookAt.Y, data.LookAt.Z),
+                animate: data.Animate,
+            };
+        }
         if ('geometries' in data) {
             return addGeometries(data.geometries, data.colors, data.parent);
         }
@@ -310,6 +362,9 @@ export const provideShapes = () => {
         get points() {
             return points;
         },
+        get lines() {
+            return lines;
+        },
         get meshes() {
             return meshes;
         },
@@ -328,6 +383,9 @@ export const provideShapes = () => {
         object3ds: {
             batchedArrow,
         },
+        get camera() {
+            return camera;
+        },
     });
 };
 export const useShapes = () => {

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.8.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;