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/
7 years ago · cb20857c2d
--- a/examples/network/nodeStyles/widthHeight.html
+++ b/examples/network/nodeStyles/widthHeight.html
@ -86,7 +86,7 @@ Whole-set node and edge constraints are exclusive.
    { 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.
    },
    nodes: {
      shape: 'box',
      margin: 10
      margin: 10,
      widthConstraint: {
        maximum: 200
      }
    },
    physics: {
      enabled: false
--- 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;
--- a/test/network/maximumWidthEdgeCase.html
+++ 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>