<connection-line> is a simple way to draw connector line between any two DOM-elements. For given targets a and b, it draws smooth connection curve according to properties. It does not make any sense as a model, it is just a renderer.
Use as a custom element:
$ browserify -r connection-line -o bundle.js
<script src="./bundle.js"></script>
<link rel="import" href="./node_modules/connection-line"/>
<div id="a"></div>
<div id="b"></div>
<connection-line from="#a" to="#b"></connection-line>
<connection-line from="0,0" to="100,100"></connection-line>or as a separate module:
var Connector = require('connection-line');
var connector = new Connector({
//selector, element or array with relative coords
from: [0, 0],
to: '.b',
//smoothness of a line, 0 - straight line, 1 - smooth line
smoothness: 0.5,
//symbols on the line start/end/center
lineEnd: '➜',
lineStart: '•',
lineMiddle: '✘',
//force initial directions. By default the best one is chosen
fromDirection: 'top',
toDirection: 'bottom',
//padding around the targets for initial direction
padding: 20
});
document.body.appendChild(connector.element);
//call update() when content has changed
window.addEventListener('resize', function () {
connector.update();
});