visjs · yotamberk · Jul 27, 2019 · Jan 18, 2019 · Jan 19, 2019
diff --git a/lib/network/modules/components/shared/Label.js b/lib/network/modules/components/shared/Label.js
@@ -43,7 +43,7 @@ class Label {
       this.labelDirty = true;
     } else {
       // Bad label! Change the option value to prevent bad stuff happening
-      options.label = '';
+      options.label = undefined
     }
 
     if (options.font !== undefined && options.font !== null) { // font options can be deleted at various levels

diff --git a/lib/network/modules/components/shared/LabelSplitter.js b/lib/network/modules/components/shared/LabelSplitter.js
@@ -290,7 +290,8 @@ class LabelSplitter {
   constructor(ctx, parent, selected, hover) {
     this.ctx = ctx;
     this.parent = parent;
-
+    this.selected = selected;
+    this.hover = hover;
 
     /**
      * Callback to determine text width; passed to LabelAccumulator instance
@@ -303,13 +304,11 @@ class LabelSplitter {
       if (text === undefined) return 0;
 
       // TODO: This can be done more efficiently with caching
+      // This will set the ctx.font correctly, depending on selected/hover and mod - so that ctx.measureText() will be accurate.
       let values = this.parent.getFormattingValues(ctx, selected, hover, mod);
 
       let width = 0;
       if (text !== '') {
-        // NOTE: The following may actually be *incorrect* for the mod fonts!
-        //       This returns the size with a regular font, bold etc. may
-        //       have different sizes.
         let measure = this.ctx.measureText(text);
         width = measure.width;
       }
@@ -616,6 +615,11 @@ class LabelSplitter {
    * @private
    */
   splitStringIntoLines(str, mod = 'normal', appendLast = false) {
+    // Set the canvas context font, based upon the current selected/hover state
+    // and the provided mod, so the text measurement performed by getLongestFit
+    // will be accurate - and not just use the font of whoever last used the canvas.
+    this.parent.getFormattingValues(this.ctx, this.selected, this.hover, mod)
+
     // Still-present spaces are relevant, retain them
     str = str.replace(/^( +)/g, '$1\r');
     str = str.replace(/([^\r][^ ]*)( +)/g, '$1\r$2\r');

diff --git a/test/Label.test.js b/test/Label.test.js
@@ -18,7 +18,7 @@ import canvasMockify from './canvas-mock';
 import Label from '../lib/network/modules/components/shared/Label';
 import NodesHandler from '../lib/network/modules/NodesHandler';
 import Network from '../lib/network/Network';
-
+import ComponentUtil from '../lib/network/modules/components/shared/ComponentUtil';
 
 /**************************************************************
  * Dummy class definitions for minimal required functionality.
@@ -1619,6 +1619,45 @@ describe('Shorthand Font Options', function() {
     var options = {};
     var network = new Network(container, data, options);
 
-    done();
-  });
-});
+    done()
+  })
+
+  describe('visible function', function() {
+    it('correctly determines label is not visible when label is invalid', function(done) {
+      var invalidLabel = ''
+      assert(
+        !ComponentUtil.isValidLabel(invalidLabel),
+        'An empty string should be identified as an invalid label'
+      )
+
+      var body = {
+        view: {
+          scale: 1
+        }
+      }
+
+      var options = {
+        label: invalidLabel,
+        font: {
+          size: 12
+        },
+        scaling: {
+          label: {
+            drawThreshold: 1
+          }
+        }
+      }
+
+      var label = new Label(body, options)
+      label.size.width = 1
+      label.size.height = 1
+
+      assert(
+        !label.visible(),
+        'Label should not be visible because the label text is invalid'
+      )
+
+      done()
+    })
+  })
+})
diff --git a/test/network/textMeasurementOnHoverTest.html b/test/network/textMeasurementOnHoverTest.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<html>
+<head>
+  <title>Text Measurement Test</title>
+
+  <script src="../../dist/vis-network.min.js" type="text/javascript"></script>
+  <link href="../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    #mynetwork {
+      width: 1000px;
+      height: 500px;
+      border: 1px solid lightgray;
+    }
+  </style>
+  <!-- <script src="../../googleAnalytics.js"></script> -->
+</head>
+
+<body>
+
+<p>Hover over and move the nodes - moving from one to the next and back and forward.</p>
+<p>They should NOT change size and their line break should not change.</p>
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+  var nodes = new vis.DataSet([
+      { id: 1, x:100, y:10, label: 'Node 1 - CLICK AND DRAG THIS - to ensure the width and line breaks do <b>NOT</b> change' },
+      { id: 2, x:10, y:300, label: 'Node 2 - HOVER OVER THIS, AND THEN WHITESPACE - AND REPEAT - to ensure the width and line breaks do <b>NOT</b> change on this node or the connected edge' },
+      { id: 3, x:400, y:300, label: 'Node 3 - HOVER OVER THIS, AND THEN WHITESPACE - AND REPEAT - to ensure the width and line breaks do <b>NOT</b> change on this node or the connected edge' },
+      { id: 4, x:700, y:100, label: 'Node 4 - <b>CERTAIN PLACEMENT OF BOLD MOD CAUSES IT NOT TO HAPPEN</b> it would seem. This node doesn\'t react.' }
+  ]);
+
+  var edges = new vis.DataSet([ 
+    {from: 1, to: 2, arrows: 'to', label: 'Edge label from <b>node 1 to node 2</b> that is really really long '},
+    {from: 1, to: 3, arrows: 'to', label: 'Edge label from <b>node 1 to node 3</b> that is really really long '},
+    {from: 1, to: 4, arrows: 'to', label: 'Edge label from <b>node 1 to node 4</b> that is really really long '} 
+  ]);
+
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+
+  var options = {
+    layout: {
+      randomSeed: 1,
+      improvedLayout: false,
+      hierarchical: {
+          enabled: false
+      }      
+    },
+
+    interaction: {
+      hover: true,                // important
+      hoverConnectedEdges: true,  // important
+
+      selectable: false,
+      selectConnectedEdges: false
+    },
+
+    edges: {
+      chosen: false,
+      hoverWidth: 0,
+      selectionWidth: 0,
+      labelHighlightBold: false,
+
+      arrowStrikethrough: true,
+
+      font: {
+        multi: 'html',
+        size: 16,
+        face: 'Arial',
+        align: 'horizontal'
+      },
+      widthConstraint: {
+        maximum: 150
+      },
+      color: {
+        color: '#6d6d6d'
+      },
+      smooth: {
+        enabled: true,
+        type: 'continuous',
+        roundness: 0.3
+      }
+    },
+
+    nodes: {
+      shape: 'box',
+      margin: 10,
+      chosen: false,
+      labelHighlightBold: false,
+      font: {
+        multi: 'html',
+        size: 20,
+        color: 'black',
+        face: 'Verdana',
+        ital: { face: 'Verdana' },
+        bold: { face: 'Verdana' }        
+      },
+      widthConstraint: {
+        maximum: 200
+      }
+    },
+
+    physics: {
+      enabled: false
+    }
+  };
+
+  var container = document.getElementById('mynetwork');
+  var network = new vis.Network(container, data, options);
+</script>
+
+</body>
+</html>