fix(#7055): Expand on image with double click

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

@@ -460,6 +460,36 @@ test.describe('Example Imagery in Display Layout', () => {
 
 test.describe('Example Imagery in Flexible layout', () => {
   let flexibleLayout;
+  test.describe('Example Imagery in Flexible layout', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+      flexibleLayout = await createDomainObjectWithDefaults(page, { type: 'Flexible Layout' });
+
+      // Create Example Imagery inside the Flexible Layout
+      await createDomainObjectWithDefaults(page, {
+        type: 'Example Imagery',
+        parent: flexibleLayout.uuid
+      });
+
+      // Navigate back to Flexible Layout
+      await page.goto(flexibleLayout.url);
+    });
+
+    test('Can double-click on the image to view large image', async ({ page }) => {
+      // Double-click on the image to open large view
+      const imageElement = await page.waitForSelector('.image-wrapper');
+      await imageElement.dblclick();
+
+      // Check if the large view is visible
+      await page.waitForSelector('.c-imagery__main-image__bg', { state: 'visible' });
+
+      // Close the large view
+      await page.getByLabel('Close').click();
+    });
+  });
+
+  // let flexibleLayout;
   test.beforeEach(async ({ page }) => {
     await page.goto('./', { waitUntil: 'domcontentloaded' });
 
@@ -555,6 +585,7 @@ test.describe('Example Imagery in Time Strip', () => {
     // Navigate to timestrip
     await page.goto(timeStripObject.url);
   });
+
   test('Clicking a thumbnail loads the image in large view', async ({ page, browserName }) => {
     test.info().annotations.push({
       type: 'issue',

e2e/tests/performance/contract/imagery.contract.perf.spec.js

@@ -155,6 +155,14 @@ test.describe('Performance tests', () => {
     await page.locator('button:has-text("Large View")').click(); //This action includes the performance.mark named 'viewLarge.start'
     await page.evaluate(() => window.performance.mark('viewLarge.start.test')); //This is a mark only to compare evaluate timing
 
+    // Click Close Icon to return to normal view
+    await page.locator('[aria-label="Close"]').click();
+    await page.evaluate(() => window.performance.mark('view-large-close-button'));
+
+    // Open Large view by double-clicking on the image wrapper
+    await page.locator('.image-wrapper').dblclick(); //This action includes the performance.mark named 'viewLarge.start'
+    await page.evaluate(() => window.performance.mark('viewLarge.start.test')); //This is a mark only to compare evaluate timing
+
     //Time to Imagery Rendered in Large Frame
     await page.waitForSelector('.c-imagery__main-image__bg', { state: 'visible' });
     await page.evaluate(() => window.performance.mark('background-image-frame'));

src/plugins/imagery/components/ImageryView.vue

@@ -46,7 +46,7 @@
         @start-pan="startPan"
         @toggle-layer-visibility="toggleLayerVisibility"
       />
-      <div ref="imageBG" class="c-imagery__main-image__bg" @click="expand">
+      <div ref="imageBG" class="c-imagery__main-image__bg">
         <div v-if="zoomFactor > 1" class="c-imagery__hints">
           {{ formatImageAltText }}
         </div>
@@ -58,6 +58,7 @@
             height: `${sizedImageHeight}px`
           }"
           @mousedown="handlePanZoomClick"
+          @dblclick="expand"
         >
           <div
             v-for="(layer, index) in visibleLayers"