@viamrobotics/test-widgets 0.0.1 → 0.1.2

package/dist/components/image-annotations/annotation-edit-utils.js

@@ -1,183 +0,0 @@
-import { BoxModifier, ResizeHandleLocation, } from './bounding-box-types';
-export const getBoundingRect = (original, dragDistance, containerWidth, containerHeight, corner) => {
-    let transformation = BoxModifier.Scaled;
-    if (dragDistance) {
-        transformation = corner ? BoxModifier.Resized : BoxModifier.Translated;
-    }
-    // scale annotation size to container
-    const scaledCopy = { ...original };
-    scaledCopy.xMinNormalized *= containerWidth;
-    scaledCopy.xMaxNormalized *= containerWidth;
-    scaledCopy.yMinNormalized *= containerHeight;
-    scaledCopy.yMaxNormalized *= containerHeight;
-    if (transformation === BoxModifier.Scaled || !dragDistance) {
-        return scaledCopy;
-    }
-    // apply transformation
-    const unboundedRect = transformation === BoxModifier.Resized && corner
-        ? getResizedRect(scaledCopy, dragDistance, corner)
-        : getTranslatedRect(scaledCopy, dragDistance, containerWidth, containerHeight);
-    // ensure transformation does not exceed boundaries of container
-    return {
-        xMinNormalized: Math.max(unboundedRect.xMinNormalized, 0),
-        xMaxNormalized: Math.min(unboundedRect.xMaxNormalized, containerWidth),
-        yMinNormalized: Math.max(unboundedRect.yMinNormalized, 0),
-        yMaxNormalized: Math.min(unboundedRect.yMaxNormalized, containerHeight),
-    };
-};
-const getTranslatedRect = (original, dragDistance, containerWidth, containerHeight) => {
-    const modifiedRect = {
-        xMinNormalized: original.xMinNormalized + dragDistance.x,
-        xMaxNormalized: original.xMaxNormalized + dragDistance.x,
-        yMinNormalized: original.yMinNormalized + dragDistance.y,
-        yMaxNormalized: original.yMaxNormalized + dragDistance.y,
-    };
-    // maintains box size if user attempts to drag a box beyond the bounds of the image
-    if (modifiedRect.xMinNormalized <= 0) {
-        modifiedRect.xMaxNormalized -= modifiedRect.xMinNormalized;
-        modifiedRect.xMinNormalized = 0;
-    }
-    if (modifiedRect.yMinNormalized <= 0) {
-        modifiedRect.yMaxNormalized -= modifiedRect.yMinNormalized;
-        modifiedRect.yMinNormalized = 0;
-    }
-    if (modifiedRect.xMaxNormalized >= containerWidth) {
-        modifiedRect.xMinNormalized =
-            containerWidth - (modifiedRect.xMaxNormalized - modifiedRect.xMinNormalized);
-        modifiedRect.xMaxNormalized = containerWidth;
-    }
-    if (modifiedRect.yMaxNormalized >= containerHeight) {
-        modifiedRect.yMinNormalized =
-            containerHeight - (modifiedRect.yMaxNormalized - modifiedRect.yMinNormalized);
-        modifiedRect.yMaxNormalized = containerHeight;
-    }
-    return modifiedRect;
-};
-const getResizedRect = (original, dragDistance, corner) => {
-    let variableX = undefined;
-    let variableY = undefined;
-    switch (corner) {
-        case ResizeHandleLocation.T: {
-            variableY = 'yMinNormalized';
-            break;
-        }
-        case ResizeHandleLocation.R: {
-            variableX = 'xMaxNormalized';
-            break;
-        }
-        case ResizeHandleLocation.B: {
-            variableY = 'yMaxNormalized';
-            break;
-        }
-        case ResizeHandleLocation.L: {
-            variableX = 'xMinNormalized';
-            break;
-        }
-        case ResizeHandleLocation.TL: {
-            variableX = 'xMinNormalized';
-            variableY = 'yMinNormalized';
-            break;
-        }
-        case ResizeHandleLocation.TR: {
-            variableX = 'xMaxNormalized';
-            variableY = 'yMinNormalized';
-            break;
-        }
-        case ResizeHandleLocation.BL: {
-            variableX = 'xMinNormalized';
-            variableY = 'yMaxNormalized';
-            break;
-        }
-        case ResizeHandleLocation.BR: {
-            variableX = 'xMaxNormalized';
-            variableY = 'yMaxNormalized';
-            break;
-        }
-    }
-    const modifiedRect = {
-        ...original,
-    };
-    if (variableX) {
-        modifiedRect[variableX] = original[variableX] + dragDistance.x;
-    }
-    if (variableY) {
-        modifiedRect[variableY] = original[variableY] + dragDistance.y;
-    }
-    if (modifiedRect.xMinNormalized > modifiedRect.xMaxNormalized) {
-        const temp = modifiedRect.xMaxNormalized;
-        modifiedRect.xMaxNormalized = modifiedRect.xMinNormalized;
-        modifiedRect.xMinNormalized = temp;
-    }
-    if (modifiedRect.yMinNormalized > modifiedRect.yMaxNormalized) {
-        const temp = modifiedRect.yMaxNormalized;
-        modifiedRect.yMaxNormalized = modifiedRect.yMinNormalized;
-        modifiedRect.yMinNormalized = temp;
-    }
-    return modifiedRect;
-};
-export const shouldDisplayBoxFill = (annotationID, inEditMode, focusedID, editTargetID, hoveredAnnotations) => {
-    return (editTargetID === annotationID ||
-        ((focusedID ? focusedID === annotationID : Boolean(hoveredAnnotations[annotationID])) &&
-            !inEditMode));
-};
-export const createNormalizedTempBox = (label, size, firstPoint, finalPoint) => {
-    // coordinates start in center, must translate all coordinates by one quadrant (i.e. half the height and width of container)
-    const xMinNormalized = Math.min(firstPoint.x, finalPoint.x) / size.width;
-    const xMaxNormalized = Math.max(firstPoint.x, finalPoint.x) / size.width;
-    const yMinNormalized = Math.min(firstPoint.y, finalPoint.y) / size.height;
-    const yMaxNormalized = Math.max(firstPoint.y, finalPoint.y) / size.height;
-    return xMaxNormalized - xMinNormalized > 0.01 && yMaxNormalized - yMinNormalized > 0.01
-        ? {
-            // if normalized values exceed bounds of image, lock to edge by setting to min/max value (0 and 1 respectively)
-            xMinNormalized: Math.max(0, xMinNormalized),
-            xMaxNormalized: Math.min(1, xMaxNormalized),
-            yMinNormalized: Math.max(0, yMinNormalized),
-            yMaxNormalized: Math.min(1, yMaxNormalized),
-            label,
-            id: '__NEW_TEMP_BBOX_ID__',
-        }
-        : undefined;
-};
-export const getModifyKeyForOS = () => {
-    const isMac = navigator.userAgent.includes('Mac');
-    return isMac ? 'metaKey' : 'ctrlKey';
-};
-export const calculatePastedBox = (mousePosition, copyTarget, containerWidth, containerHeight) => {
-    const boxWidth = copyTarget.xMaxNormalized - copyTarget.xMinNormalized;
-    const boxHeight = copyTarget.yMaxNormalized - copyTarget.yMinNormalized;
-    // creates box centered on current mouse position
-    const tempBox = {
-        xMin: mousePosition.x / containerWidth - boxWidth / 2,
-        xMax: mousePosition.x / containerWidth + boxWidth / 2,
-        yMin: mousePosition.y / containerHeight - boxHeight / 2,
-        yMax: mousePosition.y / containerHeight + boxHeight / 2,
-    };
-    /**
-     * if side exceeds boundary of image, set exceeding side equal to boundary
-     * then translate parallel side by the same distance
-     */
-    if (tempBox.xMin < 0) {
-        tempBox.xMax -= tempBox.xMin;
-        tempBox.xMin = 0;
-    }
-    if (tempBox.yMin < 0) {
-        tempBox.yMax -= tempBox.yMin;
-        tempBox.yMin = 0;
-    }
-    if (tempBox.xMax > 1) {
-        tempBox.xMin -= tempBox.xMax - 1;
-        tempBox.xMax = 1;
-    }
-    if (tempBox.yMax > 1) {
-        tempBox.yMin -= tempBox.yMax - 1;
-        tempBox.yMax = 1;
-    }
-    return {
-        id: '',
-        label: copyTarget.label,
-        xMinNormalized: tempBox.xMin,
-        xMaxNormalized: tempBox.xMax,
-        yMinNormalized: tempBox.yMin,
-        yMaxNormalized: tempBox.yMax,
-    };
-};

package/dist/components/image-annotations/bounding-box-labeler.svelte

@@ -1,521 +0,0 @@
-<script lang="ts">
-	import { resize } from '@svelte-put/resize'
-	import { clickOutside, Progress } from '@viamrobotics/prime-core'
-	import { onMount, untrack } from 'svelte'
-
-	import { getImageSize } from '../widgets/vision-service/get-image-size'
-
-	import type {
-		BoundingBox as BoundingBoxData,
-		BoundingCoords,
-		Coordinates,
-		ResizeHandleLocation,
-	} from './bounding-box-types'
-
-	import {
-		calculatePastedBox,
-		createNormalizedTempBox,
-		getBoundingRect,
-		getModifyKeyForOS,
-	} from './annotation-edit-utils'
-	import BoundingBox from './bounding-box.svelte'
-	import { getImageSize as getImageSizeDynamic, type Size } from './get-image-size'
-	import {
-		INVERT_X_FLOAT_DISTANCE,
-		INVERT_Y_FLOAT_DISTANCE,
-		ZOOM_MAX,
-		ZOOM_MIN,
-	} from './labeler-constants'
-	import { ResizeHandleClassMap } from './resize-handle-props'
-
-	const MODIFY_KEY = getModifyKeyForOS()
-
-	interface Props {
-		/** whether to allow drawing of new bounding boxes */
-		allowDrawing: boolean
-		/** inference candidates displayed using readonly bounding boxes */
-		candidateBoundingBoxes?: BoundingBoxData[]
-		/** currently selected box */
-		editTarget?: BoundingBoxData | undefined
-		/** map of annotations displayed in their hovered states */
-		hoveredAnnotations: Record<string, boolean>
-		/** whether image is loading */
-		imageLoading: boolean
-		/** URI of image */
-		imageSrc: string
-		/** used to set the max size of the display container, used for bounding boxes */
-		maxSize?: { maxHeight: number; maxWidth: number }
-		/** whether to allow any interactivity (i.e. drawing, editing, deleting) */
-		readonly?: boolean
-		/** bounding boxes saved on the image */
-		savedBoundingBoxes: BoundingBoxData[]
-		/** user selected label to apply to drawn boxes */
-		selectedLabel?: string
-		/** whether to display candidates and saved boxes or just candidates */
-		showSavedBoundingBoxes?: boolean
-		/** how much image is zoomed */
-		zoom?: number
-		/** accept the selected inference candidate box */
-		acceptCandidate?: (id: string) => void
-		/** saves drawn bounding box to image */
-		createBoundingBox?: (newBox: BoundingBoxData) => void
-		/** deletes saved bounding box */
-		deleteBoundingBox?: (annotationID: string, targetLabel: string) => void
-		/** save changes to existing box */
-		editBoundingBox?: (id: string, newBox: BoundingBoxData) => void
-		/** invoked when displayed image loaded */
-		onImageLoad?: VoidFunction
-		/** reject the selected inference candidate box */
-		rejectCandidate?: (id: string) => void
-		/** set which box is being edited */
-		setEditTarget?: (target: BoundingBoxData | undefined) => void
-		/** used to change which boxes are hovered  */
-		setHoveredAnnotations?: (newHovered: Record<string, boolean>) => void
-		/** sets zoom */
-		setZoom?: (value: number) => void
-	}
-
-	const {
-		allowDrawing,
-		candidateBoundingBoxes,
-		editTarget,
-		hoveredAnnotations,
-		imageLoading,
-		imageSrc,
-		maxSize,
-		readonly = false,
-		savedBoundingBoxes,
-		selectedLabel,
-		showSavedBoundingBoxes = true,
-		zoom = 1,
-		acceptCandidate,
-		createBoundingBox,
-		deleteBoundingBox,
-		editBoundingBox,
-		onImageLoad,
-		rejectCandidate,
-		setEditTarget,
-		setHoveredAnnotations,
-		setZoom,
-	}: Props = $props()
-
-	let dataURI = $state<string>()
-	const img = $state(document.createElement('img'))
-	let container = $state<HTMLElement>()
-	let size = $state<Size>()
-	let firstClickedPoint = $state<Coordinates>()
-	let normalizedDrawnBox = $state<BoundingBoxData>()
-	let drawingContainer = $state<HTMLDivElement>()
-	let floatingCoords = $state<HTMLDivElement>()
-	let currentMousePosition = $state<Coordinates>({ x: 0, y: 0 })
-	let activeResizeHandle = $state<ResizeHandleLocation>()
-	let inEditMode = $state(false)
-	let showMouseCoords = $state(false)
-	let copiedBox = $state<BoundingBoxData>()
-	let allowPaste = $state(true)
-
-	const dragDistance = $derived(
-		firstClickedPoint
-			? {
-					x: currentMousePosition.x - firstClickedPoint.x,
-					y: currentMousePosition.y - firstClickedPoint.y,
-				}
-			: undefined
-	)
-
-	const getOffset = (el: HTMLElement | undefined) => {
-		if (el) {
-			const { height, width } = el.getBoundingClientRect()
-			return { x: width, y: height }
-		}
-		return undefined
-	}
-
-	let zoomOffset = $derived(getOffset(drawingContainer))
-
-	const setSize = () => {
-		if (maxSize) {
-			size = getImageSize(img, maxSize)
-		} else if (container) {
-			size = getImageSizeDynamic(img, container)
-		}
-
-		if (drawingContainer) {
-			zoomOffset = getOffset(drawingContainer)
-			drawingContainer?.scrollIntoView()
-		}
-	}
-
-	const backgroundImageLoad = () => {
-		setSize()
-
-		// gets image binary from img element
-		const cvs = document.createElement('canvas')
-		cvs.width = img.width
-		cvs.height = img.height
-		cvs.getContext('2d')?.drawImage(img, 0, 0)
-		dataURI = cvs.toDataURL()
-	}
-
-	const resetDrawing = (clearTarget: boolean | undefined = true) => {
-		if (clearTarget) {
-			setEditTarget?.(undefined)
-		}
-		firstClickedPoint = undefined
-		normalizedDrawnBox = undefined
-		activeResizeHandle = undefined
-		inEditMode = false
-	}
-
-	onMount(() => {
-		img.addEventListener('load', backgroundImageLoad)
-		globalThis.addEventListener('mousemove', handleOverlayMove)
-		globalThis.addEventListener('mouseup', handleMouseUp)
-		globalThis.addEventListener('keydown', handleKeyDown)
-		return () => {
-			img.removeEventListener('load', backgroundImageLoad)
-			globalThis.removeEventListener('mouseup', handleMouseUp)
-			globalThis.removeEventListener('keydown', handleKeyDown)
-			globalThis.removeEventListener('mousemove', handleOverlayMove)
-		}
-	})
-
-	$effect.pre(() => {
-		if (imageSrc) {
-			img.src = imageSrc
-		}
-		img.crossOrigin = 'anonymous'
-	})
-
-	$effect.pre(() => {
-		void container
-		setSize()
-	})
-
-	$effect.pre(() => {
-		if (allowDrawing) {
-			setHoveredAnnotations?.({})
-		} else {
-			resetDrawing()
-		}
-	})
-
-	const getRelativeMousePosition = (event: MouseEvent): Coordinates => {
-		if (drawingContainer) {
-			const boundingRect = drawingContainer.getBoundingClientRect()
-			const { clientX, clientY } = event
-
-			const { left, top } = boundingRect
-			const x = (clientX - left) / zoom
-			const y = (clientY - top) / zoom
-
-			return { x, y }
-		}
-
-		return { x: 0, y: 0 }
-	}
-
-	const sendEditAnnotationRequest = (annotation: BoundingBoxData) => {
-		editBoundingBox?.(annotation.id, annotation)
-	}
-
-	const findAndSetTarget = (id: string | undefined) => {
-		setEditTarget?.(savedBoundingBoxes.find((ann) => ann.id === id))
-	}
-
-	const handleMouseDown = (event: MouseEvent) => {
-		if (readonly) {
-			return
-		}
-
-		if (editTarget) {
-			setEditTarget?.(undefined)
-		} else if (allowDrawing) {
-			firstClickedPoint = getRelativeMousePosition(event)
-		}
-	}
-
-	const handleMouseUp = () => {
-		if (readonly) {
-			return
-		}
-
-		if (editTarget && inEditMode && size) {
-			if (dragDistance) {
-				// in edit mode
-				const boundingRect = getBoundingRect(
-					editTarget,
-					dragDistance,
-					size.width,
-					size.height,
-					activeResizeHandle
-				)
-
-				const normalized: BoundingCoords = {
-					xMinNormalized: boundingRect.xMinNormalized / size.width,
-					xMaxNormalized: boundingRect.xMaxNormalized / size.width,
-					yMinNormalized: boundingRect.yMinNormalized / size.height,
-					yMaxNormalized: boundingRect.yMaxNormalized / size.height,
-				}
-
-				const editedBox = {
-					...editTarget,
-					...normalized,
-				}
-
-				resetDrawing(false)
-				sendEditAnnotationRequest(editedBox)
-			} else {
-				resetDrawing(false)
-			}
-		} else {
-			// in create mode
-			if (normalizedDrawnBox) {
-				createBoundingBox?.(normalizedDrawnBox)
-			}
-			resetDrawing(true)
-		}
-	}
-
-	// show coordinates and allow paste only when over image
-	const handleMove = () => {
-		if (readonly) {
-			return
-		}
-
-		showMouseCoords = true
-		allowPaste = true
-	}
-
-	// track mouse movement over entire screen
-	const handleOverlayMove = (event: MouseEvent) => {
-		const coords = getRelativeMousePosition(event)
-
-		currentMousePosition = coords
-
-		if (firstClickedPoint && size && !editTarget) {
-			// prevent mouse from highlighting when dragging over text outside of image, but only if a point on the image has been clicked first
-			event.preventDefault()
-			normalizedDrawnBox = createNormalizedTempBox(
-				selectedLabel ?? '',
-				size,
-				firstClickedPoint,
-				coords
-			)
-		}
-	}
-
-	const onMouseDownAnnotation = (
-		event: MouseEvent,
-		annotationID: string,
-		corner?: ResizeHandleLocation
-	) => {
-		event.preventDefault()
-		if (readonly) {
-			return
-		}
-
-		if (annotationID !== editTarget?.id) {
-			findAndSetTarget(annotationID)
-		}
-		inEditMode = true
-		firstClickedPoint = getRelativeMousePosition(event)
-		activeResizeHandle = corner
-	}
-
-	// sorting by distance from top so that index can represent a top-to-bottom tab order
-	const sortedCandidatesByTop = $derived(
-		candidateBoundingBoxes
-			? candidateBoundingBoxes.toSorted((boxA, boxB) => boxA.yMinNormalized - boxB.yMinNormalized)
-			: []
-	)
-
-	const addToHovered = (id: string) => {
-		setHoveredAnnotations?.({ ...hoveredAnnotations, [id]: true })
-	}
-
-	const removeFromHovered = (id: string) => {
-		setHoveredAnnotations?.({ ...hoveredAnnotations, [id]: false })
-	}
-
-	const handleWheel = (event: WheelEvent) => {
-		if (event.metaKey && zoom <= ZOOM_MAX && zoom >= ZOOM_MIN) {
-			showMouseCoords = false
-			const { deltaY } = event
-			event.preventDefault()
-			const newZoom = zoom + deltaY / 100
-
-			if (newZoom > ZOOM_MAX) {
-				setZoom?.(ZOOM_MAX)
-				return
-			}
-
-			if (newZoom < ZOOM_MIN) {
-				setZoom?.(ZOOM_MIN)
-				return
-			}
-
-			setZoom?.(newZoom)
-		}
-	}
-
-	$effect(() => {
-		void zoom
-		untrack(() => {
-			container?.scrollTo({
-				left: currentMousePosition.x * (zoom - 1),
-				top: currentMousePosition.y * (zoom - 1),
-				behavior: 'instant',
-			})
-		})
-	})
-
-	const handleLeave = () => {
-		showMouseCoords = false
-		allowPaste = false
-	}
-
-	const handleKeyDown = (event: KeyboardEvent) => {
-		if (event[MODIFY_KEY] && event.code === 'KeyV' && size && copiedBox && allowPaste) {
-			const pastedBox = calculatePastedBox(currentMousePosition, copiedBox, size.width, size.height)
-
-			createBoundingBox?.(pastedBox)
-		}
-	}
-
-	const copyBoundingBox = () => {
-		copiedBox = editTarget
-	}
-
-	const floatingHeight = $derived(floatingCoords?.getBoundingClientRect().height ?? 0)
-</script>
-
-<div
-	class={[
-		'flex h-full min-h-0 w-full min-w-0 grow flex-col items-center justify-center',
-		{ 'overflow-x-auto overflow-y-auto': !maxSize },
-	]}
-	bind:this={container}
-	use:resize
-	onwheel={handleWheel}
-	onresized={setSize}
-	style:cursor={activeResizeHandle ? ResizeHandleClassMap[activeResizeHandle].cursor : undefined}
->
-	{#if size && dataURI}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class="relative h-fit w-fit"
-			style:left={zoom > 1 && zoomOffset ? `${(zoomOffset.x * (zoom - 1)) / 2}px` : ''}
-			style:top={zoom > 1 && zoomOffset ? `${(zoomOffset.y * (zoom - 1)) / 2}px` : ''}
-			bind:this={drawingContainer}
-			onmousedown={handleMouseDown}
-			onmousemove={handleMove}
-			onmouseleave={handleLeave}
-			use:clickOutside={() => resetDrawing()}
-			style:scale={zoom}
-		>
-			<div
-				bind:this={floatingCoords}
-				class={[
-					'z-max absolute origin-bottom-left rounded-md bg-black px-1.5',
-					{
-						hidden: !showMouseCoords,
-						'origin-bottom-left': currentMousePosition.y > INVERT_Y_FLOAT_DISTANCE / zoom,
-						'origin-top-left': currentMousePosition.y <= INVERT_Y_FLOAT_DISTANCE / zoom,
-					},
-				]}
-				style:left={`${currentMousePosition.x + (size.width - currentMousePosition.x < INVERT_X_FLOAT_DISTANCE / zoom ? -95 : 4) / zoom}px`}
-				style:top={`${currentMousePosition.y + (currentMousePosition.y > INVERT_Y_FLOAT_DISTANCE / zoom ? -1 * (floatingHeight + 5 / zoom) : 5 / zoom)}px`}
-				style:scale={1 / zoom}
-			>
-				<span class="font-roboto-mono text-xs whitespace-nowrap text-white"
-					>{`{${Math.round(currentMousePosition.x)},${Math.round(currentMousePosition.y)}}`}</span
-				>
-			</div>
-			<img
-				class={['z-0 select-none', { invisible: imageLoading }]}
-				height={size.height}
-				width={size.width}
-				src={dataURI}
-				alt={imageSrc}
-				crossorigin="anonymous"
-				onload={onImageLoad}
-			/>
-			{#if imageLoading}
-				<div class="absolute top-0 flex h-full w-full items-center justify-center">
-					<Progress size="large" />
-				</div>
-			{:else}
-				<div
-					style={`height: ${size.height}px; width: ${size.width}px;`}
-					class="absolute top-0 z-10 overflow-hidden"
-				>
-					{#if normalizedDrawnBox}
-						<BoundingBox
-							active={true}
-							annotation={normalizedDrawnBox}
-							allowInteractivity={false}
-							containerHeight={size.height}
-							containerWidth={size.width}
-							readonly={true}
-							selected={false}
-							isPending={false}
-							{zoom}
-							onEscapePress={resetDrawing}
-						/>
-					{/if}
-					{#each sortedCandidatesByTop as candidate, index (candidate.id)}
-						<BoundingBox
-							active={Boolean(hoveredAnnotations[candidate.id])}
-							allowInteractivity={true}
-							annotation={candidate}
-							containerHeight={size.height}
-							containerWidth={size.width}
-							{dragDistance}
-							isPending={true}
-							{readonly}
-							tabIndex={index + 1}
-							{zoom}
-							{addToHovered}
-							onEscapePress={resetDrawing}
-							onBackspacePress={rejectCandidate}
-							onEnterPress={acceptCandidate}
-							{removeFromHovered}
-						/>
-					{/each}
-					{#if showSavedBoundingBoxes}
-						{#each savedBoundingBoxes as boundingBox, index (boundingBox.id)}
-							<BoundingBox
-								active={Boolean(hoveredAnnotations[boundingBox.id])}
-								{activeResizeHandle}
-								allowInteractivity={!allowDrawing}
-								annotation={boundingBox}
-								containerHeight={size.height}
-								containerWidth={size.width}
-								{dragDistance}
-								isPending={false}
-								{readonly}
-								selected={editTarget?.id === boundingBox.id}
-								tabIndex={index + 1}
-								{zoom}
-								{addToHovered}
-								onBackspacePress={deleteBoundingBox}
-								onCopyPress={copyBoundingBox}
-								onEscapePress={resetDrawing}
-								onMouseDown={onMouseDownAnnotation}
-								{removeFromHovered}
-							/>
-						{/each}
-					{/if}
-				</div>
-			{/if}
-		</div>
-	{:else}
-		<div
-			class="flex w-full items-center justify-center"
-			style:height={maxSize?.maxHeight ? `${maxSize?.maxHeight}px` : '250px'}
-		>
-			<Progress size="large" />
-		</div>
-	{/if}
-</div>