Browse Source

Updated vis overview image

css_transitions
josdejong 11 years ago
parent
commit
51ba149803
7 changed files with 106 additions and 71 deletions
  1. +6
    -0
      docs/css/style.css
  2. BIN
      docs/img/vis_overview.odg
  3. BIN
      docs/img/vis_overview.png
  4. +7
    -0
      docs/index.html
  5. +28
    -29
      src/graph/Graph.js
  6. +64
    -41
      vis.js
  7. +1
    -1
      vis.min.js

+ 6
- 0
docs/css/style.css View File

@ -39,13 +39,19 @@ h3 {
font-size: 140%; font-size: 140%;
} }
a > img {
border: none;
}
a { a {
color: #2B7CE9; color: #2B7CE9;
text-decoration: none; text-decoration: none;
} }
a:visited { a:visited {
color: #2E60A4; color: #2E60A4;
} }
a:hover { a:hover {
color: red; color: red;
text-decoration: underline; text-decoration: underline;

BIN
docs/img/vis_overview.odg View File


BIN
docs/img/vis_overview.png View File

Before After
Width: 960  |  Height: 912  |  Size: 64 KiB Width: 768  |  Height: 912  |  Size: 48 KiB

+ 7
- 0
docs/index.html View File

@ -55,6 +55,13 @@
</li> </li>
</ul> </ul>
<div style="text-align: center;">
<a href="img/vis_overview.png" target="_blank">
<img src="img/vis_overview.png" style="width: 250px; "/><br>
(click for a larger view)
</a>
</div>
<h2 id="Install">Install</h2> <h2 id="Install">Install</h2>

+ 28
- 29
src/graph/Graph.js View File

@ -163,7 +163,6 @@ Graph.prototype.setData = function(data) {
this._setEdges(data && data.edges); this._setEdges(data && data.edges);
} }
// find a stable position or start animating to a stable position // find a stable position or start animating to a stable position
if (this.stabilize) { if (this.stabilize) {
this._doStabilize(); this._doStabilize();
@ -251,7 +250,7 @@ Graph.prototype.setOptions = function (options) {
/** /**
* fire an event * fire an event
* @param {String} event The name of an event, for example "select"
* @param {String} event The name of an event, for example 'select'
* @param {Object} params Optional object with event parameters * @param {Object} params Optional object with event parameters
* @private * @private
*/ */
@ -273,21 +272,21 @@ Graph.prototype._create = function () {
this.containerElement.removeChild(this.containerElement.firstChild); this.containerElement.removeChild(this.containerElement.firstChild);
} }
this.frame = document.createElement("div");
this.frame.className = "graph-frame";
this.frame.style.position = "relative";
this.frame.style.overflow = "hidden";
this.frame = document.createElement('div');
this.frame.className = 'graph-frame';
this.frame.style.position = 'relative';
this.frame.style.overflow = 'hidden';
// create the graph canvas (HTML canvas element) // create the graph canvas (HTML canvas element)
this.frame.canvas = document.createElement( "canvas" );
this.frame.canvas.style.position = "relative";
this.frame.canvas = document.createElement( 'canvas' );
this.frame.canvas.style.position = 'relative';
this.frame.appendChild(this.frame.canvas); this.frame.appendChild(this.frame.canvas);
if (!this.frame.canvas.getContext) { if (!this.frame.canvas.getContext) {
var noCanvas = document.createElement( "DIV" );
noCanvas.style.color = "red";
noCanvas.style.fontWeight = "bold" ;
noCanvas.style.padding = "10px";
noCanvas.innerHTML = "Error: your browser does not support HTML canvas";
var noCanvas = document.createElement( 'DIV' );
noCanvas.style.color = 'red';
noCanvas.style.fontWeight = 'bold' ;
noCanvas.style.padding = '10px';
noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
this.frame.canvas.appendChild(noCanvas); this.frame.canvas.appendChild(noCanvas);
} }
@ -877,7 +876,7 @@ Graph.prototype.setSelection = function(selection) {
var i, iMax, id; var i, iMax, id;
if (!selection || (selection.length == undefined)) if (!selection || (selection.length == undefined))
throw "Selection must be an array with ids";
throw 'Selection must be an array with ids';
// first unselect any selected node // first unselect any selected node
for (i = 0, iMax = this.selection.length; i < iMax; i++) { for (i = 0, iMax = this.selection.length; i < iMax; i++) {
@ -1000,17 +999,17 @@ Graph.prototype._getConnectionCount = function(level) {
/** /**
* Set a new size for the graph * Set a new size for the graph
* @param {string} width Width in pixels or percentage (for example "800px"
* or "50%")
* @param {string} height Height in pixels or percentage (for example "400px"
* or "30%")
* @param {string} width Width in pixels or percentage (for example '800px'
* or '50%')
* @param {string} height Height in pixels or percentage (for example '400px'
* or '30%')
*/ */
Graph.prototype.setSize = function(width, height) { Graph.prototype.setSize = function(width, height) {
this.frame.style.width = width; this.frame.style.width = width;
this.frame.style.height = height; this.frame.style.height = height;
this.frame.canvas.style.width = "100%";
this.frame.canvas.style.height = "100%";
this.frame.canvas.style.width = '100%';
this.frame.canvas.style.height = '100%';
this.frame.canvas.width = this.frame.canvas.clientWidth; this.frame.canvas.width = this.frame.canvas.clientWidth;
this.frame.canvas.height = this.frame.canvas.clientHeight; this.frame.canvas.height = this.frame.canvas.clientHeight;
@ -1337,7 +1336,7 @@ Graph.prototype.redraw = function() {
* @private * @private
*/ */
Graph.prototype._redraw = function() { Graph.prototype._redraw = function() {
var ctx = this.frame.canvas.getContext("2d");
var ctx = this.frame.canvas.getContext('2d');
// clear the canvas // clear the canvas
var w = this.frame.canvas.width; var w = this.frame.canvas.width;
@ -1365,8 +1364,8 @@ Graph.prototype._redraw = function() {
Graph.prototype._setTranslation = function(offsetX, offsetY) { Graph.prototype._setTranslation = function(offsetX, offsetY) {
if (this.translation === undefined) { if (this.translation === undefined) {
this.translation = { this.translation = {
"x": 0,
"y": 0
x: 0,
y: 0
}; };
} }
@ -1385,8 +1384,8 @@ Graph.prototype._setTranslation = function(offsetX, offsetY) {
*/ */
Graph.prototype._getTranslation = function() { Graph.prototype._getTranslation = function() {
return { return {
"x": this.translation.x,
"y": this.translation.y
x: this.translation.x,
y: this.translation.y
}; };
}; };
@ -1449,7 +1448,7 @@ Graph.prototype._yToCanvas = function(y) {
/** /**
* Redraw all nodes * Redraw all nodes
* The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
* The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
* @param {CanvasRenderingContext2D} ctx * @param {CanvasRenderingContext2D} ctx
* @private * @private
*/ */
@ -1476,7 +1475,7 @@ Graph.prototype._drawNodes = function(ctx) {
/** /**
* Redraw all edges * Redraw all edges
* The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
* The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
* @param {CanvasRenderingContext2D} ctx * @param {CanvasRenderingContext2D} ctx
* @private * @private
*/ */
@ -1512,7 +1511,7 @@ Graph.prototype._doStabilize = function() {
var end = new Date(); var end = new Date();
// console.log("Stabilized in " + (end-start) + " ms, " + count + " iterations" ); // TODO: cleanup
// console.log('Stabilized in ' + (end-start) + ' ms, ' + count + ' iterations' ); // TODO: cleanup
}; };
/** /**
@ -1669,7 +1668,7 @@ Graph.prototype._calculateForces = function() {
/** /**
* Check if any of the nodes is still moving * Check if any of the nodes is still moving
* @param {number} vmin the minimum velocity considered as "moving"
* @param {number} vmin the minimum velocity considered as 'moving'
* @return {boolean} true if moving, false if non of the nodes is moving * @return {boolean} true if moving, false if non of the nodes is moving
* @private * @private
*/ */

+ 64
- 41
vis.js View File

@ -13016,7 +13016,6 @@ Graph.prototype.setData = function(data) {
this._setEdges(data && data.edges); this._setEdges(data && data.edges);
} }
// find a stable position or start animating to a stable position // find a stable position or start animating to a stable position
if (this.stabilize) { if (this.stabilize) {
this._doStabilize(); this._doStabilize();
@ -13104,7 +13103,7 @@ Graph.prototype.setOptions = function (options) {
/** /**
* fire an event * fire an event
* @param {String} event The name of an event, for example "select"
* @param {String} event The name of an event, for example 'select'
* @param {Object} params Optional object with event parameters * @param {Object} params Optional object with event parameters
* @private * @private
*/ */
@ -13126,21 +13125,21 @@ Graph.prototype._create = function () {
this.containerElement.removeChild(this.containerElement.firstChild); this.containerElement.removeChild(this.containerElement.firstChild);
} }
this.frame = document.createElement("div");
this.frame.className = "graph-frame";
this.frame.style.position = "relative";
this.frame.style.overflow = "hidden";
this.frame = document.createElement('div');
this.frame.className = 'graph-frame';
this.frame.style.position = 'relative';
this.frame.style.overflow = 'hidden';
// create the graph canvas (HTML canvas element) // create the graph canvas (HTML canvas element)
this.frame.canvas = document.createElement( "canvas" );
this.frame.canvas.style.position = "relative";
this.frame.canvas = document.createElement( 'canvas' );
this.frame.canvas.style.position = 'relative';
this.frame.appendChild(this.frame.canvas); this.frame.appendChild(this.frame.canvas);
if (!this.frame.canvas.getContext) { if (!this.frame.canvas.getContext) {
var noCanvas = document.createElement( "DIV" );
noCanvas.style.color = "red";
noCanvas.style.fontWeight = "bold" ;
noCanvas.style.padding = "10px";
noCanvas.innerHTML = "Error: your browser does not support HTML canvas";
var noCanvas = document.createElement( 'DIV' );
noCanvas.style.color = 'red';
noCanvas.style.fontWeight = 'bold' ;
noCanvas.style.padding = '10px';
noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
this.frame.canvas.appendChild(noCanvas); this.frame.canvas.appendChild(noCanvas);
} }
@ -13171,8 +13170,8 @@ Graph.prototype._create = function () {
* @private * @private
*/ */
Graph.prototype._getNodeAt = function (pointer) { Graph.prototype._getNodeAt = function (pointer) {
var x = this._xToCanvas(pointer.x);
var y = this._yToCanvas(pointer.y);
var x = this._canvasToX(pointer.x);
var y = this._canvasToY(pointer.y);
var obj = { var obj = {
left: x, left: x,
@ -13281,11 +13280,11 @@ Graph.prototype._onDrag = function (event) {
var node = s.node; var node = s.node;
if (!s.xFixed) { if (!s.xFixed) {
node.x = me._xToCanvas(me._canvasToX(s.x) + deltaX);
node.x = me._canvasToX(me._xToCanvas(s.x) + deltaX);
} }
if (!s.yFixed) { if (!s.yFixed) {
node.y = me._yToCanvas(me._canvasToY(s.y) + deltaY);
node.y = me._canvasToY(me._yToCanvas(s.y) + deltaY);
} }
}); });
@ -13509,10 +13508,10 @@ Graph.prototype._onMouseMoveTitle = function (event) {
*/ */
Graph.prototype._checkShowPopup = function (pointer) { Graph.prototype._checkShowPopup = function (pointer) {
var obj = { var obj = {
left: this._xToCanvas(pointer.x),
top: this._yToCanvas(pointer.y),
right: this._xToCanvas(pointer.x),
bottom: this._yToCanvas(pointer.y)
left: this._canvasToX(pointer.x),
top: this._canvasToY(pointer.y),
right: this._canvasToX(pointer.x),
bottom: this._canvasToY(pointer.y)
}; };
var id; var id;
@ -13730,7 +13729,7 @@ Graph.prototype.setSelection = function(selection) {
var i, iMax, id; var i, iMax, id;
if (!selection || (selection.length == undefined)) if (!selection || (selection.length == undefined))
throw "Selection must be an array with ids";
throw 'Selection must be an array with ids';
// first unselect any selected node // first unselect any selected node
for (i = 0, iMax = this.selection.length; i < iMax; i++) { for (i = 0, iMax = this.selection.length; i < iMax; i++) {
@ -13853,17 +13852,17 @@ Graph.prototype._getConnectionCount = function(level) {
/** /**
* Set a new size for the graph * Set a new size for the graph
* @param {string} width Width in pixels or percentage (for example "800px"
* or "50%")
* @param {string} height Height in pixels or percentage (for example "400px"
* or "30%")
* @param {string} width Width in pixels or percentage (for example '800px'
* or '50%')
* @param {string} height Height in pixels or percentage (for example '400px'
* or '30%')
*/ */
Graph.prototype.setSize = function(width, height) { Graph.prototype.setSize = function(width, height) {
this.frame.style.width = width; this.frame.style.width = width;
this.frame.style.height = height; this.frame.style.height = height;
this.frame.canvas.style.width = "100%";
this.frame.canvas.style.height = "100%";
this.frame.canvas.style.width = '100%';
this.frame.canvas.style.height = '100%';
this.frame.canvas.width = this.frame.canvas.clientWidth; this.frame.canvas.width = this.frame.canvas.clientWidth;
this.frame.canvas.height = this.frame.canvas.clientHeight; this.frame.canvas.height = this.frame.canvas.clientHeight;
@ -14190,7 +14189,7 @@ Graph.prototype.redraw = function() {
* @private * @private
*/ */
Graph.prototype._redraw = function() { Graph.prototype._redraw = function() {
var ctx = this.frame.canvas.getContext("2d");
var ctx = this.frame.canvas.getContext('2d');
// clear the canvas // clear the canvas
var w = this.frame.canvas.width; var w = this.frame.canvas.width;
@ -14218,8 +14217,8 @@ Graph.prototype._redraw = function() {
Graph.prototype._setTranslation = function(offsetX, offsetY) { Graph.prototype._setTranslation = function(offsetX, offsetY) {
if (this.translation === undefined) { if (this.translation === undefined) {
this.translation = { this.translation = {
"x": 0,
"y": 0
x: 0,
y: 0
}; };
} }
@ -14238,8 +14237,8 @@ Graph.prototype._setTranslation = function(offsetX, offsetY) {
*/ */
Graph.prototype._getTranslation = function() { Graph.prototype._getTranslation = function() {
return { return {
"x": this.translation.x,
"y": this.translation.y
x: this.translation.x,
y: this.translation.y
}; };
}; };
@ -14260,25 +14259,49 @@ Graph.prototype._getScale = function() {
return this.scale; return this.scale;
}; };
Graph.prototype._xToCanvas = function(x) {
/**
* Convert a horizontal point on the HTML canvas to the x-value of the model
* @param {number} x
* @returns {number}
* @private
*/
Graph.prototype._canvasToX = function(x) {
return (x - this.translation.x) / this.scale; return (x - this.translation.x) / this.scale;
}; };
Graph.prototype._canvasToX = function(x) {
/**
* Convert an x-value in the model to a horizontal point on the HTML canvas
* @param {number} x
* @returns {number}
* @private
*/
Graph.prototype._xToCanvas = function(x) {
return x * this.scale + this.translation.x; return x * this.scale + this.translation.x;
}; };
Graph.prototype._yToCanvas = function(y) {
/**
* Convert a vertical point on the HTML canvas to the y-value of the model
* @param {number} y
* @returns {number}
* @private
*/
Graph.prototype._canvasToY = function(y) {
return (y - this.translation.y) / this.scale; return (y - this.translation.y) / this.scale;
}; };
Graph.prototype._canvasToY = function(y) {
/**
* Convert an y-value in the model to a vertical point on the HTML canvas
* @param {number} y
* @returns {number}
* @private
*/
Graph.prototype._yToCanvas = function(y) {
return y * this.scale + this.translation.y ; return y * this.scale + this.translation.y ;
}; };
/** /**
* Redraw all nodes * Redraw all nodes
* The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
* The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
* @param {CanvasRenderingContext2D} ctx * @param {CanvasRenderingContext2D} ctx
* @private * @private
*/ */
@ -14305,7 +14328,7 @@ Graph.prototype._drawNodes = function(ctx) {
/** /**
* Redraw all edges * Redraw all edges
* The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
* The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
* @param {CanvasRenderingContext2D} ctx * @param {CanvasRenderingContext2D} ctx
* @private * @private
*/ */
@ -14341,7 +14364,7 @@ Graph.prototype._doStabilize = function() {
var end = new Date(); var end = new Date();
// console.log("Stabilized in " + (end-start) + " ms, " + count + " iterations" ); // TODO: cleanup
// console.log('Stabilized in ' + (end-start) + ' ms, ' + count + ' iterations' ); // TODO: cleanup
}; };
/** /**
@ -14498,7 +14521,7 @@ Graph.prototype._calculateForces = function() {
/** /**
* Check if any of the nodes is still moving * Check if any of the nodes is still moving
* @param {number} vmin the minimum velocity considered as "moving"
* @param {number} vmin the minimum velocity considered as 'moving'
* @return {boolean} true if moving, false if non of the nodes is moving * @return {boolean} true if moving, false if non of the nodes is moving
* @private * @private
*/ */

+ 1
- 1
vis.min.js
File diff suppressed because it is too large
View File


Loading…
Cancel
Save