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

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,14 +1,16 @@
 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 = {
+export const initialState: OptionsState = {
+    apiHost: '',
     features: {},
     fileId: null,
     fileVersionId: null,
@@ -16,6 +18,8 @@ export const initialState = {
     permissions: {},
     rotation: 0,
     scale: 1,
+    token: '',
+    viewMode: 'annotations' as ViewMode,
 };
 
 export default createReducer<OptionsState>(initialState, builder =>
@@ -34,5 +38,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,15 +2,19 @@ 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 getApiHost = (state: State): string => state.options.apiHost;
 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;
 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 isFeatureEnabled = (state: State, featurename: string): boolean =>
     getProp(getFeatures(state), featurename, false);

package/src/store/options/types.ts

@@ -1,7 +1,11 @@
 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 = {
+    apiHost: string;
     features: Features;
     fileId: string | null;
     fileVersionId: string | null;
@@ -9,4 +13,6 @@ export type OptionsState = {
     permissions: Permissions;
     rotation: number;
     scale: number;
+    token: string;
+    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/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/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;
+    }
 }