Feature: DrawingAnnotations starting code (#224)

* New: starting to add drawing annotation classes * Update: restructure the class structure of drawing annotations * Update: restructure annotator class hierarchy * Update: clean up jsdoc * Fix: fixing tests on changed function names for drawing annotations * Update: annotation confirm and cancel buttons * Update: remove entry into drawing annotations * Fix: prettier on all files * Fix: remove drawing listener from load annotations test * Update: annotation variable updates and code clarity fixes from reviews * Chore: drawing annotation tests * Update: changes pertaining to latest code review * Update: change test variable names to match camelCasing * Fix: annotator test stubs
box · Jul 24, 2017 · 3960927 · 3960927
1 parent 1df8b55
commit 3960927
Show file tree

Hide file tree

Showing 60 changed files with 1,468 additions and 240 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -390,4 +390,4 @@
 - Setting up Travis [\#1](https://github.com/box/box-content-preview/pull/1) ([tonyjin](https://github.com/tonyjin))
 
 
-\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
+\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
diff --git a/src/i18n/da-DK.properties b/src/i18n/da-DK.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Din session er udløbet. Genindlæs siden.
 # Default text for notification button that dismisses notification
 notification_button_default_text=OK
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Klik et vilkårligt sted for at føje en kommentar til dokumentet
+notification_annotation_point_mode=Klik et vilkårligt sted for at føje en kommentar til dokumentet
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/de-DE.properties b/src/i18n/de-DE.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Ihre Sitzung ist abgelaufen. Bitte aktualisieren
 # Default text for notification button that dismisses notification
 notification_button_default_text=OK
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Klicken Sie an einer beliebigen Stelle, um einen Kommentar im Dokument hinzuzufügen
+notification_annotation_point_mode=Klicken Sie an einer beliebigen Stelle, um einen Kommentar im Dokument hinzuzufügen
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/en-AU.properties b/src/i18n/en-AU.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Your session has expired. Please refresh the pag
 # Default text for notification button that dismisses notification
 notification_button_default_text=Okay
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Click anywhere to add a comment to the document
+notification_annotation_point_mode=Click anywhere to add a comment to the document
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/en-CA.properties b/src/i18n/en-CA.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Your session has expired. Please refresh the pag
 # Default text for notification button that dismisses notification
 notification_button_default_text=Okay
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Click anywhere to add a comment to the document
+notification_annotation_point_mode=Click anywhere to add a comment to the document
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/en-GB.properties b/src/i18n/en-GB.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Your session has expired. Please refresh the pag
 # Default text for notification button that dismisses notification
 notification_button_default_text=Okay
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Click anywhere to add a comment to the document
+notification_annotation_point_mode=Click anywhere to add a comment to the document
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/en-US.properties b/src/i18n/en-US.properties
@@ -123,6 +123,8 @@ annotation_anonymous_user_name=Some User
 annotation_posting_message=Posting...
 # Accessibilty message for button that toggles point annotation mode
 annotation_point_toggle=Point annotation mode
+# Accessibilty message for button that toggles drawing annotation mode
+annotation_draw_toggle=Drawing annotation mode
 # Accessibilty text for button that adds and removes highlights on text
 annotation_highlight_toggle=Highlight text
 # Accessibilty text for button that adds comments to text highlights
@@ -142,8 +144,10 @@ annotations_authorization_error=Your session has expired. Please refresh the pag
 # Notifications
 # Default text for notification button that dismisses notification
 notification_button_default_text=Okay
-# Notification message shown when user enters annotation mode
-notification_annotation_mode=Click anywhere to add a comment to the document
+# Notification message shown when user enters point annotation mode
+notification_annotation_point_mode=Click anywhere to add a comment to the document
+# Notification message shown when user enters drawing annotation mode
+notification_annotation_draw_mode=Press down and drag the pointer to draw on the document
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/es-ES.properties b/src/i18n/es-ES.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=La sesión ha finalizado. Actualice la página.
 # Default text for notification button that dismisses notification
 notification_button_default_text=Aceptar
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Haga clic en cualquier parte para añadir un comentario al documento
+notification_annotation_point_mode=Haga clic en cualquier parte para añadir un comentario al documento
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/fi-FI.properties b/src/i18n/fi-FI.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Istunto on vanhentunut. Päivitä sivu.
 # Default text for notification button that dismisses notification
 notification_button_default_text=OK
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Lisää kommentti asiakirjaan napsauttamalla mitä tahansa kohtaa
+notification_annotation_point_mode=Lisää kommentti asiakirjaan napsauttamalla mitä tahansa kohtaa
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/fr-CA.properties b/src/i18n/fr-CA.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Votre session a expiré. Veuillez actualiser la
 # Default text for notification button that dismisses notification
 notification_button_default_text=OK
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Cliquez n'importe où dans le document pour y ajouter un commentaire
+notification_annotation_point_mode=Cliquez n'importe où dans le document pour y ajouter un commentaire
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/fr-FR.properties b/src/i18n/fr-FR.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Votre session a expiré. Veuillez actualiser la
 # Default text for notification button that dismisses notification
 notification_button_default_text=OK
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Cliquez n'importe où dans le document pour y ajouter un commentaire
+notification_annotation_point_mode=Cliquez n'importe où dans le document pour y ajouter un commentaire
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/it-IT.properties b/src/i18n/it-IT.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=La sessione è scaduta. Aggiorna la pagina.
 # Default text for notification button that dismisses notification
 notification_button_default_text=OK
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Fai clic in un punto qualsiasi per aggiungere un commento al documento
+notification_annotation_point_mode=Fai clic in un punto qualsiasi per aggiungere un commento al documento
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/ja-JP.properties b/src/i18n/ja-JP.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=セッションが期限切れです。ページ
 # Default text for notification button that dismisses notification
 notification_button_default_text=OK
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=ドキュメントにコメントをつけるには任意の場所をクリックします
+notification_annotation_point_mode=ドキュメントにコメントをつけるには任意の場所をクリックします
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/ko-KR.properties b/src/i18n/ko-KR.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=세션이 만료되었습니다. 페이지를
 # Default text for notification button that dismisses notification
 notification_button_default_text=확인
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=아무 곳이나 클릭하여 문서에 코멘트를 추가하십시오.
+notification_annotation_point_mode=아무 곳이나 클릭하여 문서에 코멘트를 추가하십시오.
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/nb-NO.properties b/src/i18n/nb-NO.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Økten er utløpt. Oppdater siden.
 # Default text for notification button that dismisses notification
 notification_button_default_text=OK
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Klikk hvor som helst for å legge til en kommentar til dokumentet
+notification_annotation_point_mode=Klikk hvor som helst for å legge til en kommentar til dokumentet
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/nl-NL.properties b/src/i18n/nl-NL.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Uw sessie is verlopen. Vernieuw de pagina.
 # Default text for notification button that dismisses notification
 notification_button_default_text=OK
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Klik ergens om een opmerking aan het document toe te voegen
+notification_annotation_point_mode=Klik ergens om een opmerking aan het document toe te voegen
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/pl-PL.properties b/src/i18n/pl-PL.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Sesja wygasła. Odśwież stronę.
 # Default text for notification button that dismisses notification
 notification_button_default_text=OK
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Aby dodać komentarz do dokumentu, kliknij w dowolnym miejscu
+notification_annotation_point_mode=Aby dodać komentarz do dokumentu, kliknij w dowolnym miejscu
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/pt-BR.properties b/src/i18n/pt-BR.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Sua sessão expirou. Atualize a página.
 # Default text for notification button that dismisses notification
 notification_button_default_text=Ok
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Clique em qualquer lugar para fazer um comentário no documento
+notification_annotation_point_mode=Clique em qualquer lugar para fazer um comentário no documento
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/ru-RU.properties b/src/i18n/ru-RU.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Время сеанса истекло. Обно
 # Default text for notification button that dismisses notification
 notification_button_default_text=ОК
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Нажмите на любую часть документа, чтобы добавить комментарий.
+notification_annotation_point_mode=Нажмите на любую часть документа, чтобы добавить комментарий.
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/sv-SE.properties b/src/i18n/sv-SE.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Din session har gått ut. Uppdatera sidan.
 # Default text for notification button that dismisses notification
 notification_button_default_text=OK
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Klicka var som helst för att lägga till en kommentar till dokumentet
+notification_annotation_point_mode=Klicka var som helst för att lägga till en kommentar till dokumentet
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/tr-TR.properties b/src/i18n/tr-TR.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=Oturumunuzun süresi sona erdi. Lütfen sayfayı
 # Default text for notification button that dismisses notification
 notification_button_default_text=Tamam
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=Belgeye bir yorum eklemek için herhangi bir yere tıklayın
+notification_annotation_point_mode=Belgeye bir yorum eklemek için herhangi bir yere tıklayın
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/zh-CN.properties b/src/i18n/zh-CN.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=您的会话已过期。请刷新页面。
 # Default text for notification button that dismisses notification
 notification_button_default_text=确定
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=点击任意位置均可向该文档添加评论
+notification_annotation_point_mode=点击任意位置均可向该文档添加评论
 
 # File Types
 # 360 degree video file type

diff --git a/src/i18n/zh-TW.properties b/src/i18n/zh-TW.properties
@@ -143,7 +143,7 @@ annotations_authorization_error=您的工作階段已到期。請重新整理頁
 # Default text for notification button that dismisses notification
 notification_button_default_text=確定
 # Notification message shown when user enters annotation mode
-notification_annotation_mode=在任何位置上按一下，即可新增留言至文件
+notification_annotation_point_mode=在任何位置上按一下，即可新增留言至文件
 
 # File Types
 # 360 degree video file type

diff --git a/src/lib/PreviewUI.js b/src/lib/PreviewUI.js
@@ -10,7 +10,6 @@ import {
     CLASS_PREVIEW_LOADED,
     SELECTOR_BOX_PREVIEW_CONTAINER,
     SELECTOR_BOX_PREVIEW,
-    SELECTOR_BOX_PREVIEW_BTN_ANNOTATE,
     SELECTOR_BOX_PREVIEW_BTN_PRINT,
     SELECTOR_BOX_PREVIEW_BTN_DOWNLOAD,
     SELECTOR_BOX_PREVIEW_BTN_LOADING_DOWNLOAD,
@@ -261,10 +260,11 @@ class PreviewUI {
     /**
      * Gets the annotation button element.
      *
-     * @return {HTMLElement} Annotate button element
+     * @param {string} annotatorSelector - Class selector for a custom annotation button.
+     * @return {HTMLElement|null} Annotate button element or null if the selector did not find an element.
      */
-    getAnnotateButton() {
-        return this.container.querySelector(SELECTOR_BOX_PREVIEW_BTN_ANNOTATE);
+    getAnnotateButton(annotatorSelector) {
+        return this.container.querySelector(annotatorSelector);
     }
 
     /**

diff --git a/src/lib/__tests__/PreviewUI-test.js b/src/lib/__tests__/PreviewUI-test.js
@@ -204,7 +204,8 @@ describe('lib/PreviewUI', () => {
     describe('getAnnotateButton()', () => {
         it('should return the annotate button', () => {
             containerEl = ui.setup(options);
-            expect(ui.getAnnotateButton()).to.equal(containerEl.querySelector(constants.SELECTOR_BOX_PREVIEW_BTN_ANNOTATE));
+            const buttonEl = ui.getAnnotateButton(constants.SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_POINT);
+            expect(buttonEl).to.equal(containerEl.querySelector(constants.SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_POINT));
         });
     });
 

diff --git a/src/lib/annotations/AnnotationService.js b/src/lib/annotations/AnnotationService.js
@@ -81,6 +81,7 @@ class AnnotationService extends EventEmitter {
                     },
                     details: {
                         type: annotation.type,
+                        drawingPaths: annotation.drawingPaths,
                         location: annotation.location,
                         threadID: annotation.threadID
                     },

diff --git a/src/lib/annotations/AnnotationThread.js b/src/lib/annotations/AnnotationThread.js
@@ -4,7 +4,7 @@ import Annotation from './Annotation';
 import AnnotationService from './AnnotationService';
 import * as annotatorUtil from './annotatorUtil';
 import { ICON_PLACED_ANNOTATION } from '../icons/icons';
-import { STATES, TYPES, CLASS_ANNOTATION_POINT_BUTTON, DATA_TYPE_ANNOTATION_INDICATOR } from './annotationConstants';
+import { STATES, TYPES, CLASS_ANNOTATION_POINT_MARKER, DATA_TYPE_ANNOTATION_INDICATOR } from './annotationConstants';
 
 @autobind
 class AnnotationThread extends EventEmitter {
@@ -404,7 +404,7 @@ class AnnotationThread extends EventEmitter {
      */
     createElement() {
         const indicatorEl = document.createElement('button');
-        indicatorEl.classList.add(CLASS_ANNOTATION_POINT_BUTTON);
+        indicatorEl.classList.add(CLASS_ANNOTATION_POINT_MARKER);
         indicatorEl.setAttribute('data-type', DATA_TYPE_ANNOTATION_INDICATOR);
         indicatorEl.innerHTML = ICON_PLACED_ANNOTATION;
         return indicatorEl;