Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Fix: Network nodes ignoring widthConstraint after hover #4154

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions lib/network/modules/components/shared/Label.js
Original file line number Diff line number Diff line change
Expand Up @@ -713,7 +713,7 @@ class Label {
*/
_processLabelText(ctx, selected, hover, inText) {
let splitter = new LabelSplitter(ctx, this, selected, hover);
return splitter.process(inText);
return splitter.process(ctx, inText);
}


Expand All @@ -735,7 +735,7 @@ class Label {
state.width = this.fontOptions.minWdt;
}

this.size.labelHeight =state.height;
this.size.labelHeight = state.height;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't vital to the bug fix, but it was an inconsistency from the coding standard that I figured I should fix, since I was editing around there anyway.

if ((this.fontOptions.minHgt > 0) && (state.height < this.fontOptions.minHgt)) {
state.height = this.fontOptions.minHgt;
}
Expand Down
9 changes: 8 additions & 1 deletion lib/network/modules/components/shared/LabelSplitter.js
Original file line number Diff line number Diff line change
Expand Up @@ -336,16 +336,23 @@ class LabelSplitter {
* In order not to break existing functionality, for the time being this behaviour will
* be retained in any code changes.
*
* @param {CanvasRenderingContext2D} ctx
* @param {string} text text to split
* @returns {Array<line>}
*/
process(text) {
process(ctx, text) {
if (!ComponentUtil.isValidLabel(text)) {
return this.lines.finalize();
}

var font = this.parent.fontOptions;

// Set the context's font to match the label's main font,
// otherwise measurements will be incorrect.
let fontString = "";
fontString += font.size + "px " + font.face;
ctx.font = fontString.replace(/"/g, "");

// Normalize the end-of-line's to a single representation - order important
text = text.replace(/\r\n/g, '\n'); // Dos EOL's
text = text.replace(/\r/g, '\n'); // Mac EOL's
Expand Down
93 changes: 93 additions & 0 deletions test/network/hoverLabelSplitterEdgeCase.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!doctype html>
<html>
<head>
<title>Label Splitter 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">
#visualization {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>

<body>

<p><a href="https://github.com/almende/vis/issues/3928" target="_blank">Bug #3928</a> meant that nodes would change size after being hovered if they had a widthConstraint specified.</p>
<p>This was due to the context's font not being set to the correct value when the label was evaluated during edges update, so the line would be split based on incorrect measurements.</p>

<div id="visualization"><div class="vis-network"></div></div>

<script type="text/javascript">
var nodes = new vis.DataSet([{
id: 1,
label: 'Short Label',
}, {
id: 2,
label: 'This is a very long label that should wrap',
}]);

var edges = new vis.DataSet([{
from: 1,
to: 2,
}]);

var data = {
nodes: nodes,
edges: edges,
};

let options = {
physics: {
enabled: false,
},
nodes: {
shadow: true,
shape: "box",
color: {
border: "lightgray",
background: "white",
hover: {
background: "white",
border: "lightgray",
},
},
font: {
face: "tahoma",
size: 25,
},
labelHighlightBold: true,
shapeProperties: {
borderRadius: 2,
},
chosen: {
node: function(values, id, selected, hovering) {
if (hovering) {
values.borderWidth = 2;
values.borderColor = "gray";
}
},
},
widthConstraint: {
maximum: 180,
}
},
edges: {
arrows: {
to: {
enabled: true,
}
},
width: 3,
},
};

var container = document.getElementById('visualization');
var network = new vis.Network(container, data, options);
</script>
</body>
</html>