From 36ed3e9739429facaa7039868bb173d71bf30033 Mon Sep 17 00:00:00 2001
From: Leonie Peters <45720401+LeoniePeters@users.noreply.github.com>
Date: Wed, 20 Nov 2024 13:36:44 +0100
Subject: [PATCH] Render full image on active annotation or highlight (#2481)

---
 .../src/components/media/MediaImageViewer.vue     | 15 +++++++++++++--
 .../components/media/MediaImageViewer.spec.js     |  9 +++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/portal/src/components/media/MediaImageViewer.vue b/packages/portal/src/components/media/MediaImageViewer.vue
index 839bc9a363..dff9becee3 100644
--- a/packages/portal/src/components/media/MediaImageViewer.vue
+++ b/packages/portal/src/components/media/MediaImageViewer.vue
@@ -100,6 +100,7 @@
 
     data() {
       return {
+        fullImageRendered: false,
         info: null,
         olExtent: null,
         olMap: null,
@@ -199,7 +200,11 @@
         return new Feature(poly);
       },
 
-      highlightAnnotation() {
+      async highlightAnnotation() {
+        if (!this.fullImageRendered) {
+          await this.renderFullImage();
+        }
+
         this.initOlAnnotationLayer();
 
         const layer = this.olMap.getLayers().item(1);
@@ -273,9 +278,10 @@
 
         this.initOlMap(mapOptions);
         this.olMap.getInteractions().forEach((interaction) => interaction.setActive(false));
-        // TODO: add other interactions: anno click, full-text search
+
         this.olMap.on('click', this.renderFullImage);
         this.olMap.getView().on('change:resolution', this.renderFullImageOnFirstZoomIn);
+        this.fullImageRendered = false;
       },
 
       renderFullImageOnFirstZoomIn(event) {
@@ -296,6 +302,8 @@
         const url = this.$apis.record.mediaProxyUrl(this.url, this.itemId, { disposition: 'inline' });
         const mapOptions = await this.initOlImageLayerStatic(url, this.width, this.height);
         this.initMapWithFullImage(mapOptions);
+
+        this.fullImageRendered = true;
       },
 
       // IIIF Image API
@@ -340,6 +348,9 @@
         if (this.source === 'IIIF') {
           const mapOptions = this.initOlImageLayerIIIF();
           this.initMapWithFullImage(mapOptions);
+          this.fullImageRendered = true;
+        } else if (this.annotation) {
+          this.renderFullImage();
         } else {
           this.renderThumbnail();
         }
diff --git a/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js b/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js
index b0854c4629..bbac9392b9 100644
--- a/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js
+++ b/packages/portal/tests/unit/components/media/MediaImageViewer.spec.js
@@ -131,6 +131,15 @@ describe('components/media/MediaImageViewer', () => {
 
   describe('methods', () => {
     describe('highlightAnnotation', () => {
+      describe('when the full image is not yet rendered', () => {
+        it('renders the full image', async() => {
+          const wrapper = factory({ propsData: { url, width, height } });
+
+          await wrapper.vm.highlightAnnotation();
+
+          expect(wrapper.vm.fullImageRendered).toBe(true);
+        });
+      });
       it('initialises a vector layer for annotations', async() => {
         const annotation = {
           target: {