jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/develop' into develop

codeClimate
jos 8 years ago
parent
53219c3a08 1724c1b1bc
commit
f051f1f119
7 changed files with 112 additions and 23 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -1
      docs/network/nodes.html
  2. +67
    -0
      examples/network/exampleApplications/disassemblerExample.html
  3. +7
    -3
      examples/network/labels/labelAlignment.html
  4. +1
    -1
      lib/network/modules/NodesHandler.js
  5. +1
    -1
      lib/network/modules/components/Edge.js
  6. +1
    -1
      lib/network/modules/components/Node.js
  7. +27
    -16
      lib/network/modules/components/shared/Label.js

+ 8
- 1
docs/network/nodes.html View File

@ -133,7 +133,7 @@ var options = {
background: 'none', background: 'none',
strokeWidth: 0, // px strokeWidth: 0, // px
strokeColor: '#ffffff', strokeColor: '#ffffff',
align: 'horizontal'
align: 'center'
}, },
group: undefined, group: undefined,
hidden: false, hidden: false,
@ -374,6 +374,13 @@ network.setOptions(options);
<td><code>'#ffffff'</code></td> <td><code>'#ffffff'</code></td>
<td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td> <td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td>
</tr> </tr>
<tr parent="font" class="hidden">
<td class="indent">font.align</td>
<td>String</td>
<td><code>'center'</code></td>
<td>This can be set to 'left' to make the label left-aligned. Otherwise,
defaults to 'center'.</td>
</tr>
<tr> <tr>
<td>group</td> <td>group</td>
<td>String</td> <td>String</td>

+ 67
- 0
examples/network/exampleApplications/disassemblerExample.html View File

@ -0,0 +1,67 @@
<html>
<head>
<style type="text/css">
#mynetwork {
width: 900px;
height: 850px;
border: 1px solid lightgray;
}
</style>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script>
</head>
<body>
<p>Use VisJS to diagram the Control-Flow-Graph (CFG) of a function from
a program you wish to analyze.</p>
<p><div id="mynetwork"></div><br /></p>
<script type="text/javascript">
var opts = {
manipulation: false,
height: '90%',
layout: {
hierarchical: {
enabled: true,
levelSeparation: 300
}
},
physics: {
hierarchicalRepulsion: {
nodeDistance: 300
}
}
};
nodes = [
{'id': 'cfg_0x00405a2e', 'size': 150, 'label': "0x00405a2e:\nmov DWORD PTR ss:[esp + 0x000000b0], 0x00000002\nmov DWORD PTR ss:[ebp + 0x00], esi\ntest bl, 0x02\nje 0x00405a49<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a49', 'size': 150, 'label': "0x00405a49:\ntest bl, 0x01\nje 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a55', 'size': 150, 'label': "0x00405a55:\nmov ecx, DWORD PTR ss:[esp + 0x1c]\npush ecx\ncall 0x004095c6<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a62', 'size': 150, 'label': "0x00405a62:\nmov eax, 0x00000002\nmov ecx, DWORD PTR ss:[esp + 0x000000a8]\nmov DWORD PTR fs:[0x00000000], ecx\npop ecx\npop esi\npop ebp\npop ebx\nadd esp, 0x000000a4\nret\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x004095c6', 'size': 150, 'label': "0x004095c6:\nmov edi, edi\npush ebp\nmov ebp, esp\npop ebp\njmp 0x00417563<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a39', 'size': 150, 'label': "0x00405a39:\nand ebx, 0xfd<-0x03>\nlea ecx, [esp + 0x34]\nmov DWORD PTR ss:[esp + 0x10], ebx\ncall 0x00403450<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00403450', 'size': 150, 'label': "0x00403450:\npush 0xff<-0x01>\npush 0x0042fa64\nmov eax, DWORD PTR fs:[0x00000000]\npush eax\npush ecx\npush ebx\npush ebp\npush esi\npush edi\nmov eax, DWORD PTR ds:[0x0043dff0<.data+0x0ff0>]\nxor eax, esp\npush eax\nlea eax, [esp + 0x18]\nmov DWORD PTR fs:[0x00000000], eax\nmov esi, ecx\nmov DWORD PTR ss:[esp + 0x14], esi\npush esi\nmov DWORD PTR ss:[esp + 0x24], 0x00000004\ncall 0x0042f03f<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a4e', 'size': 150, 'label': "0x00405a4e:\ncmp DWORD PTR ss:[esp + 0x30], 0x10\njb 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a5f', 'size': 150, 'label': "0x00405a5f:\nadd esp, 0x04\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
]
edges = [
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a39", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a4e", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x00405a5f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x004095c6", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x004095c6", 'to': "cfg_0x00417563", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00403450", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x00403489", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x0042f03f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a55", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a5f", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
]
var container = document.getElementById('mynetwork');
var data = {'nodes': nodes, 'edges': edges}
var gph = new vis.Network(container, data, opts);
</script>
</body>
</html>

+ 7
- 3
examples/network/labels/labelAlignment.html View File

@ -21,7 +21,10 @@
<body> <body>
<p>Labels of edges can be aligned to edges in various ways. <br>Label alignment for nodes (top, bottom, left, right, inside) is planned but not in vis yet.</p>
<p>Labels of edges can be aligned to edges in various ways.</p>
<p>Text-alignment within node labels can be 'left' or 'center', other font alignments not implemented.</p>
<p>Label alignment (placement of label &quot;box&quot;) for nodes (top, bottom, left, right, inside) is
planned but not in vis yet.</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
@ -30,9 +33,10 @@
var nodes = [ var nodes = [
{id: 1, label: 'Node 1'}, {id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'}, {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: 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 // create an array with edges

+ 1
- 1
lib/network/modules/NodesHandler.js View File

@ -49,7 +49,7 @@ class NodesHandler {
background: 'none', background: 'none',
strokeWidth: 0, // px strokeWidth: 0, // px
strokeColor: '#ffffff', strokeColor: '#ffffff',
align: 'horizontal'
align: 'center'
}, },
group: undefined, group: undefined,
hidden: false, hidden: false,

+ 1
- 1
lib/network/modules/components/Edge.js View File

@ -49,7 +49,7 @@ class Edge {
this.connected = false; 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); this.setOptions(options);
} }

+ 1
- 1
lib/network/modules/components/Node.js View File

@ -67,7 +67,7 @@ class Node {
this.selected = false; this.selected = false;
this.hover = 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); this.setOptions(options);
} }

+ 27
- 16
lib/network/modules/components/shared/Label.js View File

@ -1,7 +1,7 @@
let util = require('../../../../util'); let util = require('../../../../util');
class Label { class Label {
constructor(body,options) {
constructor(body,options,edgelabel = false) {
this.body = body; this.body = body;
this.pointToSelf = false; this.pointToSelf = false;
@ -9,6 +9,7 @@ class Label {
this.fontOptions = {}; this.fontOptions = {};
this.setOptions(options); this.setOptions(options);
this.size = {top: 0, left: 0, width: 0, height: 0, yLine: 0}; // could be cached this.size = {top: 0, left: 0, width: 0, height: 0, yLine: 0}; // could be cached
this.isEdgeLabel = edgelabel;
} }
setOptions(options, allowDeletion = false) { setOptions(options, allowDeletion = false) {
@ -87,19 +88,23 @@ class Label {
let lineMargin = 2; 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 // configure context for drawing the text
ctx.font = (selected && this.nodeOptions.labelHighlightBold ? 'bold ' : '') + fontSize + "px " + this.fontOptions.face; ctx.font = (selected && this.nodeOptions.labelHighlightBold ? 'bold ' : '') + fontSize + "px " + this.fontOptions.face;
ctx.fillStyle = fontColor; 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 // set the strokeWidth
if (this.fontOptions.strokeWidth > 0) { if (this.fontOptions.strokeWidth > 0) {
@ -149,7 +160,7 @@ class Label {
_setAlignment(ctx, x, yLine, baseline) { _setAlignment(ctx, x, yLine, baseline) {
// check for label alignment (for edges) // check for label alignment (for edges)
// TODO: make alignment for nodes // 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; x = 0;
yLine = 0; yLine = 0;

Write Preview
Loading…
Cancel
Save