# svg.connectable.js

> A JavaScript library for connecting SVG things.

Latest version **2.0.1** (published 2017-10-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install svg.connectable.js
pnpm add svg.connectable.js
yarn add svg.connectable.js
bun add svg.connectable.js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2017-10-01 |
| First published | 2014-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 104 |
| Author | jillix |
| Maintainers | ionicabizau |
| Keywords | svg, connectable, js |

## Links

- npm: https://www.npmjs.com/package/svg.connectable.js
- Repository: https://github.com/jillix/svg.connectable.js
- Issues: https://github.com/jillix/svg.connectable.js/issues
- npm.io page: https://npm.io/package/svg.connectable.js

## Dependencies (4)

- [idy](https://npm.io/package/idy.md) ^1.0.0
- [deffy](https://npm.io/package/deffy.md) ^2.0.0
- [set-or-get](https://npm.io/package/set-or-get.md) ^1.0.0
- [iterate-object](https://npm.io/package/iterate-object.md) ^1.1.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 2.0.1 (latest) — 2017-10-01
- 2.0.0 — 2015-08-18
- 1.3.0 — 2015-07-15
- 1.2.0 — 2015-05-21
- 1.1.0 — 2015-04-27
- 1.0.1 — 2014-12-28
- 1.0.0 — 2014-12-28

## README

<!---------------------------------------------------------------------------->
<!-- STOP, LOOK & LISTEN!                                                   -->
<!-- ====================                                                   -->
<!-- Do NOT edit this file directly since it's generated from a template    -->
<!-- file, using https://github.com/IonicaBizau/node-blah                   -->
<!--                                                                        -->
<!-- If you found a typo in documentation, fix it in the source files       -->
<!-- (`lib/*.js`) and make a pull request.                                  -->
<!--                                                                        -->
<!-- If you have any other ideas, open an issue.                            -->
<!--                                                                        -->
<!-- Please consider reading the contribution steps (CONTRIBUTING.md).      -->
<!-- * * * Thanks! * * *                                                    -->
<!---------------------------------------------------------------------------->

















# svg.connectable.js
A JavaScript library for connecting SVG things.


[![svg.connectable.js](http://i.imgur.com/VPZjM3v.png)](http://jillix.github.io/svg.connectable.js)


## CDN
The library is available on [CDNJS](https://cdnjs.com/libraries/svg.connectable.js) as well. To use it, just do:

```html
<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](https://github.com/wout/svg.js)
 - [svg.draggy.js](https://github.com/jillix/svg.draggy.js)

```html
<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)](#computelinecoordinatescon)
 - [`update` (Function)](#update)
 - [`setLineColor` (Function)](#setlinecolorcolor-c)

### `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][contributing].


## License
See the [LICENSE](/LICENSE) file.


[contributing]: /CONTRIBUTING.md
[docs]: /DOCUMENTATION.md

---
_Source: https://npm.io/package/svg.connectable.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._