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

- Added labelAlignment option to edges. Thanks @T-rav! merged #566

v3_develop
Alex de Mulder 9 years ago
parent
f5fce4efc8
commit
74e58d668c
10 changed files with 27071 additions and 26847 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      HISTORY.md
  2. +26881
    -26799
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +15
    -15
      dist/vis.min.js
  5. +15
    -8
      docs/network.html
  6. +51
    -0
      examples/network/37_label_alignment.html
  7. +1
    -0
      examples/network/index.html
  8. +103
    -22
      lib/network/Edge.js
  9. +1
    -0
      lib/network/Network.js
  10. +2
    -2
      lib/network/Node.js

+ 1
- 0
HISTORY.md View File

@ -18,6 +18,7 @@ http://visjs.org
- Improved edit edge control nodes positions, altered style a little.
- Fixed issue #564 by resetting state to initial when no callback is performed in the return function.
- Added condition to Repulsion similar to BarnesHut to ensure nodes do not overlap.
- Added labelAlignment option to edges. Thanks @T-rav!
### Timeline

+ 26881
- 26799
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 15
- 15
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 15
- 8
docs/network.html View File

@ -1182,9 +1182,23 @@ var options = {
<td>The color of the label stroke.
Only applicable when property <code>label</code> is defined.</td>
</tr>
<tr>
<td class="greenField">inheritColor</td>
<td>String | Boolean</td>
<td>from</td>
<td>Possible values: <code>"to","from", true, false</code>. If this value is set to false, the edge color information is used. If the value is set to true or "from",
the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used.</td>
</tr>
<tr>
<td class="greenField">labelAlignment</td>
<td>String</td>
<td>horizontal</td>
<td>Possible values: <code>"line-above", "line-center", "line-below"</code>. The alignment of the label when drawn on the edge.
If <code>horizontal</code> it will align the label absolute horizontial.</td>
</tr>
<tr>
<td class="greenField">style</td>
<td class="greenField">style</td>
<td>string</td>
<td>line</td>
<td>Define a line style for the edge.
@ -1192,13 +1206,6 @@ var options = {
<code>arrow-center</code>, or <code>dash-line</code>.
</td>
</tr>
<tr>
<td class="greenField">inheritColor</td>
<td>String | Boolean</td>
<td>from</td>
<td>Possible values: <code>"to","from", true, false</code>. If this value is set to false, the edge color information is used. If the value is set to true or "from",
the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used.</td>
</tr>
<tr>
<td class="greenField">width</td>
<td>number</td>

+ 51
- 0
examples/network/37_label_alignment.html View File

@ -0,0 +1,51 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
// create an array with edges
var edges = [
{from: 1, to: 2, label: '1 to 2', labelAlignment:'line-center', fontFill:'orange' },
{from: 1, to: 3, label: '1 to 3', labelAlignment:'line-above', fontFill:'green'},
{from: 2, to: 4, label: '2 to 4', fontFill:'red'},
{from: 2, to: 5, label: '2 to 5', labelAlignment:'line-below', fontFill:'#ccd' }
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

+ 1
- 0
examples/network/index.html View File

@ -48,6 +48,7 @@
<p><a href="34_circular_images.html">34_circular_images.html</a></p>
<p><a href="35_label_stroke.html">35_label_stroke.html</a></p>
<p><a href="36_HTML_in_Nodes.html">36_HTML_in_Nodes.html</a></p>
<p><a href="37_label_alignment.html">37_label_alignment.html</a></p>
<p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
</div>

+ 103
- 22
lib/network/Edge.js View File

@ -76,7 +76,7 @@ Edge.prototype.setProperties = function(properties) {
}
var fields = ['style','fontSize','fontFace','fontColor','fontFill','fontStrokeWidth','fontStrokeColor','width',
'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor'
'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor','labelAlignment'
];
util.selectiveDeepExtend(fields, this.options, properties);
@ -119,6 +119,7 @@ Edge.prototype.setProperties = function(properties) {
case 'dash-line': this.draw = this._drawDashLine; break;
default: this.draw = this._drawLine; break;
}
};
/**
@ -564,7 +565,7 @@ Edge.prototype._label = function (ctx, text, x, y) {
if (this.dirtyLabel == true) {
var lines = String(text).split('\n');
var lineCount = lines.length;
var fontSize = (Number(this.options.fontSize) + 4);
var fontSize = Number(this.options.fontSize);
yLine = y + (1 - lineCount) / 2 * fontSize;
var width = ctx.measureText(lines[0]).width;
@ -580,33 +581,113 @@ Edge.prototype._label = function (ctx, text, x, y) {
this.labelDimensions = {top:top,left:left,width:width,height:height,yLine:yLine};
}
var yLine = this.labelDimensions.yLine;
ctx.save();
if (this.options.labelAlignment != "horizontal"){
ctx.translate(x, yLine);
this._rotateForLabelAlignment(ctx);
x = 0;
yLine = 0;
}
this._drawLabelRect(ctx);
this._drawLabelText(ctx,x,yLine, lines, lineCount, fontSize);
ctx.restore();
}
};
/**
* Rotates the canvas so the text is most readable
* @param {CanvasRenderingContext2D} ctx
* @private
*/
Edge.prototype._rotateForLabelAlignment = function(ctx) {
var dy = this.from.y - this.to.y;
var dx = this.from.x - this.to.x;
var angleInDegrees = Math.atan2(dy, dx);
// rotate so label it is readable
if((angleInDegrees < -1 && dx < 0) || (angleInDegrees > 0 && dx < 0)){
angleInDegrees = angleInDegrees + Math.PI;
}
ctx.rotate(angleInDegrees);
};
if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
/**
* Draws the label rectangle
* @param {CanvasRenderingContext2D} ctx
* @param {String} labelAlignment
* @private
*/
Edge.prototype._drawLabelRect = function(ctx) {
if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
ctx.fillStyle = this.options.fontFill;
var lineMargin = 2;
if (this.options.labelAlignment == 'line-center') {
ctx.fillRect(-this.labelDimensions.width * 0.5, -this.labelDimensions.height * 0.5, this.labelDimensions.width, this.labelDimensions.height);
}
else if (this.options.labelAlignment == 'line-above') {
ctx.fillRect(-this.labelDimensions.width * 0.5, -(this.labelDimensions.height + lineMargin), this.labelDimensions.width, this.labelDimensions.height);
}
else if (this.options.labelAlignment == 'line-below') {
ctx.fillRect(-this.labelDimensions.width * 0.5, lineMargin, this.labelDimensions.width, this.labelDimensions.height);
}
else {
ctx.fillStyle = this.options.fontFill;
ctx.fillRect(this.labelDimensions.left,
this.labelDimensions.top,
this.labelDimensions.width,
this.labelDimensions.height);
ctx.fillRect(this.labelDimensions.left, this.labelDimensions.top, this.labelDimensions.width, this.labelDimensions.height);
}
}
};
// draw text
ctx.fillStyle = this.options.fontColor || "black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
if (this.options.fontStrokeWidth > 0){
ctx.lineWidth = this.options.fontStrokeWidth;
ctx.strokeStyle = this.options.fontStrokeColor;
ctx.lineJoin = 'round';
/**
* Draws the label text
* @param {CanvasRenderingContext2D} ctx
* @param {Number} x
* @param {Number} yLine
* @param {Array} lines
* @param {Number} lineCount
* @param {Number} fontSize
* @private
*/
Edge.prototype._drawLabelText = function(ctx, x, yLine, lines, lineCount, fontSize) {
// draw text
ctx.fillStyle = this.options.fontColor || "black";
ctx.textAlign = "center";
// check for label alignment
if (this.options.labelAlignment != 'horizontal') {
var lineMargin = 2;
if (this.options.labelAlignment == 'line-above') {
ctx.textBaseline = "alphabetic";
yLine -= 2 * lineMargin; // distance from edge, required because we use alphabetic. Alphabetic has less difference between browsers
}
yLine = this.labelDimensions.yLine;
for (var i = 0; i < lineCount; i++) {
if(this.options.fontStrokeWidth){
ctx.strokeText(lines[i], x, yLine);
}
ctx.fillText(lines[i], x, yLine);
yLine += fontSize;
else if (this.options.labelAlignment == 'line-below') {
ctx.textBaseline = "hanging";
yLine += 2 * lineMargin;// distance from edge, required because we use hanging. Hanging has less difference between browsers
}
else {
ctx.textBaseline = "middle";
}
}
// check for strokeWidth
if (this.options.fontStrokeWidth > 0){
ctx.lineWidth = this.options.fontStrokeWidth;
ctx.strokeStyle = this.options.fontStrokeColor;
ctx.lineJoin = 'round';
}
for (var i = 0; i < lineCount; i++) {
if(this.options.fontStrokeWidth > 0){
ctx.strokeText(lines[i], x, yLine);
}
ctx.fillText(lines[i], x, yLine);
yLine += fontSize;
}
};
/**

+ 1
- 0
lib/network/Network.js View File

@ -105,6 +105,7 @@ function Network (container, data, options) {
fontFill: 'white',
fontStrokeWidth: 0, // px
fontStrokeColor: 'white',
labelAlignment:'horizontal',
arrowScaleFactor: 1,
dash: {
length: 10,

+ 2
- 2
lib/network/Node.js View File

@ -1010,8 +1010,8 @@ Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNo
var top = y - height / 2;
if (baseline == "hanging") {
top += 0.5 * fontSize;
top += 3; // distance from node, required because we use hanging. Hanging has less difference between browsers
yLine += 3; // distance from node
top += 4; // distance from node, required because we use hanging. Hanging has less difference between browsers
yLine += 4; // distance from node
}
this.labelDimensions = {top:top,left:left,width:width,height:height,yLine:yLine};

Write Preview
Loading…
Cancel
Save