box-annotations 5.2.1-beta.1 → 5.2.1-beta.12

package/src/drawing/DrawingManager.tsx

@@ -1,9 +1,20 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import BaseManager, { Props } from '../common/BaseManager';
+import BaseManager, { Options as BaseOptions, Props } from '../common/BaseManager';
 import DrawingAnnotationsContainer from './DrawingAnnotationsContainer';
 
+export type Options = BaseOptions & {
+    popupPortalEl?: HTMLElement | null;
+};
+
 export default class DrawingListManager extends BaseManager {
+    popupPortalEl?: HTMLElement | null;
+
+    constructor({ popupPortalEl, ...options }: Options) {
+        super(options);
+        this.popupPortalEl = popupPortalEl;
+    }
+
     decorate(): void {
         this.reactEl.classList.add('ba-Layer--drawing');
         this.reactEl.dataset.testid = 'ba-Layer--drawing';
@@ -14,6 +25,6 @@ export default class DrawingListManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<DrawingAnnotationsContainer referenceEl={this.referenceEl} targetType={this.targetType} location={this.location} {...props} />);
+        this.root.render(<DrawingAnnotationsContainer referenceEl={this.referenceEl} targetType={this.targetType} location={this.location} popupPortalEl={this.popupPortalEl} {...props} />);
     }
 }

package/src/drawing/DrawingTarget.tsx

@@ -64,6 +64,7 @@ export const DrawingTarget = (props: Props, ref: React.Ref<DrawingTargetRef>): J
         <a
             ref={ref}
             className={classNames('ba-DrawingTarget', className, { 'is-active': isActive })}
+            data-ba-annotation-id={annotationId}
             data-resin-itemid={annotationId}
             data-resin-target="highlightDrawing"
             data-testid={`ba-AnnotationTarget-${annotationId}`}

package/src/highlight/HighlightTarget.tsx

@@ -69,6 +69,7 @@ const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.
         <a
             ref={ref}
             className={classNames('ba-HighlightTarget', className, { 'is-active': isActive })}
+            data-ba-annotation-id={annotationId}
             data-ba-reference-id={uuid}
             data-resin-itemid={annotationId}
             data-resin-target="highlightText"

package/src/icons/ChevronLeft.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+function ChevronLeft(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg
+            data-testid="ChevronLeft"
+            fill="none"
+            focusable="false"
+            height="1em"
+            role="img"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            <path
+                d="M13.293 4.293a1 1 0 1 1 1.414 1.414L8.414 12l6.293 6.293.068.076a1 1 0 0 1-1.406 1.406l-.076-.068L7 13.414a2 2 0 0 1 0-2.828l6.293-6.293Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}
+
+export default ChevronLeft;

package/src/icons/ChevronRight.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+function ChevronRight(props: React.SVGProps<SVGSVGElement>): JSX.Element {
+    return (
+        <svg
+            data-testid="ChevronRight"
+            fill="none"
+            focusable="false"
+            height="1em"
+            role="img"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            <path
+                d="M9.293 4.293a1 1 0 0 1 1.414 0L17 10.586a2 2 0 0 1 0 2.828l-6.293 6.293a1 1 0 0 1-1.414-1.414L15.586 12 9.293 5.707a1 1 0 0 1 0-1.414Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}
+
+export default ChevronRight;

package/src/image/ImageAnnotator.ts

@@ -1,15 +1,18 @@
 import { Unsubscribe } from 'redux';
 import BaseAnnotator, { Options } from '../common/BaseAnnotator';
 import PopupManager from '../popup/PopupManager';
+import { BoundingBoxHighlightManager } from '../boundingBoxHighlight';
 import { centerDrawing, DrawingManager, isDrawing } from '../drawing';
 import { centerRegion, isRegion, RegionCreationManager, RegionManager } from '../region';
 import { CreatorStatus, getCreatorStatus } from '../store/creator';
-import { getAnnotation, getFileId, getIsCurrentFileVersion, getRotation } from '../store';
+import { getAnnotation, getFileId, getIsCurrentFileVersion, getRotation, getViewMode } from '../store';
 import { getRotatedPosition } from '../utils/rotate';
 import { Manager } from '../common/BaseManager';
 import { scrollToLocation } from '../utils/scroll';
 import './ImageAnnotator.scss';
 
+import type { ViewMode } from '../store/options/types';
+
 export const CSS_IS_DRAWING_CLASS = 'ba-is-drawing';
 
 export default class ImageAnnotator extends BaseAnnotator {
@@ -17,6 +20,9 @@ export default class ImageAnnotator extends BaseAnnotator {
 
     managers: Set<Manager> = new Set();
 
+    /** Tracks which view mode the current managers were created for. Used to destroy/recreate when switching. */
+    private managersViewMode: ViewMode | null = null;
+
     storeHandler?: Unsubscribe;
 
     constructor(options: Options) {
@@ -41,10 +47,18 @@ export default class ImageAnnotator extends BaseAnnotator {
         return this.containerEl?.querySelector('.bp-image');
     }
 
+    /** Destroys all managers and clears the cache. Call when switching view modes. */
+    private clearManagers(): void {
+        this.managers.forEach(manager => manager.destroy());
+        this.managers.clear();
+        this.managersViewMode = null;
+    }
+
     getManagers(parentEl: HTMLElement, referenceEl: HTMLElement): Set<Manager> {
         const fileId = getFileId(this.store.getState());
         const isCurrentFileVersion = getIsCurrentFileVersion(this.store.getState());
         const resinTags = { fileid: fileId, iscurrent: isCurrentFileVersion };
+        const viewMode = getViewMode(this.store.getState());
 
         this.managers.forEach(manager => {
             if (!manager.exists(parentEl)) {
@@ -54,8 +68,13 @@ export default class ImageAnnotator extends BaseAnnotator {
         });
 
         if (this.managers.size === 0) {
-            this.managers.add(new PopupManager({ referenceEl, resinTags }));
-            this.managers.add(new DrawingManager({ referenceEl, resinTags }));
+            if (viewMode === 'boundingBoxes') {
+                this.managers.add(new BoundingBoxHighlightManager({ location: 1, referenceEl, resinTags }));
+                return this.managers;
+            }
+
+            this.managers.add(new PopupManager({ popupPortalEl: this.popupPortalEl, referenceEl, resinTags }));
+            this.managers.add(new DrawingManager({ popupPortalEl: this.popupPortalEl, referenceEl, resinTags }));
             this.managers.add(new RegionManager({ referenceEl, resinTags }));
             this.managers.add(new RegionCreationManager({ referenceEl, resinTags }));
         }
@@ -84,11 +103,17 @@ export default class ImageAnnotator extends BaseAnnotator {
     render(): void {
         const referenceEl = this.getReference();
         const rotation = getRotation(this.store.getState()) || 0;
+        const viewMode = getViewMode(this.store.getState());
 
         if (!this.annotatedEl || !referenceEl) {
             return;
         }
 
+        if (this.managersViewMode !== null && this.managersViewMode !== viewMode) {
+            this.clearManagers();
+        }
+        this.managersViewMode = viewMode;
+
         this.getManagers(this.annotatedEl, referenceEl).forEach(manager => {
             manager.style({
                 height: `${referenceEl.offsetHeight}px`,
@@ -107,6 +132,27 @@ export default class ImageAnnotator extends BaseAnnotator {
         this.postRender();
     }
 
+    public postRender(): void {
+        // DeselectManager is only needed for annotation creation; skip in bounding box mode.
+        if (getViewMode(this.store.getState()) === 'boundingBoxes') {
+            if (this.deselectManager) {
+                this.deselectManager.destroy();
+                this.deselectManager = null;
+            }
+            return;
+        }
+        super.postRender();
+    }
+
+    protected getScrollReferenceForHighlight(): HTMLElement | null | undefined {
+        return this.getReference();
+    }
+
+    protected getAdjustedScrollOffsets(offsets: { x: number; y: number }): { x: number; y: number } {
+        const rotation = getRotation(this.store.getState()) || 0;
+        return getRotatedPosition(offsets, rotation);
+    }
+
     scrollToAnnotation(annotationId: string | null): void {
         if (!annotationId) {
             return;

package/src/media/MediaAnnotator.ts

@@ -46,7 +46,7 @@ export default class MediaAnnotator extends BaseAnnotator {
 
 
     addManagers(referenceEl: HTMLVideoElement, resinTags: { fileid: string|null; iscurrent: boolean }): void {
-        this.managers.add(new PopupManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
+        this.managers.add(new PopupManager({ location: MEDIA_LOCATION_INDEX, popupPortalEl: this.popupPortalEl, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
         this.managers.add(new DrawingManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
         this.managers.add(new RegionManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
         this.managers.add(new RegionCreationManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));

package/src/popup/PopupContainer.tsx

@@ -15,12 +15,21 @@ import {
     setMessageAction,
     getCreatorReferenceId,
 } from '../store';
+import { getActiveAnnotationId } from '../store/annotations/selectors';
 import { isFeatureEnabled } from '../store/options';
 import { createDrawingAction } from '../drawing/actions';
 import { createHighlightAction } from '../highlight/actions';
 import { createRegionAction } from '../region';
+import { TARGET_TYPE } from '../constants';
+
+export type OwnProps = {
+    location: number;
+    popupPortalEl?: HTMLElement | null;
+    targetType?: TARGET_TYPE;
+};
 
 export type Props = {
+    activeAnnotationId: string | null;
     isPromoting: boolean;
     isThreadedAnnotation?: boolean;
     message: string;
@@ -30,8 +39,9 @@ export type Props = {
     status: CreatorStatus;
 };
 
-export const mapStateToProps = (state: AppState, { location }: { location: number }): Props => {
+export const mapStateToProps = (state: AppState, { location }: OwnProps): Props => {
     return {
+        activeAnnotationId: getActiveAnnotationId(state),
         isPromoting: getIsPromoting(state),
         isThreadedAnnotation: isFeatureEnabled(state, 'isThreadedAnnotation'),
         message: getCreatorMessage(state),

package/src/popup/PopupLayer.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import noop from 'lodash/noop';
 import PopupReply from '../components/Popups/PopupReply';
+import PopupV2 from '../components/Popups/PopupV2';
 import { CreateArg as DrawingCreateArg } from '../drawing/actions';
 import { CreateArg as HighlightCreateArg } from '../highlight/actions';
 import { CreateArg as RegionCreateArg } from '../region/actions';
@@ -13,10 +15,13 @@ import {
     Mode,
 } from '../store';
 import { PopupReference } from '../components/Popups/Popper';
-import './PopupLayer.scss';
+
 import { TARGET_TYPE } from '../constants';
 
+import './PopupLayer.scss';
+
 export type Props = {
+    activeAnnotationId: string | null;
     createDrawing?: (arg: DrawingCreateArg) => void;
     createHighlight?: (arg: HighlightCreateArg) => void;
     createRegion?: (arg: RegionCreateArg) => void;
@@ -25,6 +30,7 @@ export type Props = {
     location: number;
     message: string;
     mode: Mode;
+    popupPortalEl?: HTMLElement | null;
     referenceId: string | null;
     resetCreator: () => void;
     setMessage: (message: string) => void;
@@ -41,6 +47,7 @@ const modeStagedMap: { [M in Mode]?: (staged: CreatorItem | null) => boolean } =
 
 const PopupLayer = (props: Props): JSX.Element | null => {
     const {
+        activeAnnotationId,
         createDrawing = noop,
         createHighlight = noop,
         createRegion = noop,
@@ -48,6 +55,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         isThreadedAnnotation = false,
         message,
         mode,
+        popupPortalEl,
         referenceId,
         resetCreator,
         setMessage,
@@ -57,6 +65,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
     } = props;
 
     const [reference, setReference] = React.useState<PopupReference | null>(null);
+    const [activeReference, setActiveReference] = React.useState<PopupReference | null>(null);
     const canCreate = (modeStagedMap[mode]?.(staged ?? null) ?? false) || isPromoting;
     const canReply = status !== CreatorStatus.started && status !== CreatorStatus.init;
     const isPending = status === CreatorStatus.pending;
@@ -69,17 +78,19 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         setMessage(text);
     };
 
-    const handleSubmit = (): void => {
+    const handleSubmit = (text?: string): void => {
         if (!staged) {
             return;
         }
 
+        const submitMessage = text ?? message;
+
         if (isCreatorStagedHighlight(staged)) {
-            createHighlight({ ...staged, message, targetType });
+            createHighlight({ ...staged, message: submitMessage, targetType });
         } else if (isCreatorStagedRegion(staged)) {
-            createRegion({ ...staged, message, targetType });
+            createRegion({ ...staged, message: submitMessage, targetType });
         } else if (isCreatorStagedDrawing(staged)) {
-            createDrawing({ ...staged, message, targetType });
+            createDrawing({ ...staged, message: submitMessage, targetType });
         }
     };
 
@@ -87,24 +98,60 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         setReference(referenceId ? document.querySelector(`[data-ba-reference-id="${referenceId}"]`) : null);
     }, [referenceId]);
 
+    React.useEffect(() => {
+        if (activeAnnotationId && isThreadedAnnotation) {
+            const el = document.querySelector(`[data-ba-annotation-id="${CSS.escape(activeAnnotationId)}"]`);
+            setActiveReference(el);
+        } else {
+            setActiveReference(null);
+        }
+    }, [activeAnnotationId, isThreadedAnnotation]);
+
+    const showCreator = canCreate && canReply && reference && staged;
+
+    if (showCreator && isThreadedAnnotation) {
+        return (
+            <div className="ba-PopupLayer-popup">
+                <PopupV2
+                    onSubmit={handleSubmit}
+                    popupPortalEl={popupPortalEl}
+                    reference={reference}
+                />
+            </div>
+        );
+    }
+
+    if (showCreator) {
+        if (!popupPortalEl) return null;
+        return ReactDOM.createPortal(
+            <div className="ba-PopupLayer-popup">
+                <PopupReply
+                    isPending={isPending}
+                    onCancel={handleCancel}
+                    onChange={handleChange}
+                    onSubmit={handleSubmit}
+                    reference={reference}
+                    value={message}
+                />
+            </div>,
+            popupPortalEl,
+        );
+    }
+
+    if (isThreadedAnnotation && activeAnnotationId && activeReference) {
+        return (
+            <div className="ba-PopupLayer-popup">
+                <PopupV2
+                    annotationId={activeAnnotationId}
+                    onSubmit={handleSubmit}
+                    popupPortalEl={popupPortalEl}
+                    reference={activeReference}
+                />
+            </div>
+        );
+    }
 
-    return (
-        <>
-            {canCreate && canReply && reference && staged && (
-                <div className="ba-PopupLayer-popup">
-                    <PopupReply
-                        isPending={isPending}
-                        isThreadedAnnotation={isThreadedAnnotation}
-                        onCancel={handleCancel}
-                        onChange={handleChange}
-                        onSubmit={handleSubmit}
-                        reference={reference}
-                        value={message}
-                    />
-                </div>
-            )}
-        </>
-    );
+    return null;
 };
 
 export default PopupLayer;

package/src/popup/PopupManager.tsx

@@ -1,9 +1,20 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import BaseManager, { Props } from '../common/BaseManager';
+import BaseManager, { Options as BaseOptions, Props } from '../common/BaseManager';
 import PopupContainer from './PopupContainer';
 
+export type Options = BaseOptions & {
+    popupPortalEl?: HTMLElement | null;
+};
+
 export default class PopupManager extends BaseManager {
+    popupPortalEl?: HTMLElement | null;
+
+    constructor({ popupPortalEl, ...options }: Options) {
+        super(options);
+        this.popupPortalEl = popupPortalEl;
+    }
+
     decorate(): void {
         this.reactEl.classList.add('ba-Layer--popup');
         this.reactEl.dataset.testid = 'ba-Layer--popup';
@@ -13,7 +24,14 @@ export default class PopupManager extends BaseManager {
         if (!this.root) {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
-       
-        this.root.render(<PopupContainer location={this.location}  {...props} targetType={this.targetType} />);
+
+        this.root.render(
+            <PopupContainer
+                location={this.location}
+                {...props}
+                popupPortalEl={this.popupPortalEl}
+                targetType={this.targetType}
+            />,
+        );
     }
 }

package/src/region/RegionAnnotation.tsx

@@ -36,6 +36,7 @@ export const RegionAnnotation = (props: Props, ref: React.Ref<RegionAnnotationRe
         <button
             ref={ref}
             className={classNames('ba-RegionAnnotation', className, { 'is-active': isActive })}
+            data-ba-annotation-id={annotationId}
             data-resin-itemid={annotationId}
             data-resin-target="highlightRegion"
             data-testid={`ba-AnnotationTarget-${annotationId}`}

package/src/region/RegionCreation.tsx

@@ -9,9 +9,9 @@ import { getVideoCurrentTimeInMilliseconds } from '../utils/useVideoTiming';
 
 type Props = {
     isCreating: boolean;
-    isRotated: boolean;
     location: number;
     resetCreator: () => void;
+    rotation: number;
     setReferenceId: (uuid: string) => void;
     setStaged: (staged: CreatorItemRegion | null) => void;
     setStatus: (status: CreatorStatus) => void;
@@ -27,7 +27,7 @@ type State = {
 export default class RegionCreation extends React.PureComponent<Props, State> {
     static defaultProps = {
         isCreating: false,
-        isRotated: false,
+        rotation: 0,
     };
 
     state: State = {};
@@ -57,11 +57,7 @@ export default class RegionCreation extends React.PureComponent<Props, State> {
     };
 
     render(): JSX.Element | null {
-        const { isCreating, isRotated, staged } = this.props;
-
-        if (isRotated) {
-            return null;
-        }
+        const { isCreating, rotation, staged } = this.props;
 
         return (
             <>
@@ -71,6 +67,7 @@ export default class RegionCreation extends React.PureComponent<Props, State> {
                         onAbort={this.handleAbort}
                         onStart={this.handleStart}
                         onStop={this.handleStop}
+                        rotation={rotation}
                     />
                 )}
 

package/src/region/RegionCreationContainer.tsx

@@ -19,7 +19,7 @@ import withProviders from '../common/withProviders';
 
 export type Props = {
     isCreating: boolean;
-    isRotated: boolean;
+    rotation: number;
     staged: CreatorItemRegion | null;
 };
 
@@ -28,7 +28,7 @@ export const mapStateToProps = (state: AppState, { location }: { location: numbe
 
     return {
         isCreating: getAnnotationMode(state) === Mode.REGION && getCreatorStatus(state) !== CreatorStatus.pending,
-        isRotated: !!getRotation(state),
+        rotation: getRotation(state),
         staged: isCreatorStagedRegion(staged) ? staged : null,
     };
 };

package/src/region/RegionCreator.tsx

@@ -4,6 +4,7 @@ import PointerCapture, { Status as DrawingStatus } from '../components/PointerCa
 import PopupCursor from '../components/Popups/PopupCursor';
 import RegionRect, { RegionRectRef } from './RegionRect';
 import useAutoScroll from '../common/useAutoScroll';
+import { getElementLocalPosition } from '../utils/rotate';
 import { Rect } from '../@types';
 import { styleShape } from './regionUtil';
 import './RegionCreator.scss';
@@ -13,6 +14,7 @@ type Props = {
     onAbort: () => void;
     onStart: () => void;
     onStop: (shape: Rect) => void;
+    rotation?: number;
 };
 
 const MIN_X = 0; // Minimum region x position must be positive
@@ -22,7 +24,7 @@ const MIN_SIZE = 10; // Minimum region size must be large enough to be clickable
 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 {
+export default function RegionCreator({ className, onAbort, onStart, onStop, rotation = 0 }: Props): JSX.Element {
     const [drawingStatus, setDrawingStatus] = React.useState<DrawingStatus>(DrawingStatus.init);
     const [isHovering, setIsHovering] = React.useState<boolean>(false);
     const creatorElRef = React.useRef<HTMLDivElement>(null);
@@ -34,18 +36,6 @@ export default function RegionCreator({ className, onAbort, onStart, onStop }: P
     const regionRectRef = React.useRef<RegionRectRef>(null);
     const renderHandleRef = React.useRef<number | null>(null);
 
-    // Drawing Helpers
-    const getPosition = (x: number, y: number): [number, number] => {
-        const { current: creatorEl } = creatorElRef;
-
-        if (!creatorEl) {
-            return [x, y];
-        }
-
-        // Calculate the new position based on the mouse position less the page offset
-        const { left, top } = creatorEl.getBoundingClientRect();
-        return [x - left, y - top];
-    };
     const getShape = (): Rect | null => {
         const { current: creatorEl } = creatorElRef;
         const { current: x1 } = positionX1Ref;
@@ -57,7 +47,9 @@ export default function RegionCreator({ className, onAbort, onStart, onStop }: P
             return null;
         }
 
-        const { height, width } = creatorEl.getBoundingClientRect();
+        // Get the element's dimensions (before any rotation is applied)
+        const width = creatorEl.offsetWidth;
+        const height = creatorEl.offsetHeight;
         const MAX_HEIGHT = height - MIN_SIZE;
         const MAX_WIDTH = width - MIN_SIZE;
         const MAX_X = Math.max(0, width - MIN_X);
@@ -88,7 +80,7 @@ export default function RegionCreator({ className, onAbort, onStart, onStop }: P
 
     // Drawing Lifecycle Callbacks
     const startDraw = (x: number, y: number): void => {
-        const [x1, y1] = getPosition(x, y);
+        const [x1, y1] = getElementLocalPosition(x, y, creatorElRef.current, rotation);
 
         setDrawingStatus(DrawingStatus.dragging);
 
@@ -119,7 +111,7 @@ export default function RegionCreator({ className, onAbort, onStart, onStop }: P
 
     const updateDraw = React.useCallback(
         (x: number, y: number): void => {
-            const [x2, y2] = getPosition(x, y);
+            const [x2, y2] = getElementLocalPosition(x, y, creatorElRef.current, rotation);
             const { current: x1 } = positionX1Ref;
             const { current: y1 } = positionY1Ref;
             const { current: prevX2 } = positionX2Ref;
@@ -138,7 +130,7 @@ export default function RegionCreator({ className, onAbort, onStart, onStop }: P
                 onStart();
             }
         },
-        [drawingStatus, onStart, setDrawingStatus],
+        [drawingStatus, onStart, rotation, setDrawingStatus],
     );
 
     // Event Handlers