jointjs
Version:
JavaScript diagramming library
59 lines (56 loc) • 2.41 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Directed Graph Layout</title>
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>
<template id="link-controls-template">
<div id="link-controls" class="controls">
<label for="labelpos">LabelPos:</label>
<select id="labelpos">
<option value="c">c</option>
<option value="r">r</option>
<option value="l">l</option>
</select>
<label for="minlen">MinLen:</label>
<input id="minlen" type="range" min="1" max="5" value="1"/>
<label for="weight">Weight:</label>
<input id="weight" type="range" min="1" max="10" value="1"/>
<label for="labeloffset">LabelOffset:</label>
<input id="labeloffset" type="range" min="1" max="10" value="10"/>
</div>
</template>
<body>
<div id="layout-controls" class="controls">
<label for="ranker">Ranker:</label>
<select id="ranker">
<option value="network-simplex" selected>network-simplex</option>
<option value="tight-tree">tight-tree</option>
<option value="longest-path">longer-path</option>
</select>
<label for="rankdir">RankDir:</label>
<select id="rankdir">
<option value="TB" selected>TB</option>
<option value="BT">BT</option>
<option value="RL">RL</option>
<option value="LR">LR</option>
</select>
<label for="align">Align:</label>
<select id="align">
<option value="UL" selected>UL</option>
<option value="UR">UR</option>
<option value="DL">DL</option>
<option value="DR">DR</option>
</select>
<label for="ranksep">RankSep:</label>
<input id="ranksep" type="range" min="1" max="100" value="50"/>
<label for="edgesep">EdgeSep:</label>
<input id="edgesep" type="range" min="1" max="100" value="50"/>
<label for="nodesep">NodeSep:</label>
<input id="nodesep" type="range" min="1" max="100" value="50"/>
</div>
<div id="paper"></div>
<script src="bundle.js"></script>
</body>
</html>