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 10 years ago
parent
e9d6c9897a
commit
d5b6371bae
10 changed files with 26676 additions and 26532 deletions
Unified 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(); - Altered the Manipulation Mixin to be succesfully destroyed from memory when calling destroy();
- Improved drawing of arrowheads on smooth curves. #349 - Improved drawing of arrowheads on smooth curves. #349
- Caught case where click originated on external DOM element and drag progressed to vis. - 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 ### Timeline
- Added byUser flag to options of the rangechange and rangechanged event. - Added byUser flag to options of the rangechange and rangechanged event.
## 20145-01-09, version 3.8.0 ## 20145-01-09, version 3.8.0
### General ### 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>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> <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>
<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> <tr>
<td class="greenField">shape</td> <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. <td>Font fill for the background color of the text label of the edge.
Only applicable when property <code>label</code> is defined.</td> Only applicable when property <code>label</code> is defined.</td>
</tr> </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> <tr>
<td class="greenField">style</td> <td class="greenField">style</td>
@ -1316,6 +1342,18 @@ var nodes = [
<td>14</td> <td>14</td>
<td>Font size for the node in pixels.</td> <td>Font size for the node in pixels.</td>
</tr> </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> <tr>
<td>shape</td> <td>shape</td>
<td>String</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="32_hierarchicaLayoutMethods.html">32_hierarchicaLayoutMethods.html</a></p>
<p><a href="33_animation.html">33_animation.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="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> <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
</div> </div>

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

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

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

@ -68,6 +68,8 @@ function Network (container, data, options) {
fontSize: 14, // px fontSize: 14, // px
fontFace: 'verdana', fontFace: 'verdana',
fontFill: undefined, fontFill: undefined,
fontStrokeWidth: 0, // px
fontStrokeColor: 'white',
level: -1, level: -1,
color: { color: {
border: '#2B7CE9', border: '#2B7CE9',
@ -101,6 +103,8 @@ function Network (container, data, options) {
fontSize: 14, // px fontSize: 14, // px
fontFace: 'arial', fontFace: 'arial',
fontFill: 'white', fontFill: 'white',
fontStrokeWidth: 0, // px
fontStrokeColor: 'white',
arrowScaleFactor: 1, arrowScaleFactor: 1,
dash: { dash: {
length: 10, 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', 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); 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.fillStyle = this.options.fontColor || "black";
ctx.textAlign = align || "center"; ctx.textAlign = align || "center";
ctx.textBaseline = baseline || "middle"; 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++) { for (var i = 0; i < lineCount; i++) {
if(this.options.fontStrokeWidth){
ctx.strokeText(lines[i], x, yLine);
}
ctx.fillText(lines[i], x, yLine); ctx.fillText(lines[i], x, yLine);
yLine += fontSize; yLine += fontSize;
} }

Write Preview
Loading…
Cancel
Save