From 6313bf2f2308d814fbe02b7a41ceca4a17c94864 Mon Sep 17 00:00:00 2001 From: moppius Date: Sun, 19 Aug 2018 17:07:49 +0200 Subject: [PATCH 1/3] Network: Set ctx font size & face in LabelSplitter.process This fixes labels being split along the wrong lines. It doesn't take font modifiers into account, though, so still might be wrong in some circumstances. Just less wrong than before. Fixes #3928 for the most part. Arrowheads on edges can still be slightly misaligned in some cases. --- lib/network/modules/components/shared/Label.js | 2 +- lib/network/modules/components/shared/LabelSplitter.js | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/lib/network/modules/components/shared/Label.js b/lib/network/modules/components/shared/Label.js index bf769a04e..19c9370d2 100644 --- a/lib/network/modules/components/shared/Label.js +++ b/lib/network/modules/components/shared/Label.js @@ -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); } diff --git a/lib/network/modules/components/shared/LabelSplitter.js b/lib/network/modules/components/shared/LabelSplitter.js index 5ef0fc6d5..ecd2f9329 100644 --- a/lib/network/modules/components/shared/LabelSplitter.js +++ b/lib/network/modules/components/shared/LabelSplitter.js @@ -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} */ - 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 From e0af8ae122fa4e3439e2d25acd8deeefd8bda0da Mon Sep 17 00:00:00 2001 From: moppius Date: Sun, 19 Aug 2018 20:37:46 +0200 Subject: [PATCH 2/3] Whitespace consistency fix --- lib/network/modules/components/shared/Label.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/network/modules/components/shared/Label.js b/lib/network/modules/components/shared/Label.js index 19c9370d2..841ef1df1 100644 --- a/lib/network/modules/components/shared/Label.js +++ b/lib/network/modules/components/shared/Label.js @@ -735,7 +735,7 @@ class Label { state.width = this.fontOptions.minWdt; } - this.size.labelHeight =state.height; + this.size.labelHeight = state.height; if ((this.fontOptions.minHgt > 0) && (state.height < this.fontOptions.minHgt)) { state.height = this.fontOptions.minHgt; } From 74bfc6f55349ce27ac0e74ba4862c5a4ad72aaaf Mon Sep 17 00:00:00 2001 From: moppius Date: Thu, 11 Oct 2018 22:20:08 +0200 Subject: [PATCH 3/3] Added example file for widthConstraint test Example test page for validating bug regression. --- test/network/hoverLabelSplitterEdgeCase.html | 93 ++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 test/network/hoverLabelSplitterEdgeCase.html diff --git a/test/network/hoverLabelSplitterEdgeCase.html b/test/network/hoverLabelSplitterEdgeCase.html new file mode 100644 index 000000000..1f0896877 --- /dev/null +++ b/test/network/hoverLabelSplitterEdgeCase.html @@ -0,0 +1,93 @@ + + + + Label Splitter Text Measurement Test + + + + + + + + + +

Bug #3928 meant that nodes would change size after being hovered if they had a widthConstraint specified.

+

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.

+ +
+ + + + \ No newline at end of file