@viamrobotics/motion-tools 1.3.4 → 1.3.5

package/dist/components/Details.svelte

@@ -3,7 +3,7 @@
 	lang="ts"
 >
 	import { OrientationVector } from '../three/OrientationVector'
-	import { Quaternion, Vector3, MathUtils, type Vector2Like } from 'three'
+	import { Quaternion, Vector3, MathUtils } from 'three'
 
 	const vec3 = new Vector3()
 	const quaternion = new Quaternion()
@@ -25,15 +25,13 @@
 	import { usePartConfig } from '../hooks/usePartConfig.svelte'
 	import { FrameConfigUpdater } from '../FrameConfigUpdater.svelte'
 	import { useEnvironment } from '../hooks/useEnvironment.svelte'
-	import { traits, useTrait } from '../ecs'
+	import { traits, useTrait, useWorld } from '../ecs'
 	import { useResourceByName } from '../hooks/useResourceByName.svelte'
-	import { PersistedState } from 'runed'
 	import { useCameraControls } from '../hooks/useControls.svelte'
 
 	const { ...rest } = $props()
 
-	const dragPosition = new PersistedState<Vector2Like>('details-drag-position', { x: 0, y: 0 })
-
+	const world = useWorld()
 	const controls = useCameraControls()
 	const resourceByName = useResourceByName()
 	const frames = useFrames()
@@ -54,6 +52,7 @@
 	const box = useTrait(() => entity, traits.Box)
 	const sphere = useTrait(() => entity, traits.Sphere)
 	const capsule = useTrait(() => entity, traits.Capsule)
+	const removable = useTrait(() => entity, traits.Removable)
 
 	const framesAPI = useTrait(() => entity, traits.FramesAPI)
 	const isFrameNode = $derived(!!framesAPI.current)
@@ -232,21 +231,18 @@
 	{@const ScalarAttribute = showEditFrameOptions ? MutableField : ImmutableField}
 
 	<div
+		id="details-panel"
 		class="border-medium bg-extralight absolute top-0 right-0 z-10 m-2 {showEditFrameOptions
 			? 'w-80'
 			: 'w-60'} border p-2 text-xs"
 		use:draggable={{
 			bounds: 'body',
 			handle: dragElement,
-			defaultPosition: dragPosition.current,
-			onDragEnd(data) {
-				dragPosition.current = { x: data.offsetX, y: data.offsetY }
-			},
 		}}
 		{...rest}
 	>
 		<div class="flex items-center justify-between gap-2 pb-2">
-			<div class="flex w-[90%] items-center gap-1">
+			<div class="flex w-[80%] items-center gap-1">
 				<button bind:this={dragElement}>
 					<Icon name="drag" />
 				</button>
@@ -286,6 +282,26 @@
 					<p slot="description">Zoom to object</p>
 				</Tooltip>
 			{/if}
+
+			{#if removable.current}
+				<Tooltip
+					let:tooltipID
+					location="bottom"
+				>
+					<button
+						class="text-subtle-2"
+						aria-describedby={tooltipID}
+						onclick={() => {
+							if (world.has(entity)) {
+								entity.destroy()
+							}
+						}}
+					>
+						<Icon name="trash-can-outline" />
+					</button>
+					<p slot="description">Remove from scene</p>
+				</Tooltip>
+			{/if}
 		</div>
 
 		<div class="border-medium -mx-2 w-[100%+0.5rem] border-b"></div>

package/dist/components/FileDrop/FileDrop.svelte

@@ -42,7 +42,8 @@
 						traits.Name(result.name),
 						traits.BufferGeometry(geometry),
 						traits.Points,
-						traits.DroppedFile
+						traits.DroppedFile,
+						traits.Removable
 					)
 					break
 				}
@@ -50,7 +51,8 @@
 					world.spawn(
 						traits.Name(result.name),
 						traits.BufferGeometry(result.ply),
-						traits.DroppedFile
+						traits.DroppedFile,
+						traits.Removable
 					)
 					break
 				}

package/dist/components/Geometry2.svelte

@@ -185,7 +185,7 @@
 					opacity={opacity.current ?? 0.7}
 				/>
 
-				{#if geo}
+				{#if geo && renderMode.includes('colliders')}
 					<T.LineSegments
 						raycast={() => null}
 						bvh={{ enabled: false }}

package/dist/components/StaticGeometries.svelte

@@ -39,7 +39,8 @@
 		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: 0.1, y: 0.1, z: 0.1 }),
+			traits.Removable
 		)
 
 		entities.add(entity)

package/dist/components/Tree/TreeContainer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { Vector2Like } from 'three'
 	import { draggable } from '@neodrag/svelte'
 	import Tree from './Tree.svelte'
 	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
@@ -11,16 +10,13 @@
 	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
 	import { usePartID } from '../../hooks/usePartID.svelte'
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
-	import { traits, useWorld } from '../../ecs'
+	import { traits, useQuery, useWorld } from '../../ecs'
 	import { IsExcluded, type Entity } from 'koota'
 	import { buildTreeNodes, type TreeNode } from './buildTree'
 	import { MIN_DIMENSIONS, useResizable } from '../../hooks/useResizable.svelte'
-	import { PersistedState } from 'runed'
 
 	const { ...rest } = $props()
 
-	const dragPosition = new PersistedState<Vector2Like | undefined>('tree-drag-position', undefined)
-
 	provideTreeExpandedContext()
 
 	let container = $state.raw<HTMLDivElement>()
@@ -38,32 +34,13 @@
 
 	const worldEntity = world.spawn(IsExcluded, traits.Name('World'))
 
-	let children = $state.raw<TreeNode[]>([])
-	let nodeMap = $state.raw<Record<string, TreeNode | undefined>>({})
-
-	let pending = false
-	const flush = () => {
-		if (pending) return
-		pending = true
-
-		window.setTimeout(() => {
-			const results = buildTreeNodes(world.query(traits.Name))
-			children = results.rootNodes
-			nodeMap = results.nodeMap
-			pending = false
-		})
-	}
+	const allEntities = useQuery(traits.Name)
 
-	world.onAdd(traits.Name, flush)
-	world.onAdd(traits.Parent, flush)
-	world.onRemove(traits.Name, flush)
-	world.onRemove(traits.Parent, flush)
-	world.onChange(traits.Name, flush)
-	world.onChange(traits.Parent, flush)
+	const { rootNodes, nodeMap } = $derived(buildTreeNodes(allEntities.current))
 
 	const rootNode = $derived<TreeNode>({
 		entity: worldEntity,
-		children,
+		children: rootNodes,
 	})
 
 	$effect(() => {
@@ -83,10 +60,6 @@
 	use:draggable={{
 		bounds: 'body',
 		handle: dragElement,
-		defaultPosition: dragPosition.current,
-		onDragEnd(data) {
-			dragPosition.current = { x: Math.max(data.offsetX, 0), y: Math.max(data.offsetY, 0) }
-		},
 	}}
 	{...rest}
 >

package/dist/components/widgets/ArmPositions.svelte

@@ -1,19 +1,12 @@
 <script lang="ts">
-	import type { Vector2Like } from 'three'
 	import { draggable } from '@neodrag/svelte'
 	import { formatNumeric } from '../../format'
 	import Table from '../shared/Table.svelte'
 	import { useArmClient } from '../../hooks/useArmClient.svelte'
 	import { Icon, Label, Select } from '@viamrobotics/prime-core'
-	import { PersistedState } from 'runed'
 
 	const { ...rest } = $props()
 
-	const dragPosition = new PersistedState<Vector2Like | undefined>(
-		'details-drag-position',
-		undefined
-	)
-
 	let dragElement = $state.raw<HTMLElement>()
 
 	const armClient = useArmClient()
@@ -28,10 +21,6 @@
 	use:draggable={{
 		bounds: 'body',
 		handle: dragElement,
-		defaultPosition: dragPosition.current,
-		onDragEnd(data) {
-			dragPosition.current = { x: data.offsetX, y: data.offsetY }
-		},
 	}}
 	{...rest}
 >

package/dist/ecs/traits.d.ts

@@ -126,6 +126,10 @@ export declare const PointSize: import("koota").Trait<() => number>;
  */
 export declare const LineWidth: import("koota").Trait<() => number>;
 export declare const ReferenceFrame: import("koota").TagTrait;
+/**
+ * This entity can be safetly removed from the scene by the user
+ */
+export declare const Removable: import("koota").TagTrait;
 export declare const Geometry: (geometry: ViamGeometry) => import("koota").TagTrait | [import("koota").Trait<{
     x: number;
     y: number;

package/dist/ecs/traits.js

@@ -78,6 +78,10 @@ export const PointSize = trait(() => 10);
  */
 export const LineWidth = trait(() => 5);
 export const ReferenceFrame = trait();
+/**
+ * This entity can be safetly removed from the scene by the user
+ */
+export const Removable = trait();
 export const Geometry = (geometry) => {
     if (geometry.geometryType.case === 'box') {
         return Box(createBox(geometry.geometryType.value));

package/dist/hooks/useDrawAPI.svelte.js

@@ -144,7 +144,7 @@ export const provideDrawAPI = () => {
             if (frame.geometry) {
                 entityTraits.push(geometryTrait());
             }
-            entityTraits.push(traits.Name(name), traits.Pose(pose), traits.DrawAPI, traits.ReferenceFrame);
+            entityTraits.push(traits.Name(name), traits.Pose(pose), traits.DrawAPI, traits.ReferenceFrame, traits.Removable);
             const entity = world.spawn(...entityTraits);
             entities.set(name, entity);
         }
@@ -178,7 +178,7 @@ export const provideDrawAPI = () => {
         if (parent && parent !== 'world') {
             entityTraits.push(traits.Parent(parent));
         }
-        entityTraits.push(traits.Name(data.label ?? ++geometryIndex), traits.Pose(pose), traits.Color(colorUtil.set(color)), geometryTrait(), traits.DrawAPI);
+        entityTraits.push(traits.Name(data.label ?? ++geometryIndex), traits.Pose(pose), traits.Color(colorUtil.set(color)), geometryTrait(), traits.DrawAPI, traits.Removable);
         const entity = world.spawn(...entityTraits);
         entities.set(name, entity);
     };
@@ -201,7 +201,7 @@ export const provideDrawAPI = () => {
             existing.set(traits.LinePositions, points);
             return;
         }
-        const entity = world.spawn(traits.Name(name), traits.Color(colorUtil.set(color)), traits.LinePositions(points), traits.DrawAPI);
+        const entity = world.spawn(traits.Name(name), traits.Color(colorUtil.set(color)), traits.LinePositions(points), traits.DrawAPI, traits.Removable);
         entities.set(name, entity);
     };
     const vec3 = new Vector3();
@@ -211,7 +211,7 @@ export const provideDrawAPI = () => {
         const nColors = reader.read();
         const arrowHeadAtPose = reader.read();
         const entities = [];
-        const entity = world.spawn(traits.Name(`Arrow group ${++poseIndex}`), traits.Positions(reader.readF32Array(nPoints * STRIDE.ARROWS)), traits.Colors(reader.readU8Array(nColors * STRIDE.COLORS_RGB)), traits.Arrows({ headAtPose: arrowHeadAtPose === 1 }), traits.DrawAPI);
+        const entity = world.spawn(traits.Name(`Arrow group ${++poseIndex}`), traits.Positions(reader.readF32Array(nPoints * STRIDE.ARROWS)), traits.Colors(reader.readU8Array(nColors * STRIDE.COLORS_RGB)), traits.Arrows({ headAtPose: arrowHeadAtPose === 1 }), traits.DrawAPI, traits.Removable);
         entities.push(entity);
     };
     const drawPoints = async (reader) => {
@@ -251,7 +251,7 @@ export const provideDrawAPI = () => {
             }
         }
         const geometry = createBufferGeometry(positions, colors);
-        world.spawn(traits.Name(label), traits.Color(colorUtil.set(r, g, b)), traits.BufferGeometry(geometry), traits.Points, traits.DrawAPI);
+        world.spawn(traits.Name(label), traits.Color(colorUtil.set(r, g, b)), traits.BufferGeometry(geometry), traits.Points, traits.DrawAPI, traits.Removable);
     };
     const drawLine = async (reader) => {
         // Read label length
@@ -279,7 +279,7 @@ export const provideDrawAPI = () => {
             points[i + 1] = reader.read();
             points[i + 2] = reader.read();
         }
-        world.spawn(traits.Name(label), traits.Color({ r, g, b }), traits.LinePositions(points), traits.PointColor({ r: dotR, g: dotG, b: dotB }), traits.DrawAPI);
+        world.spawn(traits.Name(label), traits.Color({ r, g, b }), traits.LinePositions(points), traits.PointColor({ r: dotR, g: dotG, b: dotB }), traits.DrawAPI, traits.Removable);
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const drawGeometries = (geometries, colors, parent) => {
@@ -293,14 +293,16 @@ export const provideDrawAPI = () => {
         const blob = new Blob([buffer], { type: 'model/gltf-binary' });
         const url = URL.createObjectURL(blob);
         const gltf = await loader.loadAsync(url);
-        world.spawn(traits.Name(gltf.scene.name), traits.GLTF({ source: { gltf }, animationName: '' }), traits.DrawAPI);
+        world.spawn(traits.Name(gltf.scene.name), traits.GLTF({ source: { gltf }, animationName: '' }), traits.DrawAPI, traits.Removable);
         URL.revokeObjectURL(url);
     };
     const remove = (names) => {
         for (const name of names) {
             for (const entity of world.query(traits.DrawAPI)) {
                 if (entity.get(traits.Name) === name) {
-                    entity.destroy();
+                    if (world.has(entity)) {
+                        entity.destroy();
+                    }
                     entities.delete(name);
                 }
             }
@@ -308,7 +310,9 @@ export const provideDrawAPI = () => {
     };
     const removeAll = () => {
         for (const entity of world.query(traits.DrawAPI)) {
-            entity.destroy();
+            if (world.has(entity)) {
+                entity.destroy();
+            }
         }
         entities.clear();
         geometryIndex = 0;

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

@@ -1,6 +1,6 @@
 export declare const ENVIRONMENT_CONTEXT_KEY: unique symbol;
 interface Environemnt {
-    viewerMode: 'edit' | 'monitor';
+    viewerMode: 'edit' | 'monitor' | 'focus';
     isStandalone: boolean;
 }
 interface Context {

package/dist/hooks/usePointcloudObjects.svelte.js

@@ -161,7 +161,9 @@ export const providePointcloudObjects = (partID) => {
         // Clean up old entities
         for (const [label, entity] of entities) {
             if (!active[label]) {
-                entity.destroy();
+                if (world.has(entity)) {
+                    entity.destroy();
+                }
                 entities.delete(label);
             }
         }

package/dist/hooks/usePointclouds.svelte.js

@@ -117,7 +117,9 @@ export const providePointclouds = (partID) => {
         // Clean up old entities
         for (const [name, entity] of entities) {
             if (!queryMap[name]?.data) {
-                entity.destroy();
+                if (world.has(entity)) {
+                    entity.destroy();
+                }
                 entities.delete(name);
             }
         }

package/dist/hooks/useSelection.svelte.js

@@ -1,13 +1,15 @@
-import { isInstanceOf, useThrelte } from '@threlte/core';
-import { getContext, setContext } from 'svelte';
+import { useThrelte } from '@threlte/core';
+import { getContext, setContext, untrack } from 'svelte';
 import { Object3D } from 'three';
 import { traits, useWorld } from '../ecs';
+import { useEnvironment } from './useEnvironment.svelte';
 const selectedKey = Symbol('selected-frame-context');
 const focusedKey = Symbol('focused-frame-context');
 const focusedObject3dKey = Symbol('focused-object-3d-context');
 export const provideSelection = () => {
     const world = useWorld();
     const { scene } = useThrelte();
+    const environment = useEnvironment();
     let selected = $state.raw();
     let selectedInstance = $state();
     let focused = $state.raw();
@@ -46,18 +48,15 @@ export const provideSelection = () => {
         },
     };
     setContext(focusedKey, focusedEntityContext);
-    const focusedObject3d = $derived.by(() => {
-        const name = focused?.get(traits.Name);
-        if (!name) {
-            return;
+    const focusedObject3d = $derived(focused ? scene.getObjectByName(focused)?.clone() : undefined);
+    $effect(() => {
+        const previousMode = untrack(() => environment.current.viewerMode);
+        if (focusedObject3d) {
+            environment.current.viewerMode = 'focus';
+            return () => {
+                environment.current.viewerMode = previousMode;
+            };
         }
-        const object = scene.getObjectByName(name)?.clone();
-        object?.traverse((child) => {
-            if (isInstanceOf(child, 'LineSegments')) {
-                child.raycast = () => null;
-            }
-        });
-        return object;
     });
     setContext(focusedObject3dKey, {
         get current() {

package/dist/hooks/useWorldState.svelte.js

@@ -71,7 +71,9 @@ const createWorldState = (client) => {
         const entity = entities.get(uuid);
         if (!entity)
             return;
-        entity.destroy();
+        if (world.has(entity)) {
+            entity.destroy();
+        }
         entities.delete(uuid);
     };
     const updateEntity = (transform, changes) => {
@@ -202,7 +204,9 @@ const createWorldState = (client) => {
     });
     return () => {
         for (const [, entity] of entities) {
-            entity.destroy();
+            if (world.has(entity)) {
+                entity.destroy();
+            }
         }
     };
 };

package/dist/snapshot.js

@@ -83,6 +83,7 @@ const spawnTransformEntity = (world, transform) => {
         traits.Geometry(transform.physicalObject ?? Geometry.fromJson({})),
         traits.Center(transform.physicalObject?.center),
         traits.SnapshotAPI,
+        traits.Removable,
     ];
     const poseInFrame = transform.poseInObserverFrame;
     entityTraits.push(traits.Pose(poseInFrame?.pose));
@@ -117,7 +118,7 @@ const spawnEntitiesFromDrawing = (world, drawing) => {
         if (colors) {
             entityTraits.push(traits.Colors(colors));
         }
-        const entity = world.spawn(...entityTraits, traits.SnapshotAPI, traits.Arrows({ headAtPose: true }), traits.Instances({ count: poses.length / STRIDE.ARROWS }));
+        const entity = world.spawn(...entityTraits, traits.Arrows({ headAtPose: true }), traits.Instances({ count: poses.length / STRIDE.ARROWS }), traits.SnapshotAPI, traits.Removable);
         entities.push(entity);
     }
     else if (geometryType?.case === 'model') {
@@ -129,7 +130,7 @@ const spawnEntitiesFromDrawing = (world, drawing) => {
         if (parent) {
             rootEntityTraits.push(traits.Parent(parent));
         }
-        const rootEntity = world.spawn(...rootEntityTraits, traits.SnapshotAPI);
+        const rootEntity = world.spawn(...rootEntityTraits, traits.SnapshotAPI, traits.Removable);
         entities.push(rootEntity);
         let i = 1;
         for (const asset of geometryType.value.assets) {
@@ -152,7 +153,7 @@ const spawnEntitiesFromDrawing = (world, drawing) => {
                     animationName: geometryType.value.animationName ?? '',
                 }));
             }
-            const entity = world.spawn(...entityTraits, traits.SnapshotAPI);
+            const entity = world.spawn(...entityTraits, traits.SnapshotAPI, traits.Removable);
             entities.push(entity);
         }
     }
@@ -227,7 +228,7 @@ const spawnEntitiesFromDrawing = (world, drawing) => {
             }
             entityTraits.push(traits.LinePositions(points));
         }
-        const entity = world.spawn(...entityTraits, traits.SnapshotAPI);
+        const entity = world.spawn(...entityTraits, traits.SnapshotAPI, traits.Removable);
         entities.push(entity);
     }
     return entities;

package/dist/three/InstancedArrows/InstancedArrows.js

@@ -1,6 +1,6 @@
 import { RawShaderMaterial, FrontSide, Group, InstancedBufferAttribute, DynamicDrawUsage, Mesh, BufferGeometry, InstancedInterleavedBuffer, InterleavedBufferAttribute, Material, Color, Vector3, Box3, } from 'three';
-import vertexShader from './vertex.glsl?raw';
-import fragmentShader from './fragment.glsl?raw';
+import vertexShader from './vertex.glsl';
+import fragmentShader from './fragment.glsl';
 import { createHeadGeometry, createShaftGeometry, toInstanced } from './geometry';
 import { computeBoundingBox } from './box';
 const defaults = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -17,7 +17,7 @@
     "@skeletonlabs/skeleton": "3.2.0",
     "@skeletonlabs/skeleton-svelte": "1.5.1",
     "@sveltejs/adapter-static": "3.0.9",
-    "@sveltejs/kit": "2.37.0",
+    "@sveltejs/kit": "2.49.5",
     "@sveltejs/package": "2.5.0",
     "@sveltejs/vite-plugin-svelte": "6.1.4",
     "@tailwindcss/forms": "0.5.10",
@@ -68,10 +68,14 @@
     "typescript-eslint": "8.42.0",
     "vite": "7.1.11",
     "vite-plugin-devtools-json": "1.0.0",
+    "vite-plugin-glsl": "^1.5.5",
     "vite-plugin-mkcert": "1.17.8",
     "vitest": "3.2.4"
   },
   "peerDependencies": {
+    "@ag-grid-community/client-side-row-model": ">=32.3.0",
+    "@ag-grid-community/core": ">=32.3.0",
+    "@ag-grid-community/styles": ">=32.3.0",
     "@dimforge/rapier3d-compat": ">=0.17",
     "@threlte/core": ">=8",
     "@threlte/extras": ">=9",
@@ -81,6 +85,7 @@
     "@viamrobotics/sdk": ">=0.38",
     "@viamrobotics/svelte-sdk": ">=0.1",
     "@zag-js/collapsible": ">=1",
+    "@zag-js/dialog": ">=1.31",
     "@zag-js/floating-panel": ">=1",
     "@zag-js/svelte": ">=1",
     "@zag-js/tree-view": ">=1",
@@ -89,11 +94,7 @@
     "lucide-svelte": ">=0.511",
     "runed": ">=0.28",
     "svelte": ">=5",
-    "svelte-virtuallists": ">=1",
-    "@ag-grid-community/client-side-row-model": ">=32.3.0",
-    "@ag-grid-community/core": ">=32.3.0",
-    "@ag-grid-community/styles": ">=32.3.0",
-    "@zag-js/dialog": ">=1.31"
+    "svelte-virtuallists": ">=1"
   },
   "engines": {
     "node": ">=22.12.0"