feat(annotations): Hide annotation controls when fullscreen is active

src/lib/AnnotationControls.scss

@@ -19,4 +19,8 @@
             }
         }
     }
+
+    &.is-hidden {
+        display: none;
+    }
 }

src/lib/AnnotationControls.ts

@@ -4,7 +4,9 @@ import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from './Controls';
 
 export const CLASS_ANNOTATIONS_GROUP = 'bp-AnnotationControls-group';
 export const CLASS_REGION_BUTTON = 'bp-AnnotationControls-regionBtn';
+
 export const CLASS_BUTTON_ACTIVE = 'is-active';
+export const CLASS_GROUP_HIDE = 'is-hidden';
 
 export type RegionHandler = ({ isRegionActive, event }: { isRegionActive: boolean; event: MouseEvent }) => void;
 export type Options = {
@@ -34,6 +36,22 @@ export default class AnnotationControls {
         this.controls = controls;
     }
 
+    /**
+     * Hide annotations control button group
+     *
+     * @param {boolean} isFullscreen - true if full screen will be active
+     * @return {void}
+     */
+    public toggleGroup = (isFullscreen: boolean): void => {
+        const groupElement = this.controls.controlsEl.querySelector(`.${CLASS_ANNOTATIONS_GROUP}`);
+
+        if (isFullscreen) {
+            groupElement.classList.add(CLASS_GROUP_HIDE);
+        } else {
+            groupElement.classList.remove(CLASS_GROUP_HIDE);
+        }
+    };
+
     /**
      * Region comment button click handler
      *

src/lib/__tests__/AnnotationControls-test.js

@@ -1,5 +1,10 @@
 /* eslint-disable no-unused-expressions */
-import AnnotationControls, { CLASS_REGION_BUTTON, CLASS_BUTTON_ACTIVE } from '../AnnotationControls';
+import AnnotationControls, {
+    CLASS_ANNOTATIONS_GROUP,
+    CLASS_BUTTON_ACTIVE,
+    CLASS_GROUP_HIDE,
+    CLASS_REGION_BUTTON,
+} from '../AnnotationControls';
 import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from '../Controls';
 import { ICON_REGION_COMMENT } from '../icons/icons';
 
@@ -94,4 +99,27 @@ describe('lib/AnnotationControls', () => {
             });
         });
     });
+
+    describe('toggleGroup()', () => {
+        beforeEach(() => {
+            stubs.classListAdd = sandbox.stub();
+            stubs.classListRemove = sandbox.stub();
+            stubs.querySelector = sandbox.stub().returns({
+                classList: {
+                    add: stubs.classListAdd,
+                    remove: stubs.classListRemove,
+                },
+            });
+            annotationControls.controls.controlsEl.querySelector = stubs.querySelector;
+        });
+
+        it('should hide entire group if fullscreen is active', () => {
+            annotationControls.toggleGroup(true);
+            expect(stubs.querySelector).to.be.calledWith(`.${CLASS_ANNOTATIONS_GROUP}`);
+            expect(stubs.classListAdd).to.be.calledWith(CLASS_GROUP_HIDE);
+
+            annotationControls.toggleGroup(false);
+            expect(stubs.classListRemove).to.be.calledWith(CLASS_GROUP_HIDE);
+        });
+    });
 });

src/lib/viewers/BaseViewer.js

@@ -536,6 +536,9 @@ class BaseViewer extends EventEmitter {
      */
     toggleFullscreen() {
         fullscreen.toggle(this.containerEl);
+        if (this.options.showAnnotationsControls) {
+            this.annotationControls.toggleGroup(!fullscreen.isFullscreen()); // pass in the next state
+        }
     }
 
     /**