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

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,7 +68,12 @@ export default class ImageAnnotator extends BaseAnnotator {
         });
 
         if (this.managers.size === 0) {
-            this.managers.add(new PopupManager({ 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({ 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,7 @@
 import * as React from 'react';
 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 +14,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 +29,7 @@ export type Props = {
     location: number;
     message: string;
     mode: Mode;
+    popupPortalEl?: HTMLElement | null;
     referenceId: string | null;
     resetCreator: () => void;
     setMessage: (message: string) => void;
@@ -41,6 +46,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 +54,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         isThreadedAnnotation = false,
         message,
         mode,
+        popupPortalEl,
         referenceId,
         resetCreator,
         setMessage,
@@ -57,6 +64,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 +77,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 +97,58 @@ 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) {
+        return (
+            <div className="ba-PopupLayer-popup">
+                <PopupReply
+                    isPending={isPending}
+                    onCancel={handleCancel}
+                    onChange={handleChange}
+                    onSubmit={handleSubmit}
+                    reference={reference}
+                    value={message}
+                />
+            </div>
+        );
+    }
+
+    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

package/src/store/annotations/actions.ts

@@ -1,8 +1,9 @@
 import { createAction, createAsyncThunk } from '@reduxjs/toolkit';
-import { Annotation, NewAnnotation } from '../../@types';
+import { Annotation, NewAnnotation, Reply } from '../../@types';
 import { APICollection } from '../../api';
 import { AppThunkAPI } from '../types';
-import { getFileId, getFileVersionId, getPermissions } from '../options';
+import { getAnnotation } from './selectors';
+import { getFileId, getFileVersionId, getPermissions, isFeatureEnabled } from '../options';
 
 export const createAnnotationAction = createAsyncThunk<Annotation, NewAnnotation, AppThunkAPI>(
     'CREATE_ANNOTATION',
@@ -39,9 +40,83 @@ export const fetchAnnotationsAction = createAsyncThunk<APICollection<Annotation>
             client.destroy();
         });
 
+        const shouldFetchReplies = isFeatureEnabled({ options: getState().options }, 'isThreadedAnnotation');
+
         // Wrap the client request in a promise to allow it to be returned and cancelled
         return new Promise<APICollection<Annotation>>((resolve, reject) => {
-            client.getAnnotations(fileId, fileVersionId, permissions, resolve, reject, 1000, false);
+            client.getAnnotations(fileId, fileVersionId, permissions, resolve, reject, 1000, false, shouldFetchReplies);
+        });
+    },
+);
+
+export const createReplyAction = createAsyncThunk<
+    { annotationId: string; reply: Reply },
+    { annotationId: string; message: string },
+    AppThunkAPI
+>(
+    'CREATE_REPLY',
+    async ({ annotationId, message }, { extra, getState, signal }) => {
+        const client = extra.api.getAnnotationsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const filePermissions = getPermissions(state);
+        const annotation = getAnnotation(state, annotationId);
+        const permissions = { ...filePermissions, ...annotation?.permissions };
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        const reply = await new Promise<Reply>((resolve, reject) => {
+            client.createAnnotationReply(fileId, annotationId, permissions, message, resolve, reject);
+        });
+
+        return { annotationId, reply };
+    },
+);
+
+export const deleteAnnotationAction = createAsyncThunk<string, string, AppThunkAPI>(
+    'DELETE_ANNOTATION',
+    async (annotationId, { extra, getState, signal }) => {
+        const client = extra.api.getAnnotationsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const filePermissions = getPermissions(state);
+        const annotation = getAnnotation(state, annotationId);
+        const permissions = { ...filePermissions, ...annotation?.permissions };
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        await new Promise<void>((resolve, reject) => {
+            client.deleteAnnotation(fileId, annotationId, permissions, resolve, reject);
+        });
+
+        return annotationId;
+    },
+);
+
+export const updateAnnotationAction = createAsyncThunk<
+    Annotation,
+    { annotationId: string; payload: { message?: string; status?: string } },
+    AppThunkAPI
+>(
+    'UPDATE_ANNOTATION',
+    async ({ annotationId, payload }, { extra, getState, signal }) => {
+        const client = extra.api.getAnnotationsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const filePermissions = getPermissions(state);
+        const existingAnnotation = getAnnotation(state, annotationId);
+        const permissions = { ...filePermissions, ...existingAnnotation?.permissions };
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        return new Promise<Annotation>((resolve, reject) => {
+            client.updateAnnotation(fileId, annotationId, permissions, payload, resolve, reject);
         });
     },
 );

package/src/store/annotations/reducer.ts

@@ -3,18 +3,27 @@ import { formatDrawing, isDrawing } from '../../drawing/drawingUtil';
 import { AnnotationsState } from './types';
 import {
     createAnnotationAction,
+    createReplyAction,
+    deleteAnnotationAction,
     fetchAnnotationsAction,
     removeAnnotationAction,
     setActiveAnnotationIdAction,
     setIsInitialized,
+    updateAnnotationAction,
 } 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(deleteAnnotationAction.fulfilled, (state, { payload: id }) => (state === id ? null : state))
         .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 =>
@@ -22,6 +31,7 @@ const annotationsAllIds = createReducer<AnnotationsState['allIds']>([], builder
         .addCase(createAnnotationAction.fulfilled, (state, { payload: { id } }) => {
             state.push(id);
         })
+        .addCase(deleteAnnotationAction.fulfilled, (state, { payload: id }) => state.filter(annotationId => annotationId !== id))
         .addCase(removeAnnotationAction, (state, { payload: id }) => state.filter(annotationId => annotationId !== id))
         .addCase(fetchAnnotationsAction.fulfilled, (state, { payload }) => {
             payload.entries.forEach(({ id }) => state.indexOf(id) === -1 && state.push(id));
@@ -33,9 +43,21 @@ const annotationsById = createReducer<AnnotationsState['byId']>({}, builder =>
         .addCase(createAnnotationAction.fulfilled, (state, { payload }) => {
             state[payload.id] = isDrawing(payload) ? formatDrawing(payload) : payload;
         })
+        .addCase(createReplyAction.fulfilled, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (annotation) {
+                annotation.replies = [...(annotation.replies ?? []), reply];
+            }
+        })
+        .addCase(deleteAnnotationAction.fulfilled, (state, { payload: id }) => {
+            delete state[id];
+        })
         .addCase(removeAnnotationAction, (state, { payload: id }) => {
             delete state[id];
         })
+        .addCase(updateAnnotationAction.fulfilled, (state, { payload }) => {
+            state[payload.id] = isDrawing(payload) ? formatDrawing(payload) : payload;
+        })
         .addCase(fetchAnnotationsAction.fulfilled, (state, { payload }) => {
             payload.entries.forEach(annotation => {
                 state[annotation.id] = isDrawing(annotation) ? formatDrawing(annotation) : annotation;