Getting started
Routing the connector
<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 draggable" id="h1_block"
style="left: 10px; top: 10px;">
h1 block
</h1>
<h2 class="block draggable" id="h2_block"
style="left: 200px; top: 100px;">
h2 block
</h2>
<div class="connector h1_block h2_block down_start down_end">
<img src="arrow.gif" class="connector-start">
<img src="arrow.gif" class="connector-end">
<label class="source-label">start</label>
<label class="middle-label">middle</label>
<label class="destination-label">end</label>
</div>
</div>
</body>
</html>
The next step in our tutorial is to set which side of the source and destination blocks the connector must be attached to.
I general, js-graph-it tries to choose the routing strategy that fits the best, depending on the blocks positions. Nevertheless, we can specify the preferred start and end orientations for the connector. This means that js-graph-it will consider this parameters choosing the best fitting strategy.
It is possible to set the preferred "start orientation" by adding a css class which name is composed by
the direction followed by "_start". For example down_start.
We can set the preferred "end orientation" exactly the same way, using the suffix "_end". For
example down_end.
Note: connectors are oriented, i.e.: they have a direction from the source block to the destination, thus, "orientation" means a direction out of "up", "down", "right" and "left" the connector must go to. Don't confuse this direction with the side of the block you want the connector to be attached to!