box-annotations 5.2.1-beta.4 → 5.2.1-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "5.2.1-beta.4",
+    "version": "5.2.1-beta.6",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/common/BaseAnnotator.ts

@@ -7,9 +7,10 @@ import EventEmitter from './EventEmitter';
 import i18n from '../utils/i18n';
 import messages from '../messages';
 import { Event, IntlOptions, LegacyEvent, Permissions } from '../@types';
-import { BoundingBox } from '../store/boundingBoxHighlights/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;
@@ -185,9 +186,43 @@ export default class BaseAnnotator extends EventEmitter {
         // Called by box-content-preview
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     public scrollToBoundingBoxHighlight(highlightId: string | null): void {
-        // Implemented in DocumentAnnotator
+        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;
     }
 
     /**

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightNav.tsx

@@ -8,8 +8,8 @@ import './BoundingBoxHighlightNav.scss';
 type Props = {
     currentIndex: number;
     total: number;
-    onPrev: (event: React.MouseEvent) => void;
-    onNext: (event: React.MouseEvent) => void;
+    onPrev: (event: React.MouseEvent | KeyboardEvent) => void;
+    onNext: (event: React.MouseEvent | KeyboardEvent) => void;
 };
 
 const BoundingBoxHighlightNav = ({ currentIndex, total, onPrev, onNext }: Props): JSX.Element => {
@@ -17,6 +17,25 @@ const BoundingBoxHighlightNav = ({ currentIndex, total, onPrev, onNext }: Props)
     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

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightRect.tsx

@@ -40,14 +40,14 @@ const BoundingBoxHighlightRect = ({
         onSelect?.(id);
     };
 
-    const handlePrev = (event: React.MouseEvent): void => {
+    const handlePrev = (event: React.MouseEvent | KeyboardEvent): void => {
         event.stopPropagation();
         if (prevId) {
             onNavigate?.(prevId);
         }
     };
 
-    const handleNext = (event: React.MouseEvent): void => {
+    const handleNext = (event: React.MouseEvent | KeyboardEvent): void => {
         event.stopPropagation();
         if (nextId) {
             onNavigate?.(nextId);

package/src/document/DocumentAnnotator.ts

@@ -12,7 +12,7 @@ import { BoundingBoxHighlightManager } from '../boundingBoxHighlight';
 import { centerRegion, isRegion, RegionCreationManager, RegionManager } from '../region';
 import { Event } from '../@types';
 import { getAnnotation } from '../store/annotations';
-import { getBoundingBoxHighlights, BoundingBox } from '../store/boundingBoxHighlights';
+import { BoundingBox } from '../store/boundingBoxHighlights';
 import { getSelection } from './docUtil';
 import { Manager } from '../common/BaseManager';
 import { getFileId, getIsCurrentFileVersion, getViewMode, Mode } from '../store';
@@ -235,28 +235,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
         }
     }
 
-    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 pageEl = this.getPage(highlight.pageNumber);
-        if (!pageEl) {
-            return;
-        }
-
-        const offsets = {
-            x: highlight.x + highlight.width / 2,
-            y: highlight.y + highlight.height / 2,
-        };
-
-        scrollToLocation(this.annotatedEl, pageEl, { offsets, smooth: true });
+    protected getScrollReferenceForHighlight(highlight: BoundingBox): HTMLElement | undefined {
+        return this.getPage(highlight.pageNumber);
     }
 }

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,6 +68,11 @@ export default class ImageAnnotator extends BaseAnnotator {
         });
 
         if (this.managers.size === 0) {
+            if (viewMode === 'boundingBoxes') {
+                this.managers.add(new BoundingBoxHighlightManager({ location: 1, referenceEl, resinTags }));
+                return this.managers;
+            }
+
             this.managers.add(new PopupManager({ referenceEl, resinTags }));
             this.managers.add(new DrawingManager({ referenceEl, resinTags }));
             this.managers.add(new RegionManager({ 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;