Draw SVG Paths Between Two Elements – leader-line

Category: Javascript , Recommended | October 15, 2018
Author: anseki
Views Total: 3,264
Official Page: Go to website
Last Update: October 15, 2018
License: MIT

Preview:

Draw SVG Paths Between Two Elements – leader-line

Description:

leader-line is a JavaScript library used to draw customizable SVG based, straight/arc/fluid/magnet/grid paths between two elements. Ideal for creating flowchart and workflow style diagrams.

How to use it:

Load the minified version of the leader-line library in the html document.

<script src="leader-line.min.js"></script>

Draw a default line between two elements you specify.

<div id="start">Start</div>
<div id="destination">Destination</div>
var myLine = new LeaderLine(
    document.getElementById('start'),
    document.getElementById('destination')
);

API methods.

/*
  Names of `options`      Keys of API (properties of `newOptions`)
  ----------------------------------------
  anchorSE                start, end
  lineColor               color
  lineSize                size
  socketSE                startSocket, endSocket
  socketGravitySE         startSocketGravity, endSocketGravity
  plugSE                  startPlug, endPlug
  plugColorSE             startPlugColor, endPlugColor
  plugSizeSE              startPlugSize, endPlugSize
  lineOutlineEnabled      outline
  lineOutlineColor        outlineColor
  lineOutlineSize         outlineSize
  plugOutlineEnabledSE    startPlugOutline, endPlugOutline
  plugOutlineColorSE      startPlugOutlineColor, endPlugOutlineColor
  plugOutlineSizeSE       startPlugOutlineSize, endPlugOutlineSize
  labelSEM                startLabel, endLabel, middleLabel
*/
myLine.setOptions(options)

// EffectName: none, fade, draw
// animOptions: {duration: 300, timing: 'linear'}
myLine.show(EffectName, animOptions)
myLine.hide(EffectName, animOptions)

// re-positions the line
myLine.position()

// removes the line
myLine.remove()

Changelog:

10/15/2018

  • v1.0.4

You Might Be Interested In:


One thought on “Draw SVG Paths Between Two Elements – leader-line

  1. Jinghui Niu

    Wonderful design! Only problem I have encountered is when involving an element inside a shadow dom, it reports error, saying the element has disconnected.

    Reply

Leave a Reply