Browse Source

Some tweaks of the DOT playground

flowchartTest
jos 9 years ago
parent
commit
7ec9c91f31
2 changed files with 2837 additions and 2823 deletions
  1. +2725
    -2722
      dist/vis.js
  2. +112
    -101
      examples/network/categories/data/dotLanguage/dotPlayground.html

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


+ 112
- 101
examples/network/categories/data/dotLanguage/dotPlayground.html View File

@ -15,16 +15,44 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
color: #4d4d4d; color: #4d4d4d;
box-sizing: border-box;
overflow: hidden;
} }
#frame {
width: 100%;
height: 99%;
}
#frame td {
#header {
margin: 0;
padding: 10px; padding: 10px;
box-sizing: border-box;
}
#contents {
height: 100%; 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 { #error {
color: red; color: red;
} }
@ -33,73 +61,65 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #d3d3d3; border: 1px solid #d3d3d3;
box-sizing: border-box;
resize: none;
} }
#mynetwork { #mynetwork {
float: left;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #d3d3d3; border: 1px solid #d3d3d3;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
}
textarea.example {
display: none;
} }
</style> </style>
<script src="../../../../googleAnalytics.js"></script> <script src="../../../../googleAnalytics.js"></script>
</head> </head>
<body> <body>
<table id="frame">
<col width="50%">
<col width="50%">
<tr>
<td colspan="2" style="height: 50px;">
<h1>DOT language playground</h1>
<p id="warning" style="color: red; display: none;">
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.
</p>
<script>
if (location.href.substr(0, 5) == 'file:') {
$('#warning').show();
}
</script>
<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 *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</sup></a>
</p>
<p>
The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">gallery of GraphViz</a>.
</p>
<div>
<br>
<button id="draw">Draw</button>
<span id="error"></span>
</div>
</td>
</tr>
<tr>
<td>
<textarea id="data">
<div id="header">
<h1>DOT language playground</h1>
<p id="warning" style="color: red; display: none;">
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.
</p>
<script>
if (location.href.substr(0, 5) == 'file:') {
$('#warning').show();
}
</script>
<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 *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</sup></a>
</p>
<p>
The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">gallery of GraphViz</a>.
</p>
<div>
<br>
<button id="draw">Draw</button>
<span id="error"></span>
</div>
</div>
<div id="contents">
<div id="left">
<textarea id="data">
digraph { digraph {
node [shape=circle fontsize=16] node [shape=circle fontsize=16]
edge [length=100, color=gray, fontcolor=black] edge [length=100, color=gray, fontcolor=black]
@ -115,43 +135,14 @@ digraph {
color=red, color=red,
] ]
} }
</textarea>
</td>
<td>
<div id="mynetwork"></div>
</td>
</tr>
</table>
</textarea>
</div>
<div id="right">
<div id="mynetwork"></div>
</div>
</div>
<script type="text/javascript"> <script type="text/javascript">
var btnDraw = document.getElementById('draw');
var txtData = document.getElementById('data');
var txtError = document.getElementById('error');
btnDraw.onclick = draw;
// resize the network when window resizes
window.onresize = function () {
network.redraw()
};
$('button.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url).done(function(dotData) {
txtData.value = dotData;
draw();
});
});
$('a.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url).done(function(dotData) {
txtData.value = dotData;
draw();
});
});
$(window).load(draw);
// create a network // create a network
var container = document.getElementById('mynetwork'); var container = document.getElementById('mynetwork');
var options = { var options = {
@ -165,13 +156,32 @@ digraph {
var data = {}; var data = {};
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
// parse and draw the data
$('#draw').click(draw);
$('a.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url).done(function(dotData) {
$('#data').val(dotData);
draw();
});
});
$(window).resize(resize);
$(window).load(function () {
resize();
draw();
});
function resize() {
$('#contents').height($('body').height() - $('#header').height() - 30);
}
function draw () { function draw () {
try { try {
txtError.innerHTML = '';
$('#error').html('');
// Provide a string with data in DOT language // Provide a string with data in DOT language
data = vis.network.convertDot(txtData.value);
data = vis.network.convertDot($('#data').val());
network.setData(data); network.setData(data);
} }
@ -180,14 +190,15 @@ digraph {
var match = /\(char (.*)\)/.exec(err); var match = /\(char (.*)\)/.exec(err);
if (match) { if (match) {
var pos = Number(match[1]); var pos = Number(match[1]);
if(txtData.setSelectionRange) {
txtData.focus();
txtData.setSelectionRange(pos, pos);
var textarea = $('#data')[0];
if(textarea.setSelectionRange) {
textarea.focus();
textarea.setSelectionRange(pos, pos);
} }
} }
// show an error message // show an error message
txtError.innerHTML = err.toString();
$('#error').html(err.toString());
} }
} }
</script> </script>

Loading…
Cancel
Save