- 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.
- Added request redraw for certain internal processes to reduce number of draw calls.
- (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.
- Added request redraw for certain internal processes to reduce number of draw calls.
Roundness (0..1): <inputtype="range"min="0"max="1"value="0.5"step="0.05"style="width:200px"id="roundnessSlider"><inputid="roundnessScreen"value="0.5"> (0.5 is max roundness for continuous, 1.0 for the others)
<divid="mynetwork"></div>
<divid="mynetwork"></div>
<scripttype="text/javascript">
<scripttype="text/javascript">
var dropdown = document.getElementById("dropdownID");
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
dropdown.onchange = update;
var roundnessSlider = document.getElementById("roundnessSlider");
roundnessSlider.onchange = update;
var roundnessScreen = document.getElementById("roundnessScreen");
// create an array with nodes
// create an array with nodes
var nodes = [
var nodes = [
{id: 1, label: 'Node 1'},
{id: 1, label: 'Node 1'},
@ -53,7 +60,7 @@ dropdown.onchange = update;
// create an array with edges
// create an array with edges
var edges = [
var edges = [
{from: 1, to: 2}
{from: 1, to: 2, style:"arrow"}
];
];
// create a network
// create a network
@ -68,8 +75,14 @@ dropdown.onchange = update;
function update() {
function update() {
var type = dropdown.value;
var type = dropdown.value;
network.setOptions({smoothCurves:{type:type}});
var roundness = roundnessSlider.value;
roundnessScreen.value = roundness;
var options = {smoothCurves:{type:type, roundness:roundness}}
{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:"#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
];
];
@ -54,12 +74,22 @@ Groups.prototype.clear = function () {
// this check is to ensure that the network does not emit these events if it was already stabilized and setOptions is called (setting moving to true and calling start())
// this check is to ensure that the network does not emit these events if it was already stabilized and setOptions is called (setting moving to true and calling start())
Alex de Mulder
9 years ago