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

merged pull #554

v3_develop
Alex de Mulder 9 years ago
parent
e9d6c9897a
commit
d5b6371bae
10 changed files with 26676 additions and 26532 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -0
      HISTORY.md
  2. +26538
    -26518
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +11
    -11
      dist/vis.min.js
  5. +38
    -0
      docs/network.html
  6. +63
    -0
      examples/network/35_label_stroke.html
  7. +1
    -0
      examples/network/index.html
  8. +9
    -1
      lib/network/Edge.js
  9. +4
    -0
      lib/network/Network.js
  10. +9
    -1
      lib/network/Node.js

+ 2
- 0
HISTORY.md View File

@ -12,11 +12,13 @@ http://visjs.org
- Altered the Manipulation Mixin to be succesfully destroyed from memory when calling destroy();
- Improved drawing of arrowheads on smooth curves. #349
- Caught case where click originated on external DOM element and drag progressed to vis.
- Added label stroke support to Nodes, Edges & Groups as per-object or global settings. Use `fontStrokeWidth` & `fontStrokeColor` (default values: 0 & 'white').
### Timeline
- Added byUser flag to options of the rangechange and rangechanged event.
## 20145-01-09, version 3.8.0
### General

+ 26538
- 26518
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


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


+ 38
- 0
docs/network.html View File

@ -932,6 +932,18 @@ All options defined per-node override these global settings.
<td>undefined</td>
<td>If a color is supplied, there will be a background color behind the label. If left undefined, no background color is shown.</td>
</tr>
<tr>
<td class="greenField">fontStrokeWidth</td>
<td>Number</td>
<td>0</td>
<td>The width of the label stroke (border around label's text) in pixels.</td>
</tr>
<tr>
<td class="greenField">fontStrokeColor</td>
<td>String</td>
<td>'white'</td>
<td>The color of the label stroke.</td>
</tr>
<tr>
<td class="greenField">shape</td>
@ -1156,6 +1168,20 @@ var options = {
<td>Font fill for the background color of the text label of the edge.
Only applicable when property <code>label</code> is defined.</td>
</tr>
<tr>
<td class="greenField">fontStrokeWidth</td>
<td>Number</td>
<td>0</td>
<td>The width of the label stroke (border around label's text) in pixels.
Only applicable when property <code>label</code> is defined.</td>
</tr>
<tr>
<td class="greenField">fontStrokeColor</td>
<td>String</td>
<td>'white'</td>
<td>The color of the label stroke.
Only applicable when property <code>label</code> is defined.</td>
</tr>
<tr>
<td class="greenField">style</td>
@ -1316,6 +1342,18 @@ var nodes = [
<td>14</td>
<td>Font size for the node in pixels.</td>
</tr>
<tr>
<td>fontStrokeWidth</td>
<td>Number</td>
<td>0</td>
<td>The width of the label stroke (border around label's text) in pixels.</td>
</tr>
<tr>
<td>fontStrokeColor</td>
<td>String</td>
<td>"white"</td>
<td>The color of the label stroke.</td>
</tr>
<tr>
<td>shape</td>
<td>String</td>

+ 63
- 0
examples/network/35_label_stroke.html View File

@ -0,0 +1,63 @@
<!doctype html>
<html>
<head>
<title>Network | Label stroke</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;
background: #d1d1d1;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1', fontStrokeWidth : 5, fontStrokeColor: 'white'},
{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: 'edgeLabel', fontStrokeWidth : 2, fontStrokeColor : '#00ff00'},
{from: 1, to: 3, label: 'edgeLabel'},
{from: 2, to: 4},
{from: 2, to: 5}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes : {
shape : 'dot',
fontStrokeWidth : 1,
fontStrokeColor : '#d1d1d1'
},
edges : {
fontStrokeWidth : 1,
fontStrokeColor : '#d1d1d1',
fontFill : 'none'
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

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

@ -46,6 +46,7 @@
<p><a href="32_hierarchicaLayoutMethods.html">32_hierarchicaLayoutMethods.html</a></p>
<p><a href="33_animation.html">33_animation.html</a></p>
<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="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
</div>

+ 9
- 1
lib/network/Edge.js View File

@ -75,7 +75,7 @@ Edge.prototype.setProperties = function(properties) {
return;
}
var fields = ['style','fontSize','fontFace','fontColor','fontFill','width',
var fields = ['style','fontSize','fontFace','fontColor','fontFill','fontStrokeWidth','fontStrokeColor','width',
'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor'
];
util.selectiveDeepExtend(fields, this.options, properties);
@ -593,8 +593,16 @@ Edge.prototype._label = function (ctx, text, x, y) {
ctx.fillStyle = this.options.fontColor || "black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
if(this.options.fontStrokeWidth){
ctx.lineWidth = this.options.fontStrokeWidth;
ctx.strokeStyle = this.options.fontStrokeColor;
ctx.lineJoin = 'round';
}
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;
}

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

@ -68,6 +68,8 @@ function Network (container, data, options) {
fontSize: 14, // px
fontFace: 'verdana',
fontFill: undefined,
fontStrokeWidth: 0, // px
fontStrokeColor: 'white',
level: -1,
color: {
border: '#2B7CE9',
@ -101,6 +103,8 @@ function Network (container, data, options) {
fontSize: 14, // px
fontFace: 'arial',
fontFill: 'white',
fontStrokeWidth: 0, // px
fontStrokeColor: 'white',
arrowScaleFactor: 1,
dash: {
length: 10,

+ 9
- 1
lib/network/Node.js View File

@ -157,7 +157,7 @@ Node.prototype.setProperties = function(properties, constants) {
}
var fields = ['borderWidth','borderWidthSelected','shape','image','brokenImage','radius','fontColor',
'fontSize','fontFace','fontFill','group','mass'
'fontSize','fontFace','fontFill','fontStrokeWidth','fontStrokeColor','group','mass'
];
util.selectiveDeepExtend(fields, this.options, properties);
@ -1028,7 +1028,15 @@ Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNo
ctx.fillStyle = this.options.fontColor || "black";
ctx.textAlign = align || "center";
ctx.textBaseline = baseline || "middle";
if(this.options.fontStrokeWidth){
ctx.lineWidth = this.options.fontStrokeWidth;
ctx.strokeStyle = this.options.fontStrokeColor;
ctx.lineJoin = 'round';
}
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;
}

Write Preview
Loading…
Cancel
Save