svg.connectable.js

A JavaScript library for connecting SVG things.

CDN

The library is available on CDNJS as well. To use it, just do:

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.connectable.js/2.0.1/svg.connectable.min.js"></script>

Usage

This library depends on:

• SVG.js
• svg.draggy.js

<script src="path/to/svg.js"></script>
<script src="path/to/svg.draggy.js"></script>
<script src="path/to/svg.connectable.js"></script>
<!-- Or from CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.connectable.js/2.0.1/svg.connectable.min.js"></script>
-->
<div class="graph"></div>
<script>
    var svg = new SVG(document.querySelector(".graph")).size("100%", 500);
    var links = svg.group();
    var markers = svg.group();
    var nodes = svg.group();
 
    var g1 = nodes.group().translate(300, 200).draggy();
    g1.circle(80).fill("#C2185B");
 
    var g2 = nodes.group().translate(100, 200).draggy();
    g2.circle(50).fill("#E91E63");
 
    var g3 = nodes.group().translate(200, 400).draggy();
    g3.circle(100).fill("#FF5252");
 
    g1.connectable({
        container: links,
        markers: markers
    }, g2).setLineColor("#5D4037");
 
    g2.connectable({
        padEllipse: true
    }, g3).setLineColor("#5D4037")
</script> 

This Demo in jsfiddle: https://jsfiddle.net/u8qck0h3/

Documentation

connectable(options, elmTarget)

Connects two elements. If called multiple times, the lines will be curved.

Params

• Object options: An object containing the following fields:
• container (SVGElement): The line elements container.
• markers (SVGElement): The marker elements container.
• padEllipse (Boolean): If true, the line coordinates will be placed with a padding.
• SVGElement elmTarget: The target SVG element.

Return

• Object The connectable object containing:
• source (SVGElement): The source element.
• target (SVGElement): The target element.
• line (SVGElement): The line element.
• marker (SVGElement): The marker element.
• computeLineCoordinates (Function)
• update (Function)
• setLineColor (Function)

computeLineCoordinates(con)

The function that computes the new coordinates. It can be overriden with a custom function.

Params

• Connectable con: The connectable instance.

Return

• Object An object containing the x1, x2, y1 and y2 coordinates.

update()

Updates the line coordinates.

setLineColor(color, c)

Sets the line color.

Params

• String color: The new color.
• Connectable c: The connectable instance.

How to contribute

Have an idea? Found a bug? See how to contribute.

License

See the LICENSE file.