Browse Source

Refactored more code from `graph` to `network`

css_transitions
jos 10 years ago
parent
commit
a5dd92d349
17 changed files with 286 additions and 394 deletions
  1. +10
    -6
      HISTORY.md
  2. +1
    -1
      Jakefile.js
  3. +7
    -6
      README.md
  4. +151
    -268
      dist/vis.js
  5. +1
    -1
      dist/vis.min.css
  6. +6
    -6
      dist/vis.min.js
  7. +20
    -20
      docs/network.html
  8. +1
    -1
      docs/timeline.html
  9. +4
    -4
      examples/Network/graphviz/graphviz_gallery.html
  10. +5
    -1
      src/module/exports.js
  11. +12
    -12
      src/network/Edge.js
  12. +36
    -36
      src/network/Network.js
  13. +25
    -25
      src/network/Node.js
  14. +1
    -1
      src/network/networkMixins/ClusterMixin.js
  15. +3
    -3
      src/network/networkMixins/MixinLoader.js
  16. +2
    -2
      src/network/networkMixins/SectorsMixin.js
  17. +1
    -1
      src/network/shapes.js

+ 10
- 6
HISTORY.md View File

@ -16,18 +16,22 @@ http://visjs.org
} }
- Fixed the height of background and foreground panels of groups. - Fixed the height of background and foreground panels of groups.
### Graph
### Network
- Renamed `Graph` to `Network` to prevent confusion with the visualizations
`Graph2d` and `Graph3d`.
- Now throws an error when constructing without new keyword. - Now throws an error when constructing without new keyword.
- Added pull request from Vukk, user can now define the edge width multiplier when selected.
- Fixed graph.storePositions()
- Extended Selection API with selectNodes and selectEdges, deprecating setSelection.
- Added pull request from Vukk, user can now define the edge width multiplier
when selected.
- Fixed `graph.storePositions()`.
- Extended Selection API with `selectNodes` and `selectEdges`, deprecating
`setSelection`.
- Fixed multiline labels. - Fixed multiline labels.
- Changed hierarchical physics solver and updated docs. - Changed hierarchical physics solver and updated docs.
### Graph2D
### Graph2d
- Added first iteration of the Graph2D.
- Added first iteration of the Graph2d.
### Graph3d ### Graph3d

+ 1
- 1
Jakefile.js View File

@ -75,7 +75,7 @@ task('build', {async: true}, function () {
'./src/timeline/component/Linegraph.js', './src/timeline/component/Linegraph.js',
'./src/timeline/DataStep.js', './src/timeline/DataStep.js',
'./src/timeline/stack.js',
'./src/timeline/Stack.js',
'./src/timeline/TimeStep.js', './src/timeline/TimeStep.js',
'./src/timeline/Range.js', './src/timeline/Range.js',
'./src/timeline/component/Component.js', './src/timeline/component/Component.js',

+ 7
- 6
README.md View File

@ -6,13 +6,14 @@ The library is designed to be easy to use, handle large amounts
of dynamic data, and enable manipulation of the data. of dynamic data, and enable manipulation of the data.
The library consists of the following components: The library consists of the following components:
- DataSet and DataView. A flexible key/value based data set.
Add, update, and remove items. Subscribe on changes in the data set.
Filter and order items and convert fields of items.
- DataSet and DataView. A flexible key/value based data set. Add, update, and
remove items. Subscribe on changes in the data set. A DataSet can filter and
order items, and convert fields of items.
- DataView. A filtered and/or formatted view on a DataSet.
- Graph2d. Plot data on a timeline with lines or barcharts.
- Graph3d. Display data in a three dimensional graph.
- Network. Display a network (force directed graph) with nodes and edges.
- Timeline. Display different types of data on a timeline. - Timeline. Display different types of data on a timeline.
The timeline and the items on the timeline can be interactively moved,
zoomed, and manipulated.
- Graph. Display an interactive graph or network with nodes and edges.
The vis.js library is developed by [Almende B.V](http://almende.com). The vis.js library is developed by [Almende B.V](http://almende.com).

+ 151
- 268
dist/vis.js View File

@ -4,8 +4,8 @@
* *
* A dynamic, browser-based visualization library. * A dynamic, browser-based visualization library.
* *
* @version @@version
* @date @@date
* @version 2.0.1-SNAPSHOT
* @date 2014-07-04
* *
* @license * @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@ -12050,7 +12050,7 @@ Graph2d.prototype._getScrollTop = function () {
})(typeof util !== 'undefined' ? util : exports); })(typeof util !== 'undefined' ? util : exports);
/** /**
* Canvas shapes used by the Graph
* Canvas shapes used by Network
*/ */
if (typeof CanvasRenderingContext2D !== 'undefined') { if (typeof CanvasRenderingContext2D !== 'undefined') {
@ -12360,9 +12360,9 @@ function Node(properties, imagelist, grouplist, constants) {
this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements; this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
this.growthIndicator = 0; this.growthIndicator = 0;
// variables to tell the node about the graph.
this.graphScaleInv = 1;
this.graphScale = 1;
// variables to tell the node about the network.
this.networkScaleInv = 1;
this.networkScale = 1;
this.canvasTopLeft = {"x": -300, "y": -300}; this.canvasTopLeft = {"x": -300, "y": -300};
this.canvasBottomRight = {"x": 300, "y": 300}; this.canvasBottomRight = {"x": 300, "y": 300};
this.parentEdgeId = null; this.parentEdgeId = null;
@ -12802,7 +12802,7 @@ Node.prototype._drawImage = function (ctx) {
// draw the shade // draw the shade
if (this.clusterSize > 1) { if (this.clusterSize > 1) {
var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0); var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
lineWidth *= this.graphScaleInv;
lineWidth *= this.networkScaleInv;
lineWidth = Math.min(0.2 * this.width,lineWidth); lineWidth = Math.min(0.2 * this.width,lineWidth);
ctx.globalAlpha = 0.5; ctx.globalAlpha = 0.5;
@ -12852,14 +12852,14 @@ Node.prototype._drawBox = function (ctx) {
// 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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;
@ -12901,14 +12901,14 @@ Node.prototype._drawDatabase = function (ctx) {
// 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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;
@ -12951,14 +12951,14 @@ Node.prototype._drawCircle = function (ctx) {
// 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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;
@ -13001,14 +13001,14 @@ Node.prototype._drawEllipse = function (ctx) {
// 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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;
@ -13078,14 +13078,14 @@ 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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;
@ -13123,7 +13123,7 @@ Node.prototype._drawText = function (ctx) {
Node.prototype._label = function (ctx, text, x, y, align, baseline) { Node.prototype._label = function (ctx, text, x, y, align, baseline) {
if (text && this.fontSize * this.graphScale > this.fontDrawThreshold) {
if (text && this.fontSize * this.networkScale > this.fontDrawThreshold) {
ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace; ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
ctx.fillStyle = this.fontColor || "black"; ctx.fillStyle = this.fontColor || "black";
ctx.textAlign = align || "center"; ctx.textAlign = align || "center";
@ -13169,10 +13169,10 @@ Node.prototype.getTextSize = function(ctx) {
*/ */
Node.prototype.inArea = function() { Node.prototype.inArea = function() {
if (this.width !== undefined) { if (this.width !== undefined) {
return (this.x + this.width *this.graphScaleInv >= this.canvasTopLeft.x &&
this.x - this.width *this.graphScaleInv < this.canvasBottomRight.x &&
this.y + this.height*this.graphScaleInv >= this.canvasTopLeft.y &&
this.y - this.height*this.graphScaleInv < this.canvasBottomRight.y);
return (this.x + this.width *this.networkScaleInv >= this.canvasTopLeft.x &&
this.x - this.width *this.networkScaleInv < this.canvasBottomRight.x &&
this.y + this.height*this.networkScaleInv >= this.canvasTopLeft.y &&
this.y - this.height*this.networkScaleInv < this.canvasBottomRight.y);
} }
else { else {
return true; return true;
@ -13191,7 +13191,7 @@ Node.prototype.inView = function() {
}; };
/** /**
* This allows the zoom level of the graph to influence the rendering
* This allows the zoom level of the network to influence the rendering
* We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
* *
* @param scale * @param scale
@ -13199,21 +13199,21 @@ Node.prototype.inView = function() {
* @param canvasBottomRight * @param canvasBottomRight
*/ */
Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) { Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
this.graphScaleInv = 1.0/scale;
this.graphScale = scale;
this.networkScaleInv = 1.0/scale;
this.networkScale = scale;
this.canvasTopLeft = canvasTopLeft; this.canvasTopLeft = canvasTopLeft;
this.canvasBottomRight = canvasBottomRight; this.canvasBottomRight = canvasBottomRight;
}; };
/** /**
* This allows the zoom level of the graph to influence the rendering
* This allows the zoom level of the network to influence the rendering
* *
* @param scale * @param scale
*/ */
Node.prototype.setScale = function(scale) { Node.prototype.setScale = function(scale) {
this.graphScaleInv = 1.0/scale;
this.graphScale = scale;
this.networkScaleInv = 1.0/scale;
this.networkScale = scale;
}; };
@ -13252,16 +13252,16 @@ Node.prototype.updateVelocity = function(massBeforeClustering) {
* to (number), label (string, color (string), * to (number), label (string, color (string),
* width (number), style (string), * width (number), style (string),
* length (number), title (string) * length (number), title (string)
* @param {Network} graph A graph object, used to find and edge to
* @param {Network} network A Network object, used to find and edge to
* nodes. * nodes.
* @param {Object} constants An object with default values for * @param {Object} constants An object with default values for
* example for the color * example for the color
*/ */
function Edge (properties, graph, constants) {
if (!graph) {
throw "No graph provided";
function Edge (properties, network, constants) {
if (!network) {
throw "No network provided";
} }
this.graph = graph;
this.network = network;
// initialize constants // initialize constants
this.widthMin = constants.edges.widthMin; this.widthMin = constants.edges.widthMin;
@ -13400,8 +13400,8 @@ Edge.prototype.setProperties = function(properties, constants) {
Edge.prototype.connect = function () { Edge.prototype.connect = function () {
this.disconnect(); this.disconnect();
this.from = this.graph.nodes[this.fromId] || null;
this.to = this.graph.nodes[this.toId] || null;
this.from = this.network.nodes[this.fromId] || null;
this.to = this.network.nodes[this.toId] || null;
this.connected = (this.from && this.to); this.connected = (this.from && this.to);
if (this.connected) { if (this.connected) {
@ -13561,14 +13561,14 @@ Edge.prototype._drawLine = function(ctx) {
*/ */
Edge.prototype._getLineWidth = function() { Edge.prototype._getLineWidth = function() {
if (this.selected == true) { if (this.selected == true) {
return Math.min(this.widthSelected, this.widthMax)*this.graphScaleInv;
return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
} }
else { else {
if (this.hover == true) { if (this.hover == true) {
return Math.min(this.hoverWidth, this.widthMax)*this.graphScaleInv;
return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
} }
else { else {
return this.width*this.graphScaleInv;
return this.width*this.networkScaleInv;
} }
} }
}; };
@ -14041,12 +14041,12 @@ Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is
/** /**
* This allows the zoom level of the graph to influence the rendering
* This allows the zoom level of the network to influence the rendering
* *
* @param scale * @param scale
*/ */
Edge.prototype.setScale = function(scale) { Edge.prototype.setScale = function(scale) {
this.graphScaleInv = 1.0/scale;
this.networkScaleInv = 1.0/scale;
}; };
@ -16657,8 +16657,8 @@ var manipulationMixin = {
/** /**
* Creation of the SectorMixin var. * Creation of the SectorMixin var.
* *
* This contains all the functions the Graph object can use to employ the sector system.
* The sector system is always used by Graph, though the benefits only apply to the use of clustering.
* This contains all the functions the Network object can use to employ the sector system.
* The sector system is always used by Network, though the benefits only apply to the use of clustering.
* If clustering is not used, there is no overhead except for a duplicate object with references to nodes and edges. * If clustering is not used, there is no overhead except for a duplicate object with references to nodes and edges.
* *
* Alex de Mulder * Alex de Mulder
@ -17209,7 +17209,7 @@ var SectorMixin = {
/** /**
* Creation of the ClusterMixin var. * Creation of the ClusterMixin var.
* *
* This contains all the functions the Graph object can use to employ clustering
* This contains all the functions the Network object can use to employ clustering
* *
* Alex de Mulder * Alex de Mulder
* 21-01-2013 * 21-01-2013
@ -19270,10 +19270,10 @@ var NavigationMixin = {
*/ */
var graphMixinLoaders = {
var networkMixinLoaders = {
/** /**
* Load a mixin into the graph object
* Load a mixin into the network object
* *
* @param {Object} sourceVariable | this object has to contain functions. * @param {Object} sourceVariable | this object has to contain functions.
* @private * @private
@ -19288,7 +19288,7 @@ var graphMixinLoaders = {
/** /**
* removes a mixin from the graph object.
* removes a mixin from the network object.
* *
* @param {Object} sourceVariable | this object has to contain functions. * @param {Object} sourceVariable | this object has to contain functions.
* @private * @private
@ -19467,7 +19467,7 @@ var graphMixinLoaders = {
/** /**
* @constructor Network * @constructor Network
* Create a graph visualization, displaying nodes and edges.
* Create a network visualization, displaying nodes and edges.
* *
* @param {Element} container The DOM element in which the Network will * @param {Element} container The DOM element in which the Network will
* be created. Normally a div element. * be created. Normally a div element.
@ -19495,7 +19495,7 @@ function Network (container, data, options) {
this.maxPhysicsTicksPerRender = 3; // max amount of physics ticks per render step. this.maxPhysicsTicksPerRender = 3; // max amount of physics ticks per render step.
this.physicsDiscreteStepsize = 0.50; // discrete stepsize of the simulation this.physicsDiscreteStepsize = 0.50; // discrete stepsize of the simulation
this.stabilize = true; // stabilize before displaying the graph
this.stabilize = true; // stabilize before displaying the network
this.selectable = true; this.selectable = true;
this.initializing = true; this.initializing = true;
@ -19669,11 +19669,11 @@ function Network (container, data, options) {
// Node variables // Node variables
var graph = this;
var network = this;
this.groups = new Groups(); // object with groups this.groups = new Groups(); // object with groups
this.images = new Images(); // object with images this.images = new Images(); // object with images
this.images.setOnloadCallback(function () { this.images.setOnloadCallback(function () {
graph._redraw();
network._redraw();
}); });
// keyboard navigation variables // keyboard navigation variables
@ -19726,30 +19726,30 @@ function Network (container, data, options) {
// create event listeners used to subscribe on the DataSets of the nodes and edges // create event listeners used to subscribe on the DataSets of the nodes and edges
this.nodesListeners = { this.nodesListeners = {
'add': function (event, params) { 'add': function (event, params) {
graph._addNodes(params.items);
graph.start();
network._addNodes(params.items);
network.start();
}, },
'update': function (event, params) { 'update': function (event, params) {
graph._updateNodes(params.items);
graph.start();
network._updateNodes(params.items);
network.start();
}, },
'remove': function (event, params) { 'remove': function (event, params) {
graph._removeNodes(params.items);
graph.start();
network._removeNodes(params.items);
network.start();
} }
}; };
this.edgesListeners = { this.edgesListeners = {
'add': function (event, params) { 'add': function (event, params) {
graph._addEdges(params.items);
graph.start();
network._addEdges(params.items);
network.start();
}, },
'update': function (event, params) { 'update': function (event, params) {
graph._updateEdges(params.items);
graph.start();
network._updateEdges(params.items);
network.start();
}, },
'remove': function (event, params) { 'remove': function (event, params) {
graph._removeEdges(params.items);
graph.start();
network._removeEdges(params.items);
network.start();
} }
}; };
@ -19806,7 +19806,7 @@ Network.prototype._getScriptPath = function() {
/** /**
* Find the center position of the graph
* Find the center position of the network
* @private * @private
*/ */
Network.prototype._getRange = function() { Network.prototype._getRange = function() {
@ -19839,11 +19839,11 @@ Network.prototype._findCenter = function(range) {
/** /**
* center the graph
* center the network
* *
* @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY}; * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
*/ */
Network.prototype._centerGraph = function(range) {
Network.prototype._centerNetwork = function(range) {
var center = this._findCenter(range); var center = this._findCenter(range);
center.x *= this.scale; center.x *= this.scale;
@ -19913,7 +19913,7 @@ Network.prototype.zoomExtent = function(initialZoom, disableStart) {
this._setScale(zoomLevel); this._setScale(zoomLevel);
this._centerGraph(range);
this._centerNetwork(range);
if (disableStart == false) { if (disableStart == false) {
this.moving = true; this.moving = true;
this.start(); this.start();
@ -20251,7 +20251,7 @@ Network.prototype._create = function () {
this.frame.style.position = 'relative'; this.frame.style.position = 'relative';
this.frame.style.overflow = 'hidden'; this.frame.style.overflow = 'hidden';
// create the graph canvas (HTML canvas element)
// create the network canvas (HTML canvas element)
this.frame.canvas = document.createElement( 'canvas' ); this.frame.canvas = document.createElement( 'canvas' );
this.frame.canvas.style.position = 'relative'; this.frame.canvas.style.position = 'relative';
this.frame.appendChild(this.frame.canvas); this.frame.appendChild(this.frame.canvas);
@ -20462,7 +20462,7 @@ Network.prototype._handleOnDrag = function(event) {
} }
else { else {
if (this.constants.dragGraph == true) { if (this.constants.dragGraph == true) {
// move the graph
// move the network
var diffX = pointer.x - this.drag.pointer.x; var diffX = pointer.x - this.drag.pointer.x;
var diffY = pointer.y - this.drag.pointer.y; var diffY = pointer.y - this.drag.pointer.y;
@ -20553,7 +20553,7 @@ Network.prototype._onPinch = function (event) {
}; };
/** /**
* Zoom the graph in or out
* Zoom the network in or out
* @param {Number} scale a number around 1, and between 0.01 and 10 * @param {Number} scale a number around 1, and between 0.01 and 10
* @param {{x: Number, y: Number}} pointer Position on screen * @param {{x: Number, y: Number}} pointer Position on screen
* @return {Number} appliedScale scale is limited within the boundaries * @return {Number} appliedScale scale is limited within the boundaries
@ -20702,7 +20702,7 @@ Network.prototype._onMouseMoveTitle = function (event) {
}; };
/** /**
* Check if there is an element on the given position in the graph
* Check if there is an element on the given position in the network
* (a node or edge). If so, and if this element has a title, * (a node or edge). If so, and if this element has a title,
* show a popup window with its title. * show a popup window with its title.
* *
@ -20790,7 +20790,7 @@ Network.prototype._checkHidePopup = function (pointer) {
/** /**
* Set a new size for the graph
* Set a new size for the network
* @param {string} width Width in pixels or percentage (for example '800px' * @param {string} width Width in pixels or percentage (for example '800px'
* or '50%') * or '50%')
* @param {string} height Height in pixels or percentage (for example '400px' * @param {string} height Height in pixels or percentage (for example '400px'
@ -20820,7 +20820,7 @@ Network.prototype.setSize = function(width, height) {
}; };
/** /**
* Set a data set with nodes for the graph
* Set a data set with nodes for the network
* @param {Array | DataSet | DataView} nodes The data containing the nodes. * @param {Array | DataSet | DataView} nodes The data containing the nodes.
* @private * @private
*/ */
@ -21152,7 +21152,7 @@ Network.prototype._updateValueRange = function(obj) {
}; };
/** /**
* Redraw the graph with the current data
* Redraw the network with the current data
* chart will be resized too. * chart will be resized too.
*/ */
Network.prototype.redraw = function() { Network.prototype.redraw = function() {
@ -21161,7 +21161,7 @@ Network.prototype.redraw = function() {
}; };
/** /**
* Redraw the graph with the current data
* Redraw the network with the current data
* @private * @private
*/ */
Network.prototype._redraw = function() { Network.prototype._redraw = function() {
@ -21198,7 +21198,7 @@ Network.prototype._redraw = function() {
}; };
/** /**
* Set the translation of the graph
* Set the translation of the network
* @param {Number} offsetX Horizontal offset * @param {Number} offsetX Horizontal offset
* @param {Number} offsetY Vertical offset * @param {Number} offsetY Vertical offset
* @private * @private
@ -21222,7 +21222,7 @@ Network.prototype._setTranslation = function(offsetX, offsetY) {
}; };
/** /**
* Get the translation of the graph
* Get the translation of the network
* @return {Object} translation An object with parameters x and y, both a number * @return {Object} translation An object with parameters x and y, both a number
* @private * @private
*/ */
@ -21234,7 +21234,7 @@ Network.prototype._getTranslation = function() {
}; };
/** /**
* Scale the graph
* Scale the network
* @param {Number} scale Scaling factor 1.0 is unscaled * @param {Number} scale Scaling factor 1.0 is unscaled
* @private * @private
*/ */
@ -21243,7 +21243,7 @@ Network.prototype._setScale = function(scale) {
}; };
/** /**
* Get the current scale of the graph
* Get the current scale of the network
* @return {Number} scale Scaling factor 1.0 is unscaled * @return {Number} scale Scaling factor 1.0 is unscaled
* @private * @private
*/ */
@ -21593,7 +21593,7 @@ Network.prototype.start = function() {
/** /**
* Move the graph according to the keyboard presses.
* Move the network according to the keyboard presses.
* *
* @private * @private
*/ */
@ -21694,9 +21694,9 @@ Network.prototype._createBezierNodes = function() {
* @private * @private
*/ */
Network.prototype._initializeMixinLoaders = function () { Network.prototype._initializeMixinLoaders = function () {
for (var mixinFunction in graphMixinLoaders) {
if (graphMixinLoaders.hasOwnProperty(mixinFunction)) {
Network.prototype[mixinFunction] = graphMixinLoaders[mixinFunction];
for (var mixinFunction in networkMixinLoaders) {
if (networkMixinLoaders.hasOwnProperty(mixinFunction)) {
Network.prototype[mixinFunction] = networkMixinLoaders[mixinFunction];
} }
} }
}; };
@ -25097,7 +25097,7 @@ var vis = {
TimeAxis: TimeAxis TimeAxis: TimeAxis
}, },
graph: {
network: {
Node: Node, Node: Node,
Edge: Edge, Edge: Edge,
Popup: Popup, Popup: Popup,
@ -25107,6 +25107,10 @@ var vis = {
Timeline: Timeline, Timeline: Timeline,
Network: Network, Network: Network,
// Deprecated since v3.0.0
Graph: function () {
throw new Error('Graph is renamed to Network. Please create a graph as new vis.Network(...)');
},
Graph3d: Graph3d, Graph3d: Graph3d,
Graph2d: Graph2d Graph2d: Graph2d
}; };
@ -26729,7 +26733,7 @@ else {
})(this); })(this);
},{}],4:[function(require,module,exports){ },{}],4:[function(require,module,exports){
var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {};//! moment.js var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {};//! moment.js
//! version : 2.7.0
//! version : 2.6.0
//! authors : Tim Wood, Iskren Chernev, Moment.js contributors //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
//! license : MIT //! license : MIT
//! momentjs.com //! momentjs.com
@ -26741,7 +26745,7 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
************************************/ ************************************/
var moment, var moment,
VERSION = "2.7.0",
VERSION = "2.6.0",
// the global-scope this is NOT the global object in Node.js // the global-scope this is NOT the global object in Node.js
globalScope = typeof global !== 'undefined' ? global : this, globalScope = typeof global !== 'undefined' ? global : this,
oldGlobalMoment, oldGlobalMoment,
@ -26766,7 +26770,6 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
_f : null, _f : null,
_l : null, _l : null,
_strict : null, _strict : null,
_tzm : null,
_isUTC : null, _isUTC : null,
_offset : null, // optional. Combine with _isUTC _offset : null, // optional. Combine with _isUTC
_pf : null, _pf : null,
@ -26875,16 +26878,6 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
// format function strings // format function strings
formatFunctions = {}, formatFunctions = {},
// default relative time thresholds
relativeTimeThresholds = {
s: 45, //seconds to minutes
m: 45, //minutes to hours
h: 22, //hours to days
dd: 25, //days to month (month == 1)
dm: 45, //days to months (months > 1)
dy: 345 //days to year
},
// tokens to ordinalize and pad // tokens to ordinalize and pad
ordinalizeTokens = 'DDD w W M D d'.split(' '), ordinalizeTokens = 'DDD w W M D d'.split(' '),
paddedTokens = 'M D H h m s w W'.split(' '), paddedTokens = 'M D H h m s w W'.split(' '),
@ -27024,16 +27017,6 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
lists = ['months', 'monthsShort', 'weekdays', 'weekdaysShort', 'weekdaysMin']; lists = ['months', 'monthsShort', 'weekdays', 'weekdaysShort', 'weekdaysMin'];
// Pick the first defined of two or three arguments. dfl comes from
// default.
function dfl(a, b, c) {
switch (arguments.length) {
case 2: return a != null ? a : b;
case 3: return a != null ? a : b != null ? b : c;
default: throw new Error("Implement me");
}
}
function defaultParsingFlags() { function defaultParsingFlags() {
// We need to deep clone this object, and es5 standard is not very // We need to deep clone this object, and es5 standard is not very
// helpful. // helpful.
@ -27902,94 +27885,39 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
config._useUTC = true; config._useUTC = true;
config._tzm = timezoneMinutesFromString(input); config._tzm = timezoneMinutesFromString(input);
break; break;
// WEEKDAY - human
case 'dd':
case 'ddd':
case 'dddd':
a = getLangDefinition(config._l).weekdaysParse(input);
// if we didn't get a weekday name, mark the date as invalid
if (a != null) {
config._w = config._w || {};
config._w['d'] = a;
} else {
config._pf.invalidWeekday = input;
}
break;
// WEEK, WEEK DAY - numeric
case 'w': case 'w':
case 'ww': case 'ww':
case 'W': case 'W':
case 'WW': case 'WW':
case 'd': case 'd':
case 'dd':
case 'ddd':
case 'dddd':
case 'e': case 'e':
case 'E': case 'E':
token = token.substr(0, 1); token = token.substr(0, 1);
/* falls through */ /* falls through */
case 'gg':
case 'gggg': case 'gggg':
case 'GG':
case 'GGGG': case 'GGGG':
case 'GGGGG': case 'GGGGG':
token = token.substr(0, 2); token = token.substr(0, 2);
if (input) { if (input) {
config._w = config._w || {}; config._w = config._w || {};
config._w[token] = toInt(input);
config._w[token] = input;
} }
break; break;
case 'gg':
case 'GG':
config._w = config._w || {};
config._w[token] = moment.parseTwoDigitYear(input);
} }
} }
function dayOfYearFromWeekInfo(config) {
var w, weekYear, week, weekday, dow, doy, temp, lang;
w = config._w;
if (w.GG != null || w.W != null || w.E != null) {
dow = 1;
doy = 4;
// TODO: We need to take the current isoWeekYear, but that depends on
// how we interpret now (local, utc, fixed offset). So create
// a now version of current config (take local/utc/offset flags, and
// create now).
weekYear = dfl(w.GG, config._a[YEAR], weekOfYear(moment(), 1, 4).year);
week = dfl(w.W, 1);
weekday = dfl(w.E, 1);
} else {
lang = getLangDefinition(config._l);
dow = lang._week.dow;
doy = lang._week.doy;
weekYear = dfl(w.gg, config._a[YEAR], weekOfYear(moment(), dow, doy).year);
week = dfl(w.w, 1);
if (w.d != null) {
// weekday -- low day numbers are considered next week
weekday = w.d;
if (weekday < dow) {
++week;
}
} else if (w.e != null) {
// local weekday -- counting starts from begining of week
weekday = w.e + dow;
} else {
// default to begining of week
weekday = dow;
}
}
temp = dayOfYearFromWeeks(weekYear, week, weekday, doy, dow);
config._a[YEAR] = temp.year;
config._dayOfYear = temp.dayOfYear;
}
// convert an array to a date. // convert an array to a date.
// the array should mirror the parameters below // the array should mirror the parameters below
// note: all values past the year are optional and will default to the lowest possible value. // note: all values past the year are optional and will default to the lowest possible value.
// [year, month, day , hour, minute, second, millisecond] // [year, month, day , hour, minute, second, millisecond]
function dateFromConfig(config) { function dateFromConfig(config) {
var i, date, input = [], currentDate, yearToUse;
var i, date, input = [], currentDate,
yearToUse, fixYear, w, temp, lang, weekday, week;
if (config._d) { if (config._d) {
return; return;
@ -27999,12 +27927,39 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
//compute day of the year from weeks and weekdays //compute day of the year from weeks and weekdays
if (config._w && config._a[DATE] == null && config._a[MONTH] == null) { if (config._w && config._a[DATE] == null && config._a[MONTH] == null) {
dayOfYearFromWeekInfo(config);
fixYear = function (val) {
var intVal = parseInt(val, 10);
return val ?
(val.length < 3 ? (intVal > 68 ? 1900 + intVal : 2000 + intVal) : intVal) :
(config._a[YEAR] == null ? moment().weekYear() : config._a[YEAR]);
};
w = config._w;
if (w.GG != null || w.W != null || w.E != null) {
temp = dayOfYearFromWeeks(fixYear(w.GG), w.W || 1, w.E, 4, 1);
}
else {
lang = getLangDefinition(config._l);
weekday = w.d != null ? parseWeekday(w.d, lang) :
(w.e != null ? parseInt(w.e, 10) + lang._week.dow : 0);
week = parseInt(w.w, 10) || 1;
//if we're parsing 'd', then the low day numbers may be next week
if (w.d != null && weekday < lang._week.dow) {
week++;
}
temp = dayOfYearFromWeeks(fixYear(w.gg), week, weekday, lang._week.doy, lang._week.dow);
}
config._a[YEAR] = temp.year;
config._dayOfYear = temp.dayOfYear;
} }
//if the day of the year is set, figure out what it is //if the day of the year is set, figure out what it is
if (config._dayOfYear) { if (config._dayOfYear) {
yearToUse = dfl(config._a[YEAR], currentDate[YEAR]);
yearToUse = config._a[YEAR] == null ? currentDate[YEAR] : config._a[YEAR];
if (config._dayOfYear > daysInYear(yearToUse)) { if (config._dayOfYear > daysInYear(yearToUse)) {
config._pf._overflowDayOfYear = true; config._pf._overflowDayOfYear = true;
@ -28029,12 +27984,11 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
config._a[i] = input[i] = (config._a[i] == null) ? (i === 2 ? 1 : 0) : config._a[i]; config._a[i] = input[i] = (config._a[i] == null) ? (i === 2 ? 1 : 0) : config._a[i];
} }
// add the offsets to the time to be parsed so that we can have a clean array for checking isValid
input[HOUR] += toInt((config._tzm || 0) / 60);
input[MINUTE] += toInt((config._tzm || 0) % 60);
config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input); config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input);
// Apply timezone offset from input. The actual zone can be changed
// with parseZone.
if (config._tzm != null) {
config._d.setUTCMinutes(config._d.getUTCMinutes() + config._tzm);
}
} }
function dateFromObject(config) { function dateFromObject(config) {
@ -28074,11 +28028,6 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
// date from string and format string // date from string and format string
function makeDateFromStringAndFormat(config) { function makeDateFromStringAndFormat(config) {
if (config._f === moment.ISO_8601) {
parseISO(config);
return;
}
config._a = []; config._a = [];
config._pf.empty = true; config._pf.empty = true;
@ -28191,7 +28140,7 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
} }
// date from iso format // date from iso format
function parseISO(config) {
function makeDateFromString(config) {
var i, l, var i, l,
string = config._i, string = config._i,
match = isoRegex.exec(string); match = isoRegex.exec(string);
@ -28215,16 +28164,8 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
config._f += "Z"; config._f += "Z";
} }
makeDateFromStringAndFormat(config); makeDateFromStringAndFormat(config);
} else {
config._isValid = false;
} }
}
// date from iso format or fallback
function makeDateFromString(config) {
parseISO(config);
if (config._isValid === false) {
delete config._isValid;
else {
moment.createFromInputFallback(config); moment.createFromInputFallback(config);
} }
} }
@ -28305,15 +28246,15 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
hours = round(minutes / 60), hours = round(minutes / 60),
days = round(hours / 24), days = round(hours / 24),
years = round(days / 365), years = round(days / 365),
args = seconds < relativeTimeThresholds.s && ['s', seconds] ||
args = seconds < 45 && ['s', seconds] ||
minutes === 1 && ['m'] || minutes === 1 && ['m'] ||
minutes < relativeTimeThresholds.m && ['mm', minutes] ||
minutes < 45 && ['mm', minutes] ||
hours === 1 && ['h'] || hours === 1 && ['h'] ||
hours < relativeTimeThresholds.h && ['hh', hours] ||
hours < 22 && ['hh', hours] ||
days === 1 && ['d'] || days === 1 && ['d'] ||
days <= relativeTimeThresholds.dd && ['dd', days] ||
days <= relativeTimeThresholds.dm && ['M'] ||
days < relativeTimeThresholds.dy && ['MM', round(days / 30)] ||
days <= 25 && ['dd', days] ||
days <= 45 && ['M'] ||
days < 345 && ['MM', round(days / 30)] ||
years === 1 && ['y'] || ['yy', years]; years === 1 && ['y'] || ['yy', years];
args[2] = withoutSuffix; args[2] = withoutSuffix;
args[3] = milliseconds > 0; args[3] = milliseconds > 0;
@ -28359,7 +28300,6 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
function dayOfYearFromWeeks(year, week, weekday, firstDayOfWeekOfYear, firstDayOfWeek) { function dayOfYearFromWeeks(year, week, weekday, firstDayOfWeekOfYear, firstDayOfWeek) {
var d = makeUTCDate(year, 0, 1).getUTCDay(), daysToAdd, dayOfYear; var d = makeUTCDate(year, 0, 1).getUTCDay(), daysToAdd, dayOfYear;
d = d === 0 ? 7 : d;
weekday = weekday != null ? weekday : firstDayOfWeek; weekday = weekday != null ? weekday : firstDayOfWeek;
daysToAdd = firstDayOfWeek - d + (d > firstDayOfWeekOfYear ? 7 : 0) - (d < firstDayOfWeek ? 7 : 0); daysToAdd = firstDayOfWeek - d + (d > firstDayOfWeekOfYear ? 7 : 0) - (d < firstDayOfWeek ? 7 : 0);
dayOfYear = 7 * (week - 1) + (weekday - firstDayOfWeek) + daysToAdd + 1; dayOfYear = 7 * (week - 1) + (weekday - firstDayOfWeek) + daysToAdd + 1;
@ -28435,40 +28375,6 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
config._d = new Date(config._i); config._d = new Date(config._i);
}); });
// Pick a moment m from moments so that m[fn](other) is true for all
// other. This relies on the function fn to be transitive.
//
// moments should either be an array of moment objects or an array, whose
// first element is an array of moment objects.
function pickBy(fn, moments) {
var res, i;
if (moments.length === 1 && isArray(moments[0])) {
moments = moments[0];
}
if (!moments.length) {
return moment();
}
res = moments[0];
for (i = 1; i < moments.length; ++i) {
if (moments[i][fn](res)) {
res = moments[i];
}
}
return res;
}
moment.min = function () {
var args = [].slice.call(arguments, 0);
return pickBy('isBefore', args);
};
moment.max = function () {
var args = [].slice.call(arguments, 0);
return pickBy('isAfter', args);
};
// creating with utc // creating with utc
moment.utc = function (input, format, lang, strict) { moment.utc = function (input, format, lang, strict) {
var c; var c;
@ -28565,9 +28471,6 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
// default format // default format
moment.defaultFormat = isoFormat; moment.defaultFormat = isoFormat;
// constant that refers to the ISO standard
moment.ISO_8601 = function () {};
// Plugins that add properties should also add the key here (null value), // Plugins that add properties should also add the key here (null value),
// so we can properly clone ourselves. // so we can properly clone ourselves.
moment.momentProperties = momentProperties; moment.momentProperties = momentProperties;
@ -28576,15 +28479,6 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
// It is intended to keep the offset in sync with the timezone. // It is intended to keep the offset in sync with the timezone.
moment.updateOffset = function () {}; moment.updateOffset = function () {};
// This function allows you to set a threshold for relative time strings
moment.relativeTimeThreshold = function(threshold, limit) {
if (relativeTimeThresholds[threshold] === undefined) {
return false;
}
relativeTimeThresholds[threshold] = limit;
return true;
};
// This function will load languages and then set the global language. If // This function will load languages and then set the global language. If
// no arguments are passed in, it will simply return the current global // no arguments are passed in, it will simply return the current global
// language key. // language key.
@ -28740,9 +28634,7 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
add : function (input, val) { add : function (input, val) {
var dur; var dur;
// switch args to support add('s', 1) and add(1, 's') // switch args to support add('s', 1) and add(1, 's')
if (typeof input === 'string' && typeof val === 'string') {
dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
} else if (typeof input === 'string') {
if (typeof input === 'string') {
dur = moment.duration(+val, input); dur = moment.duration(+val, input);
} else { } else {
dur = moment.duration(input, val); dur = moment.duration(input, val);
@ -28754,9 +28646,7 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
subtract : function (input, val) { subtract : function (input, val) {
var dur; var dur;
// switch args to support subtract('s', 1) and subtract(1, 's') // switch args to support subtract('s', 1) and subtract(1, 's')
if (typeof input === 'string' && typeof val === 'string') {
dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
} else if (typeof input === 'string') {
if (typeof input === 'string') {
dur = moment.duration(+val, input); dur = moment.duration(+val, input);
} else { } else {
dur = moment.duration(input, val); dur = moment.duration(input, val);
@ -28807,11 +28697,10 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
return this.from(moment(), withoutSuffix); return this.from(moment(), withoutSuffix);
}, },
calendar : function (time) {
calendar : function () {
// We want to compare the start of today, vs this. // We want to compare the start of today, vs this.
// Getting start-of-today depends on whether we're zone'd or not. // Getting start-of-today depends on whether we're zone'd or not.
var now = time || moment(),
sod = makeAs(now, this).startOf('day'),
var sod = makeAs(moment(), this).startOf('day'),
diff = this.diff(sod, 'days', true), diff = this.diff(sod, 'days', true),
format = diff < -6 ? 'sameElse' : format = diff < -6 ? 'sameElse' :
diff < -1 ? 'lastWeek' : diff < -1 ? 'lastWeek' :
@ -28906,21 +28795,15 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
return +this.clone().startOf(units) === +makeAs(input, this).startOf(units); return +this.clone().startOf(units) === +makeAs(input, this).startOf(units);
}, },
min: deprecate(
"moment().min is deprecated, use moment.min instead. https://github.com/moment/moment/issues/1548",
function (other) {
other = moment.apply(null, arguments);
return other < this ? this : other;
}
),
max: deprecate(
"moment().max is deprecated, use moment.max instead. https://github.com/moment/moment/issues/1548",
function (other) {
other = moment.apply(null, arguments);
return other > this ? this : other;
}
),
min: function (other) {
other = moment.apply(null, arguments);
return other < this ? this : other;
},
max: function (other) {
other = moment.apply(null, arguments);
return other > this ? this : other;
},
// keepTime = true means only change the timezone, without affecting // keepTime = true means only change the timezone, without affecting
// the local hour. So 5:31:26 +0300 --[zone(2, true)]--> 5:31:26 +0200 // the local hour. So 5:31:26 +0300 --[zone(2, true)]--> 5:31:26 +0200

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


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


+ 20
- 20
docs/network.html View File

@ -13,18 +13,18 @@
<body onload="prettyPrint();"> <body onload="prettyPrint();">
<div id="container"> <div id="container">
<h1>Graph documentation</h1>
<h1>Network documentation</h1>
<h2 id="Overview">Overview</h2> <h2 id="Overview">Overview</h2>
<p> <p>
Graph is a visualization to display networks and networks consisting of nodes
Network is a visualization to display networks and networks consisting of nodes
and edges. The visualization is easy to use and supports custom shapes, and edges. The visualization is easy to use and supports custom shapes,
styles, colors, sizes, images, and more. styles, colors, sizes, images, and more.
</p> </p>
<p> <p>
The network visualization works smooth on any modern browser for up to a The network visualization works smooth on any modern browser for up to a
few thousand nodes and edges. To handle a larger amount of nodes, Graph
few thousand nodes and edges. To handle a larger amount of nodes, Network
has <a href="#Clustering">clustering</a> support. has <a href="#Clustering">clustering</a> support.
</p> </p>
@ -35,7 +35,7 @@
</p> </p>
<p> <p>
To get started with Graph, install or download the
To get started with Network, install or download the
<a href="http://visjs.org" target="_blank">vis.js</a> library. <a href="http://visjs.org" target="_blank">vis.js</a> library.
</p> </p>
@ -78,7 +78,7 @@
<h2 id="Example">Example</h2> <h2 id="Example">Example</h2>
<p> <p>
Here a basic network example. Note that unlike the Here a basic network example. Note that unlike the
<a href="timeline.html">Timeline</a>, the Graph does not need the vis.css
<a href="timeline.html">Timeline</a>, the Network does not need the vis.css
file. file.
</p> </p>
@ -90,7 +90,7 @@
<pre class="prettyprint lang-html">&lt;!doctype html&gt; <pre class="prettyprint lang-html">&lt;!doctype html&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
&lt;title&gt;Graph | Basic usage&lt;/title&gt;
&lt;title&gt;Network | Basic usage&lt;/title&gt;
&lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
&lt;/head&gt; &lt;/head&gt;
@ -127,7 +127,7 @@
width: '400px', width: '400px',
height: '400px' height: '400px'
}; };
var network = new vis.Graph(container, data, options);
var network = new vis.Network(container, data, options);
&lt;/script&gt; &lt;/script&gt;
&lt;/body&gt; &lt;/body&gt;
@ -146,8 +146,8 @@
</pre> </pre>
The constructor of the Graph is <code>vis.Graph</code>.
<pre class="prettyprint lang-js">var network = new vis.Graph(container, data, options);</pre>
The constructor of the Network is <code>vis.Network</code>.
<pre class="prettyprint lang-js">var network = new vis.Network(container, data, options);</pre>
The constructor accepts three parameters: The constructor accepts three parameters:
<ul> <ul>
@ -173,7 +173,7 @@ The constructor accepts three parameters:
<h2 id="Data_format">Data format</h2> <h2 id="Data_format">Data format</h2>
<p> <p>
The <code>data</code> parameter of the Graph constructor is an object
The <code>data</code> parameter of the Network constructor is an object
which can contain different types of data. which can contain different types of data.
The following properties are supported in the <code>data</code> object: The following properties are supported in the <code>data</code> object:
</p> </p>
@ -714,7 +714,7 @@ When using a DataSet, the network is automatically updating to changes in the Da
<h3 id="DOT_language">DOT language</h3> <h3 id="DOT_language">DOT language</h3>
<p> <p>
Graph supports data in the
Network supports data in the
<a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>. <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
To provide data in the DOT language, the <code>data</code> object must contain To provide data in the DOT language, the <code>data</code> object must contain
a property <code>dot</code> with a String containing the data. a property <code>dot</code> with a String containing the data.
@ -731,7 +731,7 @@ var data = {
}; };
// create a network // create a network
var network = new vis.Graph(container, data);
var network = new vis.Network(container, data);
</pre> </pre>
@ -853,7 +853,7 @@ var options = {
<td>Object</td> <td>Object</td>
<td>none</td> <td>none</td>
<td> <td>
Configuration options for shortcuts keys. Sortcut keys are turned off by default. See section <a href="#Keyboard_navigation">Keyboard navigation</a> for an overview of the available options.
Configuration options for shortcuts keys. Shortcut keys are turned off by default. See section <a href="#Keyboard_navigation">Keyboard navigation</a> for an overview of the available options.
</td> </td>
</tr> </tr>
<tr> <tr>
@ -943,7 +943,7 @@ var options = {
<h3 id="Nodes_configuration">Nodes configuration</h3> <h3 id="Nodes_configuration">Nodes configuration</h3>
<p> <p>
Nodes can be configured with different styles and shapes. To configure nodes, provide an object named <code>nodes</code> in the <code>options</code> for the Graph.
Nodes can be configured with different styles and shapes. To configure nodes, provide an object named <code>nodes</code> in the <code>options</code> for the Network.
</p> </p>
<p> <p>
@ -1121,7 +1121,7 @@ var options = {
<h3 id="Edges_configuration">Edges configuration</h3> <h3 id="Edges_configuration">Edges configuration</h3>
<p> <p>
Edges can be configured with different length and styling. To configure edges, provide an object named <code>edges</code> in the <code>options</code> for the Graph.
Edges can be configured with different length and styling. To configure edges, provide an object named <code>edges</code> in the <code>options</code> for the Network.
</p> </p>
<p> <p>
@ -1697,7 +1697,7 @@ network.on("resize", function(params) {console.log(params.width,params.height)})
to calculate the required forces. The contained nodes are removed from the global nodes index, greatly speeding up the system. to calculate the required forces. The contained nodes are removed from the global nodes index, greatly speeding up the system.
<br /> <br />
<br /> <br />
The clustering has the following user-configurable settings. The default values have been tested with the Graph examples and work well.
The clustering has the following user-configurable settings. The default values have been tested with the Network examples and work well.
The default state for clustering is <b>off</b>. The default state for clustering is <b>off</b>.
</p> </p>
@ -1860,7 +1860,7 @@ var options: {
<td>clusterLevelDifference</td> <td>clusterLevelDifference</td>
<td>Number</td> <td>Number</td>
<td>2</td> <td>2</td>
<td>At every clustering session, Graph will check if the difference between cluster levels is
<td>At every clustering session, Network will check if the difference between cluster levels is
acceptable. When a cluster is formed when zooming out, that is one cluster level. acceptable. When a cluster is formed when zooming out, that is one cluster level.
If you zoom out further and it encompasses more nodes, that is another level. For example: If you zoom out further and it encompasses more nodes, that is another level. For example:
If the highest level of your network at any given time is 3, nodes that have not clustered or If the highest level of your network at any given time is 3, nodes that have not clustered or
@ -1870,7 +1870,7 @@ var options: {
<h3 id="Navigation_controls">Navigation controls</h3> <h3 id="Navigation_controls">Navigation controls</h3>
<p> <p>
Graph has a menu with navigation controls, which is disabled by default.
Network has a menu with navigation controls, which is disabled by default.
It can be configured with the following settings. To correctly display the navigation icons, the <b>vis.css</b> file must be included. It can be configured with the following settings. To correctly display the navigation icons, the <b>vis.css</b> file must be included.
The user is free to alter or overload the CSS classes but without them the navigation icons are not visible. The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
</p> </p>
@ -2126,7 +2126,7 @@ var options: {
<h2 id="Methods">Methods</h2> <h2 id="Methods">Methods</h2>
<p> <p>
Graph supports the following methods.
Network supports the following methods.
</p> </p>
<table> <table>
@ -2256,7 +2256,7 @@ var options: {
<h2 id="Events">Events</h2> <h2 id="Events">Events</h2>
<p> <p>
Graph fires events after one or multiple nodes are selected or deselected.
Network fires events after one or multiple nodes are selected or deselected.
The event can be catched by creating a listener. The event can be catched by creating a listener.
</p> </p>

+ 1
- 1
docs/timeline.html View File

@ -111,7 +111,7 @@ The constructor of the Timeline is vis.Timeline
The constructor accepts three parameters: The constructor accepts three parameters:
<ul> <ul>
<li> <li>
<code>container</code> is the DOM element in which to create the graph.
<code>container</code> is the DOM element in which to create the timeline.
</li> </li>
<li> <li>
<code>items</code> is an Array containing items. The properties of an <code>items</code> is an Array containing items. The properties of an

+ 4
- 4
examples/Network/graphviz/graphviz_gallery.html View File

@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>Graph | Graphviz Gallery</title>
<title>Network | Graphviz Gallery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../../../dist/vis.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script>
@ -65,17 +65,17 @@
<script type="text/javascript"> <script type="text/javascript">
var container = document.getElementById('mygraph'); var container = document.getElementById('mygraph');
var url = document.getElementById('url'); var url = document.getElementById('url');
var graph = new vis.Network(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}});
var network = new vis.Network(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}});
function loadData () { function loadData () {
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: url.value url: url.value
}).done(function(data) { }).done(function(data) {
graph.setOptions({
network.setOptions({
stabilize: false stabilize: false
}); });
graph.setData( {
network.setData( {
dot: data dot: data
}); });
}); });

+ 5
- 1
src/module/exports.js View File

@ -24,7 +24,7 @@ var vis = {
TimeAxis: TimeAxis TimeAxis: TimeAxis
}, },
graph: {
network: {
Node: Node, Node: Node,
Edge: Edge, Edge: Edge,
Popup: Popup, Popup: Popup,
@ -34,6 +34,10 @@ var vis = {
Timeline: Timeline, Timeline: Timeline,
Network: Network, Network: Network,
// Deprecated since v3.0.0
Graph: function () {
throw new Error('Graph is renamed to Network. Please create a graph as new vis.Network(...)');
},
Graph3d: Graph3d, Graph3d: Graph3d,
Graph2d: Graph2d Graph2d: Graph2d
}; };

+ 12
- 12
src/network/Edge.js View File

@ -8,16 +8,16 @@
* to (number), label (string, color (string), * to (number), label (string, color (string),
* width (number), style (string), * width (number), style (string),
* length (number), title (string) * length (number), title (string)
* @param {Network} graph A graph object, used to find and edge to
* @param {Network} network A Network object, used to find and edge to
* nodes. * nodes.
* @param {Object} constants An object with default values for * @param {Object} constants An object with default values for
* example for the color * example for the color
*/ */
function Edge (properties, graph, constants) {
if (!graph) {
throw "No graph provided";
function Edge (properties, network, constants) {
if (!network) {
throw "No network provided";
} }
this.graph = graph;
this.network = network;
// initialize constants // initialize constants
this.widthMin = constants.edges.widthMin; this.widthMin = constants.edges.widthMin;
@ -156,8 +156,8 @@ Edge.prototype.setProperties = function(properties, constants) {
Edge.prototype.connect = function () { Edge.prototype.connect = function () {
this.disconnect(); this.disconnect();
this.from = this.graph.nodes[this.fromId] || null;
this.to = this.graph.nodes[this.toId] || null;
this.from = this.network.nodes[this.fromId] || null;
this.to = this.network.nodes[this.toId] || null;
this.connected = (this.from && this.to); this.connected = (this.from && this.to);
if (this.connected) { if (this.connected) {
@ -317,14 +317,14 @@ Edge.prototype._drawLine = function(ctx) {
*/ */
Edge.prototype._getLineWidth = function() { Edge.prototype._getLineWidth = function() {
if (this.selected == true) { if (this.selected == true) {
return Math.min(this.widthSelected, this.widthMax)*this.graphScaleInv;
return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
} }
else { else {
if (this.hover == true) { if (this.hover == true) {
return Math.min(this.hoverWidth, this.widthMax)*this.graphScaleInv;
return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
} }
else { else {
return this.width*this.graphScaleInv;
return this.width*this.networkScaleInv;
} }
} }
}; };
@ -797,12 +797,12 @@ Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is
/** /**
* This allows the zoom level of the graph to influence the rendering
* This allows the zoom level of the network to influence the rendering
* *
* @param scale * @param scale
*/ */
Edge.prototype.setScale = function(scale) { Edge.prototype.setScale = function(scale) {
this.graphScaleInv = 1.0/scale;
this.networkScaleInv = 1.0/scale;
}; };

+ 36
- 36
src/network/Network.js View File

@ -1,6 +1,6 @@
/** /**
* @constructor Network * @constructor Network
* Create a graph visualization, displaying nodes and edges.
* Create a network visualization, displaying nodes and edges.
* *
* @param {Element} container The DOM element in which the Network will * @param {Element} container The DOM element in which the Network will
* be created. Normally a div element. * be created. Normally a div element.
@ -28,7 +28,7 @@ function Network (container, data, options) {
this.maxPhysicsTicksPerRender = 3; // max amount of physics ticks per render step. this.maxPhysicsTicksPerRender = 3; // max amount of physics ticks per render step.
this.physicsDiscreteStepsize = 0.50; // discrete stepsize of the simulation this.physicsDiscreteStepsize = 0.50; // discrete stepsize of the simulation
this.stabilize = true; // stabilize before displaying the graph
this.stabilize = true; // stabilize before displaying the network
this.selectable = true; this.selectable = true;
this.initializing = true; this.initializing = true;
@ -202,11 +202,11 @@ function Network (container, data, options) {
// Node variables // Node variables
var graph = this;
var network = this;
this.groups = new Groups(); // object with groups this.groups = new Groups(); // object with groups
this.images = new Images(); // object with images this.images = new Images(); // object with images
this.images.setOnloadCallback(function () { this.images.setOnloadCallback(function () {
graph._redraw();
network._redraw();
}); });
// keyboard navigation variables // keyboard navigation variables
@ -259,30 +259,30 @@ function Network (container, data, options) {
// create event listeners used to subscribe on the DataSets of the nodes and edges // create event listeners used to subscribe on the DataSets of the nodes and edges
this.nodesListeners = { this.nodesListeners = {
'add': function (event, params) { 'add': function (event, params) {
graph._addNodes(params.items);
graph.start();
network._addNodes(params.items);
network.start();
}, },
'update': function (event, params) { 'update': function (event, params) {
graph._updateNodes(params.items);
graph.start();
network._updateNodes(params.items);
network.start();
}, },
'remove': function (event, params) { 'remove': function (event, params) {
graph._removeNodes(params.items);
graph.start();
network._removeNodes(params.items);
network.start();
} }
}; };
this.edgesListeners = { this.edgesListeners = {
'add': function (event, params) { 'add': function (event, params) {
graph._addEdges(params.items);
graph.start();
network._addEdges(params.items);
network.start();
}, },
'update': function (event, params) { 'update': function (event, params) {
graph._updateEdges(params.items);
graph.start();
network._updateEdges(params.items);
network.start();
}, },
'remove': function (event, params) { 'remove': function (event, params) {
graph._removeEdges(params.items);
graph.start();
network._removeEdges(params.items);
network.start();
} }
}; };
@ -339,7 +339,7 @@ Network.prototype._getScriptPath = function() {
/** /**
* Find the center position of the graph
* Find the center position of the network
* @private * @private
*/ */
Network.prototype._getRange = function() { Network.prototype._getRange = function() {
@ -372,11 +372,11 @@ Network.prototype._findCenter = function(range) {
/** /**
* center the graph
* center the network
* *
* @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY}; * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
*/ */
Network.prototype._centerGraph = function(range) {
Network.prototype._centerNetwork = function(range) {
var center = this._findCenter(range); var center = this._findCenter(range);
center.x *= this.scale; center.x *= this.scale;
@ -446,7 +446,7 @@ Network.prototype.zoomExtent = function(initialZoom, disableStart) {
this._setScale(zoomLevel); this._setScale(zoomLevel);
this._centerGraph(range);
this._centerNetwork(range);
if (disableStart == false) { if (disableStart == false) {
this.moving = true; this.moving = true;
this.start(); this.start();
@ -784,7 +784,7 @@ Network.prototype._create = function () {
this.frame.style.position = 'relative'; this.frame.style.position = 'relative';
this.frame.style.overflow = 'hidden'; this.frame.style.overflow = 'hidden';
// create the graph canvas (HTML canvas element)
// create the network canvas (HTML canvas element)
this.frame.canvas = document.createElement( 'canvas' ); this.frame.canvas = document.createElement( 'canvas' );
this.frame.canvas.style.position = 'relative'; this.frame.canvas.style.position = 'relative';
this.frame.appendChild(this.frame.canvas); this.frame.appendChild(this.frame.canvas);
@ -995,7 +995,7 @@ Network.prototype._handleOnDrag = function(event) {
} }
else { else {
if (this.constants.dragGraph == true) { if (this.constants.dragGraph == true) {
// move the graph
// move the network
var diffX = pointer.x - this.drag.pointer.x; var diffX = pointer.x - this.drag.pointer.x;
var diffY = pointer.y - this.drag.pointer.y; var diffY = pointer.y - this.drag.pointer.y;
@ -1086,7 +1086,7 @@ Network.prototype._onPinch = function (event) {
}; };
/** /**
* Zoom the graph in or out
* Zoom the network in or out
* @param {Number} scale a number around 1, and between 0.01 and 10 * @param {Number} scale a number around 1, and between 0.01 and 10
* @param {{x: Number, y: Number}} pointer Position on screen * @param {{x: Number, y: Number}} pointer Position on screen
* @return {Number} appliedScale scale is limited within the boundaries * @return {Number} appliedScale scale is limited within the boundaries
@ -1235,7 +1235,7 @@ Network.prototype._onMouseMoveTitle = function (event) {
}; };
/** /**
* Check if there is an element on the given position in the graph
* Check if there is an element on the given position in the network
* (a node or edge). If so, and if this element has a title, * (a node or edge). If so, and if this element has a title,
* show a popup window with its title. * show a popup window with its title.
* *
@ -1323,7 +1323,7 @@ Network.prototype._checkHidePopup = function (pointer) {
/** /**
* Set a new size for the graph
* Set a new size for the network
* @param {string} width Width in pixels or percentage (for example '800px' * @param {string} width Width in pixels or percentage (for example '800px'
* or '50%') * or '50%')
* @param {string} height Height in pixels or percentage (for example '400px' * @param {string} height Height in pixels or percentage (for example '400px'
@ -1353,7 +1353,7 @@ Network.prototype.setSize = function(width, height) {
}; };
/** /**
* Set a data set with nodes for the graph
* Set a data set with nodes for the network
* @param {Array | DataSet | DataView} nodes The data containing the nodes. * @param {Array | DataSet | DataView} nodes The data containing the nodes.
* @private * @private
*/ */
@ -1685,7 +1685,7 @@ Network.prototype._updateValueRange = function(obj) {
}; };
/** /**
* Redraw the graph with the current data
* Redraw the network with the current data
* chart will be resized too. * chart will be resized too.
*/ */
Network.prototype.redraw = function() { Network.prototype.redraw = function() {
@ -1694,7 +1694,7 @@ Network.prototype.redraw = function() {
}; };
/** /**
* Redraw the graph with the current data
* Redraw the network with the current data
* @private * @private
*/ */
Network.prototype._redraw = function() { Network.prototype._redraw = function() {
@ -1731,7 +1731,7 @@ Network.prototype._redraw = function() {
}; };
/** /**
* Set the translation of the graph
* Set the translation of the network
* @param {Number} offsetX Horizontal offset * @param {Number} offsetX Horizontal offset
* @param {Number} offsetY Vertical offset * @param {Number} offsetY Vertical offset
* @private * @private
@ -1755,7 +1755,7 @@ Network.prototype._setTranslation = function(offsetX, offsetY) {
}; };
/** /**
* Get the translation of the graph
* Get the translation of the network
* @return {Object} translation An object with parameters x and y, both a number * @return {Object} translation An object with parameters x and y, both a number
* @private * @private
*/ */
@ -1767,7 +1767,7 @@ Network.prototype._getTranslation = function() {
}; };
/** /**
* Scale the graph
* Scale the network
* @param {Number} scale Scaling factor 1.0 is unscaled * @param {Number} scale Scaling factor 1.0 is unscaled
* @private * @private
*/ */
@ -1776,7 +1776,7 @@ Network.prototype._setScale = function(scale) {
}; };
/** /**
* Get the current scale of the graph
* Get the current scale of the network
* @return {Number} scale Scaling factor 1.0 is unscaled * @return {Number} scale Scaling factor 1.0 is unscaled
* @private * @private
*/ */
@ -2126,7 +2126,7 @@ Network.prototype.start = function() {
/** /**
* Move the graph according to the keyboard presses.
* Move the network according to the keyboard presses.
* *
* @private * @private
*/ */
@ -2227,9 +2227,9 @@ Network.prototype._createBezierNodes = function() {
* @private * @private
*/ */
Network.prototype._initializeMixinLoaders = function () { Network.prototype._initializeMixinLoaders = function () {
for (var mixinFunction in graphMixinLoaders) {
if (graphMixinLoaders.hasOwnProperty(mixinFunction)) {
Network.prototype[mixinFunction] = graphMixinLoaders[mixinFunction];
for (var mixinFunction in networkMixinLoaders) {
if (networkMixinLoaders.hasOwnProperty(mixinFunction)) {
Network.prototype[mixinFunction] = networkMixinLoaders[mixinFunction];
} }
} }
}; };

+ 25
- 25
src/network/Node.js View File

@ -83,9 +83,9 @@ function Node(properties, imagelist, grouplist, constants) {
this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements; this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
this.growthIndicator = 0; this.growthIndicator = 0;
// variables to tell the node about the graph.
this.graphScaleInv = 1;
this.graphScale = 1;
// variables to tell the node about the network.
this.networkScaleInv = 1;
this.networkScale = 1;
this.canvasTopLeft = {"x": -300, "y": -300}; this.canvasTopLeft = {"x": -300, "y": -300};
this.canvasBottomRight = {"x": 300, "y": 300}; this.canvasBottomRight = {"x": 300, "y": 300};
this.parentEdgeId = null; this.parentEdgeId = null;
@ -525,7 +525,7 @@ Node.prototype._drawImage = function (ctx) {
// draw the shade // draw the shade
if (this.clusterSize > 1) { if (this.clusterSize > 1) {
var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0); var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
lineWidth *= this.graphScaleInv;
lineWidth *= this.networkScaleInv;
lineWidth = Math.min(0.2 * this.width,lineWidth); lineWidth = Math.min(0.2 * this.width,lineWidth);
ctx.globalAlpha = 0.5; ctx.globalAlpha = 0.5;
@ -575,14 +575,14 @@ Node.prototype._drawBox = function (ctx) {
// 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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;
@ -624,14 +624,14 @@ Node.prototype._drawDatabase = function (ctx) {
// 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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;
@ -674,14 +674,14 @@ Node.prototype._drawCircle = function (ctx) {
// 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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;
@ -724,14 +724,14 @@ Node.prototype._drawEllipse = function (ctx) {
// 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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;
@ -801,14 +801,14 @@ 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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 : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
ctx.lineWidth *= this.graphScaleInv;
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth); ctx.lineWidth = Math.min(0.1 * 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;
@ -846,7 +846,7 @@ Node.prototype._drawText = function (ctx) {
Node.prototype._label = function (ctx, text, x, y, align, baseline) { Node.prototype._label = function (ctx, text, x, y, align, baseline) {
if (text && this.fontSize * this.graphScale > this.fontDrawThreshold) {
if (text && this.fontSize * this.networkScale > this.fontDrawThreshold) {
ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace; ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
ctx.fillStyle = this.fontColor || "black"; ctx.fillStyle = this.fontColor || "black";
ctx.textAlign = align || "center"; ctx.textAlign = align || "center";
@ -892,10 +892,10 @@ Node.prototype.getTextSize = function(ctx) {
*/ */
Node.prototype.inArea = function() { Node.prototype.inArea = function() {
if (this.width !== undefined) { if (this.width !== undefined) {
return (this.x + this.width *this.graphScaleInv >= this.canvasTopLeft.x &&
this.x - this.width *this.graphScaleInv < this.canvasBottomRight.x &&
this.y + this.height*this.graphScaleInv >= this.canvasTopLeft.y &&
this.y - this.height*this.graphScaleInv < this.canvasBottomRight.y);
return (this.x + this.width *this.networkScaleInv >= this.canvasTopLeft.x &&
this.x - this.width *this.networkScaleInv < this.canvasBottomRight.x &&
this.y + this.height*this.networkScaleInv >= this.canvasTopLeft.y &&
this.y - this.height*this.networkScaleInv < this.canvasBottomRight.y);
} }
else { else {
return true; return true;
@ -914,7 +914,7 @@ Node.prototype.inView = function() {
}; };
/** /**
* This allows the zoom level of the graph to influence the rendering
* This allows the zoom level of the network to influence the rendering
* We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
* *
* @param scale * @param scale
@ -922,21 +922,21 @@ Node.prototype.inView = function() {
* @param canvasBottomRight * @param canvasBottomRight
*/ */
Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) { Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
this.graphScaleInv = 1.0/scale;
this.graphScale = scale;
this.networkScaleInv = 1.0/scale;
this.networkScale = scale;
this.canvasTopLeft = canvasTopLeft; this.canvasTopLeft = canvasTopLeft;
this.canvasBottomRight = canvasBottomRight; this.canvasBottomRight = canvasBottomRight;
}; };
/** /**
* This allows the zoom level of the graph to influence the rendering
* This allows the zoom level of the network to influence the rendering
* *
* @param scale * @param scale
*/ */
Node.prototype.setScale = function(scale) { Node.prototype.setScale = function(scale) {
this.graphScaleInv = 1.0/scale;
this.graphScale = scale;
this.networkScaleInv = 1.0/scale;
this.networkScale = scale;
}; };

+ 1
- 1
src/network/networkMixins/ClusterMixin.js View File

@ -1,7 +1,7 @@
/** /**
* Creation of the ClusterMixin var. * Creation of the ClusterMixin var.
* *
* This contains all the functions the Graph object can use to employ clustering
* This contains all the functions the Network object can use to employ clustering
* *
* Alex de Mulder * Alex de Mulder
* 21-01-2013 * 21-01-2013

+ 3
- 3
src/network/networkMixins/MixinLoader.js View File

@ -3,10 +3,10 @@
*/ */
var graphMixinLoaders = {
var networkMixinLoaders = {
/** /**
* Load a mixin into the graph object
* Load a mixin into the network object
* *
* @param {Object} sourceVariable | this object has to contain functions. * @param {Object} sourceVariable | this object has to contain functions.
* @private * @private
@ -21,7 +21,7 @@ var graphMixinLoaders = {
/** /**
* removes a mixin from the graph object.
* removes a mixin from the network object.
* *
* @param {Object} sourceVariable | this object has to contain functions. * @param {Object} sourceVariable | this object has to contain functions.
* @private * @private

+ 2
- 2
src/network/networkMixins/SectorsMixin.js View File

@ -1,8 +1,8 @@
/** /**
* Creation of the SectorMixin var. * Creation of the SectorMixin var.
* *
* This contains all the functions the Graph object can use to employ the sector system.
* The sector system is always used by Graph, though the benefits only apply to the use of clustering.
* This contains all the functions the Network object can use to employ the sector system.
* The sector system is always used by Network, though the benefits only apply to the use of clustering.
* If clustering is not used, there is no overhead except for a duplicate object with references to nodes and edges. * If clustering is not used, there is no overhead except for a duplicate object with references to nodes and edges.
* *
* Alex de Mulder * Alex de Mulder

+ 1
- 1
src/network/shapes.js View File

@ -1,5 +1,5 @@
/** /**
* Canvas shapes used by the Graph
* Canvas shapes used by Network
*/ */
if (typeof CanvasRenderingContext2D !== 'undefined') { if (typeof CanvasRenderingContext2D !== 'undefined') {

Loading…
Cancel
Save