@sigma/layer-maplibre 3.0.0 → 4.0.0-alpha.1

package/LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (C) 2013-2024, Alexis Jacomy, Guillaume Plique, Benoît Simard https://www.sigmajs.org
+Copyright (C) 2012-2026, Alexis Jacomy, Guillaume Plique, Benoît Simard https://www.sigmajs.org
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"),
 to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,

package/README.md

@@ -24,4 +24,4 @@ const sigma = new Sigma(graph, container);
 bindMaplibreLayer(sigma);
 ```
 
-Please check the related [Storybook](https://github.com/jacomyal/sigma.js/tree/main/packages/storybook/stories/3-additional-packages/layer-maplibre) for more advanced examples.
+Please check the [website examples](https://www.sigmajs.org/examples/) for more advanced examples.

package/dist/declarations/src/index.d.ts

@@ -11,7 +11,7 @@ import { graphToLatlng, latlngToGraph } from "./utils.js";
  * @param opts.getNodeLatLng Function to retrieve lat/long values from a node's attributs (default is lat & lng)
  */
 export default function bindMaplibreLayer(sigma: Sigma, opts?: {
-    mapOptions?: Omit<MapOptions, "container" | "center" | "zoom" | "minPitch" | "maxPitch">;
+    mapOptions?: Omit<MapOptions, "container" | "center" | "zoom" | "bounds" | "minPitch" | "maxPitch" | "interactive">;
     getNodeLatLng?: (nodeAttributes: Attributes) => {
         lat: number;
         lng: number;

package/dist/declarations/src/utils.d.ts

@@ -1,10 +1,7 @@
-import { Map } from "maplibre-gl";
-import { Sigma } from "sigma";
-export declare const MAX_VALID_LATITUDE = 85.051129;
 /**
  * Given a geo point returns its graph coords.
  */
-export declare function latlngToGraph(map: Map, coord: {
+export declare function latlngToGraph(coord: {
     lat: number;
     lng: number;
 }): {
@@ -12,20 +9,12 @@ export declare function latlngToGraph(map: Map, coord: {
     y: number;
 };
 /**
- * Given a graph coords returns its lat/lng coords.
+ * Given graph coords returns its lat/lng coords.
  */
-export declare function graphToLatlng(map: Map, coords: {
+export declare function graphToLatlng(coords: {
     x: number;
     y: number;
 }): {
     lat: number;
     lng: number;
 };
-/**
- * BBOX sync : map to sigma
- */
-export declare function syncSigmaWithMap(sigma: Sigma, map: Map): void;
-/**
- * BBOX sync : sigma to map
- */
-export declare function syncMapWithSigma(sigma: Sigma, map: Map): void;

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var utils = require('@sigma/utils');
 var maplibreGl = require('maplibre-gl');
 
 function _toPrimitive(t, r) {
@@ -54,20 +55,19 @@ function _objectSpread2(e) {
 /**
  * Given a geo point returns its graph coords.
  */
-function latlngToGraph(map, coord) {
+function latlngToGraph(coord) {
   var data = maplibreGl.MercatorCoordinate.fromLngLat(coord);
   return {
     x: data.x,
-    // Y are reversed between geo / sigma
-    y: map.getContainer().clientHeight - data.y
+    y: 1 - data.y
   };
 }
 
 /**
- * Given a graph coords returns its lat/lng coords.
+ * Given graph coords returns its lat/lng coords.
  */
-function graphToLatlng(map, coords) {
-  var mcoords = new maplibreGl.MercatorCoordinate(coords.x, map.getContainer().clientHeight - coords.y, 0);
+function graphToLatlng(coords) {
+  var mcoords = new maplibreGl.MercatorCoordinate(coords.x, 1 - coords.y, 0);
   var data = mcoords.toLngLat();
   return {
     lat: data.lat,
@@ -75,59 +75,6 @@ function graphToLatlng(map, coords) {
   };
 }
 
-/**
- * BBOX sync : map to sigma
- */
-function syncSigmaWithMap(sigma, map) {
-  // Compute sigma center
-  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 = {
-    width: Math.abs(northEast.x - southWest.x),
-    height: Math.abs(northEast.y - southWest.y)
-  };
-  var viewportDim = sigma.getDimensions();
-  var ratio = Math.min(viewportBoundDimension.width / viewportDim.width, viewportBoundDimension.height / viewportDim.height) * sigma.getCamera().getState().ratio;
-  sigma.getCamera().setState(_objectSpread2(_objectSpread2({}, center), {}, {
-    ratio: ratio
-  }));
-}
-
-/**
- * BBOX sync : sigma to map
- */
-function syncMapWithSigma(sigma, map) {
-  var viewportDimensions = sigma.getDimensions();
-
-  // Graph BBox
-  var graphBottomLeft = sigma.viewportToGraph({
-    x: 0,
-    y: viewportDimensions.height
-  }, {
-    padding: 0
-  });
-  var graphTopRight = sigma.viewportToGraph({
-    x: viewportDimensions.width,
-    y: 0
-  }, {
-    padding: 0
-  });
-
-  // Geo BBox
-  var geoSouthWest = graphToLatlng(map, graphBottomLeft);
-  var geoNorthEast = graphToLatlng(map, graphTopRight);
-
-  // Set map BBox
-  var bounds = new maplibreGl.LngLatBounds([geoSouthWest, geoNorthEast]);
-  map.fitBounds(bounds, {
-    duration: 0
-  });
-}
-
 /**
  * On the graph, we store the 2D projection of the geographical lat/long.
  *
@@ -139,40 +86,26 @@ function bindMaplibreLayer(sigma, opts) {
   // Keeping data for the cleanup
   var isKilled = false;
   var prevSigmaSettings = sigma.getSettings();
-
-  // Creating map container
-  var mapLayerName = "layer-maplibre";
-  var mapContainer = sigma.createLayer(mapLayerName, "div", {
-    style: {
-      position: "absolute",
-      inset: "0"
-    },
-    // 'edges' is the first sigma layer
-    beforeLayer: "edges"
-  });
-  sigma.getContainer().prepend(mapContainer);
-
-  // Initialize the map
-  var map = new maplibreGl.Map(_objectSpread2({
-    container: mapContainer,
-    style: "https://demotiles.maplibre.org/style.json",
-    center: [0, 0],
-    zoom: 1,
-    minPitch: 0,
-    maxPitch: 0
-  }, (opts === null || opts === void 0 ? void 0 : opts.mapOptions) || {}));
+  var prevCustomBBox = sigma.getCustomBBox();
 
   // `stagePadding: 0` is mandatory, so the bbox of the map & Sigma is the same.
   sigma.setSetting("stagePadding", 0);
-
   // disable camera rotation
   sigma.setSetting("enableCameraRotation", false);
 
-  // Function that change the given graph by generating the sigma x,y coords by taking the geo coordinates
-  // and project them in the 2D space of the map
+  // Mercator graph coordinates are in [0,1]. Set customBBox to make
+  // normalization identity, and force a synchronous refresh so the
+  // normalization function is updated before camera constraints are applied.
+  sigma.setCustomBBox({
+    x: [0, 1],
+    y: [0, 1]
+  });
+
+  // Function that updates graph node positions from geo coordinates to
+  // Mercator [0,1] space
   function updateGraphCoordinates(graph) {
     graph.updateEachNodeAttributes(function (_node, attrs) {
-      var coords = latlngToGraph(map, opts !== null && opts !== void 0 && opts.getNodeLatLng ? opts.getNodeLatLng(attrs) : {
+      var coords = latlngToGraph(opts !== null && opts !== void 0 && opts.getNodeLatLng ? opts.getNodeLatLng(attrs) : {
         lat: attrs.lat,
         lng: attrs.lng
       });
@@ -183,95 +116,134 @@ function bindMaplibreLayer(sigma, opts) {
     });
   }
 
-  // Function that sync the map with sigma
-  function fnSyncMapWithSigma() {
-    syncMapWithSigma(sigma, map);
-  }
+  // Update graph coordinates and refresh sigma so normalization is ready
+  updateGraphCoordinates(sigma.getGraph());
+  sigma.refresh();
 
-  // Function that sync sigma with map if it's needed
-  function fnSyncSigmaWithMap() {
-    if (!sigma.getCamera().isAnimated() && !map.isMoving()) {
-      // Check that sigma & map are already in sync
-      var southWest = graphToLatlng(map, sigma.viewportToGraph({
-        x: 0,
-        y: sigma.getDimensions().height
-      }));
-      var northEast = graphToLatlng(map, sigma.viewportToGraph({
-        x: sigma.getDimensions().width,
-        y: 0
-      }));
-      var diff = Math.max(map.getBounds().getSouthWest().distanceTo(new maplibreGl.LngLat(southWest.lng, southWest.lat)), map.getBounds().getNorthEast().distanceTo(new maplibreGl.LngLat(northEast.lng, northEast.lat)));
-      if (diff > 1) {
-        syncSigmaWithMap(sigma, map);
-      }
-    }
+  // Now that normalization is correct, fit the camera to the graph's
+  // Mercator extent so the initial view frames the nodes.
+  var graph = sigma.getGraph();
+  if (graph.order) {
+    sigma.getCamera().setState(utils.getCameraStateToFitViewportToNodes(sigma, graph.nodes()));
   }
 
-  // When sigma is resize, we need to update the graph coordinate (the ref has changed)
-  // and recompute the zoom bounds
-  function fnOnResize() {
-    // Avoid sync map with sigma while we do the resize
-    // otherwise there is a sideeffect...
-    sigma.off("afterRender", fnSyncMapWithSigma);
-    var center = map.getCenter();
+  // Apply camera constraints. cameraPanBoundaries triggers cleanCameraState
+  // which uses graphToViewport — it needs the correct normalization.
+  sigma.setSetting("cameraPanBoundaries", {
+    boundaries: {
+      x: [-1, 2],
+      y: [0, 1]
+    }
+  });
 
-    // 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);
+  // Prevent zooming out beyond the world. The max ratio depends on the
+  // viewport aspect ratio: for a square graph, the Y range [0,1] fills the
+  // viewport height when ratio = min(width, height) / height.
+  function updateMaxCameraRatio() {
+    var _sigma$getDimensions = sigma.getDimensions(),
+      width = _sigma$getDimensions.width,
+      height = _sigma$getDimensions.height;
+    sigma.setSetting("maxCameraRatio", Math.min(width, height) / height);
+  }
+  updateMaxCameraRatio();
+
+  // Compute initial map bounds from sigma's current viewport, so the map's
+  // first render is already at the correct position
+  function getSigmaViewportBounds() {
+    var dims = sigma.getDimensions();
+    var graphBottomLeft = sigma.viewportToGraph({
+      x: 0,
+      y: dims.height
+    }, {
+      padding: 0
+    });
+    var graphTopRight = sigma.viewportToGraph({
+      x: dims.width,
+      y: 0
+    }, {
+      padding: 0
+    });
+    return new maplibreGl.LngLatBounds(graphToLatlng(graphBottomLeft), graphToLatlng(graphTopRight));
+  }
 
-      // Map ref has changed, we need to update the graph coordinates
-      updateGraphCoordinates(sigma.getGraph());
+  // Creating map container
+  var mapLayerName = "layer-maplibre";
+  var mapContainer = sigma.createLayer(mapLayerName, "div", {
+    style: {
+      position: "absolute",
+      inset: "0"
+    },
+    // 'stage' is the first sigma layer
+    beforeLayer: "stage"
+  });
+  sigma.getContainer().prepend(mapContainer);
 
-      // Do the sync
-      fnSyncSigmaWithMap();
+  // Initialize the map (non-interactive: sigma controls all interaction)
+  var map = new maplibreGl.Map(_objectSpread2(_objectSpread2({
+    container: mapContainer,
+    style: "https://demotiles.maplibre.org/style.json",
+    minPitch: 0,
+    maxPitch: 0
+  }, opts === null || opts === void 0 ? void 0 : opts.mapOptions), {}, {
+    interactive: false,
+    bounds: getSigmaViewportBounds()
+  }));
 
-      // Re-enable the map sync with sigma in the next frame
-      setTimeout(function () {
-        fnSyncMapWithSigma();
-        sigma.on("afterRender", fnSyncMapWithSigma);
-      }, 0);
+  // Camera state memoization to skip redundant fitBounds calls
+  var lx = NaN,
+    ly = NaN,
+    lr = NaN,
+    la = NaN;
+
+  // Sync map bounds to match sigma's viewport
+  function syncMapFromSigma() {
+    var _sigma$getCamera$getS = sigma.getCamera().getState(),
+      x = _sigma$getCamera$getS.x,
+      y = _sigma$getCamera$getS.y,
+      ratio = _sigma$getCamera$getS.ratio,
+      angle = _sigma$getCamera$getS.angle;
+    if (x === lx && y === ly && ratio === lr && angle === la) return;
+    lx = x;
+    ly = y;
+    lr = ratio;
+    la = angle;
+    map.fitBounds(getSigmaViewportBounds(), {
+      duration: 0
     });
+  }
+
+  // When sigma is resized, resize the map, recompute zoom limit, and re-sync
+  function fnOnResize() {
     map.resize();
+    updateMaxCameraRatio();
+    lx = NaN;
+    syncMapFromSigma();
   }
 
   // Clean up function to remove everything
   function clean() {
     if (!isKilled) {
       isKilled = true;
-      map.off("moveend", fnSyncSigmaWithMap);
       map.remove();
       sigma.killLayer(mapLayerName);
-      sigma.off("afterRender", fnSyncMapWithSigma);
+      sigma.off("afterRender", syncMapFromSigma);
       sigma.off("resize", fnOnResize);
+      sigma.off("kill", clean);
 
       // Reset settings
       sigma.setSetting("stagePadding", prevSigmaSettings.stagePadding);
       sigma.setSetting("enableCameraRotation", prevSigmaSettings.enableCameraRotation);
+      sigma.setSetting("maxCameraRatio", prevSigmaSettings.maxCameraRatio);
+      sigma.setSetting("cameraPanBoundaries", prevSigmaSettings.cameraPanBoundaries);
+      sigma.setCustomBBox(prevCustomBBox);
     }
   }
 
-  // Update the sigma graph for geospatial coords
-  updateGraphCoordinates(sigma.getGraph());
-
-  // When the map is ready
+  // When the map is ready, start syncing
   map.once("load", function () {
-    // Compute sigma ratio bounds
-    // /!\ must be done after the first map render
-    map.once("moveend", function () {
-      fnSyncSigmaWithMap();
-    });
-    // Do the first sync
-    fnSyncMapWithSigma();
-
-    // At each render of sigma, we do the map sync
-    sigma.on("afterRender", fnSyncMapWithSigma);
-    // Listen on resize
+    sigma.on("afterRender", syncMapFromSigma);
     sigma.on("resize", fnOnResize);
-    // Do the cleanup
     sigma.on("kill", clean);
-    // Keep sigma camera on the map
-    map.on("moveend", fnSyncSigmaWithMap);
   });
   return {
     clean: clean,

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var utils = require('@sigma/utils');
 var maplibreGl = require('maplibre-gl');
 
 function _toPrimitive(t, r) {
@@ -54,20 +55,19 @@ function _objectSpread2(e) {
 /**
  * Given a geo point returns its graph coords.
  */
-function latlngToGraph(map, coord) {
+function latlngToGraph(coord) {
   var data = maplibreGl.MercatorCoordinate.fromLngLat(coord);
   return {
     x: data.x,
-    // Y are reversed between geo / sigma
-    y: map.getContainer().clientHeight - data.y
+    y: 1 - data.y
   };
 }
 
 /**
- * Given a graph coords returns its lat/lng coords.
+ * Given graph coords returns its lat/lng coords.
  */
-function graphToLatlng(map, coords) {
-  var mcoords = new maplibreGl.MercatorCoordinate(coords.x, map.getContainer().clientHeight - coords.y, 0);
+function graphToLatlng(coords) {
+  var mcoords = new maplibreGl.MercatorCoordinate(coords.x, 1 - coords.y, 0);
   var data = mcoords.toLngLat();
   return {
     lat: data.lat,
@@ -75,59 +75,6 @@ function graphToLatlng(map, coords) {
   };
 }
 
-/**
- * BBOX sync : map to sigma
- */
-function syncSigmaWithMap(sigma, map) {
-  // Compute sigma center
-  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 = {
-    width: Math.abs(northEast.x - southWest.x),
-    height: Math.abs(northEast.y - southWest.y)
-  };
-  var viewportDim = sigma.getDimensions();
-  var ratio = Math.min(viewportBoundDimension.width / viewportDim.width, viewportBoundDimension.height / viewportDim.height) * sigma.getCamera().getState().ratio;
-  sigma.getCamera().setState(_objectSpread2(_objectSpread2({}, center), {}, {
-    ratio: ratio
-  }));
-}
-
-/**
- * BBOX sync : sigma to map
- */
-function syncMapWithSigma(sigma, map) {
-  var viewportDimensions = sigma.getDimensions();
-
-  // Graph BBox
-  var graphBottomLeft = sigma.viewportToGraph({
-    x: 0,
-    y: viewportDimensions.height
-  }, {
-    padding: 0
-  });
-  var graphTopRight = sigma.viewportToGraph({
-    x: viewportDimensions.width,
-    y: 0
-  }, {
-    padding: 0
-  });
-
-  // Geo BBox
-  var geoSouthWest = graphToLatlng(map, graphBottomLeft);
-  var geoNorthEast = graphToLatlng(map, graphTopRight);
-
-  // Set map BBox
-  var bounds = new maplibreGl.LngLatBounds([geoSouthWest, geoNorthEast]);
-  map.fitBounds(bounds, {
-    duration: 0
-  });
-}
-
 /**
  * On the graph, we store the 2D projection of the geographical lat/long.
  *
@@ -139,40 +86,26 @@ function bindMaplibreLayer(sigma, opts) {
   // Keeping data for the cleanup
   var isKilled = false;
   var prevSigmaSettings = sigma.getSettings();
-
-  // Creating map container
-  var mapLayerName = "layer-maplibre";
-  var mapContainer = sigma.createLayer(mapLayerName, "div", {
-    style: {
-      position: "absolute",
-      inset: "0"
-    },
-    // 'edges' is the first sigma layer
-    beforeLayer: "edges"
-  });
-  sigma.getContainer().prepend(mapContainer);
-
-  // Initialize the map
-  var map = new maplibreGl.Map(_objectSpread2({
-    container: mapContainer,
-    style: "https://demotiles.maplibre.org/style.json",
-    center: [0, 0],
-    zoom: 1,
-    minPitch: 0,
-    maxPitch: 0
-  }, (opts === null || opts === void 0 ? void 0 : opts.mapOptions) || {}));
+  var prevCustomBBox = sigma.getCustomBBox();
 
   // `stagePadding: 0` is mandatory, so the bbox of the map & Sigma is the same.
   sigma.setSetting("stagePadding", 0);
-
   // disable camera rotation
   sigma.setSetting("enableCameraRotation", false);
 
-  // Function that change the given graph by generating the sigma x,y coords by taking the geo coordinates
-  // and project them in the 2D space of the map
+  // Mercator graph coordinates are in [0,1]. Set customBBox to make
+  // normalization identity, and force a synchronous refresh so the
+  // normalization function is updated before camera constraints are applied.
+  sigma.setCustomBBox({
+    x: [0, 1],
+    y: [0, 1]
+  });
+
+  // Function that updates graph node positions from geo coordinates to
+  // Mercator [0,1] space
   function updateGraphCoordinates(graph) {
     graph.updateEachNodeAttributes(function (_node, attrs) {
-      var coords = latlngToGraph(map, opts !== null && opts !== void 0 && opts.getNodeLatLng ? opts.getNodeLatLng(attrs) : {
+      var coords = latlngToGraph(opts !== null && opts !== void 0 && opts.getNodeLatLng ? opts.getNodeLatLng(attrs) : {
         lat: attrs.lat,
         lng: attrs.lng
       });
@@ -183,95 +116,134 @@ function bindMaplibreLayer(sigma, opts) {
     });
   }
 
-  // Function that sync the map with sigma
-  function fnSyncMapWithSigma() {
-    syncMapWithSigma(sigma, map);
-  }
+  // Update graph coordinates and refresh sigma so normalization is ready
+  updateGraphCoordinates(sigma.getGraph());
+  sigma.refresh();
 
-  // Function that sync sigma with map if it's needed
-  function fnSyncSigmaWithMap() {
-    if (!sigma.getCamera().isAnimated() && !map.isMoving()) {
-      // Check that sigma & map are already in sync
-      var southWest = graphToLatlng(map, sigma.viewportToGraph({
-        x: 0,
-        y: sigma.getDimensions().height
-      }));
-      var northEast = graphToLatlng(map, sigma.viewportToGraph({
-        x: sigma.getDimensions().width,
-        y: 0
-      }));
-      var diff = Math.max(map.getBounds().getSouthWest().distanceTo(new maplibreGl.LngLat(southWest.lng, southWest.lat)), map.getBounds().getNorthEast().distanceTo(new maplibreGl.LngLat(northEast.lng, northEast.lat)));
-      if (diff > 1) {
-        syncSigmaWithMap(sigma, map);
-      }
-    }
+  // Now that normalization is correct, fit the camera to the graph's
+  // Mercator extent so the initial view frames the nodes.
+  var graph = sigma.getGraph();
+  if (graph.order) {
+    sigma.getCamera().setState(utils.getCameraStateToFitViewportToNodes(sigma, graph.nodes()));
   }
 
-  // When sigma is resize, we need to update the graph coordinate (the ref has changed)
-  // and recompute the zoom bounds
-  function fnOnResize() {
-    // Avoid sync map with sigma while we do the resize
-    // otherwise there is a sideeffect...
-    sigma.off("afterRender", fnSyncMapWithSigma);
-    var center = map.getCenter();
+  // Apply camera constraints. cameraPanBoundaries triggers cleanCameraState
+  // which uses graphToViewport — it needs the correct normalization.
+  sigma.setSetting("cameraPanBoundaries", {
+    boundaries: {
+      x: [-1, 2],
+      y: [0, 1]
+    }
+  });
 
-    // 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);
+  // Prevent zooming out beyond the world. The max ratio depends on the
+  // viewport aspect ratio: for a square graph, the Y range [0,1] fills the
+  // viewport height when ratio = min(width, height) / height.
+  function updateMaxCameraRatio() {
+    var _sigma$getDimensions = sigma.getDimensions(),
+      width = _sigma$getDimensions.width,
+      height = _sigma$getDimensions.height;
+    sigma.setSetting("maxCameraRatio", Math.min(width, height) / height);
+  }
+  updateMaxCameraRatio();
+
+  // Compute initial map bounds from sigma's current viewport, so the map's
+  // first render is already at the correct position
+  function getSigmaViewportBounds() {
+    var dims = sigma.getDimensions();
+    var graphBottomLeft = sigma.viewportToGraph({
+      x: 0,
+      y: dims.height
+    }, {
+      padding: 0
+    });
+    var graphTopRight = sigma.viewportToGraph({
+      x: dims.width,
+      y: 0
+    }, {
+      padding: 0
+    });
+    return new maplibreGl.LngLatBounds(graphToLatlng(graphBottomLeft), graphToLatlng(graphTopRight));
+  }
 
-      // Map ref has changed, we need to update the graph coordinates
-      updateGraphCoordinates(sigma.getGraph());
+  // Creating map container
+  var mapLayerName = "layer-maplibre";
+  var mapContainer = sigma.createLayer(mapLayerName, "div", {
+    style: {
+      position: "absolute",
+      inset: "0"
+    },
+    // 'stage' is the first sigma layer
+    beforeLayer: "stage"
+  });
+  sigma.getContainer().prepend(mapContainer);
 
-      // Do the sync
-      fnSyncSigmaWithMap();
+  // Initialize the map (non-interactive: sigma controls all interaction)
+  var map = new maplibreGl.Map(_objectSpread2(_objectSpread2({
+    container: mapContainer,
+    style: "https://demotiles.maplibre.org/style.json",
+    minPitch: 0,
+    maxPitch: 0
+  }, opts === null || opts === void 0 ? void 0 : opts.mapOptions), {}, {
+    interactive: false,
+    bounds: getSigmaViewportBounds()
+  }));
 
-      // Re-enable the map sync with sigma in the next frame
-      setTimeout(function () {
-        fnSyncMapWithSigma();
-        sigma.on("afterRender", fnSyncMapWithSigma);
-      }, 0);
+  // Camera state memoization to skip redundant fitBounds calls
+  var lx = NaN,
+    ly = NaN,
+    lr = NaN,
+    la = NaN;
+
+  // Sync map bounds to match sigma's viewport
+  function syncMapFromSigma() {
+    var _sigma$getCamera$getS = sigma.getCamera().getState(),
+      x = _sigma$getCamera$getS.x,
+      y = _sigma$getCamera$getS.y,
+      ratio = _sigma$getCamera$getS.ratio,
+      angle = _sigma$getCamera$getS.angle;
+    if (x === lx && y === ly && ratio === lr && angle === la) return;
+    lx = x;
+    ly = y;
+    lr = ratio;
+    la = angle;
+    map.fitBounds(getSigmaViewportBounds(), {
+      duration: 0
     });
+  }
+
+  // When sigma is resized, resize the map, recompute zoom limit, and re-sync
+  function fnOnResize() {
     map.resize();
+    updateMaxCameraRatio();
+    lx = NaN;
+    syncMapFromSigma();
   }
 
   // Clean up function to remove everything
   function clean() {
     if (!isKilled) {
       isKilled = true;
-      map.off("moveend", fnSyncSigmaWithMap);
       map.remove();
       sigma.killLayer(mapLayerName);
-      sigma.off("afterRender", fnSyncMapWithSigma);
+      sigma.off("afterRender", syncMapFromSigma);
       sigma.off("resize", fnOnResize);
+      sigma.off("kill", clean);
 
       // Reset settings
       sigma.setSetting("stagePadding", prevSigmaSettings.stagePadding);
       sigma.setSetting("enableCameraRotation", prevSigmaSettings.enableCameraRotation);
+      sigma.setSetting("maxCameraRatio", prevSigmaSettings.maxCameraRatio);
+      sigma.setSetting("cameraPanBoundaries", prevSigmaSettings.cameraPanBoundaries);
+      sigma.setCustomBBox(prevCustomBBox);
     }
   }
 
-  // Update the sigma graph for geospatial coords
-  updateGraphCoordinates(sigma.getGraph());
-
-  // When the map is ready
+  // When the map is ready, start syncing
   map.once("load", function () {
-    // Compute sigma ratio bounds
-    // /!\ must be done after the first map render
-    map.once("moveend", function () {
-      fnSyncSigmaWithMap();
-    });
-    // Do the first sync
-    fnSyncMapWithSigma();
-
-    // At each render of sigma, we do the map sync
-    sigma.on("afterRender", fnSyncMapWithSigma);
-    // Listen on resize
+    sigma.on("afterRender", syncMapFromSigma);
     sigma.on("resize", fnOnResize);
-    // Do the cleanup
     sigma.on("kill", clean);
-    // Keep sigma camera on the map
-    map.on("moveend", fnSyncSigmaWithMap);
   });
   return {
     clean: clean,

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

@@ -1,4 +1,5 @@
-import { MercatorCoordinate, LngLatBounds, Map, LngLat } from 'maplibre-gl';
+import { getCameraStateToFitViewportToNodes } from '@sigma/utils';
+import { MercatorCoordinate, Map, LngLatBounds } from 'maplibre-gl';
 
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
@@ -50,20 +51,19 @@ function _objectSpread2(e) {
 /**
  * Given a geo point returns its graph coords.
  */
-function latlngToGraph(map, coord) {
+function latlngToGraph(coord) {
   var data = MercatorCoordinate.fromLngLat(coord);
   return {
     x: data.x,
-    // Y are reversed between geo / sigma
-    y: map.getContainer().clientHeight - data.y
+    y: 1 - data.y
   };
 }
 
 /**
- * Given a graph coords returns its lat/lng coords.
+ * Given graph coords returns its lat/lng coords.
  */
-function graphToLatlng(map, coords) {
-  var mcoords = new MercatorCoordinate(coords.x, map.getContainer().clientHeight - coords.y, 0);
+function graphToLatlng(coords) {
+  var mcoords = new MercatorCoordinate(coords.x, 1 - coords.y, 0);
   var data = mcoords.toLngLat();
   return {
     lat: data.lat,
@@ -71,59 +71,6 @@ function graphToLatlng(map, coords) {
   };
 }
 
-/**
- * BBOX sync : map to sigma
- */
-function syncSigmaWithMap(sigma, map) {
-  // Compute sigma center
-  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 = {
-    width: Math.abs(northEast.x - southWest.x),
-    height: Math.abs(northEast.y - southWest.y)
-  };
-  var viewportDim = sigma.getDimensions();
-  var ratio = Math.min(viewportBoundDimension.width / viewportDim.width, viewportBoundDimension.height / viewportDim.height) * sigma.getCamera().getState().ratio;
-  sigma.getCamera().setState(_objectSpread2(_objectSpread2({}, center), {}, {
-    ratio: ratio
-  }));
-}
-
-/**
- * BBOX sync : sigma to map
- */
-function syncMapWithSigma(sigma, map) {
-  var viewportDimensions = sigma.getDimensions();
-
-  // Graph BBox
-  var graphBottomLeft = sigma.viewportToGraph({
-    x: 0,
-    y: viewportDimensions.height
-  }, {
-    padding: 0
-  });
-  var graphTopRight = sigma.viewportToGraph({
-    x: viewportDimensions.width,
-    y: 0
-  }, {
-    padding: 0
-  });
-
-  // Geo BBox
-  var geoSouthWest = graphToLatlng(map, graphBottomLeft);
-  var geoNorthEast = graphToLatlng(map, graphTopRight);
-
-  // Set map BBox
-  var bounds = new LngLatBounds([geoSouthWest, geoNorthEast]);
-  map.fitBounds(bounds, {
-    duration: 0
-  });
-}
-
 /**
  * On the graph, we store the 2D projection of the geographical lat/long.
  *
@@ -135,40 +82,26 @@ function bindMaplibreLayer(sigma, opts) {
   // Keeping data for the cleanup
   var isKilled = false;
   var prevSigmaSettings = sigma.getSettings();
-
-  // Creating map container
-  var mapLayerName = "layer-maplibre";
-  var mapContainer = sigma.createLayer(mapLayerName, "div", {
-    style: {
-      position: "absolute",
-      inset: "0"
-    },
-    // 'edges' is the first sigma layer
-    beforeLayer: "edges"
-  });
-  sigma.getContainer().prepend(mapContainer);
-
-  // Initialize the map
-  var map = new Map(_objectSpread2({
-    container: mapContainer,
-    style: "https://demotiles.maplibre.org/style.json",
-    center: [0, 0],
-    zoom: 1,
-    minPitch: 0,
-    maxPitch: 0
-  }, (opts === null || opts === void 0 ? void 0 : opts.mapOptions) || {}));
+  var prevCustomBBox = sigma.getCustomBBox();
 
   // `stagePadding: 0` is mandatory, so the bbox of the map & Sigma is the same.
   sigma.setSetting("stagePadding", 0);
-
   // disable camera rotation
   sigma.setSetting("enableCameraRotation", false);
 
-  // Function that change the given graph by generating the sigma x,y coords by taking the geo coordinates
-  // and project them in the 2D space of the map
+  // Mercator graph coordinates are in [0,1]. Set customBBox to make
+  // normalization identity, and force a synchronous refresh so the
+  // normalization function is updated before camera constraints are applied.
+  sigma.setCustomBBox({
+    x: [0, 1],
+    y: [0, 1]
+  });
+
+  // Function that updates graph node positions from geo coordinates to
+  // Mercator [0,1] space
   function updateGraphCoordinates(graph) {
     graph.updateEachNodeAttributes(function (_node, attrs) {
-      var coords = latlngToGraph(map, opts !== null && opts !== void 0 && opts.getNodeLatLng ? opts.getNodeLatLng(attrs) : {
+      var coords = latlngToGraph(opts !== null && opts !== void 0 && opts.getNodeLatLng ? opts.getNodeLatLng(attrs) : {
         lat: attrs.lat,
         lng: attrs.lng
       });
@@ -179,95 +112,134 @@ function bindMaplibreLayer(sigma, opts) {
     });
   }
 
-  // Function that sync the map with sigma
-  function fnSyncMapWithSigma() {
-    syncMapWithSigma(sigma, map);
-  }
+  // Update graph coordinates and refresh sigma so normalization is ready
+  updateGraphCoordinates(sigma.getGraph());
+  sigma.refresh();
 
-  // Function that sync sigma with map if it's needed
-  function fnSyncSigmaWithMap() {
-    if (!sigma.getCamera().isAnimated() && !map.isMoving()) {
-      // Check that sigma & map are already in sync
-      var southWest = graphToLatlng(map, sigma.viewportToGraph({
-        x: 0,
-        y: sigma.getDimensions().height
-      }));
-      var northEast = graphToLatlng(map, sigma.viewportToGraph({
-        x: sigma.getDimensions().width,
-        y: 0
-      }));
-      var diff = Math.max(map.getBounds().getSouthWest().distanceTo(new LngLat(southWest.lng, southWest.lat)), map.getBounds().getNorthEast().distanceTo(new LngLat(northEast.lng, northEast.lat)));
-      if (diff > 1) {
-        syncSigmaWithMap(sigma, map);
-      }
-    }
+  // Now that normalization is correct, fit the camera to the graph's
+  // Mercator extent so the initial view frames the nodes.
+  var graph = sigma.getGraph();
+  if (graph.order) {
+    sigma.getCamera().setState(getCameraStateToFitViewportToNodes(sigma, graph.nodes()));
   }
 
-  // When sigma is resize, we need to update the graph coordinate (the ref has changed)
-  // and recompute the zoom bounds
-  function fnOnResize() {
-    // Avoid sync map with sigma while we do the resize
-    // otherwise there is a sideeffect...
-    sigma.off("afterRender", fnSyncMapWithSigma);
-    var center = map.getCenter();
+  // Apply camera constraints. cameraPanBoundaries triggers cleanCameraState
+  // which uses graphToViewport — it needs the correct normalization.
+  sigma.setSetting("cameraPanBoundaries", {
+    boundaries: {
+      x: [-1, 2],
+      y: [0, 1]
+    }
+  });
 
-    // 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);
+  // Prevent zooming out beyond the world. The max ratio depends on the
+  // viewport aspect ratio: for a square graph, the Y range [0,1] fills the
+  // viewport height when ratio = min(width, height) / height.
+  function updateMaxCameraRatio() {
+    var _sigma$getDimensions = sigma.getDimensions(),
+      width = _sigma$getDimensions.width,
+      height = _sigma$getDimensions.height;
+    sigma.setSetting("maxCameraRatio", Math.min(width, height) / height);
+  }
+  updateMaxCameraRatio();
+
+  // Compute initial map bounds from sigma's current viewport, so the map's
+  // first render is already at the correct position
+  function getSigmaViewportBounds() {
+    var dims = sigma.getDimensions();
+    var graphBottomLeft = sigma.viewportToGraph({
+      x: 0,
+      y: dims.height
+    }, {
+      padding: 0
+    });
+    var graphTopRight = sigma.viewportToGraph({
+      x: dims.width,
+      y: 0
+    }, {
+      padding: 0
+    });
+    return new LngLatBounds(graphToLatlng(graphBottomLeft), graphToLatlng(graphTopRight));
+  }
 
-      // Map ref has changed, we need to update the graph coordinates
-      updateGraphCoordinates(sigma.getGraph());
+  // Creating map container
+  var mapLayerName = "layer-maplibre";
+  var mapContainer = sigma.createLayer(mapLayerName, "div", {
+    style: {
+      position: "absolute",
+      inset: "0"
+    },
+    // 'stage' is the first sigma layer
+    beforeLayer: "stage"
+  });
+  sigma.getContainer().prepend(mapContainer);
 
-      // Do the sync
-      fnSyncSigmaWithMap();
+  // Initialize the map (non-interactive: sigma controls all interaction)
+  var map = new Map(_objectSpread2(_objectSpread2({
+    container: mapContainer,
+    style: "https://demotiles.maplibre.org/style.json",
+    minPitch: 0,
+    maxPitch: 0
+  }, opts === null || opts === void 0 ? void 0 : opts.mapOptions), {}, {
+    interactive: false,
+    bounds: getSigmaViewportBounds()
+  }));
 
-      // Re-enable the map sync with sigma in the next frame
-      setTimeout(function () {
-        fnSyncMapWithSigma();
-        sigma.on("afterRender", fnSyncMapWithSigma);
-      }, 0);
+  // Camera state memoization to skip redundant fitBounds calls
+  var lx = NaN,
+    ly = NaN,
+    lr = NaN,
+    la = NaN;
+
+  // Sync map bounds to match sigma's viewport
+  function syncMapFromSigma() {
+    var _sigma$getCamera$getS = sigma.getCamera().getState(),
+      x = _sigma$getCamera$getS.x,
+      y = _sigma$getCamera$getS.y,
+      ratio = _sigma$getCamera$getS.ratio,
+      angle = _sigma$getCamera$getS.angle;
+    if (x === lx && y === ly && ratio === lr && angle === la) return;
+    lx = x;
+    ly = y;
+    lr = ratio;
+    la = angle;
+    map.fitBounds(getSigmaViewportBounds(), {
+      duration: 0
     });
+  }
+
+  // When sigma is resized, resize the map, recompute zoom limit, and re-sync
+  function fnOnResize() {
     map.resize();
+    updateMaxCameraRatio();
+    lx = NaN;
+    syncMapFromSigma();
   }
 
   // Clean up function to remove everything
   function clean() {
     if (!isKilled) {
       isKilled = true;
-      map.off("moveend", fnSyncSigmaWithMap);
       map.remove();
       sigma.killLayer(mapLayerName);
-      sigma.off("afterRender", fnSyncMapWithSigma);
+      sigma.off("afterRender", syncMapFromSigma);
       sigma.off("resize", fnOnResize);
+      sigma.off("kill", clean);
 
       // Reset settings
       sigma.setSetting("stagePadding", prevSigmaSettings.stagePadding);
       sigma.setSetting("enableCameraRotation", prevSigmaSettings.enableCameraRotation);
+      sigma.setSetting("maxCameraRatio", prevSigmaSettings.maxCameraRatio);
+      sigma.setSetting("cameraPanBoundaries", prevSigmaSettings.cameraPanBoundaries);
+      sigma.setCustomBBox(prevCustomBBox);
     }
   }
 
-  // Update the sigma graph for geospatial coords
-  updateGraphCoordinates(sigma.getGraph());
-
-  // When the map is ready
+  // When the map is ready, start syncing
   map.once("load", function () {
-    // Compute sigma ratio bounds
-    // /!\ must be done after the first map render
-    map.once("moveend", function () {
-      fnSyncSigmaWithMap();
-    });
-    // Do the first sync
-    fnSyncMapWithSigma();
-
-    // At each render of sigma, we do the map sync
-    sigma.on("afterRender", fnSyncMapWithSigma);
-    // Listen on resize
+    sigma.on("afterRender", syncMapFromSigma);
     sigma.on("resize", fnOnResize);
-    // Do the cleanup
     sigma.on("kill", clean);
-    // Keep sigma camera on the map
-    map.on("moveend", fnSyncSigmaWithMap);
   });
   return {
     clean: clean,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigma/layer-maplibre",
-  "version": "3.0.0",
+  "version": "4.0.0-alpha.1",
   "description": "A plugin to set a geographical map in background",
   "main": "dist/sigma-layer-maplibre.cjs.js",
   "module": "dist/sigma-layer-maplibre.esm.js",
@@ -28,14 +28,20 @@
     }
   ],
   "license": "MIT",
+  "scripts": {
+    "test": "vitest run"
+  },
   "preconstruct": {
     "entrypoints": [
       "index.ts"
     ]
   },
+  "dependencies": {
+    "@sigma/utils": "^4.0.0-alpha.1"
+  },
   "peerDependencies": {
     "maplibre-gl": "^4.5.0",
-    "sigma": ">=3.0.0-beta.10"
+    "sigma": ">=4.0.0-alpha.0"
   },
   "exports": {
     ".": {
@@ -45,5 +51,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "f0187cb13da41310bf375caf7105db2f18bc89d2"
+  "gitHead": "629d2d5400b721c001f4301a244f2f4f74565961"
 }