sbosse/jam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mon 21 Jul 22:43:21 CEST 2025

Browse Source
This commit is contained in:
sbosse 2025-07-21 22:58:36 +02:00
parent 40f02f9035
commit 3ebcec58e5
1 changed files with 216 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
js/dos/ext/vis/examples/network/data/dotLanguage/dotPlayground.html Normal file
View File

@ -0,0 +1,216 @@
<!doctype html>
<html>
<head>
<title>Network | DOT language playground</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font: 10pt sans;
line-height: 1.5em;;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
box-sizing: border-box;
overflow: hidden;
}
#header {
margin: 0;
padding: 10px;
box-sizing: border-box;
}
#contents {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
#left, #right {
position: absolute;
width: 50%;
height: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
#left {
top: 0;
left: 0;
}
#right {
top: 0;
right: 0;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
resize: none;
}
#draw {
padding: 5px 15px;
}
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
}
a:hover {
color: red;
}
</style>
<script src="../../../googleAnalytics.js"></script>
</head>
<body>
<div id="header">
<h1>DOT language playground</h1>
<p>
Play around with the DOT language in the textarea below, or select one of the following examples:
</p>
<p style="margin-left: 30px;">
<a href="#" class="example" data-url="data/simple.gv.txt">simple</a>,
<a href="#" class="example" data-url="data/computer_network.gv.txt">computer network</a>,
<a href="#" class="example" data-url="data/cellular_automata.gv.txt">cellular automata</a>,
<a href="#" class="example" data-url="graphvizGallery/fsm.gv.txt">fsm *</a>,
<a href="#" class="example" data-url="graphvizGallery/hello.gv.txt">hello *</a>,
<a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</a>,
<a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</a>,
<a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</a>,
<a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</a>,
<a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</a>,
<a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</a>,
<a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</a>,
<a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</a>
</p>
<p>
The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">GraphViz gallery</a>.
</p>
<div>
<button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
<span id="error"></span>
</div>
</div>
<div id="contents">
<div id="left">
<textarea id="data">
digraph {
node [shape=circle fontsize=16]
edge [length=100, color=gray, fontcolor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontcolor=white,
color=red,
]
}
</textarea>
</div>
<div id="right">
<div id="mynetwork"></div>
</div>
</div>
<script type="text/javascript">
// create a network
var container = document.getElementById('mynetwork');
var options = {
physics: {
stabilization: false,
barnesHut: {
springLength: 200
}
}
};
var data = {};
var network = new vis.Network(container, data, options);
$('#draw').click(draw);
$('a.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url)
.done(function(dotData) {
$('#data').val(dotData);
draw();
})
.fail(function () {
$('#error').html('Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below.');
resize();
});
});
$(window).resize(resize);
$(window).load(draw);
$('#data').keydown(function (event) {
if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
draw();
event.stopPropagation();
event.preventDefault();
}
});
function resize() {
$('#contents').height($('body').height() - $('#header').height() - 30);
}
function draw () {
try {
resize();
$('#error').html('');
// Provide a string with data in DOT language
data = vis.network.convertDot($('#data').val());
network.setData(data);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
var textarea = $('#data')[0];
if(textarea.setSelectionRange) {
textarea.focus();
textarea.setSelectionRange(pos, pos);
}
}
// show an error message
$('#error').html(err.toString());
}
}
</script>
</body>
</html>