Browse Source

allowed hierarchical layout to be set from setOptions

v3_develop
Alex de Mulder 9 years ago
parent
commit
4418e441d6
6 changed files with 2265 additions and 2258 deletions
  1. +8
    -2
      HISTORY.md
  2. +2238
    -2238
      dist/vis.js
  3. +6
    -4
      examples/network/06_groups.html
  4. +0
    -1
      examples/network/25_physics_configuration.html
  5. +9
    -13
      lib/network/Groups.js
  6. +4
    -0
      lib/network/Network.js

+ 8
- 2
HISTORY.md View File

@ -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) - (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. - 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 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 ### Timeline

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


+ 6
- 4
examples/network/06_groups.html View File

@ -8,9 +8,10 @@
font: 10pt arial; font: 10pt arial;
} }
#mynetwork { #mynetwork {
width: 600px;
height: 600px;
width: 1900px;
height: 900px;
border: 1px solid lightgray; border: 1px solid lightgray;
background-color:#222222;
} }
</style> </style>
@ -139,10 +140,11 @@
edges: edges edges: edges
}; };
var options = { var options = {
stabilize: false,
stabilize: true,
nodes: { nodes: {
shape: 'dot', shape: 'dot',
radius:30, radius:30,
fontColor:'#ffffff',
borderWidth:2 borderWidth:2
}, },
physics: {barnesHut:{springLength: 100}} physics: {barnesHut:{springLength: 100}}
@ -156,7 +158,7 @@
<body onload="draw()"> <body onload="draw()">
<form onsubmit= "javascript: draw(); return false;"> <form onsubmit= "javascript: draw(); return false;">
Number of groups: 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: Number of nodes per group:
<input type="text" value="1" id="nodeCount" style="width: 50px;"> <input type="text" value="1" id="nodeCount" style="width: 50px;">
<input type="submit" value="Go"> <input type="submit" value="Go">

+ 0
- 1
examples/network/25_physics_configuration.html View File

@ -78,7 +78,6 @@
}; };
var options = { var options = {
edges:{opacity:0.2},
stabilize: false, stabilize: false,
configurePhysics:true configurePhysics:true
}; };

+ 9
- 13
lib/network/Groups.js View File

@ -29,21 +29,17 @@ Groups.DEFAULT = [
{border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}}, // 9: mint {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: "#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
]; ];

+ 4
- 0
lib/network/Network.js View File

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

Loading…
Cancel
Save