box-annotations 4.0.0-beta.8 → 4.0.1-beta.1

package/src/region/RegionCreationContainer.tsx

@@ -0,0 +1,43 @@
+import { connect } from 'react-redux';
+import {
+    AppState,
+    CreatorItemRegion,
+    CreatorStatus,
+    getAnnotationMode,
+    getCreatorStagedForLocation,
+    getCreatorStatus,
+    getRotation,
+    isCreatorStagedRegion,
+    Mode,
+    resetCreatorAction,
+    setReferenceIdAction,
+    setStagedAction,
+    setStatusAction,
+} from '../store';
+import RegionCreation from './RegionCreation';
+import withProviders from '../common/withProviders';
+
+export type Props = {
+    isCreating: boolean;
+    isRotated: boolean;
+    staged: CreatorItemRegion | null;
+};
+
+export const mapStateToProps = (state: AppState, { location }: { location: number }): Props => {
+    const staged = getCreatorStagedForLocation(state, location);
+
+    return {
+        isCreating: getAnnotationMode(state) === Mode.REGION && getCreatorStatus(state) !== CreatorStatus.pending,
+        isRotated: !!getRotation(state),
+        staged: isCreatorStagedRegion(staged) ? staged : null,
+    };
+};
+
+export const mapDispatchToProps = {
+    resetCreator: resetCreatorAction,
+    setReferenceId: setReferenceIdAction,
+    setStaged: setStagedAction,
+    setStatus: setStatusAction,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withProviders(RegionCreation));

package/src/region/RegionCreationManager.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import BaseManager, { Props } from '../common/BaseManager';
+import RegionCreationContainer from './RegionCreationContainer';
+
+export default class RegionManager extends BaseManager {
+    decorate(): void {
+        this.reactEl.classList.add('ba-Layer--regionCreation');
+        this.reactEl.dataset.testid = 'ba-Layer--regionCreation';
+    }
+
+    render(props: Props): void {
+        ReactDOM.render(<RegionCreationContainer location={this.location} {...props} />, this.reactEl);
+    }
+}

package/src/region/RegionCreator.scss

@@ -2,9 +2,16 @@ $region_cursor_32: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAA
 $region_cursor_32_2x: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABlmWCKAAABWUlEQVR4Ae2YOxKDIBCGNaM5R4pYWOT+B0lhYQrPEZ1JGGcoZIy6Lj4IH40DLAt8+8srSUgQgAAEIAABCEAAAnESSM867Y9JmrGlJi1pf1li9M822dknd7/dREN8NY3IHgWIcB1oPBdZqVLsVFCAJRHK113dtbsFCtg78iZib9Nn7vTbmshenbJdsihgF8wjnZRF0ZdWdT1S+7tI+8+7nlGAS+Ss+bX7/Nx8UMAcoaPr506A2vGhAC3Brdq7J76t+oleAQDYSlqh+FW/CHk6meVSP77WiOh/gUUvp1NytpF7lGXSdd2U6aCubds+n+fuxXBgNshkWZY8q6ovQwEDNOsz3hQgHcLa26DtBwVYEsqveheQRsKsGbwIKYPmtXn02yAAvOopQGcoIMCgeR0yCvCKM0Bn0StAfReQBp2ToJQY9hCAAAQgAAEIQAACEIAABCAAAQhAwDOBLxaXQ2IYNsXoAAAAAElFTkSuQmCC';
 $region_cursor_32_3x: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAYKADAAQAAAABAAAAYAAAAACK+310AAACaUlEQVR4Ae3bwUrDQBDG8VTE+Bg9CD0IBd//IYSCh4KHPobxopuDYQgGOtNvdhvy39O2zc5uf9Odpol2HQ0BBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAgXSBXfoMdzDBT2mZy9iVFo3/EB3IOI0ACdA4hqM8hkeudODLfi9Z+eflIonDDpAwxoOQgLidZOTmSpBV85YRVfmya2AHWI0GfRLQAN1OuekSZCGWfkxl/4hjB9gsNOiTgAbodsrVlKBSCr7Kwnu7+Fl/KGXkefbc3T9kBzROEQlonIDVlCDr9Ho4dMMwdH3fdx/ns30p3M8+21laGDtgSabS8ySgEvTSNKssQUtvxvt8xrUd7xrYAV4x8fEkQAzqDbe5EuS9BO0F9R7PDvCKiY8nAWJQb7hNlKClS81erIzj2QEZqo6YJMCBlXEoCchQdcQkAQ6sjENJQIaqI2b6WVDFy7y9aq6aZ03sAMenNeNQEpCh6ogZ/seCa+ewZeHteOy+y52sW9t4N+yvjXfFbm1PJcb76TSFqVmC0r8DpndVOiO+xbOvRfvqeNF1RMdVTcD4SVM0i67aAYp1RWJULUGRBf43JuOmvJ2nZgniS9jKN+iTgAbodsr07wDVdi5nU/xpos0cfY0AJUjjGI5CAsJ0moEkQOMYjkICwnSagSRA4xiOQgLCdJqBJEDjGI5CAsJ0moEkQOMYjkICwnSagSRA4xiOQgLCdJqBJEDjGI6SfkcsvLLZQC5Hz0B4qBGgBGkciYIAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIITAK/BlNVeN572e8AAAAASUVORK5CYII=';
 
+$region_cursor_new: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAFEUlEQVRYCcVXeUyjVRD/erCl5SjtrpblWHbxADlTD0TDESIak0UJUYyE/zAhGo7gP+oaMDEhIRFNiCRG4A8NmGACwYsAG0lIIBSMCBSCrRDCXbkRiq2bbvv5m9qv2+srn3UTJ5nO++bNmzdv5r2ZKcMEgp6entfAF9Gc2EMglsZOLg1OTk7Gj4+PP6KxP+Tn57O+3CfBkHsyL29sbHzqyWBmZ2eLwfDc1TnvZiwtLanBsRcWFpJ+tzVOKdePDDSqu7v7g8nJyS8wDvec5Ma0MjYrK+tx0Ac5piAqMhgMLwWTJGNZvV7PK+QUIKG5ubmbgTSJDw4OHJi4CtQA3cfkBkSlLS0tWzab7f3s7Oy60tJSLXhuz5FzbAqF4g48OpCamsrrrCgIqvf39xdAJcCAQNtxWwcUCMYU9/b2vpqXl0cueTkURWLXhaQzsAUFBez8/HxJMEXu2+Jr1vb2NtPR0aELDw9/D+PbbW1t5F4/8FMgk8n+hFRGQkKCIikpyYqbpRoaGkpUqVSjeAifYM5vjZ9WF+NKc3PzQUNDwzP4jgBeHx0dvQVK11YQKPr6+t5dX1//rbW19XWEbnl8fHzh8PBwGqsFK/HciR6lCij4CJ6LBY//0yWiXS45HA4LUcFb+ghGTE9Ps6enp1ahSgI6RKlUhp+dnf0hRElABWRVdHS0XIgSXgVClQRUkJKSwqysrMwik+n29vZ+Pjo6+hIKA8rSRp4QgYfD9vf3t4F5HUhVgfIUXSDeBII5NyhGRkbewZemvLxcqdPppjs7Ow2Ey8vLP4Hvd4V9Mw/tEga8u7u7+9XOzk764OBgm91uFyOd1+Non2VmZn6OecoXQUG6ubn5rdFopNwXA1ROTEw0g8YBvTblcwxrsViOV1dXHXDi26DFcrn8xbW1tVookAIvBFKchMVGPN9FPOVfhoeHF0CNjY2NKZjzsoJPG/mCStgDwKsIpUGtVqdj7FVr8S0IyCIKZcCiKUjD/yFEfpKYTKYncPwXMCbn8wUtZPuCKSQDZDMzMwkoyLeRYswodlSjKFcJCqIQq4IZQOtF2FiGwsBQiqqtrf0O36f305CLDPA6BB6T05C6urrvKdXdD0P+lQGcNSiPznxbX1/vNATtA3VdIYVG0KvmNiaKboEpKipys2CEHM3rD8hXFjSz5chZP2LyLvDCfOVWwjMg70RQs0R1LiMjg0WCdAwMDFAyfA6YB3zWhU+DZgOvASOBglI35C7Oa2KxmM3JyXE0NTV9HBsb+zXW/A40azQaBoaVREZGpotEIimqOUOyEonESn8mkpOTpyBnB1LvywvBnhPNUVypr6IM9heQWgYGSfktZPpKtMPX0EKapNJ7kTSbzezY2Nhj1dXVS0jibxYXF89hCRkSUkjICEIKB1FyrXpra+sbavxQchcrKyspST0CvAF8VKvVFiBUehSBhaqqKgoL5W7ey37PdEgFAM5qjjqNYFmWKAPXs/Hx8dS+mIB3gNKampoYq9XqQF8siYmJof6IQsCtx9AbnIq8WUG/yANR7e3tz5eUlHzY1dX1EGJuKysr+zUuLm4ROSoLueESPKQKCwuz486c5ebm2s7Pz2+lpaWNYW3IoeCsIoOpTFKVfxj4VGJiYj6oFphGFPX2jampKf0ioKKi4hUX/zIorfM7sB8DQkKA1nH3gsaciymkSpz8Ck7tAB7i+wxoc8lwcvj8B0I1gFvvS0kfZxzNcfH325hb+Dfx/eE8ndH+AwAAAABJRU5ErkJggg==';
+$region_cursor_new_2x: 'data:image/png;base64,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';
+$region_cursor_new_3x: 'data:image/png;base64,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';
+
 .ba-RegionCreator {
-    cursor: url($region_cursor_32) 16 16, crosshair; /* Legacy */
-    cursor: image-set(url($region_cursor_32) 1x, url($region_cursor_32_2x) 2x, url($region_cursor_32_3x) 3x) 16 16, crosshair; /* Webkit */ /* stylelint-disable-line */
+    $offset_x: 9;
+    $offset_y: 4;
+
+    cursor: url($region_cursor_new) $offset_x $offset_y, auto; /* Legacy */
+    cursor: image-set(url($region_cursor_new) 1x, url($region_cursor_new_2x) 2x, url($region_cursor_new_3x) 3x) $offset_x $offset_y, auto; /* Webkit */ /* stylelint-disable-line */
 }
 
 .ba-RegionCreator-rect {

package/src/region/RegionCreator.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import PointerCapture, { Status as DrawingStatus } from '../components/PointerCapture';
 import PopupCursor from '../components/Popups/PopupCursor';
 import RegionRect, { RegionRectRef } from './RegionRect';
 import useAutoScroll from '../common/useAutoScroll';
@@ -9,6 +10,7 @@ import './RegionCreator.scss';
 
 type Props = {
     className?: string;
+    onAbort: () => void;
     onStart: () => void;
     onStop: (shape: Rect) => void;
 };
@@ -16,10 +18,12 @@ type Props = {
 const MIN_X = 0; // Minimum region x position must be positive
 const MIN_Y = 0; // Minimum region y position must be positive
 const MIN_SIZE = 10; // Minimum region size must be large enough to be clickable
-const MOUSE_PRIMARY = 1; // Primary mouse button
 
-export default function RegionCreator({ className, onStart, onStop }: Props): JSX.Element {
-    const [isDrawing, setIsDrawing] = React.useState<boolean>(false);
+const isValid = (x1: number, y1: number, x2: number, y2: number): boolean =>
+    Math.abs(x2 - x1) >= MIN_SIZE || Math.abs(y2 - y1) >= MIN_SIZE;
+
+export default function RegionCreator({ className, onAbort, onStart, onStop }: Props): JSX.Element {
+    const [drawingStatus, setDrawingStatus] = React.useState<DrawingStatus>(DrawingStatus.init);
     const [isHovering, setIsHovering] = React.useState<boolean>(false);
     const creatorElRef = React.useRef<HTMLDivElement>(null);
     const positionX1Ref = React.useRef<number | null>(null);
@@ -86,20 +90,19 @@ export default function RegionCreator({ className, onStart, onStop }: Props): JS
     const startDraw = (x: number, y: number): void => {
         const [x1, y1] = getPosition(x, y);
 
-        setIsDrawing(true);
+        setDrawingStatus(DrawingStatus.dragging);
 
         positionX1Ref.current = x1;
         positionY1Ref.current = y1;
         positionX2Ref.current = null;
         positionY2Ref.current = null;
         regionDirtyRef.current = true;
-
-        onStart();
     };
-    const stopDraw = (): void => {
+
+    const stopDraw = React.useCallback((): void => {
         const shape = getShape();
 
-        setIsDrawing(false);
+        setDrawingStatus(DrawingStatus.init);
 
         positionX1Ref.current = null;
         positionY1Ref.current = null;
@@ -109,60 +112,45 @@ export default function RegionCreator({ className, onStart, onStop }: Props): JS
 
         if (shape) {
             onStop(shape);
+        } else {
+            onAbort();
         }
-    };
-    const updateDraw = (x: number, y: number): void => {
-        const [x2, y2] = getPosition(x, y);
-
-        positionX2Ref.current = x2;
-        positionY2Ref.current = y2;
-        regionDirtyRef.current = true;
-    };
+    }, [onAbort, onStop, setDrawingStatus]);
+
+    const updateDraw = React.useCallback(
+        (x: number, y: number): void => {
+            const [x2, y2] = getPosition(x, y);
+            const { current: x1 } = positionX1Ref;
+            const { current: y1 } = positionY1Ref;
+            const { current: prevX2 } = positionX2Ref;
+
+            // Suppress the creation of a small region if the intention of the user is to click on the document
+            if (prevX2 === null && !isValid(x1 ?? 0, y1 ?? 0, x2, y2)) {
+                return;
+            }
 
-    // Event Handlers
-    const handleClick = (event: React.MouseEvent): void => {
-        event.preventDefault();
-        event.stopPropagation();
-        event.nativeEvent.stopImmediatePropagation();
-    };
-    const handleMouseDown = ({ buttons, clientX, clientY }: React.MouseEvent): void => {
-        if (buttons !== MOUSE_PRIMARY) {
-            return;
-        }
+            positionX2Ref.current = x2;
+            positionY2Ref.current = y2;
+            regionDirtyRef.current = true;
 
-        startDraw(clientX, clientY);
-    };
-    const handleMouseMove = ({ buttons, clientX, clientY }: MouseEvent): void => {
-        if (buttons !== MOUSE_PRIMARY || !isDrawing) {
-            return;
-        }
+            if (drawingStatus !== DrawingStatus.drawing) {
+                setDrawingStatus(DrawingStatus.drawing);
+                onStart();
+            }
+        },
+        [drawingStatus, onStart, setDrawingStatus],
+    );
 
-        updateDraw(clientX, clientY);
-    };
+    // Event Handlers
     const handleMouseOut = (): void => {
         setIsHovering(false);
     };
     const handleMouseOver = (): void => {
         setIsHovering(true);
     };
-    const handleMouseUp = (): void => {
-        stopDraw();
-    };
     const handleScroll = (x: number, y: number): void => {
         updateDraw(x, y);
     };
-    const handleTouchCancel = (): void => {
-        stopDraw();
-    };
-    const handleTouchEnd = (): void => {
-        stopDraw();
-    };
-    const handleTouchMove = ({ targetTouches }: React.TouchEvent): void => {
-        updateDraw(targetTouches[0].clientX, targetTouches[0].clientY);
-    };
-    const handleTouchStart = ({ targetTouches }: React.TouchEvent): void => {
-        startDraw(targetTouches[0].clientX, targetTouches[0].clientY);
-    };
 
     const renderStep = (callback: () => void): void => {
         renderHandleRef.current = window.requestAnimationFrame(callback);
@@ -184,12 +172,7 @@ export default function RegionCreator({ className, onStart, onStop }: Props): JS
     };
 
     React.useEffect(() => {
-        // Document-level mousemove and mouseup event listeners allow the creator component to respond even if
-        // the cursor leaves the drawing area before the mouse button is released, which finishes the shape
-        if (isDrawing) {
-            document.addEventListener('mousemove', handleMouseMove);
-            document.addEventListener('mouseup', handleMouseUp);
-
+        if (drawingStatus !== DrawingStatus.init) {
             renderStep(renderRect);
         }
 
@@ -200,36 +183,32 @@ export default function RegionCreator({ className, onStart, onStop }: Props): JS
             if (renderHandle) {
                 window.cancelAnimationFrame(renderHandle);
             }
-
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
         };
-    }, [isDrawing]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [drawingStatus]); // eslint-disable-line react-hooks/exhaustive-deps
 
     useAutoScroll({
-        enabled: isDrawing,
+        enabled: drawingStatus !== DrawingStatus.init,
         onScroll: handleScroll,
         reference: creatorElRef.current,
     });
 
     return (
         // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-        <div
+        <PointerCapture
             ref={creatorElRef}
             className={classNames(className, 'ba-RegionCreator')}
             data-testid="ba-RegionCreator"
-            onClick={handleClick}
-            onMouseDown={handleMouseDown}
+            onDrawStart={startDraw}
+            onDrawStop={stopDraw}
+            onDrawUpdate={updateDraw}
             onMouseOut={handleMouseOut}
             onMouseOver={handleMouseOver}
-            onTouchCancel={handleTouchCancel}
-            onTouchEnd={handleTouchEnd}
-            onTouchMove={handleTouchMove}
-            onTouchStart={handleTouchStart}
-            role="presentation"
+            status={drawingStatus}
         >
-            {isDrawing && <RegionRect ref={regionRectRef} className="ba-RegionCreator-rect" isActive />}
-            {!isDrawing && isHovering && <PopupCursor />}
-        </div>
+            {drawingStatus === DrawingStatus.drawing && (
+                <RegionRect ref={regionRectRef} className="ba-RegionCreator-rect" isActive />
+            )}
+            {drawingStatus === DrawingStatus.init && isHovering && <PopupCursor />}
+        </PointerCapture>
     );
 }

package/src/region/RegionList.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
 import RegionAnnotation from './RegionAnnotation';
-import useOutsideEvent from '../common/useOutsideEvent';
+import useIsListInteractive from '../common/useIsListInteractive';
 import { AnnotationRegion } from '../@types';
+import { checkValue } from '../utils/util';
 
 export type Props = {
     activeId?: string | null;
@@ -12,10 +13,6 @@ export type Props = {
     onSelect?: (annotationId: string | null) => void;
 };
 
-export function checkValue(value: number): boolean {
-    return value >= 0 && value <= 100; // Values cannot be negative or larger than 100%
-}
-
 export function filterRegion({ target }: AnnotationRegion): boolean {
     const { shape } = target;
     const { height, width, x, y } = shape;
@@ -32,16 +29,15 @@ export function sortRegion({ target: targetA }: AnnotationRegion, { target: targ
 }
 
 export function RegionList({ activeId, annotations, className, onSelect = noop }: Props): JSX.Element {
-    const [isListening, setIsListening] = React.useState(true);
+    const isListening = useIsListInteractive();
     const rootElRef = React.createRef<HTMLDivElement>();
 
-    // Document-level event handlers for focus and pointer control
-    useOutsideEvent('click', rootElRef, (): void => onSelect(null));
-    useOutsideEvent('mousedown', rootElRef, (): void => setIsListening(false));
-    useOutsideEvent('mouseup', rootElRef, (): void => setIsListening(true));
-
     return (
-        <div ref={rootElRef} className={classNames(className, { 'is-listening': isListening })}>
+        <div
+            ref={rootElRef}
+            className={classNames(className, { 'is-listening': isListening })}
+            data-resin-component="regionList"
+        >
             {annotations
                 .filter(filterRegion)
                 .sort(sortRegion)

package/src/region/RegionManager.tsx

@@ -1,47 +1,15 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import BaseManager, { Options, Props } from '../common/BaseManager';
-import RegionContainer from './RegionContainer';
+import BaseManager, { Props } from '../common/BaseManager';
+import RegionAnnotationsContainer from './RegionAnnotationsContainer';
 
-export default class RegionManager implements BaseManager {
-    page: number;
-
-    pageEl: HTMLElement;
-
-    rootEl: HTMLElement;
-
-    constructor({ page, pageEl, referenceEl }: Options) {
-        this.page = page;
-        this.pageEl = pageEl;
-        this.rootEl = this.insert(referenceEl);
-    }
-
-    destroy(): void {
-        ReactDOM.unmountComponentAtNode(this.rootEl);
-
-        this.rootEl.remove();
-    }
-
-    exists(pageEl: HTMLElement): boolean {
-        return pageEl.contains(this.rootEl);
-    }
-
-    insert(referenceEl: HTMLElement): HTMLElement {
-        // Find the nearest applicable reference and document elements
-        const documentEl = this.pageEl.ownerDocument || document;
-        const parentEl = referenceEl.parentNode || documentEl;
-
-        // Construct a layer element where we can inject a root React component
-        const rootLayerEl = documentEl.createElement('div');
-        rootLayerEl.classList.add('ba-Layer');
-        rootLayerEl.classList.add('ba-Layer--region');
-        rootLayerEl.dataset.testid = 'ba-Layer--region';
-
-        // Insert the new layer element immediately after the reference element
-        return parentEl.insertBefore(rootLayerEl, referenceEl.nextSibling);
+export default class RegionListManager extends BaseManager {
+    decorate(): void {
+        this.reactEl.classList.add('ba-Layer--region');
+        this.reactEl.dataset.testid = 'ba-Layer--region';
     }
 
     render(props: Props): void {
-        ReactDOM.render(<RegionContainer page={this.page} {...props} />, this.rootEl);
+        ReactDOM.render(<RegionAnnotationsContainer location={this.location} {...props} />, this.reactEl);
     }
 }

package/src/region/RegionRect.scss

@@ -1,5 +1,12 @@
 @import '~box-ui-elements/es/styles/variables';
 
+$ba-RegionRect-color: $bdl-yellorange;
+$ba-RegionRect-bgColor--default: rgba($ba-RegionRect-color, 0); // Default color uses zero alpha value for transition
+$ba-RegionRect-bgColor--hover: rgba($ba-RegionRect-color, .1);
+$ba-RegionRect-bgColor--active: rgba($ba-RegionRect-color, 0);
+$ba-RegionRect-transitionDelay: 25ms;
+$ba-RegionRect-transitionDuration: 200ms;
+
 @mixin ba-RegionRect {
     $border-radius: 6px;
     $border-size-inner: 1px;
@@ -19,29 +26,54 @@
         bottom: $border-size-outer;
         left: $border-size-outer;
         display: block;
-        background: rgba($bdl-yellorange, 0); // Zero alpha value for transition
+        background-color: $ba-RegionRect-bgColor--default;
         border-radius: $border-radius;
-        box-shadow: 0 0 0 $border-size-inner rgba($white, 1), 0 0 0 $border-size-outer rgba($bdl-yellorange, .6), 0 0 0 0 rgba(0, 0, 0, 0);
-        transition: background 200ms ease, box-shadow 200ms ease;
+        box-shadow: 0 0 0 $border-size-inner rgba($white, 1), 0 0 0 $border-size-outer rgba($ba-RegionRect-color, .6), 0 0 0 0 rgba(0, 0, 0, 0);
+        transition: background-color $ba-RegionRect-transitionDuration ease, box-shadow $ba-RegionRect-transitionDuration ease;
         content: '';
     }
 
     &:hover {
         &::after {
-            background: rgba($bdl-yellorange, .1);
-            box-shadow: 0 0 0 $border-size-inner rgba($white, 1), 0 0 0 $border-size-outer rgba($bdl-yellorange, 1), 0 8px 16px 0 rgba(0, 0, 0, .1);
+            background-color: $ba-RegionRect-bgColor--hover;
+            box-shadow: 0 0 0 $border-size-inner rgba($white, 1), 0 0 0 $border-size-outer rgba($ba-RegionRect-color, 1), 0 8px 16px 0 rgba(0, 0, 0, .1);
         }
     }
 
-    &.is-active,
-    &:focus {
+    &.is-active {
+        &::after {
+            background-color: $ba-RegionRect-bgColor--active;
+            box-shadow: 0 0 0 $border-size-inner rgba($ba-RegionRect-color, 1), 0 0 0 $border-size-outer rgba($ba-RegionRect-color, 1), 0 8px 52px 0 rgba(0, 0, 0, .2);
+            transition-delay: $ba-RegionRect-transitionDelay;
+        }
+    }
+}
+
+@mixin ba-RegionRect-callout {
+    &::after {
+        animation: ba-RegionRect-callout 1s ease-in-out $ba-RegionRect-transitionDelay 0 normal none; // Disabled by default
+    }
+
+    &:not(:focus-within) {
         &::after {
-            background: rgba($bdl-yellorange, 0);
-            box-shadow: 0 0 0 $border-size-inner rgba($bdl-yellorange, 1), 0 0 0 $border-size-outer rgba($bdl-yellorange, 1), 0 8px 52px 0 rgba(0, 0, 0, .2);
+            animation-iteration-count: 1; // Only play the animation if the user is not interacting directly with the element or its descendents
+            animation-fill-mode: forwards;
         }
     }
 }
 
+@keyframes ba-RegionRect-callout {
+    0%,
+    100% {
+        background-color: transparent;
+    }
+
+    30%,
+    70% {
+        background-color: $ba-RegionRect-bgColor--hover;
+    }
+}
+
 .ba-RegionRect {
     @include ba-RegionRect;
 }

package/src/region/RegionRect.tsx

@@ -1,23 +1,29 @@
-import * as React from 'react';
+import React from 'react';
+import noop from 'lodash/noop';
 import classNames from 'classnames';
-import { Shape, styleShape } from './regionUtil';
+import useMountId from '../common/useMountId';
+import { Shape } from '../@types';
+import { styleShape } from './regionUtil';
 import './RegionRect.scss';
 
 type Props = {
     className?: string;
     isActive?: boolean;
+    onMount?: (uuid: string) => void;
     shape?: Shape;
 };
 
 export type RegionRectRef = HTMLDivElement;
 
 export function RegionRect(props: Props, ref: React.Ref<RegionRectRef>): JSX.Element {
-    const { className, isActive, shape } = props;
+    const { className, isActive, onMount = noop, shape } = props;
+    const uuid = useMountId(onMount);
 
     return (
         <div
             ref={ref}
             className={classNames('ba-RegionRect', className, { 'is-active': isActive })}
+            data-ba-reference-id={uuid}
             style={styleShape(shape)}
         />
     );

package/src/region/index.ts

@@ -1,3 +1,4 @@
 export * from './actions';
 export * from './regionUtil';
+export { default as RegionCreationManager } from './RegionCreationManager';
 export { default as RegionManager } from './RegionManager';

package/src/region/regionUtil.ts

@@ -1,12 +1,5 @@
 import * as React from 'react';
-import { Annotation, AnnotationRegion, Position } from '../@types';
-
-export type Shape = {
-    height: number;
-    width: number;
-    x: number;
-    y: number;
-};
+import { Annotation, AnnotationRegion, Position, Shape } from '../@types';
 
 export const EMPTY_STYLE = { display: 'none' };
 

package/src/region/transformUtil.ts

@@ -0,0 +1,28 @@
+export type Point = {
+    x: number;
+    y: number;
+};
+
+export const invertYCoordinate = ({ x, y }: Point, height: number): Point => ({
+    x,
+    y: height > 0 ? height - y : y,
+});
+
+export const rotatePoint = ({ x, y }: Point, rotationInDegrees: number): Point => {
+    const radians = (rotationInDegrees * Math.PI) / 180;
+    const cosine = Math.cos(radians);
+    const sine = Math.sin(radians);
+
+    // Formula to apply a rotation to a point is:
+    // x' = x * cos(θ) - y * sin(θ)
+    // y' = x * sin(θ) + y * cos(θ)
+    return {
+        x: x * cosine - y * sine,
+        y: x * sine + y * cosine,
+    };
+};
+
+export const translatePoint = ({ x, y }: Point, { dx = 0, dy = 0 }: { dx?: number; dy?: number }): Point => ({
+    x: x + dx,
+    y: y + dy,
+});

package/src/store/annotations/actions.ts

@@ -48,3 +48,4 @@ export const fetchAnnotationsAction = createAsyncThunk<APICollection<Annotation>
 
 export const removeAnnotationAction = createAction<string>('REMOVE_ANNOTATION');
 export const setActiveAnnotationIdAction = createAction<string | null>('SET_ACTIVE_ANNOTATION_ID');
+export const setIsInitialized = createAction('SET_IS_INITIALIZED');

package/src/store/annotations/reducer.ts

@@ -1,10 +1,12 @@
 import { createReducer, combineReducers } from '@reduxjs/toolkit';
+import { formatDrawing, isDrawing } from '../../drawing/drawingUtil';
 import { AnnotationsState } from './types';
 import {
     createAnnotationAction,
     fetchAnnotationsAction,
     removeAnnotationAction,
     setActiveAnnotationIdAction,
+    setIsInitialized,
 } from './actions';
 
 const activeAnnotationId = createReducer<AnnotationsState['activeId']>(null, builder =>
@@ -29,20 +31,25 @@ const annotationsAllIds = createReducer<AnnotationsState['allIds']>([], builder
 const annotationsById = createReducer<AnnotationsState['byId']>({}, builder =>
     builder
         .addCase(createAnnotationAction.fulfilled, (state, { payload }) => {
-            state[payload.id] = payload;
+            state[payload.id] = isDrawing(payload) ? formatDrawing(payload) : payload;
         })
         .addCase(removeAnnotationAction, (state, { payload: id }) => {
             delete state[id];
         })
         .addCase(fetchAnnotationsAction.fulfilled, (state, { payload }) => {
             payload.entries.forEach(annotation => {
-                state[annotation.id] = annotation;
+                state[annotation.id] = isDrawing(annotation) ? formatDrawing(annotation) : annotation;
             });
         }),
 );
 
+const setAnnotationsIsInitialized = createReducer(false, builder => {
+    builder.addCase(setIsInitialized, () => true);
+});
+
 export default combineReducers({
     activeId: activeAnnotationId,
     allIds: annotationsAllIds,
     byId: annotationsById,
+    isInitialized: setAnnotationsIsInitialized,
 });

package/src/store/annotations/selectors.ts

@@ -9,3 +9,4 @@ export const getAnnotation = ({ annotations }: State, id: string): Annotation |
 export const getAnnotations = ({ annotations }: State): Annotation[] => [...Object.values(annotations.byId)];
 export const getAnnotationsForLocation = (state: State, location: number): Annotation[] =>
     getAnnotations(state).filter(annotation => getProp(annotation, 'target.location.value') === location);
+export const getIsInitialized = ({ annotations }: State): boolean => annotations.isInitialized;

package/src/store/annotations/types.ts

@@ -4,4 +4,5 @@ export type AnnotationsState = {
     activeId: string | null;
     allIds: string[];
     byId: Record<string, Annotation>;
+    isInitialized: boolean;
 };

package/src/store/common/actions.ts

@@ -1,4 +1,5 @@
 import { createAction } from '@reduxjs/toolkit';
 import { Mode } from './types';
 
+export const setColorAction = createAction<string>('SET_COLOR');
 export const toggleAnnotationModeAction = createAction<Mode>('TOGGLE_ANNOTATION_MODE');