@viamrobotics/motion-tools 1.15.8 → 1.18.0

package/dist/components/Selection/Ellipse.svelte

@@ -0,0 +1,294 @@
+<script lang="ts">
+	import type { ShapecastCallbacks } from 'three-mesh-bvh'
+
+	import { useThrelte } from '@threlte/core'
+	import earcut from 'earcut'
+	import { Not } from 'koota'
+	import { Box3, Triangle, Vector3 } from 'three'
+
+	import { createBufferGeometry } from '../../attribute'
+	import { traits, useQuery, useWorld } from '../../ecs'
+	import { useCameraControls } from '../../hooks/useControls.svelte'
+
+	import Debug from './Debug.svelte'
+	import * as selectionTraits from './traits'
+	import { getTriangleBoxesFromIndices, getTriangleFromIndex, raycast } from './utils'
+
+	interface Props {
+		active?: boolean
+		debug?: boolean
+	}
+
+	let { active = false, debug = false }: Props = $props()
+
+	const world = useWorld()
+	const controls = useCameraControls()
+	const { scene, dom, camera } = useThrelte()
+
+	const box3 = new Box3()
+	const min = new Vector3()
+	const max = new Vector3()
+
+	const triangle = new Triangle()
+	const triangleBox = new Box3()
+
+	let frameScheduled = false
+	let drawing = false
+
+	const onpointerdown = (event: PointerEvent) => {
+		if (!event.shiftKey || !active) return
+
+		const { x, y } = raycast(event, camera.current)
+
+		drawing = true
+
+		world.spawn(
+			traits.LinePositions(new Float32Array([x, y, 0])),
+			selectionTraits.StartPoint({ x, y }),
+			traits.LineWidth(1.5),
+			traits.RenderOrder(999),
+			traits.Material({ depthTest: false }),
+			traits.Color({ r: 1, g: 0, b: 0 }),
+			selectionTraits.Box({ minX: x, minY: y, maxX: x, maxY: y }),
+			selectionTraits.Ellipse
+		)
+
+		if (controls.current) {
+			controls.current.enabled = false
+		}
+	}
+
+	const onpointermove = (event: PointerEvent) => {
+		if (!drawing || !active) return
+
+		let ellipse = world.query(selectionTraits.Ellipse).at(-1)
+
+		if (!ellipse) return
+
+		if (frameScheduled) return
+
+		frameScheduled = true
+
+		/**
+		 * pointermove can execute at a rate much higher than screen
+		 * refresh, creating huge polygon vertex counts, so we cap it.
+		 */
+		requestAnimationFrame(() => {
+			frameScheduled = false
+
+			const { x, y } = raycast(event, camera.current)
+			const positions = ellipse.get(traits.LinePositions)
+			const startPoint = ellipse.get(selectionTraits.StartPoint)
+			const box = ellipse.get(selectionTraits.Box)
+
+			if (!positions || !box || !startPoint) return
+
+			let minX = startPoint.x
+			let minY = startPoint.y
+			let maxX = startPoint.x
+			let maxY = startPoint.y
+
+			if (x < minX) minX = x
+			else if (x > maxX) maxX = x
+
+			if (y < minY) minY = y
+			else if (y > maxY) maxY = y
+
+			const nextPositions = ellipsePoints(minX, maxX, minY, maxY, 100)
+
+			ellipse.set(traits.LinePositions, new Float32Array(nextPositions))
+			ellipse.set(selectionTraits.Box, { minX, minY, maxX, maxY })
+		})
+	}
+
+	const ellipsePoints = (
+		minX: number,
+		maxX: number,
+		minY: number,
+		maxY: number,
+		numPoints: number
+	): Float32Array => {
+		const cx = (minX + maxX) / 2
+		const cy = (minY + maxY) / 2
+		const rx = (maxX - minX) / 2
+		const ry = (maxY - minY) / 2
+
+		const points = new Float32Array(numPoints * 3)
+
+		for (let i = 0; i < numPoints; i++) {
+			const t = (i / numPoints) * 2 * Math.PI
+
+			points[i * 3] = cx + rx * Math.cos(t)
+			points[i * 3 + 1] = cy + ry * Math.sin(t)
+			points[i * 3 + 2] = 0
+		}
+
+		return points
+	}
+
+	const onpointerleave = () => {
+		if (!drawing || !active) return
+
+		onpointerup()
+	}
+
+	const onpointerup = () => {
+		if (!drawing || !active) return
+
+		drawing = false
+
+		let ellipse = world.query(selectionTraits.Ellipse).at(-1)
+
+		if (!ellipse) return
+
+		let positions = ellipse.get(traits.LinePositions)
+
+		if (!positions) return
+
+		if (controls.current) {
+			controls.current.enabled = true
+		}
+
+		const indices = earcut(positions, undefined, 3)
+		if (debug) {
+			ellipse.add(selectionTraits.Indices(new Uint16Array(indices)))
+		}
+
+		const boxes: selectionTraits.AABB[] = getTriangleBoxesFromIndices(indices, positions)
+		if (debug) {
+			ellipse.add(selectionTraits.Boxes(boxes))
+		}
+
+		const ellipseBox = ellipse.get(selectionTraits.Box)
+
+		if (!ellipseBox) return
+
+		min.set(ellipseBox.minX, ellipseBox.minY, Number.NEGATIVE_INFINITY)
+		max.set(ellipseBox.maxX, ellipseBox.maxY, Number.POSITIVE_INFINITY)
+		box3.set(min, max)
+
+		const enclosedPoints: number[] = []
+
+		for (const pointsEntity of world.query(
+			traits.Points,
+			traits.SelectToolInteractionLayer,
+			Not(selectionTraits.SelectionEnclosedPoints)
+		)) {
+			const geometry = pointsEntity.get(traits.BufferGeometry)
+
+			if (!geometry) return
+
+			const points = scene.getObjectByName(pointsEntity as unknown as string)
+
+			if (!points) {
+				return
+			}
+
+			geometry.boundsTree?.shapecast({
+				intersectsBounds: (box) => {
+					return box.intersectsBox(box3)
+				},
+
+				intersectsPoint: (point: Vector3) => {
+					for (let i = 0, j = 0, l = indices.length; i < l; i += 3, j += 1) {
+						const { minX, minY, maxX, maxY } = boxes[j]
+
+						min.set(minX, minY, Number.NEGATIVE_INFINITY)
+						max.set(maxX, maxY, Number.POSITIVE_INFINITY)
+						triangleBox.set(min, max)
+
+						if (triangleBox.containsPoint(point)) {
+							getTriangleFromIndex(i, indices, positions, triangle)
+
+							if (triangle.containsPoint(point)) {
+								enclosedPoints.push(point.x, point.y, point.z)
+							}
+						}
+					}
+				},
+				// intersectsPoint is not yet in typedef, this can be removed when it is added
+			} as ShapecastCallbacks)
+		}
+
+		const ellipseResultGeometry = createBufferGeometry(new Float32Array(enclosedPoints))
+
+		world.spawn(
+			traits.Name('Ellipse result'),
+			traits.BufferGeometry(ellipseResultGeometry),
+			traits.Color({ r: 1, g: 0, b: 0 }),
+			traits.RenderOrder(999),
+			traits.Material({ depthTest: false }),
+			traits.Points,
+			traits.Removable,
+			selectionTraits.SelectionEnclosedPoints,
+			selectionTraits.PointsCapturedBy(ellipse)
+		)
+	}
+
+	const onkeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Shift') {
+			dom.style.cursor = 'crosshair'
+		}
+	}
+
+	const onkeyup = (event: KeyboardEvent) => {
+		if (event.key === 'Shift') {
+			dom.style.removeProperty('cursor')
+		}
+	}
+
+	$effect(() => {
+		globalThis.addEventListener('keydown', onkeydown)
+		globalThis.addEventListener('keyup', onkeyup)
+		dom.addEventListener('pointerdown', onpointerdown)
+		dom.addEventListener('pointermove', onpointermove)
+		dom.addEventListener('pointerup', onpointerup)
+		dom.addEventListener('pointerleave', onpointerleave)
+
+		return () => {
+			globalThis.removeEventListener('keydown', onkeydown)
+			globalThis.removeEventListener('keyup', onkeyup)
+			dom.removeEventListener('pointerdown', onpointerdown)
+			dom.removeEventListener('pointermove', onpointermove)
+			dom.removeEventListener('pointerup', onpointerup)
+			dom.removeEventListener('pointerleave', onpointerleave)
+		}
+	})
+
+	const ellipses = useQuery(selectionTraits.Ellipse)
+
+	$effect(() => {
+		if (!controls.current) return
+
+		const currentControls = controls.current
+
+		const { minPolarAngle, maxPolarAngle } = currentControls
+
+		// Locks the camera to top down while this component is mounted
+		currentControls.polarAngle = 0
+		currentControls.minPolarAngle = 0
+		currentControls.maxPolarAngle = 0
+
+		return () => {
+			currentControls.minPolarAngle = minPolarAngle
+			currentControls.maxPolarAngle = maxPolarAngle
+		}
+	})
+
+	// On unmount, destroy all lasso related entities
+	$effect(() => {
+		return () => {
+			for (const entity of world.query(selectionTraits.SelectionEnclosedPoints)) {
+				if (world.has(entity)) {
+					entity.destroy()
+				}
+			}
+		}
+	})
+</script>
+
+{#if debug}
+	{#each ellipses.current as ellipse (ellipse)}
+		<Debug selection={ellipse} />
+	{/each}
+{/if}

package/dist/components/Selection/Ellipse.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    active?: boolean;
+    debug?: boolean;
+}
+declare const Ellipse: import("svelte").Component<Props, {}, "">;
+type Ellipse = ReturnType<typeof Ellipse>;
+export default Ellipse;

package/dist/components/{Lasso → Selection}/Lasso.svelte

@@ -4,20 +4,22 @@
 	import { useThrelte } from '@threlte/core'
 	import earcut from 'earcut'
 	import { Not } from 'koota'
-	import { Box3, Plane, Raycaster, Triangle, Vector2, Vector3 } from 'three'
+	import { Box3, Triangle, Vector3 } from 'three'
 
 	import { createBufferGeometry } from '../../attribute'
 	import { traits, useQuery, useWorld } from '../../ecs'
 	import { useCameraControls } from '../../hooks/useControls.svelte'
 
 	import Debug from './Debug.svelte'
-	import * as lassoTraits from './traits'
+	import * as selectionTraits from './traits'
+	import { getTriangleBoxesFromIndices, getTriangleFromIndex, raycast } from './utils'
 
 	interface Props {
+		active?: boolean
 		debug?: boolean
 	}
 
-	let { debug = false }: Props = $props()
+	let { active = false, debug = false }: Props = $props()
 
 	const world = useWorld()
 	const controls = useCameraControls()
@@ -29,44 +31,26 @@
 
 	const triangle = new Triangle()
 	const triangleBox = new Box3()
-	const a = new Vector3()
-	const b = new Vector3()
-	const c = new Vector3()
 
 	let frameScheduled = false
 	let drawing = false
 
-	const raycaster = new Raycaster()
-	const mouse = new Vector2()
-	const plane = new Plane(new Vector3(0, 0, 1), 0)
-	const point = new Vector3()
-
-	const raycast = (event: PointerEvent) => {
-		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)
-		return point
-	}
-
 	const onpointerdown = (event: PointerEvent) => {
-		if (!event.shiftKey) return
+		if (!event.shiftKey || !active) return
 
-		const { x, y } = raycast(event)
+		const { x, y } = raycast(event, camera.current)
 
 		drawing = true
 
 		world.spawn(
 			traits.LinePositions(new Float32Array([x, y, 0])),
 			traits.LineWidth(1.5),
+			traits.ScreenSpace,
 			traits.RenderOrder(999),
 			traits.Material({ depthTest: false }),
 			traits.Color({ r: 1, g: 0, b: 0 }),
-			lassoTraits.Box({ minX: x, minY: y, maxX: x, maxY: y }),
-			lassoTraits.Lasso
+			selectionTraits.Box({ minX: x, minY: y, maxX: x, maxY: y }),
+			selectionTraits.Lasso
 		)
 
 		if (controls.current) {
@@ -75,9 +59,9 @@
 	}
 
 	const onpointermove = (event: PointerEvent) => {
-		if (!drawing) return
+		if (!drawing || !active) return
 
-		let lasso = world.query(lassoTraits.Lasso).at(-1)
+		let lasso = world.query(selectionTraits.Lasso).at(-1)
 
 		if (!lasso) return
 
@@ -92,9 +76,9 @@
 		requestAnimationFrame(() => {
 			frameScheduled = false
 
-			const { x, y } = raycast(event)
+			const { x, y } = raycast(event, camera.current)
 			const positions = lasso.get(traits.LinePositions)
-			const box = lasso.get(lassoTraits.Box)
+			const box = lasso.get(selectionTraits.Box)
 
 			if (!positions || !box) return
 
@@ -110,22 +94,22 @@
 			if (y < box.minY) box.minY = y
 			else if (y > box.maxY) box.maxY = y
 
-			lasso.set(lassoTraits.Box, box)
+			lasso.set(selectionTraits.Box, box)
 		})
 	}
 
 	const onpointerleave = () => {
-		if (!drawing) return
+		if (!drawing || !active) return
 
 		onpointerup()
 	}
 
 	const onpointerup = () => {
-		if (!drawing) return
+		if (!drawing || !active) return
 
 		drawing = false
 
-		let lasso = world.query(lassoTraits.Lasso).at(-1)
+		let lasso = world.query(selectionTraits.Lasso).at(-1)
 
 		if (!lasso) return
 
@@ -149,31 +133,15 @@
 
 		const indices = earcut(positions, undefined, 3)
 		if (debug) {
-			lasso.add(lassoTraits.Indices(new Uint16Array(indices)))
+			lasso.add(selectionTraits.Indices(new Uint16Array(indices)))
 		}
 
-		const getTriangleFromIndex = (i: number, triangle: Triangle) => {
-			const stride = 3
-			const ia = indices[i + 0] * stride
-			const ib = indices[i + 1] * stride
-			const ic = indices[i + 2] * stride
-			a.set(positions[ia + 0], positions[ia + 1], positions[ia + 2])
-			b.set(positions[ib + 0], positions[ib + 1], positions[ib + 2])
-			c.set(positions[ic + 0], positions[ic + 1], positions[ic + 2])
-			triangle.set(a, b, c)
-		}
-
-		const boxes: lassoTraits.AABB[] = []
-		for (let i = 0, l = indices.length; i < l; i += 3) {
-			getTriangleFromIndex(i, triangle)
-			box3.setFromPoints([triangle.a, triangle.b, triangle.c])
-			boxes.push({ minX: box3.min.x, minY: box3.min.y, maxX: box3.max.x, maxY: box3.max.y })
-		}
+		const boxes: selectionTraits.AABB[] = getTriangleBoxesFromIndices(indices, positions)
 		if (debug) {
-			lasso.add(lassoTraits.Boxes(boxes))
+			lasso.add(selectionTraits.Boxes(boxes))
 		}
 
-		const lassoBox = lasso.get(lassoTraits.Box)
+		const lassoBox = lasso.get(selectionTraits.Box)
 
 		if (!lassoBox) return
 
@@ -183,7 +151,11 @@
 
 		const enclosedPoints: number[] = []
 
-		for (const pointsEntity of world.query(traits.Points, Not(lassoTraits.LassoEnclosedPoints))) {
+		for (const pointsEntity of world.query(
+			traits.Points,
+			traits.SelectToolInteractionLayer,
+			Not(selectionTraits.SelectionEnclosedPoints)
+		)) {
 			const geometry = pointsEntity.get(traits.BufferGeometry)
 
 			if (!geometry) return
@@ -208,7 +180,7 @@
 						triangleBox.set(min, max)
 
 						if (triangleBox.containsPoint(point)) {
-							getTriangleFromIndex(i, triangle)
+							getTriangleFromIndex(i, indices, positions, triangle)
 
 							if (triangle.containsPoint(point)) {
 								enclosedPoints.push(point.x, point.y, point.z)
@@ -230,8 +202,8 @@
 			traits.Material({ depthTest: false }),
 			traits.Points,
 			traits.Removable,
-			lassoTraits.LassoEnclosedPoints,
-			lassoTraits.PointsCapturedBy(lasso)
+			selectionTraits.SelectionEnclosedPoints,
+			selectionTraits.PointsCapturedBy(lasso)
 		)
 	}
 
@@ -265,7 +237,7 @@
 		}
 	})
 
-	const lassos = useQuery(lassoTraits.Lasso)
+	const lassos = useQuery(selectionTraits.Lasso)
 
 	$effect(() => {
 		if (!controls.current) return
@@ -288,7 +260,7 @@
 	// On unmount, destroy all lasso related entities
 	$effect(() => {
 		return () => {
-			for (const entity of world.query(lassoTraits.LassoEnclosedPoints)) {
+			for (const entity of world.query(selectionTraits.SelectionEnclosedPoints)) {
 				if (world.has(entity)) {
 					entity.destroy()
 				}
@@ -299,6 +271,6 @@
 
 {#if debug}
 	{#each lassos.current as lasso (lasso)}
-		<Debug {lasso} />
+		<Debug selection={lasso} />
 	{/each}
 {/if}

package/dist/components/{Lasso → Selection}/Lasso.svelte.d.ts

@@ -1,4 +1,5 @@
 interface Props {
+    active?: boolean;
     debug?: boolean;
 }
 declare const Lasso: import("svelte").Component<Props, {}, "">;

package/dist/components/Selection/Tool.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	import { useThrelte } from '@threlte/core'
+	import { Portal } from '@threlte/extras'
+	import { ElementRect } from 'runed'
+
+	import DashboardButton from '../overlay/dashboard/Button.svelte'
+	import { useSettings } from '../../hooks/useSettings.svelte'
+
+	import Popover from '../overlay/Popover.svelte'
+	import ToggleGroup from '../overlay/ToggleGroup.svelte'
+	import Ellipse from './Ellipse.svelte'
+	import Lasso from './Lasso.svelte'
+	import { provideSelectionPlugin } from './useSelectionPlugin.svelte'
+
+	interface Props {
+		/** Whether to auto-enable lasso mode when the component mounts */
+		enabled?: boolean
+		children?: Snippet
+	}
+
+	type SelectionType = 'lasso' | 'ellipse'
+
+	let { enabled = false, children }: Props = $props()
+
+	const { dom } = useThrelte()
+	const settings = useSettings()
+	const isSelectionMode = $derived(settings.current.interactionMode === 'select')
+
+	provideSelectionPlugin()
+	let selectionType = $state<SelectionType>('lasso')
+
+	$effect(() => {
+		if (isSelectionMode) {
+			settings.current.cameraMode = 'orthographic'
+		}
+	})
+
+	$effect(() => {
+		if (enabled) {
+			settings.current.interactionMode = 'select'
+		}
+	})
+
+	const rect = new ElementRect(() => dom)
+</script>
+
+<Portal id="dashboard">
+	<fieldset>
+		<div class="flex">
+			<DashboardButton
+				active={isSelectionMode}
+				icon="selection-drag"
+				description="{isSelectionMode ? 'Disable' : 'Enable'} selection"
+				onclick={() => {
+					settings.current.interactionMode = isSelectionMode ? 'navigate' : 'select'
+				}}
+			/>
+			<Popover>
+				{#snippet trigger(triggerProps)}
+					<DashboardButton
+						{...triggerProps}
+						active={isSelectionMode}
+						class="border-l-0"
+						icon="filter-sliders"
+						description="Selection settings"
+					/>
+				{/snippet}
+
+				<div class="border-medium m-2 border bg-white p-2 text-xs">
+					<div class="flex items-center gap-2">
+						Selection type
+						<ToggleGroup
+							options={[
+								{ label: 'Lasso', selected: selectionType === 'lasso' },
+								{ label: 'Ellipse', selected: selectionType === 'ellipse' },
+							]}
+							onSelect={(details) => {
+								selectionType = details.includes('Lasso') ? 'lasso' : 'ellipse'
+							}}
+						/>
+					</div>
+				</div>
+			</Popover>
+		</div>
+	</fieldset>
+</Portal>
+
+{#if isSelectionMode && rect.height > 0 && rect.width > 0}
+	<Ellipse active={selectionType === 'ellipse'} />
+	<Lasso active={selectionType === 'lasso'} />
+	{@render children?.()}
+{/if}

package/dist/components/{Lasso → Selection}/Tool.svelte.d.ts

@@ -1,8 +1,8 @@
+import type { Snippet } from 'svelte';
 interface Props {
     /** Whether to auto-enable lasso mode when the component mounts */
     enabled?: boolean;
-    /** Fires when the user has committed to a lasso selection */
-    onSelection: (pcd: Blob) => void;
+    children?: Snippet;
 }
 declare const Tool: import("svelte").Component<Props, {}, "">;
 type Tool = ReturnType<typeof Tool>;

package/dist/components/{Lasso → Selection}/traits.d.ts

@@ -1,8 +1,9 @@
 export declare const Lasso: import("koota").Trait<() => boolean>;
-export declare const LassoEnclosedPoints: import("koota").Trait<() => boolean>;
+export declare const Ellipse: import("koota").Trait<() => boolean>;
+export declare const SelectionEnclosedPoints: import("koota").Trait<() => boolean>;
 /**
  * Captured points are removable, so we want to also destroy
- * the source lasso every time a user deletes one.
+ * the source selection every time a user deletes one.
  */
 export declare const PointsCapturedBy: import("koota").Relation<import("koota").Trait<Record<string, never>>>;
 export interface AABB {
@@ -11,11 +12,19 @@ export interface AABB {
     maxX: number;
     maxY: number;
 }
+export interface Point {
+    x: number;
+    y: number;
+}
 export declare const Box: import("koota").Trait<{
     minX: number;
     minY: number;
     maxX: number;
     maxY: number;
 }>;
+export declare const StartPoint: import("koota").Trait<{
+    x: number;
+    y: number;
+}>;
 export declare const Indices: import("koota").Trait<() => Uint16Array<ArrayBuffer>>;
 export declare const Boxes: import("koota").Trait<() => AABB[]>;

package/dist/components/{Lasso → Selection}/traits.js

@@ -1,9 +1,10 @@
 import { relation, trait } from 'koota';
 export const Lasso = trait(() => true);
-export const LassoEnclosedPoints = trait(() => true);
+export const Ellipse = trait(() => true);
+export const SelectionEnclosedPoints = trait(() => true);
 /**
  * Captured points are removable, so we want to also destroy
- * the source lasso every time a user deletes one.
+ * the source selection every time a user deletes one.
  */
 export const PointsCapturedBy = relation({ autoDestroy: 'target' });
 export const Box = trait({
@@ -12,5 +13,9 @@ export const Box = trait({
     maxX: 0,
     maxY: 0,
 });
+export const StartPoint = trait({
+    x: 0,
+    y: 0,
+});
 export const Indices = trait(() => new Uint16Array());
 export const Boxes = trait(() => []);

package/dist/components/Selection/useSelectionPlugin.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { QueryResult, Trait } from 'koota';
+interface SelectionPluginContext {
+    current: QueryResult<[Trait<() => boolean>]>;
+    clearSelections: () => void;
+}
+export declare const provideSelectionPlugin: () => SelectionPluginContext;
+export declare const useSelectionPlugin: () => SelectionPluginContext;
+export {};