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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "5.2.1-beta.13",
+    "version": "5.2.1-beta.14",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -28,13 +28,13 @@
         "@babel/preset-react": "^7.25.9",
         "@babel/preset-typescript": "^7.25.9",
         "@box/frontend": "^10.0.0",
-        "@box/blueprint-web": "^14.30.0",
-        "@box/blueprint-web-assets": "^4.117.2",
-        "@box/collaboration-popover": "^1.62.3",
+        "@box/blueprint-web": "^14.31.0",
+        "@box/blueprint-web-assets": "^4.118.3",
+        "@box/collaboration-popover": "^1.62.9",
         "@box/languages": "^1.1.0",
-        "@box/readable-time": "^1.41.3",
-        "@box/threaded-annotations": "^1.89.1",
-        "@box/user-selector": "^1.76.3",
+        "@box/readable-time": "^1.41.9",
+        "@box/threaded-annotations": "^1.89.8",
+        "@box/user-selector": "^1.76.9",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.2.0",
@@ -128,12 +128,12 @@
         "worker-farm": "^1.7.0"
     },
     "peerDependencies": {
-        "@box/blueprint-web": "^14.30.0",
-        "@box/blueprint-web-assets": "^4.117.2",
-        "@box/collaboration-popover": "^1.62.3",
-        "@box/readable-time": "^1.41.3",
-        "@box/threaded-annotations": "^1.89.1",
-        "@box/user-selector": "^1.76.3"
+        "@box/blueprint-web": "^14.31.0",
+        "@box/blueprint-web-assets": "^4.118.3",
+        "@box/collaboration-popover": "^1.62.9",
+        "@box/readable-time": "^1.41.9",
+        "@box/threaded-annotations": "^1.89.8",
+        "@box/user-selector": "^1.76.9"
     },
     "scripts": {
         "build": "yarn setup && yarn build:prod:dist",

package/src/document/DocumentAnnotator.ts

@@ -118,7 +118,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
                 );
             }
 
-            managers.add(new HighlightManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+            managers.add(new HighlightManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
             managers.add(new RegionManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
 
             const canvasLayerEl = pageEl.querySelector<HTMLElement>('.canvasWrapper');

package/src/document/docUtil.ts

@@ -1,4 +1,5 @@
 type Selection = {
+    containerEl: HTMLElement;
     containerRect: DOMRect;
     hasError?: boolean;
     location: number;
@@ -61,5 +62,5 @@ export function getSelection(): Selection | null {
         location = getPageNumber(selection.focusNode as Element) ?? endPage;
     }
 
-    return { containerRect: containerEl.getBoundingClientRect(), hasError, location, range };
+    return { containerEl: containerEl as HTMLElement, containerRect: containerEl.getBoundingClientRect(), hasError, location, range };
 }

package/src/highlight/HighlightAnnotations.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import ReactDOM from 'react-dom';
 import HighlightCanvas from './HighlightCanvas';
 import HighlightList from './HighlightList';
 import HighlightSvg from './HighlightSvg';
@@ -20,6 +21,8 @@ type Props = {
     isPromoting: boolean;
     isSelecting: boolean;
     location: number;
+    popupPortalEl?: HTMLElement | null;
+    rotation: number;
     selection: SelectionItem | null;
     setActiveAnnotationId: (annotationId: string | null) => void;
     setIsPromoting: (isPromoting: boolean) => void;
@@ -38,6 +41,8 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
         isPending = false,
         isPromoting = false,
         isSelecting = false,
+        popupPortalEl,
+        rotation,
         selection,
         setActiveAnnotationId,
         setIsPromoting,
@@ -121,22 +126,30 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
             )}
 
             {/* Layer 3a: Annotations promoter to promote selection to staged */}
-            {!isCreating && selection && !selection.hasError && (
-                <div className="ba-HighlightAnnotations-popup">
-                    <PopupHighlight
-                        onCancel={handleCancel}
-                        onSubmit={handlePromote}
-                        shape={getBoundingRect(selection.rects)}
-                    />
-                </div>
-            )}
+            {!isCreating && selection && !selection.hasError && (() => {
+                const popupShape = selection.popupRect || getBoundingRect(selection.rects);
+                const popup = (
+                    <div className="ba-HighlightAnnotations-popup">
+                        <PopupHighlight
+                            onCancel={handleCancel}
+                            onSubmit={handlePromote}
+                            shape={popupShape}
+                        />
+                    </div>
+                );
+                return rotation && popupPortalEl ? ReactDOM.createPortal(popup, popupPortalEl) : popup;
+            })()}
 
             {/* Layer 3b: Highlight error popup */}
-            {selection && selection.hasError && (
-                <div className="ba-HighlightAnnotations-popup">
-                    <PopupHighlightError onCancel={handleCancel} shape={getBoundingRect(selection.rects)} />
-                </div>
-            )}
+            {selection && selection.hasError && (() => {
+                const popupShape = selection.popupRect || getBoundingRect(selection.rects);
+                const popup = (
+                    <div className="ba-HighlightAnnotations-popup">
+                        <PopupHighlightError onCancel={handleCancel} shape={popupShape} />
+                    </div>
+                );
+                return rotation && popupPortalEl ? ReactDOM.createPortal(popup, popupPortalEl) : popup;
+            })()}
         </>
     );
 };

package/src/highlight/HighlightContainer.tsx

@@ -13,6 +13,7 @@ import {
     getCreatorStatus,
     getIsPromoting,
     getIsSelecting,
+    getRotation,
     getSelectionForLocation,
     isCreatorStagedHighlight,
     Mode,
@@ -33,6 +34,7 @@ export type Props = {
     isPending: boolean;
     isPromoting: boolean;
     isSelecting: boolean;
+    rotation: number;
     selection: SelectionItem | null;
     staged: CreatorItemHighlight | null;
 };
@@ -47,6 +49,7 @@ export const mapStateToProps = (state: AppState, { location }: { location: numbe
         isPending: getCreatorStatus(state) === CreatorStatus.pending,
         isPromoting: getIsPromoting(state),
         isSelecting: getIsSelecting(state),
+        rotation: getRotation(state),
         selection: getSelectionForLocation(state, location),
         staged: isCreatorStagedHighlight(staged) ? staged : null,
     };

package/src/highlight/HighlightCreatorManager.ts

@@ -1,6 +1,7 @@
 import {
     AppStore,
     getIsSelecting,
+    getRotation,
     SelectionArg as Selection,
     setIsSelectingAction,
     setSelectionAction,
@@ -41,18 +42,18 @@ export default class HighlightCreatorManager implements Manager {
         this.store.dispatch(setSelectionAction(null));
 
         this.referenceEl.addEventListener('mousedown', this.handleMouseDown);
-        this.referenceEl.addEventListener('mouseup', this.handleMouseUp);
+        document.addEventListener('mouseup', this.handleMouseUp);
     }
 
-    style(styles: Partial<CSSStyleDeclaration>): CSSStyleDeclaration {
-        return Object.assign(this.referenceEl.style, styles);
+    style(): CSSStyleDeclaration {
+        return this.referenceEl.style;
     }
 
     destroy(): void {
         clearTimeout(this.selectionChangeTimer);
 
         this.referenceEl.removeEventListener('mousedown', this.handleMouseDown);
-        this.referenceEl.removeEventListener('mouseup', this.handleMouseUp);
+        document.removeEventListener('mouseup', this.handleMouseUp);
     }
 
     handleMouseDown = ({ buttons }: MouseEvent): void => {
@@ -72,7 +73,9 @@ export default class HighlightCreatorManager implements Manager {
         }
 
         this.selectionChangeTimer = window.setTimeout(() => {
-            this.store.dispatch(setSelectionAction(this.getSelection()));
+            const selection = this.getSelection();
+            const rotation = getRotation(this.store.getState());
+            this.store.dispatch(setSelectionAction(selection ? { ...selection, rotation } : null));
             this.store.dispatch(setIsSelectingAction(false));
         }, this.selectionChangeDelay);
     };

package/src/highlight/HighlightListener.ts

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import { AppStore, getIsSelecting, SelectionArg as Selection, setSelectionAction } from '../store';
+import { AppStore, getIsSelecting, getRotation, SelectionArg as Selection, setSelectionAction } from '../store';
 
 export type Options = {
     getSelection: () => Selection | null;
@@ -30,7 +30,9 @@ export default class HighlightListener {
             return;
         }
 
-        this.store.dispatch(setSelectionAction(this.getSelection()));
+        const selection = this.getSelection();
+        const rotation = getRotation(this.store.getState());
+        this.store.dispatch(setSelectionAction(selection ? { ...selection, rotation } : null));
     };
 
     debounceHandleSelectionChange = debounce(this.handleSelectionChange, SELECTION_CHANGE_DEBOUNCE);

package/src/highlight/HighlightManager.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 HighlightContainer from './HighlightContainer';
 
+export type Options = BaseOptions & {
+    popupPortalEl?: HTMLElement | null;
+};
+
 export default class HighlightManager extends BaseManager {
+    popupPortalEl?: HTMLElement | null;
+
+    constructor({ popupPortalEl, ...options }: Options) {
+        super(options);
+        this.popupPortalEl = popupPortalEl;
+    }
+
     decorate(): void {
         this.reactEl.classList.add('ba-Layer--highlight');
         this.reactEl.dataset.testid = 'ba-Layer--highlight';
@@ -14,6 +25,6 @@ export default class HighlightManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<HighlightContainer location={this.location} {...props} />);
+        this.root.render(<HighlightContainer location={this.location} popupPortalEl={this.popupPortalEl} {...props} />);
     }
 }

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