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

package/src/BoxAnnotations.ts

@@ -1,18 +1,26 @@
+import './polyfill';
 import getProp from 'lodash/get';
+import BaseAnnotator from './common/BaseAnnotator';
+import ImageAnnotator from './image/ImageAnnotator';
 import DocumentAnnotator from './document/DocumentAnnotator';
 import { IntlOptions, Permissions, PERMISSIONS, Type } from './@types';
 
 type Annotator = {
-    CONSTRUCTOR: typeof DocumentAnnotator;
+    CONSTRUCTOR: typeof BaseAnnotator;
     NAME: string;
     TYPES: string[];
     VIEWERS: string[];
 };
 
 type AnnotationsOptions = {
+    features: Features;
     intl: IntlOptions;
 };
 
+export type Features = {
+    [key: string]: boolean;
+};
+
 type PreviewOptions = {
     file?: {
         permissions?: Permissions;
@@ -43,8 +51,14 @@ const ANNOTATORS: Annotator[] = [
     {
         CONSTRUCTOR: DocumentAnnotator,
         NAME: 'Document',
+        TYPES: [Type.highlight, Type.region],
+        VIEWERS: ['AutoCAD', 'Document', 'Presentation'],
+    },
+    {
+        CONSTRUCTOR: ImageAnnotator,
+        NAME: 'Image',
         TYPES: [Type.region],
-        VIEWERS: ['Document', 'Presentation'],
+        VIEWERS: ['Image'],
     },
 ];
 

package/src/common/BaseAnnotator.scss

@@ -12,7 +12,6 @@
     src: local('Lato Bold'), local('Lato-Bold'), url('https://cdn01.boxcdn.net/fonts/1.0.2/lato/Lato-Bold.woff2') format('woff2'), url('https://cdn01.boxcdn.net/fonts/1.0.2/lato/Lato-Bold.woff') format('woff');
 }
 
-@import '~box-ui-elements/es/styles/reset';
 @import '~box-ui-elements/es/styles/variables';
 
 .ba {

package/src/common/BaseAnnotator.ts

@@ -1,10 +1,13 @@
+import getProp from 'lodash/get';
 import { IntlShape } from 'react-intl';
 import * as store from '../store';
 import API from '../api';
+import DeselectManager from './DeselectManager';
 import EventEmitter from './EventEmitter';
 import i18n from '../utils/i18n';
 import messages from '../messages';
 import { Event, IntlOptions, LegacyEvent, Permissions } from '../@types';
+import { Features } from '../BoxAnnotations';
 import './BaseAnnotator.scss';
 
 export type Container = string | HTMLElement;
@@ -14,12 +17,15 @@ export type FileOptions = {
         annotations?: {
             activeId?: string;
         };
+        currentFileVersionId?: string;
+        fileVersionId?: string;
     };
 };
 
 export type Options = {
     apiHost: string;
     container: Container;
+    features?: Features;
     file: {
         id: string;
         file_version: {
@@ -29,37 +35,69 @@ export type Options = {
     };
     fileOptions?: FileOptions;
     hasTouch?: boolean;
+    initialColor?: string;
+    initialMode?: store.Mode;
     intl: IntlOptions;
     locale?: string;
     token: string;
 };
 
+export const CSS_CONTAINER_CLASS = 'ba';
+export const CSS_LOADED_CLASS = 'ba-annotations-loaded';
+export const ANNOTATION_CLASSES: { [M in store.Mode]?: string } = {
+    [store.Mode.HIGHLIGHT]: 'ba-is-create--highlight',
+    [store.Mode.REGION]: 'ba-is-create--region',
+};
+
 export default class BaseAnnotator extends EventEmitter {
+    annotatedEl?: HTMLElement | null;
+
+    containerEl?: HTMLElement | null;
+
     container: Container;
 
-    intl: IntlShape;
+    deselectManager: DeselectManager | null = null;
 
-    rootEl?: HTMLElement | null;
+    features: Features;
 
-    scale = 1;
+    intl: IntlShape;
 
     store: store.AppStore;
 
-    constructor({ apiHost, container, file, fileOptions, intl, token }: Options) {
+    constructor({
+        apiHost,
+        container,
+        features = {},
+        file,
+        fileOptions,
+        initialColor,
+        initialMode,
+        intl,
+        token,
+    }: Options) {
         super();
 
+        const fileOptionsValue = fileOptions?.[file.id];
+        const currentFileVersionId = fileOptionsValue?.currentFileVersionId;
+        const fileOptionsVersionId = fileOptionsValue?.fileVersionId;
+        const fileVersionId = file.file_version.id; // This is always the currently-previewed version id, not current version id
+
         const initialState = {
             annotations: {
-                activeId: fileOptions?.[file.id]?.annotations?.activeId ?? null,
+                activeId: fileOptionsValue?.annotations?.activeId ?? null,
             },
+            common: { color: initialColor, mode: initialMode },
             options: {
+                features,
                 fileId: file.id,
-                fileVersionId: file.file_version.id,
+                fileVersionId: fileOptionsVersionId ?? fileVersionId,
+                isCurrentFileVersion: !fileOptionsVersionId || fileOptionsVersionId === currentFileVersionId,
                 permissions: file.permissions,
             },
         };
 
         this.container = container;
+        this.features = features;
         this.intl = i18n.createIntlProvider(intl);
         this.store = store.createStore(initialState, {
             api: new API({ apiHost, token }),
@@ -69,6 +107,7 @@ export default class BaseAnnotator extends EventEmitter {
         this.addListener(LegacyEvent.SCALE, this.handleScale);
         this.addListener(Event.ACTIVE_SET, this.handleSetActive);
         this.addListener(Event.ANNOTATION_REMOVE, this.handleRemove);
+        this.addListener(Event.COLOR_SET, this.handleSetColor);
         this.addListener(Event.VISIBLE_SET, this.handleSetVisible);
 
         // Load any required data at startup
@@ -76,26 +115,51 @@ export default class BaseAnnotator extends EventEmitter {
     }
 
     public destroy(): void {
-        if (this.rootEl) {
-            this.rootEl.classList.remove('ba');
+        if (this.containerEl) {
+            this.containerEl.classList.remove(CSS_CONTAINER_CLASS);
         }
 
+        if (this.annotatedEl) {
+            this.annotatedEl.classList.remove(CSS_LOADED_CLASS);
+        }
+
+        if (this.deselectManager) {
+            this.deselectManager.destroy();
+        }
+
+        this.removeAnnotationClasses();
+
         this.removeListener(LegacyEvent.SCALE, this.handleScale);
         this.removeListener(Event.ACTIVE_SET, this.handleSetActive);
         this.removeListener(Event.ANNOTATION_REMOVE, this.handleRemove);
+        this.removeListener(Event.COLOR_SET, this.handleSetColor);
         this.removeListener(Event.VISIBLE_SET, this.handleSetVisible);
     }
 
-    public init(scale: number): void {
-        this.rootEl = this.getElement(this.container);
-        this.scale = scale;
+    public init(scale = 1, rotation = 0): void {
+        this.containerEl = this.getElement(this.container);
+        this.annotatedEl = this.getAnnotatedElement();
 
-        if (!this.rootEl) {
+        if (!this.annotatedEl || !this.containerEl) {
             this.emit(LegacyEvent.ERROR, this.intl.formatMessage(messages.annotationsLoadError));
             return;
         }
 
-        this.rootEl.classList.add('ba');
+        // Add classes to the parent elements to support CSS scoping
+        this.annotatedEl.classList.add(CSS_LOADED_CLASS);
+        this.containerEl.classList.add(CSS_CONTAINER_CLASS);
+
+        // Defer to the child class to render annotations
+        this.render();
+
+        // Update the store now that annotations have been rendered
+        this.store.dispatch(store.setRotationAction(rotation));
+        this.store.dispatch(store.setScaleAction(scale));
+        this.store.dispatch(store.setIsInitialized());
+    }
+
+    public isFeatureEnabled(feature = ''): boolean {
+        return getProp(this.features, feature, false);
     }
 
     public removeAnnotation = (annotationId: string): void => {
@@ -111,14 +175,19 @@ export default class BaseAnnotator extends EventEmitter {
         this.store.dispatch(store.setActiveAnnotationIdAction(annotationId));
     }
 
+    public setColor(color: string): void {
+        this.store.dispatch(store.setColorAction(color));
+    }
+
     public setVisibility(visibility: boolean): void {
-        if (!this.rootEl) {
+        if (!this.containerEl) {
             return;
         }
+
         if (visibility) {
-            this.rootEl.classList.remove('is-hidden');
+            this.containerEl.classList.remove('is-hidden');
         } else {
-            this.rootEl.classList.add('is-hidden');
+            this.containerEl.classList.add('is-hidden');
         }
     }
 
@@ -126,6 +195,10 @@ export default class BaseAnnotator extends EventEmitter {
         this.store.dispatch(store.toggleAnnotationModeAction(mode));
     }
 
+    protected getAnnotatedElement(): HTMLElement | null | undefined {
+        return undefined; // Must be implemented in child class
+    }
+
     protected getElement(selector: HTMLElement | string): HTMLElement | null {
         return typeof selector === 'string' ? document.querySelector(selector) : selector;
     }
@@ -134,8 +207,8 @@ export default class BaseAnnotator extends EventEmitter {
         this.removeAnnotation(annotationId);
     };
 
-    protected handleScale = ({ scale }: { scale: number }): void => {
-        this.init(scale);
+    protected handleScale = ({ rotationAngle, scale }: { rotationAngle: number; scale: number }): void => {
+        this.init(scale, rotationAngle);
     };
 
     protected handleSetActive = (annotationId: string | null): void => {
@@ -146,9 +219,42 @@ export default class BaseAnnotator extends EventEmitter {
         this.setVisibility(visibility);
     };
 
+    protected handleSetColor = (color: string): void => {
+        this.setColor(color);
+    };
+
     protected hydrate(): void {
         // Redux dispatch method signature doesn't seem to like async actions
         this.store.dispatch<any>(store.fetchAnnotationsAction()); // eslint-disable-line @typescript-eslint/no-explicit-any
-        this.store.dispatch<any>(store.fetchCollaboratorsAction()); // eslint-disable-line @typescript-eslint/no-explicit-any
+    }
+
+    protected removeAnnotationClasses = (): void => {
+        if (!this.annotatedEl) {
+            return;
+        }
+
+        const annotatedElement = this.annotatedEl;
+        Object.values(ANNOTATION_CLASSES).forEach(className => {
+            if (className) {
+                annotatedElement.classList.remove(className);
+            }
+        });
+    };
+
+    protected render(): void {
+        // Must be implemented in child class
+    }
+
+    public postRender(): void {
+        if (!this.annotatedEl) {
+            return;
+        }
+
+        if (this.deselectManager) {
+            this.deselectManager.destroy();
+        }
+
+        this.deselectManager = new DeselectManager({ referenceEl: this.annotatedEl });
+        this.deselectManager.render({ store: this.store });
     }
 }

package/src/common/BaseManager.ts

@@ -1,10 +1,14 @@
+import * as ReactDOM from 'react-dom';
 import { IntlShape } from 'react-intl';
 import { Store } from 'redux';
+import { applyResinTags } from '../utils/resin';
+
+export type ResinTags = Record<string, unknown>;
 
 export type Options = {
-    page: number;
-    pageEl: HTMLElement;
+    location?: number;
     referenceEl: HTMLElement;
+    resinTags?: ResinTags;
 };
 
 export type Props = {
@@ -12,8 +16,67 @@ export type Props = {
     store: Store;
 };
 
-export default interface BaseManager {
+export interface Manager {
     destroy(): void;
-    exists(pageEl: HTMLElement): boolean;
+    exists(parentEl: HTMLElement): boolean;
     render(props: Props): void;
+    style(styles: Partial<CSSStyleDeclaration>): CSSStyleDeclaration;
+}
+
+export default class BaseManager implements Manager {
+    location: number;
+
+    reactEl: HTMLElement;
+
+    constructor({ location = 1, referenceEl, resinTags = {} }: Options) {
+        this.location = location;
+        this.reactEl = this.insert(referenceEl, {
+            ...resinTags,
+            feature: 'annotations',
+        });
+
+        this.decorate();
+    }
+
+    decorate(): void {
+        throw new Error('Method not implemented.');
+    }
+
+    destroy(): void {
+        ReactDOM.unmountComponentAtNode(this.reactEl);
+
+        const parentEl = this.reactEl.parentNode;
+        if (parentEl) {
+            parentEl.removeChild(this.reactEl);
+        }
+    }
+
+    exists(parentEl: HTMLElement): boolean {
+        return parentEl.contains(this.reactEl);
+    }
+
+    insert(referenceEl: HTMLElement, resinTags: ResinTags = {}): HTMLElement {
+        // Find the nearest applicable reference and document elements
+        const documentEl = referenceEl.ownerDocument || document;
+        const parentEl = referenceEl.parentNode || documentEl;
+
+        // Construct a layer element where we can inject a root React component
+        const rootLayerEl = documentEl.createElement('div');
+        rootLayerEl.classList.add('ba-Layer');
+
+        // Apply any resin tags
+        applyResinTags(rootLayerEl, resinTags);
+
+        // Insert the new layer element immediately after the reference element
+        return parentEl.insertBefore(rootLayerEl, referenceEl.nextSibling);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(props: Props): void {
+        throw new Error('Method not implemented.');
+    }
+
+    style(styles: Partial<CSSStyleDeclaration>): CSSStyleDeclaration {
+        return Object.assign(this.reactEl.style, styles);
+    }
 }

package/src/common/DeselectListener.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { setActiveAnnotationIdAction } from '../store/annotations';
+
+export default function DeselectListener(): null {
+    const dispatch = useDispatch();
+
+    React.useEffect(() => {
+        const handleMouseDown = (): void => {
+            dispatch(setActiveAnnotationIdAction(null));
+        };
+
+        document.addEventListener('mousedown', handleMouseDown);
+
+        return () => {
+            document.removeEventListener('mousedown', handleMouseDown);
+        };
+    });
+
+    return null;
+}

package/src/common/DeselectManager.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { Store } from 'redux';
+import BaseManager from './BaseManager';
+import DeselectListener from './DeselectListener';
+
+export type Options = {
+    referenceEl: HTMLElement;
+};
+
+export type Props = {
+    store: Store;
+};
+
+export default class DeselectManager extends BaseManager {
+    decorate(): void {
+        this.reactEl.classList.add('ba-Layer--deselect');
+        this.reactEl.dataset.testid = 'ba-Layer--deselect';
+    }
+
+    render({ store }: Props): void {
+        ReactDOM.render(
+            <Provider store={store}>
+                <DeselectListener />
+            </Provider>,
+            this.reactEl,
+        );
+    }
+}

package/src/common/useIsListInteractive.ts

@@ -0,0 +1,10 @@
+import * as ReactRedux from 'react-redux';
+import { getCreatorStatus, getIsSelecting, CreatorStatus } from '../store';
+
+// Returns whether rendered annotations should be interactive
+export default function useIsListInteractive(): boolean {
+    const status = ReactRedux.useSelector(getCreatorStatus);
+    const isSelecting = ReactRedux.useSelector(getIsSelecting);
+
+    return status === CreatorStatus.init && !isSelecting;
+}

package/src/common/useMountId.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import * as uuid from 'uuid';
+
+// Returns a generated uuid, then calls the provided callback via an effect
+export default function useMountId(callback: (uuid: string) => void): string {
+    const uuidRef = React.useRef<string>(uuid.v4());
+
+    // The callback is only invoked after the parent component has rendered
+    React.useEffect(() => {
+        callback(uuidRef.current);
+    }, [callback]);
+
+    return uuidRef.current;
+}

package/src/common/useOutsideEvent.ts

@@ -1,13 +1,18 @@
 import * as React from 'react';
 
 // Utilizes the useEffect hook to handle when an event is fired on the document, but outside of the specified element
-export default function useOutsideEvent(type: string, ref: React.RefObject<Element>, callback: () => void): void {
+export default function useOutsideEvent(
+    type: string,
+    ref?: React.RefObject<Element> | Element | null,
+    callback?: EventListener,
+): void {
     React.useEffect(() => {
-        function handleEvent(event: Event): void {
-            const containsEventTarget = !!ref?.current?.contains(event.target as Node);
+        function handleEvent<T extends Event>(event: T): void {
+            const element = ref instanceof Element ? ref : ref?.current;
+            const containsEventTarget = !!element?.contains(event.target as Node);
 
             if (callback && !containsEventTarget) {
-                callback();
+                callback(event);
             }
         }
 

package/src/common/usePrevious.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+// Returns the last provided value, then caches the new value via an effect
+export default function usePrevious<T>(value: T): T | undefined {
+    const ref = React.useRef<T>();
+
+    // The useEffect callback is only invoked after the parent component has rendered
+    React.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+
+    return ref.current;
+}

package/src/components/ItemList/ItemList.scss

@@ -1,5 +1,10 @@
 .ba {
-    .ba-ItemList-row {
-        padding: 5px 30px 5px 15px;
+    .ba-ItemList {
+        max-height: 300px;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+        text-align: left;
+        list-style: none;
     }
 }

package/src/components/ItemList/ItemList.tsx

@@ -1,11 +1,13 @@
-import React, { SyntheticEvent } from 'react';
+import React from 'react';
 import noop from 'lodash/noop';
-import ItemRow from './ItemRow';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import ItemRow, { ItemRowRef } from './ItemRow';
 import './ItemList.scss';
 
 export type Props<T extends { id: string }> = {
     activeItemIndex?: number;
-    itemRowAs?: JSX.Element;
+    autoScroll?: boolean;
+    itemRowAs?: React.ElementType;
     items: T[];
     onActivate?: (index: number) => void;
     onSelect: (index: number, event: React.SyntheticEvent) => void;
@@ -13,32 +15,49 @@ export type Props<T extends { id: string }> = {
 
 const ItemList = <T extends { id: string }>({
     activeItemIndex = 0,
-    itemRowAs = <ItemRow />,
+    autoScroll = false,
+    itemRowAs: ItemRowComponent = ItemRow,
     items,
     onActivate = noop,
     onSelect,
     ...rest
-}: Props<T>): JSX.Element => (
-    <ul data-testid="ba-ItemList" role="listbox" {...rest}>
-        {items.map((item, index) =>
-            React.cloneElement(itemRowAs, {
-                ...item,
-                key: item.id,
-                className: 'ba-ItemList-row',
-                isActive: index === activeItemIndex,
-                onClick: (event: SyntheticEvent) => {
-                    onSelect(index, event);
-                },
-                /* preventDefault on mousedown so blur doesn't happen before click */
-                onMouseDown: (event: SyntheticEvent) => {
-                    event.preventDefault();
-                },
-                onMouseEnter: () => {
-                    onActivate(index);
-                },
-            }),
-        )}
-    </ul>
-);
+}: Props<T>): JSX.Element => {
+    const activeRef = React.useCallback(
+        (activeEl: ItemRowRef) => {
+            if (!autoScroll || !activeEl) {
+                return;
+            }
+
+            scrollIntoView(activeEl, {
+                scrollMode: 'if-needed',
+                block: 'nearest',
+            });
+        },
+        [autoScroll],
+    );
+
+    return (
+        <ul className="ba-ItemList" data-testid="ba-ItemList" role="listbox" {...rest}>
+            {items.map((item, index) => (
+                <ItemRowComponent
+                    key={item.id}
+                    ref={index === activeItemIndex ? activeRef : null}
+                    className="ba-ItemList-row"
+                    isActive={index === activeItemIndex}
+                    item={item}
+                    onClick={(event: React.SyntheticEvent) => {
+                        onSelect(index, event);
+                    }}
+                    onMouseDown={(event: React.SyntheticEvent) => {
+                        event.preventDefault(); // preventDefault on mousedown so blur doesn't happen before click
+                    }}
+                    onMouseEnter={() => {
+                        onActivate(index);
+                    }}
+                />
+            ))}
+        </ul>
+    );
+};
 
 export default ItemList;

package/src/components/ItemList/ItemRow.scss

@@ -1,11 +1,23 @@
 @import '~box-ui-elements/es/styles/variables';
 
-.ba-ItemRow-name {
-    line-height: 15px;
-}
+// increase specificity to override .bp styles
+.ba {
+    .ba-ItemRow {
+        padding: 5px 30px 5px 15px;
+
+        &.is-active {
+            background-color: fade-out($bdl-gray, .95);
+            cursor: pointer;
+        }
+    }
+
+    .ba-ItemRow-name {
+        line-height: 15px;
+    }
 
-.ba-ItemRow-email {
-    color: $bdl-gray-62;
-    font-size: 11px;
-    line-height: 15px;
+    .ba-ItemRow-email {
+        color: $bdl-gray-62;
+        font-size: 11px;
+        line-height: 15px;
+    }
 }