@viamrobotics/test-widgets 0.0.1

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

@@ -0,0 +1,230 @@
+<script lang="ts">
+	import { labelToColor } from '../widgets/vision-service/color'
+
+	import type { BoundingBox, Coordinates, ResizeHandleLocation } from './bounding-box-types'
+
+	import { getBoundingRect, getModifyKeyForOS } from './annotation-edit-utils'
+	import ResizeHandles from './resize-handles.svelte'
+
+	// opacity represented as hexadecimal
+	const ACTIVE_BG_OPACITY = '70'
+	const INACTIVE_BG_OPACITY = '30'
+	const ACTIVE_BORDER_OPACITY = 'FF'
+	const INACTIVE_BORDER_OPACITY = 'AA'
+
+	const MODIFY_KEY = getModifyKeyForOS()
+
+	interface Props {
+		/** whether to display the active (hovered) state */
+		active: boolean
+		/** which corner is currently being manipulated */
+		activeResizeHandle?: ResizeHandleLocation | undefined
+		/** whether to allow click or hovering behaviors to function */
+		allowInteractivity: boolean
+		/** bounding box size and label information */
+		annotation: BoundingBox
+		/** width of drawing container */
+		containerHeight: number
+		/** height of drawing container */
+		containerWidth: number
+		/** distance box has been dragged in pixels */
+		dragDistance?: Coordinates
+		/** whether box should be displayed with dashed borders to indicate pending status */
+		isPending: boolean
+		/** whether box should box should be editable (can still be hovered) */
+		readonly?: boolean
+		/** whether box has been selected (clicked on) */
+		selected?: boolean
+		/** tab index used for tabbing behaviors */
+		tabIndex?: number
+		/** current zoom scale being applied to labeller */
+		zoom: number
+		/** add current box to list of hovered boxes */
+		addToHovered?: (id: string) => void
+		/** called when backspace keyboard key is pressed */
+		onBackspacePress?: (id: string, label: string) => void
+		/** called when hitting copy command */
+		onCopyPress?: () => void
+		/** called when enter keyboard key is pressed */
+		onEnterPress?: (id: string) => void
+		/** called when escape keyboard key is pressed */
+		onEscapePress?: VoidFunction
+		/** called on mouse down on the box */
+		onMouseDown?: (event: MouseEvent, id: string, corner?: ResizeHandleLocation) => void
+		/** remove current box to list of hovered boxes */
+		removeFromHovered?: (id: string) => void
+	}
+
+	const {
+		active,
+		activeResizeHandle,
+		allowInteractivity,
+		annotation,
+		containerHeight,
+		containerWidth,
+		dragDistance,
+		isPending,
+		readonly = false,
+		selected = false,
+		tabIndex = -1,
+		zoom,
+		addToHovered,
+		onBackspacePress,
+		onCopyPress,
+		onEnterPress,
+		onEscapePress,
+		onMouseDown,
+		removeFromHovered,
+	}: Props = $props()
+
+	const color = $derived(labelToColor(annotation.label))
+
+	let factoredXMin = $state(0)
+	let factoredXMax = $state(0)
+	let factoredYMin = $state(0)
+	let factoredYMax = $state(0)
+	let box: HTMLDivElement | undefined = $state()
+	let labelText: HTMLDivElement | undefined = $state()
+
+	const drag = $derived(selected ? dragDistance : undefined)
+
+	$effect.pre(() => {
+		const boundingRect = getBoundingRect(
+			annotation,
+			drag,
+			containerWidth,
+			containerHeight,
+			activeResizeHandle
+		)
+
+		factoredXMin = boundingRect.xMinNormalized
+		factoredXMax = boundingRect.xMaxNormalized
+		factoredYMin = boundingRect.yMinNormalized
+		factoredYMax = boundingRect.yMaxNormalized
+	})
+
+	const showHighlight = $derived(active || selected)
+
+	const handleMove = () => {
+		if (allowInteractivity) {
+			addToHovered?.(annotation.id)
+		}
+	}
+
+	const handleLeave = () => {
+		removeFromHovered?.(annotation.id)
+	}
+
+	const handleKeyDown = (event: KeyboardEvent) => {
+		if (selected && event[MODIFY_KEY]) {
+			// prevents UX from going into crosshair drawing mode when first pressing CMD/CTRL key
+			event.stopPropagation()
+
+			if (event.code === 'KeyC') {
+				onCopyPress?.()
+				box?.blur()
+			}
+		}
+
+		switch (event.code) {
+			case 'Escape': {
+				event.stopPropagation()
+				onEscapePress?.()
+				break
+			}
+			case 'Enter': {
+				event.stopPropagation()
+				onEnterPress?.(annotation.id)
+				break
+			}
+			case 'Backspace': {
+				event.stopPropagation()
+				onBackspacePress?.(annotation.id, annotation.label)
+				break
+			}
+		}
+	}
+
+	$effect(() => {
+		if (selected) {
+			box?.focus()
+		} else {
+			box?.blur()
+		}
+	})
+
+	const handleMouseDown = (event: MouseEvent) => {
+		if (!readonly && allowInteractivity) {
+			event.stopPropagation()
+			onMouseDown?.(event, annotation.id)
+		}
+	}
+
+	const handleCornerPointerDown = (event: MouseEvent, corner: ResizeHandleLocation) => {
+		event.stopPropagation()
+		onMouseDown?.(event, annotation.id, corner)
+	}
+
+	const zIndex = $derived.by(() => {
+		if (selected) return 30
+		if (showHighlight) return 20
+		return 10
+	})
+
+	const labelTextWidth = $derived(labelText?.getBoundingClientRect().width ?? 0)
+	const rightAlignText = $derived.by(() => {
+		// check if text needs right align when text is bigger than box
+		if (labelTextWidth < (factoredXMax - factoredXMin) * zoom) {
+			return false
+		}
+
+		// only right align when the distance between the box left edge plus text width exceeds container boundary
+		return labelTextWidth / zoom + factoredXMin > containerWidth
+	})
+</script>
+
+<div
+	role="button"
+	tabindex={tabIndex}
+	bind:this={box}
+	class={['absolute outline-none', { 'border-dashed': isPending }]}
+	style:border-width={`${2 / zoom}px`}
+	style:border-color={showHighlight
+		? `${color}${ACTIVE_BORDER_OPACITY.toString()}`
+		: `${color}${INACTIVE_BORDER_OPACITY.toString()}`}
+	style:background-color={showHighlight
+		? `${color}${ACTIVE_BG_OPACITY.toString()}`
+		: `${color}${INACTIVE_BG_OPACITY.toString()}`}
+	style:top={`${factoredYMin}px`}
+	style:left={`${factoredXMin}px`}
+	style:height={`${factoredYMax - factoredYMin}px`}
+	style:width={`${factoredXMax - factoredXMin}px`}
+	style:z-index={zIndex}
+	onmousedown={handleMouseDown}
+	onmouseleave={handleLeave}
+	onmousemove={handleMove}
+	onkeydown={handleKeyDown}
+>
+	{#if showHighlight}
+		<div
+			bind:this={labelText}
+			class="absolute w-fit select-none"
+			style:background-color={color}
+			style:transform-origin={`top ${rightAlignText ? 'right' : 'left'}`}
+			style:scale={1 / zoom}
+			style:right={rightAlignText ? `-${2 / zoom}px` : undefined}
+			style:left={rightAlignText ? undefined : `-${2 / zoom}px`}
+			style:top={factoredYMin > 24 / zoom ? `-${24 / zoom}px` : `-${2 / zoom}px`}
+		>
+			<span class="font-roboto-mono px-2 py-0.5 text-xs font-medium whitespace-nowrap"
+				>{annotation.label}</span
+			>
+		</div>
+	{/if}
+	{#if selected && !readonly}
+		<ResizeHandles
+			{zoom}
+			onMouseDown={handleCornerPointerDown}
+		/>
+	{/if}
+</div>

package/dist/components/image-annotations/bounding-box.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { BoundingBox, Coordinates, ResizeHandleLocation } from './bounding-box-types';
+interface Props {
+    /** whether to display the active (hovered) state */
+    active: boolean;
+    /** which corner is currently being manipulated */
+    activeResizeHandle?: ResizeHandleLocation | undefined;
+    /** whether to allow click or hovering behaviors to function */
+    allowInteractivity: boolean;
+    /** bounding box size and label information */
+    annotation: BoundingBox;
+    /** width of drawing container */
+    containerHeight: number;
+    /** height of drawing container */
+    containerWidth: number;
+    /** distance box has been dragged in pixels */
+    dragDistance?: Coordinates;
+    /** whether box should be displayed with dashed borders to indicate pending status */
+    isPending: boolean;
+    /** whether box should box should be editable (can still be hovered) */
+    readonly?: boolean;
+    /** whether box has been selected (clicked on) */
+    selected?: boolean;
+    /** tab index used for tabbing behaviors */
+    tabIndex?: number;
+    /** current zoom scale being applied to labeller */
+    zoom: number;
+    /** add current box to list of hovered boxes */
+    addToHovered?: (id: string) => void;
+    /** called when backspace keyboard key is pressed */
+    onBackspacePress?: (id: string, label: string) => void;
+    /** called when hitting copy command */
+    onCopyPress?: () => void;
+    /** called when enter keyboard key is pressed */
+    onEnterPress?: (id: string) => void;
+    /** called when escape keyboard key is pressed */
+    onEscapePress?: VoidFunction;
+    /** called on mouse down on the box */
+    onMouseDown?: (event: MouseEvent, id: string, corner?: ResizeHandleLocation) => void;
+    /** remove current box to list of hovered boxes */
+    removeFromHovered?: (id: string) => void;
+}
+declare const BoundingBox: import("svelte").Component<Props, {}, "">;
+type BoundingBox = ReturnType<typeof BoundingBox>;
+export default BoundingBox;

package/dist/components/image-annotations/get-image-size.d.ts

@@ -0,0 +1,7 @@
+export interface Size {
+    /** The image height, with a max height determined by its container */
+    height: number;
+    /** The image width, resized to match aspect ratio determined by height */
+    width: number;
+}
+export declare const getImageSize: (img: HTMLImageElement, container: HTMLElement) => Size;

package/dist/components/image-annotations/get-image-size.js

@@ -0,0 +1,29 @@
+export const getImageSize = (img, container) => {
+    const aspectRatio = img.naturalWidth / img.naturalHeight;
+    if (img.naturalHeight > img.naturalWidth) {
+        let heightNumber = Math.min(container.clientHeight, img.naturalHeight);
+        let widthNumber = heightNumber * aspectRatio;
+        // if scaled width is still too large for container, scale down again
+        if (widthNumber > container.clientWidth) {
+            const downScale = container.clientWidth / widthNumber;
+            widthNumber = container.clientWidth;
+            heightNumber *= downScale;
+        }
+        return {
+            width: widthNumber,
+            height: heightNumber,
+        };
+    }
+    let widthNumber = Math.min(container.clientWidth, img.naturalWidth);
+    let heightNumber = widthNumber * (1 / aspectRatio);
+    // if scaled height is still too large for container, scale down again
+    if (heightNumber > container.clientHeight) {
+        const downScale = container.clientHeight / heightNumber;
+        heightNumber = container.clientHeight;
+        widthNumber *= downScale;
+    }
+    return {
+        width: widthNumber,
+        height: heightNumber,
+    };
+};

package/dist/components/image-annotations/labeler-constants.d.ts

@@ -0,0 +1,4 @@
+export declare const ZOOM_MIN = 1;
+export declare const ZOOM_MAX = 4;
+export declare const INVERT_Y_FLOAT_DISTANCE = 50;
+export declare const INVERT_X_FLOAT_DISTANCE = 100;

package/dist/components/image-annotations/labeler-constants.js

@@ -0,0 +1,4 @@
+export const ZOOM_MIN = 1;
+export const ZOOM_MAX = 4;
+export const INVERT_Y_FLOAT_DISTANCE = 50;
+export const INVERT_X_FLOAT_DISTANCE = 100;

package/dist/components/image-annotations/resize-corner.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { ResizeHandleLocation } from './bounding-box-types'
+	import {
+		BOX_SIZE,
+		INVISIBLE_BUFFER,
+		ResizeHandleClassMap,
+		WRAPPER_SIZE,
+	} from './resize-handle-props'
+
+	interface Props {
+		cornerDesignation: ResizeHandleLocation
+		zoom?: number
+		onMouseDown: (event: MouseEvent, corner: ResizeHandleLocation) => void
+	}
+
+	const { cornerDesignation, zoom = 1, onMouseDown }: Props = $props()
+
+	const wrapperStyle = $derived(ResizeHandleClassMap[cornerDesignation])
+
+	const handleMouseDown = (event: MouseEvent) => {
+		;(event as PointerEvent).stopPropagation()
+		onMouseDown(event, cornerDesignation)
+	}
+</script>
+
+<button
+	tabindex="-1"
+	class="absolute"
+	aria-label={`${cornerDesignation}-resize`}
+	style:height={`${WRAPPER_SIZE}px`}
+	style:width={`${WRAPPER_SIZE}px`}
+	style:left={`${wrapperStyle.positionLeft ?? ''}px`}
+	style:top={`${wrapperStyle.positionTop ?? ''}px`}
+	style:right={`${wrapperStyle.positionRight ?? ''}px`}
+	style:bottom={`${wrapperStyle.positionBottom ?? ''}px`}
+	style:cursor={wrapperStyle.cursor}
+	style:scale={1 / zoom}
+	onmousedown={handleMouseDown}
+>
+	<div
+		style:height={`${BOX_SIZE}px`}
+		style:width={`${BOX_SIZE}px`}
+		style:left={`${INVISIBLE_BUFFER / 2}px`}
+		style:top={`${INVISIBLE_BUFFER / 2}px`}
+		class="absolute border border-black bg-white"
+	></div>
+</button>

package/dist/components/image-annotations/resize-corner.svelte.d.ts

@@ -0,0 +1,9 @@
+import { ResizeHandleLocation } from './bounding-box-types';
+interface Props {
+    cornerDesignation: ResizeHandleLocation;
+    zoom?: number;
+    onMouseDown: (event: MouseEvent, corner: ResizeHandleLocation) => void;
+}
+declare const ResizeCorner: import("svelte").Component<Props, {}, "">;
+type ResizeCorner = ReturnType<typeof ResizeCorner>;
+export default ResizeCorner;

package/dist/components/image-annotations/resize-edge.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { ResizeHandleLocation } from './bounding-box-types'
+	import { ResizeHandleClassMap } from './resize-handle-props'
+
+	interface Props {
+		edgeDesignation: ResizeHandleLocation
+		zoom?: number
+		onMouseDown: (event: MouseEvent, edge: ResizeHandleLocation) => void
+	}
+
+	const { edgeDesignation, zoom = 1, onMouseDown }: Props = $props()
+
+	const wrapperStyle = $derived(ResizeHandleClassMap[edgeDesignation])
+
+	const handleMouseDown = (event: MouseEvent) => {
+		;(event as PointerEvent).stopPropagation()
+		onMouseDown(event, edgeDesignation)
+	}
+
+	const scale = $derived.by(() => {
+		switch (edgeDesignation) {
+			case ResizeHandleLocation.L:
+			case ResizeHandleLocation.R: {
+				return `${1 / zoom} 1`
+			}
+			case ResizeHandleLocation.T:
+			case ResizeHandleLocation.B: {
+				return `1 ${1 / zoom}`
+			}
+			default: {
+				return ''
+			}
+		}
+	})
+</script>
+
+<button
+	tabindex="-1"
+	class="absolute"
+	aria-label={`${edgeDesignation}-resize`}
+	style:height={wrapperStyle.height}
+	style:width={wrapperStyle.width}
+	style:left={`${wrapperStyle.positionLeft ?? ''}px`}
+	style:top={`${wrapperStyle.positionTop ?? ''}px`}
+	style:right={`${wrapperStyle.positionRight ?? ''}px`}
+	style:bottom={`${wrapperStyle.positionBottom ?? ''}px`}
+	style:cursor={wrapperStyle.cursor}
+	style:scale
+	onmousedown={handleMouseDown}
+>
+</button>

package/dist/components/image-annotations/resize-edge.svelte.d.ts

@@ -0,0 +1,9 @@
+import { ResizeHandleLocation } from './bounding-box-types';
+interface Props {
+    edgeDesignation: ResizeHandleLocation;
+    zoom?: number;
+    onMouseDown: (event: MouseEvent, edge: ResizeHandleLocation) => void;
+}
+declare const ResizeEdge: import("svelte").Component<Props, {}, "">;
+type ResizeEdge = ReturnType<typeof ResizeEdge>;
+export default ResizeEdge;

package/dist/components/image-annotations/resize-handle-props.d.ts

@@ -0,0 +1,60 @@
+import { ResizeHandleLocation } from './bounding-box-types';
+export declare const BOX_SIZE = 10;
+export declare const INVISIBLE_BUFFER = 6;
+export declare const WRAPPER_SIZE: number;
+export declare const OFFSET: number;
+export declare const EDGE_WIDTH = 6;
+export declare const EDGE_OFFSET: number;
+export declare const topLeft: {
+    positionLeft: number;
+    positionTop: number;
+    cursor: string;
+    height: number;
+    width: number;
+};
+export declare const topRight: {
+    positionRight: number;
+    positionTop: number;
+    cursor: string;
+    height: number;
+    width: number;
+};
+export declare const bottomLeft: {
+    positionLeft: number;
+    positionBottom: number;
+    cursor: string;
+    height: number;
+    width: number;
+};
+export declare const bottomRight: {
+    positionRight: number;
+    positionBottom: number;
+    cursor: string;
+    height: number;
+    width: number;
+};
+export declare const top: {
+    height: string;
+    width: string;
+    positionTop: number;
+    cursor: string;
+};
+export declare const right: {
+    height: string;
+    width: string;
+    positionRight: number;
+    cursor: string;
+};
+export declare const bottom: {
+    height: string;
+    width: string;
+    positionBottom: number;
+    cursor: string;
+};
+export declare const left: {
+    height: string;
+    width: string;
+    positionLeft: number;
+    cursor: string;
+};
+export declare const ResizeHandleClassMap: Record<ResizeHandleLocation, Record<string, number | string>>;

package/dist/components/image-annotations/resize-handle-props.js

@@ -0,0 +1,66 @@
+import { ResizeHandleLocation } from './bounding-box-types';
+export const BOX_SIZE = 10;
+export const INVISIBLE_BUFFER = 6;
+export const WRAPPER_SIZE = BOX_SIZE + INVISIBLE_BUFFER;
+export const OFFSET = -0.5 * WRAPPER_SIZE;
+export const EDGE_WIDTH = 6;
+export const EDGE_OFFSET = EDGE_WIDTH / -2;
+const wrapperBaseProps = { height: WRAPPER_SIZE, width: WRAPPER_SIZE };
+export const topLeft = {
+    ...wrapperBaseProps,
+    positionLeft: OFFSET,
+    positionTop: OFFSET,
+    cursor: 'nwse-resize',
+};
+export const topRight = {
+    ...wrapperBaseProps,
+    positionRight: OFFSET,
+    positionTop: OFFSET,
+    cursor: 'nesw-resize',
+};
+export const bottomLeft = {
+    ...wrapperBaseProps,
+    positionLeft: OFFSET,
+    positionBottom: OFFSET,
+    cursor: 'nesw-resize',
+};
+export const bottomRight = {
+    ...wrapperBaseProps,
+    positionRight: OFFSET,
+    positionBottom: OFFSET,
+    cursor: 'nwse-resize',
+};
+export const top = {
+    height: `${EDGE_WIDTH}px`,
+    width: '100%',
+    positionTop: EDGE_OFFSET,
+    cursor: 'ns-resize',
+};
+export const right = {
+    height: '100%',
+    width: `${EDGE_WIDTH}px`,
+    positionRight: EDGE_OFFSET,
+    cursor: 'ew-resize',
+};
+export const bottom = {
+    height: `${EDGE_WIDTH}px`,
+    width: '100%',
+    positionBottom: EDGE_OFFSET,
+    cursor: 'ns-resize',
+};
+export const left = {
+    height: '100%',
+    width: `${EDGE_WIDTH}px`,
+    positionLeft: EDGE_OFFSET,
+    cursor: 'ew-resize',
+};
+export const ResizeHandleClassMap = {
+    [ResizeHandleLocation.T]: top,
+    [ResizeHandleLocation.R]: right,
+    [ResizeHandleLocation.B]: bottom,
+    [ResizeHandleLocation.L]: left,
+    [ResizeHandleLocation.TL]: topLeft,
+    [ResizeHandleLocation.TR]: topRight,
+    [ResizeHandleLocation.BL]: bottomLeft,
+    [ResizeHandleLocation.BR]: bottomRight,
+};

package/dist/components/image-annotations/resize-handles.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { ResizeHandleLocation } from './bounding-box-types'
+	import ResizeCorner from './resize-corner.svelte'
+	import ResizeEdge from './resize-edge.svelte'
+
+	interface Props {
+		zoom: number
+		onMouseDown: (event: MouseEvent, edge: ResizeHandleLocation) => void
+	}
+
+	const { zoom, onMouseDown }: Props = $props()
+</script>
+
+<ResizeEdge
+	{zoom}
+	edgeDesignation={ResizeHandleLocation.T}
+	{onMouseDown}
+/>
+<ResizeEdge
+	{zoom}
+	edgeDesignation={ResizeHandleLocation.R}
+	{onMouseDown}
+/>
+<ResizeEdge
+	{zoom}
+	edgeDesignation={ResizeHandleLocation.B}
+	{onMouseDown}
+/>
+<ResizeEdge
+	{zoom}
+	edgeDesignation={ResizeHandleLocation.L}
+	{onMouseDown}
+/>
+<ResizeCorner
+	{zoom}
+	cornerDesignation={ResizeHandleLocation.TL}
+	{onMouseDown}
+/>
+<ResizeCorner
+	{zoom}
+	cornerDesignation={ResizeHandleLocation.TR}
+	{onMouseDown}
+/>
+<ResizeCorner
+	{zoom}
+	cornerDesignation={ResizeHandleLocation.BL}
+	{onMouseDown}
+/>
+<ResizeCorner
+	{zoom}
+	cornerDesignation={ResizeHandleLocation.BR}
+	{onMouseDown}
+/>

package/dist/components/image-annotations/resize-handles.svelte.d.ts

@@ -0,0 +1,8 @@
+import { ResizeHandleLocation } from './bounding-box-types';
+interface Props {
+    zoom: number;
+    onMouseDown: (event: MouseEvent, edge: ResizeHandleLocation) => void;
+}
+declare const ResizeHandles: import("svelte").Component<Props, {}, "">;
+type ResizeHandles = ReturnType<typeof ResizeHandles>;
+export default ResizeHandles;