Add edit bounding box tool & friends (#4593)

Author: jpggvilaca

ui/eslint.config.js

@@ -45,10 +45,7 @@ export default [
             'header/header': [
                 'warn',
                 'line',
-                [
-                    ' Copyright (C) 2025 Intel Corporation',
-                    ' SPDX-License-Identifier: Apache-2.0',
-                ],
+                [' Copyright (C) 2025 Intel Corporation', ' SPDX-License-Identifier: Apache-2.0'],
             ],
         },
     },

ui/src/components/annotation/annotation.component.tsx

@@ -0,0 +1,33 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { Annotation as AnnotationInterface } from '../shapes/interfaces';
+import { ShapeFactory } from './shape-factory.component';
+
+interface AnnotationProps {
+    annotation: AnnotationInterface;
+    maskId?: string;
+}
+
+export const Annotation = ({ maskId, annotation }: AnnotationProps): JSX.Element => {
+    const { id, color, shape } = annotation;
+
+    return (
+        <>
+            <g
+                mask={maskId}
+                id={`canvas-annotation-${id}`}
+                strokeLinecap={'round'}
+                {...(color !== undefined
+                    ? {
+                          fill: color,
+                          stroke: color,
+                          strokeOpacity: 'var(--annotation-border-opacity)',
+                      }
+                    : {})}
+            >
+                <ShapeFactory shape={shape} styles={{}} ariaLabel={''} />
+            </g>
+        </>
+    );
+};

ui/src/components/annotation/shape-factory.component.tsx

@@ -0,0 +1,19 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { Shape } from '../shapes/interfaces';
+import { Polygon } from '../shapes/polygon.component';
+import { Rectangle } from '../shapes/rectangle.component';
+
+interface ShapeFactoryProps {
+    shape: Shape;
+    styles: React.SVGProps<SVGPolygonElement & SVGRectElement>;
+    ariaLabel: string;
+}
+export const ShapeFactory = ({ shape, styles, ariaLabel }: ShapeFactoryProps) => {
+    if (shape.shapeType === 'rect') {
+        return <Rectangle rect={shape} styles={styles} ariaLabel={ariaLabel} />;
+    } else {
+        return <Polygon polygon={shape} styles={styles} ariaLabel={ariaLabel} />;
+    }
+};

ui/src/components/bounding-box-tool/anchor.component.tsx

@@ -0,0 +1,105 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { CSSProperties, PointerEvent, ReactNode, useState } from 'react';
+
+import { isFunction } from 'lodash-es';
+
+import { Point } from '../shapes/interfaces';
+import { isLeftButton } from './utils';
+
+interface AnchorProps {
+    children: ReactNode;
+    x: number;
+    y: number;
+    size: number;
+    zoom: number;
+    label: string;
+    fill?: string;
+    cursor?: CSSProperties['cursor'];
+    onStart?: () => void;
+    onComplete: () => void;
+    moveAnchorTo: (x: number, y: number) => void;
+}
+
+export const Anchor = ({
+    x,
+    y,
+    fill = 'white',
+    size,
+    zoom,
+    label,
+    cursor,
+    children,
+    onStart,
+    moveAnchorTo,
+    onComplete,
+}: AnchorProps): JSX.Element => {
+    const [dragFrom, setDragFrom] = useState<Point | null>(null);
+
+    const onPointerDown = (event: PointerEvent) => {
+        event.preventDefault();
+
+        if (event.pointerType === 'touch' || !isLeftButton(event)) {
+            return;
+        }
+
+        event.currentTarget.setPointerCapture(event.pointerId);
+
+        const mouse = { x: Math.round(event.clientX / zoom), y: Math.round(event.clientY / zoom) };
+
+        isFunction(onStart) && onStart();
+        setDragFrom({ x: mouse.x - x, y: mouse.y - y });
+    };
+
+    const onPointerMove = (event: PointerEvent) => {
+        event.preventDefault();
+
+        if (dragFrom === null) {
+            return;
+        }
+
+        const mouse = { x: Math.round(event.clientX / zoom), y: Math.round(event.clientY / zoom) };
+
+        moveAnchorTo(mouse.x - dragFrom.x, mouse.y - dragFrom.y);
+    };
+
+    const onPointerUp = (event: PointerEvent) => {
+        if (event.pointerType === 'touch' || !isLeftButton(event)) {
+            return;
+        }
+
+        event.preventDefault();
+        event.currentTarget.releasePointerCapture(event.pointerId);
+
+        setDragFrom(null);
+        onComplete();
+    };
+
+    // We render both a visual anchor and an invisible anchor that has a larger
+    // clicking area than the visible one
+    const interactiveAnchorProps = {
+        style: { cursor },
+        fill: dragFrom === null ? fill : 'var(--energy-blue)',
+        'aria-label': label,
+        onPointerUp,
+        onPointerMove,
+        onPointerDown,
+    };
+
+    return (
+        <g>
+            {children}
+            <rect
+                x={x - size}
+                y={y - size}
+                cx={x}
+                cy={y}
+                width={size * 2}
+                height={size * 2}
+                fillOpacity={0}
+                {...interactiveAnchorProps}
+            />
+        </g>
+    );
+};

ui/src/components/bounding-box-tool/bounding-box-tool.component.tsx

@@ -0,0 +1,83 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useState } from 'react';
+
+import { Annotation, Point, RegionOfInterest } from '../shapes/interfaces';
+import { ResizeAnchor } from './resize-anchor.component';
+import { TranslateShape } from './translate-shape.component';
+import { getBoundingBoxInRoi, getBoundingBoxResizePoints, getClampedBoundingBox } from './utils';
+
+import classes from './bounding-box-tool.module.scss';
+
+interface EditBoundingBoxProps {
+    annotation: Annotation & { shape: { shapeType: 'rect' } };
+    roi: RegionOfInterest;
+    image: ImageData;
+    zoom: number;
+    updateAnnotation: (annotation: Annotation) => void;
+}
+
+const ANCHOR_SIZE = 8;
+
+export const EditBoundingBox = ({
+    annotation,
+    roi,
+    image,
+    zoom,
+    updateAnnotation,
+}: EditBoundingBoxProps): JSX.Element => {
+    const [shape, setShape] = useState(annotation.shape);
+
+    useEffect(() => setShape(annotation.shape), [annotation.shape]);
+
+    const onComplete = () => {
+        updateAnnotation({ ...annotation, shape });
+    };
+
+    const translate = (point: Point) => {
+        const newBoundingBox = getClampedBoundingBox(point, shape, roi);
+
+        setShape({ ...shape, ...newBoundingBox });
+    };
+
+    const anchorPoints = getBoundingBoxResizePoints({
+        gap: (2 * ANCHOR_SIZE) / zoom,
+        boundingBox: shape,
+        onResized: (boundingBox) => {
+            setShape({ ...shape, ...getBoundingBoxInRoi(boundingBox, roi) });
+        },
+    });
+
+    return (
+        <>
+            <svg
+                width={image.width}
+                height={image.height}
+                className={classes.disabledLayer}
+                id={`translate-bounding-box-${annotation.id}`}
+            >
+                <TranslateShape
+                    zoom={zoom}
+                    annotation={{ ...annotation, shape }}
+                    translateShape={translate}
+                    onComplete={onComplete}
+                />
+            </svg>
+
+            <svg
+                width={image.width}
+                height={image.height}
+                className={classes.disabledLayer}
+                aria-label={`Edit bounding box points ${annotation.id}`}
+                id={`edit-bounding-box-points-${annotation.id}`}
+            >
+                <g style={{ pointerEvents: 'auto' }}>
+                    {anchorPoints.map((anchor) => {
+                        return <ResizeAnchor key={anchor.label} zoom={zoom} onComplete={onComplete} {...anchor} />;
+                    })}
+                </g>
+            </svg>
+        </>
+    );
+};

ui/src/components/bounding-box-tool/bounding-box-tool.module.scss

@@ -0,0 +1,8 @@
+.disabledLayer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    pointer-events: none;
+}

ui/src/components/bounding-box-tool/resize-anchor.component.tsx

@@ -0,0 +1,92 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { CSSProperties, ReactNode } from 'react';
+
+import { Anchor as InternalAnchor } from './anchor.component';
+
+export const ANCHOR_SIZE = 8;
+
+enum ResizeAnchorType {
+    SQUARE,
+    CIRCLE,
+    CUSTOM,
+}
+
+interface ResizeAnchorProps {
+    zoom: number;
+    x: number;
+    y: number;
+    moveAnchorTo: (x: number, y: number) => void;
+    cursor?: CSSProperties['cursor'];
+    label: string;
+    onStart?: () => void;
+    onComplete: () => void;
+    type?: ResizeAnchorType;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    Anchor?: ReactNode;
+}
+
+interface DefaultCircleProps {
+    zoom: number;
+    x: number;
+    y: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+}
+
+const DefaultCircle = ({ x, y, zoom, fill, stroke, strokeWidth = 1 }: DefaultCircleProps) => {
+    return <circle cx={x} cy={y} r={ANCHOR_SIZE / zoom / 2} {...{ fill, stroke, strokeWidth: strokeWidth / zoom }} />;
+};
+
+export const ResizeAnchor = ({
+    x,
+    y,
+    zoom,
+    onStart,
+    onComplete,
+    moveAnchorTo,
+    label,
+    fill = 'white',
+    type = ResizeAnchorType.SQUARE,
+    cursor = 'all-scroll',
+    stroke = 'var(--energy-blue)',
+    strokeWidth = 1,
+    Anchor = <DefaultCircle x={x} y={y} zoom={zoom} fill={fill} stroke={stroke} strokeWidth={strokeWidth} />,
+}: ResizeAnchorProps): JSX.Element => {
+    const size = ANCHOR_SIZE / zoom;
+
+    // We render both a visual anchor and an invisible anchor that has a larger
+    // clicking area than the visible one
+    const visualAnchorProps = {
+        fill,
+        stroke,
+        strokeWidth: strokeWidth / zoom,
+    };
+
+    return (
+        <InternalAnchor
+            size={size}
+            label={label}
+            x={x}
+            y={y}
+            zoom={zoom}
+            fill={fill}
+            cursor={cursor ? cursor : 'default'}
+            onStart={onStart}
+            onComplete={onComplete}
+            moveAnchorTo={moveAnchorTo}
+        >
+            {type === ResizeAnchorType.SQUARE ? (
+                <g fillOpacity={1.0} transform-origin={`${x}px ${y}px`}>
+                    <rect x={x - size / 2} y={y - size / 2} width={size} height={size} {...visualAnchorProps} />
+                </g>
+            ) : (
+                Anchor
+            )}
+        </InternalAnchor>
+    );
+};