jointjs
Version:
JavaScript diagramming library
73 lines (57 loc) • 1.8 kB
HTML
<html>
<head>
<meta charset="utf8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Port layouts demo</title>
<link rel="stylesheet" type="text/css" href="../../build/joint.css"/>
<style>
.joint-paper {
border: 1px solid gray;
width: 800px
}
</style>
</head>
<body>
<!-- Dependencies: -->
<script src="../../node_modules/jquery/dist/jquery.js"></script>
<script src="../../node_modules/lodash/lodash.js"></script>
<script src="../../node_modules/backbone/backbone.js"></script>
<script src="../../build/joint.js"></script>
<script>
/**
* HELPERS
*/
function createPaper() {
var graph = new joint.dia.Graph;
return new joint.dia.Paper({
el: $('<div/>').appendTo(document.body),
width: 800,
height: 400,
gridSize: 1,
perpendicularLinks: false,
model: graph,
linkView: joint.dia.LinkView.extend({
options: joint.util.assign({}, joint.dia.LinkView.prototype.options, {
doubleLinkTools: true,
linkToolsOffset: 40,
doubleLinkToolsOffset: 60
})
})
});
}
</script>
<script src="./port-layouts-defaults.js"></script>
<h2>Port layouts</h2>
<script src="./port-layouts.js"></script>
<h2>Labels</h2>
<script src="./port-layouts-labels.js"></script>
<h2>Z index</h2>
<script src="./port-z-index.js"></script>
<h2>Port rotation compensation</h2>
<script src="./port-layouts-comp.js"></script>
<h2>Port Snapping</h2>
<script src="./port-snap.js"></script>
<div>Try to connect the link to the element.</div>
</body>
</html>