/lines

Similar to jsplumb except lines.js uses a <SVG> -1 zIndex layer to draw it's lines.

Primary LanguageJavaScript

lines

alt text

Hey...

This can be used to point out things in a fancy user interface!
That's what we use it for.

alt text

lines is derived from raphael.js' graffle.js. What lines does is set the style of the element with the ID of "lines" to be absolutely positioned and with a z-index of -1, creating a raphael generated svg layer behind your front-end layout. In that svg layer, a line is drawn between two selected element. It works by calling the lines function. The following is a example:

in your html

<div id="lines"> </div>

in your javascript

var boxOne = Y.one('#box1');
var boxTwo = Y.one('#box2');

lines(boxOne, boxTwo);
Dependencies
Raphael.js 1.4.7
YUI 3.x

TO DO

  1. Fix any issues.
  2. Create a branch for the jQuery masses.
  3. Add more arugments to the lines function to allow specification of which side the line connects to.
  4. Online example with dragging and spawning lined elements.
  5. Create node.js module branch with YUI.node and/or jQuery.node.
  6. Determine if using raphael.js is nessesary for lines and if not, replace it with pure svg.
  7. Further field testing & feedback.
Thank You for checking lines out.