diff --git a/docs/network/nodes.html b/docs/network/nodes.html index c2ee7d39..c3cd63a1 100644 --- a/docs/network/nodes.html +++ b/docs/network/nodes.html @@ -133,7 +133,7 @@ var options = { background: 'none', strokeWidth: 0, // px strokeColor: '#ffffff', - align: 'horizontal' + align: 'center' }, group: undefined, hidden: false, @@ -374,6 +374,13 @@ network.setOptions(options); '#ffffff' This is the color of the stroke assuming the value for stroke is higher than 0. + + font.align + String + 'center' + This can be set to 'left' to make the label left-aligned. Otherwise, + defaults to 'center'. + group String diff --git a/examples/network/exampleApplications/disassemblerExample.html b/examples/network/exampleApplications/disassemblerExample.html new file mode 100644 index 00000000..0245999a --- /dev/null +++ b/examples/network/exampleApplications/disassemblerExample.html @@ -0,0 +1,67 @@ + + + + + + + +

Use VisJS to diagram the Control-Flow-Graph (CFG) of a function from +a program you wish to analyze.

+


+ + + diff --git a/examples/network/labels/labelAlignment.html b/examples/network/labels/labelAlignment.html index d302bc84..2397e219 100644 --- a/examples/network/labels/labelAlignment.html +++ b/examples/network/labels/labelAlignment.html @@ -21,7 +21,10 @@ -

Labels of edges can be aligned to edges in various ways.
Label alignment for nodes (top, bottom, left, right, inside) is planned but not in vis yet.

+

Labels of edges can be aligned to edges in various ways.

+

Text-alignment within node labels can be 'left' or 'center', other font alignments not implemented.

+

Label alignment (placement of label "box") for nodes (top, bottom, left, right, inside) is +planned but not in vis yet.

@@ -30,9 +33,10 @@ var nodes = [ {id: 1, label: 'Node 1'}, {id: 2, label: 'Node 2'}, - {id: 3, label: 'Node 3'}, + {id: 3, label: 'Node 3:\nLeft-Aligned', font: {'face': 'Monospace', align: 'left'}}, {id: 4, label: 'Node 4'}, - {id: 5, label: 'Node 5'} + {id: 5, label: 'Node 5\nLeft-Aligned box', shape: 'box', + font: {'face': 'Monospace', align: 'left'}} ]; // create an array with edges diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js index 475092fc..e548bd41 100644 --- a/lib/network/modules/NodesHandler.js +++ b/lib/network/modules/NodesHandler.js @@ -49,7 +49,7 @@ class NodesHandler { background: 'none', strokeWidth: 0, // px strokeColor: '#ffffff', - align: 'horizontal' + align: 'center' }, group: undefined, hidden: false, diff --git a/lib/network/modules/components/Edge.js b/lib/network/modules/components/Edge.js index 7afa94b1..415bf580 100644 --- a/lib/network/modules/components/Edge.js +++ b/lib/network/modules/components/Edge.js @@ -49,7 +49,7 @@ class Edge { this.connected = false; - this.labelModule = new Label(this.body, this.options); + this.labelModule = new Label(this.body, this.options, true /* It's an edge label */); this.setOptions(options); } diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js index 79e32375..d03aace0 100644 --- a/lib/network/modules/components/Node.js +++ b/lib/network/modules/components/Node.js @@ -67,7 +67,7 @@ class Node { this.selected = false; this.hover = false; - this.labelModule = new Label(this.body, this.options); + this.labelModule = new Label(this.body, this.options, false /* Not edge label */); this.setOptions(options); } diff --git a/lib/network/modules/components/shared/Label.js b/lib/network/modules/components/shared/Label.js index 64c0c374..9e00d431 100644 --- a/lib/network/modules/components/shared/Label.js +++ b/lib/network/modules/components/shared/Label.js @@ -1,7 +1,7 @@ let util = require('../../../../util'); class Label { - constructor(body,options) { + constructor(body,options,edgelabel = false) { this.body = body; this.pointToSelf = false; @@ -9,6 +9,7 @@ class Label { this.fontOptions = {}; this.setOptions(options); this.size = {top: 0, left: 0, width: 0, height: 0, yLine: 0}; // could be cached + this.isEdgeLabel = edgelabel; } setOptions(options, allowDeletion = false) { @@ -87,19 +88,23 @@ class Label { let lineMargin = 2; - switch (this.fontOptions.align) { - case 'middle': - ctx.fillRect(-this.size.width * 0.5, -this.size.height * 0.5, this.size.width, this.size.height); - break; - case 'top': - ctx.fillRect(-this.size.width * 0.5, -(this.size.height + lineMargin), this.size.width, this.size.height); - break; - case 'bottom': - ctx.fillRect(-this.size.width * 0.5, lineMargin, this.size.width, this.size.height); - break; - default: - ctx.fillRect(this.size.left, this.size.top - 0.5*lineMargin, this.size.width, this.size.height); - break; + if (this.isEdgeLabel) { + switch (this.fontOptions.align) { + case 'middle': + ctx.fillRect(-this.size.width * 0.5, -this.size.height * 0.5, this.size.width, this.size.height); + break; + case 'top': + ctx.fillRect(-this.size.width * 0.5, -(this.size.height + lineMargin), this.size.width, this.size.height); + break; + case 'bottom': + ctx.fillRect(-this.size.width * 0.5, lineMargin, this.size.width, this.size.height); + break; + default: + ctx.fillRect(this.size.left, this.size.top - 0.5*lineMargin, this.size.width, this.size.height); + break; + } + } else { + ctx.fillRect(this.size.left, this.size.top - 0.5*lineMargin, this.size.width, this.size.height); } } } @@ -127,7 +132,13 @@ class Label { // configure context for drawing the text ctx.font = (selected && this.nodeOptions.labelHighlightBold ? 'bold ' : '') + fontSize + "px " + this.fontOptions.face; ctx.fillStyle = fontColor; - ctx.textAlign = 'center'; + // When the textAlign property is 'left', make label left-justified + if ((!this.isEdgeLabel) && this.fontOptions.align === 'left') { + ctx.textAlign = this.fontOptions.align; + x = x - 0.5 * this.size.width; // Shift label 1/2-distance to the left + } else { + ctx.textAlign = 'center'; + } // set the strokeWidth if (this.fontOptions.strokeWidth > 0) { @@ -149,7 +160,7 @@ class Label { _setAlignment(ctx, x, yLine, baseline) { // check for label alignment (for edges) // TODO: make alignment for nodes - if (this.fontOptions.align !== 'horizontal' && this.pointToSelf === false) { + if (this.isEdgeLabel && this.fontOptions.align !== 'horizontal' && this.pointToSelf === false) { x = 0; yLine = 0;