chore: Use ResizeObserver to invalidate Leaflet maps

roadiz · Sep 18, 2023 · 3e84fb8 · 3e84fb8
1 parent 49a68c4
commit 3e84fb8
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 17 deletions.
diff --git a/lib/Rozier/src/Resources/app/widgets/LeafletGeotagField.js b/lib/Rozier/src/Resources/app/widgets/LeafletGeotagField.js
@@ -127,11 +127,28 @@ export default class LeafletGeotagField {
             'keypress',
             $.proxy(this.requestGeocode, this, marker, element, $geocodeReset, map)
         )
-        const resetMapProxy = $.proxy(this.resetMap, this, map, marker, mapOptions)
-        window.Rozier.$window.on('resize', resetMapProxy)
-        window.Rozier.$window.on('pageshowend', resetMapProxy)
-        window.addEventListener('NodeEditSource:tabSwitched', resetMapProxy)
+
         this.resetMap(map, marker, mapOptions, null)
+
+        // Use a resize observer to invalidate the map when the container changes size or is hidden
+        const resizeObserver = new ResizeObserver((entries) => {
+            map.invalidateSize({
+                animate: false,
+                pan: false,
+            })
+            if (marker !== null) {
+                map.panTo(marker.getLatLng(), {
+                    animate: false,
+                    pan: false,
+                })
+            } else {
+                map.panTo(mapOptions.center, {
+                    animate: false,
+                    pan: false,
+                })
+            }
+        })
+        resizeObserver.observe(document.getElementById(fieldId))
     }
 
     resetMap(map, marker, mapOptions) {

diff --git a/lib/Rozier/src/Resources/app/widgets/MultiLeafletGeotagField.js b/lib/Rozier/src/Resources/app/widgets/MultiLeafletGeotagField.js
@@ -134,12 +134,29 @@ export default class MultiLeafletGeotagField extends LeafletGeotagField {
             'keypress',
             $.proxy(this.requestGeocode, this, markers, element, $geocodeReset, map, $selector)
         )
-        const resetMapProxy = $.proxy(this.resetMap, this, map, markers, mapOptions)
-        window.Rozier.$window.on('resize', resetMapProxy)
-        window.Rozier.$window.on('pageshowend', resetMapProxy)
-        window.addEventListener('NodeEditSource:tabSwitched', resetMapProxy)
+
         this.resetMap(map, markers, mapOptions, null)
         this.syncSelector($selector, markers, map, element)
+
+        // Use a resize observer to invalidate the map when the container changes size or is hidden
+        const resizeObserver = new ResizeObserver((entries) => {
+            map.invalidateSize({
+                animate: false,
+                pan: false,
+            })
+            if (typeof markers !== 'undefined' && markers.length > 0) {
+                map.fitBounds(this.getMediumLatLng(markers), {
+                    animate: false,
+                    pan: false,
+                })
+            } else {
+                map.panTo(mapOptions.center, {
+                    animate: false,
+                    pan: false,
+                })
+            }
+        })
+        resizeObserver.observe(document.getElementById(fieldId))
     }
 
     /**
@@ -218,7 +235,10 @@ export default class MultiLeafletGeotagField extends LeafletGeotagField {
         }
 
         window.requestAnimationFrame(() => {
-            map.invalidateSize(true)
+            map.invalidateSize({
+                animate: true,
+                pan: true,
+            })
             if (typeof markers !== 'undefined' && markers.length > 0) {
                 map.fitBounds(this.getMediumLatLng(markers))
             } else {

diff --git a/lib/Rozier/src/Resources/views/partials/css-inject.html.twig b/lib/Rozier/src/Resources/views/partials/css-inject.html.twig
@@ -1,7 +1,7 @@
 
 <link href="{{ asset('css/vendor.00b2be12b114cc414b2c.css', 'Rozier') }}" rel="stylesheet">
 
-<link href="{{ asset('css/app.01f378ad50bbb93dcc4f.css', 'Rozier') }}" rel="stylesheet">
+<link href="{{ asset('css/app.579e6fa11a75463030a7.css', 'Rozier') }}" rel="stylesheet">
 
 
 

diff --git a/lib/Rozier/src/Resources/views/partials/js-inject.html.twig b/lib/Rozier/src/Resources/views/partials/js-inject.html.twig
@@ -1,5 +1,5 @@
 
-<script src="{{ asset('js/vendor.f16645c80b8f94714755.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/vendor.5f58b21f036847b06030.js', 'Rozier') }}" defer type="text/javascript"></script>
 
-<script src="{{ asset('js/app.f16645c80b8f94714755.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/app.5f58b21f036847b06030.js', 'Rozier') }}" defer type="text/javascript"></script>
 
diff --git a/lib/Rozier/src/Resources/views/partials/simple-js-inject.html.twig b/lib/Rozier/src/Resources/views/partials/simple-js-inject.html.twig
@@ -1,3 +1,3 @@
 
-<script src="{{ asset('js/simple.f16645c80b8f94714755.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/simple.5f58b21f036847b06030.js', 'Rozier') }}" defer type="text/javascript"></script>
 
diff --git a/...c/static/css/app.01f378ad50bbb93dcc4f.css → ...c/static/css/app.579e6fa11a75463030a7.css b/...c/static/css/app.01f378ad50bbb93dcc4f.css → ...c/static/css/app.579e6fa11a75463030a7.css
diff --git a/...atic/css/app.01f378ad50bbb93dcc4f.css.map → ...atic/css/app.579e6fa11a75463030a7.css.map b/...atic/css/app.01f378ad50bbb93dcc4f.css.map → ...atic/css/app.579e6fa11a75463030a7.css.map
diff --git a/...src/static/js/app.f16645c80b8f94714755.js → ...src/static/js/app.5f58b21f036847b06030.js b/...src/static/js/app.f16645c80b8f94714755.js → ...src/static/js/app.5f58b21f036847b06030.js
diff --git a/.../static/js/simple.f16645c80b8f94714755.js → .../static/js/simple.5f58b21f036847b06030.js b/.../static/js/simple.f16645c80b8f94714755.js → .../static/js/simple.5f58b21f036847b06030.js
diff --git a/.../static/js/vendor.f16645c80b8f94714755.js → .../static/js/vendor.5f58b21f036847b06030.js b/.../static/js/vendor.f16645c80b8f94714755.js → .../static/js/vendor.5f58b21f036847b06030.js
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,3 @@

		<script src="{{ asset('js/simple.f16645c80b8f94714755.js', 'Rozier') }}" defer type="text/javascript"></script>
		<script src="{{ asset('js/simple.5f58b21f036847b06030.js', 'Rozier') }}" defer type="text/javascript"></script>