@sigma/layer-maplibre 3.0.0-beta.8 → 3.0.0

package/dist/sigma-layer-maplibre.cjs.dev.js

@@ -79,12 +79,11 @@ function graphToLatlng(map, coords) {
  * BBOX sync : map to sigma
  */
 function syncSigmaWithMap(sigma, map) {
-  var mapBound = map.getBounds();
-
   // Compute sigma center
-  var center = sigma.viewportToFramedGraph(sigma.graphToViewport(latlngToGraph(map, mapBound.getCenter())));
+  var center = sigma.viewportToFramedGraph(sigma.graphToViewport(latlngToGraph(map, map.getCenter())));
 
   // Compute sigma ratio
+  var mapBound = map.getBounds();
   var northEast = sigma.graphToViewport(latlngToGraph(map, mapBound.getNorthEast()));
   var southWest = sigma.graphToViewport(latlngToGraph(map, mapBound.getSouthWest()));
   var viewportBoundDimension = {
@@ -142,7 +141,8 @@ function bindMaplibreLayer(sigma, opts) {
   var prevSigmaSettings = sigma.getSettings();
 
   // Creating map container
-  var mapContainer = sigma.createLayer("layer-leaflet", "div", {
+  var mapLayerName = "layer-maplibre";
+  var mapContainer = sigma.createLayer(mapLayerName, "div", {
     style: {
       position: "absolute",
       inset: "0"
@@ -210,8 +210,29 @@ function bindMaplibreLayer(sigma, opts) {
   // When sigma is resize, we need to update the graph coordinate (the ref has changed)
   // and recompute the zoom bounds
   function fnOnResize() {
-    updateGraphCoordinates(sigma.getGraph());
-    fnSyncSigmaWithMap();
+    // Avoid sync map with sigma while we do the resize
+    // otherwise there is a sideeffect...
+    sigma.off("afterRender", fnSyncMapWithSigma);
+    var center = map.getCenter();
+
+    // Ask the map to resize
+    map.once("resize", function () {
+      // NB: resize can change the center of the map, and we want to keep it
+      map.setCenter(center);
+
+      // Map ref has changed, we need to update the graph coordinates
+      updateGraphCoordinates(sigma.getGraph());
+
+      // Do the sync
+      fnSyncSigmaWithMap();
+
+      // Re-enable the map sync with sigma in the next frame
+      setTimeout(function () {
+        fnSyncMapWithSigma();
+        sigma.on("afterRender", fnSyncMapWithSigma);
+      }, 0);
+    });
+    map.resize();
   }
 
   // Clean up function to remove everything
@@ -220,7 +241,7 @@ function bindMaplibreLayer(sigma, opts) {
       isKilled = true;
       map.off("moveend", fnSyncSigmaWithMap);
       map.remove();
-      mapContainer.remove();
+      sigma.killLayer(mapLayerName);
       sigma.off("afterRender", fnSyncMapWithSigma);
       sigma.off("resize", fnOnResize);
 

package/dist/sigma-layer-maplibre.cjs.prod.js

@@ -79,12 +79,11 @@ function graphToLatlng(map, coords) {
  * BBOX sync : map to sigma
  */
 function syncSigmaWithMap(sigma, map) {
-  var mapBound = map.getBounds();
-
   // Compute sigma center
-  var center = sigma.viewportToFramedGraph(sigma.graphToViewport(latlngToGraph(map, mapBound.getCenter())));
+  var center = sigma.viewportToFramedGraph(sigma.graphToViewport(latlngToGraph(map, map.getCenter())));
 
   // Compute sigma ratio
+  var mapBound = map.getBounds();
   var northEast = sigma.graphToViewport(latlngToGraph(map, mapBound.getNorthEast()));
   var southWest = sigma.graphToViewport(latlngToGraph(map, mapBound.getSouthWest()));
   var viewportBoundDimension = {
@@ -142,7 +141,8 @@ function bindMaplibreLayer(sigma, opts) {
   var prevSigmaSettings = sigma.getSettings();
 
   // Creating map container
-  var mapContainer = sigma.createLayer("layer-leaflet", "div", {
+  var mapLayerName = "layer-maplibre";
+  var mapContainer = sigma.createLayer(mapLayerName, "div", {
     style: {
       position: "absolute",
       inset: "0"
@@ -210,8 +210,29 @@ function bindMaplibreLayer(sigma, opts) {
   // When sigma is resize, we need to update the graph coordinate (the ref has changed)
   // and recompute the zoom bounds
   function fnOnResize() {
-    updateGraphCoordinates(sigma.getGraph());
-    fnSyncSigmaWithMap();
+    // Avoid sync map with sigma while we do the resize
+    // otherwise there is a sideeffect...
+    sigma.off("afterRender", fnSyncMapWithSigma);
+    var center = map.getCenter();
+
+    // Ask the map to resize
+    map.once("resize", function () {
+      // NB: resize can change the center of the map, and we want to keep it
+      map.setCenter(center);
+
+      // Map ref has changed, we need to update the graph coordinates
+      updateGraphCoordinates(sigma.getGraph());
+
+      // Do the sync
+      fnSyncSigmaWithMap();
+
+      // Re-enable the map sync with sigma in the next frame
+      setTimeout(function () {
+        fnSyncMapWithSigma();
+        sigma.on("afterRender", fnSyncMapWithSigma);
+      }, 0);
+    });
+    map.resize();
   }
 
   // Clean up function to remove everything
@@ -220,7 +241,7 @@ function bindMaplibreLayer(sigma, opts) {
       isKilled = true;
       map.off("moveend", fnSyncSigmaWithMap);
       map.remove();
-      mapContainer.remove();
+      sigma.killLayer(mapLayerName);
       sigma.off("afterRender", fnSyncMapWithSigma);
       sigma.off("resize", fnOnResize);
 

package/dist/sigma-layer-maplibre.esm.js

@@ -75,12 +75,11 @@ function graphToLatlng(map, coords) {
  * BBOX sync : map to sigma
  */
 function syncSigmaWithMap(sigma, map) {
-  var mapBound = map.getBounds();
-
   // Compute sigma center
-  var center = sigma.viewportToFramedGraph(sigma.graphToViewport(latlngToGraph(map, mapBound.getCenter())));
+  var center = sigma.viewportToFramedGraph(sigma.graphToViewport(latlngToGraph(map, map.getCenter())));
 
   // Compute sigma ratio
+  var mapBound = map.getBounds();
   var northEast = sigma.graphToViewport(latlngToGraph(map, mapBound.getNorthEast()));
   var southWest = sigma.graphToViewport(latlngToGraph(map, mapBound.getSouthWest()));
   var viewportBoundDimension = {
@@ -138,7 +137,8 @@ function bindMaplibreLayer(sigma, opts) {
   var prevSigmaSettings = sigma.getSettings();
 
   // Creating map container
-  var mapContainer = sigma.createLayer("layer-leaflet", "div", {
+  var mapLayerName = "layer-maplibre";
+  var mapContainer = sigma.createLayer(mapLayerName, "div", {
     style: {
       position: "absolute",
       inset: "0"
@@ -206,8 +206,29 @@ function bindMaplibreLayer(sigma, opts) {
   // When sigma is resize, we need to update the graph coordinate (the ref has changed)
   // and recompute the zoom bounds
   function fnOnResize() {
-    updateGraphCoordinates(sigma.getGraph());
-    fnSyncSigmaWithMap();
+    // Avoid sync map with sigma while we do the resize
+    // otherwise there is a sideeffect...
+    sigma.off("afterRender", fnSyncMapWithSigma);
+    var center = map.getCenter();
+
+    // Ask the map to resize
+    map.once("resize", function () {
+      // NB: resize can change the center of the map, and we want to keep it
+      map.setCenter(center);
+
+      // Map ref has changed, we need to update the graph coordinates
+      updateGraphCoordinates(sigma.getGraph());
+
+      // Do the sync
+      fnSyncSigmaWithMap();
+
+      // Re-enable the map sync with sigma in the next frame
+      setTimeout(function () {
+        fnSyncMapWithSigma();
+        sigma.on("afterRender", fnSyncMapWithSigma);
+      }, 0);
+    });
+    map.resize();
   }
 
   // Clean up function to remove everything
@@ -216,7 +237,7 @@ function bindMaplibreLayer(sigma, opts) {
       isKilled = true;
       map.off("moveend", fnSyncSigmaWithMap);
       map.remove();
-      mapContainer.remove();
+      sigma.killLayer(mapLayerName);
       sigma.off("afterRender", fnSyncMapWithSigma);
       sigma.off("resize", fnOnResize);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigma/layer-maplibre",
-  "version": "3.0.0-beta.8",
+  "version": "3.0.0",
   "description": "A plugin to set a geographical map in background",
   "main": "dist/sigma-layer-maplibre.cjs.js",
   "module": "dist/sigma-layer-maplibre.esm.js",
@@ -45,5 +45,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "8edd2ee8dad222bac99439feed321d55896bb61e"
+  "gitHead": "f0187cb13da41310bf375caf7105db2f18bc89d2"
 }