From fcb6c0aa030211c2360d0416a4b8e76573917621 Mon Sep 17 00:00:00 2001 From: wimrijnders Date: Sat, 9 Sep 2017 20:35:27 +0200 Subject: [PATCH] Network: Added default sizes for nodes without labels (#3421) * Added default sizes for nodes without labels * Next attempt at fixing travis problem * Fix on calculation of multifont labels - the height was calculated too large. --- lib/network/modules/CanvasRenderer.js | 29 +++++++++++------ .../modules/components/nodes/shapes/Box.js | 7 +++-- .../modules/components/nodes/shapes/Circle.js | 9 +++--- .../components/nodes/shapes/Database.js | 7 +++-- .../components/nodes/shapes/Ellipse.js | 8 ++--- .../modules/components/nodes/util/NodeBase.js | 31 +++++++++++++++++++ .../components/nodes/util/ShapeBase.js | 3 -- .../modules/components/shared/Label.js | 8 +++-- 8 files changed, 73 insertions(+), 29 deletions(-) diff --git a/lib/network/modules/CanvasRenderer.js b/lib/network/modules/CanvasRenderer.js index d235ef11..cc9ea0fd 100644 --- a/lib/network/modules/CanvasRenderer.js +++ b/lib/network/modules/CanvasRenderer.js @@ -149,19 +149,28 @@ class CanvasRenderer { // This is not something that will happen in normal operation, but we still need // to take it into account. // - var myWindow = window; // Grab a reference to reduce the possibility that 'window' is reset + let timer; + + try { + var myWindow = window; // Grab a reference to reduce the possibility that 'window' is reset // while running this method. - if (myWindow === undefined) return; + if (myWindow === undefined) return; - let timer; - if (this.requiresTimeout === true) { - // wait given number of milliseconds and perform the animation step function - timer = myWindow.setTimeout(callback, delay); - } - else { - if (myWindow.requestAnimationFrame) { - timer = myWindow.requestAnimationFrame(callback); + if (this.requiresTimeout === true) { + // wait given number of milliseconds and perform the animation step function + timer = myWindow.setTimeout(callback, delay); + } else { + if (myWindow.requestAnimationFrame) { + timer = myWindow.requestAnimationFrame(callback); + } + } + } catch(e) { + console.warning("Got exception with message: '" + e.message() + "'"); + if (e.message() === 'window is undefined') { + console.warning("'" + e.message() + "' happened again"); + } else { + throw e; } } diff --git a/lib/network/modules/components/nodes/shapes/Box.js b/lib/network/modules/components/nodes/shapes/Box.js index 5a1884db..981fc93d 100644 --- a/lib/network/modules/components/nodes/shapes/Box.js +++ b/lib/network/modules/components/nodes/shapes/Box.js @@ -26,9 +26,10 @@ class Box extends NodeBase { */ resize(ctx, selected = this.selected, hover = this.hover) { if (this.needsRefresh(selected, hover)) { - this.textSize = this.labelModule.getTextSize(ctx, selected, hover); - this.width = this.textSize.width + this.margin.right + this.margin.left; - this.height = this.textSize.height + this.margin.top + this.margin.bottom; + var dimensions = this.getDimensionsFromLabel(ctx, selected, hover); + + this.width = dimensions.width + this.margin.right + this.margin.left; + this.height = dimensions.height + this.margin.top + this.margin.bottom; this.radius = this.width / 2; } } diff --git a/lib/network/modules/components/nodes/shapes/Circle.js b/lib/network/modules/components/nodes/shapes/Circle.js index 15275638..07c02174 100644 --- a/lib/network/modules/components/nodes/shapes/Circle.js +++ b/lib/network/modules/components/nodes/shapes/Circle.js @@ -26,11 +26,12 @@ class Circle extends CircleImageBase { */ resize(ctx, selected = this.selected, hover = this.hover) { if (this.needsRefresh(selected, hover)) { - this.textSize = this.labelModule.getTextSize(ctx, selected, hover); - var diameter = Math.max(this.textSize.width + this.margin.right + this.margin.left, - this.textSize.height + this.margin.top + this.margin.bottom); - this.options.size = diameter / 2; + var dimensions = this.getDimensionsFromLabel(ctx, selected, hover); + var diameter = Math.max(dimensions.width + this.margin.right + this.margin.left, + dimensions.height + this.margin.top + this.margin.bottom); + + this.options.size = diameter / 2; // NOTE: this size field only set here, not in Ellipse, Database, Box this.width = diameter; this.height = diameter; this.radius = this.width / 2; diff --git a/lib/network/modules/components/nodes/shapes/Database.js b/lib/network/modules/components/nodes/shapes/Database.js index addb9f75..f9a17dab 100644 --- a/lib/network/modules/components/nodes/shapes/Database.js +++ b/lib/network/modules/components/nodes/shapes/Database.js @@ -26,9 +26,10 @@ class Database extends NodeBase { */ resize(ctx, selected, hover) { if (this.needsRefresh(selected, hover)) { - this.textSize = this.labelModule.getTextSize(ctx, selected, hover); - var size = this.textSize.width + this.margin.right + this.margin.left; - this.width = size; + var dimensions = this.getDimensionsFromLabel(ctx, selected, hover); + var size = dimensions.width + this.margin.right + this.margin.left; + + this.width = size; this.height = size; this.radius = this.width / 2; } diff --git a/lib/network/modules/components/nodes/shapes/Ellipse.js b/lib/network/modules/components/nodes/shapes/Ellipse.js index 561a8851..b625ff68 100644 --- a/lib/network/modules/components/nodes/shapes/Ellipse.js +++ b/lib/network/modules/components/nodes/shapes/Ellipse.js @@ -19,16 +19,16 @@ class Ellipse extends NodeBase { /** * - * @param {CanvasRenderingContext2D} ctx - Unused. + * @param {CanvasRenderingContext2D} ctx * @param {boolean} [selected] * @param {boolean} [hover] */ resize(ctx, selected = this.selected, hover = this.hover) { if (this.needsRefresh(selected, hover)) { - var textSize = this.labelModule.getTextSize(ctx, selected, hover); + var dimensions = this.getDimensionsFromLabel(ctx, selected, hover); - this.height = textSize.height * 2; - this.width = textSize.width + this.height; + this.height = dimensions.height * 2; + this.width = dimensions.width + dimensions.height; this.radius = 0.5*this.width; } } diff --git a/lib/network/modules/components/nodes/util/NodeBase.js b/lib/network/modules/components/nodes/util/NodeBase.js index daac4a0c..e2348517 100644 --- a/lib/network/modules/components/nodes/util/NodeBase.js +++ b/lib/network/modules/components/nodes/util/NodeBase.js @@ -259,6 +259,37 @@ class NodeBase { updateBoundingBox(x, y, ctx, selected, hover) { this._updateBoundingBox(x, y, ctx, selected, hover); } + + + /** + * Determine the dimensions to use for nodes with an internal label + * + * Currently, these are: Circle, Ellipse, Database, Box + * The other nodes have external labels, and will not call this method + * + * If there is no label, decent default values are supplied. + * + * @param {CanvasRenderingContext2D} ctx + * @param {boolean} [selected] + * @param {boolean} [hover] + * @returns {{width:number, height:number}} + */ + getDimensionsFromLabel(ctx, selected, hover) { + // NOTE: previously 'textSize' was not put in 'this' for Ellipse + // TODO: examine the consequences. + this.textSize = this.labelModule.getTextSize(ctx, selected, hover); + var width = this.textSize.width; + var height = this.textSize.height; + + const DEFAULT_SIZE = 14; + if (width === 0) { + // This happens when there is no label text set + width = DEFAULT_SIZE; // use a decent default + height = DEFAULT_SIZE; // if width zero, then height also always zero + } + + return {width:width, height:height}; + } } export default NodeBase; diff --git a/lib/network/modules/components/nodes/util/ShapeBase.js b/lib/network/modules/components/nodes/util/ShapeBase.js index 8f0950a5..087e1bfd 100644 --- a/lib/network/modules/components/nodes/util/ShapeBase.js +++ b/lib/network/modules/components/nodes/util/ShapeBase.js @@ -80,9 +80,6 @@ class ShapeBase extends NodeBase { this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height); } } - - - } export default ShapeBase; diff --git a/lib/network/modules/components/shared/Label.js b/lib/network/modules/components/shared/Label.js index ee4be129..1548ce8c 100644 --- a/lib/network/modules/components/shared/Label.js +++ b/lib/network/modules/components/shared/Label.js @@ -111,11 +111,15 @@ class LabelAccumulator { // Note that width has already been set for (let k = 0; k < this.lines.length; k++) { let line = this.lines[k]; - let height = 0; + // Looking for max height of blocks in line + let height = 0; for (let l = 0; l < line.blocks.length; l++) { let block = line.blocks[l]; - height += block.height; + + if (height < block.height) { + height = block.height; + } } line.height = height;