Browse Source

added border width option for nodes per #210

v3_develop
Alex de Mulder 10 years ago
parent
commit
a0ab10085b
5 changed files with 23801 additions and 23763 deletions
  1. +2
    -1
      HISTORY.md
  2. +23746
    -23735
      dist/vis.js
  3. +15
    -0
      docs/network.html
  4. +2
    -1
      lib/network/Network.js
  5. +36
    -26
      lib/network/Node.js

+ 2
- 1
HISTORY.md View File

@ -28,7 +28,8 @@ http://visjs.org
- Updated max velocity of nodes to three times it's original value. - Updated max velocity of nodes to three times it's original value.
- Made "stabilized" event fire every time the network stabilizes. - Made "stabilized" event fire every time the network stabilizes.
- Fixed drift in dragging nodes while zooming. - Fixed drift in dragging nodes while zooming.
- Fixed recursively constructing of hierarchical layouts.
- Fixed recursively constructing of hierarchical layouts.
- Added borderWidth option for nodes.

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


+ 15
- 0
docs/network.html View File

@ -262,6 +262,21 @@ When using a DataSet, the network is automatically updating to changes in the Da
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>borderWidth</td>
<td>Number</td>
<td>1</td>
<td>The width of the border of the node when it is not selected, automatically limited by the width of the node.</td>
</tr>
<tr>
<td>borderWidthSelected</td>
<td>Number</td>
<td>undefined</td>
<td>The width of the border of the node when it is selected. If left at undefined, double the borderWidth will be used.</td>
</tr>
<tr> <tr>
<td>color</td> <td>color</td>
<td>String | Object</td> <td>String | Object</td>

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

@ -83,7 +83,8 @@ function Network (container, data, options) {
borderColor: '#2B7CE9', borderColor: '#2B7CE9',
backgroundColor: '#97C2FC', backgroundColor: '#97C2FC',
highlightColor: '#D2E5FF', highlightColor: '#D2E5FF',
group: undefined
group: undefined,
borderWidth: 1
}, },
edges: { edges: {
widthMin: 1, widthMin: 1,

+ 36
- 26
lib/network/Node.js View File

@ -58,6 +58,8 @@ function Node(properties, imagelist, grouplist, constants) {
this.radiusMax = constants.nodes.radiusMax; this.radiusMax = constants.nodes.radiusMax;
this.level = -1; this.level = -1;
this.preassignedLevel = false; this.preassignedLevel = false;
this.borderWidth = constants.nodes.borderWidth;
this.borderWidthSelected = constants.nodes.borderWidthSelected;
this.imagelist = imagelist; this.imagelist = imagelist;
@ -73,6 +75,8 @@ function Node(properties, imagelist, grouplist, constants) {
this.mass = 1; // kg this.mass = 1; // kg
this.fixedData = {x:null,y:null}; this.fixedData = {x:null,y:null};
console.log(properties)
this.setProperties(properties, constants); this.setProperties(properties, constants);
// creating the variables for clustering // creating the variables for clustering
@ -152,7 +156,8 @@ Node.prototype.setProperties = function(properties, constants) {
if (properties.y !== undefined) {this.y = properties.y;} if (properties.y !== undefined) {this.y = properties.y;}
if (properties.value !== undefined) {this.value = properties.value;} if (properties.value !== undefined) {this.value = properties.value;}
if (properties.level !== undefined) {this.level = properties.level; this.preassignedLevel = true;} if (properties.level !== undefined) {this.level = properties.level; this.preassignedLevel = true;}
if (properties.borderWidth !== undefined) {this.borderWidth = properties.borderWidth;}
if (properties.borderWidthSelected !== undefined) {this.borderWidthSelected = properties.borderWidthSelected;}
// physics // physics
if (properties.mass !== undefined) {this.mass = properties.mass;} if (properties.mass !== undefined) {this.mass = properties.mass;}
@ -570,22 +575,23 @@ Node.prototype._drawBox = function (ctx) {
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
var clusterLineWidth = 2.5; var clusterLineWidth = 2.5;
var selectionLineWidth = 2;
var borderWidth = this.borderWidth;
var selectionLineWidth = this.borderWidthSelected || 2 * this.borderWidth;
ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border; ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
// draw the outer border // draw the outer border
if (this.clusterSize > 1) { if (this.clusterSize > 1) {
ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.networkScaleInv; ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius); ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius);
ctx.stroke(); ctx.stroke();
} }
ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.networkScaleInv; ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background; ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
@ -619,22 +625,23 @@ Node.prototype._drawDatabase = function (ctx) {
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
var clusterLineWidth = 2.5; var clusterLineWidth = 2.5;
var selectionLineWidth = 2;
var borderWidth = this.borderWidth;
var selectionLineWidth = this.borderWidthSelected || 2 * this.borderWidth;
ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border; ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
// draw the outer border // draw the outer border
if (this.clusterSize > 1) { if (this.clusterSize > 1) {
ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.networkScaleInv; ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth); ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
ctx.stroke(); ctx.stroke();
} }
ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.networkScaleInv; ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background; ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height); ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
@ -669,22 +676,23 @@ Node.prototype._drawCircle = function (ctx) {
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
var clusterLineWidth = 2.5; var clusterLineWidth = 2.5;
var selectionLineWidth = 2;
var borderWidth = this.borderWidth;
var selectionLineWidth = this.borderWidthSelected || 2 * this.borderWidth;
ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border; ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
// draw the outer border // draw the outer border
if (this.clusterSize > 1) { if (this.clusterSize > 1) {
ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.networkScaleInv; ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth); ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
ctx.stroke(); ctx.stroke();
} }
ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.networkScaleInv; ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background; ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
ctx.circle(this.x, this.y, this.radius); ctx.circle(this.x, this.y, this.radius);
@ -719,22 +727,23 @@ Node.prototype._drawEllipse = function (ctx) {
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
var clusterLineWidth = 2.5; var clusterLineWidth = 2.5;
var selectionLineWidth = 2;
var borderWidth = this.borderWidth;
var selectionLineWidth = this.borderWidthSelected || 2 * this.borderWidth;
ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border; ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
// draw the outer border // draw the outer border
if (this.clusterSize > 1) { if (this.clusterSize > 1) {
ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.networkScaleInv; ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth); ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
ctx.stroke(); ctx.stroke();
} }
ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.networkScaleInv; ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background; ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
@ -786,7 +795,8 @@ Node.prototype._drawShape = function (ctx, shape) {
this.top = this.y - this.height / 2; this.top = this.y - this.height / 2;
var clusterLineWidth = 2.5; var clusterLineWidth = 2.5;
var selectionLineWidth = 2;
var borderWidth = this.borderWidth;
var selectionLineWidth = this.borderWidthSelected || 2 * this.borderWidth;
var radiusMultiplier = 2; var radiusMultiplier = 2;
// choose draw method depending on the shape // choose draw method depending on the shape
@ -802,16 +812,16 @@ Node.prototype._drawShape = function (ctx, shape) {
// draw the outer border // draw the outer border
if (this.clusterSize > 1) { if (this.clusterSize > 1) {
ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.networkScaleInv; ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth); ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
ctx.stroke(); ctx.stroke();
} }
ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.networkScaleInv; ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background; ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
ctx[shape](this.x, this.y, this.radius); ctx[shape](this.x, this.y, this.radius);

Loading…
Cancel
Save