@viamrobotics/motion-tools 0.3.6 → 0.3.7

package/dist/color.d.ts

@@ -6,3 +6,4 @@ import { Color, type ColorRepresentation } from 'three';
  * @returns A new THREE.Color instance with the darkened color.
  */
 export declare const darkenColor: (value: ColorRepresentation, percent: number) => Color;
+export declare const mapStringToColor: () => void;

package/dist/color.js

@@ -12,3 +12,4 @@ export const darkenColor = (value, percent) => {
     hsl.l = Math.max(0, hsl.l * (1 - percent / 100));
     return color.setHSL(hsl.h, hsl.s, hsl.l);
 };
+export const mapStringToColor = () => { };

package/dist/components/CameraControls.svelte

@@ -17,7 +17,6 @@
 	import CameraControls from 'camera-controls'
 	import { T, useTask, useThrelte } from '@threlte/core'
 	import type { Snippet } from 'svelte'
-	import { useTransformControls } from '../hooks/useControls.svelte'
 
 	let installed = false
 
@@ -42,17 +41,17 @@
 <script lang="ts">
 	interface Props {
 		ref?: CameraControls
+		enabled?: boolean
 		children?: Snippet
 	}
 
-	let { ref = $bindable(), children }: Props = $props()
+	let { ref = $bindable(), enabled = true, children }: Props = $props()
 
 	if (!installed) {
 		install()
 	}
 
 	const { camera, dom, invalidate } = useThrelte()
-	const transformControls = useTransformControls()
 
 	const controls = new CameraControls(camera.current as PerspectiveCamera, dom)
 
@@ -61,7 +60,7 @@
 	})
 
 	$effect.pre(() => {
-		controls.enabled = !transformControls.active
+		controls.enabled = enabled
 	})
 
 	useTask(

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

@@ -2,6 +2,7 @@ import CameraControls from 'camera-controls';
 import type { Snippet } from 'svelte';
 interface Props {
     ref?: CameraControls;
+    enabled?: boolean;
     children?: Snippet;
 }
 declare const CameraControls: import("svelte").Component<Props, {}, "ref">;

package/dist/components/Frame.svelte

@@ -1,17 +1,9 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
-	import { type Snippet } from 'svelte'
-	import { meshBounds, MeshLineGeometry, MeshLineMaterial } from '@threlte/extras'
-	import { BufferGeometry, DoubleSide, FrontSide, Mesh, Object3D } from 'three'
-	import { CapsuleGeometry } from '../three/CapsuleGeometry'
-	import { poseToObject3d } from '../transform'
-	import { darkenColor } from '../color'
-	import AxesHelper from './AxesHelper.svelte'
+	import type { Snippet } from 'svelte'
+	import type { Object3D } from 'three'
 	import type { WorldObject } from '../WorldObject'
-	import { PLYLoader } from 'three/addons/loaders/PLYLoader.js'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
-
-	const plyLoader = new PLYLoader()
+	import Geometry from './Geometry.svelte'
 
 	interface Props {
 		uuid: string
@@ -22,91 +14,13 @@
 		children?: Snippet<[{ ref: Object3D }]>
 	}
 
-	let { uuid, name, geometry, metadata, pose, children }: Props = $props()
-
-	const type = $derived(geometry?.case)
-	const mesh = $derived.by(() => {
-		const object3d = type === undefined ? new Object3D() : new Mesh()
-
-		if (type === 'mesh' || type === 'points' || type === 'line') {
-			object3d.raycast = meshBounds
-		}
-
-		return object3d
-	})
-
-	$effect.pre(() => {
-		poseToObject3d(pose, mesh)
-	})
+	let { uuid, ...rest }: Props = $props()
 
 	const events = useObjectEvents(() => uuid)
-
-	let geo = $state<BufferGeometry>()
 </script>
 
-<T
-	is={mesh}
-	{name}
+<Geometry
 	{uuid}
 	{...events}
->
-	{#if geometry?.case === 'mesh'}
-		{@const meshGeometry = plyLoader.parse(atob(geometry.value.mesh as unknown as string))}
-		<T is={meshGeometry} />
-	{:else if geometry?.case === 'line' && metadata.points}
-		<MeshLineGeometry points={metadata.points} />
-	{:else if geometry?.case === 'box'}
-		{@const dimsMm = geometry.value.dimsMm ?? { x: 0, y: 0, z: 0 }}
-		<T.BoxGeometry
-			args={[dimsMm.x * 0.001, dimsMm.y * 0.001, dimsMm.z * 0.001]}
-			oncreate={(ref) => {
-				geo = ref
-			}}
-		/>
-	{:else if geometry?.case === 'sphere'}
-		{@const radiusMm = geometry.value.radiusMm ?? 0}
-		<T.SphereGeometry
-			args={[radiusMm * 0.001]}
-			oncreate={(ref) => {
-				geo = ref
-			}}
-		/>
-	{:else if geometry?.case === 'capsule'}
-		{@const { lengthMm, radiusMm } = geometry.value}
-		<T
-			is={CapsuleGeometry}
-			args={[radiusMm * 0.001, lengthMm * 0.001]}
-			oncreate={(ref) => {
-				geo = ref
-			}}
-		/>
-	{:else}
-		<AxesHelper
-			width={5}
-			length={0.1}
-		/>
-	{/if}
-
-	{#if geometry?.case === 'line'}
-		<MeshLineMaterial
-			color={metadata.color ?? 'red'}
-			width={0.005}
-		/>
-	{:else if geometry}
-		<T.MeshToonMaterial
-			color={metadata.color ?? 'red'}
-			side={geometry.case === 'mesh' ? DoubleSide : FrontSide}
-			transparent
-			opacity={0.7}
-		/>
-
-		{#if geo}
-			<T.LineSegments raycast={() => null}>
-				<T.EdgesGeometry args={[geo, 1]} />
-				<T.LineBasicMaterial color={darkenColor(metadata.color ?? 'red', 10)} />
-			</T.LineSegments>
-		{/if}
-	{/if}
-
-	{@render children?.({ ref: mesh })}
-</T>
+	{...rest}
+/>

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

@@ -1,5 +1,5 @@
-import { type Snippet } from 'svelte';
-import { Object3D } from 'three';
+import type { Snippet } from 'svelte';
+import type { Object3D } from 'three';
 import type { WorldObject } from '../WorldObject';
 interface Props {
     uuid: string;

package/dist/components/Geometry.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { type Snippet } from 'svelte'
+	import { meshBounds, MeshLineGeometry, MeshLineMaterial } from '@threlte/extras'
+	import { BufferGeometry, DoubleSide, FrontSide, Mesh, Object3D } from 'three'
+	import { CapsuleGeometry } from '../three/CapsuleGeometry'
+	import { poseToObject3d } from '../transform'
+	import { darkenColor } from '../color'
+	import AxesHelper from './AxesHelper.svelte'
+	import type { WorldObject } from '../WorldObject'
+	import { PLYLoader } from 'three/addons/loaders/PLYLoader.js'
+
+	const plyLoader = new PLYLoader()
+
+	interface Props {
+		uuid: string
+		name: string
+		geometry?: WorldObject['geometry']
+		pose: WorldObject['pose']
+		metadata: WorldObject['metadata']
+		children?: Snippet<[{ ref: Object3D }]>
+		[prop: string]: unknown
+	}
+
+	let { uuid, name, geometry, metadata, pose, children, ...rest }: Props = $props()
+
+	const type = $derived(geometry?.case)
+	const mesh = $derived.by(() => {
+		const object3d = type === undefined ? new Object3D() : new Mesh()
+
+		if (type === 'mesh' || type === 'points' || type === 'line') {
+			object3d.raycast = meshBounds
+		}
+
+		return object3d
+	})
+
+	$effect.pre(() => {
+		poseToObject3d(pose, mesh)
+	})
+
+	let geo = $state<BufferGeometry>()
+</script>
+
+<T
+	is={mesh}
+	{name}
+	{uuid}
+	{...rest}
+>
+	{#if geometry?.case === 'mesh'}
+		{@const meshGeometry = plyLoader.parse(atob(geometry.value.mesh as unknown as string))}
+		<T is={meshGeometry} />
+	{:else if geometry?.case === 'line' && metadata.points}
+		<MeshLineGeometry points={metadata.points} />
+	{:else if geometry?.case === 'box'}
+		{@const dimsMm = geometry.value.dimsMm ?? { x: 0, y: 0, z: 0 }}
+		<T.BoxGeometry
+			args={[dimsMm.x * 0.001, dimsMm.y * 0.001, dimsMm.z * 0.001]}
+			oncreate={(ref) => {
+				geo = ref
+			}}
+		/>
+	{:else if geometry?.case === 'sphere'}
+		{@const radiusMm = geometry.value.radiusMm ?? 0}
+		<T.SphereGeometry
+			args={[radiusMm * 0.001]}
+			oncreate={(ref) => {
+				geo = ref
+			}}
+		/>
+	{:else if geometry?.case === 'capsule'}
+		{@const { lengthMm, radiusMm } = geometry.value}
+		<T
+			is={CapsuleGeometry}
+			args={[radiusMm * 0.001, lengthMm * 0.001]}
+			oncreate={(ref) => {
+				geo = ref
+			}}
+		/>
+	{:else}
+		<AxesHelper
+			width={5}
+			length={0.1}
+		/>
+	{/if}
+
+	{#if geometry?.case === 'line'}
+		<MeshLineMaterial
+			color={metadata.color ?? 'red'}
+			width={0.005}
+		/>
+	{:else if geometry}
+		<T.MeshToonMaterial
+			color={metadata.color ?? 'red'}
+			side={geometry.case === 'mesh' ? DoubleSide : FrontSide}
+			transparent
+			opacity={0.7}
+		/>
+
+		{#if geo}
+			<T.LineSegments raycast={() => null}>
+				<T.EdgesGeometry args={[geo, 1]} />
+				<T.LineBasicMaterial color={darkenColor(metadata.color ?? 'red', 10)} />
+			</T.LineSegments>
+		{/if}
+	{/if}
+
+	{@render children?.({ ref: mesh })}
+</T>

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

@@ -0,0 +1,17 @@
+import { type Snippet } from 'svelte';
+import { Object3D } from 'three';
+import type { WorldObject } from '../WorldObject';
+interface Props {
+    uuid: string;
+    name: string;
+    geometry?: WorldObject['geometry'];
+    pose: WorldObject['pose'];
+    metadata: WorldObject['metadata'];
+    children?: Snippet<[{
+        ref: Object3D;
+    }]>;
+    [prop: string]: unknown;
+}
+declare const Geometry: import("svelte").Component<Props, {}, "">;
+type Geometry = ReturnType<typeof Geometry>;
+export default Geometry;

package/dist/components/Scene.svelte

@@ -14,6 +14,7 @@
 	import { useFocused } from '../hooks/useSelection.svelte'
 	import type { Snippet } from 'svelte'
 	import { useXR } from '@threlte/xr'
+	import { useTransformControls } from '../hooks/useControls.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -32,6 +33,7 @@
 	})
 
 	const focused = useFocused()
+	const transformControls = useTransformControls()
 
 	const { isPresenting } = useXR()
 </script>
@@ -45,7 +47,7 @@
 	{#if focused.current === undefined}
 		{#if !$isPresenting}
 			<Camera position={[3, 3, 3]}>
-				<CameraControls>
+				<CameraControls enabled={!transformControls.active}>
 					<Gizmo />
 				</CameraControls>
 			</Camera>

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 export { default as MotionTools } from './components/App.svelte';
+export { default as CameraControls } from './components/CameraControls.svelte';
+export { default as Geometry } from './components/Geometry.svelte';
 export { AxesHelper } from './three/AxesHelper';
 export { BatchedArrow } from './three/BatchedArrow';
 export { CapsuleGeometry } from './three/CapsuleGeometry';
+export { WorldObject } from './WorldObject';

package/dist/index.js

@@ -1,4 +1,7 @@
 export { default as MotionTools } from './components/App.svelte';
+export { default as CameraControls } from './components/CameraControls.svelte';
+export { default as Geometry } from './components/Geometry.svelte';
 export { AxesHelper } from './three/AxesHelper';
 export { BatchedArrow } from './three/BatchedArrow';
 export { CapsuleGeometry } from './three/CapsuleGeometry';
+export { WorldObject } from './WorldObject';

package/package.json

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