From 7f50034dd2f8a81110ebf39432a49a31f4175f1e Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Thu, 6 Mar 2014 14:42:37 +0100 Subject: [PATCH] Changed navigation css per #51, added stabilizationIterations option to graph and docs per #52 --- dist/vis.css | 28 +++++++++---------- dist/vis.js | 27 ++++++++++++------ docs/graph.html | 8 ++++++ src/graph/Graph.js | 17 +++++++---- src/graph/css/graph-navigation.css | 28 +++++++++---------- src/graph/graphMixins/ClusterMixin.js | 2 +- .../graphMixins/HierarchicalLayoutMixin.js | 2 +- src/graph/graphMixins/NavigationMixin.js | 4 ++- 8 files changed, 71 insertions(+), 45 deletions(-) diff --git a/dist/vis.css b/dist/vis.css index 6c5a0e44..4cae11d0 100644 --- a/dist/vis.css +++ b/dist/vis.css @@ -428,36 +428,36 @@ div.graph-navigation:active { div.graph-navigation.up { background-image: url("img/graph/upArrow.png"); - margin-top:520px; - margin-left:55px; + bottom:50px; + left:55px; } div.graph-navigation.down { background-image: url("img/graph/downArrow.png"); - margin-top:560px; - margin-left:55px; + bottom:10px; + left:55px; } div.graph-navigation.left { background-image: url("img/graph/leftArrow.png"); - margin-top:560px; - margin-left:15px; + bottom:10px; + left:15px; } div.graph-navigation.right { background-image: url("img/graph/rightArrow.png"); - margin-top:560px; - margin-left:95px; + bottom:10px; + left:95px; } div.graph-navigation.zoomIn { background-image: url("img/graph/plus.png"); - margin-top:560px; - margin-left:555px; + bottom:10px; + right:15px; } div.graph-navigation.zoomOut { background-image: url("img/graph/minus.png"); - margin-top:560px; - margin-left:515px; + bottom:10px; + right:55px; } div.graph-navigation.zoomExtends { background-image: url("img/graph/zoomExtends.png"); - margin-top:520px; - margin-left:555px; + bottom:50px; + right:15px; } diff --git a/dist/vis.js b/dist/vis.js index b14dee68..de034448 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -5,7 +5,7 @@ * A dynamic, browser-based visualization library. * * @version 0.7.0-SNAPSHOT - * @date 2014-03-05 + * @date 2014-03-06 * * @license * Copyright (C) 2011-2014 Almende B.V, http://almende.com @@ -12507,7 +12507,7 @@ var HierarchicalLayoutMixin = { } // stabilize the system after positioning. This function calls zoomExtent. - this._doStabilize(); + this._stabilize(); }, @@ -13714,7 +13714,7 @@ var ClusterMixin = { // this is called here because if clusterin is disabled, the start and stabilize are called in // the setData function. if (this.stabilize) { - this._doStabilize(); + this._stabilize(); } this.start(); }, @@ -15423,6 +15423,9 @@ var NavigationMixin = { this.navigationDivs['wrapper'] = document.createElement('div'); this.navigationDivs['wrapper'].id = "graph-navigation_wrapper"; + this.navigationDivs['wrapper'].style.position = "absolute"; + this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px"; + this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px"; this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame); for (var i = 0; i < navigationDivs.length; i++) { @@ -15474,7 +15477,6 @@ var NavigationMixin = { * @private */ _moveUp : function(event) { - console.log("here") this.yIncrement = this.constants.keyboard.speed.y; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event); @@ -15914,7 +15916,7 @@ function Graph (container, data, options) { smoothCurves: true, maxVelocity: 10, minVelocity: 0.1, // px/s - maxIterations: 1000 // maximum number of iteration to stabilize + stabilizationIterations: 1000 // maximum number of iteration to stabilize }; this.editMode = this.constants.dataManipulation.initiallyVisible; @@ -16220,7 +16222,7 @@ Graph.prototype.setData = function(data, disableStart) { if (!disableStart) { // find a stable position or start animating to a stable position if (this.stabilize) { - this._doStabilize(); + this._stabilize(); } this.start(); } @@ -16240,6 +16242,7 @@ Graph.prototype.setOptions = function (options) { if (options.selectable !== undefined) {this.selectable = options.selectable;} if (options.smoothCurves !== undefined) {this.constants.smoothCurves = options.smoothCurves;} if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;} + if (options.stabilizationIterations !== undefined) {this.constants.stabilizationIterations = options.stabilizationIterations;} if (options.onAdd) { this.triggerFunctions.add = options.onAdd; @@ -16943,7 +16946,13 @@ Graph.prototype.setSize = function(width, height) { this.frame.canvas.height = this.frame.canvas.clientHeight; if (this.manipulationDiv !== undefined) { - this.manipulationDiv.style.width = this.frame.canvas.clientWidth; + this.manipulationDiv.style.width = this.frame.canvas.clientWidth + "px"; + } + if (this.navigationDivs !== undefined) { + if (this.navigationDivs['wrapper'] !== undefined) { + this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px"; + this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px"; + } } this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height}); @@ -17461,10 +17470,10 @@ Graph.prototype._drawEdges = function(ctx) { * Find a stable position for all nodes * @private */ -Graph.prototype._doStabilize = function() { +Graph.prototype._stabilize = function() { // find stable position var count = 0; - while (this.moving && count < this.constants.maxIterations) { + while (this.moving && count < this.constants.stabilizationIterations) { this._physicsTick(); count++; } diff --git a/docs/graph.html b/docs/graph.html index 1ef56c14..236a82c5 100644 --- a/docs/graph.html +++ b/docs/graph.html @@ -774,6 +774,14 @@ var options = { the nodes move to a stabe position visibly in an animated way. + + stabilizationIterations + Number + 1000 + If stabilize is set to true, this number is the (maximum) amount of physics steps the stabilization process takes + before showing the result. If your simulation takes too long to stabilize, this number can be reduced. On the other hand, if your graph is not stabilized after loading, this number can be increased. + + width String diff --git a/src/graph/Graph.js b/src/graph/Graph.js index 7e91342b..2c84d312 100644 --- a/src/graph/Graph.js +++ b/src/graph/Graph.js @@ -145,7 +145,7 @@ function Graph (container, data, options) { smoothCurves: true, maxVelocity: 10, minVelocity: 0.1, // px/s - maxIterations: 1000 // maximum number of iteration to stabilize + stabilizationIterations: 1000 // maximum number of iteration to stabilize }; this.editMode = this.constants.dataManipulation.initiallyVisible; @@ -451,7 +451,7 @@ Graph.prototype.setData = function(data, disableStart) { if (!disableStart) { // find a stable position or start animating to a stable position if (this.stabilize) { - this._doStabilize(); + this._stabilize(); } this.start(); } @@ -471,6 +471,7 @@ Graph.prototype.setOptions = function (options) { if (options.selectable !== undefined) {this.selectable = options.selectable;} if (options.smoothCurves !== undefined) {this.constants.smoothCurves = options.smoothCurves;} if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;} + if (options.stabilizationIterations !== undefined) {this.constants.stabilizationIterations = options.stabilizationIterations;} if (options.onAdd) { this.triggerFunctions.add = options.onAdd; @@ -1174,7 +1175,13 @@ Graph.prototype.setSize = function(width, height) { this.frame.canvas.height = this.frame.canvas.clientHeight; if (this.manipulationDiv !== undefined) { - this.manipulationDiv.style.width = this.frame.canvas.clientWidth; + this.manipulationDiv.style.width = this.frame.canvas.clientWidth + "px"; + } + if (this.navigationDivs !== undefined) { + if (this.navigationDivs['wrapper'] !== undefined) { + this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px"; + this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px"; + } } this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height}); @@ -1692,10 +1699,10 @@ Graph.prototype._drawEdges = function(ctx) { * Find a stable position for all nodes * @private */ -Graph.prototype._doStabilize = function() { +Graph.prototype._stabilize = function() { // find stable position var count = 0; - while (this.moving && count < this.constants.maxIterations) { + while (this.moving && count < this.constants.stabilizationIterations) { this._physicsTick(); count++; } diff --git a/src/graph/css/graph-navigation.css b/src/graph/css/graph-navigation.css index 8c610d4c..cc402691 100644 --- a/src/graph/css/graph-navigation.css +++ b/src/graph/css/graph-navigation.css @@ -27,36 +27,36 @@ div.graph-navigation:active { div.graph-navigation.up { background-image: url("img/graph/upArrow.png"); - margin-top:520px; - margin-left:55px; + bottom:50px; + left:55px; } div.graph-navigation.down { background-image: url("img/graph/downArrow.png"); - margin-top:560px; - margin-left:55px; + bottom:10px; + left:55px; } div.graph-navigation.left { background-image: url("img/graph/leftArrow.png"); - margin-top:560px; - margin-left:15px; + bottom:10px; + left:15px; } div.graph-navigation.right { background-image: url("img/graph/rightArrow.png"); - margin-top:560px; - margin-left:95px; + bottom:10px; + left:95px; } div.graph-navigation.zoomIn { background-image: url("img/graph/plus.png"); - margin-top:560px; - margin-left:555px; + bottom:10px; + right:15px; } div.graph-navigation.zoomOut { background-image: url("img/graph/minus.png"); - margin-top:560px; - margin-left:515px; + bottom:10px; + right:55px; } div.graph-navigation.zoomExtends { background-image: url("img/graph/zoomExtends.png"); - margin-top:520px; - margin-left:555px; + bottom:50px; + right:15px; } \ No newline at end of file diff --git a/src/graph/graphMixins/ClusterMixin.js b/src/graph/graphMixins/ClusterMixin.js index e20fa85c..39b6a34a 100644 --- a/src/graph/graphMixins/ClusterMixin.js +++ b/src/graph/graphMixins/ClusterMixin.js @@ -22,7 +22,7 @@ var ClusterMixin = { // this is called here because if clusterin is disabled, the start and stabilize are called in // the setData function. if (this.stabilize) { - this._doStabilize(); + this._stabilize(); } this.start(); }, diff --git a/src/graph/graphMixins/HierarchicalLayoutMixin.js b/src/graph/graphMixins/HierarchicalLayoutMixin.js index 9879daa3..9e208402 100644 --- a/src/graph/graphMixins/HierarchicalLayoutMixin.js +++ b/src/graph/graphMixins/HierarchicalLayoutMixin.js @@ -96,7 +96,7 @@ var HierarchicalLayoutMixin = { } // stabilize the system after positioning. This function calls zoomExtent. - this._doStabilize(); + this._stabilize(); }, diff --git a/src/graph/graphMixins/NavigationMixin.js b/src/graph/graphMixins/NavigationMixin.js index 96b9edb2..ab1ed784 100644 --- a/src/graph/graphMixins/NavigationMixin.js +++ b/src/graph/graphMixins/NavigationMixin.js @@ -30,6 +30,9 @@ var NavigationMixin = { this.navigationDivs['wrapper'] = document.createElement('div'); this.navigationDivs['wrapper'].id = "graph-navigation_wrapper"; + this.navigationDivs['wrapper'].style.position = "absolute"; + this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px"; + this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px"; this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame); for (var i = 0; i < navigationDivs.length; i++) { @@ -81,7 +84,6 @@ var NavigationMixin = { * @private */ _moveUp : function(event) { - console.log("here") this.yIncrement = this.constants.keyboard.speed.y; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event);