Handle negative height & width in image annotations

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

@@ -209,7 +209,6 @@ test.describe('Example Imagery Object', () => {
     const canvasBoundingBox = await canvas.boundingBox();
     const canvasCenterX = canvasBoundingBox.x + canvasBoundingBox.width / 2;
     const canvasCenterY = canvasBoundingBox.y + canvasBoundingBox.height / 2;
-
     await Promise.all(tagHotkey.map((x) => page.keyboard.down(x)));
     await page.mouse.down();
     // steps not working for me here
@@ -222,7 +221,7 @@ test.describe('Example Imagery Object', () => {
     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.
+    // Wait for canvas to stabilize.
     await canvas.hover({ trial: true });
 
     // add some tags
@@ -234,6 +233,20 @@ test.describe('Example Imagery Object', () => {
     await page.getByRole('button', { name: /Add Tag/ }).click();
     await page.getByPlaceholder('Type to select tag').click();
     await page.getByText('Science').click();
+
+    // click on a separate part of the canvas to ensure no tags appear
+    await page.mouse.click(canvasCenterX + 10, canvasCenterY + 10);
+    await expect(page.getByText('Driving')).toBeHidden();
+    await expect(page.getByText('Science')).toBeHidden();
+
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7083'
+    });
+    // click on annotation again and expect tags to appear
+    await page.mouse.click(canvasCenterX - 50, canvasCenterY - 50);
+    await expect(page.getByText('Driving')).toBeVisible();
+    await expect(page.getByText('Science')).toBeVisible();
   });
 
   test('Can use + - buttons to zoom on the image @unstable', async ({ page }) => {

src/plugins/imagery/components/AnnotationsCanvas.vue

@@ -78,12 +78,10 @@
           )?.rectangle;
           const annotationRectangleForPixelDepth =
             this.transformRectangleToPixelDense(annotationRectangle);
-          const indexNumber = builtAnnotationsIndex.add(
-            annotationRectangleForPixelDepth.x,
-            annotationRectangleForPixelDepth.y,
-            annotationRectangleForPixelDepth.x + annotationRectangleForPixelDepth.width,
-            annotationRectangleForPixelDepth.y + annotationRectangleForPixelDepth.height
+          const { x, y, x2, y2 } = this.transformAnnotationRectangleToFlatbushRectangle(
+            annotationRectangleForPixelDepth
           );
+          const indexNumber = builtAnnotationsIndex.add(x, y, x2, y2);
           this.indexToAnnotationMap[indexNumber] = annotation;
         });
         builtAnnotationsIndex.finish();
@@ -124,6 +122,23 @@
       this.selectedAnnotations = annotations;
       this.$emit('annotations-changed', annotations);
     },
+    transformAnnotationRectangleToFlatbushRectangle(annotationRectangle) {
+      let { x, y, width, height } = annotationRectangle;
+      let x2 = x + width;
+      let y2 = y + height;
+
+      // if height or width are negative, we need to adjust the x and y
+      if (width < 0) {
+        x2 = x;
+        x = x + width;
+      }
+      if (height < 0) {
+        y2 = y;
+        y = y + height;
+      }
+
+      return { x, y, x2, y2 };
+    },
     updateSelection(selection) {
       const selectionContext = selection?.[0]?.[0]?.context?.item;
       const selectionType = selection?.[0]?.[0]?.context?.type;