@viamrobotics/motion-tools 0.19.2 → 1.0.2

package/dist/components/App.svelte

@@ -21,6 +21,7 @@
 	import ArmPositions from './widgets/ArmPositions.svelte'
 	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
 	import type { CameraPose } from '../hooks/useControls.svelte'
+	import { provideWorld } from '../ecs'
 
 	interface LocalConfigProps {
 		getLocalPartConfig: () => Struct
@@ -33,6 +34,7 @@
 		partID?: string
 		enableKeybindings?: boolean
 		children?: Snippet
+		dashboard?: Snippet
 		localConfigProps?: LocalConfigProps
 
 		/**
@@ -44,11 +46,14 @@
 	let {
 		partID = '',
 		enableKeybindings = true,
-		children: appChildren,
 		localConfigProps,
 		cameraPose,
+		children: appChildren,
+		dashboard,
 	}: Props = $props()
 
+	provideWorld()
+
 	const appClient = useViamClient()
 	const settings = provideSettings()
 	const environment = provideEnvironment()
@@ -64,25 +69,33 @@
 
 	let root = $state.raw<HTMLElement>()
 
-	if (localConfigProps) {
-		environment.current.isStandalone = false
-		providePartConfig({
-			appEmbeddedPartConfigProps: {
-				isDirty: () => localConfigProps.isDirty(),
-				getLocalPartConfig: () => localConfigProps.getLocalPartConfig(),
-				setLocalPartConfig: (config: Struct) => localConfigProps.setLocalPartConfig(config),
-				getComponentToFragId: () => localConfigProps.getComponentToFragId(),
-			},
-		})
-	} else {
-		environment.current.isStandalone = true
-		providePartConfig({
-			standalonePartConfigProps: {
-				viamClient: () => appClient?.current,
-				partID: () => partID,
-			},
-		})
-	}
+	providePartConfig(() => {
+		if (localConfigProps) {
+			return {
+				appEmbeddedPartConfigProps: {
+					isDirty: () => localConfigProps.isDirty(),
+					getLocalPartConfig: () => localConfigProps.getLocalPartConfig(),
+					setLocalPartConfig: (config: Struct) => localConfigProps.setLocalPartConfig(config),
+					getComponentToFragId: () => localConfigProps.getComponentToFragId(),
+				},
+			}
+		} else {
+			return {
+				standalonePartConfigProps: {
+					viamClient: () => appClient?.current,
+					partID: () => partID,
+				},
+			}
+		}
+	})
+
+	$effect.pre(() => {
+		if (localConfigProps) {
+			environment.current.isStandalone = false
+		} else {
+			environment.current.isStandalone = true
+		}
+	})
 </script>
 
 {#if settings.current.enableQueryDevtools}
@@ -102,7 +115,10 @@
 
 				<XR {@attach domPortal(root)} />
 
-				<Dashboard {@attach domPortal(root)} />
+				<Dashboard
+					{@attach domPortal(root)}
+					{dashboard}
+				/>
 				<Details {@attach domPortal(root)} />
 				{#if environment.current.isStandalone}
 					<LiveUpdatesBanner {@attach domPortal(root)} />

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

@@ -11,6 +11,7 @@ interface Props {
     partID?: string;
     enableKeybindings?: boolean;
     children?: Snippet;
+    dashboard?: Snippet;
     localConfigProps?: LocalConfigProps;
     /**
      * Allows setting the initial camera pose

package/dist/components/BatchedArrows.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { Portal } from '@threlte/extras'
+	import { BatchedArrow } from '../three/BatchedArrow'
+	import { traits, useWorld } from '../ecs'
+	import type { Entity } from 'koota'
+	import { Color, Vector3 } from 'three'
+
+	const arrowBatchMap = $state<Record<string, BatchedArrow>>({
+		world: new BatchedArrow(),
+	})
+	const batchEntries = $derived(Object.entries(arrowBatchMap))
+
+	const world = useWorld()
+
+	const direction = new Vector3()
+	const origin = new Vector3()
+	const color = new Color()
+
+	const onAdd = (entity: Entity) => {
+		const parent = entity.get(traits.Parent) ?? 'world'
+
+		arrowBatchMap[parent] ??= new BatchedArrow()
+		const batched = arrowBatchMap[parent]
+
+		const pose = entity.get(traits.Pose)
+		const colorRGB = entity.get(traits.Color)
+
+		const instanceID = batched.addArrow(
+			direction.set(pose?.oX ?? 0, pose?.oY ?? 0, pose?.oZ ?? 0),
+			origin.set(pose?.x ?? 0, pose?.y ?? 0, pose?.z ?? 0),
+			colorRGB ? color.set(colorRGB.r, colorRGB.g, colorRGB.b) : color.set('yellow')
+		)
+
+		entity.add(traits.Instance({ instanceID, meshID: batched.mesh.id }))
+	}
+
+	const onPoseChange = (entity: Entity) => {
+		if (!entity.has(traits.Arrow)) return
+
+		const parent = entity.get(traits.Parent) ?? 'world'
+		const batch = arrowBatchMap[parent]
+		const instanceID = entity.get(traits.Instance)?.instanceID
+		const pose = entity.get(traits.Pose)
+
+		if (instanceID && instanceID !== -1 && pose) {
+			batch?.updateArrow(
+				instanceID,
+				direction.set(pose.oX, pose.oY, pose.oZ),
+				origin.set(pose.x, pose.y, pose.z)
+			)
+		}
+	}
+
+	const onColorChange = (entity: Entity) => {
+		if (!entity.has(traits.Arrow)) return
+
+		const parent = entity.get(traits.Parent) ?? 'world'
+		const batch = arrowBatchMap[parent]
+		const instanceID = entity.get(traits.Instance)?.instanceID
+		const colorRGB = entity.get(traits.Color)
+
+		if (instanceID && instanceID !== -1 && colorRGB) {
+			color.set(colorRGB.r, colorRGB.g, colorRGB.b)
+			batch.mesh.setColorAt(instanceID, color)
+		}
+	}
+
+	const onInstanceRemove = (entity: Entity) => {
+		const instance = entity.get(traits.Instance)
+
+		for (const [, batch] of batchEntries) {
+			if (batch.mesh.id === instance?.meshID) {
+				batch.removeArrow(instance.instanceID)
+			}
+		}
+	}
+
+	$effect(() => {
+		const unsubAdd = world.onAdd(traits.Arrow, onAdd)
+		const unsubRemove = world.onRemove(traits.Instance, onInstanceRemove)
+		const unsubPoseChange = world.onChange(traits.Pose, onPoseChange)
+		const unsubColorChange = world.onChange(traits.Color, onColorChange)
+
+		return () => {
+			unsubAdd()
+			unsubRemove()
+			unsubPoseChange()
+			unsubColorChange()
+		}
+	})
+</script>
+
+{#each batchEntries as [parent, batch] (parent)}
+	<Portal id={parent}>
+		<T
+			is={batch.mesh}
+			dispose={false}
+			bvh={{ enabled: false }}
+		/>
+	</Portal>
+{/each}

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

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

package/dist/components/CameraControls.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { MathUtils } from 'three'
-	import { CameraControls, type CameraControlsRef, Gizmo } from '@threlte/extras'
+	import { CameraControls, type CameraControlsRef, Gizmo, Portal } from '@threlte/extras'
 	import { useCameraControls, useTransformControls } from '../hooks/useControls.svelte'
 	import KeyboardControls from './KeyboardControls.svelte'
-	import Portal from './portal/Portal.svelte'
 	import Button from './dashboard/Button.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 
@@ -39,6 +38,6 @@
 		{#if enableKeybindings}
 			<KeyboardControls cameraControls={ref} />
 		{/if}
-		<Gizmo />
+		<Gizmo placement="bottom-right" />
 	{/snippet}
 </CameraControls>