box-annotations 4.0.0-beta.8 → 4.0.1-beta.1

package/src/components/ReplyForm/ReplyForm.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { getFormattedCommentText } from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector';
-import Button from 'box-ui-elements/es/components/button';
-import PrimaryButton from 'box-ui-elements/es/components/primary-button';
+import { getFormattedCommentText } from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector/utils';
 import { KEYS } from 'box-ui-elements/es/constants';
 import { EditorState } from 'draft-js';
 import { Form, FormikProps } from 'formik';
 import { FormattedMessage, useIntl } from 'react-intl';
 import messages from '../Popups/messages';
+import ReplyButton from './ReplyButton';
 import ReplyField from '../ReplyField';
 import { FormValues, PropsFromState as ContainerProps } from './ReplyFormContainer';
+import './ReplyForm.scss';
 
 export type ReplyFormProps = {
     isPending: boolean;
@@ -22,30 +22,55 @@ export type Props = ReplyFormProps &
     ContainerProps &
     Pick<FormikProps<FormValues>, 'errors' | 'setFieldValue' | 'values'>;
 
-const ReplyForm = ({ errors, isPending, onCancel, onChange, setFieldValue, values }: Props): JSX.Element => {
+const ReplyForm = (props: Props): JSX.Element => {
+    const { errors, isPending, onCancel, onChange, setFieldValue, values } = props;
+
+    const formRef = React.useRef<HTMLFormElement>(null);
     const intl = useIntl();
     const hasErrors = Object.keys(errors).length > 0;
     const { editorState } = values;
 
+    const handleCancel = (): void => {
+        onCancel(getFormattedCommentText(editorState).text);
+    };
     // Instead of deferring to the Formik handleChange helper, we need to use the setFieldValue helper
     // method in order for DraftJS to work correctly by setting back the whole editorState
     const handleChange = (nextEditorState: EditorState): void => {
         onChange(getFormattedCommentText(nextEditorState).text);
         setFieldValue('editorState', nextEditorState);
     };
-    const handleKeyDown = (event: React.KeyboardEvent): void => {
+
+    const handleKeyDown = (event: KeyboardEvent): void => {
         if (event.key !== KEYS.escape) {
             return;
         }
 
+        event.preventDefault();
         event.stopPropagation();
-        event.nativeEvent.stopImmediatePropagation();
 
-        onCancel(getFormattedCommentText(editorState).text);
+        handleCancel();
     };
 
+    // The entire annotation mode keydown event listener is attached to real dom's document
+    // Have to attach this event listener to real dom too, in order to capture the keydown event
+    // before annotation mode event listner captures it
+    React.useEffect(() => {
+        const { current: formEl } = formRef;
+
+        if (formEl) {
+            // Add event listener to real DOM
+            formEl.addEventListener('keydown', handleKeyDown);
+        }
+
+        return () => {
+            if (formEl) {
+                formEl.removeEventListener('keydown', handleKeyDown);
+            }
+        };
+    }, [formRef]); // eslint-disable-line react-hooks/exhaustive-deps
+
     return (
-        <Form className="ba-ReplyForm" data-testid="ba-ReplyForm" onKeyDown={handleKeyDown}>
+        <Form ref={formRef} className="ba-ReplyForm" data-testid="ba-ReplyForm">
             <div className="ba-Popup-main">
                 <ReplyField
                     className="ba-Popup-field"
@@ -57,12 +82,24 @@ const ReplyForm = ({ errors, isPending, onCancel, onChange, setFieldValue, value
                 />
             </div>
             <div className="ba-Popup-footer">
-                <Button data-testid="ba-Popup-cancel" isDisabled={isPending} onClick={onCancel} type="button">
+                <ReplyButton
+                    data-resin-target="cancel"
+                    data-testid="ba-Popup-cancel"
+                    isDisabled={isPending}
+                    onClick={handleCancel}
+                    type="button"
+                >
                     <FormattedMessage {...messages.buttonCancel} />
-                </Button>
-                <PrimaryButton data-testid="ba-Popup-submit" isDisabled={hasErrors || isPending} type="submit">
+                </ReplyButton>
+                <ReplyButton
+                    data-resin-target="post"
+                    data-testid="ba-Popup-submit"
+                    isDisabled={hasErrors || isPending}
+                    isPrimary
+                    type="submit"
+                >
                     <FormattedMessage {...messages.buttonPost} />
-                </PrimaryButton>
+                </ReplyButton>
             </div>
         </Form>
     );

package/src/components/ReplyForm/ReplyFormContainer.tsx

@@ -1,7 +1,5 @@
-import {
-    createMentionSelectorState,
-    getFormattedCommentText,
-} from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector';
+import createMentionSelectorState from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector/createMentionSelectorState';
+import { getFormattedCommentText } from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector/utils';
 import { EditorState, SelectionState } from 'draft-js';
 import { FormikBag, withFormik } from 'formik';
 import { connect } from 'react-redux';
@@ -29,6 +27,8 @@ export const mapStateToProps = (state: AppState): PropsFromState => ({
     cursorPosition: getCreatorCursor(state),
 });
 
+export const mapPropsToErrors = (): FormErrors => ({ editorState: 'initial' });
+
 export const mapPropsToValues = ({ cursorPosition: prevCursorPosition, value = '' }: Props): FormValues => {
     const mentionState = withMentionDecorator(createMentionSelectorState(value));
     const cursorPosition = value ? prevCursorPosition : 0;
@@ -68,8 +68,10 @@ export const handleSubmit = (
 const ReplyFormContainer = connect(mapStateToProps)(
     withFormik<Props, FormValues>({
         handleSubmit,
+        mapPropsToErrors,
         mapPropsToValues,
         validate,
+        validateOnMount: true,
     })(ReplyForm),
 );
 

package/src/constants.js

@@ -1,6 +1,3 @@
-// Annotation CSS constants
-export const CLASS_ANNOTATIONS_LOADED = 'ba-annotations-loaded';
-
 export const ANNOTATOR_EVENT = {
     fetch: 'annotationsfetched',
     error: 'annotationerror',
@@ -8,8 +5,4 @@ export const ANNOTATOR_EVENT = {
     setVisibility: 'annotationsetvisibility',
 };
 
-export const PLACEHOLDER_USER = {
-    type: 'user',
-    id: '0',
-    email: '',
-};
+export const MOUSE_PRIMARY = 1;

package/src/document/DocumentAnnotator.scss

@@ -1,3 +1,6 @@
+@import '~box-ui-elements/es/styles/variables';
+@import '../highlight/HighlightCreator';
+
 .bp-doc {
     .ba-Layer {
         position: absolute;
@@ -7,4 +10,16 @@
         width: 100%;
         pointer-events: none;
     }
+
+    &.ba-is-create--highlight {
+        .textLayer {
+            > span {
+                @include ba-HighlightCreator-cursor;
+            }
+
+            ::selection {
+                background-color: rgba($bdl-yellow, .33);
+            }
+        }
+    }
 }

package/src/document/DocumentAnnotator.ts

@@ -1,32 +1,105 @@
-import BaseAnnotator from '../common/BaseAnnotator';
-import BaseManager from '../common/BaseManager';
-import { CLASS_ANNOTATIONS_LOADED } from '../constants';
+import BaseAnnotator, { ANNOTATION_CLASSES, Options } from '../common/BaseAnnotator';
+import PopupManager from '../popup/PopupManager';
+import { centerDrawing, DrawingManager, isDrawing } from '../drawing';
+import {
+    centerHighlight,
+    HighlightCreatorManager,
+    HighlightListener,
+    HighlightManager,
+    isHighlight,
+} from '../highlight';
+import { centerRegion, isRegion, RegionCreationManager, RegionManager } from '../region';
+import { Event } from '../@types';
 import { getAnnotation } from '../store/annotations';
-import { centerRegion, isRegion, RegionManager } from '../region';
+import { getSelection } from './docUtil';
+import { Manager } from '../common/BaseManager';
+import { getFileId, getIsCurrentFileVersion, Mode } from '../store';
+import { scrollToLocation } from '../utils/scroll';
 import './DocumentAnnotator.scss';
 
-export const SCROLL_THRESHOLD = 1000; // pixels
+// Pdf.js textLayer enhancement requires waiting for 300ms (they hardcode this magic number)
+const TEXT_LAYER_ENHANCEMENT = 300;
 
 export default class DocumentAnnotator extends BaseAnnotator {
     annotatedEl?: HTMLElement;
 
-    managers: Map<number, BaseManager[]> = new Map();
+    highlightListener?: HighlightListener;
 
-    getPageManagers(pageEl: HTMLElement): BaseManager[] {
+    managers: Map<number, Set<Manager>> = new Map();
+
+    constructor(options: Options) {
+        super(options);
+
+        this.highlightListener = new HighlightListener({ getSelection, store: this.store });
+
+        this.addListener(Event.ANNOTATIONS_MODE_CHANGE, this.handleChangeMode);
+    }
+
+    destroy(): void {
+        this.removeListener(Event.ANNOTATIONS_MODE_CHANGE, this.handleChangeMode);
+
+        if (this.highlightListener) {
+            this.highlightListener.destroy();
+        }
+
+        if (this.managers) {
+            this.managers.forEach(managers => managers.forEach(manager => manager.destroy()));
+        }
+
+        super.destroy();
+    }
+
+    getAnnotatedElement(): HTMLElement | null | undefined {
+        return this.containerEl?.querySelector('.bp-doc');
+    }
+
+    getPageManagers(pageEl: HTMLElement): Set<Manager> {
+        const fileId = getFileId(this.store.getState());
+        const isCurrentFileVersion = getIsCurrentFileVersion(this.store.getState());
         const pageNumber = this.getPageNumber(pageEl);
         const pageReferenceEl = this.getPageReference(pageEl);
-        const managers = this.managers.get(pageNumber) || [];
+        const managers = this.managers.get(pageNumber) || new Set();
+        const resinTags = { fileid: fileId, iscurrent: isCurrentFileVersion };
 
         // Destroy any managers that were attached to page elements that no longer exist
-        if (managers.some(manager => !manager.exists(pageEl))) {
-            managers.forEach(manager => manager.destroy());
-            managers.length = 0;
-        }
+        managers.forEach(manager => {
+            if (!manager.exists(pageEl)) {
+                manager.destroy();
+                managers.delete(manager);
+            }
+        });
 
         // Lazily instantiate managers as pages are added or re-rendered
-        if (managers.length === 0) {
-            // Add additional managers here for other annotation types
-            managers.push(new RegionManager({ page: pageNumber, pageEl, referenceEl: pageReferenceEl }));
+        if (managers.size === 0) {
+            managers.add(new PopupManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+            managers.add(new DrawingManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+
+            const textLayer = pageEl.querySelector('.textLayer') as HTMLElement;
+
+            if (textLayer) {
+                managers.add(
+                    new HighlightCreatorManager({
+                        getSelection,
+                        referenceEl: textLayer,
+                        selectionChangeDelay: TEXT_LAYER_ENHANCEMENT,
+                        store: this.store,
+                    }),
+                );
+            }
+
+            managers.add(new HighlightManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+
+            managers.add(new RegionManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+
+            const canvasLayerEl = pageEl.querySelector<HTMLElement>('.canvasWrapper');
+
+            managers.add(
+                new RegionCreationManager({
+                    location: pageNumber,
+                    referenceEl: canvasLayerEl || pageReferenceEl,
+                    resinTags,
+                }),
+            );
         }
 
         return managers;
@@ -52,23 +125,26 @@ export default class DocumentAnnotator extends BaseAnnotator {
         return this.annotatedEl ? Array.from(this.annotatedEl.querySelectorAll('.page')) : [];
     }
 
-    init(scale: number): void {
-        super.init(scale);
-
-        if (!this.rootEl) {
+    handleChangeMode = ({ mode }: { mode: Mode }): void => {
+        if (!this.annotatedEl) {
             return;
         }
 
-        this.annotatedEl = this.rootEl.querySelector('.bp-doc') as HTMLElement;
-        this.annotatedEl.classList.add(CLASS_ANNOTATIONS_LOADED);
+        this.removeAnnotationClasses();
 
-        this.render();
-    }
+        const annotatedElement = this.annotatedEl;
+        const className = ANNOTATION_CLASSES[mode];
+        if (className) {
+            annotatedElement.classList.add(className);
+        }
+    };
 
     render(): void {
         this.getPages()
             .filter(({ dataset }) => dataset.loaded && dataset.pageNumber)
             .forEach(pageEl => this.renderPage(pageEl));
+
+        this.postRender();
     }
 
     renderPage(pageEl: HTMLElement): void {
@@ -92,43 +168,24 @@ export default class DocumentAnnotator extends BaseAnnotator {
         }
 
         const annotation = getAnnotation(this.store.getState(), annotationId);
-        const annotationPage = annotation?.target.location.value;
+        const annotationPage = annotation?.target.location.value ?? 1;
+        const annotationPageEl = this.getPage(annotationPage);
 
-        if (!annotation || !annotationPage) {
+        if (!annotation || !annotationPage || !annotationPageEl || !this.annotatedEl) {
             return;
         }
 
+        let offsets = null;
         if (isRegion(annotation)) {
-            this.scrollToLocation(annotationPage, centerRegion(annotation.target.shape));
-        }
-    }
-
-    scrollToLocation(page = 1, { x: offsetX, y: offsetY } = { x: 0, y: 0 }): void {
-        const pageEl = this.getPage(page);
-
-        if (!this.annotatedEl || !pageEl) {
-            return;
+            offsets = centerRegion(annotation.target.shape);
+        } else if (isHighlight(annotation)) {
+            offsets = centerHighlight(annotation.target.shapes);
+        } else if (isDrawing(annotation)) {
+            offsets = centerDrawing(annotation.target.path_groups);
         }
 
-        const canSmoothScroll = 'scrollBehavior' in this.annotatedEl.style;
-        const parentCenterX = Math.round(this.annotatedEl.clientWidth / 2);
-        const parentCenterY = Math.round(this.annotatedEl.clientHeight / 2);
-        const offsetCenterX = Math.round(pageEl.clientWidth * (offsetX / 100));
-        const offsetCenterY = Math.round(pageEl.clientHeight * (offsetY / 100));
-        const offsetScrollLeft = pageEl.offsetLeft - parentCenterX + offsetCenterX;
-        const offsetScrollTop = pageEl.offsetTop - parentCenterY + offsetCenterY;
-        const scrollLeft = Math.max(0, Math.min(offsetScrollLeft, this.annotatedEl.scrollWidth));
-        const scrollTop = Math.max(0, Math.min(offsetScrollTop, this.annotatedEl.scrollHeight));
-
-        if (canSmoothScroll && Math.abs(this.annotatedEl.scrollTop - scrollTop) < SCROLL_THRESHOLD) {
-            this.annotatedEl.scrollTo({
-                behavior: 'smooth',
-                left: scrollLeft,
-                top: scrollTop,
-            });
-        } else {
-            this.annotatedEl.scrollLeft = scrollLeft;
-            this.annotatedEl.scrollTop = scrollTop;
+        if (offsets) {
+            scrollToLocation(this.annotatedEl, annotationPageEl, { offsets });
         }
     }
 }

package/src/document/docUtil.ts

@@ -0,0 +1,61 @@
+type Selection = {
+    containerRect: DOMRect;
+    hasError?: boolean;
+    location: number;
+    range: Range;
+};
+
+/**
+ * Finds the closest ancestor DOM element with the specified class.
+ */
+export function findClosestElWithClass(element: Element | null, className: string): Element | null {
+    for (let el = element; el && el !== document.body; el = el.parentNode as Element | null) {
+        if (el.classList && el.classList.contains(className)) {
+            return el;
+        }
+    }
+
+    return null;
+}
+
+/**
+ * Returns the page element and page number that the element is on.
+ */
+export function getPageNumber(element: Element | null): number | undefined {
+    const pageEl = findClosestElWithClass(element, 'page');
+    const pageNumber = pageEl && pageEl.getAttribute('data-page-number');
+
+    return pageNumber ? parseInt(pageNumber, 10) : undefined;
+}
+
+export function getSelection(): Selection | null {
+    const selection = window.getSelection();
+
+    if (!selection || selection.isCollapsed || !selection.rangeCount || !selection.focusNode) {
+        return null;
+    }
+
+    // Firefox allows to select multiple ranges in the document by using Ctrl/Cmd+click
+    // We only care about the last range
+    let range = selection.getRangeAt(selection.rangeCount - 1);
+
+    const containerEl = findClosestElWithClass(range.endContainer as Element, 'textLayer');
+    const startPage = getPageNumber(range.startContainer as Element);
+    const endPage = getPageNumber(range.endContainer as Element);
+
+    if (!containerEl || !startPage || !endPage) {
+        return null;
+    }
+
+    const hasError = startPage !== endPage;
+    let location = endPage;
+
+    if (hasError) {
+        range = document.createRange();
+        range.setEnd(selection.focusNode, selection.focusOffset);
+        range.collapse(false); // Parameter toStart is not optional in IE
+        location = getPageNumber(selection.focusNode as Element) ?? endPage;
+    }
+
+    return { containerRect: containerEl.getBoundingClientRect(), hasError, location, range };
+}

package/src/drawing/DecoratedDrawingPath.scss

@@ -0,0 +1,9 @@
+.ba-DecoratedDrawingPath-decoration {
+    opacity: 0;
+    transition: opacity 200ms ease;
+
+    .is-active & {
+        opacity: 1;
+        transition-delay: 25ms;
+    }
+}

package/src/drawing/DecoratedDrawingPath.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { white } from 'box-ui-elements/es/styles/variables';
+import DrawingPath from './DrawingPath';
+import SVGFilterContext from './SVGFilterContext';
+import { getPathCommands } from './drawingUtil';
+import { Position } from '../@types';
+import './DecoratedDrawingPath.scss';
+
+export type Props = {
+    borderStrokeWidth?: number;
+    isDecorated?: boolean;
+    points?: Position[];
+};
+
+export default function DecoratedDrawingPath({
+    borderStrokeWidth = 0,
+    isDecorated = false,
+    points = [],
+}: Props): JSX.Element {
+    const filterID = React.useContext(SVGFilterContext);
+    const pathCommands = getPathCommands(points);
+    return (
+        <g className="ba-DecoratedDrawingPath">
+            {isDecorated && (
+                <g className="ba-DecoratedDrawingPath-decoration">
+                    <DrawingPath
+                        className="ba-DecoratedDrawingPath-shadow"
+                        filter={`url(#${filterID})`}
+                        pathCommands={pathCommands}
+                    />
+                    <DrawingPath
+                        className="ba-DecoratedDrawingPath-border"
+                        fill="none"
+                        pathCommands={pathCommands}
+                        stroke={white}
+                        strokeWidth={borderStrokeWidth}
+                    />
+                </g>
+            )}
+            <DrawingPath pathCommands={pathCommands} />
+        </g>
+    );
+}

package/src/drawing/DrawingAnnotations.scss

@@ -0,0 +1,39 @@
+.ba-DrawingAnnotations-list {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+
+    &.is-listening {
+        .ba-DrawingTarget {
+            pointer-events: auto; // Delegate event control to avoid re-rendering every target on mousedown/up
+        }
+    }
+}
+
+.ba-DrawingAnnotations-creator,
+.ba-DrawingAnnotations-target {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.ba-DrawingAnnotations-creator {
+    pointer-events: auto;
+    touch-action: none;
+}
+
+.ba-DrawingAnnotations-toolbar {
+    opacity: 1;
+    transition: opacity 200ms ease;
+    pointer-events: auto;
+
+    &.ba-is-drawing {
+        opacity: 0;
+        pointer-events: none;
+    }
+}