@viamrobotics/test-widgets 0.1.1 → 0.1.2

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

@@ -1,230 +0,0 @@
-<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

@@ -1,44 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,47 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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

@@ -1,51 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,53 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-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;