A JavaScript library for connecting SVG things.
Following example can be tested in the following jsfiddle: https://jsfiddle.net/L2sjjc3b/80/
Example source code also in https://github.com/loredanacirstea/svg.connectable.js/tree/master/example.
This library depends on:
- SVG.js
- svg.draggy.js (note this is the @jillix fork of the original svg.draggable.js project)
Different from original jillix library:
- the connector can be any SVG Path element defined through use() (usually connectors are reused). See example. Note the two M points added for attachment precision.
- you can define the type of attachment (center, perifery) separate for source and target
- you can have straight/curved connectors - available for the 'default' connector.
- functions for changing the connection settings after initializing it.
- padEllipse function from jillix is used automatically for ellipses ('perifery' attachment).
Connects two elements.
-
Object
options
: An object containing any of the following fields: -
container
(SVGElement): The connector elements container. Defaults to source parent. -
markers
(SVGElement): The marker elements container. Defaults to source parent. -
sourceAttach
(String): Connector attachment for source element: 'center' / 'perifery'. Defaults to 'center' -
targetAttach
(String): Connector attachment for target element: 'center' / 'perifery'. Defaults to 'center' -
type
(String): Connector type: 'straight' or 'curved'. Defaults to 'straight' -
marker
(String/SVGElement): Can be: an SVGElement / 'null' / 'default'. Defaults to 'null' -
color
(String): Connector color. Defaults to '#000000' -
SVGElement
elmTarget
: The target SVG element.
- Object The connectable object containing:
source
(SVGElement): The source element.target
(SVGElement): The target element.connector
(SVGElement): The connector element.marker
(SVGElement): The marker element.computeConnectorCoordinates
(Function)update
(Function)setConnectorColor
(Function)setMarker
(Function)setConnectorAttachment
(Function)setConnector
(Function)setType
(Function)
The function that computes the new coordinates. It can be overriden with a custom function.
- Connectable
con
: The connectable instance.
- Object Returns the new SVG PathArray for the connector.
Updates the line coordinates.
Sets the connector and marker color.
- String
color
: The new color. - Connectable
c
: The connectable instance. Optional
Sets the marker
- SVGElement/String
marker
: New marker element / 'null' / 'default'. - SVGElement
markers
: Group parent for markers. Defaults to source.parent - Connectable
c
: The connectable instance. Optional.
Sets the connector's type of attachment.
- String
element
: 'source' / 'target' - String
type
: 'center' / 'perifery'. For paths, the 'perifery' option takes the PathArray point which is closest to the source/target attachment point. For ellipses, it uses the jillix algorithm for padEllipse (padding area aorund the ellipse). For all other, it uses the 4 middle side points from the bbox() rectangle. - Connectable
c
: The connectable instance. Optional.
Sets the connector.
- SVGElement/String
connector
: New connector element / 'default'. - Connectable
c
: The connectable instance. Optional.
Sets the connector and marker color.
- String
type
: Connector type for default connector: 'straight' / 'curved'. Defaults to 'straight' - Connectable
c
: The connectable instance. Optional.
- File an issue in the repository and provide an example for it (you can fork the example jsfiddle to reproduce the bug) or:
- Fork the project in your account and create a new branch:
your-great-feature
. - Commit your changes in that branch.
- Open a pull request, and reference the initial issue in the pull request message.
See the LICENSE file.