feat(annotations): add ftux cursor logic

box · Nov 3, 2020 · 676eb8d · 676eb8d
1 parent 281b9ab
commit 676eb8d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 0 deletions.
diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
@@ -53,6 +53,9 @@ const ANNOTATION_CLASSES = {
     [AnnotationMode.REGION]: CLASS_ANNOTATIONS_CREATE_REGION,
 };
 
+const IMAGE_FTUX_CURSOR_DISABLED_KEY = 'image-ftux-cursor-disabled';
+const DOCUMENT_FTUX_CURSOR_DISABLED_KEY = 'document-ftux-cursor-disabled';
+
 const ANNOTATIONS_JS = 'annotations.js';
 const ANNOTATIONS_CSS = 'annotations.css';
 
@@ -979,11 +982,23 @@ class BaseViewer extends EventEmitter {
 
         const options = boxAnnotations.getOptions && boxAnnotations.getOptions();
 
+        // Set disabled ftux cursor flag depending on if the local storage key is set
+        let isDocumentFtuxCursorDisabled = false;
+        let isImageFtuxCursorDisabled = false;
+        if (this.cache.get(DOCUMENT_FTUX_CURSOR_DISABLED_KEY)) {
+            isDocumentFtuxCursorDisabled = true;
+        }
+        if (this.cache.get(IMAGE_FTUX_CURSOR_DISABLED_KEY)) {
+            isImageFtuxCursorDisabled = true;
+        }
+
         const annotatorOptions = this.createAnnotatorOptions({
             annotator: this.annotatorConf,
             features: options && options.features,
             initialMode: this.getInitialAnnotationMode(),
             intl: (options && options.intl) || intlUtil.createAnnotatorIntl(),
+            isDocumentFtuxCursorDisabled,
+            isImageFtuxCursorDisabled,
             modeButtons: ANNOTATION_BUTTONS,
         });
 

diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -57,6 +57,7 @@ export const DISCOVERABILITY_STATES = [
 
 const CURRENT_PAGE_MAP_KEY = 'doc-current-page-map';
 const DEFAULT_SCALE_DELTA = 0.1;
+const DOCUMENT_FTUX_CURSOR_DISABLED_KEY = 'document-ftux-cursor-disabled';
 const IS_SAFARI_CLASS = 'is-safari';
 const LOAD_TIMEOUT_MS = 180000; // 3 min timeout
 const MAX_PINCH_SCALE_VALUE = 3;
@@ -1592,10 +1593,25 @@ class DocBaseViewer extends BaseViewer {
             this.annotator.addListener('creator_staged_change', this.handleAnnotationCreatorChangeEvent);
             this.annotator.addListener('creator_status_change', this.handleAnnotationCreatorChangeEvent);
         }
+
+        if (this.cache.get(DOCUMENT_FTUX_CURSOR_DISABLED_KEY)) {
+            this.annotator.emit('annotations_document_explicit_create_toggled');
+        }
     }
 
     handleAnnotationControlsClick({ mode }) {
         const nextMode = this.annotationControlsFSM.transition(AnnotationInput.CLICK, mode);
+
+        if (nextMode === AnnotationMode.REGION) {
+            // the first time that we click on the explicit create region
+            if (!this.cache.get(DOCUMENT_FTUX_CURSOR_DISABLED_KEY)) {
+                this.cache.set(DOCUMENT_FTUX_CURSOR_DISABLED_KEY, true, true /* useLocalStorage */);
+            } else {
+                // we only update the toggle on every explicit click after the first time
+                this.annotator.emit('annotations_document_explicit_create_toggled');
+            }
+        }
+
         this.annotator.toggleAnnotationMode(
             this.options.enableAnnotationsDiscoverability && nextMode === AnnotationMode.NONE
                 ? AnnotationMode.REGION

diff --git a/src/lib/viewers/image/ImageViewer.js b/src/lib/viewers/image/ImageViewer.js
@@ -5,6 +5,7 @@ import { CLASS_INVISIBLE, DISCOVERABILITY_ATTRIBUTE } from '../../constants';
 import { ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT, ICON_ROTATE_LEFT } from '../../icons/icons';
 import './Image.scss';
 
+const IMAGE_FTUX_CURSOR_DISABLED_KEY = 'image-ftux-cursor-disabled';
 const CSS_CLASS_IMAGE = 'bp-image';
 const IMAGE_PADDING = 15;
 const IMAGE_ZOOM_SCALE = 1.2;
@@ -513,6 +514,15 @@ class ImageViewer extends ImageBaseViewer {
      */
     handleAnnotationControlsClick({ mode }) {
         const nextMode = this.annotationControlsFSM.transition(AnnotationInput.CLICK, mode);
+
+        if (nextMode === AnnotationMode.REGION) {
+            if (!this.cache.get(IMAGE_FTUX_CURSOR_DISABLED_KEY)) {
+                this.cache.set(IMAGE_FTUX_CURSOR_DISABLED_KEY, true, true /* useLocalStorage */);
+            } else {
+                this.annotator.emit('annotations_image_explicit_create_toggled');
+            }
+        }
+
         this.annotator.toggleAnnotationMode(nextMode);
         this.processAnnotationModeChange(nextMode);
     }
@@ -531,6 +541,10 @@ class ImageViewer extends ImageBaseViewer {
         if (this.areNewAnnotationsEnabled()) {
             this.annotator.addListener('annotations_create', this.handleAnnotationCreateEvent);
         }
+
+        if (this.cache.get(IMAGE_FTUX_CURSOR_DISABLED_KEY)) {
+            this.annotator.emit('annotations_image_explicit_create_toggled');
+        }
     }
 
     updateDiscoverabilityResinTag() {