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

bugfixes, added examples

flowchartTest
Alex de Mulder 9 years ago
parent
0d32566e39
commit
14ed1bb907
12 changed files with 617 additions and 493 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +418
    -421
      dist/vis.js
  2. +10
    -17
      docs/network/edges.html
  3. +61
    -0
      examples/network/categories/edgeStyles/arrows.html
  4. +67
    -0
      examples/network/categories/edgeStyles/colors.html
  5. +11
    -9
      examples/network/categories/edgeStyles/dashes.html
  6. +36
    -31
      examples/network/categories/edgeStyles/smooth.html
  7. +3
    -2
      examples/network/categories/nodeStyles/colors.html
  8. +1
    -2
      lib/network/modules/EdgesHandler.js
  9. +4
    -4
      lib/network/modules/components/Edge.js
  10. +0
    -1
      lib/network/modules/components/edges/util/EdgeBase.js
  11. +2
    -4
      lib/network/options.js
  12. +4
    -2
      lib/util.js

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


+ 10
- 17
docs/network/edges.html View File

@ -160,8 +160,7 @@ var options = {
}, },
smooth: { smooth: {
enabled: true, enabled: true,
dynamic: true,
type: "continuous",
type: "dynamic",
roundness: 0.5 roundness: 0.5
}, },
title:undefined, title:undefined,
@ -578,11 +577,11 @@ var options: {
<td><span parent="smooth" class="right-caret"></span> smooth</td> <td><span parent="smooth" class="right-caret"></span> smooth</td>
<td class="mid">Object or Boolean</td> <td class="mid">Object or Boolean</td>
<td class="mid"><code>Object</code></td> <td class="mid"><code>Object</code></td>
<td>When true, the edge is drawn as a quadratic bezier curve. The drawing of these curves takes longer than
<td>When true, the edge is drawn as a dynamic quadratic bezier curve. The drawing of these curves takes longer than
that of straight curves but it looks better. that of straight curves but it looks better.
There is a difference between dynamic smooth curves and static smooth curves. The dynamic smooth curves There is a difference between dynamic smooth curves and static smooth curves. The dynamic smooth curves
have an invisible support node that takes part in the physics simulation. If you have a lot of edges, have an invisible support node that takes part in the physics simulation. If you have a lot of edges,
you may want to consider turning off dynamic smooth curves for performance.
you may want to consider picking a different type of smooth curves then dynamic for better performance.
</td> </td>
</tr> </tr>
<tr parent="smooth" class="hidden"> <tr parent="smooth" class="hidden">
@ -593,29 +592,23 @@ var options: {
object are set, this option will be set to true. object are set, this option will be set to true.
</td> </td>
</tr> </tr>
<tr parent="smooth" class="hidden">
<td class="indent">smooth.dynamic</td>
<td class="mid">Boolean</td>
<td class="mid"><code>false</code></td>
<td>When true, the edges will have an invisible support node guiding the shape. This node is part of the
physics simulation. When false, there are a number of different approximations for smooth curves. Those
can be selected in the type property.
</td>
</tr>
<tr parent="smooth" class="hidden"> <tr parent="smooth" class="hidden">
<td class="indent">smooth.type</td> <td class="indent">smooth.type</td>
<td class="mid">String</td> <td class="mid">String</td>
<td class="mid"><code>'continuous'</code></td>
<td>Possible options: <code>'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal',
<td class="mid"><code>'dynamic'</code></td>
<td>Possible options: <code>'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal',
'vertical', 'curvedCW', 'curvedCCW'</code>. Take a look at our example 26 to see what these look like 'vertical', 'curvedCW', 'curvedCCW'</code>. Take a look at our example 26 to see what these look like
and pick the one that you like best! <i>These do not do anything for dynamic smooth curves</i>.
and pick the one that you like best!
<br><br>
When using dynamic, the edges will have an invisible support node guiding the shape. This node is part of the
physics simulation.
</td> </td>
</tr> </tr>
<tr parent="smooth" class="hidden"> <tr parent="smooth" class="hidden">
<td class="indent">smooth.roundness</td> <td class="indent">smooth.roundness</td>
<td class="mid">Number</td> <td class="mid">Number</td>
<td class="mid"><code>0.5</code></td> <td class="mid"><code>0.5</code></td>
<td>Accepted range: <code>0 .. 1.0</code>. This parameter tweaks the roundness of the static smooth curves.
<td>Accepted range: <code>0 .. 1.0</code>. This parameter tweaks the roundness of the smooth curves for all types EXCEPT dynamic.
</td> </td>
</tr> </tr>
<tr> <tr>

+ 61
- 0
examples/network/categories/edgeStyles/arrows.html View File

@ -0,0 +1,61 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
There are a lot of options with arrows! They can also be combined with dashed lines.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'},
{id: 6, label: 'Node 6'},
{id: 7, label: 'Node 7'},
{id: 8, label: 'Node 8'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 8, arrows:'to', dashes:true},
{from: 1, to: 3, arrows:'to'},
{from: 1, to: 2, arrows:'to, from'},
{from: 2, to: 4, arrows:'to, middle'},
{from: 2, to: 5, arrows:'to, middle, from'},
{from: 5, to: 6, arrows:{to:{scaleFactor:2}}},
{from: 6, to: 7, arrows:{middle:{scaleFactor:0.5},from:true}}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
<script src="../../../googleAnalytics.js"></script>
</body>
</html>

+ 67
- 0
examples/network/categories/edgeStyles/colors.html View File

@ -0,0 +1,67 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:800px;
}
</style>
</head>
<body>
<p>
There are a lot of options with colors. You can manually define a color or inherit the color from the nodes. You can set the opacity
to override any opacity given by a color. <b>IN ORDER TO USE THE OPACITY, BOTH THE NODES AND THE EDGES NEED COLORS IN HEX OR RGB</b>!
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 1, color:'#97C2FC'},
{id: 2, label: 2, color:'#FFFF00'},
{id: 3, label: 3, color:'#FB7E81'},
{id: 4, label: 4, color:'#7BE141'},
{id: 5, label: 5, color:'#6E6EFD'},
{id: 6, label: 6, color:'#C2FABC'},
{id: 7, label: 7, color:'#FFA807'},
{id: 8, label: 8, color:'#6E6EFD'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 8, color:{color:'red'}},
{from: 1, to: 3, color:'rgb(20,24,200)'},
{from: 1, to: 2, color:{color:'rgba(30,30,30,0.2)', highlight:'blue'}},
{from: 2, to: 4, color:{inherit:'to'}},
{from: 2, to: 5, color:{inherit:'from'}},
{from: 5, to: 6, color:{inherit:'both'}},
{from: 6, to: 7, color:{color:'#ff0000', opacity:0.3}},
{from: 6, to: 8, color:{opacity:0.3}},
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
<script src="../../../googleAnalytics.js"></script>
</body>
</html>

examples/network/categories/edgeStyles/styles.html → examples/network/categories/edgeStyles/dashes.html View File

@ -3,8 +3,8 @@
<head> <head>
<title>Network | Basic usage</title> <title>Network | Basic usage</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css"> <style type="text/css">
#mynetwork { #mynetwork {
@ -17,7 +17,7 @@
<body> <body>
<p> <p>
Create a simple network with some nodes and edges.
Playing with dashes.
</p> </p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
@ -29,15 +29,17 @@
{id: 2, label: 'Node 2'}, {id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'}, {id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'}, {id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
{id: 5, label: 'Node 5'},
{id: 6, label: 'Node 6'}
]); ]);
// create an array with edges // create an array with edges
var edges = new vis.DataSet([ var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
{from: 1, to: 3, dashes:true},
{from: 1, to: 2, dashes:[5,5]},
{from: 2, to: 4, dashes:[5,5,3,3]},
{from: 2, to: 5, dashes:[2,2,10,10]},
{from: 2, to: 6, dashes:false},
]); ]);
// create a network // create a network
@ -50,6 +52,6 @@
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
</script> </script>
<script src="../googleAnalytics.js"></script>
<script src="../../../googleAnalytics.js"></script>
</body> </body>
</html> </html>

+ 36
- 31
examples/network/categories/edgeStyles/smooth.html View File

@ -3,37 +3,39 @@
<head> <head>
<title>Network | Static smooth curves</title> <title>Network | Static smooth curves</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css"> <style type="text/css">
#mynetwork { #mynetwork {
width: 400px;
height: 400px;
width: 500px;
height: 500px;
border: 1px solid lightgray; border: 1px solid lightgray;
} }
</style> </style>
<script src="../googleAnalytics.js"></script>
<script src="../../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<h2>Static smooth curves</h2>
<h2>Smooth curves</h2>
<div style="width:700px; font-size:14px; text-align: justify;"> <div style="width:700px; font-size:14px; text-align: justify;">
All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected
nodes. There are multiple ways to determine the way this curve is drawn. This example shows the effect of the different nodes. There are multiple ways to determine the way this curve is drawn. This example shows the effect of the different
types. <br /> <br /> types. <br /> <br />
Drag the nodes around each other to see how the smooth curves are drawn for each setting. For animated system, we
Drag the node around to see how the smooth curves are drawn for each setting. For animated system, we
recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind
that the direction (the from and to) of the curve matters. that the direction (the from and to) of the curve matters.
<br /> <br /> <br /> <br />
When you select the dynamic type, you can see the interaction with the fixed node and the edge, any other type will not interact with other nodes.
<br /> <br />
</div> </div>
<p> <p>
Smooth curve type: Smooth curve type:
<select id="dropdownID">
<select id="dropdownID" onchange="update();">
<option value="continuous" selected="selected">continuous</option> <option value="continuous" selected="selected">continuous</option>
<option value="discrete">discrete</option> <option value="discrete">discrete</option>
<option value="diagonalCross">diagonalCross</option> <option value="diagonalCross">diagonalCross</option>
@ -42,10 +44,12 @@
<option value="vertical">vertical</option> <option value="vertical">vertical</option>
<option value="curvedCW">curvedCW</option> <option value="curvedCW">curvedCW</option>
<option value="curvedCCW">curvedCCW</option> <option value="curvedCCW">curvedCCW</option>
<option value="dynamic">dynamic</option>
<option value="none">none</option>
</select> </select>
</p> </p>
<p> <p>
Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider"> <input id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0 for the others)
Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider" onchange="update();"> <input id="roundnessScreen" style="width:30px;" value="0.5"> <br>(0.5 is max roundness for continuous, 1.0 for the others)
</p> </p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
@ -53,20 +57,18 @@
<script type="text/javascript"> <script type="text/javascript">
var dropdown = document.getElementById("dropdownID"); var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
var roundnessSlider = document.getElementById("roundnessSlider"); var roundnessSlider = document.getElementById("roundnessSlider");
roundnessSlider.onchange = update;
var roundnessScreen = document.getElementById("roundnessScreen"); 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: 2, label: 'Node 2', x:150, y:130, allowedToMoveX: true, allowedToMoveY: true}
{id: 1, label: 'Fixed node', x:0, y:0, fixed:true},
{id: 2, label: 'Drag me', x:150, y:130, physics:false},
{id: 3, label: 'Obstacle', x:80, y:-80, fixed:true, mass:5}
]; ];
// create an array with edges // create an array with edges
var edges = [ var edges = [
{from: 1, to: 2, style:"arrow"}
{from: 1, to: 2, arrows:'to'}
]; ];
// create a network // create a network
@ -76,17 +78,10 @@
edges: edges edges: edges
}; };
var options = { var options = {
physics:{
barnesHut: {
gravitationalConstant:0,
springConstant:0,
centralGravity: 0
}
},
physics:true,
edges: { edges: {
smooth: { smooth: {
dynamic: false,
type: '1'
type: 'continuous'
} }
} }
}; };
@ -94,16 +89,26 @@
function update() { function update() {
var type = dropdown.value; var type = dropdown.value;
var options;
var roundness = parseFloat(roundnessSlider.value); var roundness = parseFloat(roundnessSlider.value);
roundnessScreen.value = roundness; roundnessScreen.value = roundness;
var options = {
edges: {
smooth: {
type: type,
roundness: roundness
if (type === 'none') {
options = {
edges: {
smooth: false
} }
}
};
};
}
else {
options = {
edges: {
smooth: {
type: type,
roundness: roundness
}
}
};
}
network.setOptions(options); network.setOptions(options);
} }

+ 3
- 2
examples/network/categories/nodeStyles/colors.html View File

@ -17,7 +17,8 @@
<body> <body>
<p> <p>
Create a simple network with some nodes and edges.
Nodes can be all kinds of colors. This example shows all possible ways of defining colors. If you supply an object, the undefined fields will assume the default colors.
When supplying a hex or rgb format color, it will be parsed and variations will be created for highlight and hover. Edges with inheritColor take the border colors.
</p> </p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
@ -31,7 +32,7 @@
{id: 4, label:'rgba color', color: 'rgba(230,53,94,0.5)'}, {id: 4, label:'rgba color', color: 'rgba(230,53,94,0.5)'},
{id: 5, label:'colorObject', color: {background:'red', border:'blue'}}, {id: 5, label:'colorObject', color: {background:'red', border:'blue'}},
{id: 6, label:'colorObject + highlight', color: {background:'orange', border:'blue',highlight:{background:'red',border:'blue'}}}, {id: 6, label:'colorObject + highlight', color: {background:'orange', border:'blue',highlight:{background:'red',border:'blue'}}},
{id: 7, label:'colorObject + highlight + hover', color: {background:'orange', border:'blue',highlight:{background:'red',border:'blue'},hover:{background:'white',border:'red'}}}
{id: 7, label:'colorObject + highlight + hover', color: {background:'cyan', border:'blue',highlight:{background:'red',border:'blue'},hover:{background:'white',border:'red'}}}
]) ])
// create an array with edges // create an array with edges

+ 1
- 2
lib/network/modules/EdgesHandler.js View File

@ -79,8 +79,7 @@ class EdgesHandler {
}, },
smooth: { smooth: {
enabled: true, enabled: true,
dynamic: true,
type: "continuous",
type: "dynamic",
roundness: 0.5 roundness: 0.5
}, },
title:undefined, title:undefined,

+ 4
- 4
lib/network/modules/components/Edge.js View File

@ -200,9 +200,9 @@ class Edge {
let dataChanged = false; let dataChanged = false;
let changeInType = true; let changeInType = true;
if (this.edgeType !== undefined) { if (this.edgeType !== undefined) {
if (this.edgeType instanceof BezierEdgeDynamic && this.options.smooth.enabled === true && this.options.smooth.dynamic === true) {changeInType = false;}
if (this.edgeType instanceof BezierEdgeStatic && this.options.smooth.enabled === true && this.options.smooth.dynamic === false){changeInType = false;}
if (this.edgeType instanceof StraightEdge && this.options.smooth.enabled === false) {changeInType = false;}
if (this.edgeType instanceof BezierEdgeDynamic && this.options.smooth.enabled === true && this.options.smooth.type === 'dynamic') {changeInType = false;}
if (this.edgeType instanceof BezierEdgeStatic && this.options.smooth.enabled === true && this.options.smooth.type !== 'dynamic') {changeInType = false;}
if (this.edgeType instanceof StraightEdge && this.options.smooth.enabled === false) {changeInType = false;}
if (changeInType === true) { if (changeInType === true) {
dataChanged = this.edgeType.cleanup(); dataChanged = this.edgeType.cleanup();
@ -211,7 +211,7 @@ class Edge {
if (changeInType === true) { if (changeInType === true) {
if (this.options.smooth.enabled === true) { if (this.options.smooth.enabled === true) {
if (this.options.smooth.dynamic === true) {
if (this.options.smooth.type === 'dynamic') {
dataChanged = true; dataChanged = true;
this.edgeType = new BezierEdgeDynamic(this.options, this.body, this.labelModule); this.edgeType = new BezierEdgeDynamic(this.options, this.body, this.labelModule);
} }

+ 0
- 1
lib/network/modules/components/edges/util/EdgeBase.js View File

@ -258,7 +258,6 @@ class EdgeBase {
getColor(ctx) { getColor(ctx) {
let colorOptions = this.options.color; let colorOptions = this.options.color;
if (colorOptions.inherit !== false) { if (colorOptions.inherit !== false) {
// when this is a loop edge, just use the 'from' method // when this is a loop edge, just use the 'from' method
if (colorOptions.inherit === 'both' && this.from.id !== this.to.id) { if (colorOptions.inherit === 'both' && this.from.id !== this.to.id) {

+ 2
- 4
lib/network/options.js View File

@ -79,8 +79,7 @@ let allOptions = {
}, },
smooth: { smooth: {
enabled: {boolean}, enabled: {boolean},
dynamic: {boolean},
type: {string},
type: {string:['dynamic','continuous','discrete','diagonalCross','straightCross','horizontal','vertical','curvedCW','curvedCCW']},
roundness: {number}, roundness: {number},
__type__: {object,boolean} __type__: {object,boolean}
}, },
@ -384,8 +383,7 @@ let configureOptions = {
}, },
smooth: { smooth: {
enabled: true, enabled: true,
dynamic: true,
type: ['continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW'],
type: ['dynamic','continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW'],
roundness: [0.5, 0, 1, 0.05] roundness: [0.5, 0, 1, 0.05]
}, },
width: [1, 0, 30, 1] width: [1, 0, 30, 1]

+ 4
- 2
lib/util.js View File

@ -898,7 +898,10 @@ exports.hexToRGB = function(hex) {
* @returns {*} * @returns {*}
*/ */
exports.overrideOpacity = function(color,opacity) { exports.overrideOpacity = function(color,opacity) {
if (color.indexOf("rgb") != -1) {
if (color.indexOf("rgba") != -1) {
return color;
}
else if (color.indexOf("rgb") != -1) {
var rgb = color.substr(color.indexOf("(")+1).replace(")","").split(","); var rgb = color.substr(color.indexOf("(")+1).replace(")","").split(",");
return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + opacity + ")" return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + opacity + ")"
} }
@ -934,7 +937,6 @@ exports.RGBToHex = function(red,green,blue) {
exports.parseColor = function(color) { exports.parseColor = function(color) {
var c; var c;
if (exports.isString(color) === true) { if (exports.isString(color) === true) {
console.log(color, exports.isValidRGB(color))
if (exports.isValidRGB(color) === true) { if (exports.isValidRGB(color) === true) {
var rgb = color.substr(4).substr(0,color.length-5).split(',').map(function (value) {return parseInt(value)}); var rgb = color.substr(4).substr(0,color.length-5).split(',').map(function (value) {return parseInt(value)});
color = exports.RGBToHex(rgb[0],rgb[1],rgb[2]); color = exports.RGBToHex(rgb[0],rgb[1],rgb[2]);

Write Preview
Loading…
Cancel
Save