From 486f89ca1b0c7921a93a5ef8751bdae0549e0163 Mon Sep 17 00:00:00 2001 From: Coleman Kane Date: Thu, 3 Sep 2015 10:33:32 -0400 Subject: [PATCH 1/7] Allow node labels to be left-justified with textAlign: 'left' Will only apply to Network nodes with a shape: 'box' property, as most other shapes this will not make sense for. This enables the box shape to be used, for instance, for diagraming CFG data from source code. --- lib/network/modules/NodesHandler.js | 3 ++- lib/network/modules/components/shared/Label.js | 8 +++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js index a460479d..6a3317c1 100644 --- a/lib/network/modules/NodesHandler.js +++ b/lib/network/modules/NodesHandler.js @@ -49,7 +49,8 @@ class NodesHandler { background: 'none', strokeWidth: 0, // px strokeColor: '#ffffff', - align: 'horizontal' + align: 'horizontal', + textAlign: 'center' }, group: undefined, hidden: false, diff --git a/lib/network/modules/components/shared/Label.js b/lib/network/modules/components/shared/Label.js index 64c0c374..7dcc3846 100644 --- a/lib/network/modules/components/shared/Label.js +++ b/lib/network/modules/components/shared/Label.js @@ -127,7 +127,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 shape is a box and the textAlign property is 'left', make label left-justified + if (this.options.shape === 'box' && this.options.font.textAlign === 'left') { + ctx.textAlign = 'left'; + x = x - (this.size.wideth >> 1); // Shift label 1/2-way (>>1 == div by 2) left + } else { + ctx.textAlign = 'center'; + } // set the strokeWidth if (this.fontOptions.strokeWidth > 0) { From e39f3af148aa5c2a8ba75b64d829ec003569a519 Mon Sep 17 00:00:00 2001 From: Coleman Kane Date: Thu, 3 Sep 2015 10:51:19 -0400 Subject: [PATCH 2/7] Update documentation for PR #1256 --- docs/network/nodes.html | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/network/nodes.html b/docs/network/nodes.html index e6cf075d..dfb0f3d6 100644 --- a/docs/network/nodes.html +++ b/docs/network/nodes.html @@ -133,7 +133,8 @@ var options = { background: 'none', strokeWidth: 0, // px strokeColor: '#ffffff', - align: 'horizontal' + align: 'horizontal', + textAlign: 'center' }, group: undefined, hidden: false, @@ -370,6 +371,13 @@ network.setOptions(options); '#ffffff' This is the color of the stroke assuming the value for stroke is higher than 0. + + font.textAlign + String + 'center' + If shape is box, this can be set to 'left' to make the label left-aligned. Otherwise, + defaults/resets to 'center'. + group String From b5c59a547d633b9604544531ede3db53964c2ffa Mon Sep 17 00:00:00 2001 From: Coleman Kane Date: Sat, 5 Sep 2015 16:59:38 -0400 Subject: [PATCH 3/7] Remove the "must be a box" requirement. Theoretically, there are multiple node shape types that this could apply to. --- docs/network/nodes.html | 4 ++-- lib/network/modules/components/shared/Label.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/network/nodes.html b/docs/network/nodes.html index dfb0f3d6..3b167416 100644 --- a/docs/network/nodes.html +++ b/docs/network/nodes.html @@ -375,8 +375,8 @@ network.setOptions(options); font.textAlign String 'center' - If shape is box, this can be set to 'left' to make the label left-aligned. Otherwise, - defaults/resets to 'center'. + This can be set to 'left' to make the label left-aligned. Otherwise, + defaults to 'center'. group diff --git a/lib/network/modules/components/shared/Label.js b/lib/network/modules/components/shared/Label.js index 7dcc3846..e3983127 100644 --- a/lib/network/modules/components/shared/Label.js +++ b/lib/network/modules/components/shared/Label.js @@ -127,9 +127,9 @@ class Label { // configure context for drawing the text ctx.font = (selected && this.nodeOptions.labelHighlightBold ? 'bold ' : '') + fontSize + "px " + this.fontOptions.face; ctx.fillStyle = fontColor; - // When the shape is a box and the textAlign property is 'left', make label left-justified - if (this.options.shape === 'box' && this.options.font.textAlign === 'left') { - ctx.textAlign = 'left'; + // When the textAlign property is 'left', make label left-justified + if (this.options.font.textAlign === 'left') { + ctx.textAlign = this.options.font.textAlign; x = x - (this.size.wideth >> 1); // Shift label 1/2-way (>>1 == div by 2) left } else { ctx.textAlign = 'center'; From 37fbe7f43ce419f0dcbd1d476dcc7798bdfdaa0b Mon Sep 17 00:00:00 2001 From: Coleman Kane Date: Mon, 7 Sep 2015 11:35:14 -0400 Subject: [PATCH 4/7] Fix a typo and swap SHR for mul-by-coeff --- 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 e3983127..1e61d937 100644 --- a/lib/network/modules/components/shared/Label.js +++ b/lib/network/modules/components/shared/Label.js @@ -130,7 +130,7 @@ class Label { // When the textAlign property is 'left', make label left-justified if (this.options.font.textAlign === 'left') { ctx.textAlign = this.options.font.textAlign; - x = x - (this.size.wideth >> 1); // Shift label 1/2-way (>>1 == div by 2) left + x = x - 0.5 * this.size.width; // Shift label 1/2-distance to the left } else { ctx.textAlign = 'center'; } From c966a5feba4dab5ec3e972b738af123a678e93c3 Mon Sep 17 00:00:00 2001 From: Coleman Kane Date: Mon, 7 Sep 2015 12:22:08 -0400 Subject: [PATCH 5/7] Put node-label alignment into 'align' rather than 'textAlign' Node labels don't currently make use of the 'align' property, so this reuses the existing property. The label code has a number of alignment options that make sense to edges only, so the Edge/Node now passes a boolean to the Label ctor to explain which the label is being rendered for --- docs/network/nodes.html | 5 +-- lib/network/modules/NodesHandler.js | 3 +- lib/network/modules/components/Edge.js | 2 +- lib/network/modules/components/Node.js | 2 +- .../modules/components/shared/Label.js | 39 +++++++++++-------- 5 files changed, 27 insertions(+), 24 deletions(-) diff --git a/docs/network/nodes.html b/docs/network/nodes.html index 3b167416..0573f8bd 100644 --- a/docs/network/nodes.html +++ b/docs/network/nodes.html @@ -133,8 +133,7 @@ var options = { background: 'none', strokeWidth: 0, // px strokeColor: '#ffffff', - align: 'horizontal', - textAlign: 'center' + align: 'center' }, group: undefined, hidden: false, @@ -372,7 +371,7 @@ network.setOptions(options); This is the color of the stroke assuming the value for stroke is higher than 0. - font.textAlign + font.align String 'center' This can be set to 'left' to make the label left-aligned. Otherwise, diff --git a/lib/network/modules/NodesHandler.js b/lib/network/modules/NodesHandler.js index 6a3317c1..491c5357 100644 --- a/lib/network/modules/NodesHandler.js +++ b/lib/network/modules/NodesHandler.js @@ -49,8 +49,7 @@ class NodesHandler { background: 'none', strokeWidth: 0, // px strokeColor: '#ffffff', - align: 'horizontal', - textAlign: 'center' + align: 'center' }, group: undefined, hidden: false, diff --git a/lib/network/modules/components/Edge.js b/lib/network/modules/components/Edge.js index c4d36230..889c113a 100644 --- a/lib/network/modules/components/Edge.js +++ b/lib/network/modules/components/Edge.js @@ -48,7 +48,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 d7554f98..4d370851 100644 --- a/lib/network/modules/components/Node.js +++ b/lib/network/modules/components/Node.js @@ -66,7 +66,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 1e61d937..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); } } } @@ -128,8 +133,8 @@ class Label { ctx.font = (selected && this.nodeOptions.labelHighlightBold ? 'bold ' : '') + fontSize + "px " + this.fontOptions.face; ctx.fillStyle = fontColor; // When the textAlign property is 'left', make label left-justified - if (this.options.font.textAlign === 'left') { - ctx.textAlign = this.options.font.textAlign; + 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'; @@ -155,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; From b97a2a74f3d7d479906b3e32f53e0ccb09c6dc4b Mon Sep 17 00:00:00 2001 From: Coleman Kane Date: Sun, 6 Mar 2016 14:44:48 -0500 Subject: [PATCH 6/7] Add left-align to the example --- examples/network/labels/labelAlignment.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) 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 From b10f7d0fefdf3260586b00ed468a219cda68bfd9 Mon Sep 17 00:00:00 2001 From: Coleman Kane Date: Sun, 6 Mar 2016 14:55:14 -0500 Subject: [PATCH 7/7] Add an application-specific example of a CFG-viewer for analyzing software --- .../disassemblerExample.html | 67 +++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 examples/network/exampleApplications/disassemblerExample.html 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.

+


+ + +