[fix] Updated readme, removed debugger and added some comments

Author: dee077

README.md

@@ -486,9 +486,7 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
 
   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.
 
-  When you click on a node or link, information is added to the URL as a fragment (for example for node: `#map1-node=device-123` and for link: `#map1-link=deviceA~deviceB`). If you open such a URL directly in your browser, the visualization will automatically restore that exact state triggering the click event on the corresponding node or link and centering the map or graph accordingly.
-
-  This feature works across all ECharts graphs, as well as Leaflet-based maps including geographic and indoor floorplan maps and it supports multiple maps or graphs on the same page. The id parameter is used to uniquely identify which visualization the URL fragment belongs to (for eample: `#map1-node=device-1;#map2-node=device-2` ).
+  This feature works across all ECharts graphs, as well as Leaflet-based maps including geographic and indoor floorplan maps and it supports multiple maps or graphs on the same page. The id parameter is used to uniquely identify which visualization the URL fragment belongs to (for example: `#map1-node=device-1;#map2-node=device-2` ).
 
   For nodes, the behavior depends on the type of visualization in Leaflet maps, clicking a node updates the URL and on apllying the state from url it automatically centers the map on that node, in addition to triggering its click event. In ECharts graphs, only triggers the click event for the node.
 

public/example_templates/netjsonmap-indoormap-overlay.html

@@ -136,16 +136,17 @@
         return container;
       }
 
-      function closeButtonHandler(container) {
+      function closeButtonHandler(container, indoorMap) {
         const closeBtn = container.querySelector("#indoormap-close");
         closeBtn.addEventListener("click", () => {
+          const id = indoorMap.config.bookmarkableActions.id;
+          indoorMap.utils.removeUrlFragment(id);
           container.remove();
         });
       }
 
       function openIndoorMap() {
         const indoorMapContainer = createIndoorMapContainer();
-        closeButtonHandler(indoorMapContainer);
         const mapContainer = document.getElementById("map-container");
         mapContainer.appendChild(indoorMapContainer);
 
@@ -243,6 +244,7 @@
           },
         );
         indoor.render();
+        closeButtonHandler(indoorMapContainer, indoor);
       }
     </script>
   </body>

src/js/netjsongraph.render.js

@@ -128,7 +128,7 @@ class NetJSONGraphRender {
   generateGraphOption(JSONData, self) {
     const categories = [];
     const configs = self.config;
-    const nodes = JSONData.nodes.map((node, index) => {
+    const nodes = JSONData.nodes.map((node) => {
       const nodeResult = JSON.parse(JSON.stringify(node));
       const {nodeStyleConfig, nodeSizeConfig, nodeEmphasisConfig} =
         self.utils.getNodeStyle(node, configs, "graph");
@@ -584,7 +584,6 @@ class NetJSONGraphRender {
       const zoomOut = document.querySelector(".leaflet-control-zoom-out");
 
       if (zoomIn && zoomOut) {
-        debugger;
         if (Math.round(currentZoom) >= maxZoom) {
           zoomIn.classList.add("leaflet-disabled");
         } else {

src/js/netjsongraph.util.js

@@ -1291,7 +1291,6 @@ class NetJSONGraphUtil {
     if (!self.config.bookmarkableActions.enabled) {
       return;
     }
-    debugger;
     const {id} = self.config.bookmarkableActions;
     const fragments = self.utils.parseUrlFragments();
     const fragmentParams = fragments[id] && fragments[id].get ? fragments[id] : null;
@@ -1314,6 +1313,8 @@ class NetJSONGraphUtil {
           ? self.config.disableClusteringAtLevel
           : self.config.bookmarkableActions.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);
     }
     self.config.onClickElement.call(self, source && target ? "link" : "node", node);