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

package/src/store/common/reducer.ts

@@ -1,13 +1,19 @@
-import { createReducer, combineReducers } from '@reduxjs/toolkit';
+import { bdlBoxBlue } from 'box-ui-elements/es/styles/variables';
+import { createReducer } from '@reduxjs/toolkit';
 import { CommonState, Mode } from './types';
-import { toggleAnnotationModeAction } from './actions';
+import { setColorAction, toggleAnnotationModeAction } from './actions';
 
-const modeReducer = createReducer<CommonState['mode']>(Mode.NONE, builder =>
-    builder.addCase(toggleAnnotationModeAction, (state, { payload: mode }: { payload: Mode }) =>
-        state === mode ? Mode.NONE : mode,
-    ),
-);
+export const initialState = {
+    color: bdlBoxBlue,
+    mode: Mode.NONE,
+};
 
-export default combineReducers({
-    mode: modeReducer,
-});
+export default createReducer<CommonState>(initialState, builder =>
+    builder
+        .addCase(setColorAction, (state, { payload }) => {
+            state.color = payload;
+        })
+        .addCase(toggleAnnotationModeAction, (state, { payload }) => {
+            state.mode = payload;
+        }),
+);

package/src/store/common/selectors.ts

@@ -4,3 +4,4 @@ import { Mode } from './types';
 type State = Pick<AppState, 'common'>;
 
 export const getAnnotationMode = ({ common }: State): Mode => common.mode;
+export const getColor = (state: State): string => state.common.color;

package/src/store/common/types.ts

@@ -1,9 +1,12 @@
 export enum Mode {
+    DRAWING = 'drawing',
+    HIGHLIGHT = 'highlight',
     NONE = 'none',
     REGION = 'region',
 }
 
 export interface CommonState {
+    color: string;
     mode: Mode;
 }
 export interface ModeState {

package/src/store/createRootReducer.ts

@@ -2,6 +2,8 @@ import { combineReducers, Reducer } from 'redux';
 import { annotationsReducer } from './annotations';
 import { commonReducer } from './common';
 import { creatorReducer } from './creator';
+import { drawingReducer } from './drawing';
+import { highlightReducer } from './highlight';
 import { optionsReducer } from './options';
 import { usersReducer } from './users';
 
@@ -10,6 +12,8 @@ const createRootReducer = (): Reducer =>
         annotations: annotationsReducer,
         common: commonReducer,
         creator: creatorReducer,
+        drawing: drawingReducer,
+        highlight: highlightReducer,
         options: optionsReducer,
         users: usersReducer,
     });

package/src/store/creator/actions.ts

@@ -1,7 +1,9 @@
 import { createAction } from '@reduxjs/toolkit';
 import { CreatorItem, CreatorStatus } from './types';
 
+export const resetCreatorAction = createAction('RESET_CREATOR');
 export const setCursorAction = createAction<number>('SET_CREATOR_CURSOR');
 export const setMessageAction = createAction<string>('SET_CREATOR_MESSAGE');
+export const setReferenceIdAction = createAction<string>('SET_CREATOR_REFERENCE_ID');
 export const setStagedAction = createAction<CreatorItem | null>('SET_CREATOR_STAGED');
 export const setStatusAction = createAction<CreatorStatus>('SET_CREATOR_STATUS');

package/src/store/creator/reducer.ts

@@ -1,12 +1,21 @@
 import { createReducer } from '@reduxjs/toolkit';
-import { CreatorState, CreatorStatus } from './types';
 import { createAnnotationAction } from '../annotations';
-import { setMessageAction, setCursorAction, setStagedAction, setStatusAction } from './actions';
+import { CreatorState, CreatorStatus } from './types';
+import {
+    resetCreatorAction,
+    setCursorAction,
+    setMessageAction,
+    setReferenceIdAction,
+    setStagedAction,
+    setStatusAction,
+} from './actions';
+import { toggleAnnotationModeAction } from '../common';
 
 export const initialState = {
     cursor: 0,
     error: null,
     message: '',
+    referenceId: null,
     staged: null,
     status: CreatorStatus.init,
 };
@@ -22,9 +31,18 @@ export default createReducer<CreatorState>(initialState, builder =>
             state.error = error;
             state.status = CreatorStatus.rejected;
         })
+        .addCase(resetCreatorAction, state => {
+            state.message = '';
+            state.referenceId = null;
+            state.staged = null;
+            state.status = CreatorStatus.init;
+        })
         .addCase(setMessageAction, (state, { payload }) => {
             state.message = payload;
         })
+        .addCase(setReferenceIdAction, (state, { payload }) => {
+            state.referenceId = payload;
+        })
         .addCase(setStagedAction, (state, { payload }) => {
             state.staged = payload;
         })
@@ -33,5 +51,6 @@ export default createReducer<CreatorState>(initialState, builder =>
         })
         .addCase(setCursorAction, (state, { payload }) => {
             state.cursor = payload;
-        }),
+        })
+        .addCase(toggleAnnotationModeAction, () => initialState),
 );

package/src/store/creator/selectors.ts

@@ -1,13 +1,21 @@
 import { AppState } from '../types';
-import { CreatorItem, CreatorStatus } from './types';
+import { CreatorItem, CreatorItemDrawing, CreatorItemHighlight, CreatorItemRegion, CreatorStatus } from './types';
 
 type State = Pick<AppState, 'creator'>;
 
 export const getCreatorCursor = (state: State): number => state.creator.cursor;
 export const getCreatorMessage = (state: State): string => state.creator.message;
+export const getCreatorReferenceId = (state: State): string | null => state.creator.referenceId;
 export const getCreatorStaged = (state: State): CreatorItem | null => state.creator.staged;
 export const getCreatorStagedForLocation = (state: State, location: number): CreatorItem | null => {
     const staged = getCreatorStaged(state);
     return staged && staged.location === location ? staged : null;
 };
 export const getCreatorStatus = (state: State): CreatorStatus => state.creator.status;
+
+export const isCreatorStagedDrawing = (staged: CreatorItem | null): staged is CreatorItemDrawing =>
+    (staged as CreatorItemDrawing)?.pathGroups !== undefined;
+export const isCreatorStagedHighlight = (staged: CreatorItem | null): staged is CreatorItemHighlight =>
+    (staged as CreatorItemHighlight)?.shapes !== undefined;
+export const isCreatorStagedRegion = (staged: CreatorItem | null): staged is CreatorItemRegion =>
+    (staged as CreatorItemRegion)?.shape !== undefined;

package/src/store/creator/types.ts

@@ -1,21 +1,36 @@
-import { Rect, SerializedError } from '../../@types';
+import { PathGroup, Rect, SerializedError } from '../../@types';
 
 export enum CreatorStatus {
     init = 'init',
     pending = 'pending',
     rejected = 'rejected',
     staged = 'staged',
+    started = 'started',
 }
 
-export type CreatorItem = {
+export type CreatorItemBase = {
     location: number;
+};
+
+export type CreatorItemRegion = CreatorItemBase & {
     shape: Rect;
 };
 
+export type CreatorItemHighlight = CreatorItemBase & {
+    shapes: Rect[];
+};
+
+export type CreatorItemDrawing = CreatorItemBase & {
+    pathGroups: Array<PathGroup>;
+};
+
+export type CreatorItem = CreatorItemRegion | CreatorItemHighlight | CreatorItemDrawing | null;
+
 export type CreatorState = {
     cursor: number;
     error: SerializedError | null;
     message: string;
-    staged: CreatorItem | null;
+    referenceId: string | null;
+    staged: CreatorItem;
     status: CreatorStatus;
 };

package/src/store/drawing/actions.ts

@@ -0,0 +1,10 @@
+import { createAction } from '@reduxjs/toolkit';
+import { addClientIds } from '../../drawing/drawingUtil';
+
+export const addDrawingPathGroupAction = createAction('ADD_DRAWING_PATH_GROUP', pathGroup => ({
+    payload: addClientIds(pathGroup),
+}));
+export const redoDrawingPathGroupAction = createAction('REDO_DRAWING_PATH_GROUP');
+export const resetDrawingAction = createAction('RESET_DRAWING');
+export const setDrawingLocationAction = createAction<number>('SET_DRAWING_LOCATION');
+export const undoDrawingPathGroupAction = createAction('UNDO_DRAWING_PATH_GROUP');

package/src/store/drawing/index.ts

@@ -0,0 +1,4 @@
+export { default as drawingReducer } from './reducer';
+export * from './actions';
+export * from './selectors';
+export * from './types';

package/src/store/drawing/reducer.ts

@@ -0,0 +1,50 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { createAnnotationAction } from '../annotations';
+import { toggleAnnotationModeAction } from '../common';
+import { resetCreatorAction } from '../creator';
+import {
+    addDrawingPathGroupAction,
+    redoDrawingPathGroupAction,
+    resetDrawingAction,
+    setDrawingLocationAction,
+    undoDrawingPathGroupAction,
+} from './actions';
+import { DrawingState } from './types';
+
+export const initialState = {
+    drawnPathGroups: [],
+    location: 0,
+    stashedPathGroups: [],
+};
+
+export default createReducer<DrawingState>(initialState, builder =>
+    builder
+        .addCase(createAnnotationAction.fulfilled, () => initialState)
+        .addCase(addDrawingPathGroupAction, (state, { payload }) => {
+            state.drawnPathGroups.push(payload);
+            state.stashedPathGroups = [];
+        })
+        .addCase(redoDrawingPathGroupAction, state => {
+            const pathGroup = state.stashedPathGroups.pop();
+
+            if (pathGroup) {
+                state.drawnPathGroups.push(pathGroup);
+            }
+        })
+        .addCase(resetCreatorAction, () => initialState) // Needed for when `PopupReply` is cancelled
+        .addCase(resetDrawingAction, () => initialState)
+        .addCase(setDrawingLocationAction, (state, { payload }) => {
+            if (state.location !== payload) {
+                state.location = payload;
+                state.drawnPathGroups = [];
+            }
+        })
+        .addCase(toggleAnnotationModeAction, () => initialState)
+        .addCase(undoDrawingPathGroupAction, state => {
+            const pathGroup = state.drawnPathGroups.pop();
+
+            if (pathGroup) {
+                state.stashedPathGroups.push(pathGroup);
+            }
+        }),
+);

package/src/store/drawing/selectors.ts

@@ -0,0 +1,9 @@
+import { PathGroup } from '../../@types';
+import { AppState } from '../types';
+
+type State = Pick<AppState, 'drawing'>;
+
+export const getDrawingDrawnPathGroupsForLocation = (state: State, location: number): Array<PathGroup> =>
+    state.drawing.location === location ? state.drawing.drawnPathGroups : [];
+export const getStashedDrawnPathGroupsForLocation = (state: State, location: number): Array<PathGroup> =>
+    state.drawing.location === location ? state.drawing.stashedPathGroups : [];

package/src/store/drawing/types.ts

@@ -0,0 +1,7 @@
+import { PathGroup } from '../../@types';
+
+export type DrawingState = {
+    drawnPathGroups: Array<PathGroup>;
+    location: number;
+    stashedPathGroups: Array<PathGroup>;
+};

package/src/store/eventing/active.ts

@@ -1,14 +1,16 @@
 import eventManager from '../../common/EventManager';
 import { AppState } from '../types';
-import { getActiveAnnotationId } from '../annotations';
 import { Event } from '../../@types';
+import { getActiveAnnotationId } from '../annotations';
+import { getFileVersionId } from '../options';
 
 const handleActiveAnnotationEvents = (prevState: AppState, nextState: AppState): void => {
     const prevActiveAnnotationId = getActiveAnnotationId(prevState);
     const nextActiveAnnotationId = getActiveAnnotationId(nextState);
+    const fileVersionId = getFileVersionId(nextState);
 
     if (prevActiveAnnotationId !== nextActiveAnnotationId) {
-        eventManager.emit(Event.ACTIVE_CHANGE, nextActiveAnnotationId);
+        eventManager.emit(Event.ACTIVE_CHANGE, { annotationId: nextActiveAnnotationId, fileVersionId });
     }
 };
 

package/src/store/eventing/fetch.ts

@@ -0,0 +1,8 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { AsyncAction } from './types';
+import { Event } from '../../@types';
+
+export const handleFetchErrorEvents = (prevState: AppState, nextState: AppState, action: AsyncAction): void => {
+    eventManager.emit(Event.ANNOTATION_FETCH_ERROR, action);
+};

package/src/store/eventing/init.ts

@@ -0,0 +1,14 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { Event } from '../../@types';
+import { getAnnotations, getIsInitialized } from '../annotations';
+
+export const handleAnnotationsInitialized = (prevState: AppState, nextState: AppState): void => {
+    const prevIsInitialized = getIsInitialized(prevState);
+    const nextIsInitialized = getIsInitialized(nextState);
+
+    // Only emit an event the first time the library is initialized/rendered
+    if (prevIsInitialized !== nextIsInitialized && nextIsInitialized) {
+        eventManager.emit(Event.ANNOTATIONS_INITIALIZED, { annotations: getAnnotations(nextState) });
+    }
+};

package/src/store/eventing/middleware.ts

@@ -1,16 +1,34 @@
 import noop from 'lodash/noop';
 import { Action, Dispatch, Middleware, MiddlewareAPI } from '@reduxjs/toolkit';
-import { createAnnotationAction, setActiveAnnotationIdAction } from '../annotations/actions';
+import {
+    createAnnotationAction,
+    fetchAnnotationsAction,
+    setActiveAnnotationIdAction,
+    setIsInitialized,
+} from '../annotations/actions';
+import { EventHandlerMap } from './types';
 import { handleActiveAnnotationEvents } from './active';
+import { handleAnnotationsInitialized } from './init';
 import { handleCreateErrorEvents, handleCreatePendingEvents, handleCreateSuccessEvents } from './create';
-import { EventHandlerMap } from './types';
+import { handleFetchErrorEvents } from './fetch';
+import { handleResetCreatorAction, handleSetStagedAction } from './staged';
+import { handleSetStatusAction } from './status';
+import { handleToggleAnnotationModeAction } from './mode';
+import { resetCreatorAction, setStagedAction, setStatusAction } from '../creator';
+import { toggleAnnotationModeAction } from '../common/actions';
 
 // Array of event handlers based on redux action. To add handling for new events add an entry keyed by action
 const eventHandlers: EventHandlerMap = {
-    [createAnnotationAction.pending.toString()]: handleCreatePendingEvents,
     [createAnnotationAction.fulfilled.toString()]: handleCreateSuccessEvents,
+    [createAnnotationAction.pending.toString()]: handleCreatePendingEvents,
     [createAnnotationAction.rejected.toString()]: handleCreateErrorEvents,
+    [fetchAnnotationsAction.rejected.toString()]: handleFetchErrorEvents,
+    [resetCreatorAction.toString()]: handleResetCreatorAction,
     [setActiveAnnotationIdAction.toString()]: handleActiveAnnotationEvents,
+    [setIsInitialized.toString()]: handleAnnotationsInitialized,
+    [setStagedAction.toString()]: handleSetStagedAction,
+    [setStatusAction.toString()]: handleSetStatusAction,
+    [toggleAnnotationModeAction.toString()]: handleToggleAnnotationModeAction,
 };
 
 function getEventingMiddleware(handlers: EventHandlerMap = eventHandlers): Middleware {

package/src/store/eventing/mode.ts

@@ -0,0 +1,7 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { Event } from '../../@types';
+
+export const handleToggleAnnotationModeAction = (prevState: AppState, nextState: AppState): void => {
+    eventManager.emit(Event.ANNOTATIONS_MODE_CHANGE, { mode: nextState.common.mode });
+};

package/src/store/eventing/staged.ts

@@ -0,0 +1,56 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { CreatorItem, getCreatorStaged, isCreatorStagedHighlight, isCreatorStagedRegion } from '../creator';
+import { Event } from '../../@types';
+
+type Status = 'create' | 'update' | 'cancel';
+
+type Type = 'highlight' | 'region';
+
+export const getStatus = (prevStaged: CreatorItem, nextStaged: CreatorItem): Status | null => {
+    let status: Status | null = null;
+
+    if (prevStaged === null && nextStaged !== null) {
+        status = 'create';
+    }
+
+    if (prevStaged !== null) {
+        status = nextStaged === null ? 'cancel' : 'update';
+    }
+
+    return status;
+};
+
+export const getType = (staged: CreatorItem): Type | null => {
+    let type: Type | null = null;
+
+    if (isCreatorStagedRegion(staged)) {
+        type = 'region';
+    }
+
+    if (isCreatorStagedHighlight(staged)) {
+        type = 'highlight';
+    }
+
+    return type;
+};
+
+export const handleSetStagedAction = (prevState: AppState, nextState: AppState): void => {
+    const prevStaged = getCreatorStaged(prevState);
+    const nextStaged = getCreatorStaged(nextState);
+    const status = getStatus(prevStaged, nextStaged);
+    const type = getType(prevStaged) || getType(nextStaged);
+
+    if (!status || !type) {
+        return;
+    }
+
+    eventManager.emit(Event.CREATOR_STAGED_CHANGE, { type, status });
+};
+
+export const handleResetCreatorAction = (prevState: AppState): void => {
+    const prevStaged = getCreatorStaged(prevState);
+    const type = getType(prevStaged);
+
+    eventManager.emit(Event.CREATOR_STAGED_CHANGE, { type, status: 'cancel' });
+};

package/src/store/eventing/status.ts

@@ -0,0 +1,19 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { Event } from '../../@types';
+import { getAnnotationMode } from '../common';
+import { getCreatorStatus } from '../creator';
+
+export const handleSetStatusAction = (prevState: AppState, nextState: AppState): void => {
+    const prevStatus = getCreatorStatus(prevState);
+    const nextStatus = getCreatorStatus(nextState);
+
+    if (prevStatus === nextStatus) {
+        return;
+    }
+
+    eventManager.emit(Event.CREATOR_STATUS_CHANGE, {
+        status: nextStatus,
+        type: getAnnotationMode(nextState),
+    });
+};

package/src/store/highlight/actions.ts

@@ -0,0 +1,106 @@
+import { createAction } from '@reduxjs/toolkit';
+import { combineRects } from '../../highlight/highlightUtil';
+import { SelectionItem } from './types';
+import { Shape } from '../../@types';
+
+export type SelectionArg = {
+    containerRect: DOMRect;
+    hasError?: boolean;
+    location: number;
+    range: Range;
+};
+
+type Payload = {
+    payload: SelectionItem | null;
+};
+
+declare global {
+    interface Document {
+        createNodeIterator(
+            root: Node,
+            whatToShow?: number,
+            filter?: NodeFilter | Function,
+            entityReferenceExpansion?: boolean,
+        ): NodeIterator;
+    }
+}
+
+export const getClientRects = (range: Range): DOMRect[] => {
+    const iterator = document.createNodeIterator(
+        range.commonAncestorContainer,
+        NodeFilter.SHOW_ALL,
+        function acceptNode() {
+            return NodeFilter.FILTER_ACCEPT;
+        },
+        false,
+    );
+
+    const newRange = document.createRange();
+    const rects = [];
+    let currentNode = iterator.nextNode();
+    while (currentNode) {
+        if (rects.length === 0 && currentNode !== range.startContainer) {
+            currentNode = iterator.nextNode();
+            // eslint-disable-next-line no-continue
+            continue;
+        }
+
+        // Only highlight Text nodes
+        if (currentNode.nodeType === Node.TEXT_NODE) {
+            newRange.selectNodeContents(currentNode);
+            if (currentNode === range.startContainer) {
+                newRange.setStart(currentNode, range.startOffset);
+            }
+            if (currentNode === range.endContainer) {
+                newRange.setEnd(currentNode, range.endOffset);
+            }
+            rects.push(newRange.getBoundingClientRect());
+        }
+
+        if (currentNode === range.endContainer) {
+            break;
+        }
+
+        currentNode = iterator.nextNode();
+    }
+
+    return rects;
+};
+
+export const getShape = ({ height, left, top, width }: DOMRect): Shape => ({
+    height,
+    width,
+    x: left,
+    y: top,
+});
+
+export const setSelectionAction = createAction(
+    'SET_SELECTION',
+    (arg: SelectionArg | null): Payload => {
+        if (!arg) {
+            return {
+                payload: null,
+            };
+        }
+
+        const { containerRect, hasError, location, range } = arg;
+
+        let rects = Array.from(range.getClientRects());
+        // getClientRects on IE/Edge might return 0 rects
+        if (!rects.length) {
+            rects = getClientRects(range);
+        }
+
+        return {
+            payload: {
+                containerRect: getShape(containerRect),
+                hasError,
+                location,
+                rects: combineRects(rects.map(getShape)),
+            },
+        };
+    },
+);
+
+export const setIsPromotingAction = createAction<boolean>('SET_IS_PROMOTING');
+export const setIsSelectingAction = createAction<boolean>('SET_IS_SELECTING');

package/src/store/highlight/index.ts

@@ -0,0 +1,4 @@
+export { default as highlightReducer } from './reducer';
+export * from './actions';
+export * from './selectors';
+export * from './types';

package/src/store/highlight/reducer.ts

@@ -0,0 +1,37 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { createAnnotationAction } from '../annotations';
+import { HighlightState } from './types';
+import { resetCreatorAction, setStatusAction } from '../creator';
+import { setIsPromotingAction, setIsSelectingAction, setSelectionAction } from './actions';
+import { toggleAnnotationModeAction } from '../common';
+
+export const initialState = {
+    isPromoting: false,
+    isSelecting: false,
+    selection: null,
+};
+
+export default createReducer<HighlightState>(initialState, builder =>
+    builder
+        .addCase(setIsPromotingAction, (state, { payload }) => {
+            state.isPromoting = payload;
+        })
+        .addCase(setIsSelectingAction, (state, { payload }) => {
+            state.isSelecting = payload;
+        })
+        .addCase(setSelectionAction, (state, { payload }) => {
+            state.selection = payload;
+        })
+        .addCase(createAnnotationAction.fulfilled, state => {
+            state.isPromoting = false;
+        })
+        .addCase(resetCreatorAction, state => {
+            state.isPromoting = false;
+        })
+        .addCase(toggleAnnotationModeAction, state => {
+            state.isPromoting = false;
+        })
+        .addCase(setStatusAction, state => {
+            state.selection = null;
+        }),
+);

package/src/store/highlight/selectors.ts

@@ -0,0 +1,12 @@
+import { AppState } from '../types';
+import { SelectionItem } from './types';
+
+type State = Pick<AppState, 'highlight'>;
+
+export const getIsPromoting = (state: State): boolean => state.highlight.isPromoting;
+export const getIsSelecting = (state: State): boolean => state.highlight.isSelecting;
+export const getSelection = (state: State): SelectionItem | null => state.highlight.selection;
+export const getSelectionForLocation = (state: State, location: number): SelectionItem | null => {
+    const selection = getSelection(state);
+    return selection && selection.location === location ? selection : null;
+};

package/src/store/highlight/types.ts

@@ -0,0 +1,14 @@
+import { Shape } from '../../@types';
+
+export type HighlightState = {
+    isPromoting: boolean;
+    isSelecting: boolean;
+    selection: SelectionItem | null;
+};
+
+export type SelectionItem = {
+    containerRect: Shape;
+    hasError?: boolean;
+    location: number;
+    rects: Array<Shape>;
+};

package/src/store/index.ts

@@ -4,5 +4,7 @@ export { default as createStore } from './createStore';
 export * from './annotations';
 export * from './common';
 export * from './creator';
+export * from './highlight';
+export * from './options';
 export * from './types';
 export * from './users';

package/src/store/options/actions.ts

@@ -4,3 +4,5 @@ import { Permissions } from '../../@types';
 export const setFileIdAction = createAction<string | null>('SET_FIlE_ID');
 export const setFileVersionIdAction = createAction<string | null>('SET_FILE_VERSION_ID');
 export const setPermissionsAction = createAction<Permissions>('SET_PERMISSIONS');
+export const setRotationAction = createAction<number>('SET_ROTATION');
+export const setScaleAction = createAction<number>('SET_SCALE');