jointjs
Version:
JavaScript diagramming library
112 lines (101 loc) • 3.74 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Directed Graph Layout - ES6</title>
<link rel="stylesheet" type="text/css" href="../../build/joint.css">
<style>
#paper {
border: 1px solid lightgray;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 100px;
}
.controls {
margin: auto;
text-align: center;
padding: 10px 0;
border-bottom: 1px solid lightgray;
}
</style>
</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>
<!---------------------------------------------------------------------------------------------------------------
I. ES6 "native" script type module
needs a server to run, e.g.
`cd ../.. && http-server -p 8081`
open http://localhost:8081/demo/layout/directed-graph.html
-->
<script defer src="../../node_modules/es-module-shims/dist/es-module-shims.js"></script>
<script type="importmap-shim">
{
"imports": {
"backbone": "/build/esm/backbone.mjs",
"underscore": "/build/esm/lodash.mjs",
"lodash": "/build/esm/lodash.mjs",
"dagre": "/build/esm/dagre.mjs",
"jquery": "/build/esm/jquery.mjs"
}
}
</script>
<script src="../../scripts/checkCompatibility.js"></script>
<script type="module-shim" src="src/directed-graph.mjs"></script>
<!---------------------------------------------------------------------------------------------------------------
II. ES5 - webpack bundle
build: `npm run build`
open file:///<PATH TO JOINTJS>/demo/layout/directed-graph.html
-->
<!--
<script defer type="text/javascript" src="dist/directed-graph-bundle.js"></script>
-->
<!--------------------------------------------------------------------------------------------------------------->
</body>
</html>