Browse Source

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

flowchartTest
jos 9 years ago
parent
commit
29ea22b611
9 changed files with 6705 additions and 6686 deletions
  1. +292
    -295
      dist/vis.css
  2. +6336
    -6329
      dist/vis.js
  3. +1
    -1
      dist/vis.min.css
  4. +7
    -6
      examples/network/01_basic_usage.html
  5. +1
    -1
      lib/network/modules/EdgesHandler.js
  6. +2
    -2
      lib/network/modules/NodesHandler.js
  7. +13
    -5
      lib/network/modules/components/Edge.js
  8. +13
    -4
      lib/network/modules/components/Node.js
  9. +40
    -43
      lib/network/modules/components/shared/Label.js

+ 292
- 295
dist/vis.css
File diff suppressed because it is too large
View File


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


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


+ 7
- 6
examples/network/01_basic_usage.html View File

@ -20,11 +20,11 @@
<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'}
{id: 1, label: 'Node 1', value:3},
{id: 2, label: 'Node 2', value:1},
{id: 3, label: 'Node 3', value:5},
{id: 4, label: 'Node 4', value:3},
{id: 5, label: 'Node 5', value:2}
];
// create an array with edges
@ -44,7 +44,8 @@
edges: edges
};
var options = {
configure: 'nodes',
// nodes:{shape:'dot'}
// configure: 'nodes',
// physics:{stabilization:true}
}
var network = new vis.Network(container, data, options);

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

@ -89,7 +89,7 @@ class EdgesHandler {
title:undefined,
width: 1,
widthSelectionMultiplier: 2,
value:1
value: undefined
};
util.extend(this.options, this.defaultOptions);

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

@ -69,7 +69,7 @@ class NodesHandler {
min: 10,
max: 30,
label: {
enabled: true,
enabled: false,
min: 14,
max: 30,
maxVisible: 30,
@ -88,7 +88,7 @@ class NodesHandler {
shape: 'ellipse',
size: 25,
title: undefined,
value: 1,
value: undefined,
x: undefined,
y: undefined
};

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

@ -32,12 +32,14 @@ class Edge {
this.id = undefined;
this.fromId = undefined;
this.toId = undefined;
this.value = undefined;
this.selected = false;
this.hover = false;
this.labelDirty = true;
this.colorDirty = true;
this.baseWidth = this.options.width;
this.baseFontSize = this.options.font.size;
this.from = undefined; // a node
this.to = undefined; // a node
@ -68,7 +70,6 @@ class Edge {
if (options.from !== undefined) {this.fromId = options.from;}
if (options.to !== undefined) {this.toId = options.to;}
if (options.title !== undefined) {this.title = options.title;}
if (options.value !== undefined) {this.value = options.value;}
// A node is connected when it has a from and to node that both exist in the network.body.nodes.
this.connect();
@ -158,6 +159,9 @@ class Edge {
updateLabelModule() {
this.labelModule.setOptions(this.options);
if (this.labelModule.baseSize !== undefined) {
this.baseFontSize = this.labelModule.baseSize;
}
}
updateEdgeType() {
@ -276,7 +280,7 @@ class Edge {
* @return {Number} value
*/
getValue() {
return this.value;
return this.options.value;
}
@ -288,8 +292,8 @@ class Edge {
* @param total
*/
setValueRange(min, max, total) {
if (this.value !== undefined) {
var scale = this.options.scaling.customScalingFunction(min, max, total, this.value);
if (this.options.value !== undefined) {
var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
var widthDiff = this.options.scaling.max - this.options.scaling.min;
if (this.options.scaling.label.enabled === true) {
var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
@ -297,6 +301,10 @@ class Edge {
}
this.options.width = this.options.scaling.min + scale * widthDiff;
}
else {
this.options.width = this.baseWidth;
this.options.font.size = this.baseFontSize;
}
}

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

@ -57,6 +57,8 @@ class Node {
// state options
this.x = undefined;
this.y = undefined;
this.baseSize = this.options.size;
this.baseFontSize = this.options.font.size;
this.predefinedPosition = false; // used to check if initial zoomExtent should just take the range or approximate
this.selected = false;
this.hover = false;
@ -116,7 +118,7 @@ class Node {
if (options.x !== undefined) {this.x = options.x; this.predefinedPosition = true;}
if (options.y !== undefined) {this.y = options.y; this.predefinedPosition = true;}
if (options.value !== undefined) {this.value = options.value;}
if (options.size !== undefined) {this.baseSize = options.size;}
// this transforms all shorthands into fully defined options
Node.parseOptions(this.options,options);
@ -200,6 +202,9 @@ class Node {
updateLabelModule() {
this.labelModule.setOptions(this.options);
if (this.labelModule.baseSize !== undefined) {
this.baseFontSize = this.labelModule.baseSize;
}
}
updateShape() {
@ -328,7 +333,7 @@ class Node {
* @return {Number} value
*/
getValue() {
return this.value;
return this.options.value;
}
@ -339,8 +344,8 @@ class Node {
* @param {Number} max
*/
setValueRange(min, max, total) {
if (this.value !== undefined) {
var scale = this.options.scaling.customScalingFunction(min, max, total, this.value);
if (this.options.value !== undefined) {
var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
var sizeDiff = this.options.scaling.max - this.options.scaling.min;
if (this.options.scaling.label.enabled === true) {
var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
@ -348,6 +353,10 @@ class Node {
}
this.options.size = this.options.scaling.min + scale * sizeDiff;
}
else {
this.options.size = this.baseSize;
this.options.font.size = this.baseFontSize;
}
}

+ 40
- 43
lib/network/modules/components/shared/Label.js View File

@ -4,18 +4,7 @@ class Label {
constructor(body,options) {
this.body = body;
this.fontOptions = {};
this.defaultOptions = {
color: '#343434',
size: 14, // px
face: 'arial',
background: 'none',
stroke: 0, // px
strokeColor: 'white',
align:'horizontal'
}
util.extend(this.fontOptions, this.defaultOptions);
this.baseSize = undefined;
this.setOptions(options);
this.size = {top: 0, left: 0, width: 0, height: 0, yLine: 0}; // could be cached
}
@ -27,22 +16,30 @@ class Label {
this.labelDirty = true;
}
Label.parseOptions(this.fontOptions,options);
if (options.font !== undefined) {
Label.parseOptions(this.options.font,options);
if (typeof options.font === 'string') {
this.baseSize = this.options.font.size;
}
else if (typeof options.font === 'object') {
if (options.font.size !== undefined) {
this.baseSize = options.font.size;
}
}
}
}
static parseOptions(parentOptions, newOptions) {
if (newOptions.font !== undefined) {
if (typeof newOptions.font === 'string') {
let newOptionsArray = newOptions.font.split(" ");
parentOptions.size = newOptionsArray[0].replace("px",'');
parentOptions.face = newOptionsArray[1];
parentOptions.color = newOptionsArray[2];
}
else if (typeof newOptions.font === 'object') {
util.fillIfDefined(parentOptions, newOptions.font);
}
parentOptions.size = Number(parentOptions.size);
if (typeof newOptions.font === 'string') {
let newOptionsArray = newOptions.font.split(" ");
parentOptions.size = newOptionsArray[0].replace("px",'');
parentOptions.face = newOptionsArray[1];
parentOptions.color = newOptionsArray[2];
}
else if (typeof newOptions.font === 'object') {
util.fillIfDefined(parentOptions, newOptions.font);
}
parentOptions.size = Number(parentOptions.size);
}
@ -60,7 +57,7 @@ class Label {
return;
// check if we have to render the label
let viewFontSize = this.fontOptions.size * this.body.view.scale;
let viewFontSize = this.options.font.size * this.body.view.scale;
if (this.options.label && viewFontSize < this.options.scaling.label.drawThreshold - 1)
return;
@ -79,12 +76,12 @@ class Label {
* @private
*/
_drawBackground(ctx) {
if (this.fontOptions.background !== undefined && this.fontOptions.background !== "none") {
ctx.fillStyle = this.fontOptions.background;
if (this.options.font.background !== undefined && this.options.font.background !== "none") {
ctx.fillStyle = this.options.font.background;
let lineMargin = 2;
switch (this.fontOptions.align) {
switch (this.options.font.align) {
case 'middle':
ctx.fillRect(-this.size.width * 0.5, -this.size.height * 0.5, this.size.width, this.size.height);
break;
@ -110,7 +107,7 @@ class Label {
* @private
*/
_drawText(ctx, selected, x, y, baseline = 'middle') {
let fontSize = this.fontOptions.size;
let fontSize = this.options.font.size;
let viewFontSize = fontSize * this.body.view.scale;
// this ensures that there will not be HUGE letters on screen by setting an upper limit on the visible text size (regardless of zoomLevel)
if (viewFontSize >= this.options.scaling.label.maxVisible) {
@ -122,20 +119,20 @@ class Label {
[x, yLine] = this._setAlignment(ctx, x, yLine, baseline);
// configure context for drawing the text
ctx.font = (selected ? 'bold ' : '') + fontSize + "px " + this.fontOptions.face;
ctx.font = (selected ? 'bold ' : '') + fontSize + "px " + this.options.font.face;
ctx.fillStyle = fontColor;
ctx.textAlign = 'center';
// set the strokeWidth
if (this.fontOptions.stroke > 0) {
ctx.lineWidth = this.fontOptions.stroke;
if (this.options.font.stroke > 0) {
ctx.lineWidth = this.options.font.stroke;
ctx.strokeStyle = strokeColor;
ctx.lineJoin = 'round';
}
// draw the text
for (let i = 0; i < this.lineCount; i++) {
if (this.fontOptions.stroke > 0) {
if (this.options.font.stroke > 0) {
ctx.strokeText(this.lines[i], x, yLine);
}
ctx.fillText(this.lines[i], x, yLine);
@ -146,16 +143,16 @@ class Label {
_setAlignment(ctx, x, yLine, baseline) {
// check for label alignment (for edges)
// TODO: make alignment for nodes
if (this.fontOptions.align !== 'horizontal') {
if (this.options.font.align !== 'horizontal') {
x = 0;
yLine = 0;
let lineMargin = 2;
if (this.fontOptions.align === 'top') {
if (this.options.font.align === 'top') {
ctx.textBaseline = 'alphabetic';
yLine -= 2 * lineMargin; // distance from edge, required because we use alphabetic. Alphabetic has less difference between browsers
}
else if (this.fontOptions.align === 'bottom') {
else if (this.options.font.align === 'bottom') {
ctx.textBaseline = 'hanging';
yLine += 2 * lineMargin;// distance from edge, required because we use hanging. Hanging has less difference between browsers
}
@ -179,8 +176,8 @@ class Label {
* @private
*/
_getColor(viewFontSize) {
let fontColor = this.fontOptions.color || '#000000';
let strokeColor = this.fontOptions.strokeColor || '#ffffff';
let fontColor = this.options.font.color || '#000000';
let strokeColor = this.options.font.strokeColor || '#ffffff';
if (viewFontSize <= this.options.scaling.label.drawThreshold) {
let opacity = Math.max(0, Math.min(1, 1 - (this.options.scaling.label.drawThreshold - viewFontSize)));
fontColor = util.overrideOpacity(fontColor, opacity);
@ -199,7 +196,7 @@ class Label {
getTextSize(ctx, selected = false) {
let size = {
width: this._processLabel(ctx,selected),
height: this.fontOptions.size * this.lineCount,
height: this.options.font.size * this.lineCount,
lineCount: this.lineCount
};
return size;
@ -218,12 +215,12 @@ class Label {
if (this.labelDirty === true) {
this.size.width = this._processLabel(ctx,selected);
}
this.size.height = this.fontOptions.size * this.lineCount;
this.size.height = this.options.font.size * this.lineCount;
this.size.left = x - this.size.width * 0.5;
this.size.top = y - this.size.height * 0.5;
this.size.yLine = y + (1 - this.lineCount) * 0.5 * this.fontOptions.size;
this.size.yLine = y + (1 - this.lineCount) * 0.5 * this.options.font.size;
if (baseline === "hanging") {
this.size.top += 0.5 * this.fontOptions.size;
this.size.top += 0.5 * this.options.font.size;
this.size.top += 4; // distance from node, required because we use hanging. Hanging has less difference between browsers
this.size.yLine += 4; // distance from node
}
@ -246,7 +243,7 @@ class Label {
if (this.options.label !== undefined) {
lines = String(this.options.label).split('\n');
lineCount = lines.length;
ctx.font = (selected ? 'bold ' : '') + this.fontOptions.size + "px " + this.fontOptions.face;
ctx.font = (selected ? 'bold ' : '') + this.options.font.size + "px " + this.options.font.face;
width = ctx.measureText(lines[0]).width;
for (let i = 1; i < lineCount; i++) {
let lineWidth = ctx.measureText(lines[i]).width;

Loading…
Cancel
Save