galads/icehrm
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Changes for v22.0.0.OS

Browse Source
This commit is contained in:
Thilina Hasantha
2018-04-28 03:04:36 +02:00
parent d105ee3512
commit 8ebf28fbcb
471 changed files with 160244 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
web/bower_components/vis/examples/network/labels/labelAlignment.html vendored Normal file
View File

@@ -0,0 +1,70 @@
<!doctype html>
<html>
<head>
<title>Network | Label alignment</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:600px;
}
</style>
</head>
<body>
<p>Labels of edges can be aligned to edges in various ways.</p>
<p>Text-alignment within node labels can be 'left' or 'center', other font alignments not implemented.</p>
<p>Label alignment (placement of label &quot;box&quot;) for nodes (top, bottom, left, right, inside) is
planned but not in vis yet.</p>
<p>The click event is captured and displayed to illustrate how the clicking on labels works.
You can drag the nodes over each other to see how this influences the click event values.
</p>
<div id="mynetwork"></div>
<pre id="eventSpan"></pre>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3:\nLeft-Aligned', font: {'face': 'Monospace', align: 'left'}},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5\nLeft-Aligned box', shape: 'box',
font: {'face': 'Monospace', align: 'left'}}
];
// create an array with edges
var edges = [
{from: 1, to: 2, label: 'middle', font: {align: 'middle'}},
{from: 1, to: 3, label: 'top', font: {align: 'top'}},
{from: 2, to: 4, label: 'horizontal', font: {align: 'horizontal'}},
{from: 2, to: 5, label: 'bottom', font: {align: 'bottom'}}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {physics:false};
var network = new vis.Network(container, data, options);
network.on("click", function (params) {
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
});
</script>
</body>
</html>

57
web/bower_components/vis/examples/network/labels/labelBackground.html vendored Normal file
View File

@@ -0,0 +1,57 @@
<!doctype html>
<html>
<head>
<title>Network | Label alignment</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
p {
max-width:600px;
}
</style>
</head>
<body>
<p>Labels can have any color background.</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1', font: {background: 'red'}},
{id: 2, label: 'Node 2', font: {background: 'white'}},
{id: 3, label: 'Node 3', font: {background: 'cyan'}},
{id: 4, label: 'Node 4', font: {background: 'lime'}},
{id: 5, label: 'Node 5', font: {background: 'pink'}}
];
// create an array with edges
var edges = [
{from: 1, to: 2, label: 'label1', font: {background: '#ff0000'}},
{from: 1, to: 3, label: 'label2', font: {background: 'yellow'}},
{from: 2, to: 4, label: 'label3', font: {background: 'lime'}},
{from: 2, to: 5, label: 'label3', font: {background: 'pink'}}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {nodes:{font:{strokeWidth:0}}, edges:{font:{strokeWidth:0}}};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

61
web/bower_components/vis/examples/network/labels/labelColorAndSize.html vendored Normal file
View File

@@ -0,0 +1,61 @@
<!doctype html>
<html>
<head>
<title>Network | Label stroke</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
background:#d1d1d1;
}
p {
max-width:600px;
}
</style>
</head>
<body>
<p>The style of the edges can be fully customized.</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1', font: '12px arial red'},
{id: 2, label: 'Node 2', font: {size:12, color:'lime', face:'arial'}},
{id: 3, label: 'Node 3', font: '18px verdana blue'},
{id: 4, label: 'Node 4', font: {size:12, color:'red', face:'sans', background:'white'}},
{id: 5, label: 'Node 5', font: {size:15, color:'red', face:'courier', strokeWidth:3, strokeColor:'#ffffff'}}
];
// create an array with edges
var edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes : {
shape: 'dot',
size: 10
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

63
web/bower_components/vis/examples/network/labels/labelMargins.html vendored Normal file
View File

@@ -0,0 +1,63 @@
<!doctype html>
<html>
<head>
<title>Network | Label margins</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
p {
max-width:600px;
}
</style>
</head>
<body>
<p>The labels of box, circle, database, icon and text nodes may have different margin values.
Top, right, bottom and left margins may be different for each node.</p>
<p>Setting the margin value in the network's nodes property sets it as the default.</p>
<p>Setting a the value to a number uses that number for the margins. If the value is an object, a different value for each margin will be set.</p>
<p>Note that negative values appropriately push labels outside the node.
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{ id: 1, label: 'Default Value\n(5)', x: -150, y: -150 },
{ id: 2, label: 'Single Value\n(25)', margin: 20, x: 0, y: 0 },
{ id: 3, label: 'Different Values\n(10, 20, 40, 30)', margin: { top: 10, right: 20, bottom: 40, left: 30 }, x: 120, y: 120},
{ id: 4, label: 'A Negative Value\n(10, 20, 40, -50)', margin: { top: 10, right: 20, bottom: 30, left: -20 }, x: 300, y: -300}
];
// create an array with edges
var edges = [
{from: 1, to: 2},
{from: 2, to: 3},
{from: 3, to: 4}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'box'
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

115
web/bower_components/vis/examples/network/labels/labelMultifont.html vendored Normal file
View File

@@ -0,0 +1,115 @@
<!doctype html>
<html>
<head>
<title>Network | Multifont Labels</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
code {
font-size: 15px;
}
p {
max-width: 600px;
}
.indented {
margin-left: 30px;
}
table {
border-collapse: collapse;
font-family: sans-serif;
}
table code {
background: #dddddd;
}
th, td {
border: 1px solid #aaaaaa;
text-align: center;
padding: 5px;
font-weight: normal;
}
</style>
</head>
<body>
<p>Node and edge labels may be marked up to be drawn with multiple fonts.</p>
<div id="mynetwork"></div>
<p>The value of the <code>font.multi</code> property may be set to <code>'html'</code>, <code>'markdown'</code> or a boolean.</p>
<table class="indented">
<tr><th colspan='4'>Embedded Font Markup</th></tr>
<tr><th rowspan=2>font mod</th><th colspan=3><code>font.multi</code> setting</th></tr>
<tr><th><code>'html'</code> or <code>true</code></th><th><code>'markdown'</code> or <code>'md'</code></th><th><code>false<code></th></tr>
<tr><th>bold</th><td><code>&lt;b&gt;</code> ... <code>&lt;/b></code></td><td><code>&nbsp;*</code> ... <code>*&nbsp;</code></td><td>n/a</td></tr>
<tr><th>italic</th><td><code>&lt;i&gt;</code> ... <code>&lt;/i></code></td><td><code>&nbsp;_</code> ... <code>_&nbsp;</code></td><td>n/a</td></tr>
<tr><th>mono-spaced</th><td><code>&lt;code&gt;</code> ... <code>&lt;/code&gt;</code></td><td><code>&nbsp;`</code> ... <code>`&nbsp;</code></td><td>n/a</td></tr>
</table>
<p>
The <code>html</code> and <code>markdown</code> rendering is limited: bolds may be embedded in italics, italics may be embedded in bolds, and mono-spaced may be embedded in bold or italic, but will not be altered by those font mods, nor will embedded bolds or italics be handled.
The only entities that will be observed in html are <code>&amp;lt;</code> and <code>&amp;amp;</code> and in <code>markdown</code> a backslash will escape the following character (including a backslash) from special processing.
Any font mod that is started in a label line will be implicitly terminated at the end of that line.
While this interpretation may not exactly match <i>official</i> rendering standards, it is a consistent compromise for drawing multifont strings in the non-multifont html canvas element underlying vis.
</p>
<p>This implies that four additional sets of font properties will be recognized in label processing.</p>
<p class="indented"><code>font.bold</code> designates the font used for rendering bold font mods.
<br/><code>font.ital</code> designates the font used for rendering italic font mods.
<br/><code>font.boldital</code> designates the font used for rendering bold-<b><i>and</i></b>-italic font mods.
<br/><code>font.mono</code> designates the font used for rendering monospaced font mods.</p>
<p>Any font mod without a matching font will be rendered using the normal <code>font</code> (or default) value.</p>
<p>The <code>font.multi</code> and extended font settings may be set in the network's <code>nodes</code> or <code>edges</code> properties, or on individual nodes and edges.
Node and edge label fonts are separate.</p>
<script type="text/javascript">
var nodes = [
{ id: 1, label: 'This is a\nsingle-font label', x: -120, y: -120 },
{ id: 2, font: { multi: true }, label: '<b>This</b> is a\n<i>default</i> <b><i>multi-</i>font</b> <code>label</code>', x: -40, y: -40 },
{ id: 3, font: { multi: 'html', size: 20 }, label: '<b>This</b> is an\n<i>html</i> <b><i>multi-</i>font</b> <code>label</code>', x: 40, y: 40 },
{ id: 4, font: { multi: 'md', face: 'georgia' }, label: '*This* is a\n_markdown_ *_multi-_ font* `label`', x: 120, y: 120},
];
var edges = [
{from: 1, to: 2, label: "single to default"},
{from: 2, to: 3, font: { multi: true }, label: "default to <b>html</b>" },
{from: 3, to: 4, font: { multi: "md" }, label: "*html* to _md_" }
];
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
edges: {
font: {
size: 12
}
},
nodes: {
shape: 'box',
font: {
bold: {
color: '#0077aa'
}
}
},
physics: {
enabled: false
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

61
web/bower_components/vis/examples/network/labels/labelStroke.html vendored Normal file
View File

@@ -0,0 +1,61 @@
<!doctype html>
<html>
<head>
<title>Network | Label stroke</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
background:#d1d1d1;
}
p {
max-width:600px;
}
</style>
</head>
<body>
<p>The stroke of labels is fully can have a width and color. Edgelabels by default have a white stroke for clarity.</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1', font: {strokeWidth: 3, strokeColor: 'white'}},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
// create an array with edges
var edges = [
{from: 1, to: 2, label: 'edgeLabel', font: {strokeWidth: 2, strokeColor : '#00ff00'}},
{from: 1, to: 3, label: 'edgeLabel'},
{from: 2, to: 4},
{from: 2, to: 5}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes : {
shape: 'dot',
size: 10
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

52
web/bower_components/vis/examples/network/labels/multilineText.html vendored Normal file
View File

@@ -0,0 +1,52 @@
<!doctype html>
<html>
<head>
<title>Network | Multiline text</title>
<style type="text/css">
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function draw() {
// create some nodes
var nodes = [
{id: 1, label: 'Node in\nthe center', shape: 'text', font:{strokeWidth:4}},
{id: 2, label: 'Node\nwith\nmultiple\nlines', shape: 'circle'},
{id: 3, label: 'This is a lot of text\nbut luckily we can spread\nover multiple lines', shape: 'database'},
{id: 4, label: 'This is text\non multiple lines', shape: 'box'},
{id: 5, label: 'Little text', shape: 'ellipse'}
];
// create some edges
var edges = [
{from: 1, to: 2, color: 'red', width: 3, length: 200}, // individual length definition is possible
{from: 1, to: 3, dashes:true, width: 1, length: 200},
{from: 1, to: 4, width: 1, length: 200, label:'I\'m an edge!'},
{from: 1, to: 5, arrows:'to', width: 3, length: 200, label:'arrows\nare cool'}
];
// 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>
</head>
<body onload="draw()">
<div id="mynetwork"></div>
</body>
</html>