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

Fix: Network nodes ignoring widthConstraint after hover #4154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6313bf2
Network: Set ctx font size & face in LabelSplitter.process
moppius Aug 19, 2018
e0af8ae
Whitespace consistency fix
moppius Aug 19, 2018
74bfc6f
Added example file for widthConstraint test
moppius Oct 11, 2018
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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>