@viamrobotics/motion-tools 1.12.0 → 1.12.1

package/dist/components/Lasso/Lasso.svelte

@@ -39,8 +39,10 @@
 	const point = new Vector3()
 
 	const raycast = (event: PointerEvent) => {
-		mouse.x = (event.clientX / window.innerWidth) * 2 - 1
-		mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
+		const element = event.target as HTMLElement
+		const rect = element.getBoundingClientRect()
+		mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
+		mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
 
 		raycaster.setFromCamera(mouse, camera.current)
 		raycaster.ray.intersectPlane(plane, point)

package/dist/components/Lasso/Tool.svelte

@@ -10,6 +10,8 @@
 	import { BufferGeometryUtils } from 'three/examples/jsm/Addons.js'
 	import { createBinaryPCD } from '../../pcd'
 	import type { BufferGeometry } from 'three'
+	import { useThrelte } from '@threlte/core'
+	import { ElementRect } from 'runed'
 
 	interface Props {
 		/** Whether to auto-enable lasso mode when the component mounts */
@@ -21,6 +23,7 @@
 
 	let { enabled = false, onSelection }: Props = $props()
 
+	const { dom } = useThrelte()
 	const world = useWorld()
 	const settings = useSettings()
 	const isLassoMode = $derived(settings.current.interactionMode === 'lasso')
@@ -56,6 +59,8 @@
 			settings.current.interactionMode = 'lasso'
 		}
 	})
+
+	const rect = new ElementRect(() => dom)
 </script>
 
 <Portal id="dashboard">
@@ -71,7 +76,7 @@
 	</fieldset>
 </Portal>
 
-{#if isLassoMode}
+{#if isLassoMode && rect.height > 0 && rect.width > 0}
 	<Lasso />
 
 	<Portal id="dom">
@@ -79,8 +84,9 @@
 			isOpen
 			exitable={false}
 			title="Lasso"
+			strategy="absolute"
 			defaultSize={{ width: 445, height: 100 }}
-			defaultPosition={{ x: window.innerWidth / 2 - 200, y: window.innerHeight - 10 - 100 }}
+			defaultPosition={{ x: rect.width / 2 - 200, y: rect.height - 10 - 100 }}
 		>
 			<div class="flex items-center gap-4 p-4 text-xs">
 				Shift + click and drag to make a lasso selection.

package/dist/components/overlay/FloatingPanel.svelte

@@ -10,6 +10,7 @@
 		defaultSize?: { width: number; height: number }
 		defaultPosition?: { x: number; y: number }
 		exitable?: boolean
+		strategy?: 'absolute' | 'fixed'
 		isOpen?: boolean
 		children: Snippet
 	}
@@ -17,20 +18,20 @@
 	let {
 		title = '',
 		defaultSize = { width: 700, height: 500 },
-		defaultPosition,
 		exitable = true,
 		isOpen = $bindable(false),
 		children,
+		...props
 	}: Props = $props()
 
 	const id = $props.id()
 	const floatingPanelService = useMachine(floatingPanel.machine, () => ({
 		id,
 		defaultSize,
-		defaultPosition,
 		resizable: false,
 		allowOverflow: false,
 		open: isOpen,
+		...props,
 	}))
 
 	const api = $derived(floatingPanel.connect(floatingPanelService, normalizeProps))

package/dist/components/overlay/FloatingPanel.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
         y: number;
     };
     exitable?: boolean;
+    strategy?: 'absolute' | 'fixed';
     isOpen?: boolean;
     children: Snippet;
 }

package/package.json

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