[fix] Make applyUrlFragmentState wait for onReady to complete

Author: dee077

README.md

@@ -336,6 +336,7 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
   You can customize the style of GeoJSON features using `style` property. The list of all available properties can be found in the [Leaflet documentation](https://leafletjs.com/reference.html#geojson).
 
 <!-- Todo: Update this -->
+
 - `hashParams`
 
   Configuration for adding hash parameters to the URL when a node is clicked.

public/example_templates/netjsonmap-indoormap-overlay.html

@@ -36,7 +36,7 @@
         left: 50%;
         transform: translate(-50%, -50%);
         width: 80%;
-        height: 80%;
+        height: 90%;
         padding: 20px;
         border-radius: 8px;
         align-items: center;
@@ -167,24 +167,23 @@
                 n.properties.location = n.location;
               });
             },
-            onReady: function () {
+            onReady: async function () {
               const map = this.leaflet;
               map.eachLayer((layer) => layer._url && map.removeLayer(layer));
               const img = new Image();
               imageUrl = "../assets/images/floorplan.png";
               img.src = imageUrl;
-              img.onload = () => {
-                const aspectRatio = img.width / img.height;
-                const h = 700;
-                const w = aspectRatio * h;
-                const zoom = map.getMaxZoom() - 1;
-                const sw = map.unproject([0, h * 2], zoom);
-                const ne = map.unproject([w * 2, 0], zoom);
-                const bnds = new L.LatLngBounds(sw, ne);
-                L.imageOverlay(imageUrl, bnds).addTo(map);
-                map.fitBounds(bnds);
-                map.setMaxBounds(bnds);
-              };
+              await img.decode()
+              const aspectRatio = img.width / img.height;
+              const h = 700;
+              const w = aspectRatio * h;
+              const zoom = map.getMaxZoom() - 1;
+              const sw = map.unproject([0, h * 2], zoom);
+              const ne = map.unproject([w * 2, 0], zoom);
+              const bnds = new L.LatLngBounds(sw, ne);
+              L.imageOverlay(imageUrl, bnds).addTo(map);
+              map.fitBounds(bnds);
+              map.setMaxBounds(bnds);
             },
           },
         );

public/example_templates/netjsonmap-indoormap.html

@@ -121,30 +121,23 @@
             });
           },
 
-          onReady: function presentIndoormap() {
+          onReady: async function presentIndoormap() {
             const netjsonmap = this.leaflet;
             const image = new Image();
             const imageUrl = "../assets/images/floorplan.png";
             image.src = imageUrl;
+            await image.decode()
+            const aspectRatio = image.width / image.height;
+            const h = 700;
+            const w = aspectRatio * h;
+            const zoom = netjsonmap.getMaxZoom() - 1;
+            const bottomLeft = netjsonmap.unproject([0, h * 2], zoom);
+            const upperRight = netjsonmap.unproject([w * 2, 0], zoom);
+            const bounds = new L.LatLngBounds(bottomLeft, upperRight);
 
-            image.onload = function () {
-              const aspectRatio = image.width / image.height;
-              const h = 700;
-              const w = aspectRatio * h;
-              const zoom = netjsonmap.getMaxZoom() - 1;
-              const bottomLeft = netjsonmap.unproject([0, h * 2], zoom);
-              const upperRight = netjsonmap.unproject([w * 2, 0], zoom);
-              const bounds = new L.LatLngBounds(bottomLeft, upperRight);
-
-              L.imageOverlay(imageUrl, bounds).addTo(netjsonmap);
-              netjsonmap.fitBounds(bounds);
-              netjsonmap.setMaxBounds(bounds);
-              console.log(netjsonmap)
-              if(graph.selectedNode){
-                const {location, zoom} = graph.selectedNode 
-                netjsonmap.setView([location.lat, location.lng], zoom)
-              } 
-            };
+            L.imageOverlay(imageUrl, bounds).addTo(netjsonmap);
+            netjsonmap.fitBounds(bounds);
+            netjsonmap.setMaxBounds(bounds);
 
             // Remove any default tile layers and show only the floorplan image.
             netjsonmap.eachLayer((layer) => {

src/js/netjsongraph.core.js

@@ -71,9 +71,16 @@ class NetJSONGraph {
     const [JSONParam, ...resParam] = this.JSONParam;
 
     this.config.onRender.call(this);
-    this.event.once("onReady", this.config.onReady.bind(this));
+    // Using
+    const onReadyDone = new Promise((resolve) => {
+      this.event.once("onReady", async () => {
+        await this.config.onReady.call(this);
+        resolve();
+      });
+    });
     this.event.once("onLoad", this.config.onLoad.bind(this));
-    this.event.once("applyUrlFragmentState", () => {
+    this.event.once("applyUrlFragmentState", async () => {
+      await onReadyDone;
       this.utils.applyUrlFragmentState.call(this, this);
     });
     this.utils.paginatedDataParse