Skip to content

jillix/svg.connectable.js

Repository files navigation

svg.connectable.js

A JavaScript library for connecting SVG things.

svg.connectable.js

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:

<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

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.