From b11bd90bba115f03756c212365465d4b623f6ab9 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 5 Aug 2024 18:11:56 -0300
Subject: [PATCH] Uses intersection observer to trigger geocordinate map
 resizing instead of event from parent components.

---
 .../geocoordinate/TainacanGeoCoordinate.vue   | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/views/admin/components/metadata-types/geocoordinate/TainacanGeoCoordinate.vue b/src/views/admin/components/metadata-types/geocoordinate/TainacanGeoCoordinate.vue
index d2803e12e..7e192bcd8 100644
--- a/src/views/admin/components/metadata-types/geocoordinate/TainacanGeoCoordinate.vue
+++ b/src/views/admin/components/metadata-types/geocoordinate/TainacanGeoCoordinate.vue
@@ -124,6 +124,7 @@
                 latitude: -14.4086569,
                 longitude: -51.31668,
                 selected: [],
+                mapIntersectionObserver: null
             }
         },
         computed: {
@@ -193,25 +194,26 @@
             }
         },
         created() {
-            if (this.value && this.value != "")
+            if ( this.value && this.value != "" )
                 this.selected = Array.isArray(this.value) ? (this.value.length == 1 && this.value[0] == "" ? [] : this.value) : [this.value];
-            
-            // Listens to window resize event to update map bounds
-            // We need to pass mapComponentRef here instead of creating it inside the function
-            // otherwise the listener would conflict when multiple geo metadata are inserted.
-            const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
-            this.$emitter.on('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
         },
         mounted() {
             nextTick(() => {
                 const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
                 this.handleWindowResize(mapComponentRef);
+
+                // Intersection Observer to handle map resize
+                if ( this.$refs[mapComponentRef] && this.$refs[mapComponentRef]['$el'] ) {
+                    this.mapIntersectionObserver = new IntersectionObserver((entries) => {
+                        entries.forEach((entry) => {
+                            if (entry.isIntersecting)
+                                this.handleWindowResize(mapComponentRef);
+                        });
+                    }, { threshold: 0.1 });
+                    this.mapIntersectionObserver.observe(this.$refs[mapComponentRef]['$el']);
+                }
             });
         },
-        beforeUnmount() {
-            const mapComponentRef = 'map--' + this.itemMetadatumIdentifier;
-            this.$emitter.off('itemEditionFormResize', () => this.handleWindowResize(mapComponentRef));
-        },
         methods: {
             onUpdateFromLatitudeInput: _.debounce( function(value) {
                 let newLatitude = value;