feat(drawing): Add drawing components (#631)

* feat(drawing): Add drawing components

* feat(drawing): Address comments

* feat(drawing): Address comments

Author: Mingze

src/@types/model.ts

@@ -31,11 +31,24 @@ export interface AnnotationRegion extends Annotation {
     target: TargetRegion;
 }
 
+export type Dimensions = {
+    height: number;
+    width: number;
+};
+
 export interface Page {
     type: 'page';
     value: number;
 }
 
+export interface Path {
+    points: Array<Position>;
+}
+export interface PathGroup {
+    paths: Array<Path>;
+    stroke: Stroke;
+}
+
 export interface Position {
     x: number;
     y: number;
@@ -79,12 +92,7 @@ export type Target = TargetDrawing | TargetHighlight | TargetPoint | TargetRegio
 
 export interface TargetDrawing {
     location: Page;
-    paths: [
-        {
-            points: [Position];
-        },
-    ];
-    stroke: Stroke;
+    path_groups: Array<PathGroup>;
     type: 'drawing';
 }
 

src/document/DocumentAnnotator.ts

@@ -2,6 +2,7 @@ import BaseAnnotator, { ANNOTATION_CLASSES, Options } from '../common/BaseAnnota
 import PopupManager from '../popup/PopupManager';
 import { centerHighlight, isHighlight } from '../highlight/highlightUtil';
 import { centerRegion, isRegion, RegionCreationManager, RegionManager } from '../region';
+import { DrawingManager } from '../drawing';
 import { Event } from '../@types';
 import { getAnnotation } from '../store/annotations';
 import { getSelection } from './docUtil';
@@ -66,6 +67,10 @@ export default class DocumentAnnotator extends BaseAnnotator {
         if (managers.size === 0) {
             managers.add(new PopupManager({ location: pageNumber, referenceEl: pageReferenceEl }));
 
+            if (this.isFeatureEnabled('drawing')) {
+                managers.add(new DrawingManager({ location: pageNumber, referenceEl: pageReferenceEl }));
+            }
+
             if (this.isFeatureEnabled('highlightText')) {
                 const textLayer = pageEl.querySelector('.textLayer') as HTMLElement;
 

src/drawing/DrawingAnnotations.scss

@@ -0,0 +1,14 @@
+.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
+        }
+    }
+}

src/drawing/DrawingAnnotations.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import DrawingList from './DrawingList';
+import { AnnotationDrawing } from '../@types';
+import './DrawingAnnotations.scss';
+
+export type Props = {
+    activeAnnotationId: string | null;
+    annotations: AnnotationDrawing[];
+    isCurrentFileVersion: boolean;
+    setActiveAnnotationId: (annotationId: string | null) => void;
+};
+
+const DrawingAnnotations = (props: Props): JSX.Element => {
+    const { activeAnnotationId, annotations, isCurrentFileVersion, setActiveAnnotationId } = props;
+
+    const handleAnnotationActive = (annotationId: string | null): void => {
+        setActiveAnnotationId(annotationId);
+    };
+
+    return (
+        <DrawingList
+            activeId={activeAnnotationId}
+            annotations={annotations}
+            className="ba-DrawingAnnotations-list"
+            data-resin-iscurrent={isCurrentFileVersion}
+            onSelect={handleAnnotationActive}
+        />
+    );
+};
+
+export default DrawingAnnotations;

src/drawing/DrawingAnnotationsContainer.tsx

@@ -0,0 +1,32 @@
+import { connect } from 'react-redux';
+import DrawingAnnotations from './DrawingAnnotations';
+import withProviders from '../common/withProviders';
+import { AnnotationDrawing } from '../@types';
+import {
+    AppState,
+    getActiveAnnotationId,
+    getAnnotationsForLocation,
+    getIsCurrentFileVersion,
+    setActiveAnnotationIdAction,
+} from '../store';
+import { isDrawing } from './drawingUtil';
+
+export type Props = {
+    activeAnnotationId: string | null;
+    annotations: AnnotationDrawing[];
+    isCurrentFileVersion: boolean;
+};
+
+export const mapStateToProps = (state: AppState, { location }: { location: number }): Props => {
+    return {
+        activeAnnotationId: getActiveAnnotationId(state),
+        annotations: getAnnotationsForLocation(state, location).filter(isDrawing),
+        isCurrentFileVersion: getIsCurrentFileVersion(state),
+    };
+};
+
+export const mapDispatchToProps = {
+    setActiveAnnotationId: setActiveAnnotationIdAction,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withProviders(DrawingAnnotations));

src/drawing/DrawingList.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+import DrawingTarget from './DrawingTarget';
+import useOutsideEvent from '../common/useOutsideEvent';
+import { AnnotationDrawing } from '../@types';
+import { checkValue } from '../utils/util';
+import { getShape } from './drawingUtil';
+
+export type Props = {
+    activeId?: string | null;
+    annotations: AnnotationDrawing[];
+    className?: string;
+    onSelect?: (annotationId: string | null) => void;
+};
+
+export function filterDrawing({ target: { path_groups: pathGroups } }: AnnotationDrawing): boolean {
+    return pathGroups.every(({ paths }) =>
+        paths.every(({ points }) => points.every(({ x, y }) => checkValue(x) && checkValue(y))),
+    );
+}
+
+export function sortDrawing({ target: targetA }: AnnotationDrawing, { target: targetB }: AnnotationDrawing): number {
+    const { height: heightA, width: widthA } = getShape(targetA.path_groups);
+    const { height: heightB, width: widthB } = getShape(targetB.path_groups);
+
+    // If B is smaller, the result is negative.
+    // So, A is sorted to an index lower than B, which means A will be rendered first at bottom
+    return heightB * widthB - heightA * widthA;
+}
+
+export function DrawingList({ activeId = null, annotations, className, onSelect = noop }: Props): JSX.Element {
+    const [isListening, setIsListening] = React.useState(true);
+    const rootElRef = React.createRef<SVGSVGElement>();
+
+    // Document-level event handlers for focus and pointer control
+    useOutsideEvent('mousedown', rootElRef, (): void => {
+        onSelect(null);
+        setIsListening(false);
+    });
+    useOutsideEvent('mouseup', rootElRef, (): void => setIsListening(true));
+
+    return (
+        <svg
+            ref={rootElRef}
+            className={classNames(className, { 'is-listening': isListening })}
+            data-resin-component="drawingList"
+            preserveAspectRatio="none"
+            viewBox="0 0 100 100"
+        >
+            {annotations
+                .filter(filterDrawing)
+                .sort(sortDrawing)
+                .map(({ id, target }) => (
+                    <DrawingTarget
+                        key={id}
+                        annotationId={id}
+                        isActive={activeId === id}
+                        onSelect={onSelect}
+                        target={target}
+                    />
+                ))}
+        </svg>
+    );
+}
+
+export default React.memo(DrawingList);

src/drawing/DrawingManager.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import BaseManager, { Props } from '../common/BaseManager';
+import DrawingAnnotationsContainer from './DrawingAnnotationsContainer';
+
+export default class DrawingListManager extends BaseManager {
+    decorate(): void {
+        this.reactEl.classList.add('ba-Layer--drawing');
+        this.reactEl.dataset.testid = 'ba-Layer--drawing';
+    }
+
+    render(props: Props): void {
+        ReactDOM.render(<DrawingAnnotationsContainer location={this.location} {...props} />, this.reactEl);
+    }
+}

src/drawing/DrawingTarget.scss

@@ -0,0 +1,7 @@
+.ba-DrawingTarget {
+    outline: none;
+
+    &:hover {
+        cursor: pointer;
+    }
+}

src/drawing/DrawingTarget.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+import { MOUSE_PRIMARY } from '../constants';
+import { TargetDrawing } from '../@types';
+import { getCenter, getShape } from './drawingUtil';
+import './DrawingTarget.scss';
+
+export type Props = {
+    annotationId: string;
+    className?: string;
+    isActive?: boolean;
+    onSelect?: (annotationId: string) => void;
+    target: TargetDrawing;
+};
+
+export type DrawingTargetRef = HTMLAnchorElement;
+
+export const DrawingTarget = (props: Props, ref: React.Ref<DrawingTargetRef>): JSX.Element => {
+    const {
+        annotationId,
+        className,
+        isActive = false,
+        onSelect = noop,
+        target: { path_groups: pathGroups },
+    } = props;
+    const shape = getShape(pathGroups);
+    const { x: centerX, y: centerY } = getCenter(shape);
+
+    const handleFocus = (): void => {
+        onSelect(annotationId);
+    };
+    const handleMouseDown = (event: React.MouseEvent<DrawingTargetRef>): void => {
+        if (event.buttons !== MOUSE_PRIMARY) {
+            return;
+        }
+        const activeElement = document.activeElement as HTMLElement;
+
+        event.preventDefault(); // Prevents focus from leaving the button immediately in some browsers
+        event.nativeEvent.stopImmediatePropagation(); // Prevents document event handlers from executing
+
+        // IE11 won't apply the focus to the SVG anchor, so this workaround attempts to blur the existing
+        // active element.
+        if (activeElement && activeElement !== event.currentTarget && activeElement.blur) {
+            activeElement.blur();
+        }
+
+        event.currentTarget.focus(); // Buttons do not receive focus in Firefox and Safari on MacOS; triggers handleFocus
+
+        onSelect(annotationId);
+    };
+
+    return (
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        <a
+            ref={ref}
+            className={classNames('ba-DrawingTarget', className, { 'is-active': isActive })}
+            data-resin-itemid={annotationId}
+            data-resin-target="highlightDrawing"
+            data-testid={`ba-AnnotationTarget-${annotationId}`}
+            href="#"
+            onFocus={handleFocus}
+            onMouseDown={handleMouseDown}
+            role="button"
+            tabIndex={0}
+        >
+            <rect
+                fill="transparent"
+                transform={`translate(-${centerX * 0.1}, -${centerY * 0.1}) scale(1.1)`}
+                {...shape}
+            />
+        </a>
+    );
+};
+
+export default React.forwardRef(DrawingTarget);

src/drawing/__mocks__/drawingData.ts

@@ -0,0 +1,80 @@
+export const annotations = [
+    {
+        id: 'anno_1',
+        target: {
+            location: { type: 'page' as const, value: 1 },
+            path_groups: [
+                {
+                    paths: [
+                        {
+                            points: [
+                                { x: 10, y: 10 },
+                                { x: 11, y: 11 },
+                                { x: 12, y: 12 },
+                            ],
+                        },
+                    ],
+                    stroke: {
+                        color: 'red',
+                        size: 1,
+                    },
+                },
+                {
+                    paths: [
+                        {
+                            points: [
+                                { x: 20, y: 20 },
+                                { x: 21, y: 21 },
+                                { x: 22, y: 22 },
+                            ],
+                        },
+                    ],
+                    stroke: {
+                        color: 'black',
+                        size: 4,
+                    },
+                },
+            ],
+            type: 'drawing' as const,
+        },
+    },
+    {
+        id: 'anno_2',
+        target: {
+            location: { type: 'page' as const, value: 2 },
+            path_groups: [
+                {
+                    paths: [
+                        {
+                            points: [
+                                { x: 20, y: 20 },
+                                { x: 21, y: 21 },
+                                { x: 22, y: 22 },
+                            ],
+                        },
+                    ],
+                    stroke: {
+                        color: 'blue',
+                        size: 1,
+                    },
+                },
+                {
+                    paths: [
+                        {
+                            points: [
+                                { x: 40, y: 40 },
+                                { x: 41, y: 41 },
+                                { x: 42, y: 42 },
+                            ],
+                        },
+                    ],
+                    stroke: {
+                        color: 'green',
+                        size: 4,
+                    },
+                },
+            ],
+            type: 'drawing' as const,
+        },
+    },
+];