Hide image controls when tagging, and hide compass HUD by default

e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js

@@ -57,6 +57,10 @@ test.describe('Example Imagery Object', () => {
     await mouseZoomOnImageAndAssert(page, -2);
   });
 
+  test('Compass HUD should be hidden by default', async ({ page }) => {
+    await expect(page.locator('.c-hud')).toBeHidden();
+  });
+
   test('Can adjust image brightness/contrast by dragging the sliders', async ({
     page,
     browserName
@@ -211,7 +215,11 @@ test.describe('Example Imagery Object', () => {
     // steps not working for me here
     await page.mouse.move(canvasCenterX - 20, canvasCenterY - 20);
     await page.mouse.move(canvasCenterX - 100, canvasCenterY - 100);
+    // toolbar should hide when we're creating annotations with a drag
+    await expect(page.locator('[role="toolbar"][aria-label="Image controls"]')).toBeHidden();
     await page.mouse.up();
+    // toolbar should reappear when we're done creating annotations
+    await expect(page.locator('[role="toolbar"][aria-label="Image controls"]')).toBeVisible();
     await Promise.all(tagHotkey.map((x) => page.keyboard.up(x)));
 
     //Wait for canvas to stabilize.

src/plugins/imagery/ImageryView.js

@@ -35,6 +35,7 @@ export default class ImageryView {
           domainObject: this.domainObject,
           objectPath: alternateObjectPath || this.objectPath,
           imageFreshnessOptions: this.options?.imageFreshness || DEFAULT_IMAGE_FRESHNESS_OPTIONS,
+          showCompassHUD: this.options?.showCompassHUD,
           currentView: this
         },
         data() {

src/plugins/imagery/components/AnnotationsCanvas.vue

@@ -292,6 +292,8 @@
       this.dragging = false;
       this.selectedAnnotations = [];
 
+      this.$emit('annotationMarqueeFinished');
+
       const targetDomainObjects = {};
       targetDomainObjects[this.keyString] = this.domainObject;
       const targetDetails = {};
@@ -314,6 +316,7 @@
     },
     attemptToSelectExistingAnnotation(event) {
       this.dragging = false;
+      this.$emit('annotationMarqueeFinished');
       // use flatbush to find annotations that are close to the click
       const boundingRect = this.canvas.getBoundingClientRect();
       const scaleX = this.canvas.width / boundingRect.width;
@@ -376,7 +379,7 @@
       return selection;
     },
     startAnnotationDrag(event) {
-      this.$emit('annotationMarqueed');
+      this.$emit('annotationMarqueeStarted');
       this.newAnnotationRectangle = {};
       const boundingRect = this.canvas.getBoundingClientRect();
       const scaleX = this.canvas.width / boundingRect.width;

src/plugins/imagery/components/Compass/Compass.vue

@@ -23,6 +23,7 @@
 <template>
   <div class="c-compass" :style="`width: 100%; height: 100%`">
     <CompassHUD
+      v-if="showCompassHUD"
       :camera-angle-of-view="cameraAngleOfView"
       :heading="heading"
       :camera-azimuth="cameraAzimuth"
@@ -62,6 +63,10 @@ export default {
     sizedImageDimensions: {
       type: Object,
       required: true
+    },
+    showCompassHUD: {
+      type: Boolean,
+      required: true
     }
   },
   computed: {

src/plugins/imagery/components/ImageryView.vue

@@ -34,6 +34,7 @@
       @mousedown="handlePanZoomClick"
     >
       <ImageControls
+        v-show="!annotationsBeingMarqueed"
         ref="imageControls"
         :zoom-factor="zoomFactor"
         :image-url="imageUrl"
@@ -87,13 +88,15 @@
             v-if="shouldDisplayCompass"
             :image="focusedImage"
             :sized-image-dimensions="sizedImageDimensions"
+            :show-compass-h-u-d="showCompassHUD"
           />
           <AnnotationsCanvas
             v-if="shouldDisplayAnnotations"
             :image="focusedImage"
             :imagery-annotations="imageryAnnotations[focusedImage.time]"
-            @annotationMarqueed="handlePauseButton(true)"
-            @annotationsChanged="loadAnnotations"
+            @annotationMarqueeStarted="pauseAndHideImageControls"
+            @annotationMarqueeFinished="revealImageControls"
+            @annotations-changed="loadAnnotations"
           />
         </div>
       </div>
@@ -246,7 +249,14 @@ export default {
     AnnotationsCanvas
   },
   mixins: [imageryData],
-  inject: ['openmct', 'domainObject', 'objectPath', 'currentView', 'imageFreshnessOptions'],
+  inject: [
+    'openmct',
+    'domainObject',
+    'objectPath',
+    'currentView',
+    'imageFreshnessOptions',
+    'showCompassHUD'
+  ],
   props: {
     focusedImageTimestamp: {
       type: Number,
@@ -308,7 +318,8 @@ export default {
       imagePanned: false,
       forceShowThumbnails: false,
       animateThumbScroll: false,
-      imageryAnnotations: {}
+      imageryAnnotations: {},
+      annotationsBeingMarqueed: false
     };
   },
   computed: {
@@ -751,6 +762,13 @@ export default {
         transition: `${!this.pan && this.animateZoom ? 'transform 250ms ease-in' : 'initial'}`
       };
     },
+    pauseAndHideImageControls() {
+      this.annotationsBeingMarqueed = true;
+      this.handlePauseButton(true);
+    },
+    revealImageControls() {
+      this.annotationsBeingMarqueed = false;
+    },
     setTimeContext() {
       this.stopFollowingTimeContext();
       this.timeContext = this.openmct.time.getContextForView(this.objectPath);
@@ -1187,7 +1205,7 @@ export default {
       this.zoomFactor = newScaleFactor;
     },
     handlePanZoomClick(e) {
-      this.$refs.imageControls.handlePanZoomClick(e);
+      this.$refs.imageControls?.handlePanZoomClick(e);
     },
     arrowDownHandler(event) {
       let key = event.keyCode;