box-annotations 5.2.1-beta.13 → 5.2.1-beta.17

package/src/popup/PopupLayer.tsx

@@ -45,6 +45,8 @@ const modeStagedMap: { [M in Mode]?: (staged: CreatorItem | null) => boolean } =
     [Mode.REGION]: isCreatorStagedRegion,
 };
 
+const ACTIVE_TARGET_OBSERVER_TIMEOUT_MS = 10000;
+
 const PopupLayer = (props: Props): JSX.Element | null => {
     const {
         activeAnnotationId,
@@ -98,13 +100,39 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         setReference(referenceId ? document.querySelector(`[data-ba-reference-id="${referenceId}"]`) : null);
     }, [referenceId]);
 
+    // activeAnnotationId can be set (e.g. via deep link) before the target DOM node mounts;
+    // observe until it appears, or give up after ACTIVE_TARGET_OBSERVER_TIMEOUT_MS.
     React.useEffect(() => {
-        if (activeAnnotationId && isThreadedAnnotation) {
-            const el = document.querySelector(`[data-ba-annotation-id="${CSS.escape(activeAnnotationId)}"]`);
-            setActiveReference(el);
-        } else {
+        if (!activeAnnotationId || !isThreadedAnnotation) {
             setActiveReference(null);
+            return noop;
+        }
+
+        const selector = `[data-ba-annotation-id="${CSS.escape(activeAnnotationId)}"]`;
+        const existing = document.querySelector(selector);
+        if (existing) {
+            setActiveReference(existing);
+            return noop;
         }
+
+        setActiveReference(null);
+        const observer = new MutationObserver(() => {
+            const el = document.querySelector(selector);
+            if (el) {
+                setActiveReference(el);
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+
+        const timeoutId = window.setTimeout(() => {
+            observer.disconnect();
+        }, ACTIVE_TARGET_OBSERVER_TIMEOUT_MS);
+
+        return () => {
+            observer.disconnect();
+            window.clearTimeout(timeoutId);
+        };
     }, [activeAnnotationId, isThreadedAnnotation]);
 
     const showCreator = canCreate && canReply && reference && staged;

package/src/store/annotations/actions.ts

@@ -121,6 +121,95 @@ export const updateAnnotationAction = createAsyncThunk<
     },
 );
 
+export const updateReplyAction = createAsyncThunk<
+    { annotationId: string; reply: Reply },
+    { annotationId: string; replyId: string; payload: { message?: string; status?: string } },
+    AppThunkAPI
+>(
+    'UPDATE_REPLY',
+    async ({ annotationId, replyId, payload }, { extra, getState, signal }) => {
+        const client = extra.api.getThreadedCommentsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const annotation = getAnnotation(state, annotationId);
+        const reply = annotation?.replies?.find(r => r.id === replyId);
+
+        if (!reply) {
+            throw new Error(`updateReplyAction: reply ${replyId} not found on annotation ${annotationId}`);
+        }
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        const updated = await new Promise<Reply>((resolve, reject) => {
+            client.updateComment({
+                commentId: replyId,
+                errorCallback: reject,
+                fileId,
+                message: payload.message,
+                permissions: reply.permissions ?? {},
+                status: payload.status,
+                successCallback: resolve,
+            });
+        });
+
+        return { annotationId, reply: updated };
+    },
+);
+
+export const deleteReplyAction = createAsyncThunk<
+    { annotationId: string; replyId: string },
+    { annotationId: string; replyId: string },
+    AppThunkAPI
+>(
+    'DELETE_REPLY',
+    async ({ annotationId, replyId }, { extra, getState, signal }) => {
+        const client = extra.api.getThreadedCommentsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const annotation = getAnnotation(state, annotationId);
+        const reply = annotation?.replies?.find(r => r.id === replyId);
+
+        if (!reply) {
+            throw new Error(`deleteReplyAction: reply ${replyId} not found on annotation ${annotationId}`);
+        }
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        await new Promise<void>((resolve, reject) => {
+            client.deleteComment({
+                commentId: replyId,
+                errorCallback: reject,
+                fileId,
+                permissions: reply.permissions ?? {},
+                successCallback: resolve,
+            });
+        });
+
+        return { annotationId, replyId };
+    },
+);
+
+export type SidebarAnnotationUpdatePayload = Partial<Annotation> & { id: string };
+export type SidebarReplyMutationPayload = { annotationId: string; reply: Reply };
+export type SidebarReplyDeletePayload = { annotationId: string; replyId: string };
+
+export const applySidebarAnnotationUpdateAction = createAction<SidebarAnnotationUpdatePayload>(
+    'APPLY_SIDEBAR_ANNOTATION_UPDATE',
+);
+export const applySidebarReplyCreateAction = createAction<SidebarReplyMutationPayload>(
+    'APPLY_SIDEBAR_REPLY_CREATE',
+);
+export const applySidebarReplyDeleteAction = createAction<SidebarReplyDeletePayload>(
+    'APPLY_SIDEBAR_REPLY_DELETE',
+);
+export const applySidebarReplyUpdateAction = createAction<SidebarReplyMutationPayload>(
+    'APPLY_SIDEBAR_REPLY_UPDATE',
+);
+
 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

@@ -2,14 +2,20 @@ import { createReducer, combineReducers } from '@reduxjs/toolkit';
 import { formatDrawing, isDrawing } from '../../drawing/drawingUtil';
 import { AnnotationsState } from './types';
 import {
+    applySidebarAnnotationUpdateAction,
+    applySidebarReplyCreateAction,
+    applySidebarReplyDeleteAction,
+    applySidebarReplyUpdateAction,
     createAnnotationAction,
     createReplyAction,
     deleteAnnotationAction,
+    deleteReplyAction,
     fetchAnnotationsAction,
     removeAnnotationAction,
     setActiveAnnotationIdAction,
     setIsInitialized,
     updateAnnotationAction,
+    updateReplyAction,
 } from './actions';
 import { setViewModeAction } from '../options/actions';
 
@@ -58,6 +64,48 @@ const annotationsById = createReducer<AnnotationsState['byId']>({}, builder =>
         .addCase(updateAnnotationAction.fulfilled, (state, { payload }) => {
             state[payload.id] = isDrawing(payload) ? formatDrawing(payload) : payload;
         })
+        .addCase(updateReplyAction.fulfilled, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (annotation && annotation.replies) {
+                annotation.replies = annotation.replies.map(existing =>
+                    existing.id === reply.id ? reply : existing,
+                );
+            }
+        })
+        .addCase(deleteReplyAction.fulfilled, (state, { payload: { annotationId, replyId } }) => {
+            const annotation = state[annotationId];
+            if (annotation && annotation.replies) {
+                annotation.replies = annotation.replies.filter(existing => existing.id !== replyId);
+            }
+        })
+        .addCase(applySidebarAnnotationUpdateAction, (state, { payload }) => {
+            const existing = state[payload.id];
+            if (!existing) return;
+            Object.entries(payload).forEach(([key, value]) => {
+                if (value !== undefined) {
+                    (existing as Record<string, unknown>)[key] = value;
+                }
+            });
+        })
+        .addCase(applySidebarReplyCreateAction, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (!annotation) return;
+            const replies = annotation.replies ?? [];
+            if (replies.some(existing => existing.id === reply.id)) return;
+            annotation.replies = [...replies, reply];
+        })
+        .addCase(applySidebarReplyUpdateAction, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (!annotation || !annotation.replies) return;
+            annotation.replies = annotation.replies.map(existing =>
+                existing.id === reply.id ? { ...existing, ...reply } : existing,
+            );
+        })
+        .addCase(applySidebarReplyDeleteAction, (state, { payload: { annotationId, replyId } }) => {
+            const annotation = state[annotationId];
+            if (!annotation || !annotation.replies) return;
+            annotation.replies = annotation.replies.filter(existing => existing.id !== replyId);
+        })
         .addCase(fetchAnnotationsAction.fulfilled, (state, { payload }) => {
             payload.entries.forEach(annotation => {
                 state[annotation.id] = isDrawing(annotation) ? formatDrawing(annotation) : annotation;

package/src/store/eventing/create.ts

@@ -1,9 +1,9 @@
 import eventManager from '../../common/EventManager';
 import { AsyncAction, Status } from './types';
 import { AppState } from '../types';
-import { Event } from '../../@types';
+import { Annotation, Event, NewAnnotation } from '../../@types';
 
-const emitCreateEvent = (action: AsyncAction, status: Status): void => {
+const emitCreateEvent = (action: AsyncAction<NewAnnotation, Annotation>, status: Status): void => {
     const { error, meta: { arg, requestId } = {}, payload } = action;
     eventManager.emit(Event.ANNOTATION_CREATE, {
         annotation: payload || arg,
@@ -16,7 +16,7 @@ const emitCreateEvent = (action: AsyncAction, status: Status): void => {
 };
 
 const createHandler = (status: Status) => (prevState: AppState, nextState: AppState, action: AsyncAction): void =>
-    emitCreateEvent(action, status);
+    emitCreateEvent(action as AsyncAction<NewAnnotation, Annotation>, status);
 
 const handleCreateErrorEvents = createHandler(Status.ERROR);
 const handleCreatePendingEvents = createHandler(Status.PENDING);

package/src/store/eventing/delete.ts

@@ -0,0 +1,27 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { AsyncAction, Status } from './types';
+import { Event } from '../../@types';
+
+const emitDeleteEvent = (action: AsyncAction<string, string>, status: Status): void => {
+    const { error, meta: { arg, requestId } = {}, payload } = action;
+    if (status === Status.SUCCESS && !payload) return;
+    const id = payload ?? arg;
+    eventManager.emit(Event.ANNOTATION_DELETE, {
+        annotation: id ? { id } : undefined,
+        error,
+        meta: { requestId, status },
+    });
+};
+
+const deleteHandler = (status: Status) => (
+    _prev: AppState,
+    _next: AppState,
+    action: AsyncAction,
+): void => emitDeleteEvent(action as AsyncAction<string, string>, status);
+
+const handleDeleteErrorEvents = deleteHandler(Status.ERROR);
+const handleDeletePendingEvents = deleteHandler(Status.PENDING);
+const handleDeleteSuccessEvents = deleteHandler(Status.SUCCESS);
+
+export { handleDeleteErrorEvents, handleDeletePendingEvents, handleDeleteSuccessEvents };

package/src/store/eventing/middleware.ts

@@ -2,28 +2,58 @@ import noop from 'lodash/noop';
 import { Action, Dispatch, Middleware, MiddlewareAPI } from '@reduxjs/toolkit';
 import {
     createAnnotationAction,
+    createReplyAction,
+    deleteAnnotationAction,
+    deleteReplyAction,
     fetchAnnotationsAction,
     setActiveAnnotationIdAction,
     setIsInitialized,
+    updateAnnotationAction,
+    updateReplyAction,
 } from '../annotations/actions';
 import { navigateBoundingBoxHighlightAction } from '../boundingBoxHighlights/actions';
 import { EventHandlerMap } from './types';
 import { handleActiveAnnotationEvents } from './active';
 import { handleAnnotationsInitialized } from './init';
+import { handleNavigateBoundingBoxHighlight } from './boundingBoxHighlightNav';
 import { handleCreateErrorEvents, handleCreatePendingEvents, handleCreateSuccessEvents } from './create';
+import { handleDeleteErrorEvents, handleDeletePendingEvents, handleDeleteSuccessEvents } from './delete';
 import { handleFetchErrorEvents } from './fetch';
-import { handleNavigateBoundingBoxHighlight } from './boundingBoxHighlightNav';
+import { handleToggleAnnotationModeAction } from './mode';
+import {
+    handleReplyCreateErrorEvents,
+    handleReplyCreatePendingEvents,
+    handleReplyCreateSuccessEvents,
+} from './replyCreate';
+import {
+    handleReplyDeleteErrorEvents,
+    handleReplyDeletePendingEvents,
+    handleReplyDeleteSuccessEvents,
+} from './replyDelete';
+import {
+    handleReplyUpdateErrorEvents,
+    handleReplyUpdatePendingEvents,
+    handleReplyUpdateSuccessEvents,
+} from './replyUpdate';
 import { handleResetCreatorAction, handleSetStagedAction } from './staged';
 import { handleSetStatusAction } from './status';
-import { handleToggleAnnotationModeAction } from './mode';
+import { handleUpdateErrorEvents, handleUpdatePendingEvents, handleUpdateSuccessEvents } from './update';
 import { resetCreatorAction, setStagedAction, setStatusAction } from '../creator';
 import { toggleAnnotationModeAction } from '../common/actions';
 
-// Array of event handlers based on redux action. To add handling for new events add an entry keyed by action
-const eventHandlers: EventHandlerMap = {
+export const eventHandlers: EventHandlerMap = {
     [createAnnotationAction.fulfilled.toString()]: handleCreateSuccessEvents,
     [createAnnotationAction.pending.toString()]: handleCreatePendingEvents,
     [createAnnotationAction.rejected.toString()]: handleCreateErrorEvents,
+    [createReplyAction.fulfilled.toString()]: handleReplyCreateSuccessEvents,
+    [createReplyAction.pending.toString()]: handleReplyCreatePendingEvents,
+    [createReplyAction.rejected.toString()]: handleReplyCreateErrorEvents,
+    [deleteAnnotationAction.fulfilled.toString()]: handleDeleteSuccessEvents,
+    [deleteAnnotationAction.pending.toString()]: handleDeletePendingEvents,
+    [deleteAnnotationAction.rejected.toString()]: handleDeleteErrorEvents,
+    [deleteReplyAction.fulfilled.toString()]: handleReplyDeleteSuccessEvents,
+    [deleteReplyAction.pending.toString()]: handleReplyDeletePendingEvents,
+    [deleteReplyAction.rejected.toString()]: handleReplyDeleteErrorEvents,
     [fetchAnnotationsAction.rejected.toString()]: handleFetchErrorEvents,
     [navigateBoundingBoxHighlightAction.toString()]: handleNavigateBoundingBoxHighlight,
     [resetCreatorAction.toString()]: handleResetCreatorAction,
@@ -32,6 +62,12 @@ const eventHandlers: EventHandlerMap = {
     [setStagedAction.toString()]: handleSetStagedAction,
     [setStatusAction.toString()]: handleSetStatusAction,
     [toggleAnnotationModeAction.toString()]: handleToggleAnnotationModeAction,
+    [updateAnnotationAction.fulfilled.toString()]: handleUpdateSuccessEvents,
+    [updateAnnotationAction.pending.toString()]: handleUpdatePendingEvents,
+    [updateAnnotationAction.rejected.toString()]: handleUpdateErrorEvents,
+    [updateReplyAction.fulfilled.toString()]: handleReplyUpdateSuccessEvents,
+    [updateReplyAction.pending.toString()]: handleReplyUpdatePendingEvents,
+    [updateReplyAction.rejected.toString()]: handleReplyUpdateErrorEvents,
 };
 
 function getEventingMiddleware(handlers: EventHandlerMap = eventHandlers): Middleware {

package/src/store/eventing/replyCreate.ts

@@ -0,0 +1,34 @@
+import eventManager from '../../common/EventManager';
+import { Reply , Event } from '../../@types';
+import { AppState } from '../types';
+import { AsyncAction, Status } from './types';
+
+type ReplyCreateArg = { annotationId: string; message: string };
+type ReplyCreatePayload = { annotationId: string; reply: Reply };
+
+const emitReplyCreateEvent = (
+    action: AsyncAction<ReplyCreateArg, ReplyCreatePayload>,
+    status: Status,
+): void => {
+    const { error, meta: { arg, requestId } = {}, payload } = action;
+    if (status === Status.SUCCESS && !payload?.reply) return;
+    const annotationId = payload?.annotationId ?? arg?.annotationId;
+    eventManager.emit(Event.ANNOTATION_REPLY_CREATE, {
+        annotation: annotationId ? { id: annotationId } : undefined,
+        annotationReply: payload?.reply,
+        error,
+        meta: { requestId, status },
+    });
+};
+
+const replyCreateHandler = (status: Status) => (
+    _prev: AppState,
+    _next: AppState,
+    action: AsyncAction,
+): void => emitReplyCreateEvent(action as AsyncAction<ReplyCreateArg, ReplyCreatePayload>, status);
+
+const handleReplyCreateErrorEvents = replyCreateHandler(Status.ERROR);
+const handleReplyCreatePendingEvents = replyCreateHandler(Status.PENDING);
+const handleReplyCreateSuccessEvents = replyCreateHandler(Status.SUCCESS);
+
+export { handleReplyCreateErrorEvents, handleReplyCreatePendingEvents, handleReplyCreateSuccessEvents };

package/src/store/eventing/replyDelete.ts

@@ -0,0 +1,35 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { AsyncAction, Status } from './types';
+import { Event } from '../../@types';
+
+type ReplyDeleteArg = { annotationId: string; replyId: string };
+type ReplyDeletePayload = { annotationId: string; replyId: string };
+
+const emitReplyDeleteEvent = (
+    action: AsyncAction<ReplyDeleteArg, ReplyDeletePayload>,
+    status: Status,
+): void => {
+    const { error, meta: { arg, requestId } = {}, payload } = action;
+    if (status === Status.SUCCESS && !payload) return;
+    const annotationId = payload?.annotationId ?? arg?.annotationId;
+    const replyId = payload?.replyId ?? arg?.replyId;
+    eventManager.emit(Event.ANNOTATION_REPLY_DELETE, {
+        annotation: annotationId ? { id: annotationId } : undefined,
+        annotationReply: replyId ? { id: replyId } : undefined,
+        error,
+        meta: { requestId, status },
+    });
+};
+
+const replyDeleteHandler = (status: Status) => (
+    _prev: AppState,
+    _next: AppState,
+    action: AsyncAction,
+): void => emitReplyDeleteEvent(action as AsyncAction<ReplyDeleteArg, ReplyDeletePayload>, status);
+
+const handleReplyDeleteErrorEvents = replyDeleteHandler(Status.ERROR);
+const handleReplyDeletePendingEvents = replyDeleteHandler(Status.PENDING);
+const handleReplyDeleteSuccessEvents = replyDeleteHandler(Status.SUCCESS);
+
+export { handleReplyDeleteErrorEvents, handleReplyDeletePendingEvents, handleReplyDeleteSuccessEvents };

package/src/store/eventing/replyUpdate.ts

@@ -0,0 +1,39 @@
+import eventManager from '../../common/EventManager';
+import { Reply , Event } from '../../@types';
+import { AppState } from '../types';
+import { AsyncAction, Status } from './types';
+
+type ReplyUpdateArg = {
+    annotationId: string;
+    replyId: string;
+    payload: { message?: string; status?: string };
+};
+type ReplyUpdatePayload = { annotationId: string; reply: Reply };
+
+const emitReplyUpdateEvent = (
+    action: AsyncAction<ReplyUpdateArg, ReplyUpdatePayload>,
+    status: Status,
+): void => {
+    const { error, meta: { arg, requestId } = {}, payload } = action;
+    if (status === Status.SUCCESS && !payload?.reply) return;
+    const annotationId = payload?.annotationId ?? arg?.annotationId;
+    const annotationReply = payload?.reply ?? (arg ? { id: arg.replyId } : undefined);
+    eventManager.emit(Event.ANNOTATION_REPLY_UPDATE, {
+        annotation: annotationId ? { id: annotationId } : undefined,
+        annotationReply,
+        error,
+        meta: { requestId, status },
+    });
+};
+
+const replyUpdateHandler = (status: Status) => (
+    _prev: AppState,
+    _next: AppState,
+    action: AsyncAction,
+): void => emitReplyUpdateEvent(action as AsyncAction<ReplyUpdateArg, ReplyUpdatePayload>, status);
+
+const handleReplyUpdateErrorEvents = replyUpdateHandler(Status.ERROR);
+const handleReplyUpdatePendingEvents = replyUpdateHandler(Status.PENDING);
+const handleReplyUpdateSuccessEvents = replyUpdateHandler(Status.SUCCESS);
+
+export { handleReplyUpdateErrorEvents, handleReplyUpdatePendingEvents, handleReplyUpdateSuccessEvents };

package/src/store/eventing/types.ts

@@ -1,6 +1,6 @@
 import { Action, SerializedError } from '@reduxjs/toolkit';
 import { AppState } from '../types';
-import { Annotation, NewAnnotation } from '../../@types';
+import { Annotation } from '../../@types';
 
 export enum Status {
     ERROR = 'error',
@@ -22,10 +22,10 @@ export interface ThunkMeta<M> {
     requestId: string;
 }
 
-export interface AsyncAction extends Action {
+export interface AsyncAction<TArg = unknown, TPayload = unknown> extends Action {
     error?: SerializedError;
-    meta?: ThunkMeta<NewAnnotation>;
-    payload?: Annotation;
+    meta?: ThunkMeta<TArg>;
+    payload?: TPayload;
 }
 
 export type EventHandler = (prevState: AppState, nextState: AppState, action: Action | AsyncAction) => void;

package/src/store/eventing/update.ts

@@ -0,0 +1,29 @@
+import eventManager from '../../common/EventManager';
+import { Annotation , Event } from '../../@types';
+import { AppState } from '../types';
+import { AsyncAction, Status } from './types';
+
+type UpdateArg = { annotationId: string; payload: { message?: string; status?: string } };
+
+const emitUpdateEvent = (action: AsyncAction<UpdateArg, Annotation>, status: Status): void => {
+    const { error, meta: { arg, requestId } = {}, payload } = action;
+    if (status === Status.SUCCESS && !payload) return;
+    const annotation = payload ?? (arg ? { id: arg.annotationId } : undefined);
+    eventManager.emit(Event.ANNOTATION_UPDATE, {
+        annotation,
+        error,
+        meta: { requestId, status },
+    });
+};
+
+const updateHandler = (status: Status) => (
+    _prev: AppState,
+    _next: AppState,
+    action: AsyncAction,
+): void => emitUpdateEvent(action as AsyncAction<UpdateArg, Annotation>, status);
+
+const handleUpdateErrorEvents = updateHandler(Status.ERROR);
+const handleUpdatePendingEvents = updateHandler(Status.PENDING);
+const handleUpdateSuccessEvents = updateHandler(Status.SUCCESS);
+
+export { handleUpdateErrorEvents, handleUpdatePendingEvents, handleUpdateSuccessEvents };

package/src/store/highlight/actions.ts

@@ -1,13 +1,16 @@
 import { createAction } from '@reduxjs/toolkit';
-import { combineRects } from '../../highlight/highlightUtil';
+import { combineRects, getBoundingRect } from '../../highlight/highlightUtil';
+import { getElementLocalPosition } from '../../utils/rotate';
 import { SelectionItem } from './types';
 import { Shape } from '../../@types';
 
 export type SelectionArg = {
+    containerEl?: HTMLElement | null;
     containerRect: DOMRect;
     hasError?: boolean;
     location: number;
     range: Range;
+    rotation?: number;
 };
 
 type Payload = {
@@ -83,7 +86,7 @@ export const setSelectionAction = createAction(
             };
         }
 
-        const { containerRect, hasError, location, range } = arg;
+        const { containerEl, containerRect, hasError, location, range, rotation } = arg;
 
         let rects = Array.from(range.getClientRects());
         // getClientRects on IE/Edge might return 0 rects
@@ -91,12 +94,38 @@ export const setSelectionAction = createAction(
             rects = getClientRects(range);
         }
 
+        const screenShapes = rects.map(getShape);
+
+        if (rotation && containerEl) {
+            // Convert screen rects to element-local coordinates
+            const localRects = screenShapes.map(shape => {
+                const [lx1, ly1] = getElementLocalPosition(shape.x, shape.y, containerEl, rotation);
+                const [lx2, ly2] = getElementLocalPosition(shape.x + shape.width, shape.y + shape.height, containerEl, rotation);
+                return {
+                    x: Math.min(lx1, lx2),
+                    y: Math.min(ly1, ly2),
+                    width: Math.abs(lx2 - lx1),
+                    height: Math.abs(ly2 - ly1),
+                };
+            });
+
+            return {
+                payload: {
+                    containerRect: { x: 0, y: 0, width: containerEl.offsetWidth, height: containerEl.offsetHeight },
+                    hasError,
+                    location,
+                    popupRect: getBoundingRect(screenShapes),
+                    rects: combineRects(localRects),
+                },
+            };
+        }
+
         return {
             payload: {
                 containerRect: getShape(containerRect),
                 hasError,
                 location,
-                rects: combineRects(rects.map(getShape)),
+                rects: combineRects(screenShapes),
             },
         };
     },

package/src/store/highlight/types.ts

@@ -10,5 +10,6 @@ export type SelectionItem = {
     containerRect: Shape;
     hasError?: boolean;
     location: number;
+    popupRect?: Shape;
     rects: Array<Shape>;
 };

package/src/store/options/selectors.ts

@@ -1,6 +1,6 @@
 import getProp from 'lodash/get';
 import { AppState } from '../types';
-import { Permissions } from '../../@types';
+import { Permissions, Token } from '../../@types';
 import { Features } from '../../BoxAnnotations';
 import { ViewMode } from './types';
 
@@ -15,6 +15,6 @@ export const getIsCurrentFileVersion = (state: State): boolean => state.options.
 export const getPermissions = (state: State): Permissions => state.options.permissions;
 export const getRotation = (state: State): number => state.options.rotation;
 export const getScale = (state: State): number => state.options.scale;
-export const getToken = (state: State): string => state.options.token;
+export const getToken = (state: State): Token => state.options.token;
 export const isFeatureEnabled = (state: State, featurename: string): boolean =>
     getProp(getFeatures(state), featurename, false);

package/src/store/options/types.ts

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