feat(highlight): Promote and show staged highlight annotation

src/document/__tests__/docUtil-test.ts

@@ -54,6 +54,7 @@ describe('docUtil', () => {
 
     describe('getSelection()', () => {
         const rootElement = document.createElement('div');
+        rootElement.classList.add('textLayer');
         rootElement.innerHTML = `
             <div class="range0" />
             <div class="page" data-page-number="1">
@@ -84,6 +85,15 @@ describe('docUtil', () => {
             expect(getSelection()).toBe(null);
         });
 
+        test('should return null if no text layer', () => {
+            rootElement.classList.remove('textLayer');
+
+            expect(getSelection()).toBe(null);
+
+            // reset
+            rootElement.classList.add('textLayer');
+        });
+
         test.each`
             startClass   | endClass     | result
             ${'.range0'} | ${'.range0'} | ${null}

src/document/docUtil.ts

@@ -1,6 +1,7 @@
 type Selection = {
-    range: Range;
+    containerRect: DOMRect;
     location: number;
+    range: Range;
 };
 
 /**
@@ -44,12 +45,13 @@ export function getSelection(): Selection | null {
         return null;
     }
 
+    const containerEl = findClosestElWithClass(range.endContainer as Element, 'textLayer');
     const startPage = getPageNumber(range.startContainer as Element);
     const endPage = getPageNumber(range.endContainer as Element);
 
-    if (!startPage || !endPage || startPage !== endPage) {
+    if (!containerEl || !startPage || !endPage || startPage !== endPage) {
         return null;
     }
 
-    return { range, location: endPage };
+    return { containerRect: containerEl.getBoundingClientRect(), location: endPage, range };
 }

src/highlight/HighlightAnnotations.tsx

@@ -9,25 +9,22 @@ import PopupHighlight from '../components/Popups/PopupHighlight';
 import PopupReply from '../components/Popups/PopupReply';
 import { AnnotationHighlight } from '../@types';
 import { CreateArg } from './actions';
-import { CreatorItemHighlight, CreatorStatus, Mode, SelectionArg, SelectionItem } from '../store';
-import { getBoundingRect } from './highlightUtil';
+import { CreatorItemHighlight, CreatorStatus, SelectionItem } from '../store';
+import { getBoundingRect, getShapeRelativeToContainer } from './highlightUtil';
 import './HighlightAnnotations.scss';
 
 type Props = {
     activeAnnotationId: string | null;
     annotations: AnnotationHighlight[];
     createHighlight?: (arg: CreateArg) => void;
     isCreating: boolean;
-    isPromoting: boolean;
     location: number;
     message: string;
     resetCreator: () => void;
     selection: SelectionItem | null;
     setActiveAnnotationId: (annotationId: string | null) => void;
     setIsPromoting: (isPromoting: boolean) => void;
     setMessage: (message: string) => void;
-    setMode: (mode: Mode) => void;
-    setSelection: (selection: SelectionArg | null) => void;
     setStaged: (staged: CreatorItemHighlight | null) => void;
     setStatus: (status: CreatorStatus) => void;
     staged?: CreatorItemHighlight | null;
@@ -40,14 +37,14 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
         annotations = [],
         createHighlight = noop,
         isCreating = false,
-        isPromoting,
         message,
         resetCreator,
         selection,
         setActiveAnnotationId,
         setIsPromoting,
-        setSelection,
         setMessage,
+        setStaged,
+        setStatus,
         staged,
         status,
     } = props;
@@ -62,10 +59,6 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
 
     const handleCancel = (): void => {
         resetCreator();
-
-        if (isPromoting) {
-            setIsPromoting(false);
-        }
     };
 
     const handleChange = (text = ''): void => {
@@ -78,15 +71,25 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
         }
 
         createHighlight({ ...staged, message });
-
-        if (isPromoting) {
-            setIsPromoting(false);
-        }
     };
 
     const handlePromote = (): void => {
+        if (!selection) {
+            return;
+        }
+
+        const { containerRect, location, rects } = selection;
+
+        setStaged({
+            location,
+            shapes: rects.map(rect => ({
+                ...getShapeRelativeToContainer(rect, containerRect),
+                type: 'rect',
+            })),
+        });
+        setStatus(CreatorStatus.staged);
+
         setIsPromoting(true);
-        setSelection(null);
     };
 
     return (

src/highlight/HighlightContainer.tsx

@@ -21,10 +21,8 @@ import {
     setActiveAnnotationIdAction,
     setIsPromotingAction,
     setMessageAction,
-    setSelectionAction,
     setStagedAction,
     setStatusAction,
-    toggleAnnotationModeAction,
 } from '../store';
 import { createHighlightAction } from './actions';
 import { isHighlight } from './highlightUtil';
@@ -33,7 +31,6 @@ export type Props = {
     activeAnnotationId: string | null;
     annotations: AnnotationHighlight[];
     isCreating: boolean;
-    isPromoting: boolean;
     message: string;
     selection: SelectionItem | null;
     staged: CreatorItemHighlight | null;
@@ -46,8 +43,7 @@ export const mapStateToProps = (state: AppState, { location }: { location: numbe
     return {
         activeAnnotationId: getActiveAnnotationId(state),
         annotations: getAnnotationsForLocation(state, location).filter(isHighlight),
-        isCreating: getAnnotationMode(state) === Mode.HIGHLIGHT,
-        isPromoting: getIsPromoting(state),
+        isCreating: getAnnotationMode(state) === Mode.HIGHLIGHT || getIsPromoting(state),
         message: getCreatorMessage(state),
         selection: getSelectionForLocation(state, location),
         staged: isCreatorStagedHighlight(staged) ? staged : null,
@@ -61,8 +57,6 @@ export const mapDispatchToProps = {
     setActiveAnnotationId: setActiveAnnotationIdAction,
     setIsPromoting: setIsPromotingAction,
     setMessage: setMessageAction,
-    setMode: toggleAnnotationModeAction,
-    setSelection: setSelectionAction,
     setStaged: setStagedAction,
     setStatus: setStatusAction,
 };

src/highlight/__mocks__/data.ts

@@ -39,6 +39,12 @@ export const annotation: AnnotationHighlight = {
 };
 
 export const selection = {
+    containerRect: {
+        height: 1000,
+        width: 1000,
+        x: 0,
+        y: 0,
+    },
     location: 1,
     rects: [
         {

src/highlight/__tests__/HighlightAnnotations-test.tsx

@@ -25,16 +25,13 @@ describe('HighlightAnnotations', () => {
         annotations: [],
         createHighlight: jest.fn(),
         isCreating: false,
-        isPromoting: false,
         location: 1,
         message: 'test',
         resetCreator: jest.fn(),
         selection: null,
         setActiveAnnotationId: jest.fn(),
         setIsPromoting: jest.fn(),
         setMessage: jest.fn(),
-        setMode: jest.fn(),
-        setSelection: jest.fn(),
         setStaged: jest.fn(),
         setStatus: jest.fn(),
         staged: null,
@@ -154,8 +151,20 @@ describe('HighlightAnnotations', () => {
             const wrapper = getWrapper({ selection: selectionMock });
             wrapper.find(PopupHighlight).simulate('click');
 
+            expect(defaults.setStaged).toHaveBeenCalledWith({
+                location: 1,
+                shapes: [
+                    {
+                        height: 10,
+                        type: 'rect',
+                        width: 10,
+                        x: 20,
+                        y: 20,
+                    },
+                ],
+            });
+            expect(defaults.setStatus).toHaveBeenCalledWith('staged');
             expect(defaults.setIsPromoting).toHaveBeenCalledWith(true);
-            expect(defaults.setSelection).toHaveBeenCalledWith(null);
         });
     });
 
@@ -178,7 +187,6 @@ describe('HighlightAnnotations', () => {
                 wrapper.find(PopupReply).simulate('cancel');
 
                 expect(defaults.resetCreator).toHaveBeenCalled();
-                expect(defaults.setIsPromoting).toHaveBeenCalledWith(false);
             });
         });
 
@@ -204,7 +212,6 @@ describe('HighlightAnnotations', () => {
                     ...getStaged(),
                     message: defaults.message,
                 });
-                expect(defaults.setIsPromoting).toHaveBeenCalledWith(false);
             });
         });
     });

src/highlight/__tests__/HighlightContainer-test.tsx

@@ -5,6 +5,7 @@ import {
     getAnnotationMode,
     getAnnotationsForLocation,
     getCreatorStagedForLocation,
+    getIsPromoting,
     Mode,
 } from '../../store';
 import { annotation as highlightAnnotation, rect as highlightRect } from '../__mocks__/data';
@@ -35,16 +36,23 @@ describe('HighlightContainer', () => {
         });
 
         test.each`
-            mode              | isCreating
-            ${Mode.NONE}      | ${false}
-            ${Mode.HIGHLIGHT} | ${true}
-            ${Mode.REGION}    | ${false}
-        `('should pass down isCreating as $isCreating if mode is $mode', ({ mode, isCreating }) => {
-            (getAnnotationMode as jest.Mock).mockReturnValue(mode);
-            const props = mapStateToProps({} as AppState, { location: 1 });
+            mode              | isPromoting | isCreating
+            ${Mode.NONE}      | ${false}    | ${false}
+            ${Mode.NONE}      | ${true}     | ${true}
+            ${Mode.HIGHLIGHT} | ${false}    | ${true}
+            ${Mode.HIGHLIGHT} | ${true}     | ${true}
+            ${Mode.REGION}    | ${false}    | ${false}
+            ${Mode.REGION}    | ${true}     | ${true}
+        `(
+            'should pass down isCreating as $isCreating if mode is $mode and isPromoting is $isPromoting',
+            ({ mode, isCreating, isPromoting }) => {
+                (getAnnotationMode as jest.Mock).mockReturnValue(mode);
+                (getIsPromoting as jest.Mock).mockReturnValue(isPromoting);
+                const props = mapStateToProps({} as AppState, { location: 1 });
 
-            expect(props.isCreating).toBe(isCreating);
-        });
+                expect(props.isCreating).toBe(isCreating);
+            },
+        );
 
         test.each`
             staged             | expectedStaged

src/highlight/__tests__/HighlightListener-test.ts

@@ -1,7 +1,7 @@
 import createStore from '../../store/__mocks__/createStore';
 import HighlightListener from '../HighlightListener';
 import { AppStore, getIsInitialized } from '../../store';
-import { mockRange } from '../../store/promoter/__mocks__/range';
+import { mockContainerRect, mockRange } from '../../store/promoter/__mocks__/data';
 
 jest.mock('lodash/debounce', () => (func: Function) => func);
 jest.mock('../../store', () => ({
@@ -13,7 +13,7 @@ jest.useFakeTimers();
 
 describe('HighlightListener', () => {
     const defaults = {
-        getSelection: jest.fn(() => ({ location: 1, range: mockRange })),
+        getSelection: jest.fn(() => ({ containerRect: mockContainerRect, location: 1, range: mockRange })),
         store: (createStore() as unknown) as AppStore,
     };
     const mockAnnotatedEl = document.createElement('div');
@@ -101,7 +101,11 @@ describe('HighlightListener', () => {
         test('should dispatch selection', () => {
             highlightListener.setSelection();
 
-            expect(defaults.store.dispatch).toHaveBeenCalledWith({ location: 1, range: mockRange });
+            expect(defaults.store.dispatch).toHaveBeenCalledWith({
+                containerRect: mockContainerRect,
+                location: 1,
+                range: mockRange,
+            });
         });
     });