[change] Show node labels only after a suitable zoom level #148

closes #148
openwisp · Sep 20, 2022 · c64fe75 · c64fe75
1 parent 441c123
commit c64fe75
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 13 deletions.
diff --git a/dist/netjsongraph.min.js b/dist/netjsongraph.min.js
diff --git a/src/js/netjsongraph.config.js b/src/js/netjsongraph.config.js
@@ -33,6 +33,7 @@ const NetJSONGraphDefaultConfig = {
   svgRender: false,
   switchMode: false,
   showMetaOnNarrowScreens: false,
+  showLabelsAtZoomLevel: 7,
   echartsOption: {
     aria: {
       show: true,
@@ -65,6 +66,9 @@ const NetJSONGraphDefaultConfig = {
         color: "#fff",
         position: "top",
       },
+      labelLayout: {
+        hideOverlap: true,
+      },
       force: {
         gravity: 0.1,
         edgeLength: [20, 60],
@@ -101,9 +105,6 @@ const NetJSONGraphDefaultConfig = {
             series: [
               {
                 zoom: 0.7,
-                labelLayout: {
-                  hideOverlap: true,
-                },
               },
             ],
             toolbox: {
@@ -119,9 +120,6 @@ const NetJSONGraphDefaultConfig = {
             series: [
               {
                 zoom: 1,
-                labelLayout: {
-                  hideOverlap: false,
-                },
               },
             ],
             toolbox: {

diff --git a/src/js/netjsongraph.render.js b/src/js/netjsongraph.render.js
@@ -356,6 +356,42 @@ class NetJSONGraphRender {
       );
     }
 
+    if (self.leaflet.getZoom() < self.config.showLabelsAtZoomLevel) {
+      self.echarts.setOption({
+        series: [
+          {
+            label: {
+              show: false,
+            },
+          },
+        ],
+      });
+    }
+
+    self.leaflet.on("zoomend", () => {
+      if (self.leaflet.getZoom() >= self.config.showLabelsAtZoomLevel) {
+        self.echarts.setOption({
+          series: [
+            {
+              label: {
+                show: true,
+              },
+            },
+          ],
+        });
+      } else {
+        self.echarts.setOption({
+          series: [
+            {
+              label: {
+                show: false,
+              },
+            },
+          ],
+        });
+      }
+    });
+
     self.event.emit("onLoad");
     self.event.emit("onReady");
     self.event.emit("renderArray");

diff --git a/test/netjsongraph.spec.js b/test/netjsongraph.spec.js
@@ -32,6 +32,9 @@ describe("NetJSONGraph Specification", () => {
         color: "#fff",
         position: "top",
       },
+      labelLayout: {
+        hideOverlap: true,
+      },
       force: {
         gravity: 0.1,
         edgeLength: [20, 60],
@@ -68,9 +71,6 @@ describe("NetJSONGraph Specification", () => {
             series: [
               {
                 zoom: 0.7,
-                labelLayout: {
-                  hideOverlap: true,
-                },
               },
             ],
             toolbox: {
@@ -86,9 +86,6 @@ describe("NetJSONGraph Specification", () => {
             series: [
               {
                 zoom: 1,
-                labelLayout: {
-                  hideOverlap: false,
-                },
               },
             ],
             toolbox: {