From 15b6887f36e1ca69f74e764c9307c59cc69e2741 Mon Sep 17 00:00:00 2001
From: Benoit Simard <contact@bsimard.com>
Date: Tue, 19 Nov 2024 12:21:29 +0100
Subject: [PATCH] [layer-leaflet/maplibre] fix issue on sigma's container
 resizing

When the container height/width changed (programmatically, ie not a resize event), the map layer was not updated or badly.
By creating the map's container via the sigma API and by invalidate the
map's size, the issue is fixed.
---
 packages/layer-leaflet/src/index.ts  | 9 ++++++---
 packages/layer-maplibre/src/index.ts | 8 +++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/layer-leaflet/src/index.ts b/packages/layer-leaflet/src/index.ts
index 9db996029..ff23aaf47 100644
--- a/packages/layer-leaflet/src/index.ts
+++ b/packages/layer-leaflet/src/index.ts
@@ -26,9 +26,11 @@ export default function bindLeafletLayer(
   const prevSigmaSettings = sigma.getSettings();
 
   // Creating map container
-  const mapContainer = document.createElement("div");
-  mapContainer.classList.add("sigma-layer-leaflet");
-  mapContainer.setAttribute("style", "position: absolute; inset: 0; z-index: 0");
+  const mapContainer = sigma.createLayer("layer-leaflet", "div", {
+    style: { position: "absolute", inset: "0", zIndex: "0" },
+    // 'edges' is the first sigma layer
+    beforeLayer: "edges",
+  });
   sigma.getContainer().prepend(mapContainer);
 
   // Initialize the map
@@ -104,6 +106,7 @@ export default function bindLeafletLayer(
   // When sigma is resize, we need to update the graph coordinate (the ref has changed)
   // and recompute the zoom bounds
   function fnOnResize() {
+    map.invalidateSize();
     updateGraphCoordinates(sigma.getGraph());
     fnSyncSigmaWithMap();
     setSigmaRatioBounds(sigma, map);
diff --git a/packages/layer-maplibre/src/index.ts b/packages/layer-maplibre/src/index.ts
index 0b9b4757e..cdaf05088 100644
--- a/packages/layer-maplibre/src/index.ts
+++ b/packages/layer-maplibre/src/index.ts
@@ -24,9 +24,11 @@ export default function bindMaplibreLayer(
   const prevSigmaSettings = sigma.getSettings();
 
   // Creating map container
-  const mapContainer = document.createElement("div");
-  mapContainer.classList.add("sigma-layer-maplibre");
-  mapContainer.setAttribute("style", "position: absolute; inset: 0");
+  const mapContainer = sigma.createLayer("layer-leaflet", "div", {
+    style: { position: "absolute", inset: "0" },
+    // 'edges' is the first sigma layer
+    beforeLayer: "edges",
+  });
   sigma.getContainer().prepend(mapContainer);
 
   // Initialize the map