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

package/src/document/DocumentAnnotator.ts

@@ -8,15 +8,19 @@ import {
     HighlightManager,
     isHighlight,
 } from '../highlight';
+import { BoundingBoxHighlightManager } from '../boundingBoxHighlight';
 import { centerRegion, isRegion, RegionCreationManager, RegionManager } from '../region';
 import { Event } from '../@types';
 import { getAnnotation } from '../store/annotations';
+import { BoundingBox } from '../store/boundingBoxHighlights';
 import { getSelection } from './docUtil';
 import { Manager } from '../common/BaseManager';
-import { getFileId, getIsCurrentFileVersion, Mode } from '../store';
+import { getFileId, getIsCurrentFileVersion, getViewMode, Mode } from '../store';
 import { scrollToLocation } from '../utils/scroll';
 import './DocumentAnnotator.scss';
 
+import type { ViewMode } from '../store/options/types';
+
 // Pdf.js textLayer enhancement requires waiting for 300ms (they hardcode this magic number)
 const TEXT_LAYER_ENHANCEMENT = 300;
 
@@ -27,6 +31,9 @@ export default class DocumentAnnotator extends BaseAnnotator {
 
     managers: Map<number, Set<Manager>> = new Map();
 
+    /** Tracks which view mode the current managers were created for. Used to destroy/recreate when switching. */
+    private managersViewMode: ViewMode | null = null;
+
     constructor(options: Options) {
         super(options);
 
@@ -53,13 +60,22 @@ export default class DocumentAnnotator extends BaseAnnotator {
         return this.containerEl?.querySelector('.bp-doc');
     }
 
+    /** Destroys all managers and clears the cache. Call when switching view modes. */
+    private clearManagers(): void {
+        this.managers.forEach(managers => managers.forEach(manager => manager.destroy()));
+        this.managers.clear();
+        this.managersViewMode = null;
+    }
+
     getPageManagers(pageEl: HTMLElement): Set<Manager> {
         const fileId = getFileId(this.store.getState());
         const isCurrentFileVersion = getIsCurrentFileVersion(this.store.getState());
         const pageNumber = this.getPageNumber(pageEl);
         const pageReferenceEl = this.getPageReference(pageEl);
-        const managers = this.managers.get(pageNumber) || new Set();
         const resinTags = { fileid: fileId, iscurrent: isCurrentFileVersion };
+        const viewMode = getViewMode(this.store.getState());
+
+        const managers = this.managers.get(pageNumber) || new Set();
         let destroyManagers = false;
 
         // If a referenced page element doesn't exist, destroy all managers to keep them in sync
@@ -77,6 +93,12 @@ export default class DocumentAnnotator extends BaseAnnotator {
 
         // Lazily instantiate managers as pages are added or re-rendered
         if (managers.size === 0) {
+            if (viewMode === 'boundingBoxes') {
+                managers.add(new BoundingBoxHighlightManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+                return managers;
+            }
+
+            // Annotations mode
             managers.add(new PopupManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
             managers.add(new DrawingManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
 
@@ -94,7 +116,6 @@ export default class DocumentAnnotator extends BaseAnnotator {
             }
 
             managers.add(new HighlightManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
-
             managers.add(new RegionManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
 
             const canvasLayerEl = pageEl.querySelector<HTMLElement>('.canvasWrapper');
@@ -132,7 +153,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
     }
 
     handleChangeMode = ({ mode }: { mode: Mode }): void => {
-        if (!this.annotatedEl) {
+        if (!this.annotatedEl || getViewMode(this.store.getState()) === 'boundingBoxes') {
             return;
         }
 
@@ -146,6 +167,13 @@ export default class DocumentAnnotator extends BaseAnnotator {
     };
 
     render(): void {
+        const viewMode = getViewMode(this.store.getState());
+
+        if (this.managersViewMode !== null && this.managersViewMode !== viewMode) {
+            this.clearManagers();
+        }
+        this.managersViewMode = viewMode;
+
         this.getPages()
             .filter(({ dataset }) => dataset.loaded && dataset.pageNumber)
             .forEach(pageEl => this.renderPage(pageEl));
@@ -153,6 +181,18 @@ export default class DocumentAnnotator 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();
+    }
+
     renderPage(pageEl: HTMLElement): void {
         const pageManagers = this.getPageManagers(pageEl);
         const pageNumber = this.getPageNumber(pageEl);
@@ -194,4 +234,8 @@ export default class DocumentAnnotator extends BaseAnnotator {
             scrollToLocation(this.annotatedEl, annotationPageEl, { offsets });
         }
     }
+
+    protected getScrollReferenceForHighlight(highlight: BoundingBox): HTMLElement | undefined {
+        return this.getPage(highlight.pageNumber);
+    }
 }

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,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;

package/src/store/annotations/reducer.ts

@@ -8,13 +8,18 @@ import {
     setActiveAnnotationIdAction,
     setIsInitialized,
 } from './actions';
+import { setViewModeAction } from '../options/actions';
 
 const activeAnnotationId = createReducer<AnnotationsState['activeId']>(null, builder =>
     builder
         /* Preview will set the active ID with a an event which will trigger the url change */
         .addCase(createAnnotationAction.fulfilled, () => null)
         .addCase(removeAnnotationAction, (state, { payload: id }) => (state === id ? null : state))
-        .addCase(setActiveAnnotationIdAction, (state, { payload: annotationId }) => annotationId),
+        .addCase(setActiveAnnotationIdAction, (state, { payload: annotationId }) => annotationId)
+        .addCase(setViewModeAction, (state, { payload }) => {
+            // Clear active annotation when switching to bounding boxes mode
+            return payload === 'boundingBoxes' ? null : state;
+        }),
 );
 
 const annotationsAllIds = createReducer<AnnotationsState['allIds']>([], builder =>

package/src/store/boundingBoxHighlights/actions.ts

@@ -0,0 +1,6 @@
+import { createAction } from '@reduxjs/toolkit';
+import { BoundingBox } from './types';
+
+export const setBoundingBoxHighlightsAction = createAction<BoundingBox[]>('SET_BOUNDING_BOX_HIGHLIGHTS');
+export const setSelectedBoundingBoxHighlightAction = createAction<string | null>('SET_SELECTED_BOUNDING_BOX_HIGHLIGHT');
+export const navigateBoundingBoxHighlightAction = createAction<string>('NAVIGATE_BOUNDING_BOX_HIGHLIGHT');

package/src/store/boundingBoxHighlights/index.ts

@@ -0,0 +1,4 @@
+export { default as boundingBoxHighlightsReducer } from './reducer';
+export * from './actions';
+export * from './selectors';
+export * from './types';

package/src/store/boundingBoxHighlights/reducer.ts

@@ -0,0 +1,33 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { BoundingBoxHighlightsState } from './types';
+import {
+    navigateBoundingBoxHighlightAction,
+    setBoundingBoxHighlightsAction,
+    setSelectedBoundingBoxHighlightAction,
+} from './actions';
+import { setViewModeAction } from '../options/actions';
+
+const initialState: BoundingBoxHighlightsState = {
+    boundingBoxes: [],
+    selectedId: null,
+};
+
+export default createReducer(initialState, builder => {
+    builder
+        .addCase(setBoundingBoxHighlightsAction, (state, { payload }) => {
+            state.boundingBoxes = payload;
+            state.selectedId = null;
+        })
+        .addCase(setSelectedBoundingBoxHighlightAction, (state, { payload }) => {
+            state.selectedId = payload;
+        })
+        .addCase(navigateBoundingBoxHighlightAction, (state, { payload }) => {
+            state.selectedId = payload;
+        })
+        .addCase(setViewModeAction, (state, { payload }) => {
+            // Clear selected bounding box when switching to annotations mode
+            if (payload === 'annotations') {
+                state.selectedId = null;
+            }
+        });
+});

package/src/store/boundingBoxHighlights/selectors.ts

@@ -0,0 +1,12 @@
+import { BoundingBox, BoundingBoxHighlightsState } from './types';
+
+type State = { boundingBoxHighlights: BoundingBoxHighlightsState };
+
+export const getBoundingBoxHighlights = ({ boundingBoxHighlights }: State): BoundingBox[] =>
+    boundingBoxHighlights.boundingBoxes;
+
+export const getBoundingBoxHighlightsForPage = ({ boundingBoxHighlights }: State, pageNumber: number): BoundingBox[] =>
+    boundingBoxHighlights.boundingBoxes.filter(box => box.pageNumber === pageNumber);
+
+export const getSelectedBoundingBoxHighlightId = ({ boundingBoxHighlights }: State): string | null =>
+    boundingBoxHighlights.selectedId;

package/src/store/boundingBoxHighlights/types.ts

@@ -0,0 +1,13 @@
+export interface BoundingBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    pageNumber: number;
+    id: string;
+}
+
+export interface BoundingBoxHighlightsState {
+    boundingBoxes: BoundingBox[];
+    selectedId: string | null;
+}

package/src/store/createRootReducer.ts

@@ -4,6 +4,7 @@ import { commonReducer } from './common';
 import { creatorReducer } from './creator';
 import { drawingReducer } from './drawing';
 import { highlightReducer } from './highlight';
+import { boundingBoxHighlightsReducer } from './boundingBoxHighlights';
 import { optionsReducer } from './options';
 import { usersReducer } from './users';
 
@@ -14,6 +15,7 @@ const createRootReducer = (): Reducer =>
         creator: creatorReducer,
         drawing: drawingReducer,
         highlight: highlightReducer,
+        boundingBoxHighlights: boundingBoxHighlightsReducer,
         options: optionsReducer,
         users: usersReducer,
     });

package/src/store/eventing/boundingBoxHighlightNav.ts

@@ -0,0 +1,13 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { Event } from '../../@types';
+import { getSelectedBoundingBoxHighlightId } from '../boundingBoxHighlights';
+
+const handleNavigateBoundingBoxHighlight = (_prevState: AppState, nextState: AppState): void => {
+    const highlightId = getSelectedBoundingBoxHighlightId(nextState);
+    if (highlightId) {
+        eventManager.emit(Event.BOUNDING_BOX_HIGHLIGHT_NAVIGATE, highlightId);
+    }
+};
+
+export { handleNavigateBoundingBoxHighlight };

package/src/store/eventing/middleware.ts

@@ -6,11 +6,13 @@ import {
     setActiveAnnotationIdAction,
     setIsInitialized,
 } from '../annotations/actions';
+import { navigateBoundingBoxHighlightAction } from '../boundingBoxHighlights/actions';
 import { EventHandlerMap } from './types';
 import { handleActiveAnnotationEvents } from './active';
 import { handleAnnotationsInitialized } from './init';
 import { handleCreateErrorEvents, handleCreatePendingEvents, handleCreateSuccessEvents } from './create';
 import { handleFetchErrorEvents } from './fetch';
+import { handleNavigateBoundingBoxHighlight } from './boundingBoxHighlightNav';
 import { handleResetCreatorAction, handleSetStagedAction } from './staged';
 import { handleSetStatusAction } from './status';
 import { handleToggleAnnotationModeAction } from './mode';
@@ -23,6 +25,7 @@ const eventHandlers: EventHandlerMap = {
     [createAnnotationAction.pending.toString()]: handleCreatePendingEvents,
     [createAnnotationAction.rejected.toString()]: handleCreateErrorEvents,
     [fetchAnnotationsAction.rejected.toString()]: handleFetchErrorEvents,
+    [navigateBoundingBoxHighlightAction.toString()]: handleNavigateBoundingBoxHighlight,
     [resetCreatorAction.toString()]: handleResetCreatorAction,
     [setActiveAnnotationIdAction.toString()]: handleActiveAnnotationEvents,
     [setIsInitialized.toString()]: handleAnnotationsInitialized,

package/src/store/index.ts

@@ -5,6 +5,7 @@ export * from './annotations';
 export * from './common';
 export * from './creator';
 export * from './highlight';
+export * from './boundingBoxHighlights';
 export * from './options';
 export * from './types';
 export * from './users';

package/src/store/options/actions.ts

@@ -1,8 +1,10 @@
 import { createAction } from '@reduxjs/toolkit';
 import { Permissions } from '../../@types';
+import { ViewMode } from './types';
 
 export const setFileIdAction = createAction<string | null>('SET_FIlE_ID');
 export const setFileVersionIdAction = createAction<string | null>('SET_FILE_VERSION_ID');
 export const setPermissionsAction = createAction<Permissions>('SET_PERMISSIONS');
 export const setRotationAction = createAction<number>('SET_ROTATION');
 export const setScaleAction = createAction<number>('SET_SCALE');
+export const setViewModeAction = createAction<ViewMode>('SET_VIEW_MODE');

package/src/store/options/reducer.ts

@@ -1,11 +1,12 @@
 import { createReducer } from '@reduxjs/toolkit';
-import { OptionsState } from './types';
+import { OptionsState, ViewMode } from './types';
 import {
     setFileIdAction,
     setFileVersionIdAction,
     setPermissionsAction,
     setRotationAction,
     setScaleAction,
+    setViewModeAction,
 } from './actions';
 
 export const initialState = {
@@ -16,6 +17,7 @@ export const initialState = {
     permissions: {},
     rotation: 0,
     scale: 1,
+    viewMode: 'annotations' as ViewMode,
 };
 
 export default createReducer<OptionsState>(initialState, builder =>
@@ -34,5 +36,8 @@ export default createReducer<OptionsState>(initialState, builder =>
         })
         .addCase(setScaleAction, (state, { payload }) => {
             state.scale = payload;
+        })
+        .addCase(setViewModeAction, (state, { payload }) => {
+            state.viewMode = payload;
         }),
 );

package/src/store/options/selectors.ts

@@ -2,10 +2,12 @@ import getProp from 'lodash/get';
 import { AppState } from '../types';
 import { Permissions } from '../../@types';
 import { Features } from '../../BoxAnnotations';
+import { ViewMode } from './types';
 
 type State = Pick<AppState, 'options'>;
 
 export const getFeatures = (state: State): Features => state.options.features;
+export const getViewMode = (state: State): ViewMode => state.options.viewMode;
 export const getFileId = (state: State): string | null => state.options.fileId;
 export const getFileVersionId = (state: State): string | null => state.options.fileVersionId;
 export const getIsCurrentFileVersion = (state: State): boolean => state.options.isCurrentFileVersion;

package/src/store/options/types.ts

@@ -1,6 +1,9 @@
 import { Features } from '../../BoxAnnotations';
 import { Permissions } from '../../@types';
 
+/** View mode: annotations and bounding boxes are mutually exclusive. */
+export type ViewMode = 'annotations' | 'boundingBoxes';
+
 export type OptionsState = {
     features: Features;
     fileId: string | null;
@@ -9,4 +12,5 @@ export type OptionsState = {
     permissions: Permissions;
     rotation: number;
     scale: number;
+    viewMode: ViewMode;
 };

package/src/store/types.ts

@@ -6,6 +6,7 @@ import { CommonState } from './common';
 import { CreatorState } from './creator';
 import { DrawingState } from './drawing';
 import { HighlightState } from './highlight';
+import { BoundingBoxHighlightsState } from './boundingBoxHighlights';
 import { OptionsState } from './options';
 import { UsersState } from './users';
 
@@ -15,6 +16,7 @@ export type AppState = {
     creator: CreatorState;
     drawing: DrawingState;
     highlight: HighlightState;
+    boundingBoxHighlights: BoundingBoxHighlightsState;
     options: OptionsState;
     users: UsersState;
 };

package/src/utils/scroll.ts

@@ -2,13 +2,14 @@ import { Position } from '../@types';
 
 export type ScrollOptions = {
     offsets?: Position;
+    smooth?: boolean;
     threshold?: number;
 };
 
 const DEFAULT_OFFSETS = { x: 0, y: 0 };
 
 export function scrollToLocation(parentEl: HTMLElement, referenceEl: HTMLElement, options: ScrollOptions = {}): void {
-    const { offsets = DEFAULT_OFFSETS } = options;
+    const { offsets = DEFAULT_OFFSETS, smooth = false } = options;
     const { x: offsetXPercentage, y: offsetYPercentage } = offsets;
     // Get the bounding client rects so that the offsetLeft of the reference element can be calculated --
     // even if it has been transformed via rotation
@@ -40,6 +41,10 @@ export function scrollToLocation(parentEl: HTMLElement, referenceEl: HTMLElement
     const scrollLeft = Math.max(0, Math.min(parentEl.scrollLeft + offsetScrollLeft, parentEl.scrollWidth));
     const scrollTop = Math.max(0, Math.min(parentEl.scrollTop + offsetScrollTop, parentEl.scrollHeight));
 
-    parentEl.scrollLeft = scrollLeft;
-    parentEl.scrollTop = scrollTop;
+    if (smooth) {
+        parentEl.scrollTo({ left: scrollLeft, top: scrollTop, behavior: 'smooth' });
+    } else {
+        parentEl.scrollLeft = scrollLeft;
+        parentEl.scrollTop = scrollTop;
+    }
 }