jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/develop' into develop 

Conflicts:
	dist/vis.js
	dist/vis.min.js
css_transitions
josdejong 10 years ago
parent
07f3c44b38 c0c62bfd67
commit
a94d528e2d
9 changed files with 533 additions and 437 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +67
    -47
      dist/vis.js
  2. +7
    -7
      dist/vis.min.js
  3. +25
    -4
      docs/graph.html
  4. +1
    -1
      examples/graph/20_navigation.html
  5. +332
    -331
      examples/graph/22_les_miserables.html
  6. +36
    -2
      examples/graph/23_hierarchical_layout.html
  7. +21
    -17
      src/graph/Graph.js
  8. +43
    -27
      src/graph/graphMixins/HierarchicalLayoutMixin.js
  9. +1
    -1
      src/graph/graphMixins/NavigationMixin.js

+ 67
- 47
dist/vis.js View File

@ -4,8 +4,8 @@
*
* A dynamic, browser-based visualization library.
*
* @version 0.5.1
* @date 2014-02-21
* @version @@version
* @date @@date
*
* @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com
@ -12131,7 +12131,9 @@ var HierarchicalLayoutMixin = {
*/
_setupHierarchicalLayout : function() {
if (this.constants.hierarchicalLayout.enabled == true) {
if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
this.constants.hierarchicalLayout.levelSeparation *= -1;
}
// get the size of the largest hubs and check if the user has defined a level for a node.
var hubsize = 0;
var node, nodeId;
@ -12156,7 +12158,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();
}
@ -12195,33 +12197,28 @@ var HierarchicalLayoutMixin = {
for (nodeId in distribution[0].nodes) {
if (distribution[0].nodes.hasOwnProperty(nodeId)) {
node = distribution[0].nodes[nodeId];
if (node.xFixed) {
node.x = distribution[0].minPos;
distribution[0].minPos += distribution[0].nodeSpacing;
node.xFixed = false;
if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
if (node.xFixed) {
node.x = distribution[0].minPos;
node.xFixed = false;
distribution[0].minPos += distribution[0].nodeSpacing;
}
}
this._placeBranchNodes(node.edges,node.id,distribution,node.level);
}
}
else {
if (node.yFixed) {
node.y = distribution[0].minPos;
node.yFixed = false;
// 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;
distribution[0].minPos += distribution[0].nodeSpacing;
}
}
this._placeBranchNodes(node.edges,node.id,distribution,node.level);
}
}
// 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();
}
}
},
@ -12242,7 +12239,12 @@ var HierarchicalLayoutMixin = {
node = this.nodes[nodeId];
node.xFixed = true;
node.yFixed = true;
node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
}
else {
node.x = this.constants.hierarchicalLayout.levelSeparation*node.level;
}
if (!distribution.hasOwnProperty(node.level)) {
distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
}
@ -12345,9 +12347,23 @@ var HierarchicalLayoutMixin = {
}
// if a node is conneceted to another node on the same level (or higher (means lower level))!, this is not handled here.
if (childNode.xFixed && childNode.level > parentLevel) {
childNode.xFixed = false;
childNode.x = distribution[childNode.level].minPos;
var nodeMoved = false;
if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
if (childNode.xFixed && childNode.level > parentLevel) {
childNode.xFixed = false;
childNode.x = distribution[childNode.level].minPos;
nodeMoved = true;
}
}
else {
if (childNode.yFixed && childNode.level > parentLevel) {
childNode.yFixed = false;
childNode.y = distribution[childNode.level].minPos;
nodeMoved = true;
}
}
if (nodeMoved == true) {
distribution[childNode.level].minPos += distribution[childNode.level].nodeSpacing;
if (childNode.edges.length > 1) {
this._placeBranchNodes(childNode.edges,childNode.id,distribution,childNode.level);
@ -15095,7 +15111,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";
@ -15622,7 +15638,8 @@ function Graph (container, data, options) {
hierarchicalLayout: {
enabled:false,
levelSeparation: 150,
nodeSpacing: 100
nodeSpacing: 100,
direction: "UD" // UD, DU, LR, RL
},
smoothCurves: true,
maxVelocity: 10,
@ -15727,10 +15744,11 @@ 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);
}
}
// if clustering is disabled, the simulation will have started in the setData function
if (this.constants.clustering.enabled) {
this.startWithClustering();
@ -15773,10 +15791,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};
@ -15816,10 +15834,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;
@ -15844,6 +15865,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;
@ -15859,10 +15884,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();
}
@ -16394,7 +16421,6 @@ Graph.prototype._onTap = function (event) {
Graph.prototype._onDoubleTap = function (event) {
var pointer = this._getPointer(event.gesture.center);
this._handleDoubleTap(pointer);
};
@ -17181,7 +17207,7 @@ Graph.prototype._doStabilize = function() {
count++;
}
this.zoomToFit(false,true);
this.zoomExtent(false,true);
};
@ -17409,12 +17435,6 @@ Graph.prototype._initializeMixinLoaders = function () {
/**
* vis.js module exports
*/

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


+ 25
- 4
docs/graph.html View File

@ -1663,12 +1663,20 @@ var options: {
hierarchicalLayout: true
}
// advanced configuration for keyboard controls
// advanced configuration for hierarchical layout
var options: {
hierarchicalLayout: {
enabled:false,
levelSeparation: 150,
nodeSpacing: 100
nodeSpacing: 100,
direction: "UD"
}
}
// partial configuration automatically sets enabled to true
var options: {
hierarchicalLayout: {
nodeSpacing: 100,
direction: "UD"
}
}
</pre>
@ -1692,13 +1700,20 @@ var options: {
<td>levelSeparation</td>
<td>Number</td>
<td>150</td>
<td>This defines the space between levels (in the Y-direction).</td>
<td>This defines the space between levels (in the Y-direction, considering UP-DOWN direction).</td>
</tr>
<tr>
<td>nodeSpacing</td>
<td>Number</td>
<td>100</td>
<td>This defines the space between nodes in the same level (in the X-direction).</td>
<td>This defines the space between nodes in the same level (in the X-direction, considering UP-DOWN direction).</td>
</tr>
<tr>
<td>direction</td>
<td>String</td>
<td>UD</td>
<td>This defines the direction the graph is drawn in. The supported directions are: Up-Down (UD), Down-Up (DU), Left-Right (LR) and Right-Left (RL).
These need to be supplied by the acronyms in parentheses.</td>
</tr>
</table>
<h2 id="Methods">Methods</h2>
@ -1778,6 +1793,12 @@ var options: {
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>

+ 1
- 1
examples/graph/20_navigation.html View File

@ -156,7 +156,7 @@
<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 />

+ 332
- 331
examples/graph/22_les_miserables.html View File

@ -17,341 +17,341 @@
function draw() {
// create some nodes
var nodes = [
{id:0,"labelIGNORE":"Myriel","group":1},
{id:1,"labelIGNORE":"Napoleon","group":1},
{id:2,"labelIGNORE":"Mlle.Baptistine","group":1},
{id:3,"labelIGNORE":"Mme.Magloire","group":1},
{id:4,"labelIGNORE":"CountessdeLo","group":1},
{id:5,"labelIGNORE":"Geborand","group":1},
{id:6,"labelIGNORE":"Champtercier","group":1},
{id:7,"labelIGNORE":"Cravatte","group":1},
{id:8,"labelIGNORE":"Count","group":1},
{id:9,"labelIGNORE":"OldMan","group":1},
{id:10,"labelIGNORE":"Labarre","group":2},
{id:11,"labelIGNORE":"Valjean","group":2},
{id:12,"labelIGNORE":"Marguerite","group":3},
{id:13,"labelIGNORE":"Mme.deR","group":2},
{id:14,"labelIGNORE":"Isabeau","group":2},
{id:15,"labelIGNORE":"Gervais","group":2},
{id:16,"labelIGNORE":"Tholomyes","group":3},
{id:17,"labelIGNORE":"Listolier","group":3},
{id:18,"labelIGNORE":"Fameuil","group":3},
{id:19,"labelIGNORE":"Blacheville","group":3},
{id:20,"labelIGNORE":"Favourite","group":3},
{id:21,"labelIGNORE":"Dahlia","group":3},
{id:22,"labelIGNORE":"Zephine","group":3},
{id:23,"labelIGNORE":"Fantine","group":3},
{id:24,"labelIGNORE":"Mme.Thenardier","group":4},
{id:25,"labelIGNORE":"Thenardier","group":4},
{id:26,"labelIGNORE":"Cosette","group":5},
{id:27,"labelIGNORE":"Javert","group":4},
{id:28,"labelIGNORE":"Fauchelevent","group":0},
{id:29,"labelIGNORE":"Bamatabois","group":2},
{id:30,"labelIGNORE":"Perpetue","group":3},
{id:31,"labelIGNORE":"Simplice","group":2},
{id:32,"labelIGNORE":"Scaufflaire","group":2},
{id:33,"labelIGNORE":"Woman1","group":2},
{id:34,"labelIGNORE":"Judge","group":2},
{id:35,"labelIGNORE":"Champmathieu","group":2},
{id:36,"labelIGNORE":"Brevet","group":2},
{id:37,"labelIGNORE":"Chenildieu","group":2},
{id:38,"labelIGNORE":"Cochepaille","group":2},
{id:39,"labelIGNORE":"Pontmercy","group":4},
{id:40,"labelIGNORE":"Boulatruelle","group":6},
{id:41,"labelIGNORE":"Eponine","group":4},
{id:42,"labelIGNORE":"Anzelma","group":4},
{id:43,"labelIGNORE":"Woman2","group":5},
{id:44,"labelIGNORE":"MotherInnocent","group":0},
{id:45,"labelIGNORE":"Gribier","group":0},
{id:46,"labelIGNORE":"Jondrette","group":7},
{id:47,"labelIGNORE":"Mme.Burgon","group":7},
{id:48,"labelIGNORE":"Gavroche","group":8},
{id:49,"labelIGNORE":"Gillenormand","group":5},
{id:50,"labelIGNORE":"Magnon","group":5},
{id:51,"labelIGNORE":"Mlle.Gillenormand","group":5},
{id:52,"labelIGNORE":"Mme.Pontmercy","group":5},
{id:53,"labelIGNORE":"Mlle.Vaubois","group":5},
{id:54,"labelIGNORE":"Lt.Gillenormand","group":5},
{id:55,"labelIGNORE":"Marius","group":8},
{id:56,"labelIGNORE":"BaronessT","group":5},
{id:57,"labelIGNORE":"Mabeuf","group":8},
{id:58,"labelIGNORE":"Enjolras","group":8},
{id:59,"labelIGNORE":"Combeferre","group":8},
{id:60,"labelIGNORE":"Prouvaire","group":8},
{id:61,"labelIGNORE":"Feuilly","group":8},
{id:62,"labelIGNORE":"Courfeyrac","group":8},
{id:63,"labelIGNORE":"Bahorel","group":8},
{id:64,"labelIGNORE":"Bossuet","group":8},
{id:65,"labelIGNORE":"Joly","group":8},
{id:66,"labelIGNORE":"Grantaire","group":8},
{id:67,"labelIGNORE":"MotherPlutarch","group":9},
{id:68,"labelIGNORE":"Gueulemer","group":4},
{id:69,"labelIGNORE":"Babet","group":4},
{id:70,"labelIGNORE":"Claquesous","group":4},
{id:71,"labelIGNORE":"Montparnasse","group":4},
{id:72,"labelIGNORE":"Toussaint","group":5},
{id:73,"labelIGNORE":"Child1","group":10},
{id:74,"labelIGNORE":"Child2","group":10},
{id:75,"labelIGNORE":"Brujon","group":4},
{id:76,"labelIGNORE":"Mme.Hucheloup","group":8}
{id:0,"labelHidden":"Myriel","group":1},
{id:1,"labelHidden":"Napoleon","group":1},
{id:2,"labelHidden":"Mlle.Baptistine","group":1},
{id:3,"labelHidden":"Mme.Magloire","group":1},
{id:4,"labelHidden":"CountessdeLo","group":1},
{id:5,"labelHidden":"Geborand","group":1},
{id:6,"labelHidden":"Champtercier","group":1},
{id:7,"labelHidden":"Cravatte","group":1},
{id:8,"labelHidden":"Count","group":1},
{id:9,"labelHidden":"OldMan","group":1},
{id:10,"labelHidden":"Labarre","group":2},
{id:11,"labelHidden":"Valjean","group":2},
{id:12,"labelHidden":"Marguerite","group":3},
{id:13,"labelHidden":"Mme.deR","group":2},
{id:14,"labelHidden":"Isabeau","group":2},
{id:15,"labelHidden":"Gervais","group":2},
{id:16,"labelHidden":"Tholomyes","group":3},
{id:17,"labelHidden":"Listolier","group":3},
{id:18,"labelHidden":"Fameuil","group":3},
{id:19,"labelHidden":"Blacheville","group":3},
{id:20,"labelHidden":"Favourite","group":3},
{id:21,"labelHidden":"Dahlia","group":3},
{id:22,"labelHidden":"Zephine","group":3},
{id:23,"labelHidden":"Fantine","group":3},
{id:24,"labelHidden":"Mme.Thenardier","group":4},
{id:25,"labelHidden":"Thenardier","group":4},
{id:26,"labelHidden":"Cosette","group":5},
{id:27,"labelHidden":"Javert","group":4},
{id:28,"labelHidden":"Fauchelevent","group":0},
{id:29,"labelHidden":"Bamatabois","group":2},
{id:30,"labelHidden":"Perpetue","group":3},
{id:31,"labelHidden":"Simplice","group":2},
{id:32,"labelHidden":"Scaufflaire","group":2},
{id:33,"labelHidden":"Woman1","group":2},
{id:34,"labelHidden":"Judge","group":2},
{id:35,"labelHidden":"Champmathieu","group":2},
{id:36,"labelHidden":"Brevet","group":2},
{id:37,"labelHidden":"Chenildieu","group":2},
{id:38,"labelHidden":"Cochepaille","group":2},
{id:39,"labelHidden":"Pontmercy","group":4},
{id:40,"labelHidden":"Boulatruelle","group":6},
{id:41,"labelHidden":"Eponine","group":4},
{id:42,"labelHidden":"Anzelma","group":4},
{id:43,"labelHidden":"Woman2","group":5},
{id:44,"labelHidden":"MotherInnocent","group":0},
{id:45,"labelHidden":"Gribier","group":0},
{id:46,"labelHidden":"Jondrette","group":7},
{id:47,"labelHidden":"Mme.Burgon","group":7},
{id:48,"labelHidden":"Gavroche","group":8},
{id:49,"labelHidden":"Gillenormand","group":5},
{id:50,"labelHidden":"Magnon","group":5},
{id:51,"labelHidden":"Mlle.Gillenormand","group":5},
{id:52,"labelHidden":"Mme.Pontmercy","group":5},
{id:53,"labelHidden":"Mlle.Vaubois","group":5},
{id:54,"labelHidden":"Lt.Gillenormand","group":5},
{id:55,"labelHidden":"Marius","group":8},
{id:56,"labelHidden":"BaronessT","group":5},
{id:57,"labelHidden":"Mabeuf","group":8},
{id:58,"labelHidden":"Enjolras","group":8},
{id:59,"labelHidden":"Combeferre","group":8},
{id:60,"labelHidden":"Prouvaire","group":8},
{id:61,"labelHidden":"Feuilly","group":8},
{id:62,"labelHidden":"Courfeyrac","group":8},
{id:63,"labelHidden":"Bahorel","group":8},
{id:64,"labelHidden":"Bossuet","group":8},
{id:65,"labelHidden":"Joly","group":8},
{id:66,"labelHidden":"Grantaire","group":8},
{id:67,"labelHidden":"MotherPlutarch","group":9},
{id:68,"labelHidden":"Gueulemer","group":4},
{id:69,"labelHidden":"Babet","group":4},
{id:70,"labelHidden":"Claquesous","group":4},
{id:71,"labelHidden":"Montparnasse","group":4},
{id:72,"labelHidden":"Toussaint","group":5},
{id:73,"labelHidden":"Child1","group":10},
{id:74,"labelHidden":"Child2","group":10},
{id:75,"labelHidden":"Brujon","group":4},
{id:76,"labelHidden":"Mme.Hucheloup","group":8}
];
// create some edges
var edges = [
{"from":1,"to":0,"valueIGNORED":1},
{"from":2,"to":0,"valueIGNORED":8},
{"from":3,"to":0,"valueIGNORED":10},
{"from":3,"to":2,"valueIGNORED":6},
{"from":4,"to":0,"valueIGNORED":1},
{"from":5,"to":0,"valueIGNORED":1},
{"from":6,"to":0,"valueIGNORED":1},
{"from":7,"to":0,"valueIGNORED":1},
{"from":8,"to":0,"valueIGNORED":2},
{"from":9,"to":0,"valueIGNORED":1},
{"from":11,"to":10,"valueIGNORED":1},
{"from":11,"to":3,"valueIGNORED":3},
{"from":11,"to":2,"valueIGNORED":3},
{"from":11,"to":0,"valueIGNORED":5},
{"from":12,"to":11,"valueIGNORED":1},
{"from":13,"to":11,"valueIGNORED":1},
{"from":14,"to":11,"valueIGNORED":1},
{"from":15,"to":11,"valueIGNORED":1},
{"from":17,"to":16,"valueIGNORED":4},
{"from":18,"to":16,"valueIGNORED":4},
{"from":18,"to":17,"valueIGNORED":4},
{"from":19,"to":16,"valueIGNORED":4},
{"from":19,"to":17,"valueIGNORED":4},
{"from":19,"to":18,"valueIGNORED":4},
{"from":20,"to":16,"valueIGNORED":3},
{"from":20,"to":17,"valueIGNORED":3},
{"from":20,"to":18,"valueIGNORED":3},
{"from":20,"to":19,"valueIGNORED":4},
{"from":21,"to":16,"valueIGNORED":3},
{"from":21,"to":17,"valueIGNORED":3},
{"from":21,"to":18,"valueIGNORED":3},
{"from":21,"to":19,"valueIGNORED":3},
{"from":21,"to":20,"valueIGNORED":5},
{"from":22,"to":16,"valueIGNORED":3},
{"from":22,"to":17,"valueIGNORED":3},
{"from":22,"to":18,"valueIGNORED":3},
{"from":22,"to":19,"valueIGNORED":3},
{"from":22,"to":20,"valueIGNORED":4},
{"from":22,"to":21,"valueIGNORED":4},
{"from":23,"to":16,"valueIGNORED":3},
{"from":23,"to":17,"valueIGNORED":3},
{"from":23,"to":18,"valueIGNORED":3},
{"from":23,"to":19,"valueIGNORED":3},
{"from":23,"to":20,"valueIGNORED":4},
{"from":23,"to":21,"valueIGNORED":4},
{"from":23,"to":22,"valueIGNORED":4},
{"from":23,"to":12,"valueIGNORED":2},
{"from":23,"to":11,"valueIGNORED":9},
{"from":24,"to":23,"valueIGNORED":2},
{"from":24,"to":11,"valueIGNORED":7},
{"from":25,"to":24,"valueIGNORED":13},
{"from":25,"to":23,"valueIGNORED":1},
{"from":25,"to":11,"valueIGNORED":12},
{"from":26,"to":24,"valueIGNORED":4},
{"from":26,"to":11,"valueIGNORED":31},
{"from":26,"to":16,"valueIGNORED":1},
{"from":26,"to":25,"valueIGNORED":1},
{"from":27,"to":11,"valueIGNORED":17},
{"from":27,"to":23,"valueIGNORED":5},
{"from":27,"to":25,"valueIGNORED":5},
{"from":27,"to":24,"valueIGNORED":1},
{"from":27,"to":26,"valueIGNORED":1},
{"from":28,"to":11,"valueIGNORED":8},
{"from":28,"to":27,"valueIGNORED":1},
{"from":29,"to":23,"valueIGNORED":1},
{"from":29,"to":27,"valueIGNORED":1},
{"from":29,"to":11,"valueIGNORED":2},
{"from":30,"to":23,"valueIGNORED":1},
{"from":31,"to":30,"valueIGNORED":2},
{"from":31,"to":11,"valueIGNORED":3},
{"from":31,"to":23,"valueIGNORED":2},
{"from":31,"to":27,"valueIGNORED":1},
{"from":32,"to":11,"valueIGNORED":1},
{"from":33,"to":11,"valueIGNORED":2},
{"from":33,"to":27,"valueIGNORED":1},
{"from":34,"to":11,"valueIGNORED":3},
{"from":34,"to":29,"valueIGNORED":2},
{"from":35,"to":11,"valueIGNORED":3},
{"from":35,"to":34,"valueIGNORED":3},
{"from":35,"to":29,"valueIGNORED":2},
{"from":36,"to":34,"valueIGNORED":2},
{"from":36,"to":35,"valueIGNORED":2},
{"from":36,"to":11,"valueIGNORED":2},
{"from":36,"to":29,"valueIGNORED":1},
{"from":37,"to":34,"valueIGNORED":2},
{"from":37,"to":35,"valueIGNORED":2},
{"from":37,"to":36,"valueIGNORED":2},
{"from":37,"to":11,"valueIGNORED":2},
{"from":37,"to":29,"valueIGNORED":1},
{"from":38,"to":34,"valueIGNORED":2},
{"from":38,"to":35,"valueIGNORED":2},
{"from":38,"to":36,"valueIGNORED":2},
{"from":38,"to":37,"valueIGNORED":2},
{"from":38,"to":11,"valueIGNORED":2},
{"from":38,"to":29,"valueIGNORED":1},
{"from":39,"to":25,"valueIGNORED":1},
{"from":40,"to":25,"valueIGNORED":1},
{"from":41,"to":24,"valueIGNORED":2},
{"from":41,"to":25,"valueIGNORED":3},
{"from":42,"to":41,"valueIGNORED":2},
{"from":42,"to":25,"valueIGNORED":2},
{"from":42,"to":24,"valueIGNORED":1},
{"from":43,"to":11,"valueIGNORED":3},
{"from":43,"to":26,"valueIGNORED":1},
{"from":43,"to":27,"valueIGNORED":1},
{"from":44,"to":28,"valueIGNORED":3},
{"from":44,"to":11,"valueIGNORED":1},
{"from":45,"to":28,"valueIGNORED":2},
{"from":47,"to":46,"valueIGNORED":1},
{"from":48,"to":47,"valueIGNORED":2},
{"from":48,"to":25,"valueIGNORED":1},
{"from":48,"to":27,"valueIGNORED":1},
{"from":48,"to":11,"valueIGNORED":1},
{"from":49,"to":26,"valueIGNORED":3},
{"from":49,"to":11,"valueIGNORED":2},
{"from":50,"to":49,"valueIGNORED":1},
{"from":50,"to":24,"valueIGNORED":1},
{"from":51,"to":49,"valueIGNORED":9},
{"from":51,"to":26,"valueIGNORED":2},
{"from":51,"to":11,"valueIGNORED":2},
{"from":52,"to":51,"valueIGNORED":1},
{"from":52,"to":39,"valueIGNORED":1},
{"from":53,"to":51,"valueIGNORED":1},
{"from":54,"to":51,"valueIGNORED":2},
{"from":54,"to":49,"valueIGNORED":1},
{"from":54,"to":26,"valueIGNORED":1},
{"from":55,"to":51,"valueIGNORED":6},
{"from":55,"to":49,"valueIGNORED":12},
{"from":55,"to":39,"valueIGNORED":1},
{"from":55,"to":54,"valueIGNORED":1},
{"from":55,"to":26,"valueIGNORED":21},
{"from":55,"to":11,"valueIGNORED":19},
{"from":55,"to":16,"valueIGNORED":1},
{"from":55,"to":25,"valueIGNORED":2},
{"from":55,"to":41,"valueIGNORED":5},
{"from":55,"to":48,"valueIGNORED":4},
{"from":56,"to":49,"valueIGNORED":1},
{"from":56,"to":55,"valueIGNORED":1},
{"from":57,"to":55,"valueIGNORED":1},
{"from":57,"to":41,"valueIGNORED":1},
{"from":57,"to":48,"valueIGNORED":1},
{"from":58,"to":55,"valueIGNORED":7},
{"from":58,"to":48,"valueIGNORED":7},
{"from":58,"to":27,"valueIGNORED":6},
{"from":58,"to":57,"valueIGNORED":1},
{"from":58,"to":11,"valueIGNORED":4},
{"from":59,"to":58,"valueIGNORED":15},
{"from":59,"to":55,"valueIGNORED":5},
{"from":59,"to":48,"valueIGNORED":6},
{"from":59,"to":57,"valueIGNORED":2},
{"from":60,"to":48,"valueIGNORED":1},
{"from":60,"to":58,"valueIGNORED":4},
{"from":60,"to":59,"valueIGNORED":2},
{"from":61,"to":48,"valueIGNORED":2},
{"from":61,"to":58,"valueIGNORED":6},
{"from":61,"to":60,"valueIGNORED":2},
{"from":61,"to":59,"valueIGNORED":5},
{"from":61,"to":57,"valueIGNORED":1},
{"from":61,"to":55,"valueIGNORED":1},
{"from":62,"to":55,"valueIGNORED":9},
{"from":62,"to":58,"valueIGNORED":17},
{"from":62,"to":59,"valueIGNORED":13},
{"from":62,"to":48,"valueIGNORED":7},
{"from":62,"to":57,"valueIGNORED":2},
{"from":62,"to":41,"valueIGNORED":1},
{"from":62,"to":61,"valueIGNORED":6},
{"from":62,"to":60,"valueIGNORED":3},
{"from":63,"to":59,"valueIGNORED":5},
{"from":63,"to":48,"valueIGNORED":5},
{"from":63,"to":62,"valueIGNORED":6},
{"from":63,"to":57,"valueIGNORED":2},
{"from":63,"to":58,"valueIGNORED":4},
{"from":63,"to":61,"valueIGNORED":3},
{"from":63,"to":60,"valueIGNORED":2},
{"from":63,"to":55,"valueIGNORED":1},
{"from":64,"to":55,"valueIGNORED":5},
{"from":64,"to":62,"valueIGNORED":12},
{"from":64,"to":48,"valueIGNORED":5},
{"from":64,"to":63,"valueIGNORED":4},
{"from":64,"to":58,"valueIGNORED":10},
{"from":64,"to":61,"valueIGNORED":6},
{"from":64,"to":60,"valueIGNORED":2},
{"from":64,"to":59,"valueIGNORED":9},
{"from":64,"to":57,"valueIGNORED":1},
{"from":64,"to":11,"valueIGNORED":1},
{"from":65,"to":63,"valueIGNORED":5},
{"from":65,"to":64,"valueIGNORED":7},
{"from":65,"to":48,"valueIGNORED":3},
{"from":65,"to":62,"valueIGNORED":5},
{"from":65,"to":58,"valueIGNORED":5},
{"from":65,"to":61,"valueIGNORED":5},
{"from":65,"to":60,"valueIGNORED":2},
{"from":65,"to":59,"valueIGNORED":5},
{"from":65,"to":57,"valueIGNORED":1},
{"from":65,"to":55,"valueIGNORED":2},
{"from":66,"to":64,"valueIGNORED":3},
{"from":66,"to":58,"valueIGNORED":3},
{"from":66,"to":59,"valueIGNORED":1},
{"from":66,"to":62,"valueIGNORED":2},
{"from":66,"to":65,"valueIGNORED":2},
{"from":66,"to":48,"valueIGNORED":1},
{"from":66,"to":63,"valueIGNORED":1},
{"from":66,"to":61,"valueIGNORED":1},
{"from":66,"to":60,"valueIGNORED":1},
{"from":67,"to":57,"valueIGNORED":3},
{"from":68,"to":25,"valueIGNORED":5},
{"from":68,"to":11,"valueIGNORED":1},
{"from":68,"to":24,"valueIGNORED":1},
{"from":68,"to":27,"valueIGNORED":1},
{"from":68,"to":48,"valueIGNORED":1},
{"from":68,"to":41,"valueIGNORED":1},
{"from":69,"to":25,"valueIGNORED":6},
{"from":69,"to":68,"valueIGNORED":6},
{"from":69,"to":11,"valueIGNORED":1},
{"from":69,"to":24,"valueIGNORED":1},
{"from":69,"to":27,"valueIGNORED":2},
{"from":69,"to":48,"valueIGNORED":1},
{"from":69,"to":41,"valueIGNORED":1},
{"from":70,"to":25,"valueIGNORED":4},
{"from":70,"to":69,"valueIGNORED":4},
{"from":70,"to":68,"valueIGNORED":4},
{"from":70,"to":11,"valueIGNORED":1},
{"from":70,"to":24,"valueIGNORED":1},
{"from":70,"to":27,"valueIGNORED":1},
{"from":70,"to":41,"valueIGNORED":1},
{"from":70,"to":58,"valueIGNORED":1},
{"from":71,"to":27,"valueIGNORED":1},
{"from":71,"to":69,"valueIGNORED":2},
{"from":71,"to":68,"valueIGNORED":2},
{"from":71,"to":70,"valueIGNORED":2},
{"from":71,"to":11,"valueIGNORED":1},
{"from":71,"to":48,"valueIGNORED":1},
{"from":71,"to":41,"valueIGNORED":1},
{"from":71,"to":25,"valueIGNORED":1},
{"from":72,"to":26,"valueIGNORED":2},
{"from":72,"to":27,"valueIGNORED":1},
{"from":72,"to":11,"valueIGNORED":1},
{"from":73,"to":48,"valueIGNORED":2},
{"from":74,"to":48,"valueIGNORED":2},
{"from":74,"to":73,"valueIGNORED":3},
{"from":75,"to":69,"valueIGNORED":3},
{"from":75,"to":68,"valueIGNORED":3},
{"from":75,"to":25,"valueIGNORED":3},
{"from":75,"to":48,"valueIGNORED":1},
{"from":75,"to":41,"valueIGNORED":1},
{"from":75,"to":70,"valueIGNORED":1},
{"from":75,"to":71,"valueIGNORED":1},
{"from":76,"to":64,"valueIGNORED":1},
{"from":76,"to":65,"valueIGNORED":1},
{"from":76,"to":66,"valueIGNORED":1},
{"from":76,"to":63,"valueIGNORED":1},
{"from":76,"to":62,"valueIGNORED":1},
{"from":76,"to":48,"valueIGNORED":1},
{"from":76,"to":58,"valueIGNORED":1}
{"from":1,"to":0},
{"from":2,"to":0},
{"from":3,"to":0},
{"from":3,"to":2},
{"from":4,"to":0},
{"from":5,"to":0},
{"from":6,"to":0},
{"from":7,"to":0},
{"from":8,"to":0},
{"from":9,"to":0},
{"from":11,"to":10},
{"from":11,"to":3},
{"from":11,"to":2},
{"from":11,"to":0},
{"from":12,"to":11},
{"from":13,"to":11},
{"from":14,"to":11},
{"from":15,"to":11},
{"from":17,"to":16},
{"from":18,"to":16},
{"from":18,"to":17},
{"from":19,"to":16},
{"from":19,"to":17},
{"from":19,"to":18},
{"from":20,"to":16},
{"from":20,"to":17},
{"from":20,"to":18},
{"from":20,"to":19},
{"from":21,"to":16},
{"from":21,"to":17},
{"from":21,"to":18},
{"from":21,"to":19},
{"from":21,"to":20},
{"from":22,"to":16},
{"from":22,"to":17},
{"from":22,"to":18},
{"from":22,"to":19},
{"from":22,"to":20},
{"from":22,"to":21},
{"from":23,"to":16},
{"from":23,"to":17},
{"from":23,"to":18},
{"from":23,"to":19},
{"from":23,"to":20},
{"from":23,"to":21},
{"from":23,"to":22},
{"from":23,"to":12},
{"from":23,"to":11},
{"from":24,"to":23},
{"from":24,"to":11},
{"from":25,"to":24},
{"from":25,"to":23},
{"from":25,"to":11},
{"from":26,"to":24},
{"from":26,"to":11},
{"from":26,"to":16},
{"from":26,"to":25},
{"from":27,"to":11},
{"from":27,"to":23},
{"from":27,"to":25},
{"from":27,"to":24},
{"from":27,"to":26},
{"from":28,"to":11},
{"from":28,"to":27},
{"from":29,"to":23},
{"from":29,"to":27},
{"from":29,"to":11},
{"from":30,"to":23},
{"from":31,"to":30},
{"from":31,"to":11},
{"from":31,"to":23},
{"from":31,"to":27},
{"from":32,"to":11},
{"from":33,"to":11},
{"from":33,"to":27},
{"from":34,"to":11},
{"from":34,"to":29},
{"from":35,"to":11},
{"from":35,"to":34},
{"from":35,"to":29},
{"from":36,"to":34},
{"from":36,"to":35},
{"from":36,"to":11},
{"from":36,"to":29},
{"from":37,"to":34},
{"from":37,"to":35},
{"from":37,"to":36},
{"from":37,"to":11},
{"from":37,"to":29},
{"from":38,"to":34},
{"from":38,"to":35},
{"from":38,"to":36},
{"from":38,"to":37},
{"from":38,"to":11},
{"from":38,"to":29},
{"from":39,"to":25},
{"from":40,"to":25},
{"from":41,"to":24},
{"from":41,"to":25},
{"from":42,"to":41},
{"from":42,"to":25},
{"from":42,"to":24},
{"from":43,"to":11},
{"from":43,"to":26},
{"from":43,"to":27},
{"from":44,"to":28},
{"from":44,"to":11},
{"from":45,"to":28},
{"from":47,"to":46},
{"from":48,"to":47},
{"from":48,"to":25},
{"from":48,"to":27},
{"from":48,"to":11},
{"from":49,"to":26},
{"from":49,"to":11},
{"from":50,"to":49},
{"from":50,"to":24},
{"from":51,"to":49},
{"from":51,"to":26},
{"from":51,"to":11},
{"from":52,"to":51},
{"from":52,"to":39},
{"from":53,"to":51},
{"from":54,"to":51},
{"from":54,"to":49},
{"from":54,"to":26},
{"from":55,"to":51},
{"from":55,"to":49},
{"from":55,"to":39},
{"from":55,"to":54},
{"from":55,"to":26},
{"from":55,"to":11},
{"from":55,"to":16},
{"from":55,"to":25},
{"from":55,"to":41},
{"from":55,"to":48},
{"from":56,"to":49},
{"from":56,"to":55},
{"from":57,"to":55},
{"from":57,"to":41},
{"from":57,"to":48},
{"from":58,"to":55},
{"from":58,"to":48},
{"from":58,"to":27},
{"from":58,"to":57},
{"from":58,"to":11},
{"from":59,"to":58},
{"from":59,"to":55},
{"from":59,"to":48},
{"from":59,"to":57},
{"from":60,"to":48},
{"from":60,"to":58},
{"from":60,"to":59},
{"from":61,"to":48},
{"from":61,"to":58},
{"from":61,"to":60},
{"from":61,"to":59},
{"from":61,"to":57},
{"from":61,"to":55},
{"from":62,"to":55},
{"from":62,"to":58},
{"from":62,"to":59},
{"from":62,"to":48},
{"from":62,"to":57},
{"from":62,"to":41},
{"from":62,"to":61},
{"from":62,"to":60},
{"from":63,"to":59},
{"from":63,"to":48},
{"from":63,"to":62},
{"from":63,"to":57},
{"from":63,"to":58},
{"from":63,"to":61},
{"from":63,"to":60},
{"from":63,"to":55},
{"from":64,"to":55},
{"from":64,"to":62},
{"from":64,"to":48},
{"from":64,"to":63},
{"from":64,"to":58},
{"from":64,"to":61},
{"from":64,"to":60},
{"from":64,"to":59},
{"from":64,"to":57},
{"from":64,"to":11},
{"from":65,"to":63},
{"from":65,"to":64},
{"from":65,"to":48},
{"from":65,"to":62},
{"from":65,"to":58},
{"from":65,"to":61},
{"from":65,"to":60},
{"from":65,"to":59},
{"from":65,"to":57},
{"from":65,"to":55},
{"from":66,"to":64},
{"from":66,"to":58},
{"from":66,"to":59},
{"from":66,"to":62},
{"from":66,"to":65},
{"from":66,"to":48},
{"from":66,"to":63},
{"from":66,"to":61},
{"from":66,"to":60},
{"from":67,"to":57},
{"from":68,"to":25},
{"from":68,"to":11},
{"from":68,"to":24},
{"from":68,"to":27},
{"from":68,"to":48},
{"from":68,"to":41},
{"from":69,"to":25},
{"from":69,"to":68},
{"from":69,"to":11},
{"from":69,"to":24},
{"from":69,"to":27},
{"from":69,"to":48},
{"from":69,"to":41},
{"from":70,"to":25},
{"from":70,"to":69},
{"from":70,"to":68},
{"from":70,"to":11},
{"from":70,"to":24},
{"from":70,"to":27},
{"from":70,"to":41},
{"from":70,"to":58},
{"from":71,"to":27},
{"from":71,"to":69},
{"from":71,"to":68},
{"from":71,"to":70},
{"from":71,"to":11},
{"from":71,"to":48},
{"from":71,"to":41},
{"from":71,"to":25},
{"from":72,"to":26},
{"from":72,"to":27},
{"from":72,"to":11},
{"from":73,"to":48},
{"from":74,"to":48},
{"from":74,"to":73},
{"from":75,"to":69},
{"from":75,"to":68},
{"from":75,"to":25},
{"from":75,"to":48},
{"from":75,"to":41},
{"from":75,"to":70},
{"from":75,"to":71},
{"from":76,"to":64},
{"from":76,"to":65},
{"from":76,"to":66},
{"from":76,"to":63},
{"from":76,"to":62},
{"from":76,"to":48},
{"from":76,"to":58}
];
// create a graph
@ -363,6 +363,7 @@
};
var options = {nodes: {shape:'circle'},stabilize: false};
var graph = new vis.Graph(container, data, options);
}
</script>
</head>

+ 36
- 2
examples/graph/23_hierarchical_layout.html View File

@ -21,6 +21,8 @@
var edges = null;
var graph = null;
function draw() {
nodes = [];
edges = [];
@ -75,12 +77,14 @@
nodes: nodes,
edges: edges
};
var directionInput = document.getElementById("direction");
var options = {
edges: {
},
stabilize: false,
hierarchicalLayout:true
hierarchicalLayout: {
direction: directionInput.value
}
};
graph = new vis.Graph(container, data, options);
@ -89,6 +93,7 @@
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
</head>
@ -104,6 +109,35 @@
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
</form>
<input type="button" id="btn-UD" value="Up-Down">
<input type="button" id="btn-DU" value="Down-Up">
<input type="button" id="btn-LR" value="Left-Right">
<input type="button" id="btn-RL" value="Right-Left">
<input type="hidden" id='direction' value="UD">
<script language="javascript">
var directionInput = document.getElementById("direction");
var btnUD = document.getElementById("btn-UD");
btnUD.onclick = function() {
directionInput.value = "UD";
draw();
}
var btnDU = document.getElementById("btn-DU");
btnDU.onclick = function() {
directionInput.value = "DU";
draw();
};
var btnLR = document.getElementById("btn-LR");
btnLR.onclick = function() {
directionInput.value = "LR";
draw();
};
var btnRL = document.getElementById("btn-RL");
btnRL.onclick = function() {
directionInput.value = "RL";
draw();
};
</script>
<br>
<div id="mygraph"></div>

+ 21
- 17
src/graph/Graph.js View File

@ -138,7 +138,8 @@ function Graph (container, data, options) {
hierarchicalLayout: {
enabled:false,
levelSeparation: 150,
nodeSpacing: 100
nodeSpacing: 100,
direction: "UD" // UD, DU, LR, RL
},
smoothCurves: true,
maxVelocity: 10,
@ -243,10 +244,11 @@ 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);
}
}
// if clustering is disabled, the simulation will have started in the setData function
if (this.constants.clustering.enabled) {
this.startWithClustering();
@ -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};
@ -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;
@ -360,6 +365,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;
@ -375,10 +384,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();
}
@ -910,7 +921,6 @@ Graph.prototype._onTap = function (event) {
Graph.prototype._onDoubleTap = function (event) {
var pointer = this._getPointer(event.gesture.center);
this._handleDoubleTap(pointer);
};
@ -1697,7 +1707,7 @@ Graph.prototype._doStabilize = function() {
count++;
}
this.zoomToFit(false,true);
this.zoomExtent(false,true);
};
@ -1924,9 +1934,3 @@ Graph.prototype._initializeMixinLoaders = function () {

+ 43
- 27
src/graph/graphMixins/HierarchicalLayoutMixin.js View File

@ -9,7 +9,9 @@ var HierarchicalLayoutMixin = {
*/
_setupHierarchicalLayout : function() {
if (this.constants.hierarchicalLayout.enabled == true) {
if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
this.constants.hierarchicalLayout.levelSeparation *= -1;
}
// get the size of the largest hubs and check if the user has defined a level for a node.
var hubsize = 0;
var node, nodeId;
@ -34,7 +36,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();
}
@ -73,33 +75,28 @@ var HierarchicalLayoutMixin = {
for (nodeId in distribution[0].nodes) {
if (distribution[0].nodes.hasOwnProperty(nodeId)) {
node = distribution[0].nodes[nodeId];
if (node.xFixed) {
node.x = distribution[0].minPos;
distribution[0].minPos += distribution[0].nodeSpacing;
node.xFixed = false;
if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
if (node.xFixed) {
node.x = distribution[0].minPos;
node.xFixed = false;
distribution[0].minPos += distribution[0].nodeSpacing;
}
}
this._placeBranchNodes(node.edges,node.id,distribution,node.level);
}
}
else {
if (node.yFixed) {
node.y = distribution[0].minPos;
node.yFixed = false;
// 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;
distribution[0].minPos += distribution[0].nodeSpacing;
}
}
this._placeBranchNodes(node.edges,node.id,distribution,node.level);
}
}
// 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();
}
}
},
@ -120,7 +117,12 @@ var HierarchicalLayoutMixin = {
node = this.nodes[nodeId];
node.xFixed = true;
node.yFixed = true;
node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
}
else {
node.x = this.constants.hierarchicalLayout.levelSeparation*node.level;
}
if (!distribution.hasOwnProperty(node.level)) {
distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
}
@ -223,9 +225,23 @@ var HierarchicalLayoutMixin = {
}
// if a node is conneceted to another node on the same level (or higher (means lower level))!, this is not handled here.
if (childNode.xFixed && childNode.level > parentLevel) {
childNode.xFixed = false;
childNode.x = distribution[childNode.level].minPos;
var nodeMoved = false;
if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
if (childNode.xFixed && childNode.level > parentLevel) {
childNode.xFixed = false;
childNode.x = distribution[childNode.level].minPos;
nodeMoved = true;
}
}
else {
if (childNode.yFixed && childNode.level > parentLevel) {
childNode.yFixed = false;
childNode.y = distribution[childNode.level].minPos;
nodeMoved = true;
}
}
if (nodeMoved == true) {
distribution[childNode.level].minPos += distribution[childNode.level].nodeSpacing;
if (childNode.edges.length > 1) {
this._placeBranchNodes(childNode.edges,childNode.id,distribution,childNode.level);

+ 1
- 1
src/graph/graphMixins/NavigationMixin.js View File

@ -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";

Write Preview
Loading…
Cancel
Save