New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

box-annotations

Package Overview
Dependencies
Maintainers
1
Versions
115
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

box-annotations - npm Package Compare versions

Comparing version 0.0.11 to 0.1.0

17

CHANGELOG.md

@@ -0,1 +1,18 @@

<a name="0.1.0"></a>
# 0.1.0 (2017-10-30)
* Fix: Invalidate draw/highlight annotations without properly structured locations (#9) ([39a9493](https://github.com/box/box-annotations/commit/39a9493))
* Fix: Matching create highlight dialog to standard dialog (#8) ([d3a351a](https://github.com/box/box-annotations/commit/d3a351a))
* Fix: Move createHighlightDialog.isVisible check to DocAnnotator.js (#13) ([31643cd](https://github.com/box/box-annotations/commit/31643cd))
* Chore: Cleanup from separating Annotations from Preview (#12) ([08abdc8](https://github.com/box/box-annotations/commit/08abdc8))
* Chore: Migrating annotations code into repo ([3521db1](https://github.com/box/box-annotations/commit/3521db1))
* Chore: Update README.md & CHANGELOG.md (#11) ([32f690a](https://github.com/box/box-annotations/commit/32f690a))
* Update: Documentation & license updates (#10) ([294bd6d](https://github.com/box/box-annotations/commit/294bd6d))
* Initial commit ([ef5245b](https://github.com/box/box-annotations/commit/ef5245b))
* Update README.md ([ee7cf59](https://github.com/box/box-annotations/commit/ee7cf59))
* New: Building as npm package ([253ea03](https://github.com/box/box-annotations/commit/253ea03))
* New: Copying annotations code from box/box-content-preview ([12aaab4](https://github.com/box/box-annotations/commit/12aaab4))
<a name="0.0.11"></a>

@@ -2,0 +19,0 @@ ## 0.0.11 (2017-10-26)

2

CONTRIBUTING.md

@@ -9,3 +9,3 @@ # Contributing

https://developer.box.com/docs/box-ui-elements-cla
https://developer.box.com/docs/box-sdk-cla

@@ -12,0 +12,0 @@ To learn more about CLAs and why they are important to the UI Element projects, please see the [Wikipedia entry](http://en.wikipedia.org/wiki/Contributor_License_Agreement).

41

lib/Annotator.js

@@ -320,7 +320,2 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

if (this.createHighlightDialog.isVisible) {
document.getSelection().removeAllRanges();
this.createHighlightDialog.hide();
}
// No specific mode available for annotation type

@@ -615,2 +610,38 @@ if (!(mode in this.modeButtons)) {

/**
* Gets thread params for the new annotation thread
*
* @param {Annotation[]} annotations - Annotations in thread
* @param {Object} location - Location object
* @param {string} [type] - Optional annotation type
* @return {AnnotationThread} Created annotation thread
*/
}, {
key: 'getThreadParams',
value: function getThreadParams(annotations, location, type) {
var params = {
annotatedElement: this.annotatedElement,
annotations: annotations,
annotationService: this.annotationService,
container: this.container,
fileVersionId: this.fileVersionId,
isMobile: this.isMobile,
hasTouch: this.hasTouch,
locale: this.locale,
location: location,
type: type,
permissions: this.permissions,
localized: this.localized
};
// Set existing thread ID if created with annotations
if (annotations.length > 0) {
params.threadID = annotations[0].threadID;
params.threadNumber = annotations[0].threadNumber;
}
return params;
}
/**
* Binds custom event listeners for a thread.

@@ -617,0 +648,0 @@ *

35

lib/annotatorUtil.js

@@ -449,2 +449,32 @@ import 'whatwg-fetch';

/**
* Checks whether a point annotation thread has the correct location params
*
* @param {Object} location Point annotation thread location object
* @return {boolean} Whether or not the point annotation has the correct location information
*/
export function isPointLocationValid(location) {
return !!(location && location.x && location.y);
}
/**
* Checks whether a highlight annotation thread has the correct location params
*
* @param {Object} location Highlight annotation thread location object
* @return {boolean} Whether or not the highlight annotation has the correct location information
*/
export function isHighlightLocationValid(location) {
return !!(location && location.quadPoints);
}
/**
* Checks whether a draw annotation thread has the correct location params
*
* @param {Object} location Draw annotation thread location object
* @return {boolean} Whether or not the draw annotation has the correct location information
*/
export function isDrawLocationValid(location) {
return !!(location && location.minX && location.minY && location.maxX && location.maxY);
}
/**
* Checks whether annotation thread is valid by checking whether each property

@@ -456,4 +486,7 @@ * in THREAD_PARAMS on the specified file object is defined.

*/
export function validateThreadParams(thread) {
export function areThreadParamsValid(thread) {
if (thread) {
if (thread.type === TYPES.point && !isPointLocationValid(thread.location) || isHighlightAnnotation(thread.type) && !isHighlightLocationValid(thread.location) || thread.type === TYPES.draw && !isDrawLocationValid(thread.location)) {
return false;
}
return THREAD_PARAMS.every(function (param) {

@@ -460,0 +493,0 @@ return typeof thread[param] !== 'undefined';

60

lib/doc/DocAnnotator.js

@@ -364,24 +364,4 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var thread = void 0;
var threadParams = {
annotatedElement: this.annotatedElement,
annotations: annotations,
annotationService: this.annotationService,
container: this.container,
fileVersionId: this.fileVersionId,
isMobile: this.isMobile,
hasTouch: this.hasTouch,
locale: this.locale,
location: location,
type: type,
permissions: this.permissions,
localized: this.localized
};
// Set existing thread ID if created with annotations
if (annotations.length > 0) {
threadParams.threadID = annotations[0].threadID;
threadParams.threadNumber = annotations[0].threadNumber;
}
if (!annotatorUtil.validateThreadParams(threadParams)) {
var threadParams = this.getThreadParams(annotations, location, type);
if (!annotatorUtil.areThreadParamsValid(threadParams)) {
this.handleValidationError();

@@ -399,4 +379,4 @@ return thread;

if (!thread && this.notification) {
this.emit(ANNOTATOR_EVENT.error, this.localized.createError);
if (!thread) {
this.emit(ANNOTATOR_EVENT.error, this.localized.loadError);
} else if (thread && (type !== TYPES.draw || location.page)) {

@@ -473,2 +453,30 @@ this.addThreadToMap(thread);

/**
* Toggles annotation modes on and off. When an annotation mode is
* on, annotation threads will be created at that location.
*
* @param {string} mode - Current annotation mode
* @param {HTMLEvent} event - DOM event
* @return {void}
*/
}, {
key: 'toggleAnnotationHandler',
value: function toggleAnnotationHandler(mode) {
var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (!this.isModeAnnotatable(mode)) {
return;
}
this.destroyPendingThreads();
if (this.createHighlightDialog && this.createHighlightDialog.isVisible) {
document.getSelection().removeAllRanges();
this.createHighlightDialog.hide();
}
_get(DocAnnotator.prototype.__proto__ || Object.getPrototypeOf(DocAnnotator.prototype), 'toggleAnnotationHandler', this).call(this, mode, event);
}
//--------------------------------------------------------------------------

@@ -622,3 +630,3 @@ // Protected

if (this.createHighlightDialog) {
if (this.createHighlightDialog && this.createHighlightDialog.isVisble) {
this.createHighlightDialog.hide();

@@ -938,3 +946,3 @@ }

if (this.createHighlightDialog.isVisible) {
if (this.createHighlightDialog && this.createHighlightDialog.isVisible) {
this.createHighlightDialog.hide();

@@ -941,0 +949,0 @@ document.getSelection().removeAllRanges();

4

lib/drawing/DrawingModeController.js

@@ -14,2 +14,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

import annotationsShell from './../annotationsShell.html';
import DocDrawingThread from '../doc/DocDrawingThread';
import * as annotatorUtil from '../annotatorUtil';

@@ -205,3 +206,4 @@ import { CLASS_ANNOTATION_DRAW, TYPES, STATES, SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL, SELECTOR_ANNOTATION_BUTTON_DRAW_POST, SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO, SELECTOR_ANNOTATION_BUTTON_DRAW_REDO, DRAW_BORDER_OFFSET } from '../annotationConstants';

// Setup
this.currentThread = this.annotator.createAnnotationThread([], {}, TYPES.draw);
var threadParams = this.annotator.getThreadParams([], {}, TYPES.draw);
this.currentThread = new DocDrawingThread(threadParams);
this.bindCustomListenersOnThread(this.currentThread);

@@ -208,0 +210,0 @@

33

lib/image/ImageAnnotator.js

@@ -18,3 +18,3 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

import * as imageAnnotatorUtil from './imageAnnotatorUtil';
import { CLASS_ANNOTATION_POINT_MARKER, SELECTOR_ANNOTATION_BUTTON_POINT, ANNOTATOR_EVENT } from '../annotationConstants';
import { TYPES, CLASS_ANNOTATION_POINT_MARKER, SELECTOR_ANNOTATION_BUTTON_POINT, ANNOTATOR_EVENT } from '../annotationConstants';

@@ -150,17 +150,4 @@ var IMAGE_NODE_NAME = 'img';

var threadParams = {
annotatedElement: this.annotatedElement,
annotations: annotations,
annotationService: this.annotationService,
container: this.container,
fileVersionId: this.fileVersionId,
isMobile: this.isMobile,
locale: this.locale,
location: fixedLocation,
type: type,
permissions: this.permissions,
localized: this.localized
};
if (!annotatorUtil.validateThreadParams(threadParams)) {
var threadParams = this.getThreadParams(annotations, location, type);
if (!annotatorUtil.areThreadParamsValid(threadParams)) {
this.handleValidationError();

@@ -170,10 +157,12 @@ return thread;

// Set existing thread ID if created with annotations
if (annotations.length > 0) {
threadParams.threadID = annotations[0].threadID;
threadParams.threadNumber = annotations[0].threadNumber;
if (type === TYPES.point) {
thread = new ImagePointThread(threadParams);
}
thread = new ImagePointThread(threadParams);
this.addThreadToMap(thread);
if (!thread) {
this.emit(ANNOTATOR_EVENT.error, this.localized.loadError);
} else {
this.addThreadToMap(thread);
}
return thread;

@@ -180,0 +169,0 @@ }

5

package.json
{
"name": "box-annotations",
"version": "0.0.11",
"version": "0.1.0",
"description": "Box Annotations",

@@ -95,3 +95,3 @@ "author": "Box (https://www.box.com/)",

"build-lib": "./node_modules/.bin/cpx './src/{**/!(__tests__)/*,*}' lib && BABEL_ENV=npm NODE_ENV=production ./node_modules/.bin/babel lib -d lib",
"watch": "./node_modules/.bin/cpx './src/{**/!(__tests__)/*,*}' lib -w && BABEL_ENV=npm NODE_ENV=production ./node_modules/.bin/babel lib -d lib -s inline",
"watch": "./node_modules/.bin/cpx './src/{**/!(__tests__)/*,*}' lib -w -v && BABEL_ENV=npm NODE_ENV=production ./node_modules/.bin/babel lib -d lib -s inline",
"test": "NODE_ENV=test ./node_modules/.bin/karma start build/karma.conf.js",

@@ -107,2 +107,3 @@ "debug": "NODE_ENV=test ./node_modules/.bin/karma start build/karma.conf.js --no-single-run --auto-watch",

"github-release": "./node_modules/.bin/conventional-github-releaser",
"changelog": "./node_modules/.bin/conventional-changelog -i CHANGELOG.md --same-file",
"release": "yarn run clean && yarn run lint && yarn run test && yarn run prod",

@@ -109,0 +110,0 @@ "minor": "./build/release.sh -n && ./build/publish.sh",

93

README.md
[![Project Status](https://img.shields.io/badge/status-active-brightgreen.svg?style=flat-square)](http://opensource.box.com/badges/)
[![Styled With Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![build status](https://img.shields.io/travis/box/box-content-preview/master.svg?style=flat-square)](https://travis-ci.org/box/box-annotations)
[![version](https://img.shields.io/badge/version-v0.0.11-blue.svg?style=flat-square)](https://github.com/box/box-annotations)
[![version](https://img.shields.io/badge/version-v0.1.0-blue.svg?style=flat-square)](https://github.com/box/box-annotations)
[![npm version](https://img.shields.io/npm/v/box-ui-elements.svg?style=flat-square)](https://www.npmjs.com/package/box-ui-elements)

@@ -27,3 +27,3 @@

-----
Box Annotations can be used either by pulling from our [NPM package](https://www.npmjs.com/package/box-ui-elements).
Box Annotations can be used by pulling from our [NPM package](https://www.npmjs.com/package/box-annotations).

@@ -73,17 +73,17 @@ Initialization

| Parameter | Description |
| --- | --- |
| annotator | Viewer-specific annotator configurations object |
| apiHost | Host for Box API calls i.e. 'https://app.box.com/api' |
| fileId | Box file ID |
| token | A string auth token, see below for details on how to generate annotator tokens with appropriate scopes |
| container | DOM node or selector where Preview should be placed |
| file | File metadata object |
| file.id | String `Box_File` id |
| file.file_version.id | String `Box_File_Version` id |
| file.permissions | File permissions object, see below on how to scope permissions |
| modeButtons | Object containing a CSS selector and accessibility message for the annotation mode button, see parameters and options example above |
| Parameter | Default | Description |
| --- | --- | --- |
| annotator | | Viewer-specific annotator configurations object |
| apiHost | | Host for Box API calls e.g. 'https://app.box.com/api' |
| fileId | | Box file ID |
| token | | A string auth token, see below for details on how to generate annotator tokens with appropriate scopes |
| container | | DOM node or selector where Preview should be placed |
| file | | File metadata object |
| file.id | | String `Box_File` id |
| file.file_version.id | | String `Box_File_Version` id |
| file.permissions | | File permissions object, see below on how to scope permissions |
| Option | Default | Description |
| --- | --- | --- |
| modeButtons | | Object containing a CSS selector and accessibility message for the annotation mode button, see parameters and options example above |
| isMobile | false | Whether the user's browser is on a mobile device |

@@ -477,61 +477,2 @@ | hasTouch | false | Whether the mobile browser has touch enabled |

### Document and Presentation Annotations
The document and presentation viewers supports highlight comment, highlight only, draw and point annotations.
<!-- ## Screenshot
![Screenshot of document point annotations](../../../../images/doc_point.png)
![Screenshot of document highlight annotations](../../../../images/doc_highlight.png)
![Screenshot of document draw annotations](../../../../images/doc_draw.png) -->
#### Point Annotations
See BoxAnnotations annotation [thread methods/events](#annotation-thread) and [dialog methods/events](#annotation-dialog).
#### Highlight Only and Highlight Comment Annotations
The following methods are available for only highlight annotation threads.
| Method Name | Explanation | Method Parameters |
| --- | --- | --- |
| cancelFirstComment | Cancels the first comment in the thread | ||
| isOnHighlight | Checks if Mouse event is either over the text highlight or the annotations dialog | {Event} mouse event ||
| activateDialog | Sets thread state to hover or active-hover accordingly and triggers dialog to remain open | ||
The following methods are available for only highlight annotation dialogs.
| Method Name | Explanation | Method Parameters |
| --- | --- | --- |
| toggleHighlightDialogs | Toggles between the highlight annotations buttons dialog and the highlight comments dialog. Dialogs are toggled based on whether the highlight annotation has text comments or not | ||
| toggleHighlightIcon | Toggles the highlight icon color to a darker yellow based on if the user is hovering over the highlight to activate it | {string} RGBA fill style for highlight ||
#### Draw Annotations
The following methods are available for the annotation threads.
| Method Name | Explanation | Method Parameters |
| --- | --- | --- |
| hasPageChanged | Determine if the drawing in progress if a drawing goes to a different page | {Object} current location information ||
The following methods are available for the annotation dialogs.
| Method Name | Explanation | Method Parameters |
| --- | --- | --- |
| isVisible | Returns whether or not the dialog is able to be seen | ||
### Image Annotations
The image and multi-page image viewers support point annotations. The creation of annotations is disabled on rotated images.
<!-- ## Screenshot
![Screenshot of image point annotations](../../../../images/image_point.png) -->
#### Point Annotations
See BoxAnnotations annotation [thread methods/events](#annotation-thread) and [dialog methods/events](#annotation-dialog).
Development Setup

@@ -587,7 +528,7 @@ -----------------

For general Box Platform, API, and UI Element questions, please visit our [developer forum](https://community.box.com/t5/Developer-Forum/bd-p/DeveloperForum) or contact us via one of our [available support channels](https://community.box.com/t5/Community/ct-p/English).
For general Box Platform, API, Elements, and Annotations questions, please visit our [developer forum](https://community.box.com/t5/Developer-Forum/bd-p/DeveloperForum) or contact us via one of our [available support channels](https://community.box.com/t5/Community/ct-p/English).
Copyright and License
---------------------
Copyright 2016-2017 Box, Inc. All Rights Reserved.
Copyright 2016-present Box, Inc. All Rights Reserved.

@@ -598,3 +539,3 @@ Licensed under the Box Software License Agreement v.20170516.

https://github.com/box/box-content-preview/blob/master/LICENSE
https://developer.box.com/docs/box-sdk-license

@@ -601,0 +542,0 @@ Unless required by applicable law or agreed to in writing, software

lib/doc/DocPointAnnotator.js
lib/Annotator.scss

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc