[fix] Add new config for disabling zoom

Author: dee077

README.md

@@ -473,7 +473,10 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
       bookmarkableActions: {
         enabled: boolean,
         id: string,
-        zoomLevel: number
+        zoom: {
+          enabled: boolean,
+          zoomLevel: integer
+        }
       }
   ```
 
@@ -482,7 +485,6 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
   You can enable or disable adding url fragments by setting enabled to true or false. When enabled, the following parameters are added to the URL:
   1. id – A prefix used to uniquely identify the map.
   2. nodeId – The id of the selected node.
-  3. zoomLevel – The zoom level applied when restoring the state from the URL fragments.
 
   This feature allows you to create shareable and restorable map or graph states using URL fragments. When this feature is enabled, the URL updates automatically whenever you click a node or a link in your NetJSONGraph visualization. This makes it easy to share a specific view, restore it later, or navigate between different states using the browser’s back and forward buttons.
 

public/example_templates/netjsonmap-indoormap-overlay.html

@@ -99,7 +99,10 @@
         bookmarkableActions: {
           enabled: true,
           id: "geoMap",
-          zoomLevel: 10,
+          zoom: {
+            enabled: true,
+            zoomLevel: 10
+          }
         },
         prepareData: (data) => {
           data.nodes.forEach((n) => {
@@ -173,6 +176,9 @@
             bookmarkableActions: {
               enabled: true,
               id: "indoorMap",
+              zoom: {
+                enabled: false,
+              }
             },
             prepareData: (data) => {
               data.nodes.forEach((n) => {

public/example_templates/netjsonmap-indoormap.html

@@ -64,6 +64,9 @@
           bookmarkableActions: {
             enabled: true,
             id: "indoorMap",
+            zoom: {
+              enabled: false,
+            }
           },
           // Convert to internal json format
           prepareData: function (data) {

public/example_templates/netjsonmap.html

@@ -98,7 +98,10 @@
         bookmarkableActions: {
           enabled: true,
           id: "geographicMap",
-          zoomLevel: 10,
+          zoom: {
+            enabled: true,
+            zoomLevel: 10,
+          },
         },
 
         prepareData: (data) => {

src/js/netjsongraph.config.js

@@ -288,7 +288,10 @@ const NetJSONGraphDefaultConfig = {
   bookmarkableActions: {
     enabled: false,
     id: null,
-    zoomLevel: null,
+    zoom: {
+      enabled: false,
+      zoomLevel: null,
+    },
   },
 
   /**

src/js/netjsongraph.util.js

@@ -1296,7 +1296,7 @@ class NetJSONGraphUtil {
     const fragmentParams = fragments[id] && fragments[id].get ? fragments[id] : null;
     const nodeId =
       fragmentParams && fragmentParams.get ? fragmentParams.get("nodeId") : undefined;
-    if (!nodeId || !self.nodeLinkIndex || !self.nodeLinkIndex[nodeId] == null) {
+    if (!nodeId || !self.nodeLinkIndex || self.nodeLinkIndex[nodeId] == null) {
       return;
     }
     const [source, target] = nodeId.split("~");
@@ -1311,11 +1311,13 @@ class NetJSONGraphUtil {
       const zoom =
         cluster != null
           ? self.config.disableClusteringAtLevel
-          : self.config.bookmarkableActions.zoomLevel ||
+          : self.config.bookmarkableActions.zoom.zoomLevel ||
             self.config.showLabelsAtZoomLevel;
       // Currently, there’s no way to center the view on a link element within the graph or map.
       // The view is only centered when using a Leaflet map and the selected element is a node.
-      self.leaflet?.setView(center, zoom);
+      if (self.config.bookmarkableActions.zoom.enabled) {
+        self.leaflet?.setView(center, zoom);
+      }
     }
     self.config.onClickElement.call(self, source && target ? "link" : "node", node);
   }

test/netjsongraph.util.test.js

@@ -264,7 +264,7 @@ describe("Test URL fragment utilities", () => {
     const self = {
       config: {
         render: "graph",
-        bookmarkableActions: {enabled: true, id: "geo"},
+        bookmarkableActions: {enabled: true, id: "geo", zoom: {enabled: true}},
       },
       utils: {...utils, graphRender: "graph", mapRender: "map"},
       nodeLinkIndex: {node1: node1, node2: node2},
@@ -305,7 +305,11 @@ describe("Test URL fragment utilities", () => {
     const self = {
       config: {
         render: "map",
-        bookmarkableActions: {enabled: true, id: "geo", zoomLevel: 6},
+        bookmarkableActions: {
+          enabled: true,
+          id: "geo",
+          zoom: {enabled: true, zoomLevel: 6},
+        },
         graphConfig: {series: {type: null}},
         mapOptions: {nodeConfig: {type: "scatter"}, center: [0, 0]},
         onClickElement: mockOnClick,