@viamrobotics/test-widgets 0.1.8 → 0.1.9

package/dist/components/widgets/vision-service/detection.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
 	import { useThrelte } from '@threlte/core'
-	import { useInteractivity } from '@threlte/extras'
-	import { onMount } from 'svelte'
-	import { Vector2 } from 'three'
 	import { Container, Text } from 'threlte-uikit'
 
 	import { lightTextColors } from './color'
@@ -17,19 +14,6 @@
 
 	const { detection, factor = 0 }: Props = $props()
 
-	const normalizedDeviceCoordsToPixel = (
-		ndcCoords: Vector2,
-		canvasWidth: number,
-		canvasHeight: number
-	) => {
-		const screenX = (ndcCoords.x + 1) / 2
-		const screenY = (ndcCoords.y + 1) / 2
-		const pixelX = Math.round(screenX * canvasWidth)
-		const pixelY = Math.round((1 - screenY) * canvasHeight)
-		return new Vector2(pixelX, pixelY)
-	}
-
-	const { pointer } = useInteractivity()
 	const context = useDetections()
 
 	const factoredxMin = $derived(Number(detection.xMin) * factor)
@@ -37,46 +21,32 @@
 	const factoredyMin = $derived(Number(detection.yMin) * factor)
 	const factoredyMax = $derived(Number(detection.yMax) * factor)
 
-	/**
-	 * Check preexisting mouse coords for hover state
-	 */
-	$effect.pre(() => {
-		const pixelCoords = normalizedDeviceCoordsToPixel($pointer, $size.width, $size.height)
-
-		if (
-			factoredxMin < pixelCoords.x &&
-			factoredxMax > pixelCoords.x &&
-			factoredyMin < pixelCoords.y &&
-			factoredyMax > pixelCoords.y
-		) {
-			context.hovered.add(detection.id)
-		} else {
-			context.hovered.delete(detection.id)
-		}
-	})
-
-	const hovering = $derived(context.hovered.has(detection.id))
+	let hovering = $state(false)
 
 	// These are ballparking, but seem good enough for nearly all cases
 	const isDetectionNearTop = $derived(factoredyMin < 30)
 	const isDetectionNearRight = $derived(factoredxMin > $size.width * 0.66)
-
-	onMount(() => {
-		return () => {
-			context.hovered.delete(detection.id)
-		}
-	})
 </script>
 
 <Container
 	positionType="absolute"
 	positionLeft={factoredxMin}
 	positionTop={factoredyMin}
-	borderColor={hovering ? detection.color : '#aaa'}
+	borderColor="#aaa"
+	hover={{
+		borderColor: detection.color,
+	}}
 	borderWidth={2}
 	width={factoredxMax - factoredxMin}
 	height={factoredyMax - factoredyMin}
-	onpointerleave={() => context.hovered.delete(detection.id)}
+	onpointerenter={() => {
+		context.hovered.add(detection.id)
+		hovering = true
+	}}
+	onpointerleave={() => {
+		context.hovered.delete(detection.id)
+		hovering = false
+	}}
 >
 	{#if hovering}
 		<Text

package/dist/components/widgets/vision-service/image.svelte

@@ -16,7 +16,7 @@
 	interface Props {
 		data?: {
 			detections: Detection[]
-			image: ({ image: Uint8Array } & Exclude<cameraApi.Image, 'image'>) | undefined
+			image: ({ image: Uint8Array } & Omit<cameraApi.Image, 'image'>) | undefined
 			classifications: Classification[]
 		}
 		detectionsSupported: boolean
@@ -62,7 +62,9 @@
 	provideFontFamilies({
 		publicSans: {
 			// This must remain `/static/*` while the frontend directory still exist
+			light: '/static/fonts/public-sans.json',
 			medium: '/static/fonts/public-sans.json',
+			'extra-light': '/static/fonts/public-sans.json',
 		},
 	})
 
@@ -108,7 +110,7 @@
 		</div>
 	{:else}
 		<div
-			class="relative max-h-full min-h-0 max-w-full"
+			class="border-light relative max-h-full min-h-0 max-w-full border"
 			style:width={`${size.width.toString()}px`}
 			style:height={`${size.height.toString()}px`}
 		>
@@ -117,11 +119,13 @@
 			>
 				{fps.current.toFixed(1)}fps
 			</div>
+			<img
+				class="absolute top-0 left-0"
+				alt=""
+				{src}
+			/>
 			<Canvas>
-				<Scene
-					{src}
-					factor={size.factor}
-				/>
+				<Scene factor={size.factor} />
 			</Canvas>
 		</div>
 		<div

package/dist/components/widgets/vision-service/image.svelte.d.ts

@@ -4,7 +4,7 @@ interface Props {
         detections: Detection[];
         image: ({
             image: Uint8Array;
-        } & Exclude<cameraApi.Image, 'image'>) | undefined;
+        } & Omit<cameraApi.Image, 'image'>) | undefined;
         classifications: Classification[];
     };
     detectionsSupported: boolean;

package/dist/components/widgets/vision-service/scene.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
 	import { interactivity } from '@threlte/extras'
-	import { Fullscreen, Image } from 'threlte-uikit'
+	import { Fullscreen } from 'threlte-uikit'
 
 	import { useDetections } from './context.svelte'
 	import Detection from './detection.svelte'
 
 	interface Props {
-		src: string
 		factor?: number
 	}
 
-	const { src, factor = 0 }: Props = $props()
+	const { factor = 0 }: Props = $props()
 
 	const context = useDetections()
 
@@ -22,24 +21,7 @@
 	makeDefault
 	position={[0, 0, 1]}
 >
-	<Fullscreen
-		positionType="relative"
-		width="100%"
-		height="100%"
-	>
-		<Image
-			positionType="absolute"
-			width="100%"
-			height="100%"
-			{src}
-		/>
-	</Fullscreen>
-
-	<Fullscreen
-		positionType="relative"
-		width="100%"
-		height="100%"
-	>
+	<Fullscreen>
 		{#each context.current as detection (detection.id)}
 			<Detection
 				{detection}

package/dist/components/widgets/vision-service/scene.svelte.d.ts

@@ -1,5 +1,4 @@
 interface Props {
-    src: string;
     factor?: number;
 }
 declare const Scene: import("svelte").Component<Props, {}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "license": "Apache-2.0",
   "type": "module",
   "files": [