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

package/src/highlight/HighlightCreatorManager.ts

@@ -0,0 +1,79 @@
+import {
+    AppStore,
+    getIsSelecting,
+    SelectionArg as Selection,
+    setIsSelectingAction,
+    setSelectionAction,
+} from '../store';
+import { Manager, Options as BaseOptions } from '../common/BaseManager';
+import { MOUSE_PRIMARY } from '../constants';
+
+export type Options = {
+    getSelection: () => Selection | null;
+    selectionChangeDelay?: number;
+    store: AppStore;
+} & BaseOptions;
+
+export default class HighlightCreatorManager implements Manager {
+    referenceEl: HTMLElement;
+
+    getSelection: () => Selection | null;
+
+    selectionChangeDelay?: number;
+
+    selectionChangeTimer?: number;
+
+    store: AppStore;
+
+    constructor({ getSelection, referenceEl, selectionChangeDelay = 0, store }: Options) {
+        this.getSelection = getSelection;
+        this.referenceEl = referenceEl;
+        this.selectionChangeDelay = selectionChangeDelay;
+        this.store = store;
+    }
+
+    exists(parentEl: HTMLElement): boolean {
+        return parentEl.contains(this.referenceEl);
+    }
+
+    render(): void {
+        // Clear previous selection
+        this.store.dispatch(setSelectionAction(null));
+
+        this.referenceEl.addEventListener('mousedown', this.handleMouseDown);
+        this.referenceEl.addEventListener('mouseup', this.handleMouseUp);
+    }
+
+    style(styles: Partial<CSSStyleDeclaration>): CSSStyleDeclaration {
+        return Object.assign(this.referenceEl.style, styles);
+    }
+
+    destroy(): void {
+        clearTimeout(this.selectionChangeTimer);
+
+        this.referenceEl.removeEventListener('mousedown', this.handleMouseDown);
+        this.referenceEl.removeEventListener('mouseup', this.handleMouseUp);
+    }
+
+    handleMouseDown = ({ buttons }: MouseEvent): void => {
+        if (buttons !== MOUSE_PRIMARY) {
+            return;
+        }
+
+        clearTimeout(this.selectionChangeTimer);
+
+        this.store.dispatch(setIsSelectingAction(true));
+        this.store.dispatch(setSelectionAction(null));
+    };
+
+    handleMouseUp = (): void => {
+        if (!getIsSelecting(this.store.getState())) {
+            return;
+        }
+
+        this.selectionChangeTimer = window.setTimeout(() => {
+            this.store.dispatch(setSelectionAction(this.getSelection()));
+            this.store.dispatch(setIsSelectingAction(false));
+        }, this.selectionChangeDelay);
+    };
+}

package/src/highlight/HighlightList.scss

@@ -0,0 +1,13 @@
+.ba-HighlightList {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    .ba-HighlightSvg.is-listening {
+        .ba-HighlightTarget-rect {
+            pointer-events: visible;
+        }
+    }
+}

package/src/highlight/HighlightList.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import classNames from 'classnames';
+import HighlightCanvas, { CanvasShape } from './HighlightCanvas';
+import HighlightSvg from './HighlightSvg';
+import HighlightTarget from './HighlightTarget';
+import useIsListInteractive from '../common/useIsListInteractive';
+import { AnnotationHighlight, Rect, TargetHighlight } from '../@types';
+import { checkValue } from '../utils/util';
+import './HighlightList.scss';
+
+export type Props = {
+    activeId?: string | null;
+    annotations: AnnotationHighlight[];
+    className?: string;
+    onSelect?: (annotationId: string | null) => void;
+};
+
+export function filterHighlight({ target }: { target: TargetHighlight }): boolean {
+    const { shapes = [] } = target;
+
+    return shapes.every(
+        ({ height, width, x, y }: Rect) => checkValue(height) && checkValue(width) && checkValue(x) && checkValue(y),
+    );
+}
+
+export function getHighlightArea(shapes: Rect[]): number {
+    return shapes.reduce((area, { height, width }) => area + height * width, 0);
+}
+
+export function sortHighlight(
+    { target: targetA }: { target: TargetHighlight },
+    { target: targetB }: { target: TargetHighlight },
+): number {
+    const { shapes: shapesA } = targetA;
+    const { shapes: shapesB } = targetB;
+
+    // Render the smallest highlights last to ensure they are always clickable
+    return getHighlightArea(shapesA) > getHighlightArea(shapesB) ? -1 : 1;
+}
+
+export function getHighlightShapesFromAnnotations(
+    annotations: AnnotationHighlight[],
+    activeId: string | null,
+    hoverId: string | null,
+): CanvasShape[] {
+    return annotations.reduce<CanvasShape[]>((currentShapes, annotation) => {
+        const {
+            id,
+            target: { shapes },
+        } = annotation;
+
+        return currentShapes.concat(
+            shapes.map(shape => ({
+                ...shape,
+                isActive: activeId === id,
+                isHover: hoverId === id,
+            })),
+        );
+    }, []);
+}
+
+export function HighlightList({ activeId = null, annotations, className, onSelect }: Props): JSX.Element {
+    const [hoverId, setHoverId] = React.useState<string | null>(null);
+    const svgElRef = React.createRef<SVGSVGElement>();
+    const isListening = useIsListInteractive();
+    const sortedAnnotations = annotations.filter(filterHighlight).sort(sortHighlight);
+    const canvasShapes = getHighlightShapesFromAnnotations(sortedAnnotations, activeId, hoverId);
+
+    const handleTargetHover = (annotationId: string | null): void => {
+        setHoverId(annotationId);
+    };
+
+    return (
+        <div className={classNames('ba-HighlightList', className)} data-resin-component="highlightList">
+            <HighlightCanvas shapes={canvasShapes} />
+            <HighlightSvg ref={svgElRef} className={classNames({ 'is-listening': isListening })}>
+                {sortedAnnotations.map(({ id, target }) => (
+                    <HighlightTarget
+                        key={id}
+                        annotationId={id}
+                        isActive={activeId === id}
+                        onHover={handleTargetHover}
+                        onSelect={onSelect}
+                        shapes={target.shapes}
+                    />
+                ))}
+            </HighlightSvg>
+        </div>
+    );
+}
+
+export default React.memo(HighlightList);

package/src/highlight/HighlightListener.ts

@@ -0,0 +1,37 @@
+import debounce from 'lodash/debounce';
+import { AppStore, getIsSelecting, SelectionArg as Selection, setSelectionAction } from '../store';
+
+export type Options = {
+    getSelection: () => Selection | null;
+    store: AppStore;
+};
+
+// Debounce 500ms for keyboard selection
+const SELECTION_CHANGE_DEBOUNCE = 500;
+
+export default class HighlightListener {
+    getSelection: () => Selection | null;
+
+    store: AppStore;
+
+    constructor({ getSelection, store }: Options) {
+        this.getSelection = getSelection;
+        this.store = store;
+
+        document.addEventListener('selectionchange', this.debounceHandleSelectionChange);
+    }
+
+    destroy(): void {
+        document.removeEventListener('selectionchange', this.debounceHandleSelectionChange);
+    }
+
+    handleSelectionChange = (): void => {
+        if (getIsSelecting(this.store.getState())) {
+            return;
+        }
+
+        this.store.dispatch(setSelectionAction(this.getSelection()));
+    };
+
+    debounceHandleSelectionChange = debounce(this.handleSelectionChange, SELECTION_CHANGE_DEBOUNCE);
+}

package/src/highlight/HighlightManager.tsx

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

package/src/highlight/HighlightSvg.scss

@@ -0,0 +1,7 @@
+.ba-HighlightSvg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}

package/src/highlight/HighlightSvg.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+import './HighlightSvg.scss';
+
+type Props = {
+    children?: React.ReactNode;
+    className?: string;
+};
+
+const HighlightSvg = ({ children, className }: Props, ref: React.Ref<SVGSVGElement>): JSX.Element => {
+    return (
+        <svg ref={ref} className={classNames('ba-HighlightSvg', className)}>
+            {children}
+        </svg>
+    );
+};
+
+export default React.forwardRef(HighlightSvg);

package/src/highlight/HighlightTarget.scss

@@ -0,0 +1,5 @@
+.ba-HighlightTarget {
+    &:focus {
+        outline: none;
+    }
+}

package/src/highlight/HighlightTarget.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+import useMountId from '../common/useMountId';
+import { MOUSE_PRIMARY } from '../constants';
+import { Rect } from '../@types/model';
+import './HighlightTarget.scss';
+
+type Props = {
+    annotationId: string;
+    className?: string;
+    isActive?: boolean;
+    onHover?: (annotationId: string | null) => void;
+    onMount?: (uuid: string) => void;
+    onSelect?: (annotationId: string) => void;
+    shapes: Array<Rect>;
+};
+
+export type HighlightTargetRef = HTMLAnchorElement;
+
+const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.Element => {
+    const { annotationId, className, isActive, onHover = noop, onMount = noop, onSelect = noop, shapes } = props;
+    const uuid = useMountId(onMount);
+
+    const handleClick = (event: React.MouseEvent<HighlightTargetRef>): void => {
+        // These are needed to prevent the anchor link from being followed and updating the url location
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
+    const handleFocus = (): void => {
+        onSelect(annotationId);
+    };
+
+    const handleMouseEnter = (): void => {
+        onHover(annotationId);
+    };
+
+    const handleMouseLeave = (): void => {
+        onHover(null);
+    };
+
+    const handleMouseDown = (event: React.MouseEvent<HighlightTargetRef>): void => {
+        if (event.buttons !== MOUSE_PRIMARY) {
+            return;
+        }
+        const activeElement = document.activeElement as HTMLElement;
+
+        event.preventDefault(); // Prevents focus from leaving the anchor immediately in some browsers
+        event.stopPropagation(); // Prevents document-level deselect 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 we don't blur it, we cannot re-focus it next time, since it was already focused and never got blurred.
+        if (activeElement && activeElement !== event.currentTarget && activeElement.blur) {
+            activeElement.blur();
+        }
+
+        if (event.currentTarget.focus) {
+            // Buttons do not receive focus in Firefox and Safari on MacOS; triggers handleFocus
+            event.currentTarget.focus();
+        } else {
+            // IE11 does not support focus function; call handleFocus directly
+            handleFocus();
+        }
+    };
+
+    return (
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        <a
+            ref={ref}
+            className={classNames('ba-HighlightTarget', className, { 'is-active': isActive })}
+            data-ba-reference-id={uuid}
+            data-resin-itemid={annotationId}
+            data-resin-target="highlightText"
+            data-testid={`ba-AnnotationTarget-${annotationId}`}
+            href="#"
+            onClick={handleClick}
+            onFocus={handleFocus}
+            onMouseDown={handleMouseDown}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            role="button"
+            tabIndex={0}
+        >
+            {shapes.map(rect => {
+                const { height, width, x, y } = rect;
+                return (
+                    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+                    <rect
+                        key={`${annotationId}-${x}-${y}-${width}-${height}`}
+                        className="ba-HighlightTarget-rect"
+                        fill="none"
+                        height={`${height}%`}
+                        width={`${width}%`}
+                        x={`${x}%`}
+                        y={`${y}%`}
+                    />
+                );
+            })}
+        </a>
+    );
+};
+
+export { HighlightTarget as HighlightTargetComponent };
+
+export default React.forwardRef(HighlightTarget);

package/src/highlight/actions.ts

@@ -0,0 +1,36 @@
+import { AppThunkDispatch, AppState } from '../store';
+import { createAnnotationAction } from '../store/annotations';
+import { getFileVersionId } from '../store/options';
+import { Rect } from '../@types';
+
+export type CreateArg = {
+    location: number;
+    message: string;
+    shapes: Rect[];
+    text?: string;
+};
+
+export const createHighlightAction = (arg: CreateArg) => (dispatch: AppThunkDispatch, getState: () => AppState) => {
+    const { location, message, shapes } = arg;
+    const state = getState();
+    const newAnnotation = {
+        description: {
+            message,
+            type: 'reply' as const,
+        },
+        // eslint-disable-next-line @typescript-eslint/camelcase
+        file_version: {
+            id: getFileVersionId(state),
+        },
+        target: {
+            location: {
+                type: 'page' as const,
+                value: location,
+            },
+            shapes,
+            type: 'highlight' as const,
+        },
+    };
+
+    return dispatch(createAnnotationAction(newAnnotation));
+};

package/src/highlight/highlightUtil.ts

@@ -0,0 +1,143 @@
+import { Annotation, AnnotationHighlight, Position, Shape, Type } from '../@types';
+
+export const getBoundingRect = (shapes: Shape[]): Shape => {
+    let minX = Number.MAX_VALUE;
+    let minY = Number.MAX_VALUE;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+
+    shapes.forEach(({ height, width, x, y }) => {
+        const x2 = x + width;
+        const y2 = y + height;
+
+        if (x < minX) {
+            minX = x;
+        }
+
+        if (y < minY) {
+            minY = y;
+        }
+
+        if (x2 > maxX) {
+            maxX = x2;
+        }
+
+        if (y2 > maxY) {
+            maxY = y2;
+        }
+    });
+
+    return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY,
+    };
+};
+
+const centerShape = (shape: Shape): Position => {
+    const { height, width } = shape;
+
+    return {
+        x: width / 2,
+        y: height / 2,
+    };
+};
+
+export const centerHighlight = (shapes: Shape[]): Position => {
+    const boundingShape = getBoundingRect(shapes);
+    const { x: shapeX, y: shapeY } = boundingShape;
+    const { x: centerX, y: centerY } = centerShape(boundingShape);
+
+    return {
+        x: centerX + shapeX,
+        y: centerY + shapeY,
+    };
+};
+
+export function isHighlight(annotation: Annotation): annotation is AnnotationHighlight {
+    return annotation?.target?.type === Type.highlight;
+}
+
+export const getThreshold = (prev: number, curr: number, threshold: number): number =>
+    Math.max(Math.round(prev * threshold), Math.round(curr * threshold), 1);
+
+export const dedupeRects = (rects: Shape[], threshold = 0.1): Shape[] => {
+    const dedupedRects: Shape[] = [];
+
+    rects.forEach(curr => {
+        const prev = dedupedRects.pop();
+        // empty list, push current
+        if (!prev) {
+            dedupedRects.push(curr);
+            // The return in forEach callback is acting like a continue in for loop
+            return;
+        }
+
+        const { width: prevWidth, height: prevHeight, x: prevX, y: prevY } = prev;
+        const { width, height, x, y } = curr;
+
+        const xThreshold = getThreshold(prevWidth, width, threshold);
+        const yThreshold = getThreshold(prevHeight, height, threshold);
+
+        if (Math.abs(prevX - x) <= xThreshold && Math.abs(prevY - y) <= yThreshold) {
+            // the same rect, push the larger one
+            dedupedRects.push(prevHeight * prevWidth > height * width ? prev : curr);
+        } else {
+            // different rects, push both
+            dedupedRects.push(prev);
+            dedupedRects.push(curr);
+        }
+    });
+
+    return dedupedRects;
+};
+
+export const combineRects = (rects: Shape[]): Shape[] => {
+    const result: Shape[] = [];
+
+    dedupeRects(rects).forEach(rect => {
+        const { height, width, x, y } = rect;
+        const lastRect = result.pop();
+
+        if (!lastRect) {
+            result.push(rect);
+            return;
+        }
+
+        // This algorithm employs a hueristic that assumes rects are returned in ascending y coordinate
+        // followed by ascending x coordinate.
+        // If there is already a previous rect, check first to see if the current rect is approximately
+        // close enough (in both the x and y coordinate) to be considered as part of the same rect
+        // If it is not close enough then add the current rect as a separate rect in the array
+        const { height: lastHeight, width: lastWidth, x: lastX, y: lastY } = lastRect;
+        const lastMaxX = lastX + lastWidth;
+        const thresholdX = getThreshold(lastWidth, width, 0.3);
+        const thresholdY = getThreshold(lastHeight, height, 0.6);
+        const isXCloseEnough = Math.abs(x - lastMaxX) < thresholdX;
+        const isYCloseEnough = Math.abs(y - lastY) < thresholdY;
+
+        // If rect is close enough, add the rect to the existing entry, otherwise add it as a new entry
+        if (isXCloseEnough && isYCloseEnough) {
+            result.push(getBoundingRect([lastRect, rect]));
+        } else {
+            result.push(lastRect);
+            result.push(rect);
+        }
+    });
+
+    return result;
+};
+
+export const getShapeRelativeToContainer = (shape: Shape, containerShape: Shape): Shape => {
+    const { height, width, x, y } = shape;
+    const { height: containerHeight, width: containerWidth, x: containerX, y: containerY } = containerShape;
+
+    // If for some reason the x or y turns out to be negative in relation to the container, assume 0 instead
+    return {
+        height: (height / containerHeight) * 100,
+        width: (width / containerWidth) * 100,
+        x: (Math.max(0, x - containerX) / containerWidth) * 100,
+        y: (Math.max(0, y - containerY) / containerHeight) * 100,
+    };
+};

package/src/highlight/index.ts

@@ -0,0 +1,4 @@
+export * from './highlightUtil';
+export { default as HighlightCreatorManager } from './HighlightCreatorManager';
+export { default as HighlightListener } from './HighlightListener';
+export { default as HighlightManager } from './HighlightManager';

package/src/image/ImageAnnotator.scss

@@ -0,0 +1,20 @@
+.bp-image {
+    .ba-Layer {
+        position: absolute;
+        white-space: initial; // Overrides white-space: no-wrap inherited .bp-image
+        text-align: initial; // Overrides text-align: center inherited .bp-image
+        pointer-events: none;
+    }
+
+    // Applied to img element, which is managed by Preview SDK
+    .ba-is-drawing {
+        user-select: none; // Prevent visible selection highlight
+    }
+
+    // Raise the rendering order to override the stacking context created by the
+    // transform applied to each of the managers' react mount element to account for
+    // rotation
+    .ba-Layer--popup {
+        z-index: 1;
+    }
+}