wip improved layout for hierarchical

dist/vis.js

@@ -39338,6 +39338,8 @@ return /******/ (function(modules) { // webpackBootstrap
       util.extend(this.options, this.defaultOptions);
 
       this.hierarchicalLevels = {};
+      this.hierarchicalParents = {};
+      this.hierarchicalChildren = {};
 
       this.bindEventListeners();
     }
@@ -39647,11 +39649,26 @@ return /******/ (function(modules) { // webpackBootstrap
             // add offset to distribution
             this._addOffsetsToDistribution(distribution);
 
+            this._addChildNodeWidths(distribution);
+
             // place the nodes on the canvas.
             this._placeNodesByHierarchy(distribution);
           }
         }
       }
+    }, {
+      key: '_addChildNodeWidths',
+      value: function _addChildNodeWidths(distribution) {
+        var levels = Object.keys(distribution);
+        for (var i = levels.length - 1; i > levels[0]; i--) {
+          for (var node in distribution[levels[i]].nodes) {
+            if (this.hierarchicalChildren[node] !== undefined) {
+              var _parent = this.hierarchicalChildren[node].parents[0];
+              this.hierarchicalParents[_parent].amount += 1;
+            }
+          }
+        }
+      }
 
       /**
        * center align the nodes in the hierarchy for quicker display.
@@ -39883,23 +39900,47 @@ return /******/ (function(modules) { // webpackBootstrap
        */
     }, {
       key: '_setLevelDirected',
-      value: function _setLevelDirected(level, node) {
+      value: function _setLevelDirected(level, node, parentId) {
         if (this.hierarchicalLevels[node.id] !== undefined) return;
 
+        // set the references.
+        if (parentId !== undefined) {
+          this._updateReferences(parentId, node.id);
+        }
+
         var childNode = undefined;
         this.hierarchicalLevels[node.id] = level;
 
         for (var i = 0; i < node.edges.length; i++) {
           if (node.edges[i].toId === node.id) {
             childNode = node.edges[i].from;
-            this._setLevelDirected(level - 1, childNode);
+            this._setLevelDirected(level - 1, childNode, node.id);
           } else {
             childNode = node.edges[i].to;
-            this._setLevelDirected(level + 1, childNode);
+            this._setLevelDirected(level + 1, childNode, node.id);
           }
         }
       }
 
+      /**
+       * Update the bookkeeping of parent and child.
+       * @param parentNodeId
+       * @param childNodeId
+       * @private
+       */
+    }, {
+      key: '_updateReferences',
+      value: function _updateReferences(parentNodeId, childNodeId) {
+        if (this.hierarchicalParents[parentNodeId] === undefined) {
+          this.hierarchicalParents[parentNodeId] = { children: [], width: 0, amount: 0 };
+        }
+        this.hierarchicalParents[parentNodeId].children.push(childNodeId);
+        if (this.hierarchicalChildren[childNodeId] === undefined) {
+          this.hierarchicalChildren[childNodeId] = { parents: [], width: 0, amount: 0 };
+        }
+        this.hierarchicalChildren[childNodeId].parents.push(parentNodeId);
+      }
+
       /**
        * This is a recursively called function to enumerate the branches from the largest hubs and place the nodes
        * on a X position that ensures there will be no overlap.

lib/network/modules/LayoutEngine.js

@@ -26,6 +26,8 @@ class LayoutEngine {
     util.extend(this.options, this.defaultOptions);
 
     this.hierarchicalLevels = {};
+    this.hierarchicalParents = {};
+    this.hierarchicalChildren = {};
 
     this.bindEventListeners();
   }
@@ -328,6 +330,8 @@ class LayoutEngine {
         // add offset to distribution
         this._addOffsetsToDistribution(distribution);
 
+        this._addChildNodeWidths(distribution);
+
         // place the nodes on the canvas.
         this._placeNodesByHierarchy(distribution);
       }
@@ -335,6 +339,18 @@ class LayoutEngine {
   }
 
 
+  _addChildNodeWidths(distribution) {
+    let levels = Object.keys(distribution);
+    for (let i = levels.length - 1; i > levels[0]; i--) {
+      for (let node in distribution[levels[i]].nodes) {
+        if (this.hierarchicalChildren[node] !== undefined) {
+          let parent = this.hierarchicalChildren[node].parents[0];
+          this.hierarchicalParents[parent].amount += 1;
+        }
+      }
+    }
+  }
+
   /**
    * center align the nodes in the hierarchy for quicker display.
    * @param distribution
@@ -553,26 +569,50 @@ class LayoutEngine {
    * @param parentId
    * @private
    */
-  _setLevelDirected(level, node) {
+  _setLevelDirected(level, node, parentId) {
     if (this.hierarchicalLevels[node.id] !== undefined)
       return;
 
+    // set the references.
+    if (parentId !== undefined) {
+      this._updateReferences(parentId, node.id);
+    }
+
     let childNode;
     this.hierarchicalLevels[node.id] = level;
 
     for (let i = 0; i < node.edges.length; i++) {
       if (node.edges[i].toId === node.id) {
         childNode = node.edges[i].from;
-        this._setLevelDirected(level - 1, childNode);
+        this._setLevelDirected(level - 1, childNode, node.id);
       }
       else {
         childNode = node.edges[i].to;
-        this._setLevelDirected(level + 1, childNode);
+        this._setLevelDirected(level + 1, childNode, node.id);
       }
     }
   }
 
 
+  /**
+   * Update the bookkeeping of parent and child.
+   * @param parentNodeId
+   * @param childNodeId
+   * @private
+   */
+  _updateReferences(parentNodeId, childNodeId) {
+    if (this.hierarchicalParents[parentNodeId] === undefined) {
+      this.hierarchicalParents[parentNodeId] = {children:[], width:0, amount:0};
+    }
+    this.hierarchicalParents[parentNodeId].children.push(childNodeId);
+    if (this.hierarchicalChildren[childNodeId] === undefined) {
+      this.hierarchicalChildren[childNodeId] = {parents:[], width:0, amount:0};
+    }
+    this.hierarchicalChildren[childNodeId].parents.push(parentNodeId);
+
+  }
+
+
 
   /**
    * This is a recursively called function to enumerate the branches from the largest hubs and place the nodes