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.
### Graph
### Network
- Renamed `Graph` to `Network` to prevent confusion with the visualizations
`Graph2d` and `Graph3d`.
- 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.
- Changed hierarchical physics solver and updated docs.
### Graph2D
### Graph2d
- Added first iteration of the Graph2D.
- Added first iteration of the Graph2d.
### Graph3d

+ 1
- 1
Jakefile.js View File

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

+ 151
- 268
dist/vis.js View File

@ -4,8 +4,8 @@
*
* A dynamic, browser-based visualization library.
*
* @version @@version
* @date @@date
* @version 2.0.1-SNAPSHOT
* @date 2014-07-04
*
* @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com
@ -12050,7 +12050,7 @@ Graph2d.prototype._getScrollTop = function () {
})(typeof util !== 'undefined' ? util : exports);
/**
* Canvas shapes used by the Graph
* Canvas shapes used by Network
*/
if (typeof CanvasRenderingContext2D !== 'undefined') {
@ -12360,9 +12360,9 @@ function Node(properties, imagelist, grouplist, constants) {
this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
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.canvasBottomRight = {"x": 300, "y": 300};
this.parentEdgeId = null;
@ -12802,7 +12802,7 @@ Node.prototype._drawImage = function (ctx) {
// draw the shade
if (this.clusterSize > 1) {
var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
lineWidth *= this.graphScaleInv;
lineWidth *= this.networkScaleInv;
lineWidth = Math.min(0.2 * this.width,lineWidth);
ctx.globalAlpha = 0.5;
@ -12852,14 +12852,14 @@ Node.prototype._drawBox = function (ctx) {
// draw the outer border
if (this.clusterSize > 1) {
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.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.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.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
@ -12901,14 +12901,14 @@ Node.prototype._drawDatabase = function (ctx) {
// draw the outer border
if (this.clusterSize > 1) {
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.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.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.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
if (this.clusterSize > 1) {
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.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
ctx.stroke();
}
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.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
if (this.clusterSize > 1) {
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.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
ctx.stroke();
}
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.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
if (this.clusterSize > 1) {
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[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
ctx.stroke();
}
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.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) {
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.fillStyle = this.fontColor || "black";
ctx.textAlign = align || "center";
@ -13169,10 +13169,10 @@ Node.prototype.getTextSize = function(ctx) {
*/
Node.prototype.inArea = function() {
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 {
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
*
* @param scale
@ -13199,21 +13199,21 @@ Node.prototype.inView = function() {
* @param 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.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
*/
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),
* width (number), style (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.
* @param {Object} constants An object with default values for
* 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
this.widthMin = constants.edges.widthMin;
@ -13400,8 +13400,8 @@ Edge.prototype.setProperties = function(properties, constants) {
Edge.prototype.connect = function () {
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);
if (this.connected) {
@ -13561,14 +13561,14 @@ Edge.prototype._drawLine = function(ctx) {
*/
Edge.prototype._getLineWidth = function() {
if (this.selected == true) {
return Math.min(this.widthSelected, this.widthMax)*this.graphScaleInv;
return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
}
else {
if (this.hover == true) {
return Math.min(this.hoverWidth, this.widthMax)*this.graphScaleInv;
return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
}
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
*/
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.
*
* 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.
*
* Alex de Mulder
@ -17209,7 +17209,7 @@ var SectorMixin = {
/**
* 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
* 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.
* @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.
* @private
@ -19467,7 +19467,7 @@ var graphMixinLoaders = {
/**
* @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
* 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.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.initializing = true;
@ -19669,11 +19669,11 @@ function Network (container, data, options) {
// Node variables
var graph = this;
var network = this;
this.groups = new Groups(); // object with groups
this.images = new Images(); // object with images
this.images.setOnloadCallback(function () {
graph._redraw();
network._redraw();
});
// 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
this.nodesListeners = {
'add': function (event, params) {
graph._addNodes(params.items);
graph.start();
network._addNodes(params.items);
network.start();
},
'update': function (event, params) {
graph._updateNodes(params.items);
graph.start();
network._updateNodes(params.items);
network.start();
},
'remove': function (event, params) {
graph._removeNodes(params.items);
graph.start();
network._removeNodes(params.items);
network.start();
}
};
this.edgesListeners = {
'add': function (event, params) {
graph._addEdges(params.items);
graph.start();
network._addEdges(params.items);
network.start();
},
'update': function (event, params) {
graph._updateEdges(params.items);
graph.start();
network._updateEdges(params.items);
network.start();
},
'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
*/
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};
*/
Network.prototype._centerGraph = function(range) {
Network.prototype._centerNetwork = function(range) {
var center = this._findCenter(range);
center.x *= this.scale;
@ -19913,7 +19913,7 @@ Network.prototype.zoomExtent = function(initialZoom, disableStart) {
this._setScale(zoomLevel);
this._centerGraph(range);
this._centerNetwork(range);
if (disableStart == false) {
this.moving = true;
this.start();
@ -20251,7 +20251,7 @@ Network.prototype._create = function () {
this.frame.style.position = 'relative';
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.style.position = 'relative';
this.frame.appendChild(this.frame.canvas);
@ -20462,7 +20462,7 @@ Network.prototype._handleOnDrag = function(event) {
}
else {
if (this.constants.dragGraph == true) {
// move the graph
// move the network
var diffX = pointer.x - this.drag.pointer.x;
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 {{x: Number, y: Number}} pointer Position on screen
* @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,
* 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'
* or '50%')
* @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.
* @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.
*/
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
*/
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} offsetY Vertical offset
* @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
* @private
*/
@ -21234,7 +21234,7 @@ Network.prototype._getTranslation = function() {
};
/**
* Scale the graph
* Scale the network
* @param {Number} scale Scaling factor 1.0 is unscaled
* @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
* @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
*/
@ -21694,9 +21694,9 @@ Network.prototype._createBezierNodes = function() {
* @private
*/
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
},
graph: {
network: {
Node: Node,
Edge: Edge,
Popup: Popup,
@ -25107,6 +25107,10 @@ var vis = {
Timeline: Timeline,
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,
Graph2d: Graph2d
};
@ -26729,7 +26733,7 @@ else {
})(this);
},{}],4:[function(require,module,exports){
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
//! license : MIT
//! momentjs.com
@ -26741,7 +26745,7 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
************************************/
var moment,
VERSION = "2.7.0",
VERSION = "2.6.0",
// the global-scope this is NOT the global object in Node.js
globalScope = typeof global !== 'undefined' ? global : this,
oldGlobalMoment,
@ -26766,7 +26770,6 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
_f : null,
_l : null,
_strict : null,
_tzm : null,
_isUTC : null,
_offset : null, // optional. Combine with _isUTC
_pf : null,
@ -26875,16 +26878,6 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
// format function strings
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
ordinalizeTokens = 'DDD w W M D d'.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'];
// 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() {
// We need to deep clone this object, and es5 standard is not very
// helpful.
@ -27902,94 +27885,39 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
config._useUTC = true;
config._tzm = timezoneMinutesFromString(input);
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 'ww':
case 'W':
case 'WW':
case 'd':
case 'dd':
case 'ddd':
case 'dddd':
case 'e':
case 'E':
token = token.substr(0, 1);
/* falls through */
case 'gg':
case 'gggg':
case 'GG':
case 'GGGG':
case 'GGGGG':
token = token.substr(0, 2);
if (input) {
config._w = config._w || {};
config._w[token] = toInt(input);
config._w[token] = input;
}
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.
// the array should mirror the parameters below
// note: all values past the year are optional and will default to the lowest possible value.
// [year, month, day , hour, minute, second, millisecond]
function dateFromConfig(config) {
var i, date, input = [], currentDate, yearToUse;
var i, date, input = [], currentDate,
yearToUse, fixYear, w, temp, lang, weekday, week;
if (config._d) {
return;
@ -27999,12 +27927,39 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
//compute day of the year from weeks and weekdays
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 (config._dayOfYear) {
yearToUse = dfl(config._a[YEAR], currentDate[YEAR]);
yearToUse = config._a[YEAR] == null ? currentDate[YEAR] : config._a[YEAR];
if (config._dayOfYear > daysInYear(yearToUse)) {
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];
}
// 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);
// 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) {
@ -28074,11 +28028,6 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
// date from string and format string
function makeDateFromStringAndFormat(config) {
if (config._f === moment.ISO_8601) {
parseISO(config);
return;
}
config._a = [];
config._pf.empty = true;
@ -28191,7 +28140,7 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
}
// date from iso format
function parseISO(config) {
function makeDateFromString(config) {
var i, l,
string = config._i,
match = isoRegex.exec(string);
@ -28215,16 +28164,8 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
config._f += "Z";
}
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);
}
}
@ -28305,15 +28246,15 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
hours = round(minutes / 60),
days = round(hours / 24),
years = round(days / 365),
args = seconds < relativeTimeThresholds.s && ['s', seconds] ||
args = seconds < 45 && ['s', seconds] ||
minutes === 1 && ['m'] ||
minutes < relativeTimeThresholds.m && ['mm', minutes] ||
minutes < 45 && ['mm', minutes] ||
hours === 1 && ['h'] ||
hours < relativeTimeThresholds.h && ['hh', hours] ||
hours < 22 && ['hh', hours] ||
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];
args[2] = withoutSuffix;
args[3] = milliseconds > 0;
@ -28359,7 +28300,6 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
function dayOfYearFromWeeks(year, week, weekday, firstDayOfWeekOfYear, firstDayOfWeek) {
var d = makeUTCDate(year, 0, 1).getUTCDay(), daysToAdd, dayOfYear;
d = d === 0 ? 7 : d;
weekday = weekday != null ? weekday : firstDayOfWeek;
daysToAdd = firstDayOfWeek - d + (d > firstDayOfWeekOfYear ? 7 : 0) - (d < firstDayOfWeek ? 7 : 0);
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);
});
// 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
moment.utc = function (input, format, lang, strict) {
var c;
@ -28565,9 +28471,6 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
// default format
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),
// so we can properly clone ourselves.
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.
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
// no arguments are passed in, it will simply return the current global
// language key.
@ -28740,9 +28634,7 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
add : function (input, val) {
var dur;
// 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);
} else {
dur = moment.duration(input, val);
@ -28754,9 +28646,7 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
subtract : function (input, val) {
var dur;
// 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);
} else {
dur = moment.duration(input, val);
@ -28807,11 +28697,10 @@ var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ?
return this.from(moment(), withoutSuffix);
},
calendar : function (time) {
calendar : function () {
// We want to compare the start of today, vs this.
// 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),
format = diff < -6 ? 'sameElse' :
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);
},
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
// 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();">
<div id="container">
<h1>Graph documentation</h1>
<h1>Network documentation</h1>
<h2 id="Overview">Overview</h2>
<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,
styles, colors, sizes, images, and more.
</p>
<p>
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.
</p>
@ -35,7 +35,7 @@
</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.
</p>
@ -78,7 +78,7 @@
<h2 id="Example">Example</h2>
<p>
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.
</p>
@ -90,7 +90,7 @@
<pre class="prettyprint lang-html">&lt;!doctype html&gt;
&lt;html&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;/head&gt;
@ -127,7 +127,7 @@
width: '400px',
height: '400px'
};
var network = new vis.Graph(container, data, options);
var network = new vis.Network(container, data, options);
&lt;/script&gt;
&lt;/body&gt;
@ -146,8 +146,8 @@
</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:
<ul>
@ -173,7 +173,7 @@ The constructor accepts three parameters:
<h2 id="Data_format">Data format</h2>
<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.
The following properties are supported in the <code>data</code> object:
</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>
<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>.
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.
@ -731,7 +731,7 @@ var data = {
};
// create a network
var network = new vis.Graph(container, data);
var network = new vis.Network(container, data);
</pre>
@ -853,7 +853,7 @@ var options = {
<td>Object</td>
<td>none</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>
</tr>
<tr>
@ -943,7 +943,7 @@ var options = {
<h3 id="Nodes_configuration">Nodes configuration</h3>
<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>
@ -1121,7 +1121,7 @@ var options = {
<h3 id="Edges_configuration">Edges configuration</h3>
<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>
@ -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.
<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>.
</p>
@ -1860,7 +1860,7 @@ var options: {
<td>clusterLevelDifference</td>
<td>Number</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.
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
@ -1870,7 +1870,7 @@ var options: {
<h3 id="Navigation_controls">Navigation controls</h3>
<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.
The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
</p>
@ -2126,7 +2126,7 @@ var options: {
<h2 id="Methods">Methods</h2>
<p>
Graph supports the following methods.
Network supports the following methods.
</p>
<table>
@ -2256,7 +2256,7 @@ var options: {
<h2 id="Events">Events</h2>
<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.
</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:
<ul>
<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>
<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>
<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 type="text/javascript" src="../../../dist/vis.js"></script>
@ -65,17 +65,17 @@
<script type="text/javascript">
var container = document.getElementById('mygraph');
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 () {
$.ajax({
type: "GET",
url: url.value
}).done(function(data) {
graph.setOptions({
network.setOptions({
stabilize: false
});
graph.setData( {
network.setData( {
dot: data
});
});

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

@ -24,7 +24,7 @@ var vis = {
TimeAxis: TimeAxis
},
graph: {
network: {
Node: Node,
Edge: Edge,
Popup: Popup,
@ -34,6 +34,10 @@ var vis = {
Timeline: Timeline,
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,
Graph2d: Graph2d
};

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

@ -8,16 +8,16 @@
* to (number), label (string, color (string),
* width (number), style (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.
* @param {Object} constants An object with default values for
* 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
this.widthMin = constants.edges.widthMin;
@ -156,8 +156,8 @@ Edge.prototype.setProperties = function(properties, constants) {
Edge.prototype.connect = function () {
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);
if (this.connected) {
@ -317,14 +317,14 @@ Edge.prototype._drawLine = function(ctx) {
*/
Edge.prototype._getLineWidth = function() {
if (this.selected == true) {
return Math.min(this.widthSelected, this.widthMax)*this.graphScaleInv;
return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
}
else {
if (this.hover == true) {
return Math.min(this.hoverWidth, this.widthMax)*this.graphScaleInv;
return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
}
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
*/
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
* 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
* 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.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.initializing = true;
@ -202,11 +202,11 @@ function Network (container, data, options) {
// Node variables
var graph = this;
var network = this;
this.groups = new Groups(); // object with groups
this.images = new Images(); // object with images
this.images.setOnloadCallback(function () {
graph._redraw();
network._redraw();
});
// 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
this.nodesListeners = {
'add': function (event, params) {
graph._addNodes(params.items);
graph.start();
network._addNodes(params.items);
network.start();
},
'update': function (event, params) {
graph._updateNodes(params.items);
graph.start();
network._updateNodes(params.items);
network.start();
},
'remove': function (event, params) {
graph._removeNodes(params.items);
graph.start();
network._removeNodes(params.items);
network.start();
}
};
this.edgesListeners = {
'add': function (event, params) {
graph._addEdges(params.items);
graph.start();
network._addEdges(params.items);
network.start();
},
'update': function (event, params) {
graph._updateEdges(params.items);
graph.start();
network._updateEdges(params.items);
network.start();
},
'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
*/
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};
*/
Network.prototype._centerGraph = function(range) {
Network.prototype._centerNetwork = function(range) {
var center = this._findCenter(range);
center.x *= this.scale;
@ -446,7 +446,7 @@ Network.prototype.zoomExtent = function(initialZoom, disableStart) {
this._setScale(zoomLevel);
this._centerGraph(range);
this._centerNetwork(range);
if (disableStart == false) {
this.moving = true;
this.start();
@ -784,7 +784,7 @@ Network.prototype._create = function () {
this.frame.style.position = 'relative';
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.style.position = 'relative';
this.frame.appendChild(this.frame.canvas);
@ -995,7 +995,7 @@ Network.prototype._handleOnDrag = function(event) {
}
else {
if (this.constants.dragGraph == true) {
// move the graph
// move the network
var diffX = pointer.x - this.drag.pointer.x;
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 {{x: Number, y: Number}} pointer Position on screen
* @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,
* 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'
* or '50%')
* @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.
* @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.
*/
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
*/
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} offsetY Vertical offset
* @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
* @private
*/
@ -1767,7 +1767,7 @@ Network.prototype._getTranslation = function() {
};
/**
* Scale the graph
* Scale the network
* @param {Number} scale Scaling factor 1.0 is unscaled
* @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
* @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
*/
@ -2227,9 +2227,9 @@ Network.prototype._createBezierNodes = function() {
* @private
*/
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.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.canvasBottomRight = {"x": 300, "y": 300};
this.parentEdgeId = null;
@ -525,7 +525,7 @@ Node.prototype._drawImage = function (ctx) {
// draw the shade
if (this.clusterSize > 1) {
var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
lineWidth *= this.graphScaleInv;
lineWidth *= this.networkScaleInv;
lineWidth = Math.min(0.2 * this.width,lineWidth);
ctx.globalAlpha = 0.5;
@ -575,14 +575,14 @@ Node.prototype._drawBox = function (ctx) {
// draw the outer border
if (this.clusterSize > 1) {
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.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.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.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
@ -624,14 +624,14 @@ Node.prototype._drawDatabase = function (ctx) {
// draw the outer border
if (this.clusterSize > 1) {
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.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.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.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
if (this.clusterSize > 1) {
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.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
ctx.stroke();
}
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.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
if (this.clusterSize > 1) {
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.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
ctx.stroke();
}
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.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
if (this.clusterSize > 1) {
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[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
ctx.stroke();
}
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.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) {
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.fillStyle = this.fontColor || "black";
ctx.textAlign = align || "center";
@ -892,10 +892,10 @@ Node.prototype.getTextSize = function(ctx) {
*/
Node.prototype.inArea = function() {
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 {
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
*
* @param scale
@ -922,21 +922,21 @@ Node.prototype.inView = function() {
* @param 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.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
*/
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.
*
* 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
* 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.
* @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.
* @private

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

@ -1,8 +1,8 @@
/**
* 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.
*
* 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') {

Loading…
Cancel
Save