From 88fe27529bf8b3db8285e5441a2541890e429486 Mon Sep 17 00:00:00 2001 From: Mingze Xiao Date: Tue, 24 Mar 2020 15:27:01 -0700 Subject: [PATCH 1/9] feat(annotations): Add region comment button in toolbar --- src/i18n/en-US.properties | 2 + src/lib/AnnotationControls.js | 63 +++++++++++++++++++++ src/lib/Controls.scss | 25 +++++++- src/lib/Preview.js | 3 + src/lib/icons/annotation_region_comment.svg | 3 + src/lib/icons/icons.js | 2 + src/lib/viewers/doc/DocBaseViewer.js | 23 +++++++- src/lib/viewers/image/ImageBaseViewer.js | 13 +++++ src/lib/viewers/image/ImageViewer.js | 6 ++ src/lib/viewers/image/MultiImageViewer.js | 6 ++ 10 files changed, 143 insertions(+), 3 deletions(-) create mode 100644 src/lib/AnnotationControls.js create mode 100644 src/lib/icons/annotation_region_comment.svg diff --git a/src/i18n/en-US.properties b/src/i18n/en-US.properties index fe8a6ea56..8a494b034 100644 --- a/src/i18n/en-US.properties +++ b/src/i18n/en-US.properties @@ -10,6 +10,8 @@ zoom_out=Zoom out enter_fullscreen=Enter fullscreen # Button tooltip for exiting a full screen preview exit_fullscreen=Exit fullscreen +# Button tooltip for annotation region comment +region_comment=Comment on Region # Button tooltip for going to the previous page in a preview previous_page=Previous page # Input tooltip for navigating to a specific page in a preview diff --git a/src/lib/AnnotationControls.js b/src/lib/AnnotationControls.js new file mode 100644 index 000000000..4d7f930e6 --- /dev/null +++ b/src/lib/AnnotationControls.js @@ -0,0 +1,63 @@ +import noop from 'lodash/noop'; +import { ICON_REGION_COMMENT } from './icons/icons'; +import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from './Controls'; + +const CLASS_ANNOTATIONS_GROUP = 'bp-annotations-group'; +const CLASS_REGION_COMMENT_BUTTON = 'bp-region-comment-btn'; +const CLASS_BUTTON_ACTIVE = 'active'; + +class AnnotationControls { + /** @property {Controls} - Controls object */ + controls; + + /** @property {Boolean} - Region comment mode active state */ + isRegionCommentActive = false; + + /** @property {HTMLElement} - Region comment button element */ + regionCommentButtonElement; + + /** + * [constructor] + * + * @param {Controls} controls - Viewer controls + * @return {AnnotationControls} Instance of AnnotationControls + */ + constructor(controls) { + if (!controls || !(controls instanceof Controls)) { + throw Error('controls must be an instance of Controls'); + } + + this.controls = controls; + } + + regionCommentClickHandler = onRegionCommentClick => event => { + this.isRegionCommentActive = !this.isRegionCommentActive; + if (this.isRegionCommentActive) { + this.regionCommentButtonElement.classList.add(CLASS_BUTTON_ACTIVE); + } else { + this.regionCommentButtonElement.classList.remove(CLASS_BUTTON_ACTIVE); + } + + onRegionCommentClick({ isRegionCommentActive: this.isRegionCommentActive, event }); + }; + + /** + * Initialize the annotation controls with options. + * + * @param {Function} [options.onRegionCommentClick] - Callback when region comment button is clicked + * @return {void} + */ + init({ onRegionCommentClick = noop } = {}) { + const groupElement = this.controls.addGroup(CLASS_ANNOTATIONS_GROUP); + this.regionCommentButtonElement = this.controls.add( + __('region_comment'), + this.regionCommentClickHandler(onRegionCommentClick), + `${CLASS_BOX_CONTROLS_GROUP_BUTTON} ${CLASS_REGION_COMMENT_BUTTON}`, + ICON_REGION_COMMENT, + 'button', + groupElement, + ); + } +} + +export default AnnotationControls; diff --git a/src/lib/Controls.scss b/src/lib/Controls.scss index b5ea4a18e..0d520934a 100644 --- a/src/lib/Controls.scss +++ b/src/lib/Controls.scss @@ -11,7 +11,7 @@ position: relative; left: -50%; display: flex; - background: fade-out($twos, .05); + background: fade-out($black, .2); border-radius: 3px; opacity: 0; transition: opacity .5s; @@ -180,3 +180,26 @@ margin-left: 4px; } } + +.bp-annotations-group { + padding: 0 4px; + border-left: 1px solid $twos; +} + +.bp-region-comment-btn { + width: 32px; + height: 32px; + border-radius: 4px; + + svg { + fill: $white; + } + + &.active { + background-color: $white; + + svg { + fill: $black; + } + } +} diff --git a/src/lib/Preview.js b/src/lib/Preview.js index 43194b265..3ec5d27e6 100644 --- a/src/lib/Preview.js +++ b/src/lib/Preview.js @@ -982,6 +982,9 @@ class Preview extends EventEmitter { // Add the response interceptor to the preview instance this.options.responseInterceptor = options.responseInterceptor; + // Option to enable use of annotations v4 + this.options.enableAnnotations = options.enableAnnotations || false; + // Disable or enable viewers based on viewer options Object.keys(this.options.viewers).forEach(viewerName => { const isDisabled = this.options.viewers[viewerName].disabled; diff --git a/src/lib/icons/annotation_region_comment.svg b/src/lib/icons/annotation_region_comment.svg new file mode 100644 index 000000000..ebaa2fbe0 --- /dev/null +++ b/src/lib/icons/annotation_region_comment.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/lib/icons/icons.js b/src/lib/icons/icons.js index 8a1c67198..151c20c98 100644 --- a/src/lib/icons/icons.js +++ b/src/lib/icons/icons.js @@ -6,6 +6,7 @@ import FULLSCREEN_OUT from './full_screen_out_24px.svg'; import ROTATE_LEFT from './rotate_left_24px.svg'; import ZOOM_IN from './zoom_in.svg'; import ZOOM_OUT from './zoom_out.svg'; +import REGION_COMMENT from './annotation_region_comment.svg'; import ARROW_LEFT from './arrow_left_24px.svg'; import ARROW_RIGHT from './arrow_right_24px.svg'; import CHECK_MARK from './checkmark_24px.svg'; @@ -55,6 +56,7 @@ export const ICON_FULLSCREEN_OUT = FULLSCREEN_OUT; export const ICON_ROTATE_LEFT = ROTATE_LEFT; export const ICON_ZOOM_IN = ZOOM_IN; export const ICON_ZOOM_OUT = ZOOM_OUT; +export const ICON_REGION_COMMENT = REGION_COMMENT; export const ICON_ARROW_LEFT = ARROW_LEFT; export const ICON_ARROW_RIGHT = ARROW_RIGHT; export const ICON_CHECK_MARK = CHECK_MARK; diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index 4e090af52..81b7cfe59 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -1,4 +1,5 @@ import throttle from 'lodash/throttle'; +import AnnotationControls from '../../AnnotationControls'; import BaseViewer from '../BaseViewer'; import Browser from '../../Browser'; import Controls from '../../Controls'; @@ -101,6 +102,7 @@ class DocBaseViewer extends BaseViewer { this.toggleThumbnails = this.toggleThumbnails.bind(this); this.zoomIn = this.zoomIn.bind(this); this.zoomOut = this.zoomOut.bind(this); + this.regionCommentClickHandler = this.regionCommentClickHandler.bind(this); } /** @@ -1009,6 +1011,9 @@ class DocBaseViewer extends BaseViewer { this.controls = new Controls(this.containerEl); this.pageControls = new PageControls(this.controls, this.docEl); this.zoomControls = new ZoomControls(this.controls); + if (this.options.enableAnnotations) { + this.annotationControls = new AnnotationControls(this.controls); + } this.pageControls.addListener('pagechange', this.setPage); this.bindControlListeners(); } @@ -1072,6 +1077,8 @@ class DocBaseViewer extends BaseViewer { this.controls.add(__('toggle_findbar'), () => this.findBar.toggle(), 'bp-toggle-findbar-icon', ICON_SEARCH); } + this.pageControls.add(this.pdfViewer.currentPageNumber, this.pdfViewer.pagesCount); + this.zoomControls.init(this.pdfViewer.currentScale, { maxZoom: MAX_SCALE, minZoom: MIN_SCALE, @@ -1081,8 +1088,6 @@ class DocBaseViewer extends BaseViewer { onZoomOut: this.zoomOut, }); - this.pageControls.add(this.pdfViewer.currentPageNumber, this.pdfViewer.pagesCount); - this.controls.add( __('enter_fullscreen'), this.toggleFullscreen, @@ -1090,8 +1095,22 @@ class DocBaseViewer extends BaseViewer { ICON_FULLSCREEN_IN, ); this.controls.add(__('exit_fullscreen'), this.toggleFullscreen, 'bp-exit-fullscreen-icon', ICON_FULLSCREEN_OUT); + + if (this.options.enableAnnotations) { + this.annotationControls.init({ + onRegionCommentClick: this.regionCommentClickHandler, + }); + } } + /** + * Handler for annotation toolbar region comment button click event. + * + * @private + * @return {void} + */ + regionCommentClickHandler() {} + /** * Handler for 'pagesinit' event. * diff --git a/src/lib/viewers/image/ImageBaseViewer.js b/src/lib/viewers/image/ImageBaseViewer.js index 5100f8aeb..51c952156 100644 --- a/src/lib/viewers/image/ImageBaseViewer.js +++ b/src/lib/viewers/image/ImageBaseViewer.js @@ -1,3 +1,4 @@ +import AnnotationControls from '../../AnnotationControls'; import BaseViewer from '../BaseViewer'; import Browser from '../../Browser'; import Controls from '../../Controls'; @@ -31,6 +32,7 @@ class ImageBaseViewer extends BaseViewer { this.handleMouseUp = this.handleMouseUp.bind(this); this.cancelDragEvent = this.cancelDragEvent.bind(this); this.finishLoading = this.finishLoading.bind(this); + this.regionCommentClickHandler = this.regionCommentClickHandler.bind(this); if (this.isMobile) { if (Browser.isIOS()) { @@ -201,8 +203,19 @@ class ImageBaseViewer extends BaseViewer { this.controls = new Controls(this.containerEl); this.zoomControls = new ZoomControls(this.controls); this.zoomControls.init(this.scale, { onZoomIn: this.zoomIn, onZoomOut: this.zoomOut }); + if (this.options.enableAnnotations) { + this.annotationControls = new AnnotationControls(this.controls); + } } + /** + * Handler for annotation toolbar region comment button click event. + * + * @private + * @return {void} + */ + regionCommentClickHandler() {} + /** * Sets the original image width and height on the img element. Can be removed when * naturalHeight and naturalWidth attributes work correctly in IE 11. diff --git a/src/lib/viewers/image/ImageViewer.js b/src/lib/viewers/image/ImageViewer.js index 263a3310f..2efe3cdf0 100644 --- a/src/lib/viewers/image/ImageViewer.js +++ b/src/lib/viewers/image/ImageViewer.js @@ -285,6 +285,12 @@ class ImageViewer extends ImageBaseViewer { ICON_FULLSCREEN_IN, ); this.controls.add(__('exit_fullscreen'), this.toggleFullscreen, 'bp-exit-fullscreen-icon', ICON_FULLSCREEN_OUT); + + if (this.options.enableAnnotations) { + this.annotationControls.init({ + onRegionCommentClick: this.regionCommentClickHandler, + }); + } } /** diff --git a/src/lib/viewers/image/MultiImageViewer.js b/src/lib/viewers/image/MultiImageViewer.js index 078ec48f1..dd8fcea08 100644 --- a/src/lib/viewers/image/MultiImageViewer.js +++ b/src/lib/viewers/image/MultiImageViewer.js @@ -282,6 +282,12 @@ class MultiImageViewer extends ImageBaseViewer { ICON_FULLSCREEN_IN, ); this.controls.add(__('exit_fullscreen'), this.toggleFullscreen, 'bp-exit-fullscreen-icon', ICON_FULLSCREEN_OUT); + + if (this.options.enableAnnotations) { + this.annotationControls.init({ + onRegionCommentClick: this.regionCommentClickHandler, + }); + } } /** From 7bbd0019c602b656e4d12bb45b1b743c3fe67033 Mon Sep 17 00:00:00 2001 From: Mingze Xiao Date: Tue, 24 Mar 2020 15:46:48 -0700 Subject: [PATCH 2/9] feat(annotations): Correct styles --- src/lib/Controls.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/Controls.scss b/src/lib/Controls.scss index 0d520934a..9e4620d8a 100644 --- a/src/lib/Controls.scss +++ b/src/lib/Controls.scss @@ -182,7 +182,7 @@ } .bp-annotations-group { - padding: 0 4px; + padding: 0 4px 0 8px; border-left: 1px solid $twos; } From 0ddb8d616528fbe16d3e6723c577856f084809ca Mon Sep 17 00:00:00 2001 From: Mingze Xiao Date: Tue, 24 Mar 2020 16:37:33 -0700 Subject: [PATCH 3/9] feat(annotations): Address comments --- src/lib/AnnotationControls.js | 4 ++-- src/lib/Preview.js | 8 ++++---- src/lib/viewers/doc/DocBaseViewer.js | 8 ++++---- src/lib/viewers/image/ImageBaseViewer.js | 13 ------------- src/lib/viewers/image/ImageViewer.js | 6 ------ src/lib/viewers/image/MultiImageViewer.js | 6 ------ 6 files changed, 10 insertions(+), 35 deletions(-) diff --git a/src/lib/AnnotationControls.js b/src/lib/AnnotationControls.js index 4d7f930e6..3c71a94ba 100644 --- a/src/lib/AnnotationControls.js +++ b/src/lib/AnnotationControls.js @@ -30,7 +30,7 @@ class AnnotationControls { this.controls = controls; } - regionCommentClickHandler = onRegionCommentClick => event => { + handleRegionCommentClick = onRegionCommentClick => event => { this.isRegionCommentActive = !this.isRegionCommentActive; if (this.isRegionCommentActive) { this.regionCommentButtonElement.classList.add(CLASS_BUTTON_ACTIVE); @@ -51,7 +51,7 @@ class AnnotationControls { const groupElement = this.controls.addGroup(CLASS_ANNOTATIONS_GROUP); this.regionCommentButtonElement = this.controls.add( __('region_comment'), - this.regionCommentClickHandler(onRegionCommentClick), + this.handleRegionCommentClick(onRegionCommentClick), `${CLASS_BOX_CONTROLS_GROUP_BUTTON} ${CLASS_REGION_COMMENT_BUTTON}`, ICON_REGION_COMMENT, 'button', diff --git a/src/lib/Preview.js b/src/lib/Preview.js index 3ec5d27e6..1197f184b 100644 --- a/src/lib/Preview.js +++ b/src/lib/Preview.js @@ -921,9 +921,12 @@ class Preview extends EventEmitter { // Whether download button should be shown this.options.showDownload = !!options.showDownload; - // Whether annotations and annotation controls should be shown + // Whether annotations v2 should be shown this.options.showAnnotations = !!options.showAnnotations; + // Whether annotations v4 buttons should be shown in toolbar + this.options.showAnnotationsControls = !!options.showAnnotationsControls; + // Enable or disable hotkeys this.options.useHotkeys = options.useHotkeys !== false; @@ -982,9 +985,6 @@ class Preview extends EventEmitter { // Add the response interceptor to the preview instance this.options.responseInterceptor = options.responseInterceptor; - // Option to enable use of annotations v4 - this.options.enableAnnotations = options.enableAnnotations || false; - // Disable or enable viewers based on viewer options Object.keys(this.options.viewers).forEach(viewerName => { const isDisabled = this.options.viewers[viewerName].disabled; diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index 81b7cfe59..e17bdee8d 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -1011,7 +1011,7 @@ class DocBaseViewer extends BaseViewer { this.controls = new Controls(this.containerEl); this.pageControls = new PageControls(this.controls, this.docEl); this.zoomControls = new ZoomControls(this.controls); - if (this.options.enableAnnotations) { + if (this.options.showAnnotationsControls) { this.annotationControls = new AnnotationControls(this.controls); } this.pageControls.addListener('pagechange', this.setPage); @@ -1077,8 +1077,6 @@ class DocBaseViewer extends BaseViewer { this.controls.add(__('toggle_findbar'), () => this.findBar.toggle(), 'bp-toggle-findbar-icon', ICON_SEARCH); } - this.pageControls.add(this.pdfViewer.currentPageNumber, this.pdfViewer.pagesCount); - this.zoomControls.init(this.pdfViewer.currentScale, { maxZoom: MAX_SCALE, minZoom: MIN_SCALE, @@ -1088,6 +1086,8 @@ class DocBaseViewer extends BaseViewer { onZoomOut: this.zoomOut, }); + this.pageControls.add(this.pdfViewer.currentPageNumber, this.pdfViewer.pagesCount); + this.controls.add( __('enter_fullscreen'), this.toggleFullscreen, @@ -1096,7 +1096,7 @@ class DocBaseViewer extends BaseViewer { ); this.controls.add(__('exit_fullscreen'), this.toggleFullscreen, 'bp-exit-fullscreen-icon', ICON_FULLSCREEN_OUT); - if (this.options.enableAnnotations) { + if (this.options.showAnnotationsControls) { this.annotationControls.init({ onRegionCommentClick: this.regionCommentClickHandler, }); diff --git a/src/lib/viewers/image/ImageBaseViewer.js b/src/lib/viewers/image/ImageBaseViewer.js index 51c952156..5100f8aeb 100644 --- a/src/lib/viewers/image/ImageBaseViewer.js +++ b/src/lib/viewers/image/ImageBaseViewer.js @@ -1,4 +1,3 @@ -import AnnotationControls from '../../AnnotationControls'; import BaseViewer from '../BaseViewer'; import Browser from '../../Browser'; import Controls from '../../Controls'; @@ -32,7 +31,6 @@ class ImageBaseViewer extends BaseViewer { this.handleMouseUp = this.handleMouseUp.bind(this); this.cancelDragEvent = this.cancelDragEvent.bind(this); this.finishLoading = this.finishLoading.bind(this); - this.regionCommentClickHandler = this.regionCommentClickHandler.bind(this); if (this.isMobile) { if (Browser.isIOS()) { @@ -203,19 +201,8 @@ class ImageBaseViewer extends BaseViewer { this.controls = new Controls(this.containerEl); this.zoomControls = new ZoomControls(this.controls); this.zoomControls.init(this.scale, { onZoomIn: this.zoomIn, onZoomOut: this.zoomOut }); - if (this.options.enableAnnotations) { - this.annotationControls = new AnnotationControls(this.controls); - } } - /** - * Handler for annotation toolbar region comment button click event. - * - * @private - * @return {void} - */ - regionCommentClickHandler() {} - /** * Sets the original image width and height on the img element. Can be removed when * naturalHeight and naturalWidth attributes work correctly in IE 11. diff --git a/src/lib/viewers/image/ImageViewer.js b/src/lib/viewers/image/ImageViewer.js index 2efe3cdf0..263a3310f 100644 --- a/src/lib/viewers/image/ImageViewer.js +++ b/src/lib/viewers/image/ImageViewer.js @@ -285,12 +285,6 @@ class ImageViewer extends ImageBaseViewer { ICON_FULLSCREEN_IN, ); this.controls.add(__('exit_fullscreen'), this.toggleFullscreen, 'bp-exit-fullscreen-icon', ICON_FULLSCREEN_OUT); - - if (this.options.enableAnnotations) { - this.annotationControls.init({ - onRegionCommentClick: this.regionCommentClickHandler, - }); - } } /** diff --git a/src/lib/viewers/image/MultiImageViewer.js b/src/lib/viewers/image/MultiImageViewer.js index dd8fcea08..078ec48f1 100644 --- a/src/lib/viewers/image/MultiImageViewer.js +++ b/src/lib/viewers/image/MultiImageViewer.js @@ -282,12 +282,6 @@ class MultiImageViewer extends ImageBaseViewer { ICON_FULLSCREEN_IN, ); this.controls.add(__('exit_fullscreen'), this.toggleFullscreen, 'bp-exit-fullscreen-icon', ICON_FULLSCREEN_OUT); - - if (this.options.enableAnnotations) { - this.annotationControls.init({ - onRegionCommentClick: this.regionCommentClickHandler, - }); - } } /** From 1bddbee29fb12c79d3f051a33c7c51463558b576 Mon Sep 17 00:00:00 2001 From: Mingze Xiao Date: Tue, 24 Mar 2020 16:53:26 -0700 Subject: [PATCH 4/9] feat(annotations): Rename variables --- src/lib/AnnotationControls.js | 28 ++++++++++++++-------------- src/lib/Controls.scss | 2 +- src/lib/viewers/doc/DocBaseViewer.js | 6 +++--- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/lib/AnnotationControls.js b/src/lib/AnnotationControls.js index 3c71a94ba..301b1d8d1 100644 --- a/src/lib/AnnotationControls.js +++ b/src/lib/AnnotationControls.js @@ -3,7 +3,7 @@ import { ICON_REGION_COMMENT } from './icons/icons'; import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from './Controls'; const CLASS_ANNOTATIONS_GROUP = 'bp-annotations-group'; -const CLASS_REGION_COMMENT_BUTTON = 'bp-region-comment-btn'; +const CLASS_REGION_BUTTON = 'bp-region-btn'; const CLASS_BUTTON_ACTIVE = 'active'; class AnnotationControls { @@ -11,10 +11,10 @@ class AnnotationControls { controls; /** @property {Boolean} - Region comment mode active state */ - isRegionCommentActive = false; + isRegionActive = false; /** @property {HTMLElement} - Region comment button element */ - regionCommentButtonElement; + regionButtonElement; /** * [constructor] @@ -30,29 +30,29 @@ class AnnotationControls { this.controls = controls; } - handleRegionCommentClick = onRegionCommentClick => event => { - this.isRegionCommentActive = !this.isRegionCommentActive; - if (this.isRegionCommentActive) { - this.regionCommentButtonElement.classList.add(CLASS_BUTTON_ACTIVE); + handleRegionClick = onRegionClick => event => { + this.isRegionActive = !this.isRegionActive; + if (this.isRegionActive) { + this.regionButtonElement.classList.add(CLASS_BUTTON_ACTIVE); } else { - this.regionCommentButtonElement.classList.remove(CLASS_BUTTON_ACTIVE); + this.regionButtonElement.classList.remove(CLASS_BUTTON_ACTIVE); } - onRegionCommentClick({ isRegionCommentActive: this.isRegionCommentActive, event }); + onRegionClick({ isRegionActive: this.isRegionActive, event }); }; /** * Initialize the annotation controls with options. * - * @param {Function} [options.onRegionCommentClick] - Callback when region comment button is clicked + * @param {Function} [options.onRegionClick] - Callback when region comment button is clicked * @return {void} */ - init({ onRegionCommentClick = noop } = {}) { + init({ onRegionClick = noop } = {}) { const groupElement = this.controls.addGroup(CLASS_ANNOTATIONS_GROUP); - this.regionCommentButtonElement = this.controls.add( + this.regionButtonElement = this.controls.add( __('region_comment'), - this.handleRegionCommentClick(onRegionCommentClick), - `${CLASS_BOX_CONTROLS_GROUP_BUTTON} ${CLASS_REGION_COMMENT_BUTTON}`, + this.handleRegionClick(onRegionClick), + `${CLASS_BOX_CONTROLS_GROUP_BUTTON} ${CLASS_REGION_BUTTON}`, ICON_REGION_COMMENT, 'button', groupElement, diff --git a/src/lib/Controls.scss b/src/lib/Controls.scss index 9e4620d8a..a59ad374f 100644 --- a/src/lib/Controls.scss +++ b/src/lib/Controls.scss @@ -186,7 +186,7 @@ border-left: 1px solid $twos; } -.bp-region-comment-btn { +.bp-region-btn { width: 32px; height: 32px; border-radius: 4px; diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index e17bdee8d..d4caaed7a 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -102,7 +102,7 @@ class DocBaseViewer extends BaseViewer { this.toggleThumbnails = this.toggleThumbnails.bind(this); this.zoomIn = this.zoomIn.bind(this); this.zoomOut = this.zoomOut.bind(this); - this.regionCommentClickHandler = this.regionCommentClickHandler.bind(this); + this.regionClickHandler = this.regionClickHandler.bind(this); } /** @@ -1098,7 +1098,7 @@ class DocBaseViewer extends BaseViewer { if (this.options.showAnnotationsControls) { this.annotationControls.init({ - onRegionCommentClick: this.regionCommentClickHandler, + onRegionClick: this.regionClickHandler, }); } } @@ -1109,7 +1109,7 @@ class DocBaseViewer extends BaseViewer { * @private * @return {void} */ - regionCommentClickHandler() {} + regionClickHandler() {} /** * Handler for 'pagesinit' event. From 5b7bcc8ba84476aa41abb2b3a779f2a2d714618f Mon Sep 17 00:00:00 2001 From: Mingze Xiao Date: Wed, 25 Mar 2020 15:42:37 -0700 Subject: [PATCH 5/9] feat(annotations): Add tests, SUIT style, and typescript --- src/lib/AnnotationControls.scss | 22 +++++ ...ationControls.js => AnnotationControls.ts} | 37 ++++--- src/lib/Controls.scss | 30 ------ src/lib/Preview.scss | 2 + src/lib/ZoomControls.js | 2 +- src/lib/ZoomControls.scss | 6 ++ .../__tests__/AnnotationControls-test.html | 1 + src/lib/__tests__/AnnotationControls-test.js | 99 +++++++++++++++++++ src/lib/__tests__/ZoomControls-test.js | 4 +- 9 files changed, 157 insertions(+), 46 deletions(-) create mode 100644 src/lib/AnnotationControls.scss rename src/lib/{AnnotationControls.js => AnnotationControls.ts} (61%) create mode 100644 src/lib/ZoomControls.scss create mode 100644 src/lib/__tests__/AnnotationControls-test.html create mode 100644 src/lib/__tests__/AnnotationControls-test.js diff --git a/src/lib/AnnotationControls.scss b/src/lib/AnnotationControls.scss new file mode 100644 index 000000000..d95b66421 --- /dev/null +++ b/src/lib/AnnotationControls.scss @@ -0,0 +1,22 @@ +.bp-AnnotationControls-group { + padding: 0 4px 0 8px; + border-left: 1px solid $twos; + + & .bp-AnnotationControls-regionBtn { + width: 32px; + height: 32px; + border-radius: 4px; + + svg { + fill: $white; + } + + &.is-active { + background-color: $white; + + svg { + fill: $black; + } + } + } +} diff --git a/src/lib/AnnotationControls.js b/src/lib/AnnotationControls.ts similarity index 61% rename from src/lib/AnnotationControls.js rename to src/lib/AnnotationControls.ts index 301b1d8d1..3d388a76c 100644 --- a/src/lib/AnnotationControls.js +++ b/src/lib/AnnotationControls.ts @@ -2,19 +2,23 @@ import noop from 'lodash/noop'; import { ICON_REGION_COMMENT } from './icons/icons'; import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from './Controls'; -const CLASS_ANNOTATIONS_GROUP = 'bp-annotations-group'; -const CLASS_REGION_BUTTON = 'bp-region-btn'; -const CLASS_BUTTON_ACTIVE = 'active'; +export const CLASS_ANNOTATIONS_GROUP = 'bp-AnnotationControls-group'; +export const CLASS_REGION_BUTTON = 'bp-AnnotationControls-regionBtn'; +export const CLASS_BUTTON_ACTIVE = 'is-active'; -class AnnotationControls { +export type Options = { + onRegionClick?: Function; +}; + +export default class AnnotationControls { /** @property {Controls} - Controls object */ - controls; + private controls: Controls; - /** @property {Boolean} - Region comment mode active state */ - isRegionActive = false; + /** @property {bool} - Region comment mode active state */ + private isRegionActive = false; /** @property {HTMLElement} - Region comment button element */ - regionButtonElement; + private regionButtonElement: HTMLElement = new HTMLButtonElement(); /** * [constructor] @@ -22,7 +26,7 @@ class AnnotationControls { * @param {Controls} controls - Viewer controls * @return {AnnotationControls} Instance of AnnotationControls */ - constructor(controls) { + constructor(controls: Controls) { if (!controls || !(controls instanceof Controls)) { throw Error('controls must be an instance of Controls'); } @@ -30,7 +34,14 @@ class AnnotationControls { this.controls = controls; } - handleRegionClick = onRegionClick => event => { + /** + * Region comment button click handler + * + * @param {Function} onRegionClick - region click handler in options + * @param {MouseEvent} event - mouse event + * @return {void} + */ + private handleRegionClick = (onRegionClick: Function) => (event: MouseEvent): void => { this.isRegionActive = !this.isRegionActive; if (this.isRegionActive) { this.regionButtonElement.classList.add(CLASS_BUTTON_ACTIVE); @@ -47,9 +58,11 @@ class AnnotationControls { * @param {Function} [options.onRegionClick] - Callback when region comment button is clicked * @return {void} */ - init({ onRegionClick = noop } = {}) { + public init({ onRegionClick = noop }: Options = {}): void { const groupElement = this.controls.addGroup(CLASS_ANNOTATIONS_GROUP); this.regionButtonElement = this.controls.add( + // eslint-disable-next-line @typescript-eslint/ban-ts-ignore + // @ts-ignore __('region_comment'), this.handleRegionClick(onRegionClick), `${CLASS_BOX_CONTROLS_GROUP_BUTTON} ${CLASS_REGION_BUTTON}`, @@ -59,5 +72,3 @@ class AnnotationControls { ); } } - -export default AnnotationControls; diff --git a/src/lib/Controls.scss b/src/lib/Controls.scss index a59ad374f..e43fd27eb 100644 --- a/src/lib/Controls.scss +++ b/src/lib/Controls.scss @@ -159,13 +159,6 @@ } } -.bp-zoom-current-scale { - min-width: 48px; - color: $white; - font-size: 14px; - text-align: center; -} - .bp-controls-group { display: flex; align-items: center; @@ -180,26 +173,3 @@ margin-left: 4px; } } - -.bp-annotations-group { - padding: 0 4px 0 8px; - border-left: 1px solid $twos; -} - -.bp-region-btn { - width: 32px; - height: 32px; - border-radius: 4px; - - svg { - fill: $white; - } - - &.active { - background-color: $white; - - svg { - fill: $black; - } - } -} diff --git a/src/lib/Preview.scss b/src/lib/Preview.scss index 6df3fe019..6c5976b02 100644 --- a/src/lib/Preview.scss +++ b/src/lib/Preview.scss @@ -1,6 +1,8 @@ @import 'common'; @import 'loading'; @import 'navigation'; +@import './AnnotationControls'; @import './Controls'; @import './ProgressBar'; @import './VirtualScroller'; +@import './ZoomControls'; diff --git a/src/lib/ZoomControls.js b/src/lib/ZoomControls.js index 05ac6c42a..16c86cdc0 100644 --- a/src/lib/ZoomControls.js +++ b/src/lib/ZoomControls.js @@ -3,7 +3,7 @@ import noop from 'lodash/noop'; import { ICON_ZOOM_IN, ICON_ZOOM_OUT } from './icons/icons'; import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from './Controls'; -const CLASS_ZOOM_CURRENT_SCALE = 'bp-zoom-current-scale'; +const CLASS_ZOOM_CURRENT_SCALE = 'bp-ZoomControls-currentScale'; const CLASS_ZOOM_CURRENT_SCALE_VALUE = 'bp-zoom-current-scale-value'; const CLASS_ZOOM_IN_BUTTON = 'bp-zoom-in-btn'; const CLASS_ZOOM_OUT_BUTTON = 'bp-zoom-out-btn'; diff --git a/src/lib/ZoomControls.scss b/src/lib/ZoomControls.scss new file mode 100644 index 000000000..9d43b41fe --- /dev/null +++ b/src/lib/ZoomControls.scss @@ -0,0 +1,6 @@ +.bp-ZoomControls-currentScale { + min-width: 48px; + color: $white; + font-size: 14px; + text-align: center; +} diff --git a/src/lib/__tests__/AnnotationControls-test.html b/src/lib/__tests__/AnnotationControls-test.html new file mode 100644 index 000000000..bb1d1e682 --- /dev/null +++ b/src/lib/__tests__/AnnotationControls-test.html @@ -0,0 +1 @@ +
diff --git a/src/lib/__tests__/AnnotationControls-test.js b/src/lib/__tests__/AnnotationControls-test.js new file mode 100644 index 000000000..b097650ec --- /dev/null +++ b/src/lib/__tests__/AnnotationControls-test.js @@ -0,0 +1,99 @@ +/* eslint-disable no-unused-expressions */ +import AnnotationControls, { CLASS_REGION_BUTTON, CLASS_BUTTON_ACTIVE } from '../AnnotationControls'; +import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from '../Controls'; +import { ICON_REGION_COMMENT } from '../icons/icons'; + +let annotationControls; +let stubs = {}; + +const sandbox = sinon.sandbox.create(); + +describe('lib/AnnotationControls', () => { + before(() => { + fixture.setBase('src/lib'); + }); + + beforeEach(() => { + fixture.load('__tests__/AnnotationControls-test.html'); + const controls = new Controls(document.getElementById('test-annotation-controls-container')); + annotationControls = new AnnotationControls(controls); + stubs.onRegionClick = sandbox.stub(); + }); + + afterEach(() => { + fixture.cleanup(); + sandbox.verifyAndRestore(); + + annotationControls = null; + stubs = {}; + }); + + describe('constructor()', () => { + it('should create the correct DOM structure', () => { + expect(annotationControls.controls).not.to.be.undefined; + }); + + it('should throw an exception if controls is not provided', () => { + expect(() => new AnnotationControls()).to.throw(Error, 'controls must be an instance of Controls'); + }); + }); + + describe('init()', () => { + beforeEach(() => { + stubs.add = sandbox.stub(annotationControls.controls, 'add'); + stubs.regionHandler = sandbox.stub(); + sandbox.stub(annotationControls, 'handleRegionClick').returns(stubs.regionHandler); + }); + + it('should add the controls', () => { + annotationControls.init({ onRegionClick: stubs.onRegionClick }); + + expect(stubs.add).to.be.calledWith( + __('region_comment'), + stubs.regionHandler, + `${CLASS_BOX_CONTROLS_GROUP_BUTTON} ${CLASS_REGION_BUTTON}`, + ICON_REGION_COMMENT, + 'button', + sinon.match.any, + ); + }); + }); + + describe('handleRegionClick()', () => { + beforeEach(() => { + stubs.event = sandbox.stub({}); + stubs.classListAdd = sandbox.stub(); + stubs.classListRemove = sandbox.stub(); + stubs.add = sandbox.stub(annotationControls.controls, 'add').returns({ + classList: { + add: stubs.classListAdd, + remove: stubs.classListRemove, + }, + }); + }); + + it('should activate region button then deactivate', () => { + annotationControls.init({ onRegionClick: stubs.onRegionClick }); + + expect(annotationControls.isRegionActive).to.be.false; + + annotationControls.handleRegionClick(stubs.onRegionClick)(stubs.event); + expect(annotationControls.isRegionActive).to.be.true; + expect(stubs.classListAdd).to.be.calledWith(CLASS_BUTTON_ACTIVE); + + annotationControls.handleRegionClick(stubs.onRegionClick)(stubs.event); + expect(annotationControls.isRegionActive).to.be.false; + expect(stubs.classListRemove).to.be.calledWith(CLASS_BUTTON_ACTIVE); + }); + + it('should call onRegionClick', () => { + annotationControls.init({ onRegionClick: stubs.onRegionClick }); + annotationControls.handleRegionClick(stubs.onRegionClick)(stubs.event); + + expect(stubs.onRegionClick).to.be.calledWith({ + isRegionActive: true, + event: stubs.event, + }); + }); + }); +}); diff --git a/src/lib/__tests__/ZoomControls-test.js b/src/lib/__tests__/ZoomControls-test.js index 5be478aeb..10874d846 100644 --- a/src/lib/__tests__/ZoomControls-test.js +++ b/src/lib/__tests__/ZoomControls-test.js @@ -59,7 +59,7 @@ describe('lib/ZoomControls', () => { expect(stubs.add).to.be.calledWith( __('zoom_current_scale'), undefined, - 'bp-zoom-current-scale', + 'bp-ZoomControls-currentScale', sinon.match.string, 'div', sinon.match.any, @@ -125,7 +125,7 @@ describe('lib/ZoomControls', () => { expect(stubs.add).to.be.calledWith( __('zoom_current_scale'), undefined, - 'bp-zoom-current-scale', + 'bp-ZoomControls-currentScale', sinon.match.string, 'div', sinon.match.any, From b5afc67f2bf9ed0fb1f616c3d95310d1a036403c Mon Sep 17 00:00:00 2001 From: Mingze Xiao Date: Wed, 25 Mar 2020 17:02:47 -0700 Subject: [PATCH 6/9] feat(annotations): Fix typescript --- src/lib/AnnotationControls.ts | 11 +++++------ src/lib/__tests__/AnnotationControls-test.js | 14 ++++++-------- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/lib/AnnotationControls.ts b/src/lib/AnnotationControls.ts index 3d388a76c..32864f389 100644 --- a/src/lib/AnnotationControls.ts +++ b/src/lib/AnnotationControls.ts @@ -17,9 +17,6 @@ export default class AnnotationControls { /** @property {bool} - Region comment mode active state */ private isRegionActive = false; - /** @property {HTMLElement} - Region comment button element */ - private regionButtonElement: HTMLElement = new HTMLButtonElement(); - /** * [constructor] * @@ -42,11 +39,13 @@ export default class AnnotationControls { * @return {void} */ private handleRegionClick = (onRegionClick: Function) => (event: MouseEvent): void => { + const regionButtonElement = event.target as HTMLButtonElement; + this.isRegionActive = !this.isRegionActive; if (this.isRegionActive) { - this.regionButtonElement.classList.add(CLASS_BUTTON_ACTIVE); + regionButtonElement.classList.add(CLASS_BUTTON_ACTIVE); } else { - this.regionButtonElement.classList.remove(CLASS_BUTTON_ACTIVE); + regionButtonElement.classList.remove(CLASS_BUTTON_ACTIVE); } onRegionClick({ isRegionActive: this.isRegionActive, event }); @@ -60,7 +59,7 @@ export default class AnnotationControls { */ public init({ onRegionClick = noop }: Options = {}): void { const groupElement = this.controls.addGroup(CLASS_ANNOTATIONS_GROUP); - this.regionButtonElement = this.controls.add( + this.controls.add( // eslint-disable-next-line @typescript-eslint/ban-ts-ignore // @ts-ignore __('region_comment'), diff --git a/src/lib/__tests__/AnnotationControls-test.js b/src/lib/__tests__/AnnotationControls-test.js index b097650ec..bd4a2b561 100644 --- a/src/lib/__tests__/AnnotationControls-test.js +++ b/src/lib/__tests__/AnnotationControls-test.js @@ -61,20 +61,19 @@ describe('lib/AnnotationControls', () => { describe('handleRegionClick()', () => { beforeEach(() => { - stubs.event = sandbox.stub({}); stubs.classListAdd = sandbox.stub(); stubs.classListRemove = sandbox.stub(); - stubs.add = sandbox.stub(annotationControls.controls, 'add').returns({ - classList: { - add: stubs.classListAdd, - remove: stubs.classListRemove, + stubs.event = sandbox.stub({ + target: { + classList: { + add: stubs.classListAdd, + remove: stubs.classListRemove, + }, }, }); }); it('should activate region button then deactivate', () => { - annotationControls.init({ onRegionClick: stubs.onRegionClick }); - expect(annotationControls.isRegionActive).to.be.false; annotationControls.handleRegionClick(stubs.onRegionClick)(stubs.event); @@ -87,7 +86,6 @@ describe('lib/AnnotationControls', () => { }); it('should call onRegionClick', () => { - annotationControls.init({ onRegionClick: stubs.onRegionClick }); annotationControls.handleRegionClick(stubs.onRegionClick)(stubs.event); expect(stubs.onRegionClick).to.be.calledWith({ From 72c7780dffeb3de195c2f0bbc5e41c2303d4e125 Mon Sep 17 00:00:00 2001 From: Mingze Xiao Date: Thu, 26 Mar 2020 14:14:57 -0700 Subject: [PATCH 7/9] feat(annotations): Address comments --- src/lib/AnnotationControls.scss | 6 +++--- src/lib/AnnotationControls.ts | 4 ++-- src/lib/Controls.scss | 7 ++++++- src/lib/Preview.scss | 2 -- src/lib/icons/annotation_region_comment.svg | 3 --- src/lib/icons/icons.js | 2 +- src/lib/icons/region_comment.svg | 1 + src/lib/viewers/doc/DocBaseViewer.js | 2 +- 8 files changed, 14 insertions(+), 13 deletions(-) delete mode 100644 src/lib/icons/annotation_region_comment.svg create mode 100644 src/lib/icons/region_comment.svg diff --git a/src/lib/AnnotationControls.scss b/src/lib/AnnotationControls.scss index d95b66421..36359b2f1 100644 --- a/src/lib/AnnotationControls.scss +++ b/src/lib/AnnotationControls.scss @@ -2,9 +2,9 @@ padding: 0 4px 0 8px; border-left: 1px solid $twos; - & .bp-AnnotationControls-regionBtn { - width: 32px; - height: 32px; + .bp-AnnotationControls-regionBtn { + width: $controls-button-width; + height: $controls-button-width; border-radius: 4px; svg { diff --git a/src/lib/AnnotationControls.ts b/src/lib/AnnotationControls.ts index 32864f389..3f0a7ab44 100644 --- a/src/lib/AnnotationControls.ts +++ b/src/lib/AnnotationControls.ts @@ -10,6 +10,8 @@ export type Options = { onRegionClick?: Function; }; +declare const __: (key: string) => string; + export default class AnnotationControls { /** @property {Controls} - Controls object */ private controls: Controls; @@ -60,8 +62,6 @@ export default class AnnotationControls { public init({ onRegionClick = noop }: Options = {}): void { const groupElement = this.controls.addGroup(CLASS_ANNOTATIONS_GROUP); this.controls.add( - // eslint-disable-next-line @typescript-eslint/ban-ts-ignore - // @ts-ignore __('region_comment'), this.handleRegionClick(onRegionClick), `${CLASS_BOX_CONTROLS_GROUP_BUTTON} ${CLASS_REGION_BUTTON}`, diff --git a/src/lib/Controls.scss b/src/lib/Controls.scss index e43fd27eb..93d49d0c5 100644 --- a/src/lib/Controls.scss +++ b/src/lib/Controls.scss @@ -1,3 +1,8 @@ +$controls-button-width: 32px; + +@import './AnnotationControls'; +@import './ZoomControls'; + .bp-controls-wrapper { position: absolute; bottom: 25px; @@ -166,7 +171,7 @@ margin-left: 4px; .bp-controls-group-btn { - width: 32px; + width: $controls-button-width; } & + .bp-controls-cell { diff --git a/src/lib/Preview.scss b/src/lib/Preview.scss index 6c5976b02..6df3fe019 100644 --- a/src/lib/Preview.scss +++ b/src/lib/Preview.scss @@ -1,8 +1,6 @@ @import 'common'; @import 'loading'; @import 'navigation'; -@import './AnnotationControls'; @import './Controls'; @import './ProgressBar'; @import './VirtualScroller'; -@import './ZoomControls'; diff --git a/src/lib/icons/annotation_region_comment.svg b/src/lib/icons/annotation_region_comment.svg deleted file mode 100644 index ebaa2fbe0..000000000 --- a/src/lib/icons/annotation_region_comment.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/lib/icons/icons.js b/src/lib/icons/icons.js index 151c20c98..f3c8a55cf 100644 --- a/src/lib/icons/icons.js +++ b/src/lib/icons/icons.js @@ -6,7 +6,7 @@ import FULLSCREEN_OUT from './full_screen_out_24px.svg'; import ROTATE_LEFT from './rotate_left_24px.svg'; import ZOOM_IN from './zoom_in.svg'; import ZOOM_OUT from './zoom_out.svg'; -import REGION_COMMENT from './annotation_region_comment.svg'; +import REGION_COMMENT from './region_comment.svg'; import ARROW_LEFT from './arrow_left_24px.svg'; import ARROW_RIGHT from './arrow_right_24px.svg'; import CHECK_MARK from './checkmark_24px.svg'; diff --git a/src/lib/icons/region_comment.svg b/src/lib/icons/region_comment.svg new file mode 100644 index 000000000..44d60d9e7 --- /dev/null +++ b/src/lib/icons/region_comment.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index d4caaed7a..a4f59b5a8 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -97,12 +97,12 @@ class DocBaseViewer extends BaseViewer { this.pinchToZoomEndHandler = this.pinchToZoomEndHandler.bind(this); this.pinchToZoomStartHandler = this.pinchToZoomStartHandler.bind(this); this.print = this.print.bind(this); + this.regionClickHandler = this.regionClickHandler.bind(this); this.setPage = this.setPage.bind(this); this.throttledScrollHandler = this.getScrollHandler().bind(this); this.toggleThumbnails = this.toggleThumbnails.bind(this); this.zoomIn = this.zoomIn.bind(this); this.zoomOut = this.zoomOut.bind(this); - this.regionClickHandler = this.regionClickHandler.bind(this); } /** From 69cc42498bf24cac8a97ff6c385e199a6fca118e Mon Sep 17 00:00:00 2001 From: Mingze Xiao Date: Thu, 26 Mar 2020 14:38:37 -0700 Subject: [PATCH 8/9] feat(annotations): Address comments --- src/lib/AnnotationControls.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/lib/AnnotationControls.ts b/src/lib/AnnotationControls.ts index 3f0a7ab44..f97d9fa95 100644 --- a/src/lib/AnnotationControls.ts +++ b/src/lib/AnnotationControls.ts @@ -6,8 +6,9 @@ export const CLASS_ANNOTATIONS_GROUP = 'bp-AnnotationControls-group'; export const CLASS_REGION_BUTTON = 'bp-AnnotationControls-regionBtn'; export const CLASS_BUTTON_ACTIVE = 'is-active'; +export type RegionHandlerType = ({ isRegionActive, event }: { isRegionActive: boolean; event: MouseEvent }) => void; export type Options = { - onRegionClick?: Function; + onRegionClick?: RegionHandlerType; }; declare const __: (key: string) => string; @@ -16,7 +17,7 @@ export default class AnnotationControls { /** @property {Controls} - Controls object */ private controls: Controls; - /** @property {bool} - Region comment mode active state */ + /** @property {boolean} - Region comment mode active state */ private isRegionActive = false; /** @@ -36,11 +37,11 @@ export default class AnnotationControls { /** * Region comment button click handler * - * @param {Function} onRegionClick - region click handler in options + * @param {RegionHandlerType} onRegionClick - region click handler in options * @param {MouseEvent} event - mouse event * @return {void} */ - private handleRegionClick = (onRegionClick: Function) => (event: MouseEvent): void => { + private handleRegionClick = (onRegionClick: RegionHandlerType) => (event: MouseEvent): void => { const regionButtonElement = event.target as HTMLButtonElement; this.isRegionActive = !this.isRegionActive; @@ -56,7 +57,7 @@ export default class AnnotationControls { /** * Initialize the annotation controls with options. * - * @param {Function} [options.onRegionClick] - Callback when region comment button is clicked + * @param {RegionHandlerType} [options.onRegionClick] - Callback when region comment button is clicked * @return {void} */ public init({ onRegionClick = noop }: Options = {}): void { From 2a55a7f8b88400f280ba20d6b17290d27720af3a Mon Sep 17 00:00:00 2001 From: Mingze Xiao Date: Thu, 26 Mar 2020 16:37:34 -0700 Subject: [PATCH 9/9] feat(annotations): Address comments --- src/lib/AnnotationControls.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/AnnotationControls.ts b/src/lib/AnnotationControls.ts index f97d9fa95..c625dc027 100644 --- a/src/lib/AnnotationControls.ts +++ b/src/lib/AnnotationControls.ts @@ -6,9 +6,9 @@ export const CLASS_ANNOTATIONS_GROUP = 'bp-AnnotationControls-group'; export const CLASS_REGION_BUTTON = 'bp-AnnotationControls-regionBtn'; export const CLASS_BUTTON_ACTIVE = 'is-active'; -export type RegionHandlerType = ({ isRegionActive, event }: { isRegionActive: boolean; event: MouseEvent }) => void; +export type RegionHandler = ({ isRegionActive, event }: { isRegionActive: boolean; event: MouseEvent }) => void; export type Options = { - onRegionClick?: RegionHandlerType; + onRegionClick?: RegionHandler; }; declare const __: (key: string) => string; @@ -37,11 +37,11 @@ export default class AnnotationControls { /** * Region comment button click handler * - * @param {RegionHandlerType} onRegionClick - region click handler in options + * @param {RegionHandler} onRegionClick - region click handler in options * @param {MouseEvent} event - mouse event * @return {void} */ - private handleRegionClick = (onRegionClick: RegionHandlerType) => (event: MouseEvent): void => { + private handleRegionClick = (onRegionClick: RegionHandler) => (event: MouseEvent): void => { const regionButtonElement = event.target as HTMLButtonElement; this.isRegionActive = !this.isRegionActive; @@ -57,7 +57,7 @@ export default class AnnotationControls { /** * Initialize the annotation controls with options. * - * @param {RegionHandlerType} [options.onRegionClick] - Callback when region comment button is clicked + * @param {RegionHandler} [options.onRegionClick] - Callback when region comment button is clicked * @return {void} */ public init({ onRegionClick = noop }: Options = {}): void {