Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Commit

Permalink
Updated zoomExtent and added to methods as per #39, removed width pro…
Browse files Browse the repository at this point in the history 
…perty from zoom extent -> getrange. typos.
  • Loading branch information
@AlexDM0
AlexDM0 committed Feb 25, 2014
1 parent db77b1e commit 5262fa0
Show file tree
Hide file tree
Showing 7 changed files with 54 additions and 64 deletions.
53 changes: 24 additions & 29 deletions dist/vis.js
View file
Expand Up @@ -4,8 +4,8 @@
*
* A dynamic, browser-based visualization library.
*
* @version 0.5.1
* @date 2014-02-20
* @version @@version
* @date @@date
*
* @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com
Expand Down Expand Up @@ -12156,7 +12156,7 @@ var HierarchicalLayoutMixin = {
// if the user defined some levels but not all, alert and run without hierarchical layout
if (undefinedLevel == true && definedLevel == true) {
alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.")
this.zoomToFit(true,this.constants.clustering.enabled);
this.zoomExtent(true,this.constants.clustering.enabled);
if (!this.constants.clustering.enabled) {
this.start();
}
Expand Down Expand Up @@ -12204,24 +12204,8 @@ var HierarchicalLayoutMixin = {
}
}

// give the nodes a defined width so the zoomToFit can be used. This size is arbitrary.
for (nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
node = this.nodes[nodeId];
node.width = 100;
node.height = 100;
}
}

// stabilize the system after positioning. This function calls zoomToFit.
// stabilize the system after positioning. This function calls zoomExtent.
this._doStabilize();

// reset the arbitrary width and height we gave the nodes.
for (nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
this.nodes[nodeId]._reset();
}
}
},


Expand Down Expand Up @@ -15095,7 +15079,7 @@ var NavigationMixin = {

this.navigationDivs = {};
var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomToFit'];
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];

this.navigationDivs['wrapper'] = document.createElement('div');
this.navigationDivs['wrapper'].id = "graph-navigation_wrapper";
Expand Down Expand Up @@ -15727,7 +15711,9 @@ function Graph (container, data, options) {
}
else {
// zoom so all data will fit on the screen, if clustering is enabled, we do not want start to be called here.
this.zoomToFit(true,this.constants.clustering.enabled);
if (this.stabilize == false) {
this.zoomExtent(true,this.constants.clustering.enabled);
}
}


Expand Down Expand Up @@ -15773,10 +15759,10 @@ Graph.prototype._getRange = function() {
for (var nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
node = this.nodes[nodeId];
if (minX > (node.x - node.width)) {minX = node.x - node.width;}
if (maxX < (node.x + node.width)) {maxX = node.x + node.width;}
if (minY > (node.y - node.height)) {minY = node.y - node.height;}
if (maxY < (node.y + node.height)) {maxY = node.y + node.height;}
if (minX > (node.x)) {minX = node.x;}
if (maxX < (node.x)) {maxX = node.x;}
if (minY > (node.y)) {minY = node.y;}
if (maxY < (node.y)) {maxY = node.y;}
}
}
return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
Expand Down Expand Up @@ -15816,10 +15802,13 @@ Graph.prototype._centerGraph = function(range) {
*
* @param {Boolean} [initialZoom] | zoom based on fitted formula or range, true = fitted, default = false;
*/
Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
Graph.prototype.zoomExtent = function(initialZoom, disableStart) {
if (initialZoom === undefined) {
initialZoom = false;
}
if (disableStart === undefined) {
disableStart = false;
}

var range = this._getRange();
var zoomLevel;
Expand All @@ -15844,6 +15833,10 @@ Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
}
}

// correct for larger canvasses.
var factor = Math.min(this.frame.canvas.clientWidth / 600, this.frame.canvas.clientHeight / 600);
zoomLevel *= factor;
}
else {
var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1;
Expand All @@ -15859,10 +15852,12 @@ Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
zoomLevel = 1.0;
}



this.pinch.mousewheelScale = zoomLevel;
this._setScale(zoomLevel);
this._centerGraph(range);
if (disableStart == false || disableStart === undefined) {
if (disableStart == false) {
this.moving = true;
this.start();
}
Expand Down Expand Up @@ -17181,7 +17176,7 @@ Graph.prototype._doStabilize = function() {
count++;
}

this.zoomToFit(false,true);
this.zoomExtent(false,true);
};


Expand Down
14 changes: 7 additions & 7 deletions dist/vis.min.js
View file

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions docs/graph.html
View file
Expand Up @@ -1778,6 +1778,12 @@ <h2 id="Methods">Methods</h2>
or in percentages.</td>
</tr>

<tr>
<td>zoomExtent</td>
<td>none</td>
<td>Scales the graph so all the nodes are in center view.</td>
</tr>

</table>

<h2 id="Events">Events</h2>
Expand Down
2 changes: 1 addition & 1 deletion examples/graph/20_navigation.html
View file
Expand Up @@ -156,7 +156,7 @@ <h2>Navigation controls and keyboad navigation</h2>
<td><div class="table_content">Move right</div></td>
<td><div class="table_content">Zoom in</div></td>
<td><div class="table_content">Zoom out</div></td>
<td><div class="table_content">Zoom extends</div></td>
<td><div class="table_content">Zoom extent</div></td>
</tr>
</table>
<br />
Expand Down
21 changes: 13 additions & 8 deletions src/graph/Graph.js
View file
Expand Up @@ -243,7 +243,9 @@ function Graph (container, data, options) {
}
else {
// zoom so all data will fit on the screen, if clustering is enabled, we do not want start to be called here.
this.zoomToFit(true,this.constants.clustering.enabled);
if (this.stabilize == false) {
this.zoomExtent(true,this.constants.clustering.enabled);
}
}


Expand Down Expand Up @@ -289,10 +291,10 @@ Graph.prototype._getRange = function() {
for (var nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
node = this.nodes[nodeId];
if (minX > (node.x - node.width)) {minX = node.x - node.width;}
if (maxX < (node.x + node.width)) {maxX = node.x + node.width;}
if (minY > (node.y - node.height)) {minY = node.y - node.height;}
if (maxY < (node.y + node.height)) {maxY = node.y + node.height;}
if (minX > (node.x)) {minX = node.x;}
if (maxX < (node.x)) {maxX = node.x;}
if (minY > (node.y)) {minY = node.y;}
if (maxY < (node.y)) {maxY = node.y;}
}
}
return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
Expand Down Expand Up @@ -332,10 +334,13 @@ Graph.prototype._centerGraph = function(range) {
*
* @param {Boolean} [initialZoom] | zoom based on fitted formula or range, true = fitted, default = false;
*/
Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
Graph.prototype.zoomExtent = function(initialZoom, disableStart) {
if (initialZoom === undefined) {
initialZoom = false;
}
if (disableStart === undefined) {
disableStart = false;
}

var range = this._getRange();
var zoomLevel;
Expand Down Expand Up @@ -384,7 +389,7 @@ Graph.prototype.zoomToFit = function(initialZoom, disableStart) {
this.pinch.mousewheelScale = zoomLevel;
this._setScale(zoomLevel);
this._centerGraph(range);
if (disableStart == false || disableStart === undefined) {
if (disableStart == false) {
this.moving = true;
this.start();
}
Expand Down Expand Up @@ -1703,7 +1708,7 @@ Graph.prototype._doStabilize = function() {
count++;
}

this.zoomToFit(false,true);
this.zoomExtent(false,true);
};


Expand Down
20 changes: 2 additions & 18 deletions src/graph/graphMixins/HierarchicalLayoutMixin.js
View file
Expand Up @@ -34,7 +34,7 @@ var HierarchicalLayoutMixin = {
// if the user defined some levels but not all, alert and run without hierarchical layout
if (undefinedLevel == true && definedLevel == true) {
alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.")
this.zoomToFit(true,this.constants.clustering.enabled);
this.zoomExtent(true,this.constants.clustering.enabled);
if (!this.constants.clustering.enabled) {
this.start();
}
Expand Down Expand Up @@ -82,24 +82,8 @@ var HierarchicalLayoutMixin = {
}
}

// give the nodes a defined width so the zoomToFit can be used. This size is arbitrary.
for (nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
node = this.nodes[nodeId];
node.width = 100;
node.height = 100;
}
}

// stabilize the system after positioning. This function calls zoomToFit.
// stabilize the system after positioning. This function calls zoomExtent.
this._doStabilize();

// reset the arbitrary width and height we gave the nodes.
for (nodeId in this.nodes) {
if (this.nodes.hasOwnProperty(nodeId)) {
this.nodes[nodeId]._reset();
}
}
},


Expand Down
2 changes: 1 addition & 1 deletion src/graph/graphMixins/NavigationMixin.js
View file
Expand Up @@ -26,7 +26,7 @@ var NavigationMixin = {

this.navigationDivs = {};
var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomToFit'];
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];

this.navigationDivs['wrapper'] = document.createElement('div');
this.navigationDivs['wrapper'].id = "graph-navigation_wrapper";
Expand Down

0 comments on commit 5262fa0

Please sign in to comment.