box-annotations 5.2.1-beta.2 → 5.2.1-beta.20

package/src/boundingBoxHighlight/BoundingBoxHighlightManager.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import BaseManager, { Props } from '../common/BaseManager';
+import BoundingBoxHighlightContainer from './BoundingBoxHighlightContainer';
+
+export default class BoundingBoxHighlightManager extends BaseManager {
+    decorate(): void {
+        this.reactEl.classList.add('ba-Layer--boundingBoxHighlight');
+        this.reactEl.dataset.testid = 'ba-Layer--boundingBoxHighlight';
+    }
+
+    render(props: Props): void {
+        if (!this.root) {
+            this.root = ReactDOM.createRoot(this.reactEl);
+        }
+
+        this.root.render(<BoundingBoxHighlightContainer location={this.location} {...props} />);
+    }
+}

package/src/boundingBoxHighlight/index.ts

@@ -0,0 +1 @@
+export { default as BoundingBoxHighlightManager } from './BoundingBoxHighlightManager';

package/src/common/AnnotationCallbacksContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export type AnnotationCallbacks = {
+    onCopyLink?: (params: { annotationId: string; fileVersionId: string }) => void;
+};
+
+export default createContext<AnnotationCallbacks>({});

package/src/common/BaseAnnotator.scss

@@ -7,7 +7,8 @@
     @import '~box-ui-elements/es/styles/common/buttons';
 
     &.is-hidden {
-        .ba-Layer {
+        .ba-Layer,
+        .ba-PopupPortal {
             display: none;
         }
     }
@@ -27,3 +28,15 @@
 .ba-Layer--popup {
     z-index: 4;
 }
+
+.ba-PopupPortal {
+    position: relative;
+    z-index: 10;
+    pointer-events: none;
+
+    .ba-Popup,
+    .ba-PopupV2 {
+        z-index: 150;
+        pointer-events: auto;
+    }
+}

package/src/common/BaseAnnotator.ts

@@ -6,8 +6,11 @@ import DeselectManager from './DeselectManager';
 import EventEmitter from './EventEmitter';
 import i18n from '../utils/i18n';
 import messages from '../messages';
-import { Event, IntlOptions, LegacyEvent, Permissions } from '../@types';
+import { Event, IntlOptions, LegacyEvent, Permissions, SidebarEvent, Token } from '../@types';
+import { BoundingBox, getBoundingBoxHighlights } from '../store/boundingBoxHighlights';
+import { ViewMode } from '../store/options/types';
 import { Features } from '../BoxAnnotations';
+import { scrollToLocation } from '../utils/scroll';
 import './BaseAnnotator.scss';
 
 export type Container = string | HTMLElement;
@@ -37,13 +40,17 @@ export type Options = {
     hasTouch?: boolean;
     initialColor?: string;
     initialMode?: store.Mode;
+    /** View mode: annotations and bounding boxes are mutually exclusive. Defaults to 'annotations'. */
+    initialViewMode?: ViewMode;
     intl: IntlOptions;
     locale?: string;
-    token: string;
+    onCopyLink?: (params: { annotationId: string; fileVersionId: string }) => void;
+    token: Token;
 };
 
 export const CSS_CONTAINER_CLASS = 'ba';
 export const CSS_LOADED_CLASS = 'ba-annotations-loaded';
+export const CSS_POPUP_PORTAL_CLASS = 'ba-PopupPortal';
 export const ANNOTATION_CLASSES: { [M in store.Mode]?: string } = {
     [store.Mode.HIGHLIGHT]: 'ba-is-create--highlight',
     [store.Mode.REGION]: 'ba-is-create--region',
@@ -54,6 +61,8 @@ export default class BaseAnnotator extends EventEmitter {
 
     containerEl?: HTMLElement | null;
 
+    popupPortalEl?: HTMLElement | null;
+
     container: Container;
 
     deselectManager: DeselectManager | null = null;
@@ -62,6 +71,8 @@ export default class BaseAnnotator extends EventEmitter {
 
     intl: IntlShape;
 
+    onCopyLink?: (params: { annotationId: string; fileVersionId: string }) => void;
+
     store: store.AppStore;
 
     constructor({
@@ -72,7 +83,9 @@ export default class BaseAnnotator extends EventEmitter {
         fileOptions,
         initialColor,
         initialMode,
+        initialViewMode = 'annotations',
         intl,
+        onCopyLink,
         token,
     }: Options) {
         super();
@@ -88,17 +101,21 @@ export default class BaseAnnotator extends EventEmitter {
             },
             common: { color: initialColor, mode: initialMode },
             options: {
+                apiHost,
                 features,
                 fileId: file.id,
                 fileVersionId: fileOptionsVersionId ?? fileVersionId,
                 isCurrentFileVersion: !fileOptionsVersionId || fileOptionsVersionId === currentFileVersionId,
                 permissions: file.permissions,
+                token,
+                viewMode: initialViewMode,
             },
         };
 
         this.container = container;
         this.features = features;
         this.intl = i18n.createIntlProvider(intl);
+        this.onCopyLink = onCopyLink;
         this.store = store.createStore(initialState, {
             api: new API({ apiHost, token }),
         });
@@ -109,6 +126,15 @@ export default class BaseAnnotator extends EventEmitter {
         this.addListener(Event.ANNOTATION_REMOVE, this.handleRemove);
         this.addListener(Event.COLOR_SET, this.handleSetColor);
         this.addListener(Event.VISIBLE_SET, this.handleSetVisible);
+        this.addListener(Event.BOUNDING_BOX_HIGHLIGHTS_SET, this.handleSetBoundingBoxHighlights);
+        this.addListener(Event.BOUNDING_BOX_HIGHLIGHT_NAVIGATE, this.handleNavigateBoundingBoxHighlight);
+        this.addListener(Event.BOUNDING_BOX_HIGHLIGHT_SELECT, this.handleSelectBoundingBoxHighlight);
+        this.addListener(Event.VIEW_MODE_SET, this.handleSetViewMode);
+
+        this.addListener(SidebarEvent.SIDEBAR_ANNOTATION_UPDATE, this.handleSidebarAnnotationUpdate);
+        this.addListener(SidebarEvent.SIDEBAR_REPLY_CREATE, this.handleSidebarReplyCreate);
+        this.addListener(SidebarEvent.SIDEBAR_REPLY_UPDATE, this.handleSidebarReplyUpdate);
+        this.addListener(SidebarEvent.SIDEBAR_REPLY_DELETE, this.handleSidebarReplyDelete);
 
         // Load any required data at startup
         this.hydrate();
@@ -119,6 +145,11 @@ export default class BaseAnnotator extends EventEmitter {
             this.containerEl.classList.remove(CSS_CONTAINER_CLASS);
         }
 
+        if (this.popupPortalEl) {
+            this.popupPortalEl.remove();
+            this.popupPortalEl = null;
+        }
+
         if (this.annotatedEl) {
             this.annotatedEl.classList.remove(CSS_LOADED_CLASS);
         }
@@ -134,14 +165,14 @@ export default class BaseAnnotator extends EventEmitter {
         this.removeListener(Event.ANNOTATION_REMOVE, this.handleRemove);
         this.removeListener(Event.COLOR_SET, this.handleSetColor);
         this.removeListener(Event.VISIBLE_SET, this.handleSetVisible);
-    }
-
-    public getActiveId(): string | null {
-        return store.getActiveAnnotationId(this.store.getState());
-    }
-
-    public getAnnotationContainerEl(): HTMLElement | null {
-        return this.containerEl ?? null;
+        this.removeListener(Event.BOUNDING_BOX_HIGHLIGHTS_SET, this.handleSetBoundingBoxHighlights);
+        this.removeListener(Event.BOUNDING_BOX_HIGHLIGHT_NAVIGATE, this.handleNavigateBoundingBoxHighlight);
+        this.removeListener(Event.BOUNDING_BOX_HIGHLIGHT_SELECT, this.handleSelectBoundingBoxHighlight);
+        this.removeListener(Event.VIEW_MODE_SET, this.handleSetViewMode);
+        this.removeListener(SidebarEvent.SIDEBAR_ANNOTATION_UPDATE, this.handleSidebarAnnotationUpdate);
+        this.removeListener(SidebarEvent.SIDEBAR_REPLY_CREATE, this.handleSidebarReplyCreate);
+        this.removeListener(SidebarEvent.SIDEBAR_REPLY_UPDATE, this.handleSidebarReplyUpdate);
+        this.removeListener(SidebarEvent.SIDEBAR_REPLY_DELETE, this.handleSidebarReplyDelete);
     }
 
     public init(scale = 1, rotation = 0): void {
@@ -157,6 +188,12 @@ export default class BaseAnnotator extends EventEmitter {
         this.annotatedEl.classList.add(CSS_LOADED_CLASS);
         this.containerEl.classList.add(CSS_CONTAINER_CLASS);
 
+        if (!this.popupPortalEl) {
+            this.popupPortalEl = this.containerEl.ownerDocument.createElement('div');
+            this.popupPortalEl.classList.add(CSS_POPUP_PORTAL_CLASS);
+            this.containerEl.appendChild(this.popupPortalEl);
+        }
+
         // Defer to the child class to render annotations
         this.render();
 
@@ -170,10 +207,6 @@ export default class BaseAnnotator extends EventEmitter {
         return getProp(this.features, feature, false);
     }
 
-    public isPopupOpen(): boolean {
-        return !!this.containerEl?.querySelector('.ba-Popup');
-    }
-
     public removeAnnotation = (annotationId: string): void => {
         this.store.dispatch(store.removeAnnotationAction(annotationId));
     };
@@ -183,6 +216,88 @@ export default class BaseAnnotator extends EventEmitter {
         // Called by box-content-preview
     }
 
+    public scrollToBoundingBoxHighlight(highlightId: string | null): void {
+        if (!highlightId || !this.annotatedEl) {
+            return;
+        }
+
+        const highlights = getBoundingBoxHighlights(this.store.getState());
+        const highlight = highlights.find((h: BoundingBox) => h.id === highlightId);
+
+        if (!highlight) {
+            return;
+        }
+
+        const referenceEl = this.getScrollReferenceForHighlight(highlight);
+        if (!referenceEl) {
+            return;
+        }
+
+        const offsets = {
+            x: highlight.x + highlight.width / 2,
+            y: highlight.y + highlight.height / 2,
+        };
+
+        scrollToLocation(this.annotatedEl, referenceEl, {
+            offsets: this.getAdjustedScrollOffsets(offsets),
+            smooth: true,
+        });
+    }
+
+    /** Returns the element to scroll relative to for the given bounding box highlight. */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    protected getScrollReferenceForHighlight(_highlight: BoundingBox): HTMLElement | null | undefined {
+        return undefined; // Must be implemented in child class
+    }
+
+    /** Adjusts scroll offsets before passing to scrollToLocation (e.g. to apply rotation). */
+    protected getAdjustedScrollOffsets(offsets: { x: number; y: number }): { x: number; y: number } {
+        return offsets;
+    }
+
+    /**
+     * Sets the bounding box highlights to display. This replaces all existing bounding boxes.
+     * Triggers a re-render.
+     *
+     * Note: Bounding boxes are only visible when viewMode is set to 'boundingBoxes'.
+     *
+     * @param {BoundingBox[]} boundingBoxes - Array of bounding box definitions with coordinates and page numbers
+     */
+    public setBoundingBoxHighlights(boundingBoxes: BoundingBox[]): void {
+        this.store.dispatch(store.setBoundingBoxHighlightsAction(boundingBoxes));
+        this.render();
+    }
+
+    /**
+     * Sets the view mode for the annotator. Annotations and bounding boxes are mutually exclusive.
+     * Triggers a re-render.
+     *
+     * Side effects:
+     * - Switching to 'boundingBoxes': Clears active annotation ID
+     * - Switching to 'annotations': Clears selected bounding box ID
+     *
+     * @param {ViewMode} viewMode - Either 'annotations' (default) or 'boundingBoxes'
+     */
+    public setViewMode(viewMode: ViewMode): void {
+        this.store.dispatch(store.setViewModeAction(viewMode));
+        this.render();
+    }
+
+    /**
+     * Selects a bounding box highlight and scrolls to it. Pass null to deselect.
+     *
+     * Note: For programmatic navigation (prev/next), use the navigateBoundingBoxHighlightAction
+     * which emits BOUNDING_BOX_HIGHLIGHT_NAVIGATE events.
+     *
+     * @param {string | null} highlightId - The ID of the bounding box to select, or null to clear selection
+     */
+    public selectBoundingBoxHighlight(highlightId: string | null): void {
+        this.store.dispatch(store.setSelectedBoundingBoxHighlightAction(highlightId));
+        if (highlightId) {
+            this.scrollToBoundingBoxHighlight(highlightId);
+        }
+    }
+
     public setActiveId(annotationId: string | null): void {
         this.store.dispatch(store.setActiveAnnotationIdAction(annotationId));
     }
@@ -235,6 +350,38 @@ export default class BaseAnnotator extends EventEmitter {
         this.setColor(color);
     };
 
+    protected handleSetBoundingBoxHighlights = (boundingBoxes: BoundingBox[]): void => {
+        this.setBoundingBoxHighlights(boundingBoxes);
+    };
+
+    protected handleNavigateBoundingBoxHighlight = (highlightId: string): void => {
+        this.scrollToBoundingBoxHighlight(highlightId);
+    };
+
+    protected handleSelectBoundingBoxHighlight = (highlightId: string | null): void => {
+        this.selectBoundingBoxHighlight(highlightId);
+    };
+
+    protected handleSetViewMode = ({ viewMode }: { viewMode: ViewMode }): void => {
+        this.setViewMode(viewMode);
+    };
+
+    protected handleSidebarAnnotationUpdate = (annotation: store.SidebarAnnotationUpdatePayload): void => {
+        this.store.dispatch(store.applySidebarAnnotationUpdateAction(annotation));
+    };
+
+    protected handleSidebarReplyCreate = (payload: store.SidebarReplyMutationPayload): void => {
+        this.store.dispatch(store.applySidebarReplyCreateAction(payload));
+    };
+
+    protected handleSidebarReplyUpdate = (payload: store.SidebarReplyMutationPayload): void => {
+        this.store.dispatch(store.applySidebarReplyUpdateAction(payload));
+    };
+
+    protected handleSidebarReplyDelete = ({ annotationId, id }: { annotationId: string; id: string }): void => {
+        this.store.dispatch(store.applySidebarReplyDeleteAction({ annotationId, replyId: id }));
+    };
+
     protected hydrate(): void {
         // Redux dispatch method signature doesn't seem to like async actions
         this.store.dispatch<any>(store.fetchAnnotationsAction()); // eslint-disable-line @typescript-eslint/no-explicit-any

package/src/common/BaseManager.ts

@@ -1,6 +1,7 @@
 import * as ReactDOM from 'react-dom/client';
 import { IntlShape } from 'react-intl';
 import { Store } from 'redux';
+import { AnnotationCallbacks } from './AnnotationCallbacksContext';
 import { applyResinTags } from '../utils/resin';
 import { TARGET_TYPE } from '../constants';
 
@@ -14,6 +15,7 @@ export type Options = {
 };
 
 export type Props = {
+    callbacks?: AnnotationCallbacks;
     intl: IntlShape;
     store: Store;
 };

package/src/common/DeselectListener.tsx

@@ -6,7 +6,9 @@ export default function DeselectListener(): null {
     const dispatch = useDispatch();
 
     React.useEffect(() => {
-        const handleMouseDown = (): void => {
+        const handleMouseDown = (event: MouseEvent): void => {
+            // Popup is portaled outside .ba-Layer; native mousedown still bubbles here.
+            if ((event.target as Element | null)?.closest?.('.ba-PopupV2, .ba-Popup')) return;
             dispatch(setActiveAnnotationIdAction(null));
         };
 

package/src/common/withProviders.tsx

@@ -2,8 +2,10 @@ import * as React from 'react';
 import { IntlShape, RawIntlProvider } from 'react-intl';
 import { Provider as StoreProvider } from 'react-redux';
 import { Store } from 'redux';
+import AnnotationCallbacksContext, { AnnotationCallbacks } from './AnnotationCallbacksContext';
 
 type WrapperProps = {
+    callbacks?: AnnotationCallbacks;
     intl: IntlShape;
     store: Store;
 };
@@ -11,11 +13,13 @@ type WrapperProps = {
 type WrapperReturn<P> = React.FC<P & WrapperProps>;
 
 export default function withProviders<P extends object>(WrappedComponent: React.ComponentType<P>): WrapperReturn<P> {
-    return function RootProvider({ intl, store, ...rest }: P & WrapperProps): JSX.Element {
+    return function RootProvider({ callbacks, intl, store, ...rest }: P & WrapperProps): JSX.Element {
         return (
             <RawIntlProvider value={intl}>
                 <StoreProvider store={store}>
-                    <WrappedComponent {...(rest as P)} />
+                    <AnnotationCallbacksContext.Provider value={callbacks ?? {}}>
+                        <WrappedComponent {...(rest as P)} />
+                    </AnnotationCallbacksContext.Provider>
                 </StoreProvider>
             </RawIntlProvider>
         );

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightList.scss

@@ -0,0 +1,8 @@
+.ba-BoundingBoxHighlightList {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightList.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import BoundingBoxHighlightRect from './BoundingBoxHighlightRect';
+import { BoundingBox } from '../../store/boundingBoxHighlights/types';
+import './BoundingBoxHighlightList.scss';
+
+type Props = {
+    /**
+     * All bounding box highlights in the document.
+     */
+    allBoundingBoxes: BoundingBox[];
+    /**
+     * Bounding boxes on the current page.
+     */
+    boundingBoxes: BoundingBox[];
+    /**
+     * Callback invoked to navigate to the previous or next bounding box highlight.
+     */
+    onNavigate?: (id: string) => void;
+    /**
+     * Callback invoked when the user clicks on a bounding box highlight.
+     */
+    onSelect?: (id: string) => void;
+    /**
+     * The ID of the selected bounding box highlight.
+     */
+    selectedId: string | null;
+};
+
+const BoundingBoxHighlightList = ({
+    allBoundingBoxes,
+    boundingBoxes,
+    onNavigate,
+    onSelect,
+    selectedId,
+}: Props): React.ReactElement | null => {
+    const total = allBoundingBoxes.length;
+
+    if (total === 0) {
+        return null;
+    }
+
+    const selectedIndex = allBoundingBoxes.findIndex(h => h.id === selectedId);
+    const prevId = selectedIndex > 0 ? allBoundingBoxes[selectedIndex - 1].id : undefined;
+    const nextId = selectedIndex < total - 1 ? allBoundingBoxes[selectedIndex + 1].id : undefined;
+
+    return (
+        <div className="ba-BoundingBoxHighlightList" data-testid="ba-BoundingBoxHighlightList">
+            {boundingBoxes.map(bbox => {
+                return (
+                    <BoundingBoxHighlightRect
+                        key={bbox.id}
+                        boundingBox={bbox}
+                        currentIndex={selectedIndex}
+                        isSelected={selectedId === bbox.id}
+                        nextId={nextId}
+                        onNavigate={onNavigate}
+                        onSelect={onSelect}
+                        prevId={prevId}
+                        total={total}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+export default React.memo(BoundingBoxHighlightList);

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightNav.scss

@@ -0,0 +1,73 @@
+$ba-BoundingBoxHighlightNav-bg: #fff;
+$ba-BoundingBoxHighlightNav-shadow: 0 6px 20px rgba(0, 0, 0, .1);
+$ba-BoundingBoxHighlightNav-arrow: #909090;
+$ba-BoundingBoxHighlightNav-border: #e8e8e8;
+$ba-BoundingBoxHighlightNav-counter: #222;
+
+.ba-BoundingBoxHighlightNav {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    z-index: 1;
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    margin-bottom: 6px;
+    padding: 3px;
+    white-space: nowrap;
+    background: $ba-BoundingBoxHighlightNav-bg;
+    border: 1px solid $ba-BoundingBoxHighlightNav-border;
+    border-radius: 20px;
+    box-shadow: $ba-BoundingBoxHighlightNav-shadow;
+    transform: translateX(-50%);
+    cursor: default;
+    pointer-events: auto;
+}
+
+.ba-BoundingBoxHighlightNav-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    line-height: 1;
+    background: transparent;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 150ms ease;
+
+    svg {
+        path {
+            fill: $ba-BoundingBoxHighlightNav-arrow;
+        }
+    }
+
+    &:hover:not(:disabled) {
+        background: rgba(0, 0, 0, .06);
+    }
+
+    &:active:not(:disabled) {
+        background: rgba(0, 0, 0, .12);
+    }
+
+    &:disabled {
+        cursor: default;
+
+        svg {
+            path {
+                fill: $ba-BoundingBoxHighlightNav-border;
+            }
+        }
+    }
+}
+
+.ba-BoundingBoxHighlightNav-counter {
+    padding: 0 4px;
+    color: $ba-BoundingBoxHighlightNav-counter;
+    font-weight: normal;
+    font-size: 15px;
+    font-family: Lato, Arial, sans-serif;
+    user-select: none;
+}

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightNav.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import ChevronLeft from '../../icons/ChevronLeft';
+import ChevronRight from '../../icons/ChevronRight';
+import messages from './messages';
+import './BoundingBoxHighlightNav.scss';
+
+type Props = {
+    currentIndex: number;
+    total: number;
+    onPrev: (event: React.MouseEvent | KeyboardEvent) => void;
+    onNext: (event: React.MouseEvent | KeyboardEvent) => void;
+};
+
+const BoundingBoxHighlightNav = ({ currentIndex, total, onPrev, onNext }: Props): JSX.Element => {
+    const intl = useIntl();
+    const isPrevDisabled = currentIndex === 0;
+    const isNextDisabled = currentIndex === total - 1;
+
+    React.useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent): void => {
+            if (event.key === 'ArrowLeft') {
+                event.stopPropagation();
+                if (!isPrevDisabled) {
+                    onPrev(event);
+                }
+            } else if (event.key === 'ArrowRight') {
+                event.stopPropagation();
+                if (!isNextDisabled) {
+                    onNext(event);
+                }
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown, { capture: true });
+        return () => document.removeEventListener('keydown', handleKeyDown, { capture: true });
+    }, [isPrevDisabled, isNextDisabled, onPrev, onNext]);
+
+    return (
+        <div className="ba-BoundingBoxHighlightNav" data-testid="ba-BoundingBoxHighlightNav">
+            <button
+                aria-label={intl.formatMessage(messages.ariaLabelViewPrevReference)}
+                className="ba-BoundingBoxHighlightNav-btn"
+                data-testid="ba-BoundingBoxHighlightNav-prev"
+                disabled={isPrevDisabled}
+                onClick={onPrev}
+                type="button"
+            >
+                <ChevronLeft width={20} height={20} />
+            </button>
+            <span className="ba-BoundingBoxHighlightNav-counter">
+                {currentIndex + 1} / {total}
+            </span>
+            <button
+                aria-label={intl.formatMessage(messages.ariaLabelViewNextReference)}
+                className="ba-BoundingBoxHighlightNav-btn"
+                data-testid="ba-BoundingBoxHighlightNav-next"
+                disabled={isNextDisabled}
+                onClick={onNext}
+                type="button"
+            >
+                <ChevronRight width={20} height={20} />
+            </button>
+        </div>
+    );
+};
+
+export default BoundingBoxHighlightNav;

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightRect.scss

@@ -0,0 +1,22 @@
+$ba-BoundingBoxHighlight-color: #0061d5;
+$ba-BoundingBoxHighlight-bgColor--default: rgba($ba-BoundingBoxHighlight-color, .05);
+$ba-BoundingBoxHighlight-bgColor--hover: rgba($ba-BoundingBoxHighlight-color, .16);
+$ba-BoundingBoxHighlight-bgColor--selected: rgba($ba-BoundingBoxHighlight-color, .1);
+
+.ba-BoundingBoxHighlightRect {
+    position: absolute;
+    box-sizing: border-box;
+    background-color: $ba-BoundingBoxHighlight-bgColor--default;
+    border: 2px solid rgba($ba-BoundingBoxHighlight-color, .2);
+    border-radius: 8px;
+    outline: none;
+    cursor: pointer;
+    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
+    pointer-events: auto;
+
+    &.is-selected {
+        background-color: $ba-BoundingBoxHighlight-bgColor--selected;
+        border-color: $ba-BoundingBoxHighlight-color;
+        box-shadow: 0 0 0 2px rgba($ba-BoundingBoxHighlight-color, .3), 0 4px 12px rgba(0, 0, 0, .15);
+    }
+}