@viamrobotics/motion-tools 1.1.5 → 1.1.6

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
-	import { Color, type Object3D } from 'three'
+	import { Color, Group, type Object3D } from 'three'
 	import Geometry from './Geometry2.svelte'
 	import { useWeblabs } from '../hooks/useWeblabs.svelte'
 	import { useSelectedEntity } from '../hooks/useSelection.svelte'
@@ -13,6 +13,7 @@
 	import { traits, useTrait } from '../ecs'
 	import type { Pose } from '@viamrobotics/sdk'
 	import { useResourceByName } from '../hooks/useResourceByName.svelte'
+	import { Portal, PortalTarget } from '@threlte/extras'
 
 	interface Props {
 		entity: Entity
@@ -22,14 +23,20 @@
 
 	let { entity, pose, children }: Props = $props()
 
+	let ref = $state<Group>()
+
 	const colorUtil = new Color()
+
 	const settings = useSettings()
 	const componentModels = use3DModels()
 	const selectedEntity = useSelectedEntity()
 	const resourceByName = useResourceByName()
 	const weblabs = useWeblabs()
+
 	const name = useTrait(() => entity, traits.Name)
+	const parent = useTrait(() => entity, traits.Parent)
 	const entityColor = useTrait(() => entity, traits.Color)
+
 	const events = useObjectEvents(() => entity)
 	const resourceColor = $derived.by(() => {
 		if (!name.current) {
@@ -66,14 +73,24 @@
 	})
 </script>
 
-<Geometry
-	{entity}
-	{model}
-	{pose}
-	{children}
-	renderMode={settings.current.renderArmModels}
-	color={selectedEntity.current === entity
-		? `#${darkenColor(color, 75).getHexString()}`
-		: `#${colorUtil.set(color).getHexString()}`}
-	{...events}
-/>
+<Portal id={parent.current}>
+	<Geometry
+		bind:ref
+		{entity}
+		{model}
+		{pose}
+		renderMode={settings.current.renderArmModels}
+		color={selectedEntity.current === entity
+			? `#${darkenColor(color, 75).getHexString()}`
+			: `#${colorUtil.set(color).getHexString()}`}
+		{...events}
+	>
+		{#if name.current}
+			<PortalTarget id={name.current} />
+		{/if}
+
+		{#if ref}
+			{@render children?.({ ref })}
+		{/if}
+	</Geometry>
+</Portal>

package/dist/components/Geometry2.svelte

@@ -1,13 +1,7 @@
 <script lang="ts">
 	import { T, useThrelte, type Props as ThrelteProps } from '@threlte/core'
 	import { type Snippet } from 'svelte'
-	import {
-		meshBounds,
-		MeshLineMaterial,
-		MeshLineGeometry,
-		Portal,
-		PortalTarget,
-	} from '@threlte/extras'
+	import { meshBounds, MeshLineMaterial, MeshLineGeometry } from '@threlte/extras'
 	import { BufferGeometry, Color, DoubleSide, FrontSide, Group, Mesh } from 'three'
 	import { CapsuleGeometry } from '../three/CapsuleGeometry'
 	import { colors, darkenColor } from '../color'
@@ -23,6 +17,7 @@
 		model?: Group
 		pose?: Pose
 		renderMode?: 'model' | 'colliders' | 'colliders+model'
+		ref?: Group
 		children?: Snippet<[{ ref: Group }]>
 	}
 
@@ -32,6 +27,7 @@
 		model,
 		renderMode = 'colliders',
 		pose,
+		ref = $bindable(),
 		children,
 		...rest
 	}: Props = $props()
@@ -40,7 +36,6 @@
 
 	const { invalidate } = useThrelte()
 	const name = useTrait(() => entity, traits.Name)
-	const parent = useTrait(() => entity, traits.Parent)
 	const entityColor = useTrait(() => entity, traits.Color)
 	const opacity = useTrait(() => entity, traits.Opacity)
 	const box = useTrait(() => entity, traits.Box)
@@ -71,6 +66,8 @@
 	})
 
 	const group = new Group()
+	ref = group
+
 	const mesh = $derived.by(() => {
 		if (geometryType === undefined) {
 			return
@@ -103,8 +100,8 @@
 
 	let geo = $state.raw<BufferGeometry>()
 
-	const oncreate = (ref: BufferGeometry) => {
-		geo = ref
+	const oncreate = (bufferGeometry: BufferGeometry) => {
+		geo = bufferGeometry
 	}
 
 	$effect.pre(() => {
@@ -120,87 +117,81 @@
 	})
 </script>
 
-<Portal id={parent.current}>
-	<T
-		is={group}
-		{...rest}
-	>
-		{#if geometryType}
-			<AxesHelper
-				width={3}
-				length={0.1}
-			/>
-
-			<T
-				is={mesh}
-				name={name.current}
-				bvh={{ enabled: geometryType === 'buffer' }}
-			>
-				{#if model && renderMode.includes('model')}
-					<T is={model} />
-				{/if}
-
-				{#if !model || renderMode.includes('colliders')}
-					{#if lineGeometry.current}
-						<MeshLineGeometry points={lineGeometry.current} />
-					{:else if box.current}
-						{@const { x, y, z } = box.current ?? { x: 0, y: 0, z: 0 }}
-						<T.BoxGeometry
-							args={[x * 0.001, y * 0.001, z * 0.001]}
-							{oncreate}
-						/>
-					{:else if sphere.current}
-						{@const { r } = sphere.current ?? { r: 0 }}
-						<T.SphereGeometry
-							args={[r * 0.001]}
-							{oncreate}
-						/>
-					{:else if capsule.current}
-						{@const { r, l } = capsule.current ?? { r: 0, l: 0 }}
-						<T
-							is={CapsuleGeometry}
-							args={[r * 0.001, l * 0.001]}
-							{oncreate}
-						/>
-					{/if}
-				{/if}
-
+<T
+	is={group}
+	{...rest}
+>
+	{#if geometryType}
+		<AxesHelper
+			width={3}
+			length={0.1}
+		/>
+
+		<T
+			is={mesh}
+			name={name.current}
+			bvh={{ enabled: geometryType === 'buffer' }}
+		>
+			{#if model && renderMode.includes('model')}
+				<T is={model} />
+			{/if}
+
+			{#if !model || renderMode.includes('colliders')}
 				{#if lineGeometry.current}
-					<MeshLineMaterial
-						{color}
-						width={0.005}
+					<MeshLineGeometry points={lineGeometry.current} />
+				{:else if box.current}
+					{@const { x, y, z } = box.current ?? { x: 0, y: 0, z: 0 }}
+					<T.BoxGeometry
+						args={[x * 0.001, y * 0.001, z * 0.001]}
+						{oncreate}
 					/>
-				{:else}
-					<T.MeshToonMaterial
-						{color}
-						side={geometryType === 'buffer' ? DoubleSide : FrontSide}
-						transparent
-						opacity={opacity.current ?? 0.7}
+				{:else if sphere.current}
+					{@const { r } = sphere.current ?? { r: 0 }}
+					<T.SphereGeometry
+						args={[r * 0.001]}
+						{oncreate}
 					/>
-
-					{#if geo}
-						<T.LineSegments
-							raycast={() => null}
-							bvh={{ enabled: false }}
-						>
-							<T.EdgesGeometry args={[geo, 0]} />
-							<T.LineBasicMaterial color={darkenColor(color, 10)} />
-						</T.LineSegments>
-					{/if}
+				{:else if capsule.current}
+					{@const { r, l } = capsule.current ?? { r: 0, l: 0 }}
+					<T
+						is={CapsuleGeometry}
+						args={[r * 0.001, l * 0.001]}
+						{oncreate}
+					/>
+				{/if}
+			{/if}
+
+			{#if lineGeometry.current}
+				<MeshLineMaterial
+					{color}
+					width={0.005}
+				/>
+			{:else}
+				<T.MeshToonMaterial
+					{color}
+					side={geometryType === 'buffer' ? DoubleSide : FrontSide}
+					transparent
+					opacity={opacity.current ?? 0.7}
+				/>
+
+				{#if geo}
+					<T.LineSegments
+						raycast={() => null}
+						bvh={{ enabled: false }}
+					>
+						<T.EdgesGeometry args={[geo, 0]} />
+						<T.LineBasicMaterial color={darkenColor(color, 10)} />
+					</T.LineSegments>
 				{/if}
-			</T>
-		{:else}
-			<AxesHelper
-				name={name.current}
-				width={3}
-				length={0.1}
-			/>
-		{/if}
-
-		{@render children?.({ ref: group })}
-
-		{#if name.current}
-			<PortalTarget id={name.current} />
-		{/if}
-	</T>
-</Portal>
+			{/if}
+		</T>
+	{:else}
+		<AxesHelper
+			name={name.current}
+			width={3}
+			length={0.1}
+		/>
+	{/if}
+
+	{@render children?.({ ref: group })}
+</T>

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

@@ -9,10 +9,11 @@ interface Props extends ThrelteProps<Group> {
     model?: Group;
     pose?: Pose;
     renderMode?: 'model' | 'colliders' | 'colliders+model';
+    ref?: Group;
     children?: Snippet<[{
         ref: Group;
     }]>;
 }
-declare const Geometry2: import("svelte").Component<Props, {}, "">;
+declare const Geometry2: import("svelte").Component<Props, {}, "ref">;
 type Geometry2 = ReturnType<typeof Geometry2>;
 export default Geometry2;

package/dist/hooks/useDrawAPI.svelte.js

@@ -290,6 +290,7 @@ export const provideDrawAPI = () => {
             for (const entity of world.query(traits.DrawAPI)) {
                 if (entity.get(traits.Name) === name) {
                     entity.destroy();
+                    entities.delete(name);
                 }
             }
         }
@@ -298,6 +299,7 @@ export const provideDrawAPI = () => {
         for (const entity of world.query(traits.DrawAPI)) {
             entity.destroy();
         }
+        entities.clear();
         pointsIndex = 0;
         geometryIndex = 0;
         poseIndex = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",