From cb20857c2d9a4316edd33425048314825dc8b9fe Mon Sep 17 00:00:00 2001
From: Alexander Wunschik <dev@wunschik.net>
Date: Sun, 29 Jan 2017 16:56:17 +0100
Subject: [PATCH] Fix(network): handle label composition for long words (#2650)

* maximum width constraints must be violated by long words. Fixes #2604.

* chore: moved examples/network/_tests/maximumWidthEdgeCase.html to test/network/
---
 examples/network/nodeStyles/widthHeight.html  |  7 +-
 .../modules/components/shared/Label.js        |  9 +--
 test/network/maximumWidthEdgeCase.html        | 66 +++++++++++++++++++
 3 files changed, 76 insertions(+), 6 deletions(-)
 create mode 100644 test/network/maximumWidthEdgeCase.html

diff --git a/examples/network/nodeStyles/widthHeight.html b/examples/network/nodeStyles/widthHeight.html
index 565e900b..0453116e 100644
--- a/examples/network/nodeStyles/widthHeight.html
+++ b/examples/network/nodeStyles/widthHeight.html
@@ -86,7 +86,7 @@ Whole-set node and edge constraints are exclusive.</p>
     { from: 300, to: 301, label: "more minimum height"},
     { from: 100, to: 400, label: "unconstrained to top valign"},
     { from: 400, to: 401, label: "top valign to middle valign"},
-    { from: 401, to: 402, label: "middle valign to bottom valign"},
+    { from: 401, to: 402, widthConstraint: { maximum: 150 }, label: "middle valign to bottom valign"},
   ];
 
   var container = document.getElementById('mynetwork');
@@ -105,7 +105,10 @@ Whole-set node and edge constraints are exclusive.</p>
     },
     nodes: {
       shape: 'box',
-      margin: 10
+      margin: 10,
+      widthConstraint: {
+        maximum: 200
+      }
     },
     physics: {
       enabled: false
diff --git a/lib/network/modules/components/shared/Label.js b/lib/network/modules/components/shared/Label.js
index 1601e7a3..c5cb3fb1 100644
--- a/lib/network/modules/components/shared/Label.js
+++ b/lib/network/modules/components/shared/Label.js
@@ -797,14 +797,15 @@ class Label {
                 let words = blocks[j].text.split(" ");
                 let atStart = true
                 let text = "";
-                let measure;
+                let measure = { width: 0 };
                 let lastMeasure;
                 let w = 0;
                 while (w < words.length) {
                   let pre = atStart ? "" : " ";
                   lastMeasure = measure;
                   measure = ctx.measureText(text + pre + words[w]);
-                  if (lineWidth + measure.width > this.fontOptions.maxWdt) {
+                  if ((lineWidth + measure.width > this.fontOptions.maxWdt) &&
+                      (lastMeasure.width != 0)) {
                     lineHeight = (values.height > lineHeight) ? values.height : lineHeight;
                     lines.add(k, text, values.font, values.color, lastMeasure.width, values.height, values.vadjust, blocks[j].mod, values.strokeWidth, values.strokeColor);
                     lines.accumulate(k, lastMeasure.width, lineHeight);
@@ -850,14 +851,14 @@ class Label {
           if (this.fontOptions.maxWdt > 0) {
             let words = nlLines[i].split(" ");
             let text = "";
-            let measure;
+            let measure = { width: 0 };
             let lastMeasure;
             let w = 0;
             while (w < words.length) {
               let pre = (text === "") ? "" : " ";
               lastMeasure = measure;
               measure = ctx.measureText(text + pre + words[w]);
-              if (measure.width > this.fontOptions.maxWdt) {
+              if ((measure.width > this.fontOptions.maxWdt) && (lastMeasure.width != 0)) {
                 lines.addAndAccumulate(k, text, values.font, values.color, lastMeasure.width, values.size, values.vadjust, "normal", values.strokeWidth, values.strokeColor)
                 width = lines[k].width > width ? lines[k].width : width;
                 height += lines[k].height;
diff --git a/test/network/maximumWidthEdgeCase.html b/test/network/maximumWidthEdgeCase.html
new file mode 100644
index 00000000..34ff24d4
--- /dev/null
+++ b/test/network/maximumWidthEdgeCase.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html>
+<head>
+  <title>Maximum Width Edge Case 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: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+  </style>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+<p>A word in a label that's wider than the maximum width will be forced onto a line. We can't do better without breaking the word into pieces, and even then the pieces could still be too wide.</p>
+
+<p>Avoid the problem. Don't set ridiculously small maximum widths.</p>
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+  var nodes = new vis.DataSet([
+      { id: 1, label: 'Node 1', widthConstraint : { maximum : 30 } }
+  ]);
+
+  var edges = [];
+
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {
+    edges: {
+      font: {
+        size: 12
+      },
+      widthConstraint: {
+        maximum: 90
+      }
+    },
+    nodes: {
+      shape: 'box',
+      margin: 10,
+      font: {
+        multi: true
+      },
+      widthConstraint: {
+        maximum: 200
+      }
+    },
+    physics: {
+      enabled: false
+    }
+  };
+  var network = new vis.Network(container, data, options);
+</script>
+
+</body>
+</html>