139 lines
3.5 KiB
HTML
139 lines
3.5 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" type="text/css" href="arg-graph.min.css" />
|
|
<style>
|
|
.container {
|
|
min-height: 500px;
|
|
margin: 20px;
|
|
}
|
|
|
|
.panel,
|
|
.half-panel {
|
|
border: 1px dashed #aaa;
|
|
-ms-border-radius: 10px;
|
|
border-radius: 10px;
|
|
background-color: rgba(250, 250, 250, 0.93);
|
|
overflow: hidden;
|
|
width: 46%;
|
|
overflow-y: scroll;
|
|
float: left;
|
|
margin: 10px;
|
|
height: 80%;
|
|
}
|
|
textarea {
|
|
margin: 5%;
|
|
width: 90%;
|
|
height: 75%;
|
|
}
|
|
|
|
.half-panel {
|
|
width: 22%;
|
|
}
|
|
|
|
h3,
|
|
button,
|
|
#newItem,
|
|
#output {
|
|
margin: 20px 20px 5px 20px;
|
|
}
|
|
|
|
#output {
|
|
white-space: pre;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.arg-Graph_item {
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
background-image: none;
|
|
padding: 4px 10px;
|
|
border-radius: 3px;
|
|
border: 1px solid transparent;
|
|
color: white;
|
|
border-color: transparent;
|
|
background: #26c6da;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="arg-Graph">
|
|
<div
|
|
id="item1"
|
|
class="arg-Graph_item"
|
|
style="left: 248.859px; top: 22px"
|
|
data-neighbors="item2,item3"
|
|
>
|
|
Start
|
|
<span class="arg-Graph_connector-handler"></span>
|
|
<span class="arg-Graph_delete-item"></span>
|
|
</div>
|
|
<div
|
|
id="item2"
|
|
class="arg-Graph_item"
|
|
style="left: 416.859px; top: 148px"
|
|
data-neighbors="item4"
|
|
>
|
|
Decision
|
|
<span class="arg-Graph_connector-handler"></span>
|
|
<span class="arg-Graph_delete-item"></span>
|
|
</div>
|
|
<div
|
|
id="item3"
|
|
class="arg-Graph_item"
|
|
style="left: 80.8594px; top: 139px"
|
|
data-neighbors="item4"
|
|
>
|
|
Action
|
|
<span class="arg-Graph_connector-handler"></span>
|
|
<span class="arg-Graph_delete-item"></span>
|
|
</div>
|
|
<div
|
|
id="item4"
|
|
class="arg-Graph_item"
|
|
style="left: 169.859px; top: 247px"
|
|
data-neighbors="item5"
|
|
>
|
|
Action
|
|
<span class="arg-Graph_connector-handler"></span>
|
|
<span class="arg-Graph_delete-item"></span>
|
|
</div>
|
|
<div
|
|
id="item5"
|
|
class="arg-Graph_item"
|
|
style="left: 358.859px; top: 342px"
|
|
>
|
|
End
|
|
<span class="arg-Graph_connector-handler"></span>
|
|
<span class="arg-Graph_delete-item"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script
|
|
src="https://code.jquery.com/jquery-1.12.4.min.js"
|
|
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script src="arg-graph.min.js" type="text/javascript"></script>
|
|
<script>
|
|
var argGraph;
|
|
$(function () {
|
|
argGraph = $(".arg-Graph").ArgGraph({
|
|
onGraphChange: function () {
|
|
var json = argGraph.exportJson();
|
|
$("#output").html(document.createTextNode(json));
|
|
},
|
|
});
|
|
|
|
// $("#import").on("click", function () {
|
|
// var json = $("#input").html();
|
|
// argGraph.importJson(json);
|
|
// });
|
|
|
|
// var json = argGraph.exportJson();
|
|
// $("#output").html(document.createTextNode(json));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|