Getting started
The connector
<html>
<head>
<script type="text/javascript" src="../js-graph-it.js"></script>
<link rel="stylesheet" type="text/css" href="../js-graph-it.css">
<style>
.block { position: absolute; }
</style>
</head>
<body onload="initPageObjects();">
<div class="canvas" id="mainCanvas"
style="width: 350px; height: 250px; border: 1px solid black;">
<h1 class="block" id="h1_block"
style="left: 10px; top: 10px;">
h1 block
</h1>
<h2 class="block" id="h2_block"
style="left: 200px; top: 100px;">
h2 block
</h2>
</body>
</html>
<head>
<script type="text/javascript" src="../js-graph-it.js"></script>
<link rel="stylesheet" type="text/css" href="../js-graph-it.css">
<style>
.block { position: absolute; }
</style>
</head>
<body onload="initPageObjects();">
<div class="canvas" id="mainCanvas"
style="width: 350px; height: 250px; border: 1px solid black;">
<h1 class="block" id="h1_block"
style="left: 10px; top: 10px;">
h1 block
</h1>
<h2 class="block" id="h2_block"
style="left: 200px; top: 100px;">
h2 block
</h2>
<div class="connector h1_block h2_block"></div>
</div></body>
</html>
A connector is declared using an html element of any kind. Just for the sake of clarity, I prefer using
div elements because js-graph-it translates the connector definition element in
a "chain" of div elements.
To declare that our div is a connector, we add the connector css class to it.
Now we have to specify the blocks to be connected. Let's start, adding the id of the source block as a css class.
Then, add the id of the destination block as a third css class.