Browse Source

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

webworkersNetwork
Alex de Mulder 9 years ago
parent
commit
6581f56c63
5 changed files with 50 additions and 34 deletions
  1. +1
    -0
      HISTORY.md
  2. +7
    -1
      dist/vis.js
  3. +6
    -1
      lib/network/modules/Canvas.js
  4. +5
    -0
      lib/network/modules/CanvasRenderer.js
  5. +31
    -32
      test/networkTest.html

+ 1
- 0
HISTORY.md View File

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

+ 7
- 1
dist/vis.js View File

@ -35946,6 +35946,11 @@ return /******/ (function(modules) { // webpackBootstrap
var h = this.canvas.frame.canvas.clientHeight; var h = this.canvas.frame.canvas.clientHeight;
ctx.clearRect(0, 0, w, h); 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 // set scaling and translation
ctx.save(); ctx.save();
ctx.translate(this.body.view.translation.x, this.body.view.translation.y); ctx.translate(this.body.view.translation.x, this.body.view.translation.y);
@ -36267,7 +36272,8 @@ return /******/ (function(modules) { // webpackBootstrap
}, { }, {
key: '_setCameraState', key: '_setCameraState',
value: function _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.body.view.scale = this.cameraState.scale * (this.frame.canvas.width / this.pixelRatio / this.cameraState.previousWidth);
// this comes from the view module. // this comes from the view module.

+ 6
- 1
lib/network/modules/Canvas.js View File

@ -98,7 +98,12 @@ class Canvas {
* @private * @private
*/ */
_setCameraState() { _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.body.view.scale = this.cameraState.scale * ((this.frame.canvas.width / this.pixelRatio) / this.cameraState.previousWidth);
// this comes from the view module. // this comes from the view module.

+ 5
- 0
lib/network/modules/CanvasRenderer.js View File

@ -160,6 +160,11 @@ class CanvasRenderer {
let h = this.canvas.frame.canvas.clientHeight; let h = this.canvas.frame.canvas.clientHeight;
ctx.clearRect(0, 0, w, h); 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 // set scaling and translation
ctx.save(); ctx.save();
ctx.translate(this.body.view.translation.x, this.body.view.translation.y); ctx.translate(this.body.view.translation.x, this.body.view.translation.y);

+ 31
- 32
test/networkTest.html View File

@ -15,11 +15,11 @@
} }
</style> </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"> <script type="text/javascript">
var network = null; var network = null;
@ -48,32 +48,31 @@
}; };
network = new vis.Network(container, data, options); 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> </script>
</head> </head>
@ -81,7 +80,7 @@
<body onload="draw();"> <body onload="draw();">
<h2>Popup Example</h2> <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'> <div class='modal-dialog'><div class='modal-content'><div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button> <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h4 class='modal-title'>TreeMap</h4></div> <h4 class='modal-title'>TreeMap</h4></div>

Loading…
Cancel
Save