jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

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/
runTests
Alexander Wunschik 7 years ago
committed by Uli Fahrer
parent
c236718ca0
commit
cb20857c2d
3 changed files with 76 additions and 6 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +5
    -2
      examples/network/nodeStyles/widthHeight.html
  2. +5
    -4
      lib/network/modules/components/shared/Label.js
  3. +66
    -0
      test/network/maximumWidthEdgeCase.html

+ 5
- 2
examples/network/nodeStyles/widthHeight.html View File

@ -86,7 +86,7 @@ Whole-set node and edge constraints are exclusive.
{ from: 300, to: 301, label: "more minimum height"}, { from: 300, to: 301, label: "more minimum height"},
{ from: 100, to: 400, label: "unconstrained to top valign"}, { from: 100, to: 400, label: "unconstrained to top valign"},
{ from: 400, to: 401, label: "top valign to middle 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'); var container = document.getElementById('mynetwork');
@ -105,7 +105,10 @@ Whole-set node and edge constraints are exclusive.
}, },
nodes: { nodes: {
shape: 'box', shape: 'box',
margin: 10
margin: 10,
widthConstraint: {
maximum: 200
}
}, },
physics: { physics: {
enabled: false enabled: false

+ 5
- 4
lib/network/modules/components/shared/Label.js View File

@ -797,14 +797,15 @@ class Label {
let words = blocks[j].text.split(" "); let words = blocks[j].text.split(" ");
let atStart = true let atStart = true
let text = ""; let text = "";
let measure;
let measure = { width: 0 };
let lastMeasure; let lastMeasure;
let w = 0; let w = 0;
while (w < words.length) { while (w < words.length) {
let pre = atStart ? "" : " "; let pre = atStart ? "" : " ";
lastMeasure = measure; lastMeasure = measure;
measure = ctx.measureText(text + pre + words[w]); 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; 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.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); lines.accumulate(k, lastMeasure.width, lineHeight);
@ -850,14 +851,14 @@ class Label {
if (this.fontOptions.maxWdt > 0) { if (this.fontOptions.maxWdt > 0) {
let words = nlLines[i].split(" "); let words = nlLines[i].split(" ");
let text = ""; let text = "";
let measure;
let measure = { width: 0 };
let lastMeasure; let lastMeasure;
let w = 0; let w = 0;
while (w < words.length) { while (w < words.length) {
let pre = (text === "") ? "" : " "; let pre = (text === "") ? "" : " ";
lastMeasure = measure; lastMeasure = measure;
measure = ctx.measureText(text + pre + words[w]); 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) 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; width = lines[k].width > width ? lines[k].width : width;
height += lines[k].height; height += lines[k].height;

+ 66
- 0
test/network/maximumWidthEdgeCase.html View File

@ -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>

Write Preview
Loading…
Cancel
Save