- Fixed bug that broke the network if drawn in a hidden div #1254

HISTORY.md

@@ -9,6 +9,7 @@ http://visjs.org
 - Added German (de) locale. Thanks @Tooa.
 - Fixed critical camera zoom bug #1273.
 - Fixed unselectAll method. #1256
+- Fixed bug that broke the network if drawn in a hidden div #1254
 
 ### Timeline
 

dist/vis.js

@@ -35946,6 +35946,11 @@ return /******/ (function(modules) { // webpackBootstrap
           var h = this.canvas.frame.canvas.clientHeight;
           ctx.clearRect(0, 0, w, h);
 
+          // if the div is hidden, we stop the redraw here for performance.
+          if (this.canvas.frame.clientWidth === 0) {
+            return;
+          }
+
           // set scaling and translation
           ctx.save();
           ctx.translate(this.body.view.translation.x, this.body.view.translation.y);
@@ -36267,7 +36272,8 @@ return /******/ (function(modules) { // webpackBootstrap
     }, {
       key: '_setCameraState',
       value: function _setCameraState() {
-        if (this.cameraState.scale !== undefined) {
+        if (this.cameraState.scale !== undefined && this.frame.canvas.clientWidth !== 0 && this.frame.canvas.clientHeight !== 0 && this.pixelRatio !== 0 && this.cameraState.previousWidth > 0) {
+
           this.body.view.scale = this.cameraState.scale * (this.frame.canvas.width / this.pixelRatio / this.cameraState.previousWidth);
 
           // this comes from the view module.

lib/network/modules/Canvas.js

@@ -98,7 +98,12 @@ class Canvas {
    * @private
    */
   _setCameraState() {
-    if (this.cameraState.scale !== undefined) {
+    if (this.cameraState.scale !== undefined &&
+      this.frame.canvas.clientWidth !== 0 &&
+      this.frame.canvas.clientHeight !== 0 &&
+      this.pixelRatio !== 0 &&
+      this.cameraState.previousWidth > 0) {
+
       this.body.view.scale = this.cameraState.scale * ((this.frame.canvas.width / this.pixelRatio) / this.cameraState.previousWidth);
 
       // this comes from the view module.

lib/network/modules/CanvasRenderer.js

@@ -160,6 +160,11 @@ class CanvasRenderer {
       let h = this.canvas.frame.canvas.clientHeight;
       ctx.clearRect(0, 0, w, h);
 
+      // if the div is hidden, we stop the redraw here for performance.
+      if (this.canvas.frame.clientWidth === 0) {
+        return;
+      }
+
       // set scaling and translation
       ctx.save();
       ctx.translate(this.body.view.translation.x, this.body.view.translation.y);

test/networkTest.html

@@ -15,11 +15,11 @@
         }
     </style>
 
-    <script src="http://visjs.org/dist/vis.js" type="text/javascript" ></script>
-    <link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css"/>
-    <!--<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />-->
-    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
-    <!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>-->
+    <script src="../dist/vis.js" type="text/javascript" ></script>
+    <link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
+    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
 
     <script type="text/javascript">
         var network = null;
@@ -48,32 +48,31 @@
             };
             network = new vis.Network(container, data, options);
 
-//            $('#divTreemapPopUp').modal('show');
-
-
-            var nodes2 = [];
-            var edges2 = [];
-            nodes2.push({ id: 1, label: 'Node1' });
-            nodes2.push({ id: 2, label: 'Node2' });
-            edges2.push({ from: 2, to: 1 });
-
-            var data2 = {
-                nodes: nodes2,
-                edges: edges2
-            };
-
-            // create a network
-            var container2 = document.getElementById('mynetwork2');
-            var options2 = {
-                layout: {
-                    hierarchical: {
-                        direction: "UD"
-                    }
-                }
-            };
-            network2 = new vis.Network(container2, data2, options2);
-
-
+            $('#divTreemapPopUp').modal('show');
+
+//
+//            var nodes2 = [];
+//            var edges2 = [];
+//            nodes2.push({ id: 1, label: 'Node1' });
+//            nodes2.push({ id: 2, label: 'Node2' });
+//            edges2.push({ from: 2, to: 1 });
+//
+//            var data2 = {
+//                nodes: nodes2,
+//                edges: edges2
+//            };
+//
+//            // create a network
+//            var container2 = document.getElementById('mynetwork2');
+//            var options2 = {
+//                layout: {
+//                    hierarchical: {
+//                        direction: "UD"
+//                    }
+//                }
+//            };
+//            network2 = new vis.Network(container2, data2, options2);
+//            setTimeout(function() {console.log('redraw');network.redraw()},1000)
         }
     </script>
 </head>
@@ -81,7 +80,7 @@
 <body onload="draw();">
 <h2>Popup Example</h2>
 
-<div style='display: block;' class='modal fade' id='divTreemapPopUp' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
+<div style='display: none;' class='modal fade' id='divTreemapPopUp' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
     <div class='modal-dialog'><div class='modal-content'><div class='modal-header'>
         <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
         <h4 class='modal-title'>TreeMap</h4></div>