feat(annotations): Update CSS pointer-events for drawing (#1293)

* feat(annotations): Update CSS pointer-events for drawing * feat(annotations): Address comments
box · Nov 17, 2020 · 39eec82 · 39eec82
1 parent b1a47b4
commit 39eec82
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git a/src/lib/constants.js b/src/lib/constants.js
@@ -1,4 +1,5 @@
 export const CLASS_ACTIVE = 'bp-is-active';
+export const CLASS_ANNOTATIONS_CREATE_DRAWING = 'bp-annotations-create--drawing';
 export const CLASS_ANNOTATIONS_CREATE_HIGHLIGHT = 'bp-annotations-create--highlight';
 export const CLASS_ANNOTATIONS_CREATE_REGION = 'bp-annotations-create--region';
 export const CLASS_ANNOTATIONS_DISCOVERABLE = 'bp-annotations-discoverable';

diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
@@ -19,6 +19,7 @@ import {
 } from '../util';
 import {
     ANNOTATOR_EVENT,
+    CLASS_ANNOTATIONS_CREATE_DRAWING,
     CLASS_ANNOTATIONS_CREATE_HIGHLIGHT,
     CLASS_ANNOTATIONS_CREATE_REGION,
     CLASS_ANNOTATIONS_DISCOVERABLE,
@@ -49,6 +50,7 @@ const VIEWER_STATUSES = {
 };
 
 const ANNOTATION_CLASSES = {
+    [AnnotationMode.DRAWING]: CLASS_ANNOTATIONS_CREATE_DRAWING,
     [AnnotationMode.HIGHLIGHT]: CLASS_ANNOTATIONS_CREATE_HIGHLIGHT,
     [AnnotationMode.REGION]: CLASS_ANNOTATIONS_CREATE_REGION,
 };

diff --git a/src/lib/viewers/__tests__/BaseViewer-test.js b/src/lib/viewers/__tests__/BaseViewer-test.js
@@ -1797,6 +1797,7 @@ describe('lib/viewers/BaseViewer', () => {
         });
 
         [
+            [AnnotationMode.DRAWING, constants.CLASS_ANNOTATIONS_CREATE_DRAWING],
             [AnnotationMode.REGION, constants.CLASS_ANNOTATIONS_CREATE_REGION],
             [AnnotationMode.HIGHLIGHT, constants.CLASS_ANNOTATIONS_CREATE_HIGHLIGHT],
         ].forEach(([mode, className]) => {
@@ -1807,7 +1808,7 @@ describe('lib/viewers/BaseViewer', () => {
             });
         });
 
-        [AnnotationMode.NONE, AnnotationMode.HIGHLIGHT].forEach(mode => {
+        [AnnotationMode.NONE, AnnotationMode.HIGHLIGHT, AnnotationMode.DRAWING].forEach(mode => {
             test(`should remove create region class if discoverability is enabled and mode is ${mode}`, () => {
                 base.options.enableAnnotationsDiscoverability = true;
                 base.processAnnotationModeChange(mode);

diff --git a/src/lib/viewers/doc/_annotations.scss b/src/lib/viewers/doc/_annotations.scss
@@ -9,6 +9,12 @@
     }
 }
 
+@mixin bp-annotations-disable-drawing-targets {
+    .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget {
+        pointer-events: none;
+    }
+}
+
 @mixin bp-annotations-disable-highlight-targets {
     .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect {
         pointer-events: none;

diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
@@ -354,17 +354,15 @@ $thumbnail-sidebar-width: 226px;
         }
     }
 
-    &.bp-annotations-create--highlight {
+    &.bp-annotations-create--highlight,
+    &.bp-annotations-create--region {
         @include bp-annotations-create-base;
+        @include bp-annotations-disable-drawing-targets;
         @include bp-annotations-disable-highlight-targets;
         @include bp-annotations-disable-region-targets;
     }
 
     &.bp-annotations-create--region {
-        @include bp-annotations-create-base;
-        @include bp-annotations-disable-highlight-targets;
-        @include bp-annotations-disable-region-targets;
-
         &.bp-annotations-ftux-document-cursor-seen {
             .ba-PopupCursor {
                 display: none;