jointjs
Version:
JavaScript diagramming library
79 lines (65 loc) • 1.83 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>dia.Paper - interactive - elementMove disabled</title>
<link rel="stylesheet" type="text/css" href="../../../../css/lib/joint.min.css"/>
<style>
.joint-paper {
border: 1px solid gray;
width: 800px
}
body {
margin: 0;
}
</style>
</head>
<body>
<!-- Dependencies: -->
<script src="../../../../js/lib/jquery.min.js"></script>
<script src="../../../../js/lib/lodash.min.js"></script>
<script src="../../../../js/lib/backbone.min.js"></script>
<script src="../../../../js/lib/joint.min.js"></script>
</body>
<script>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('<div/>').appendTo(document.body),
width: 190,
height: 90,
gridSize: 1,
interactive: {
elementMove: true,
addLinkFromMagnet: false
},
model: graph
});
var Circle = joint.dia.Element.define('i.Circle', {
markup: '<g><circle/><text/></g>>',
attrs: {
circle: {
magnet: 'passive',
r: 20
},
text: {
fill: 'white',
fontSize: 8,
xAlignment: 'middle',
yAlignment: 'middle'
}
}
});
graph.addCell(new Circle()
.position(36, 34)
.attr('circle/fill', '#333333')
);
graph.addCell(new Circle()
.position(147, 50)
.attr('circle/fill', '#a6a6a6')
.attr('circle/r', 30)
.attr('circle/magnet', true)
.attr('text/text', 'MAGNET')
);
</script>
</html>