Hide image controls when tagging, and hide compass HUD by default (#7028)

* make compass HUD configurable and hide image controls when tagging

* lint fixes

* address PR comments

* change prop to inject

---------

Co-authored-by: Shefali Joshi <simplyrender@gmail.com>

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
@@ -198,7 +202,7 @@ test.describe('Example Imagery Object', () => {
     expect(afterDownPanBoundingBox.y).toBeLessThan(afterUpPanBoundingBox.y);
   });
 
-  test('Can use alt+shift+drag to create a tag', async ({ page }) => {
+  test('Can use alt+shift+drag to create a tag and ensure toolbars disappear', async ({ page }) => {
     const canvas = page.locator('canvas');
     await canvas.hover({ trial: true });
 
@@ -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

@@ -54,6 +54,7 @@ export default {
       }
     }
   },
+  emits: ['annotation-marquee-started', 'annotations-changed', 'annotation-marquee-finished'],
   data() {
     return {
       dragging: false,
@@ -121,7 +122,7 @@ export default {
   methods: {
     onAnnotationChange(annotations) {
       this.selectedAnnotations = annotations;
-      this.$emit('annotationsChanged', annotations);
+      this.$emit('annotations-changed', annotations);
     },
     updateSelection(selection) {
       const selectionContext = selection?.[0]?.[0]?.context?.item;
@@ -292,6 +293,8 @@ export default {
     createNewAnnotation() {
       this.dragging = false;
       this.selectedAnnotations = [];
+      this.selectedAnnotations = [];
+      this.$emit('annotation-marquee-finished');
 
       const rectangleFromCanvas = {
         x: this.newAnnotationRectangle.x,
@@ -315,6 +318,7 @@ export default {
     },
     attemptToSelectExistingAnnotation(event) {
       this.dragging = false;
+      this.$emit('annotation-marquee-finished');
       // use flatbush to find annotations that are close to the click
       const boundingRect = this.canvas.getBoundingClientRect();
       const scaleX = this.canvas.width / boundingRect.width;
@@ -377,7 +381,7 @@ export default {
       return selection;
     },
     startAnnotationDrag(event) {
-      this.$emit('annotationMarqueed');
+      this.$emit('annotation-marquee-started');
       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%`">
     <compass-hud
+      v-if="showCompassHUD"
       :camera-angle-of-view="cameraAngleOfView"
       :heading="heading"
       :camera-azimuth="cameraAzimuth"
@@ -54,6 +55,7 @@ export default {
     CompassHud,
     CompassRose
   },
+  inject: ['showCompassHUD'],
   props: {
     image: {
       type: Object,

src/plugins/imagery/components/ImageryView.vue

@@ -34,6 +34,7 @@
       @mousedown="handlePanZoomClick"
     >
       <ImageControls
+        v-show="!annotationsBeingMarqueed"
         ref="imageControls"
         :zoom-factor="zoomFactor"
         :image-url="imageUrl"
@@ -92,8 +93,9 @@
             v-if="shouldDisplayAnnotations"
             :image="focusedImage"
             :imagery-annotations="imageryAnnotations[focusedImage.time]"
-            @annotationMarqueed="handlePauseButton(true)"
-            @annotationsChanged="loadAnnotations"
+            @annotation-marquee-started="pauseAndHideImageControls"
+            @annotation-marquee-finished="revealImageControls"
+            @annotations-changed="loadAnnotations"
           />
         </div>
       </div>
@@ -246,7 +248,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 +317,8 @@ export default {
       imagePanned: false,
       forceShowThumbnails: false,
       animateThumbScroll: false,
-      imageryAnnotations: {}
+      imageryAnnotations: {},
+      annotationsBeingMarqueed: false
     };
   },
   computed: {
@@ -752,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);
@@ -1188,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;