allowed hierarchical layout to be set from setOptions

9 years ago · 4418e441d6
--- a/HISTORY.md
+++ b/HISTORY.md
@ -8,9 +8,15 @@ http://visjs.org

 - (added gradient coloring for lines, but set for release in 4.0 due to required refactoring of options)
 - Fixed bug where a network that has frozen physics would resume redrawing after setData, setOptions etc.
 - Added option to bypass default groups. If more groups are specified in the nodes than there are in the groups, loop over supplied groups instead of default.
 - Added two new static smooth curves modes: curveCW and curve CCW.
 - (add docs) Added option to bypass default groups. If more groups are specified in the nodes than there are in the groups, loop over supplied groups instead of default.
 - (add docs) Added two new static smooth curves modes: curveCW and curve CCW.
 - Added request redraw for certain internal processes to reduce number of draw calls.
 - Added pull request for usage of Icons. Thanks @Dude9177!
 - Allow hierarchical view to be set in setOptions.

 ### Graph2d



 ### Timeline

--- a/dist/vis.js
+++ b/dist/vis.js
--- a/examples/network/06_groups.html
+++ b/examples/network/06_groups.html
@ -8,9 +8,10 @@
      font: 10pt arial;
    }
    #mynetwork {
      width: 600px;
      height: 600px;
      width: 1900px;
      height: 900px;
      border: 1px solid lightgray;
      background-color:#222222;
    }
  </style>

@ -139,10 +140,11 @@
        edges: edges
      };
      var options = {
        stabilize: false,
        stabilize: true,
        nodes: {
          shape: 'dot',
            radius:30,
            fontColor:'#ffffff',
            borderWidth:2
        },
        physics: {barnesHut:{springLength: 100}}
@ -156,7 +158,7 @@
 <body onload="draw()">
 <form onsubmit= "javascript: draw(); return false;">
  Number of groups:
  <input type="text" value="23" id="groupCount" style="width: 50px;">
  <input type="text" value="20" id="groupCount" style="width: 50px;">
  Number of nodes per group:
  <input type="text" value="1" id="nodeCount" style="width: 50px;">
  <input type="submit" value="Go">
--- a/examples/network/25_physics_configuration.html
+++ b/examples/network/25_physics_configuration.html
@ -78,7 +78,6 @@
      };

    var options = {
        edges:{opacity:0.2},
        stabilize: false,
        configurePhysics:true
    };
--- a/lib/network/Groups.js
+++ b/lib/network/Groups.js
@ -29,21 +29,17 @@ Groups.DEFAULT = [
  {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}}, // 9: mint

  {border: "#990000", background: "#EE0000", highlight: {border: "#BB0000", background: "#FF3333"}, hover: {border: "#BB0000", background: "#FF3333"}}, // 10:bright red
  {border: "#01AA01", background: "#22FF22", highlight: {border: "#33DD33", background: "#AAFFAA"}, hover: {border: "#22FF22", background: "#66FF66"}}, // 11:bright GREEN

  {border: "#97C2FC", background: "#2B7CE9", highlight: {border: "#D2E5FF", background: "#2B7CE9"}, hover: {border: "#D2E5FF", background: "#2B7CE9"}}, // 12: blue
  {border: "#FFFF00", background: "#FFA500", highlight: {border: "#FFFFA3", background: "#FFA500"}, hover: {border: "#FFFFA3", background: "#FFA500"}}, // 13: yellow
  //{border: "#FB7E81", background: "#FA0A10", highlight: {border: "#FFAFB1", background: "#FA0A10"}, hover: {border: "#FFAFB1", background: "#FA0A10"}}, // 14: red
  {border: "#7BE141", background: "#41A906", highlight: {border: "#A1EC76", background: "#41A906"}, hover: {border: "#A1EC76", background: "#41A906"}}, // 15: green
  {border: "#EB7DF4", background: "#E129F0", highlight: {border: "#F0B3F5", background: "#E129F0"}, hover: {border: "#F0B3F5", background: "#E129F0"}}, // 16: magenta
  {border: "#AD85E4", background: "#7C29F0", highlight: {border: "#D3BDF0", background: "#7C29F0"}, hover: {border: "#D3BDF0", background: "#7C29F0"}}, // 17: purple
  {border: "#FFA807", background: "#C37F00", highlight: {border: "#FFCA66", background: "#C37F00"}, hover: {border: "#FFCA66", background: "#C37F00"}}, // 18: orange
  {border: "#6E6EFD", background: "#4220FB", highlight: {border: "#9B9BFD", background: "#4220FB"}, hover: {border: "#9B9BFD", background: "#4220FB"}}, // 19: darkblue
  {border: "#FFC0CB", background: "#FD5A77", highlight: {border: "#FFD1D9", background: "#FD5A77"}, hover: {border: "#FFD1D9", background: "#FD5A77"}}, // 20: pink
  {border: "#C2FABC", background: "#4AD63A", highlight: {border: "#E6FFE3", background: "#4AD63A"}, hover: {border: "#E6FFE3", background: "#4AD63A"}}, // 21:mint
  {border: "#FF6000", background: "#FF6000", highlight: {border: "#FF6000", background: "#FF6000"}, hover: {border: "#FF6000", background: "#FF6000"}}, // 12: real orange
  {border: "#97C2FC", background: "#2B7CE9", highlight: {border: "#D2E5FF", background: "#2B7CE9"}, hover: {border: "#D2E5FF", background: "#2B7CE9"}}, // 13: blue
  {border: "#399605", background: "#255C03", highlight: {border: "#399605", background: "#255C03"}, hover: {border: "#399605", background: "#255C03"}}, // 14: green
  {border: "#B70054", background: "#FF007E", highlight: {border: "#B70054", background: "#FF007E"}, hover: {border: "#B70054", background: "#FF007E"}}, // 15: magenta
  {border: "#AD85E4", background: "#7C29F0", highlight: {border: "#D3BDF0", background: "#7C29F0"}, hover: {border: "#D3BDF0", background: "#7C29F0"}}, // 16: purple
  {border: "#4557FA", background: "#000EA1", highlight: {border: "#6E6EFD", background: "#000EA1"}, hover: {border: "#6E6EFD", background: "#000EA1"}}, // 17: darkblue
  {border: "#FFC0CB", background: "#FD5A77", highlight: {border: "#FFD1D9", background: "#FD5A77"}, hover: {border: "#FFD1D9", background: "#FD5A77"}}, // 18: pink
  {border: "#C2FABC", background: "#74D66A", highlight: {border: "#E6FFE3", background: "#74D66A"}, hover: {border: "#E6FFE3", background: "#74D66A"}}, // 19: mint

  {border: "#EE0000", background: "#990000", highlight: {border: "#FF3333", background: "#BB0000"}, hover: {border: "#FF3333", background: "#BB0000"}}, // 22:bright red
  {border: "#22FF22", background: "#01AA01", highlight: {border: "#AAFFAA", background: "#33DD33"}, hover: {border: "#66FF66", background: "#22FF22"}}, // 23:bright GREEN
  {border: "#EE0000", background: "#990000", highlight: {border: "#FF3333", background: "#BB0000"}, hover: {border: "#FF3333", background: "#BB0000"}}, // 20:bright red
 ];


--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@ -809,6 +809,10 @@ Network.prototype.setOptions = function (options) {
    this._markAllEdgesAsDirty();
    this.setSize(this.constants.width, this.constants.height);
    this.moving = true;
    if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
      this._resetLevels();
      this._setupHierarchicalLayout();
    }
    this.start();
  }
 };