1. creates two similar blocks with three ports
2. afterwards you can connect them by links
3. note: at paper constructor we set default link style as smooth
4. at sample run strangely I had to put manually some library files from JointJS library into scripts directory. without this it fails.
- JointJS uses jquery. I had to use JointJS.js from their downloads page. it contains jquery
- JointJS uses backbone. I had to take it from their source control site distribution and put into scripts directory.
- In order to use models it's not enough standard JointJS.js file. models implementation is at joint.shapes.devs.js. I had to take it from their source control site distribution and put into scripts directory.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="scripts/joint.css" />
<script src="scripts/joint.js"></script>
<script src="scripts/joint.shapes.devs.js"></script>
<title>Hello World</title>
</head>
<script type="text/javascript">
function models() {
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper(
{
el: $('#myHolder'),
width: 650,
height: 200,
gridSize: 1,
model: graph,
defaultLink: new joint.dia.Link({
attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' } },
smooth: true
})
});
var m1 = new joint.shapes.devs.Model({
position: { x: 50, y: 50 },
size: { width: 90, height: 90 },
inPorts: ['in1', 'in2'],
outPorts: ['out'],
attrs: {
'.label': { text: 'Model', 'ref-x': .4, 'ref-y': .2 },
rect: { fill: '#2ECC71' },
'.inPorts circle': { fill: '#16A085' },
'.outPorts circle': { fill: '#E74C3C' }
}
});
var m2 = new joint.shapes.devs.Model({
position: { x: 250, y: 50 },
size: { width: 90, height: 90 },
inPorts: ['in1', 'in2'],
outPorts: ['out'],
attrs: {
'.label': { text: 'Model', 'ref-x': .4, 'ref-y': .2 },
rect: { fill: '#2ECC71' },
'.inPorts circle': { fill: '#16A085' },
'.outPorts circle': { fill: '#E74C3C' }
}
});
graph.addCell(m1);
graph.addCell(m2);
}
}
</script>
<body onload="models()">
<div id="myHolder"></div>
</body>
</html>
