box-annotations 5.2.1-beta.8 → 5.3.1-beta.0

package/src/store/eventing/replyUpdate.ts

@@ -0,0 +1,35 @@
+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,28 @@
+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 = {
@@ -74,33 +77,61 @@ export const getShape = ({ height, left, top, width }: DOMRect): Shape => ({
     y: top,
 });
 
-export const setSelectionAction = createAction(
-    'SET_SELECTION',
-    (arg: SelectionArg | null): Payload => {
-        if (!arg) {
-            return {
-                payload: null,
-            };
-        }
+export const setSelectionAction = createAction('SET_SELECTION', (arg: SelectionArg | null): Payload => {
+    if (!arg) {
+        return {
+            payload: null,
+        };
+    }
 
-        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
-        if (!rects.length) {
-            rects = getClientRects(range);
-        }
+    let rects = Array.from(range.getClientRects());
+    // getClientRects on IE/Edge might return 0 rects
+    if (!rects.length) {
+        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: getShape(containerRect),
+                containerRect: { x: 0, y: 0, width: containerEl.offsetWidth, height: containerEl.offsetHeight },
                 hasError,
                 location,
-                rects: combineRects(rects.map(getShape)),
+                popupRect: getBoundingRect(screenShapes),
+                rects: combineRects(localRects),
             },
         };
-    },
-);
+    }
+
+    return {
+        payload: {
+            containerRect: getShape(containerRect),
+            hasError,
+            location,
+            rects: combineRects(screenShapes),
+        },
+    };
+});
 
 export const setIsPromotingAction = createAction<boolean>('SET_IS_PROMOTING');
 export const setIsSelectingAction = createAction<boolean>('SET_IS_SELECTING');

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

package/src/test-utils/videoAnnotations.tsx

@@ -18,8 +18,8 @@ export interface VideoAnnotationTestConfig {
     componentName: string;
     getWrapper: (props: unknown) => ReactWrapper;
     findListComponent: (wrapper: ReactWrapper) => ListComponentWrapper;
-    videoAnnotations: AnnotationDrawing[]|AnnotationRegion[] ;
-    regularAnnotations: AnnotationDrawing[]|AnnotationRegion[];
+    videoAnnotations: AnnotationDrawing[] | AnnotationRegion[];
+    regularAnnotations: AnnotationDrawing[] | AnnotationRegion[];
     activeAnnotationId: string;
     nonExistentAnnotationId: string;
 }
@@ -43,7 +43,7 @@ export const createVideoAnnotationTests = (config: VideoAnnotationTestConfig): v
         describe('TARGET_TYPE.FRAME target type', () => {
             test('should show only active annotation when not seeking and active annotation exists', () => {
                 mockVideoTimingReturn.isVideoSeeking = false;
-                
+
                 const wrapper = getWrapper({
                     targetType: TARGET_TYPE.FRAME,
                     annotations: videoAnnotations,
@@ -58,7 +58,7 @@ export const createVideoAnnotationTests = (config: VideoAnnotationTestConfig): v
 
             test('should show no annotations when seeking and active annotation exists', () => {
                 mockVideoTimingReturn.isVideoSeeking = true;
-                
+
                 const wrapper = getWrapper({
                     targetType: TARGET_TYPE.FRAME,
                     annotations: videoAnnotations,
@@ -71,7 +71,7 @@ export const createVideoAnnotationTests = (config: VideoAnnotationTestConfig): v
 
             test('should show no annotations when not seeking but no active annotation', () => {
                 mockVideoTimingReturn.isVideoSeeking = false;
-                
+
                 const wrapper = getWrapper({
                     targetType: TARGET_TYPE.FRAME,
                     annotations: videoAnnotations,
@@ -84,7 +84,7 @@ export const createVideoAnnotationTests = (config: VideoAnnotationTestConfig): v
 
             test('should show no annotations when seeking and no active annotation', () => {
                 mockVideoTimingReturn.isVideoSeeking = true;
-                
+
                 const wrapper = getWrapper({
                     targetType: TARGET_TYPE.FRAME,
                     annotations: videoAnnotations,
@@ -97,7 +97,7 @@ export const createVideoAnnotationTests = (config: VideoAnnotationTestConfig): v
 
             test('should call useVideoTiming with correct parameters for TARGET_TYPE.FRAME type', () => {
                 const referenceEl = document.createElement('video');
-                
+
                 getWrapper({
                     targetType: TARGET_TYPE.FRAME,
                     annotations: videoAnnotations,
@@ -117,7 +117,7 @@ export const createVideoAnnotationTests = (config: VideoAnnotationTestConfig): v
         describe('useVideoTiming integration', () => {
             test('should call useVideoTiming hook on component mount', () => {
                 const referenceEl = document.createElement('video');
-                
+
                 getWrapper({
                     targetType: TARGET_TYPE.FRAME,
                     annotations: videoAnnotations,
@@ -130,7 +130,7 @@ export const createVideoAnnotationTests = (config: VideoAnnotationTestConfig): v
 
             test('should pass correct parameters to useVideoTiming for TARGET_TYPE.PAGE type', () => {
                 const referenceEl = document.createElement('div');
-                
+
                 getWrapper({
                     targetType: TARGET_TYPE.PAGE,
                     annotations: regularAnnotations,
@@ -150,7 +150,7 @@ export const createVideoAnnotationTests = (config: VideoAnnotationTestConfig): v
         describe('annotation filtering edge cases', () => {
             test('should handle empty annotations array for TARGET_TYPE.FRAME type', () => {
                 mockVideoTimingReturn.isVideoSeeking = false;
-                
+
                 const wrapper = getWrapper({
                     targetType: TARGET_TYPE.FRAME,
                     annotations: [],
@@ -163,7 +163,7 @@ export const createVideoAnnotationTests = (config: VideoAnnotationTestConfig): v
 
             test('should handle active annotation that does not exist in annotations array', () => {
                 mockVideoTimingReturn.isVideoSeeking = false;
-                
+
                 const wrapper = getWrapper({
                     targetType: TARGET_TYPE.FRAME,
                     annotations: videoAnnotations,

package/src/utils/rotate.ts

@@ -129,3 +129,46 @@ export function getRotatedPosition({ x, y }: Position, rotation: number): Positi
     const { x: rotatedX, y: rotatedY } = getRotatedShape({ height: 0, width: 0, x, y }, rotation);
     return { x: rotatedX, y: rotatedY };
 }
+
+/**
+ * Converts a mouse position (in browser window coordinates) to a position relative to
+ * a CSS-rotated element's own top-left corner.
+ *
+ * When an element has a CSS rotation, its internal axes are rotated with it.
+ * This function maps window coordinates to element-local coordinates.
+ *
+ * If element is null, returns the raw coordinates as a passthrough.
+ *
+ * Assumes transform-origin: center (the CSS default), which matches how
+ * box-content-preview applies rotation to annotation layers.
+ */
+export function getElementLocalPosition(
+    clientX: number,
+    clientY: number,
+    element: HTMLElement | null,
+    rotation: number,
+): [number, number] {
+    if (!element) {
+        return [clientX, clientY];
+    }
+
+    const rect = element.getBoundingClientRect();
+
+    if (!rotation) {
+        return [clientX - rect.left, clientY - rect.top];
+    }
+
+    // 1. Find the element's center (rotation doesn't move the center)
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+
+    // 2. Get the mouse position relative to the center (in browser window coordinates)
+    const relX = clientX - centerX;
+    const relY = clientY - centerY;
+
+    // 3. Apply inverse rotation to obtain the mouse position from center in element-local coordinates
+    const local = rotatePoint({ x: relX, y: relY }, -rotation);
+
+    // 4. Convert coordinates from center-relative to top-left-relative
+    return [local.x + element.offsetWidth / 2, local.y + element.offsetHeight / 2];
+}

package/src/utils/useVideoTiming.ts

@@ -1,7 +1,5 @@
-import { useState, useEffect, useCallback } from "react";
-import { TARGET_TYPE } from "../constants";
-
-
+import { useState, useEffect, useCallback } from 'react';
+import { TARGET_TYPE } from '../constants';
 
 export interface UseVideoTimingProps {
     targetType: TARGET_TYPE;
@@ -22,7 +20,7 @@ export function getVideoCurrentTimeInMilliseconds(video: HTMLVideoElement): numb
 /**
  * This hook is used to keep track of when the video is currently seeking and when it has reached
  * the target time definined in the annotation. This is necessary because we cannot control how long it
- * takes for the video to seek to the target time and we do not want to display an annotation on the video player 
+ * takes for the video to seek to the target time and we do not want to display an annotation on the video player
  * at the wrong time. For example, if an annotation is defined at being at 20 seconds into the video and
  * the video just loaded and needs to buffer in order to get to 20 seconds, we do not want the annotation
  * drawing or region to be shown until the video has finished seeking and is at the correct time. The hook
@@ -38,9 +36,8 @@ const useVideoTiming = ({
     const [isVideoSeeking, setIsVideoSeeking] = useState<boolean>(false);
     const [targetVideoTime, setTargetVideoTime] = useState<number | null>(null);
 
-
-    const getCurrentVideoTimeStamp = useCallback((): number => { 
-         return getVideoCurrentTimeInMilliseconds(referenceEl as HTMLVideoElement);
+    const getCurrentVideoTimeStamp = useCallback((): number => {
+        return getVideoCurrentTimeInMilliseconds(referenceEl as HTMLVideoElement);
     }, [referenceEl]);
 
     // Handle video seeking events
@@ -48,7 +45,7 @@ const useVideoTiming = ({
         if (targetType !== TARGET_TYPE.FRAME || !referenceEl) {
             return undefined;
         }
-        
+
         const handleSeeking = (): void => {
             setIsVideoSeeking(true);
         };
@@ -62,7 +59,7 @@ const useVideoTiming = ({
             if (isVideoSeeking && targetVideoTime !== null) {
                 const currentVideoTimePosition = getCurrentVideoTimeStamp();
                 const timeDiff = Math.abs(currentVideoTimePosition - targetVideoTime);
-                
+
                 // Consider the video has reached the target time if within 100ms
                 if (timeDiff <= 100) {
                     setIsVideoSeeking(false);
@@ -86,13 +83,13 @@ const useVideoTiming = ({
     useEffect(() => {
         if (targetType === TARGET_TYPE.FRAME && activeAnnotationId && referenceEl) {
             const currentVideoTimePosition = getCurrentVideoTimeStamp();
-            
+
             // Find the annotation to get its target time
             const annotation = annotations.find(ann => ann.id === activeAnnotationId);
             if (annotation) {
                 const annotationTimePosition = annotation.target.location.value;
                 const timeDiff = Math.abs(currentVideoTimePosition - annotationTimePosition);
-                
+
                 // If the video is not at the annotation's time, set seeking state
                 if (timeDiff > 100) {
                     setTargetVideoTime(annotationTimePosition);
@@ -109,4 +106,3 @@ const useVideoTiming = ({
 };
 
 export default useVideoTiming;
-