From b0e2f79954c3c8a67f034a9a4cd1d7716cbf6ba4 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 21 May 2024 17:08:17 +1200
Subject: [PATCH 1/4] Add fit viewport button toggle for map area

---
 src/components/DialogToolbarContent.vue | 23 +++++++++++++++++++++--
 src/components/MapContent.vue           |  9 +++++++++
 src/components/SplitDialog.vue          |  6 +++---
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/DialogToolbarContent.vue b/src/components/DialogToolbarContent.vue
index 943c2578..5d5efff6 100644
--- a/src/components/DialogToolbarContent.vue
+++ b/src/components/DialogToolbarContent.vue
@@ -26,7 +26,7 @@
           <map-svg-icon icon="help" class="sync-help header-icon"/>
         </template>
         <template #default>
-            When in Linked mode the two maps will interact 
+            When in Linked mode the two maps will interact
             <br>
             together. Select an organ in one and it will
             <br>
@@ -38,6 +38,18 @@
     </div>
 
     <el-row class="icon-group">
+      <el-popover
+        class="tooltip"
+        content="Fit Viewport"
+        placement="bottom-end"
+        :teleported=false
+        trigger="hover"
+        popper-class="header-popper"
+      >
+        <template #reference>
+          <map-svg-icon :icon="isFitViewport ? 'undock' : 'dock'" class="header-icon" @click="onFitViewport" />
+        </template>
+      </el-popover>
       <el-popover
         v-if="activeViewRef"
         :virtual-ref="activeViewRef"
@@ -259,6 +271,7 @@ export default {
   data: function() {
     return {
       isFullscreen: false,
+      isFitViewport: false,
       loadingLink: true,
       shareLinkDisplay: false,
       independent: true,
@@ -279,6 +292,12 @@ export default {
       this.$emit("onFullscreen");
       this.isFullscreen = !this.isFullscreen;
     },
+    onFitViewport: function () {
+      if (this.$root.$refs.map.$el) {
+        this.isFitViewport = !this.isFitViewport;
+        this.$root.$refs.map.$el.classList.toggle('fit-screen');
+      }
+    },
     close: function() {
       this.$emit("close");
     },
@@ -372,7 +391,7 @@ export default {
   &:hover, &:focus {
     color:#FFFFFF;
     background-color:$app-primary-color;
-    box-shadow: -3px 2px 4px #000000; 
+    box-shadow: -3px 2px 4px #000000;
   }
 }
 
diff --git a/src/components/MapContent.vue b/src/components/MapContent.vue
index 0df46309..650d7cfe 100644
--- a/src/components/MapContent.vue
+++ b/src/components/MapContent.vue
@@ -328,6 +328,15 @@ export default {
   height: 100%;
   width:100%;
   z-index:1;
+
+  &.fit-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+  }
 }
 
 </style>
diff --git a/src/components/SplitDialog.vue b/src/components/SplitDialog.vue
index 9c8ec294..372c0010 100644
--- a/src/components/SplitDialog.vue
+++ b/src/components/SplitDialog.vue
@@ -73,10 +73,10 @@ export default {
       return refName;
     },
     getStyle: function(id) {
-      /* 
-        Set the style based on the position of the spltters 
+      /*
+        Set the style based on the position of the spltters
         Header is 30px in height and the splitter is 1px in
-        height/width. The width, height and positon of the 
+        height/width. The width, height and positon of the
         viewer should take that into account.
       */
       const refName = this.getRefsName(id);

From 475a9ef0ecd0e45044610ef21a0edd53d98c7b5b Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 12 Jul 2024 12:36:23 +1200
Subject: [PATCH 2/4] Update fit to viewport function

---
 src/components/DialogToolbarContent.vue | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/DialogToolbarContent.vue b/src/components/DialogToolbarContent.vue
index 5d5efff6..cb3405c6 100644
--- a/src/components/DialogToolbarContent.vue
+++ b/src/components/DialogToolbarContent.vue
@@ -40,14 +40,18 @@
     <el-row class="icon-group">
       <el-popover
         class="tooltip"
-        content="Fit Viewport"
+        :content="isFitViewport ? 'Exit fit viewport' : 'Fit to viewport'"
         placement="bottom-end"
         :teleported=false
         trigger="hover"
         popper-class="header-popper"
       >
         <template #reference>
-          <map-svg-icon :icon="isFitViewport ? 'undock' : 'dock'" class="header-icon" @click="onFitViewport" />
+          <map-svg-icon
+            :icon="isFitViewport ? 'undock' : 'dock'"
+            class="header-icon"
+            @click="toggleMapFitView"
+          />
         </template>
       </el-popover>
       <el-popover
@@ -292,10 +296,19 @@ export default {
       this.$emit("onFullscreen");
       this.isFullscreen = !this.isFullscreen;
     },
-    onFitViewport: function () {
-      if (this.$root.$refs.map.$el) {
-        this.isFitViewport = !this.isFitViewport;
-        this.$root.$refs.map.$el.classList.toggle('fit-screen');
+    toggleMapFitView: function () {
+      const toolbarEl = this.$el;
+      const mapContainerEl = toolbarEl.closest('.mapcontent');
+      if (mapContainerEl) {
+        if (this.isFitViewport) {
+          this.isFitViewport = false;
+          mapContainerEl.classList.remove('fit-screen');
+          document.body.classList.remove('el-popup-parent--hidden');
+        } else {
+          this.isFitViewport = true;
+          mapContainerEl.classList.add('fit-screen');
+          document.body.classList.add('el-popup-parent--hidden');
+        }
       }
     },
     close: function() {

From 167a0528543316303ecf8e9dba2a9f42da8e7332 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 15 Nov 2024 15:59:37 +1300
Subject: [PATCH 3/4] Add exit fit viewport by Esc key

---
 src/components/DialogToolbarContent.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/DialogToolbarContent.vue b/src/components/DialogToolbarContent.vue
index 2f69c116..bb36ddd0 100644
--- a/src/components/DialogToolbarContent.vue
+++ b/src/components/DialogToolbarContent.vue
@@ -296,11 +296,11 @@ export default {
       this.$emit("onFullscreen");
       this.isFullscreen = !this.isFullscreen;
     },
-    toggleMapFitView: function () {
+    toggleMapFitView: function (exitFitView = false) {
       const toolbarEl = this.$el;
       const mapContainerEl = toolbarEl.closest('.mapcontent');
       if (mapContainerEl) {
-        if (this.isFitViewport) {
+        if (this.isFitViewport || exitFitView === true) {
           this.isFitViewport = false;
           mapContainerEl.classList.remove('fit-screen');
           document.body.classList.remove('el-popup-parent--hidden');
@@ -311,6 +311,15 @@ export default {
         }
       }
     },
+    onKeydown: function (event) {
+      if (event.defaultPrevented) {
+        return; // Do nothing if the event was already processed
+      }
+
+      if (event.key === 'Escape') {
+        this.toggleMapFitView(true);
+      }
+    },
     onFullscreenEsc: function () {
       if (!document.fullscreenElement) {
         this.isFullscreen = false;
@@ -345,9 +354,11 @@ export default {
     this.permalinkRef = shallowRef(this.$refs.permalinkRef);
 
     document.addEventListener('fullscreenchange', this.onFullscreenEsc);
+    window.addEventListener('keydown', this.onKeydown);
   },
   unmounted: function () {
     document.removeEventListener('fullscreenchange', this.onFullscreenEsc);
+    window.removeEventListener('keydown', this.onKeydown);
   },
 };
 </script>

From 6cd4a20862bfce0ad77c398694e419a82d282b7c Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 15 Nov 2024 16:02:22 +1300
Subject: [PATCH 4/4] Hide fit viewport tooltip after clicking

---
 src/components/DialogToolbarContent.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/DialogToolbarContent.vue b/src/components/DialogToolbarContent.vue
index bb36ddd0..f39d0b49 100644
--- a/src/components/DialogToolbarContent.vue
+++ b/src/components/DialogToolbarContent.vue
@@ -44,6 +44,7 @@
         placement="bottom-end"
         :teleported=false
         trigger="hover"
+        ref="fitViewPopover"
         popper-class="header-popper"
       >
         <template #reference>
@@ -310,6 +311,10 @@ export default {
           document.body.classList.add('el-popup-parent--hidden');
         }
       }
+      // hide tooltip
+      if (this.$refs.fitViewPopover) {
+        this.$refs.fitViewPopover.hide();
+      }
     },
     onKeydown: function (event) {
       if (event.defaultPrevented) {