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

package/src/store/options/reducer.ts

@@ -1,11 +1,21 @@
 import { createReducer } from '@reduxjs/toolkit';
 import { OptionsState } from './types';
-import { setFileIdAction, setFileVersionIdAction, setPermissionsAction } from './actions';
+import {
+    setFileIdAction,
+    setFileVersionIdAction,
+    setPermissionsAction,
+    setRotationAction,
+    setScaleAction,
+} from './actions';
 
 export const initialState = {
+    features: {},
     fileId: null,
     fileVersionId: null,
+    isCurrentFileVersion: true,
     permissions: {},
+    rotation: 0,
+    scale: 1,
 };
 
 export default createReducer<OptionsState>(initialState, builder =>
@@ -18,5 +28,11 @@ export default createReducer<OptionsState>(initialState, builder =>
         })
         .addCase(setPermissionsAction, (state, { payload }) => {
             state.permissions = payload;
+        })
+        .addCase(setRotationAction, (state, { payload }) => {
+            state.rotation = payload;
+        })
+        .addCase(setScaleAction, (state, { payload }) => {
+            state.scale = payload;
         }),
 );

package/src/store/options/selectors.ts

@@ -1,8 +1,16 @@
+import getProp from 'lodash/get';
 import { AppState } from '../types';
 import { Permissions } from '../../@types';
+import { Features } from '../../BoxAnnotations';
 
 type State = Pick<AppState, 'options'>;
 
+export const getFeatures = (state: State): Features => state.options.features;
 export const getFileId = (state: State): string | null => state.options.fileId;
 export const getFileVersionId = (state: State): string | null => state.options.fileVersionId;
+export const getIsCurrentFileVersion = (state: State): boolean => state.options.isCurrentFileVersion;
 export const getPermissions = (state: State): Permissions => state.options.permissions;
+export const getRotation = (state: State): number => state.options.rotation;
+export const getScale = (state: State): number => state.options.scale;
+export const isFeatureEnabled = (state: State, featurename: string): boolean =>
+    getProp(getFeatures(state), featurename, false);

package/src/store/options/types.ts

@@ -1,7 +1,12 @@
+import { Features } from '../../BoxAnnotations';
 import { Permissions } from '../../@types';
 
 export type OptionsState = {
+    features: Features;
     fileId: string | null;
     fileVersionId: string | null;
+    isCurrentFileVersion: boolean;
     permissions: Permissions;
+    rotation: number;
+    scale: number;
 };

package/src/store/types.ts

@@ -4,13 +4,17 @@ import API from '../api';
 import { AnnotationsState } from './annotations';
 import { CommonState } from './common';
 import { CreatorState } from './creator';
+import { DrawingState } from './drawing';
+import { HighlightState } from './highlight';
 import { OptionsState } from './options';
 import { UsersState } from './users';
 
 export type AppState = {
     annotations: AnnotationsState;
-    creator: CreatorState;
     common: CommonState;
+    creator: CreatorState;
+    drawing: DrawingState;
+    highlight: HighlightState;
     options: OptionsState;
     users: UsersState;
 };

package/src/store/users/actions.ts

@@ -4,9 +4,9 @@ import { AppThunkAPI } from '../types';
 import { Collaborator } from '../../@types';
 import { getFileId } from '../options';
 
-export const fetchCollaboratorsAction = createAsyncThunk<APICollection<Collaborator>, undefined, AppThunkAPI>(
+export const fetchCollaboratorsAction = createAsyncThunk<APICollection<Collaborator>, string, AppThunkAPI>(
     'FETCH_COLLABORATORS',
-    async (arg, { extra, getState, signal }) => {
+    async (searchString = '', { extra, getState, signal }) => {
         // Create a new client for each request
         const client = extra.api.getCollaboratorsAPI();
         const state = getState();
@@ -20,6 +20,7 @@ export const fetchCollaboratorsAction = createAsyncThunk<APICollection<Collabora
         // Wrap the client request in a promise to allow it to be returned and cancelled
         return new Promise<APICollection<Collaborator>>((resolve, reject) => {
             client.getFileCollaborators(fileId, resolve, reject, {
+                filter_term: searchString, // eslint-disable-line @typescript-eslint/camelcase
                 include_groups: false, // eslint-disable-line @typescript-eslint/camelcase
                 include_uploader_collabs: false, // eslint-disable-line @typescript-eslint/camelcase
             });

package/src/utils/resin.ts

@@ -0,0 +1,22 @@
+export function stringify(value: unknown): string {
+    if (typeof value === 'object' || typeof value === 'function' || typeof value === 'symbol') {
+        return '';
+    }
+
+    return typeof value === 'string' ? value : String(value);
+}
+
+export function applyResinTags(element: HTMLElement, attributes: Record<string, unknown>): void {
+    if (!element || !Object.values(attributes).length) {
+        return;
+    }
+
+    Object.entries(attributes).forEach(([key, value]) => {
+        const attribute = `data-resin-${key.toLowerCase()}`;
+        const stringValue = stringify(value);
+
+        if (stringValue) {
+            element.setAttribute(attribute, stringValue);
+        }
+    });
+}

package/src/utils/rotate.ts

@@ -0,0 +1,131 @@
+import { Dimensions, Position, Shape } from '../@types';
+
+export type Translation = {
+    dx?: number;
+    dy?: number;
+};
+
+// Possible rotation values as supplied by box-content-preview
+const ROTATION_ONCE_DEG = -90;
+const ROTATION_TWICE_DEG = -180;
+const ROTATION_THRICE_DEG = -270;
+
+// Annotation shapes are, by default, percentages, so a 100x100 space
+const DEFAULT_DIMENSIONS = { height: 100, width: 100 };
+
+export const invertYCoordinate = ({ x, y }: Position, height: number): Position => ({
+    x,
+    y: height > 0 ? height - y : y,
+});
+
+export const rotatePoint = ({ x, y }: Position, rotationInDegrees: number): Position => {
+    const radians = (rotationInDegrees * Math.PI) / 180;
+    const cosine = Math.cos(radians);
+    const sine = Math.sin(radians);
+
+    // Formula to apply a rotation to a position is:
+    // x' = x * cos(θ) - y * sin(θ)
+    // y' = x * sin(θ) + y * cos(θ)
+    return {
+        x: x * cosine - y * sine,
+        y: x * sine + y * cosine,
+    };
+};
+
+export const getPoints = (shape: Shape): [Position, Position, Position, Position] => {
+    const { height, width, x, y } = shape;
+
+    // Define the points from x,y and then in a clockwise fashion
+    // p1      p2
+    // +-------+
+    // |       |
+    // +-------+
+    // p4      p3
+    const p1 = { x, y };
+    const p2 = { x: x + width, y };
+    const p3 = { x: x + width, y: y + height };
+    const p4 = { x, y: y + height };
+
+    return [p1, p2, p3, p4];
+};
+
+export const translatePoint = ({ x, y }: Position, { dx = 0, dy = 0 }: { dx?: number; dy?: number }): Position => ({
+    x: x + dx,
+    y: y + dy,
+});
+
+export function selectTransformationPoint(shape: Shape, rotation: number): Position {
+    const [p1, p2, p3, p4] = getPoints(shape);
+
+    // Determine which position will be the new x,y (as defined as the top left position) after rotation
+    // If -90deg: use p2
+    // If -180deg: use p3
+    // If -270deg: use p4
+    // Otherwise: use p1
+    switch (rotation) {
+        case ROTATION_ONCE_DEG:
+            return p2;
+        case ROTATION_TWICE_DEG:
+            return p3;
+        case ROTATION_THRICE_DEG:
+            return p4;
+        default:
+            return p1;
+    }
+}
+
+// Determines the translation needed to anchor the bottom left corner of the
+// coordinate space at the (0, 0) origin after rotation.
+export function selectTranslation(dimensions: Dimensions, rotation: number): Translation {
+    const { height, width } = dimensions;
+
+    switch (rotation) {
+        case ROTATION_ONCE_DEG:
+            return { dx: height };
+        case ROTATION_TWICE_DEG:
+            return { dx: width, dy: height };
+        case ROTATION_THRICE_DEG:
+            return { dy: width };
+        default:
+    }
+
+    return { dx: 0, dy: 0 };
+}
+
+export function getRotatedShape(shape: Shape, rotation: number): Shape {
+    const { height: shapeHeight, width: shapeWidth } = shape;
+    const { height: spaceHeight, width: spaceWidth } = DEFAULT_DIMENSIONS;
+    const isInverted = rotation % 180 === 0;
+    const isNoRotation = rotation % 360 === 0;
+    const translation = selectTranslation(DEFAULT_DIMENSIONS, rotation);
+    const position = selectTransformationPoint(shape, rotation);
+
+    if (isNoRotation) {
+        return shape;
+    }
+
+    // To transform from shape with 0 rotation to provided rotation:
+    // 1. Invert y-axis to convert from web to mathematical coordinate system
+    // 2. Apply rotation transformation (with inverted rotation -- again mathematical coordinate system)
+    // 3. Translate to align coordinate space with mathematical origin
+    // 4. Invert y-axis to convert back to web coordinate system
+    const invertedPoint = invertYCoordinate(position, spaceHeight);
+    const rotatedPoint = rotatePoint(invertedPoint, -rotation);
+    const translatedPoint = translatePoint(rotatedPoint, translation);
+    const { x: transformedX, y: transformedY } = invertYCoordinate(
+        translatedPoint,
+        isInverted ? spaceHeight : spaceWidth,
+    );
+
+    return {
+        height: isInverted ? shapeHeight : shapeWidth,
+        width: isInverted ? shapeWidth : shapeHeight,
+        x: transformedX,
+        y: transformedY,
+    };
+}
+
+export function getRotatedPosition({ x, y }: Position, rotation: number): Position {
+    const { x: rotatedX, y: rotatedY } = getRotatedShape({ height: 0, width: 0, x, y }, rotation);
+    return { x: rotatedX, y: rotatedY };
+}

package/src/utils/scroll.ts

@@ -0,0 +1,45 @@
+import { Position } from '../@types';
+
+export type ScrollOptions = {
+    offsets?: Position;
+    threshold?: number;
+};
+
+const DEFAULT_OFFSETS = { x: 0, y: 0 };
+
+export function scrollToLocation(parentEl: HTMLElement, referenceEl: HTMLElement, options: ScrollOptions = {}): void {
+    const { offsets = DEFAULT_OFFSETS } = options;
+    const { x: offsetXPercentage, y: offsetYPercentage } = offsets;
+    // Get the bounding client rects so that the offsetLeft of the reference element can be calculated --
+    // even if it has been transformed via rotation
+    const { left: parentLeft, top: parentTop } = parentEl.getBoundingClientRect();
+    const {
+        height: referenceHeight,
+        left: referenceLeft,
+        top: referenceTop,
+        width: referenceWidth,
+    } = referenceEl.getBoundingClientRect();
+
+    // Get the midpoint of the scrollable area (parent element)
+    const parentCenterX = Math.round(parentEl.clientWidth / 2);
+    const parentCenterY = Math.round(parentEl.clientHeight / 2);
+
+    // Get any specified offset relative to the reference element
+    const offsetX = Math.round(referenceWidth * (offsetXPercentage / 100)); // offsetX is assumed to be a percentage
+    const offsetY = Math.round(referenceHeight * (offsetYPercentage / 100)); // offsetY is assumed to be a percentage
+
+    // Get the positioning of the reference element relative to the parent and the viewport
+    const referenceOffsetLeft = referenceLeft - parentLeft;
+    const referenceOffsetTop = referenceTop - parentTop;
+
+    // Get the scroll offsets to center the parent element on the top left corner of the reference element and then apply any provided offset
+    const offsetScrollLeft = referenceOffsetLeft - parentCenterX + offsetX;
+    const offsetScrollTop = referenceOffsetTop - parentCenterY + offsetY;
+
+    // Get the absolute scroll offsets by applying the delta to the current value
+    const scrollLeft = Math.max(0, Math.min(parentEl.scrollLeft + offsetScrollLeft, parentEl.scrollWidth));
+    const scrollTop = Math.max(0, Math.min(parentEl.scrollTop + offsetScrollTop, parentEl.scrollHeight));
+
+    parentEl.scrollLeft = scrollLeft;
+    parentEl.scrollTop = scrollTop;
+}

package/src/utils/util.ts

@@ -0,0 +1,3 @@
+export function checkValue(value: number): boolean {
+    return value >= 0 && value <= 100; // Values cannot be negative or larger than 100%
+}

package/src/region/RegionContainer.tsx

@@ -1,49 +0,0 @@
-import { connect } from 'react-redux';
-import { AnnotationRegion } from '../@types';
-import {
-    AppState,
-    CreatorItem,
-    CreatorStatus,
-    getActiveAnnotationId,
-    getAnnotationMode,
-    getAnnotationsForLocation,
-    getCreatorMessage,
-    getCreatorStagedForLocation,
-    getCreatorStatus,
-    setActiveAnnotationIdAction,
-    setMessageAction,
-    setStagedAction,
-    setStatusAction,
-} from '../store';
-import RegionAnnotations from './RegionAnnotations';
-import withProviders from '../common/withProviders';
-import { createRegionAction } from './actions';
-import { isRegion } from './regionUtil';
-
-export type Props = {
-    activeAnnotationId: string | null;
-    annotations: AnnotationRegion[];
-    isCreating: boolean;
-    message: string;
-    staged: CreatorItem | null;
-    status: CreatorStatus;
-};
-
-export const mapStateToProps = (state: AppState, { page }: { page: number }): Props => ({
-    activeAnnotationId: getActiveAnnotationId(state),
-    annotations: getAnnotationsForLocation(state, page).filter(isRegion),
-    isCreating: getAnnotationMode(state) === 'region',
-    message: getCreatorMessage(state),
-    staged: getCreatorStagedForLocation(state, page),
-    status: getCreatorStatus(state),
-});
-
-export const mapDispatchToProps = {
-    createRegion: createRegionAction,
-    setActiveAnnotationId: setActiveAnnotationIdAction,
-    setMessage: setMessageAction,
-    setStaged: setStagedAction,
-    setStatus: setStatusAction,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(withProviders(RegionAnnotations));

package/src/utils/polyfill.js

@@ -1,161 +0,0 @@
-/* eslint-disable */
-(function() {
-    var testObject = {};
-
-    if (!(Object.setPrototypeOf || testObject.__proto__)) {
-        var nativeGetPrototypeOf = Object.getPrototypeOf;
-
-        Object.getPrototypeOf = function(object) {
-            if (object.__proto__) {
-                return object.__proto__;
-            } else {
-                return nativeGetPrototypeOf.call(Object, object);
-            }
-        };
-    }
-})();
-
-if (typeof Object.assign != 'function') {
-    (function() {
-        Object.assign = function(target) {
-            'use strict';
-            if (target === undefined || target === null) {
-                throw new TypeError('Cannot convert undefined or null to object');
-            }
-
-            var output = Object(target);
-            for (var index = 1; index < arguments.length; index++) {
-                var source = arguments[index];
-                if (source !== undefined && source !== null) {
-                    for (var nextKey in source) {
-                        if (source.hasOwnProperty(nextKey)) {
-                            output[nextKey] = source[nextKey];
-                        }
-                    }
-                }
-            }
-            return output;
-        };
-    })();
-}
-
-// https://tc39.github.io/ecma262/#sec-array.prototype.find
-if (!Array.prototype.find) {
-    Object.defineProperty(Array.prototype, 'find', {
-        configurable: true,
-        enumerable: false,
-        writable: true,
-        value: function(predicate) {
-            // 1. Let O be ? ToObject(this value).
-            if (this == null) {
-                throw new TypeError('"this" is null or not defined');
-            }
-
-            var o = Object(this);
-
-            // 2. Let len be ? ToLength(? Get(O, "length")).
-            var len = o.length >>> 0;
-
-            // 3. If IsCallable(predicate) is false, throw a TypeError exception.
-            if (typeof predicate !== 'function') {
-                throw new TypeError('predicate must be a function');
-            }
-
-            // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
-            var thisArg = arguments[1];
-
-            // 5. Let k be 0.
-            var k = 0;
-
-            // 6. Repeat, while k < len
-            while (k < len) {
-                // a. Let Pk be ! ToString(k).
-                // b. Let kValue be ? Get(O, Pk).
-                // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
-                // d. If testResult is true, return kValue.
-                var kValue = o[k];
-                if (predicate.call(thisArg, kValue, k, o)) {
-                    return kValue;
-                }
-                // e. Increase k by 1.
-                k++;
-            }
-
-            // 7. Return undefined.
-            return undefined;
-        },
-    });
-}
-
-// https://tc39.github.io/ecma262/#sec-array.prototype.includes
-if (!Array.prototype.includes) {
-    Object.defineProperty(Array.prototype, 'includes', {
-        configurable: true,
-        enumerable: false,
-        writable: true,
-        value: function(searchElement, fromIndex) {
-            // 1. Let O be ? ToObject(this value).
-            if (this == null) {
-                throw new TypeError('"this" is null or not defined');
-            }
-
-            var o = Object(this);
-
-            // 2. Let len be ? ToLength(? Get(O, "length")).
-            var len = o.length >>> 0;
-
-            // 3. If len is 0, return false.
-            if (len === 0) {
-                return false;
-            }
-
-            // 4. Let n be ? ToInteger(fromIndex).
-            //    (If fromIndex is undefined, this step produces the value 0.)
-            var n = fromIndex | 0;
-
-            // 5. If n ≥ 0, then
-            //  a. Let k be n.
-            // 6. Else n < 0,
-            //  a. Let k be len + n.
-            //  b. If k < 0, let k be 0.
-            var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
-
-            function sameValueZero(x, y) {
-                return x === y || (typeof x === 'Number' && typeof y === 'Number' && isNaN(x) && isNaN(y));
-            }
-
-            // 7. Repeat, while k < len
-            while (k < len) {
-                // a. Let elementK be the result of ? Get(O, ! ToString(k)).
-                // b. If SameValueZero(searchElement, elementK) is true, return true.
-                // c. Increase k by 1.
-                if (sameValueZero(o[k], searchElement)) {
-                    return true;
-                }
-                k++;
-            }
-
-            // 8. Return false
-            return false;
-        },
-    });
-}
-
-// 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) {
-            do {
-                if (this === node) {
-                    return true;
-                }
-            } while ((node = node && node.parentNode));
-
-            return false;
-        },
-    });
-}
-/* eslint-enable */