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

package/src/image/ImageAnnotator.ts

@@ -0,0 +1,137 @@
+import { Unsubscribe } from 'redux';
+import BaseAnnotator, { Options } from '../common/BaseAnnotator';
+import PopupManager from '../popup/PopupManager';
+import { centerDrawing, DrawingManager, isDrawing } from '../drawing';
+import { centerRegion, isRegion, RegionCreationManager, RegionManager } from '../region';
+import { CreatorStatus, getCreatorStatus } from '../store/creator';
+import { getAnnotation, getFileId, getIsCurrentFileVersion, getRotation } from '../store';
+import { getRotatedPosition } from '../utils/rotate';
+import { Manager } from '../common/BaseManager';
+import { scrollToLocation } from '../utils/scroll';
+import './ImageAnnotator.scss';
+
+export const CSS_IS_DRAWING_CLASS = 'ba-is-drawing';
+
+export default class ImageAnnotator extends BaseAnnotator {
+    annotatedEl?: HTMLElement;
+
+    managers: Set<Manager> = new Set();
+
+    storeHandler?: Unsubscribe;
+
+    constructor(options: Options) {
+        super(options);
+
+        this.storeHandler = this.store.subscribe(this.handleStore);
+    }
+
+    destroy(): void {
+        if (this.storeHandler) {
+            this.storeHandler();
+        }
+
+        if (this.managers) {
+            this.managers.forEach(manager => manager.destroy());
+        }
+
+        super.destroy();
+    }
+
+    getAnnotatedElement(): HTMLElement | null | undefined {
+        return this.containerEl?.querySelector('.bp-image');
+    }
+
+    getManagers(parentEl: HTMLElement, referenceEl: HTMLElement): Set<Manager> {
+        const fileId = getFileId(this.store.getState());
+        const isCurrentFileVersion = getIsCurrentFileVersion(this.store.getState());
+        const resinTags = { fileid: fileId, iscurrent: isCurrentFileVersion };
+
+        this.managers.forEach(manager => {
+            if (!manager.exists(parentEl)) {
+                manager.destroy();
+                this.managers.delete(manager);
+            }
+        });
+
+        if (this.managers.size === 0) {
+            this.managers.add(new PopupManager({ referenceEl, resinTags }));
+            this.managers.add(new DrawingManager({ referenceEl, resinTags }));
+            this.managers.add(new RegionManager({ referenceEl, resinTags }));
+            this.managers.add(new RegionCreationManager({ referenceEl, resinTags }));
+        }
+
+        return this.managers;
+    }
+
+    getReference(): HTMLElement | null | undefined {
+        return this.annotatedEl?.querySelector('img');
+    }
+
+    handleStore = (): void => {
+        const referenceEl = this.getReference();
+
+        if (!referenceEl) {
+            return;
+        }
+
+        if (getCreatorStatus(this.store.getState()) === CreatorStatus.started) {
+            referenceEl.classList.add(CSS_IS_DRAWING_CLASS);
+        } else {
+            referenceEl.classList.remove(CSS_IS_DRAWING_CLASS);
+        }
+    };
+
+    render(): void {
+        const referenceEl = this.getReference();
+        const rotation = getRotation(this.store.getState()) || 0;
+
+        if (!this.annotatedEl || !referenceEl) {
+            return;
+        }
+
+        this.getManagers(this.annotatedEl, referenceEl).forEach(manager => {
+            manager.style({
+                height: `${referenceEl.offsetHeight}px`,
+                left: `${referenceEl.offsetLeft}px`,
+                top: `${referenceEl.offsetTop}px`,
+                transform: `rotate(${rotation}deg)`,
+                width: `${referenceEl.offsetWidth}px`,
+            });
+
+            manager.render({
+                intl: this.intl,
+                store: this.store,
+            });
+        });
+
+        this.postRender();
+    }
+
+    scrollToAnnotation(annotationId: string | null): void {
+        if (!annotationId) {
+            return;
+        }
+
+        const annotation = getAnnotation(this.store.getState(), annotationId);
+        const annotationLocation = annotation?.target.location.value ?? 1;
+        const referenceEl = this.getReference();
+        const rotation = getRotation(this.store.getState()) || 0;
+
+        if (!annotation || !annotationLocation || !referenceEl || !this.annotatedEl) {
+            return;
+        }
+
+        let offsets = null;
+        if (isRegion(annotation)) {
+            offsets = centerRegion(annotation.target.shape);
+        } else if (isDrawing(annotation)) {
+            offsets = centerDrawing(annotation.target.path_groups);
+        }
+
+        if (offsets) {
+            scrollToLocation(this.annotatedEl, referenceEl, {
+                offsets: getRotatedPosition(offsets, rotation),
+            });
+        }
+    }
+}

package/src/polyfill.ts

@@ -0,0 +1,19 @@
+// Add support for SVGElement.contains in IE11
+if (!SVGElement.prototype.contains) {
+    Object.defineProperty(SVGElement.prototype, 'contains', {
+        configurable: true,
+        enumerable: false,
+        writable: true,
+        value: function contains(node: Node) {
+            let n: Node | null = node;
+            do {
+                if (this === n) {
+                    return true;
+                }
+                n = n && n.parentNode;
+            } while (n);
+
+            return false;
+        },
+    });
+}

package/src/popup/PopupContainer.tsx

@@ -0,0 +1,50 @@
+import { connect } from 'react-redux';
+import PopupLayer from './PopupLayer';
+import withProviders from '../common/withProviders';
+import {
+    AppState,
+    CreatorItem,
+    CreatorStatus,
+    getAnnotationMode,
+    getCreatorMessage,
+    getCreatorStagedForLocation,
+    getCreatorStatus,
+    getIsPromoting,
+    Mode,
+    resetCreatorAction,
+    setMessageAction,
+    getCreatorReferenceId,
+} from '../store';
+import { createDrawingAction } from '../drawing/actions';
+import { createHighlightAction } from '../highlight/actions';
+import { createRegionAction } from '../region';
+
+export type Props = {
+    isPromoting: boolean;
+    message: string;
+    mode: Mode;
+    referenceId: string | null;
+    staged: CreatorItem | null;
+    status: CreatorStatus;
+};
+
+export const mapStateToProps = (state: AppState, { location }: { location: number }): Props => {
+    return {
+        isPromoting: getIsPromoting(state),
+        message: getCreatorMessage(state),
+        mode: getAnnotationMode(state),
+        referenceId: getCreatorReferenceId(state),
+        staged: getCreatorStagedForLocation(state, location),
+        status: getCreatorStatus(state),
+    };
+};
+
+export const mapDispatchToProps = {
+    createDrawing: createDrawingAction,
+    createHighlight: createHighlightAction,
+    createRegion: createRegionAction,
+    resetCreator: resetCreatorAction,
+    setMessage: setMessageAction,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withProviders(PopupLayer));

package/src/popup/PopupLayer.scss

@@ -0,0 +1,3 @@
+.ba-PopupLayer-popup {
+    pointer-events: auto;
+}

package/src/popup/PopupLayer.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import noop from 'lodash/noop';
+import PopupReply from '../components/Popups/PopupReply';
+import { CreateArg as DrawingCreateArg } from '../drawing/actions';
+import { CreateArg as HighlightCreateArg } from '../highlight/actions';
+import { CreateArg as RegionCreateArg } from '../region/actions';
+import {
+    CreatorItem,
+    CreatorStatus,
+    isCreatorStagedDrawing,
+    isCreatorStagedHighlight,
+    isCreatorStagedRegion,
+    Mode,
+} from '../store';
+import { PopupReference } from '../components/Popups/Popper';
+import './PopupLayer.scss';
+
+export type Props = {
+    createDrawing?: (arg: DrawingCreateArg) => void;
+    createHighlight?: (arg: HighlightCreateArg) => void;
+    createRegion?: (arg: RegionCreateArg) => void;
+    isPromoting: boolean;
+    location: number;
+    message: string;
+    mode: Mode;
+    referenceId: string | null;
+    resetCreator: () => void;
+    setMessage: (message: string) => void;
+    staged?: CreatorItem | null;
+    status: CreatorStatus;
+};
+
+const modeStagedMap: { [M in Mode]?: Function } = {
+    [Mode.DRAWING]: isCreatorStagedDrawing,
+    [Mode.HIGHLIGHT]: isCreatorStagedHighlight,
+    [Mode.REGION]: isCreatorStagedRegion,
+};
+
+const PopupLayer = (props: Props): JSX.Element | null => {
+    const {
+        createDrawing = noop,
+        createHighlight = noop,
+        createRegion = noop,
+        isPromoting = false,
+        message,
+        mode,
+        referenceId,
+        resetCreator,
+        setMessage,
+        staged,
+        status,
+    } = props;
+
+    const [reference, setReference] = React.useState<PopupReference | null>(null);
+    const canCreate = (modeStagedMap[mode] || noop)(staged) || isPromoting;
+    const canReply = status !== CreatorStatus.started && status !== CreatorStatus.init;
+    const isPending = status === CreatorStatus.pending;
+
+    const handleCancel = (): void => {
+        resetCreator();
+    };
+
+    const handleChange = (text = ''): void => {
+        setMessage(text);
+    };
+
+    const handleSubmit = (): void => {
+        if (!staged) {
+            return;
+        }
+
+        if (isCreatorStagedHighlight(staged)) {
+            createHighlight({ ...staged, message });
+        } else if (isCreatorStagedRegion(staged)) {
+            createRegion({ ...staged, message });
+        } else if (isCreatorStagedDrawing(staged)) {
+            createDrawing({ ...staged, message });
+        }
+    };
+
+    React.useEffect(() => {
+        setReference(referenceId ? document.querySelector(`[data-ba-reference-id="${referenceId}"]`) : null);
+    }, [referenceId]);
+
+    return (
+        <>
+            {canCreate && canReply && reference && staged && (
+                <div className="ba-PopupLayer-popup">
+                    <PopupReply
+                        isPending={isPending}
+                        onCancel={handleCancel}
+                        onChange={handleChange}
+                        onSubmit={handleSubmit}
+                        reference={reference}
+                        value={message}
+                    />
+                </div>
+            )}
+        </>
+    );
+};
+
+export default PopupLayer;

package/src/popup/PopupManager.tsx

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

package/src/region/RegionAnnotation.scss

@@ -15,4 +15,8 @@
     &:focus {
         outline: none;
     }
+
+    &.is-active {
+        @include ba-RegionRect-callout;
+    }
 }

package/src/region/RegionAnnotation.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
-import { Shape, styleShape } from './regionUtil';
+import { MOUSE_PRIMARY } from '../constants';
+import { Shape } from '../@types';
+import { styleShape } from './regionUtil';
 import './RegionAnnotation.scss';
 
 type Props = {
@@ -17,31 +19,28 @@ export type RegionAnnotationRef = HTMLButtonElement;
 export const RegionAnnotation = (props: Props, ref: React.Ref<RegionAnnotationRef>): JSX.Element => {
     const { annotationId, className, isActive, onSelect = noop, shape } = props;
 
-    const cancelEvent = (event: React.SyntheticEvent): void => {
-        event.preventDefault();
-        event.stopPropagation();
-        event.nativeEvent.stopImmediatePropagation(); // Prevents document event handlers from executing
-    };
-    const handleBlur = (event: React.SyntheticEvent): void => {
-        cancelEvent(event);
-    };
-    const handleClick = (event: React.MouseEvent): void => {
-        cancelEvent(event);
+    const handleFocus = (): void => {
         onSelect(annotationId);
     };
-    const handleFocus = (event: React.SyntheticEvent): void => {
-        cancelEvent(event);
-        onSelect(annotationId);
+    const handleMouseDown = (event: React.MouseEvent<RegionAnnotationRef>): void => {
+        if (event.buttons !== MOUSE_PRIMARY) {
+            return;
+        }
+
+        event.preventDefault(); // Prevents focus from leaving the button immediately in some browsers
+        event.stopPropagation(); // Prevents document-level deselect event handlers from executing
+        event.currentTarget.focus(); // Buttons do not receive focus in Firefox and Safari on MacOS; triggers handleFocus
     };
 
     return (
         <button
             ref={ref}
             className={classNames('ba-RegionAnnotation', className, { 'is-active': isActive })}
+            data-resin-itemid={annotationId}
+            data-resin-target="highlightRegion"
             data-testid={`ba-AnnotationTarget-${annotationId}`}
-            onBlur={handleBlur}
-            onClick={handleClick}
             onFocus={handleFocus}
+            onMouseDown={handleMouseDown}
             style={styleShape(shape)}
             type="button"
         />

package/src/region/RegionAnnotations.scss

@@ -1,19 +1,9 @@
-.ba-RegionAnnotations-creator,
-.ba-RegionAnnotations-list,
-.ba-RegionAnnotations-target {
+.ba-RegionAnnotations-list {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-}
-
-.ba-RegionAnnotations-creator {
-    pointer-events: auto;
-    touch-action: none;
-}
-
-.ba-RegionAnnotations-list {
     pointer-events: none;
 
     &.is-listening {
@@ -22,7 +12,3 @@
         }
     }
 }
-
-.ba-RegionAnnotations-popup {
-    pointer-events: auto; // Swallow all pointer events that occur within the popup
-}

package/src/region/RegionAnnotations.tsx

@@ -1,130 +1,29 @@
 import * as React from 'react';
-import PopupReply from '../components/Popups/PopupReply';
-import RegionCreator from './RegionCreator';
 import RegionList from './RegionList';
-import RegionRect, { RegionRectRef } from './RegionRect';
-import { AnnotationRegion, Rect } from '../@types';
-import { CreateArg } from './actions';
-import { CreatorItem, CreatorStatus } from '../store/creator';
+import { AnnotationRegion } from '../@types';
 import './RegionAnnotations.scss';
 
 type Props = {
     activeAnnotationId: string | null;
     annotations: AnnotationRegion[];
-    createRegion: (arg: CreateArg) => void;
-    isCreating: boolean;
-    message: string;
-    page: number;
     setActiveAnnotationId: (annotationId: string | null) => void;
-    setMessage: (message: string) => void;
-    setStaged: (staged: CreatorItem | null) => void;
-    setStatus: (status: CreatorStatus) => void;
-    staged?: CreatorItem | null;
-    status: CreatorStatus;
 };
 
-type State = {
-    rectRef?: RegionRectRef;
-};
-
-export default class RegionAnnotations extends React.PureComponent<Props, State> {
-    static defaultProps = {
-        annotations: [],
-        isCreating: false,
-    };
-
-    state: State = {};
-
-    handleAnnotationActive = (annotationId: string | null): void => {
-        const { setActiveAnnotationId } = this.props;
+const RegionAnnotations = (props: Props): JSX.Element => {
+    const { activeAnnotationId, annotations, setActiveAnnotationId } = props;
 
+    const handleAnnotationActive = (annotationId: string | null): void => {
         setActiveAnnotationId(annotationId);
     };
 
-    handleCancel = (): void => {
-        const { setMessage, setStaged, setStatus } = this.props;
-        setMessage('');
-        setStaged(null);
-        setStatus(CreatorStatus.init);
-    };
-
-    handleChange = (text?: string): void => {
-        const { setMessage } = this.props;
-        setMessage(text || '');
-    };
-
-    handleStart = (): void => {
-        const { setStaged, setStatus } = this.props;
-        setStaged(null);
-        setStatus(CreatorStatus.init);
-    };
-
-    handleStop = (shape: Rect): void => {
-        const { page, setStaged, setStatus } = this.props;
-        setStaged({ location: page, shape });
-        setStatus(CreatorStatus.staged);
-    };
-
-    handleSubmit = (): void => {
-        const { createRegion, message, staged } = this.props;
-
-        if (!staged) {
-            return;
-        }
-
-        createRegion({ ...staged, message });
-    };
-
-    setRectRef = (rectRef: RegionRectRef): void => {
-        this.setState({ rectRef });
-    };
-
-    render(): JSX.Element {
-        const { activeAnnotationId, annotations, isCreating, message, staged, status } = this.props;
-        const { rectRef } = this.state;
-        const canReply = status !== CreatorStatus.init;
-        const isPending = status === CreatorStatus.pending;
-
-        return (
-            <>
-                {/* Layer 1: Saved annotations */}
-                <RegionList
-                    activeId={activeAnnotationId}
-                    annotations={annotations}
-                    className="ba-RegionAnnotations-list"
-                    onSelect={this.handleAnnotationActive}
-                />
-
-                {/* Layer 2: Drawn (unsaved) incomplete annotation target, if any */}
-                {isCreating && (
-                    <RegionCreator
-                        className="ba-RegionAnnotations-creator"
-                        onStart={this.handleStart}
-                        onStop={this.handleStop}
-                    />
-                )}
-
-                {/* Layer 3a: Staged (unsaved) annotation target, if any */}
-                {isCreating && staged && (
-                    <div className="ba-RegionAnnotations-target">
-                        <RegionRect ref={this.setRectRef} isActive shape={staged.shape} />
-                    </div>
-                )}
+    return (
+        <RegionList
+            activeId={activeAnnotationId}
+            annotations={annotations}
+            className="ba-RegionAnnotations-list"
+            onSelect={handleAnnotationActive}
+        />
+    );
+};
 
-                {/* Layer 3b: Staged (unsaved) annotation description popup, if 3a is ready */}
-                {isCreating && staged && canReply && rectRef && (
-                    <div className="ba-RegionAnnotations-popup">
-                        <PopupReply
-                            isPending={isPending}
-                            onCancel={this.handleCancel}
-                            onChange={this.handleChange}
-                            onSubmit={this.handleSubmit}
-                            reference={rectRef}
-                            value={message}
-                        />
-                    </div>
-                )}
-            </>
-        );
-    }
-}
+export default RegionAnnotations;

package/src/region/RegionAnnotationsContainer.tsx

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import RegionAnnotations from './RegionAnnotations';
+import withProviders from '../common/withProviders';
+import { AnnotationRegion } from '../@types';
+import { AppState, getActiveAnnotationId, getAnnotationsForLocation, setActiveAnnotationIdAction } from '../store';
+import { isRegion } from './regionUtil';
+
+export type Props = {
+    activeAnnotationId: string | null;
+    annotations: AnnotationRegion[];
+};
+
+export const mapStateToProps = (state: AppState, { location }: { location: number }): Props => {
+    return {
+        activeAnnotationId: getActiveAnnotationId(state),
+        annotations: getAnnotationsForLocation(state, location).filter(isRegion),
+    };
+};
+
+export const mapDispatchToProps = {
+    setActiveAnnotationId: setActiveAnnotationIdAction,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withProviders(RegionAnnotations));

package/src/region/RegionCreation.scss

@@ -0,0 +1,17 @@
+.ba-RegionCreation-creator,
+.ba-RegionCreation-target {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.ba-RegionCreation-creator {
+    pointer-events: auto;
+    touch-action: none;
+}
+
+.ba-RegionCreation-target {
+    pointer-events: none;
+}

package/src/region/RegionCreation.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import RegionCreator from './RegionCreator';
+import RegionRect, { RegionRectRef } from './RegionRect';
+import { Rect } from '../@types';
+import { CreatorItemRegion, CreatorStatus } from '../store/creator';
+import './RegionCreation.scss';
+
+type Props = {
+    isCreating: boolean;
+    isRotated: boolean;
+    location: number;
+    resetCreator: () => void;
+    setReferenceId: (uuid: string) => void;
+    setStaged: (staged: CreatorItemRegion | null) => void;
+    setStatus: (status: CreatorStatus) => void;
+    staged?: CreatorItemRegion | null;
+};
+
+type State = {
+    rectRef?: RegionRectRef;
+};
+
+export default class RegionCreation extends React.PureComponent<Props, State> {
+    static defaultProps = {
+        isCreating: false,
+        isRotated: false,
+    };
+
+    state: State = {};
+
+    handleAbort = (): void => {
+        const { resetCreator } = this.props;
+        resetCreator();
+    };
+
+    handleStart = (): void => {
+        const { setStaged, setStatus } = this.props;
+        setStaged(null);
+        setStatus(CreatorStatus.started);
+    };
+
+    handleStagedMount = (uuid: string): void => {
+        const { setReferenceId } = this.props;
+        setReferenceId(uuid);
+    };
+
+    handleStop = (shape: Rect): void => {
+        const { location, setStaged, setStatus } = this.props;
+        setStaged({ location, shape });
+        setStatus(CreatorStatus.staged);
+    };
+
+    render(): JSX.Element | null {
+        const { isCreating, isRotated, staged } = this.props;
+
+        if (isRotated) {
+            return null;
+        }
+
+        return (
+            <>
+                {isCreating && (
+                    <RegionCreator
+                        className="ba-RegionCreation-creator"
+                        onAbort={this.handleAbort}
+                        onStart={this.handleStart}
+                        onStop={this.handleStop}
+                    />
+                )}
+
+                {staged && (
+                    <div className="ba-RegionCreation-target">
+                        <RegionRect isActive onMount={this.handleStagedMount} shape={staged.shape} />
+                    </div>
+                )}
+            </>
+        );
+    }
+}